/* AdLookout landing — sections-a: 1 (mi az AdLookout #mi), 2 (káosz→rend #problema), 3 (szalag), 4 (funkciók #funkciok).
   Az AI szekció (#ai) a sections-d régióba került, azt ott másik agent építi újra "d-" osztályokkal.
   Osztályok "a-" előtaggal, hogy ne ütközzenek a sections-b (6–10) osztályaival. Csak transform/opacity animál. */

/* ===================== közös segédek ===================== */
.a-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.a-reveal.a-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.a-reveal{opacity:1!important;transform:none!important;transition:none!important}}

/* platform sor — cím + ikon-csempe rács (#mi és a dark hirdetések panel is használja) */
.a-plat{margin-top:clamp(28px,5vh,44px);display:flex;flex-direction:column;align-items:center;gap:14px}
.a-plat-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink45)}
.a-panel-dark .a-plat-label{color:rgba(250,246,238,.55)}

/* =====================================================================
   IKON-CSEMPE MINTA (pf-tiles) — megosztott, újrahasználható a teljes oldalon.
   Kicsi (~56–64px), elegáns, enyhén papírszerű csempe: halvány off-white alap finom
   szemcsés textúrával (data-URI feTurbulence háttérkép), hajszál-keret, kemény, eltolt
   "kivágott papír" árnyék, és csempénként egy apró, véletlenszerű (±1.5°) elforgatás —
   NEM rajzolt/kartonos, csak visszafogott utalás a papír-regiszterre. Ikon + név alatta.
   Jelölés:
     <div class="pf-tiles">
       <div class="pf-tile"><span class="pf-tile-ico"><svg class="pf-ico"><use href="#p-facebook"/></svg></span>
         <span class="pf-tile-name">Facebook</span><i class="pf-tile-dot" aria-hidden="true"></i></div>
       <div class="pf-tile is-soon"><span class="pf-tile-ico"><svg class="pf-ico"><use href="#p-tiktok"/></svg></span>
         <span class="pf-tile-name">TikTok</span><span class="pf-tile-soon">hamarosan</span></div>
       <div class="pf-tile is-soon is-optional"><span class="pf-tile-ico"><svg class="pf-ico"><use href="#i-offline"/></svg></span>
         <span class="pf-tile-name">Offline hirdetések</span><span class="pf-tile-soon">opcionálisan<br>becsatornázható</span></div>
     </div>
   Sötét alapon: <div class="pf-tiles on-dark">.
   Belépő animáció: a sections-a.js egy közös megfigyelő (initPfTiles) minden ".pf-tiles"
   elemre felteszi az "is-in" osztályt, amint az első ~35%-a látszik — ekkor pattannak be
   a csempék, soronként késleltetve (a --i egyéni tulajdonság alapján). Ha nincs saját JS,
   az "is-in" osztály kézzel is rárakható. */
.pf-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,1.6vw,16px);width:100%;max-width:760px;margin:0 auto}
.pf-tile{display:flex;flex-direction:column;align-items:center;gap:6px;width:clamp(56px,6vw,64px);position:relative;
  opacity:0;transform:rotate(var(--rot,0deg)) scale(.5);transition:opacity .45s var(--ease),transform .55s var(--spring);transition-delay:calc(var(--i,0) * 65ms)}
.pf-tile:nth-child(4n+1){--rot:-1.4deg}
.pf-tile:nth-child(4n+2){--rot:1.1deg}
.pf-tile:nth-child(4n+3){--rot:-0.7deg}
.pf-tile:nth-child(4n+4){--rot:1.4deg}
.pf-tiles.is-in .pf-tile{opacity:1;transform:rotate(var(--rot,0deg)) scale(1)}
/* papírcsempe: pasztell alap (platformonként más szín, a paper tónusba keverve) + finom
   feTurbulence szemcse (ugyanaz a textúra, mint a base.css ételillusztráció-papírja),
   szabálytalan vágott él (clip-path, csempénként más), kemény "levágott papír" árnyék
   filter:drop-shadow-dzsel, mert a box-shadow-t a clip-path lenyesné */
.pf-tile-ico{position:relative;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;
  background-color:var(--bone);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.3' intercept='.79'/%3E%3CfeFuncG type='linear' slope='.3' intercept='.79'/%3E%3CfeFuncB type='linear' slope='.3' intercept='.79'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-blend-mode:multiply;background-size:180px 180px;
  clip-path:polygon(1.5% 3%,97% 0%,100% 96%,3% 100%);
  filter:drop-shadow(2px 3px 0 rgba(17,17,17,.12))}
.pf-tile:nth-child(3n+2) .pf-tile-ico{clip-path:polygon(0% 2%,96% 0%,100% 98%,3% 100%)}
.pf-tile:nth-child(3n+3) .pf-tile-ico{clip-path:polygon(2% 0%,99% 3%,98% 100%,1% 97%)}
/* platformonkénti pasztell szín — az élő csempék DOM-sorrendje mindig Facebook, Instagram,
   Messenger, WhatsApp, Audience Network (lásd index.html), ezért nth-child alapján osztható */
.pf-tile:nth-child(1) .pf-tile-ico{background-color:color-mix(in srgb,var(--sky) 42%,var(--paper))}
.pf-tile:nth-child(2) .pf-tile-ico{background-color:color-mix(in srgb,var(--blush) 42%,var(--paper))}
.pf-tile:nth-child(3) .pf-tile-ico{background-color:color-mix(in srgb,var(--lilac) 42%,var(--paper))}
.pf-tile:nth-child(4) .pf-tile-ico{background-color:color-mix(in srgb,var(--sage) 42%,var(--paper))}
.pf-tile:nth-child(5) .pf-tile-ico{background-color:color-mix(in srgb,var(--butter) 42%,var(--paper))}
.pf-ico{width:clamp(22px,2.6vw,26px);height:clamp(22px,2.6vw,26px);color:var(--ink70)}
.pf-tile-name{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:-.005em;color:var(--ink70);text-align:center;line-height:1.15}
.pf-tile-dot{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:var(--pine);border:2px solid var(--bone);
  box-shadow:0 0 0 0 rgba(31,77,63,.5);animation:a-plat-pulse 2.2s ease-out infinite}
@keyframes a-plat-pulse{0%{box-shadow:0 0 0 0 rgba(31,77,63,.45)}70%{box-shadow:0 0 0 5px rgba(31,77,63,0)}100%{box-shadow:0 0 0 0 rgba(31,77,63,0)}}
/* szellem-csempék: halvány papírfolt (nem üres/átlátszó), szaggatott kerettel */
.pf-tile.is-soon .pf-tile-ico{background-color:var(--paper);opacity:.8;border:1.4px dashed var(--rule);filter:none;clip-path:polygon(1% 2%,98% 0%,100% 97%,2% 100%)}
.pf-tile.is-soon .pf-ico{color:var(--ink45)}
.pf-tile.is-soon .pf-tile-name{color:var(--ink45)}
/* kézírásos "hamarosan"/"opcionálisan becsatornázható" felirat a szellem-csempék alatt — nem chip, hanem Caveat sor */
.pf-tile-soon{font-family:var(--hand);font-weight:600;font-size:13.5px;line-height:1.05;color:var(--ink45);margin-top:-2px}
.pf-tile.is-optional .pf-tile-soon{color:var(--rust)}
/* sötét alapon: a pasztell csempék változatlanul világosak maradnak (pine alapon is jól látszanak),
   csak a szellem-csempék és feliratok színe vált világosra */
.pf-tiles.on-dark .pf-tile-dot{border-color:var(--night)}
.pf-tiles.on-dark .pf-tile.is-soon .pf-tile-ico{background-color:rgba(250,246,238,.06);border-color:rgba(250,246,238,.24)}
.pf-tiles.on-dark .pf-tile.is-soon .pf-ico,.pf-tiles.on-dark .pf-tile.is-soon .pf-tile-name{color:rgba(250,246,238,.42)}
.pf-tiles.on-dark .pf-tile-name{color:rgba(250,246,238,.68)}
.pf-tiles.on-dark .pf-tile-soon{color:rgba(250,246,238,.5)}
@media (prefers-reduced-motion:reduce){
  .pf-tile{opacity:1!important;transform:rotate(var(--rot,0deg)) scale(1)!important;transition:none!important}
  .pf-tile-dot{animation:none}
}

/* kézírásos (Caveat) jegyzet, ami a rajzolt regiszter melegségét hozza a kártyák mellé */
.a-note{font-family:var(--hand);font-weight:600;font-size:18px;line-height:1.1;color:var(--rust);
  transform:rotate(-2.2deg);margin:0 0 8px;text-align:center}

/* ===================== 1. Mi az AdLookout? #mi ===================== */
.a-mi{position:relative;background:var(--bone);padding:clamp(80px,13vh,132px) var(--gutter) clamp(64px,10vh,104px)}
.a-mi-wrap{max-width:880px;text-align:center}
.a-mi-lead{margin-top:14px;font-size:clamp(22px,2.8vw,32px);line-height:1.3;font-variation-settings:'opsz' 144}
.a-mi-lead em{font-style:normal;color:var(--rust)}

.a-mi-flow{position:relative;margin:clamp(44px,7vh,72px) auto 0;max-width:760px}
.a-mi-line{position:relative;height:2px;background:var(--rule);border-radius:2px;margin:0 60px 34px}
.a-mi-line-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--orange);border-radius:2px;transition:width 1.1s var(--ease)}
.a-mi-dot{position:absolute;top:50%;left:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px var(--bone);transition:left 1.1s var(--ease)}
.a-mi-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:left}
.a-mi-step{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(.15s + var(--i,0) * 160ms)}
.a-mi-n{display:block;font-family:var(--sans);font-weight:800;font-size:15.5px;color:var(--ink);margin-bottom:6px}
.a-mi-step p{margin:0;font-family:var(--sans);font-weight:500;font-size:14px;line-height:1.45;color:var(--ink70)}
.a-mi-flow.a-in .a-mi-line-fill{width:100%}
.a-mi-flow.a-in .a-mi-dot{left:100%}
.a-mi-flow.a-in .a-mi-step{opacity:1;transform:none}

@media (max-width:640px){
  .a-mi-steps{grid-template-columns:1fr;gap:20px}
  .a-mi-line{margin:0 20px 26px}
}
@media (prefers-reduced-motion:reduce){
  .a-mi-line-fill{transition:none;width:100%}
  .a-mi-dot{transition:none;left:100%}
  .a-mi-step{opacity:1!important;transform:none!important;transition:none!important}
}

/* ===================== 2. Káosz → rend #problema ===================== */
.a-problem{position:relative;background:var(--paper)}
.a-problem-pin{height:320vh}
.a-problem-view{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:96px var(--gutter) 40px}

.a-scraps{position:absolute;inset:0;z-index:1;pointer-events:none}
.a-scrap{position:absolute;left:0;top:0;width:var(--w,96px);will-change:transform,opacity}
.a-scrap-paper{background:#fff;padding:5px 5px 7px;border-radius:6px;box-shadow:2px 3px 0 rgba(17,17,17,.08)}
.a-scrap-img{border-radius:3px;aspect-ratio:1/.8;display:grid;place-items:center}
.a-scrap-img svg{width:70%;height:70%}
.a-scrap-ln{height:4px;border-radius:3px;background:#e7e1d4;margin-top:5px;width:82%}
.a-scrap-ln.short{width:52%;margin-top:4px}
.a-scrap-tag{position:absolute;top:-8px;left:6px;z-index:1;font-family:var(--mono);font-size:8px;letter-spacing:.12em;background:var(--ink);color:#fff;padding:2px 5px;border-radius:3px}
.a-scrap-note{font-family:var(--hand);font-weight:600;font-size:18px;line-height:1.05;color:var(--ink70);background:#fffaf0;padding:9px 10px;border-radius:2px;
  clip-path:polygon(1% 4%,38% 0,99% 3%,100% 55%,98% 97%,52% 100%,2% 98%,0 46%)}

/* a Pötty, ami mágnesként húzza be a papírdarabokat, majd elnyílik belőle az ablak */
.a-mag-dot{position:absolute;left:50%;top:58%;width:19px;height:19px;margin:-9.5px 0 0 -9.5px;border-radius:50%;background:var(--orange);z-index:2;
  pointer-events:none;opacity:0;will-change:transform,opacity;box-shadow:0 6px 16px rgba(242,103,34,.35)}
.a-mag-halo{position:absolute;inset:-16px;border-radius:50%;border:1.5px solid rgba(242,103,34,.45);opacity:0}

.a-problem-copy{position:relative;z-index:3;text-align:center;max-width:720px}
.a-problem-h{position:relative;height:2.3em;min-height:150px}
.a-problem-h span{position:absolute;inset:0;display:block;font-size:clamp(28px,4.2vw,54px);line-height:1.08;font-variation-settings:'opsz' 144}
.a-problem-h em{color:var(--rust)}
.a-h-b em{color:var(--orange)}
.a-problem-sub{display:block;margin-top:14px;font-family:var(--sans);font-weight:600;font-size:clamp(13px,1.3vw,15px);letter-spacing:0;color:var(--ink45)}

.a-window{position:relative;z-index:3;width:min(92vw,980px);margin-top:22px;background:var(--white);border-radius:18px;border:1px solid var(--hair);box-shadow:0 30px 70px rgba(17,17,17,.12);
  padding:0 clamp(14px,2.4vw,26px) clamp(16px,2.4vw,26px);opacity:0;transform:scale(.92);will-change:transform,opacity}
.a-window-bar{display:flex;align-items:center;justify-content:space-between;height:48px;border-bottom:1px solid var(--hair);margin:0 calc(-1 * clamp(14px,2.4vw,26px)) 16px;padding:0 clamp(14px,2.4vw,26px)}
.a-window-bar .wm{font-size:17px}
.a-brandchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:700;font-size:13px;background:var(--bone);border-radius:999px;padding:5px 11px 5px 7px}
.a-brandchip i{width:12px;height:12px;border-radius:50%;background:#d9342b}
.a-window-top{margin-bottom:14px}
.a-window-top h3{font-size:clamp(22px,2.4vw,30px);font-weight:400}
.a-window-top h3 em{font-style:italic}
.a-window-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.a-wcard{background:var(--white);border-radius:14px;border:1px solid var(--hair);padding:8px 8px 16px;opacity:0;transform:translateY(14px);will-change:transform,opacity;box-shadow:0 6px 18px rgba(17,17,17,.05)}
.a-wimg{border-radius:9px;aspect-ratio:16/10;display:grid;place-items:center;margin-bottom:12px}
.a-wimg svg{width:46%;height:70%}
.a-wcard p{font-family:var(--sans);font-weight:600;font-size:clamp(14.5px,1.25vw,17px);line-height:1.35;color:var(--ink70);padding:0 6px;letter-spacing:-.01em}
.a-wcard b{color:var(--ink);font-weight:800}
.a-wcard-hi{border-color:var(--orange);box-shadow:0 0 0 3px rgba(242,103,34,.14),0 12px 28px rgba(242,103,34,.16);position:relative}
.a-wcard-hi::after{content:"";position:absolute;top:14px;right:14px;width:10px;height:10px;border-radius:50%;background:var(--orange)}
.a-wcard-hi.a-idle{animation:a-hi-pulse 3.2s ease-in-out infinite}
@keyframes a-hi-pulse{0%,100%{box-shadow:0 0 0 3px rgba(242,103,34,.12),0 12px 28px rgba(242,103,34,.14)}50%{box-shadow:0 0 0 6px rgba(242,103,34,.2),0 16px 34px rgba(242,103,34,.24)}}

@media (max-width:640px){
  .a-problem-pin{height:280vh}
  .a-window-cards{grid-template-columns:1fr;gap:8px}
  .a-wcard{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;padding:6px}
  .a-wimg{margin:0;aspect-ratio:1}
  .a-wcard p{font-size:14px;padding:0}
  .a-wcard-hi::after{top:8px;right:8px}
  .a-problem-h{min-height:190px}
}

/* reduced motion: végállapot azonnal, nincs hosszú pin-görgetés */
.a-problem.a-reduced .a-problem-pin{height:auto}
.a-problem.a-reduced .a-problem-view{position:relative;height:auto;min-height:100vh;padding-top:120px}
.a-problem.a-reduced .a-scraps,.a-problem.a-reduced .a-mag-dot{display:none}
.a-problem.a-reduced .a-h-a{display:none}
.a-problem.a-reduced .a-h-b{position:relative;opacity:1;transform:none}
.a-problem.a-reduced .a-problem-h{height:auto;min-height:0}
.a-problem.a-reduced .a-window{opacity:1;transform:none}
.a-problem.a-reduced .a-wcard{opacity:1;transform:none}

/* ===================== 3. Szalag ===================== */
.a-ticker{position:relative;background:var(--ink);overflow:hidden;padding:22px 0;transform:rotate(-1.4deg) scale(1.04);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.a-ticker-track{display:flex;width:max-content;will-change:transform}
.a-ticker-set{display:inline-block;white-space:nowrap;font-family:var(--mono);font-weight:700;font-size:clamp(13px,1.6vw,17px);letter-spacing:.1em;color:var(--bone);padding-right:2.2em}
.a-ticker-set b{color:var(--orange);font-weight:700}

/* ===================== 4. Funkciók #funkciok ===================== */
.a-feat{position:relative;background:var(--bone)}
.a-feat-pin{height:520vh}
.a-feat-view{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;overflow:hidden}
.a-feat-head{position:relative;z-index:3;text-align:center;padding:104px var(--gutter) 18px;flex:none}
.a-feat-head h2{font-size:clamp(26px,3.4vw,44px);margin-top:8px}
.a-feat-head h2 em{color:var(--orange)}
.a-feat-rail{max-width:900px;margin:26px auto 0;position:relative}
.a-feat-steps{list-style:none;display:flex;justify-content:space-between;margin:0 0 12px;padding:0}
.a-feat-steps li{font-family:var(--sans);font-weight:700;font-size:12px;color:var(--ink45);letter-spacing:.02em;transition:color .35s}
.a-feat-steps li::before{content:attr(data-n);display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink45);margin-bottom:3px;transition:color .35s}
.a-feat-steps li.a-cur{color:var(--ink)}
.a-feat-steps li.a-cur::before{color:var(--orange)}
.a-feat-rail-line{position:relative;height:2px;background:var(--rule);border-radius:2px}
.a-feat-rail-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--orange);border-radius:2px}
.a-feat-rail-dot{position:absolute;top:auto;bottom:-5.5px;left:0;width:13px;height:13px;margin-top:0;margin-left:-6.5px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px var(--bone);transition:left .05s linear}

.a-feat-track{position:relative;z-index:2;flex:1;display:flex;height:100%;will-change:transform}
.a-panel{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.a-panel-in{width:100%;max-width:1080px;margin:0 auto;padding:0 var(--gutter) 40px;text-align:center}
.a-panel-in .eyebrow{display:block;margin-bottom:10px}
.a-panel-in h3{font-size:clamp(24px,3.2vw,38px);line-height:1.1;margin-bottom:clamp(22px,4vh,40px)}
.a-panel-in h3 em{color:var(--orange)}
.a-panel-note{margin-top:clamp(18px,3.4vh,30px);font-size:14.5px;color:var(--ink70);max-width:52ch;margin-inline:auto}

/* -- panel 1: termékek -- */
.a-shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.a-prod{position:relative;background:var(--white);border-radius:16px;border:1px solid var(--hair);box-shadow:var(--shadow);padding:16px 14px;text-align:left;
  display:flex;flex-direction:column;gap:8px;animation:a-float 5.5s ease-in-out infinite}
.a-prod:nth-child(2){animation-delay:-1.3s}.a-prod:nth-child(3){animation-delay:-2.8s}.a-prod:nth-child(4){animation-delay:-4s}
@keyframes a-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.a-prod-img{width:100%;aspect-ratio:1/.8;border-radius:10px;display:grid;place-items:center}
.a-prod-img svg{width:56%;height:56%}
.a-prod-name{font-family:var(--sans);font-weight:700;font-size:13.5px;margin-top:2px}
.a-prod-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;margin-top:2px;font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.01em;color:var(--pine);
  background:#e3ebe6;border-radius:999px;padding:4px 10px 4px 8px}
.a-prod-chip::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--pine)}
.a-new-tag{position:absolute;top:-9px;right:10px;display:flex;align-items:center;gap:3px;background:var(--orange);color:#fff;font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.1em;
  padding:4px 9px 4px 7px;border-radius:999px;box-shadow:0 6px 14px rgba(242,103,34,.35);transform:scale(0) rotate(-8deg);opacity:0}
.a-new-tag::before{content:'✦';font-family:var(--sans);font-size:10px;line-height:1}
.a-panel-in.a-seen .a-prod-new .a-new-tag{animation:a-pop .5s var(--spring) .5s forwards}
@keyframes a-pop{to{transform:scale(1) rotate(-8deg);opacity:1}}

/* -- panel 1: három funkció-elem ikonnal (weboldal / új termék / összekötés) -- */
.a-pfeats{list-style:none;margin:clamp(18px,3.4vh,30px) auto 0;padding:0;max-width:700px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
.a-pfeat{display:flex;align-items:flex-start;gap:10px}
.a-pfeat-ico{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--bone);color:var(--orange)}
.a-pfeat-ico svg{width:18px;height:18px}
.a-pfeat p{margin:0;padding-top:6px;font-family:var(--sans);font-size:13.5px;line-height:1.4;color:var(--ink70)}
@media (max-width:640px){.a-pfeats{grid-template-columns:1fr;gap:14px}}

/* -- panel 2: dark hirdetések -- */
.a-panel-dark{background:var(--night);color:var(--bone)}
.a-panel-dark .eyebrow{color:rgba(250,246,238,.55)}
.a-panel-dark .a-panel-note{color:rgba(250,246,238,.62);margin-top:12px}
/* a plusz platform- és mérés-sor miatt kompaktabb, hogy a panel a viewportba férjen */
.a-panel-dark .a-panel-in h3{margin-bottom:clamp(12px,2vh,22px)}
.a-panel-dark .a-plat{margin-top:12px;gap:7px}
.a-dark-stage{position:relative;margin:0 auto;max-width:860px}
.a-dark-eyes{width:52px;height:auto;color:var(--bone);margin:0 auto 12px;display:block;overflow:visible}
/* ADL.buildMark({eyesOnly:true}) szűrője kihagyja az "Ad" betűket (gl.eye === undefined, nem -1) —
   itt elrejtjük ami nem a .eye csoport, hogy csak a két szem látsszon (hero.js nem módosítható) */
.a-dark-eyes > *:not(.eye){display:none}
.a-dark-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:9px;border-radius:16px;overflow:hidden}
.a-dark-card{position:relative;background:#10302a;border:1px solid rgba(250,246,238,.1);border-radius:12px;aspect-ratio:1/.82;display:grid;place-items:center}
.a-dark-icon{display:block;width:clamp(32px,4vw,52px);height:clamp(32px,4vw,52px)}
@media (max-width:640px){.a-dark-grid{grid-template-columns:repeat(2,1fr)}}
.a-dark-card svg{width:100%;height:100%;opacity:.5}
.a-dark-tag{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;color:var(--orange);border:1px solid rgba(242,103,34,.5);border-radius:4px;padding:2px 5px}
.a-flashlight{position:absolute;inset:0;pointer-events:none;border-radius:16px;
  background:radial-gradient(220px 220px at var(--fx,50%) var(--fy,50%),rgba(255,255,255,.14),rgba(255,255,255,.03) 45%,rgba(0,0,0,.72) 72%);
  mix-blend-mode:screen}

/* -- panel 3: célzás és elérés — strukturált adat-tábla a hirdetéskártya körül.
   Rács (nem szabad/véletlen pozicionálás!): 3 oszlop × 3 sor, a középső oszlopban (mindhárom
   soron át) az elérés-számláló + a hirdetéskártya, a 4 sarokban egy-egy fehér adatkártya
   (Korosztály, Nemek, Lokációk, Érdeklődés). A kártyákat vékony narancs vonal köti a
   hirdetéshez — a végpontokat a js/sections-a.js méri (a kártyák és a hirdetés tényleges
   szélei alapján), a "kirajzolódás" a stroke-dasharray/-dashoffset trükkel animál. */
.a-board{position:relative;max-width:800px;margin:clamp(20px,3.4vh,30px) auto 0;
  display:grid;grid-template-columns:minmax(180px,224px) minmax(148px,184px) minmax(180px,224px);
  grid-template-rows:auto auto auto;column-gap:22px;row-gap:12px;align-items:center}
.a-board-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.a-line{fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
.a-line[data-line="age"]{transition-delay:0s}
.a-line[data-line="gender"]{transition-delay:.15s}
.a-line[data-line="loc"]{transition-delay:.3s}
.a-line[data-line="interest"]{transition-delay:.45s}

.a-qcard{position:relative;z-index:2;background:var(--white);border-radius:16px;border:1px solid var(--hair);box-shadow:var(--shadow);
  padding:14px 16px;opacity:0;transform:translateY(14px) scale(.94);transition:opacity .5s var(--ease),transform .55s var(--spring)}
.a-board.is-in .a-qcard{opacity:1;transform:none}
.a-qcard-age{grid-column:1;grid-row:1;transition-delay:.05s}
.a-qcard-gender{grid-column:3;grid-row:1;transition-delay:.2s}
.a-qcard-loc{grid-column:1;grid-row:3;transition-delay:.35s}
.a-qcard-interest{grid-column:3;grid-row:3;transition-delay:.5s}
.a-qcard-eyebrow{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink45);margin-bottom:10px}

.a-board-center{grid-column:2;grid-row:1/4;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px}
.a-board-center .a-note{margin:0 0 2px}
.a-reach{display:flex;flex-direction:column;align-items:center;gap:5px;opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease) .05s,transform .5s var(--ease) .05s}
.a-board.is-in .a-reach{opacity:1;transform:none}
.a-reach b{font-family:var(--display);font-weight:600;font-size:clamp(32px,3.6vw,42px);letter-spacing:-.02em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.a-reach-meta{display:flex;align-items:center;gap:8px}
.a-reach-label{font-family:var(--mono);font-size:9px;letter-spacing:.13em;color:var(--ink45)}
.a-reach-plat{display:flex;gap:4px}
.a-reach-plat .pf-ico{width:15px;height:15px;color:var(--ink70)}
.a-board .a-ad-card{position:relative;width:126px;background:var(--white);border-radius:16px;box-shadow:var(--shadow);border:1px solid var(--hair);
  padding:11px;text-align:left;opacity:0;transform:scale(.82);transition:opacity .5s var(--ease) .15s,transform .55s var(--spring) .15s}
.a-board.is-in .a-ad-card{opacity:1;transform:none}
.a-ad-img{display:block;width:100%;aspect-ratio:1/.8;border-radius:9px;background:var(--blush);margin-bottom:7px}
.a-ad-img svg{width:60%;height:60%;margin:20% auto}
.a-ad-ln{display:block;height:5px;border-radius:3px;background:#e7e1d4;width:85%;margin-top:5px}
.a-ad-ln.short{width:55%;margin-top:4px}

/* 1) Korosztály — négy sáv, 0-ból nő ki, a 25–34 kiemelt (narancs) */
.a-agebars{display:flex;flex-direction:column;gap:7px}
.a-agebar{display:grid;grid-template-columns:36px 1fr 28px;align-items:center;gap:6px}
.a-agebar-label{font-family:var(--sans);font-weight:700;font-size:10px;color:var(--ink70)}
.a-agebar-track{position:relative;height:6px;border-radius:3px;background:var(--bone)}
.a-agebar-track i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;background:var(--sage);transition:width .8s var(--ease)}
.a-agebar-hi .a-agebar-track i{background:var(--orange)}
.a-board.is-in .a-agebar-track i{width:calc(var(--pct,0) * 1%)}
.a-agebar:nth-child(1) .a-agebar-track i{transition-delay:.55s}
.a-agebar:nth-child(2) .a-agebar-track i{transition-delay:.65s}
.a-agebar:nth-child(3) .a-agebar-track i{transition-delay:.75s}
.a-agebar:nth-child(4) .a-agebar-track i{transition-delay:.85s}
.a-agebar-val{font-family:var(--sans);font-weight:700;font-size:10px;color:var(--ink45);text-align:right;font-variant-numeric:tabular-nums}

/* 2) Nemek — animált donut (két ív, körvonal-hossz alapú kirajzolódás) */
.a-donut{display:flex;align-items:center;gap:12px}
.a-donut svg{width:62px;height:62px;flex:none;transform:rotate(-90deg)}
.a-donut circle{fill:none;stroke-width:9}
.a-donut-bg{stroke:var(--bone)}
.a-donut-a{stroke:var(--sage);stroke-dasharray:0 163.36;transition:stroke-dasharray .9s var(--ease) .7s}
.a-donut-b{stroke:var(--butter);stroke-dasharray:0 163.36;stroke-dashoffset:-94.75;transition:stroke-dasharray .9s var(--ease) .8s}
.a-board.is-in .a-donut-a{stroke-dasharray:94.75 68.61}
.a-board.is-in .a-donut-b{stroke-dasharray:68.61 94.75}
.a-donut-legend{display:flex;flex-direction:column;gap:5px;font-family:var(--sans);font-weight:700;font-size:11px;color:var(--ink70)}
.a-donut-legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}
.a-donut-legend b{color:var(--ink);margin-left:2px}

/* 3) Lokációk — öt város sor, egyenként más színű ponttal, Budapest lüktet */
.a-locrows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.a-locrows li{display:grid;grid-template-columns:8px 1fr 28px;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:10.5px;color:var(--ink70);
  opacity:0;transform:translateY(-6px);transition:opacity .4s var(--ease),transform .4s var(--spring)}
.a-locrows i{width:8px;height:8px;border-radius:50%}
.a-locrows b{color:var(--ink45);font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.a-board.is-in .a-locrows li{opacity:1;transform:none}
.a-locrows li:nth-child(1){transition-delay:.45s}
.a-locrows li:nth-child(2){transition-delay:.53s}
.a-locrows li:nth-child(3){transition-delay:.61s}
.a-locrows li:nth-child(4){transition-delay:.69s}
.a-locrows li:nth-child(5){transition-delay:.77s}
@keyframes a-loc-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
.a-locrows li:first-child i{animation:a-loc-pulse 2.4s ease-in-out 1.4s infinite}

/* 4) Érdeklődés — kis, ütközésmentesen csomagolt buborék-fürt (js: arany-szög spirál).
   A méret (.a-ib szélesség + aspect-ratio) és a szöveg-középreigazítás (span, inset:0) KÜLÖN
   rétegen van, hogy a felirat hossza soha ne nyújtsa ovállá a kör alakú buborékot. */
.a-icloud{position:relative;width:100%;aspect-ratio:1/1;margin-top:2px}
.a-ib{position:absolute;left:calc(var(--x,50)*1%);top:calc(var(--y,50)*1%);width:calc(var(--r,20)*1%);aspect-ratio:1;font-style:normal;
  transform:translate(-50%,-50%) scale(.3);opacity:0;border-radius:50%;background:var(--bg,var(--lilac));box-shadow:var(--shadow);overflow:hidden;
  transition:opacity .45s var(--ease),transform .5s var(--spring);transition-delay:calc(.55s + var(--i,0) * 90ms)}
.a-board.is-in .a-ib{opacity:1;transform:translate(-50%,-50%) scale(1)}
@keyframes a-ib-float{0%,100%{transform:translate(-50%,-50%) scale(1) translateY(0)}50%{transform:translate(-50%,-50%) scale(1) translateY(-4%)}}
.a-board.is-in .a-ib{animation:a-ib-float 5s ease-in-out calc(1.1s + var(--i,0) * .2s) infinite}
.a-ib span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10%;
  font-family:var(--sans);font-weight:700;font-size:9.5px;line-height:1.08;color:var(--ink)}

@media (max-width:760px){
  .a-board{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:340px}
  .a-board-lines{display:none}
  .a-board-center{order:-1}
  .a-qcard{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .a-qcard,.a-reach,.a-board .a-ad-card,.a-locrows li,.a-ib{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .a-agebar-track i{transition:none!important;width:calc(var(--pct,0) * 1%)!important}
  .a-donut-a{transition:none!important;stroke-dasharray:94.75 68.61!important}
  .a-donut-b{transition:none!important;stroke-dasharray:68.61 94.75!important}
  .a-line{transition:none!important;stroke-dashoffset:0!important}
  .a-locrows li:first-child i{animation:none!important}
}

/* -- panel 4: kreatívok — három, egymástól jól megkülönböztethető, valódi hirdetéskreatívnak ható forma:
   9:16 videó (play jelvény + címsor + lejátszási sáv), önmagát léptető 3 képkockás karusszel pöttyökkel,
   és egy leállított, letompított statikus kép. Mindegyiknek saját, tervezett ítélet-pill jár. */
.a-creatives{display:flex;justify-content:center;align-items:flex-end;gap:22px;flex-wrap:wrap}
.a-creative{width:168px;display:flex;flex-direction:column;gap:12px;align-items:center}
.a-cr-frame{position:relative;width:100%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--hair);background:var(--butter)}
.a-cr-frame svg.a-cr-bg{position:absolute;inset:0;width:100%;height:100%}

/* 1) videó kreatív: lejátszás-jelvény, címsor-overlay, haladási sáv */
.a-cr-video .a-cr-media{position:absolute;inset:0;background:linear-gradient(155deg,var(--blush),var(--butter))}
.a-cr-video .a-cr-media svg{position:absolute;left:50%;top:40%;width:58%;height:58%;transform:translate(-50%,-50%)}
.a-cr-play{position:absolute;top:10px;left:10px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;
  background:rgba(17,17,17,.45);backdrop-filter:blur(2px)}
.a-cr-play::after{content:'';width:0;height:0;border-left:8px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;margin-left:2px}
.a-cr-headline{position:absolute;left:10px;right:10px;bottom:22px;font-family:var(--sans);font-weight:800;font-size:14px;line-height:1.2;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.35)}
.a-cr-progress{position:absolute;left:10px;right:10px;bottom:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden}
.a-cr-progress i{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.a-panel-in.a-seen .a-cr-video .a-cr-progress i{animation:a-cr-fill 3.2s linear .5s infinite}
@keyframes a-cr-fill{0%{width:0}70%{width:100%}100%{width:100%}}

/* 2) karusszel kreatív: 3 keret, magától csúszik, pöttyök jelzik az aktívat */
.a-cr-carousel .a-cr-track{position:absolute;inset:0;display:flex;width:300%;transform:translateX(0);transition:transform .6s var(--ease)}
.a-cr-carousel .a-cr-frm{flex:0 0 33.333%;position:relative;display:flex;align-items:center;justify-content:center;height:100%}
.a-cr-carousel .a-cr-frm:nth-child(1){background:linear-gradient(155deg,var(--sky),var(--lilac))}
.a-cr-carousel .a-cr-frm:nth-child(2){background:linear-gradient(155deg,var(--sage),var(--butter))}
.a-cr-carousel .a-cr-frm:nth-child(3){background:linear-gradient(155deg,var(--blush),var(--sky))}
.a-cr-carousel .a-cr-frm svg{width:46%;height:46%}
.a-cr-carousel .a-cr-cap{position:absolute;left:8px;right:8px;bottom:20px;font-family:var(--sans);font-weight:700;font-size:11.5px;color:var(--ink);
  background:rgba(255,255,255,.82);border-radius:8px;padding:5px 8px;line-height:1.25}
.a-cr-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:5px;z-index:2}
.a-cr-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55)}
.a-cr-dots i.is-on{background:#fff;transform:scale(1.3)}

/* 3) statikus kreatív: nagy, tömör szövegátfedés, leállítva → letompítva */
.a-cr-static .a-cr-media{position:absolute;inset:0;background:linear-gradient(165deg,var(--sky),#8fb4d6)}
.a-cr-static .a-cr-media svg{position:absolute;left:50%;top:36%;width:54%;height:54%;transform:translate(-50%,-50%)}
.a-cr-static .a-cr-headline{position:absolute;left:10px;right:10px;top:14px;bottom:auto;font-size:16px;text-shadow:0 2px 6px rgba(0,0,0,.3)}
.a-cr-static .a-cr-cta{position:absolute;left:10px;bottom:12px;font-family:var(--sans);font-weight:800;font-size:11px;letter-spacing:.01em;color:var(--ink);
  background:#fff;border-radius:999px;padding:6px 12px}
.a-creative-down .a-cr-frame{filter:saturate(.28) brightness(.82)}
.a-creative-down .a-cr-frame::after{content:'';position:absolute;inset:0;background:rgba(17,17,17,.22)}

/* ítélet-pill: színes, ikonos, tervezett — nem csupasz szöveg */
.a-verdict{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:800;font-size:12.5px;letter-spacing:-.005em;
  border-radius:999px;padding:6px 13px 6px 10px}
.a-verdict i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:10px;flex:none}
.a-verdict-up{color:var(--pine);background:#e3ebe6}
.a-verdict-up i{background:var(--pine);color:#fff}
.a-verdict-mid{color:var(--ink70);background:var(--bone)}
.a-verdict-mid i{background:var(--ink45);color:#fff}
.a-verdict-down{color:var(--rust);background:#f5e3dc}
.a-verdict-down i{background:var(--rust);color:#fff}

@media (max-width:640px){.a-creatives{gap:14px}.a-creative{width:132px}}

/* -- panel 5: idővonal -- */
.a-timeline{position:relative;text-align:left;max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding-top:6px}
.a-tl-row{display:flex;align-items:center;gap:14px}
.a-tl-label{width:78px;flex:none;font-family:var(--sans);font-weight:700;font-size:13px;color:var(--ink70)}
.a-tl-track{position:relative;flex:1;height:34px;background:var(--white);border:1px solid var(--hair);border-radius:10px}
.a-tl-ad{position:absolute;left:var(--x,10%);top:6px;width:16px;height:20px;border-radius:4px;background:var(--sky);opacity:0;transform:translateY(-14px);
  transition:opacity .5s var(--ease),transform .5s var(--spring);transition-delay:calc(var(--x,0) / 100 * 900ms)}
.a-tl-row:nth-child(2) .a-tl-ad{background:var(--lilac)}
.a-tl-row:nth-child(3) .a-tl-ad{background:var(--blush)}
.a-panel-in.a-seen .a-tl-ad{opacity:1;transform:none}
.a-tl-today{position:absolute;top:-4px;bottom:-4px;left:64%;width:0;pointer-events:none}
.a-tl-today-dot{position:absolute;top:-6px;left:-4.5px;width:9px;height:9px;border-radius:50%;background:var(--orange)}
.a-tl-today .a-tl-today-dot::after{content:'';position:absolute;left:4px;top:9px;width:1.5px;height:100vh;max-height:120px;background:rgba(242,103,34,.35)}
.a-tl-today-label{position:absolute;top:-24px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--orange);white-space:nowrap}

@media (max-width:899px){
  .a-feat-pin{height:auto}
  .a-feat-view{position:static;height:auto;display:block}
  .a-feat-head{padding-top:56px}
  .a-feat-rail{display:none}
  .a-feat-track{display:block;transform:none!important;height:auto}
  .a-panel{display:block;height:auto;padding:56px 0}
  .a-panel-in{padding:0 var(--gutter)}
  .a-shelf{grid-template-columns:repeat(2,1fr)}
  .a-tl-label{width:64px;font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .a-prod{animation:none}
  /* funkciók: nincs pin-görgetés, mindig az egymás alatti (mobil) elrendezés */
  .a-feat-pin{height:auto!important}
  .a-feat-view{position:static!important;height:auto!important;display:block!important}
  .a-feat-rail{display:none!important}
  .a-feat-track{display:block!important;transform:none!important;height:auto!important}
  .a-panel{display:block!important;height:auto!important;padding:56px 0!important}
  .a-panel-in{padding-inline:var(--gutter)}
  /* egyszeri belépő animációk: azonnal a végállapot */
  .a-tl-ad{opacity:1!important;transform:none!important;transition:none!important}
  .a-new-tag{opacity:1!important;transform:scale(1)!important;animation:none!important}
  .a-flashlight{background:radial-gradient(320px 320px at 50% 50%,rgba(255,255,255,.14),rgba(255,255,255,.03) 45%,rgba(0,0,0,.72) 72%)!important}
}

/* #mi — erősebb, olvashatóbb változat */
.a-mi-wrap{max-width:1060px}
.a-mi-lead{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.6vw,48px);line-height:1.12;letter-spacing:-.02em;max-width:22ch;margin-inline:auto;text-wrap:balance}
.a-mi-lead em{font-style:italic;font-weight:300;color:var(--orange)}
.a-mi-flow{max-width:1000px}
.a-mi-line{margin:0 16% 26px}
.a-mi-steps{gap:clamp(12px,2vw,22px)}
.a-mi-step{background:#fff;border:1px solid var(--hair);border-radius:18px;padding:22px 22px 24px;box-shadow:var(--shadow);text-align:left}
.a-mi-ico{display:block;width:64px;height:40px;color:var(--ink);margin-bottom:14px;overflow:visible}
.a-mi-pupil{animation:a-mi-look 4s var(--ease) infinite}
@keyframes a-mi-look{0%,40%{transform:none}50%,85%{transform:translateX(-4px)}}
.a-mi-ring{transform-origin:32px 20px;animation:a-mi-ping 2.2s var(--ease) infinite}
.a-mi-ring2{animation-delay:.5s}
@keyframes a-mi-ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.a-mi-n{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.02em;margin-bottom:8px}
.a-mi-step p{font-family:var(--body);font-size:16.5px;line-height:1.45}
.a-mi-plat{margin-top:clamp(36px,5vh,56px)}
.a-mi-plat .a-plat-label{font-size:13px}
@media (prefers-reduced-motion:reduce){.a-mi-pupil,.a-mi-ring{animation:none}}
/* kreatívok: olvasható szöveg a képen — sötét átmenet a felirat mögött */
.a-cr-video .a-cr-media::after{content:"";position:absolute;inset:45% 0 0 0;background:linear-gradient(180deg,transparent,rgba(17,17,17,.62))}
.a-cr-static .a-cr-media::after{content:"";position:absolute;inset:0 0 55% 0;background:linear-gradient(0deg,transparent,rgba(17,17,17,.55))}
.a-cr-headline{z-index:2;text-shadow:0 1px 8px rgba(0,0,0,.35)}

/* platform-csempék: a youtube/offline ikon nem étel — ne kapja az ételek papír-szűrőjét (elmosná) */
.pf-ico use{filter:none !important}
.pf-tile.is-soon .pf-tile-ico{background-image:none !important}
.pf-tile:not(.is-soon) .pf-tile-ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.3' intercept='.79'/%3E%3CfeFuncG type='linear' slope='.3' intercept='.79'/%3E%3CfeFuncB type='linear' slope='.3' intercept='.79'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* sötét panel: a „hamarosan" csempék tisztán, élesen, a már elérhetők alatti külön sorban */
.pf-break{flex-basis:100%;height:0}
.pf-tiles.on-dark .pf-tile.is-soon .pf-tile-ico{background:transparent !important;opacity:1;border:1.5px dashed rgba(250,246,238,.34)}
.pf-tiles.on-dark .pf-tile.is-soon .pf-ico{color:rgba(250,246,238,.72)}
.pf-tiles.on-dark .pf-tile.is-soon .pf-tile-name{color:rgba(250,246,238,.72)}
/* sötét panel tömörítés, hogy a két csempesor is kiférjen 800 px magasban */
@media (min-width:900px){
  #aPanel1 .a-dark-stage{max-width:700px}
  #aPanel1 .a-dark-card{aspect-ratio:16/9}
  #aPanel1 .a-dark-eyes{margin-bottom:10px}
  #aPanel1 .pf-tiles.on-dark{row-gap:10px}
}

/* 4) Futási idő + csatornák (az Érdeklődés helyett — ilyen adatot mérünk) */
.a-run-top{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.a-run-top b{font-family:var(--display);font-weight:600;font-size:34px;line-height:1;letter-spacing:-.02em}
.a-run-top span{font-family:var(--sans);font-weight:700;font-size:13.5px;color:var(--ink70)}
.a-run-top em{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pine)}
.a-run-top em i{width:7px;height:7px;border-radius:50%;background:var(--pine);animation:a-plat-pulse 2.2s ease-out infinite}
.a-run-bar{position:relative;height:6px;border-radius:4px;background:var(--paper);margin:12px 0 6px}
.a-run-bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:4px;background:linear-gradient(90deg,var(--butter),var(--orange));transition:width 1.4s var(--ease) .9s}
.a-run-bar s{position:absolute;top:50%;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(242,103,34,.18);opacity:0;transition:left 1.4s var(--ease) .9s,opacity .3s .9s}
.a-board.is-in .a-run-bar i{width:100%}
.a-board.is-in .a-run-bar s{left:100%;opacity:1}
.a-run-dates{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:var(--ink45)}
.a-run-avg{margin-top:8px;font-size:12.5px;line-height:1.35;color:var(--ink70)}
.a-run-avg b{color:var(--ink)}
.a-run-eyebrow{margin:12px 0 8px;padding-top:10px;border-top:1px solid var(--hair)}
.a-chan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.a-chan li{display:grid;grid-template-columns:20px auto 1fr;align-items:center;gap:8px;opacity:0;transform:translateX(-8px);transition:opacity .4s var(--ease),transform .5s var(--spring)}
.a-chan li:nth-child(1){transition-delay:1.3s}.a-chan li:nth-child(2){transition-delay:1.45s}.a-chan li:nth-child(3){transition-delay:1.6s}
.a-board.is-in .a-chan li{opacity:1;transform:none}
.a-chan .pf-ico{width:18px;height:18px;color:var(--ink)}
.a-chan b{font-family:var(--sans);font-weight:700;font-size:12.5px}
.a-chan span{font-size:11.5px;color:var(--ink45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (prefers-reduced-motion:reduce){.a-run-bar i{width:100%;transition:none}.a-run-bar s{left:100%;opacity:1;transition:none}.a-chan li{opacity:1;transform:none;transition:none}}

/* futási idő kártya tömörebben, hogy a tábla kiférjen 800 px magasban */
.a-run-top b{font-size:28px}
.a-run-bar{margin:9px 0 5px}
.a-run-avg{display:none}
.a-run-eyebrow{margin:10px 0 6px;padding-top:8px}
.a-chan{gap:5px}
@media (min-width:900px) and (max-height:880px){#aPanel1 .a-panel-note{display:none}}

/* ===== mobil / tablet finomítások ===== */
.pf-break-m{display:none}
@media (max-width:760px){
  .pf-break-m{display:block;flex-basis:100%;height:0}
  .pf-tile{width:52px}
  .pf-tile-name{font-size:11px}
  .a-dark-tag{font-size:9.5px}
  .a-qcard-eyebrow,.a-reach-label{font-size:10.5px}
  .a-agebar-label,.a-agebar-val{font-size:11.5px}
  .a-run-top em{font-size:10.5px}
  .a-locrows li{grid-template-columns:8px auto 1fr;font-size:12px;text-align:left}
  .a-locrows li > span{text-align:left}
  /* a káosz-szekcióban a cím ne vesszen el a papírfecnik alatt */
  .a-problem-copy{z-index:6;padding:14px 10px 18px;border-radius:24px;background:radial-gradient(closest-side,rgba(240,235,224,.96) 62%,rgba(240,235,224,0))}
}

.a-chan span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}