/* Before / after section (homepage + panel page).
   Computer: the two real photos side by side. Phone: one frame with Előtte | Utána tabs. */
.ba{padding:60px 0 56px;background:#f5fbfe}
.ba-head{text-align:center;max-width:640px;margin:0 auto 26px}
.ba-head h2{margin:6px 0 10px}
.ba-head p{color:#567a96;margin:0 auto}
.ba-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;max-width:860px;margin:0 auto}
.ba-fig{position:relative;margin:0;border-radius:18px;overflow:hidden;background:#eaf6fb;box-shadow:0 22px 44px -26px rgba(11,45,78,.45);aspect-ratio:3/2}
.ba-fig img{display:block;width:100%;height:100%;object-fit:cover}
.ba-tag{position:absolute;top:14px;left:14px;padding:6px 12px;border-radius:999px;font:700 .74rem/1.2 'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;background:rgba(11,45,78,.78);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ba-after .ba-tag{background:#E08B3F}
.ba-arrow{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:#0b2d4e;font-size:1.3rem;box-shadow:0 8px 20px -10px rgba(11,45,78,.5)}
.ba-note{text-align:center;font-size:.85rem;color:#567a96;margin:18px auto 0;max-width:640px}
.ba-cta{text-align:center;margin-top:22px}
.ba-proof{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:16px auto 0;max-width:640px}
.ba-proof .ba-note{flex-basis:100%;margin:0 0 2px}
.ba-thumb{display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border:1px solid #d7e8f1;border-radius:10px;background:#fff;color:#0b2d4e;text-decoration:none;font:600 .8rem 'DM Sans',sans-serif}
.ba-thumb img{width:30px;height:40px;object-fit:cover;border-radius:6px;display:block}
.ba-thumb:hover{border-color:#17b8b8}
.ba-tabs{display:none}
.ba .ba-wrap{max-width:1280px}
@media (min-width:761px) and (max-width:999px){.ba-pair{max-width:640px}}
/* wide screens: text on the left, the two photos on the right */
@media (min-width:1000px){
  .ba-wrap{display:grid;grid-template-columns:minmax(240px,300px) 1fr;column-gap:44px;grid-template-rows:1fr auto auto auto 1fr;grid-template-areas:". pair" "head pair" "note pair" "cta pair" ". pair";column-gap:56px;align-items:start}
  .ba-head{grid-area:head;text-align:left;margin:0;max-width:none}
  .ba-head p{margin:0}
  .ba-pair{grid-area:pair;align-self:center;width:100%;max-width:960px;margin:0 0 0 auto;gap:16px}
  .ba-proof{grid-area:note;justify-content:flex-start!important;margin:18px 0 0!important}
  .ba-proof .ba-note{text-align:left}
  .ba-cta{grid-area:cta;text-align:left;margin-top:22px}
}
@media (max-width:760px){
  .ba{padding:40px 0 36px}
  .ba-head{margin-bottom:18px}
  .ba-tabs{display:flex;justify-content:center;gap:6px;margin:0 auto 14px;padding:4px;background:#fff;border:1px solid #eaf6fb;border-radius:999px;width:max-content;box-shadow:0 6px 16px -10px rgba(11,45,78,.35)}
  .ba-tab{border:0;background:transparent;padding:9px 22px;border-radius:999px;font:600 .92rem 'DM Sans',sans-serif;color:#567a96;cursor:pointer}
  .ba-tab.is-on{background:#0b2d4e;color:#fff}
  .ba-pair{display:block;position:relative;max-width:420px}
  .ba-fig{aspect-ratio:3/2}
  .ba-head p{font-size:.98rem}
  .ba-arrow{display:none}
  .ba-pair .ba-fig{transition:opacity .6s ease}
  .ba-pair .ba-after{position:absolute;inset:0}
  .ba-pair[data-state="before"] .ba-after{opacity:0;pointer-events:none}
  .ba-pair[data-state="after"] .ba-before{opacity:0}
  .ba-note{font-size:.8rem;margin-top:12px}
  .ba-cta{margin-top:16px}
}
@media (prefers-reduced-motion:reduce){.ba-pair .ba-fig{transition:none}}