/* Aloldalak: tervrajz-háttér, felúszó kártyák, hotspotos diagram */
body.sub{background:var(--bg)}
.plan{position:fixed;inset:-8% 0;z-index:0;background:url(../img/plan.jpg) center/cover no-repeat;opacity:.13;pointer-events:none;will-change:transform}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .plan{filter:invert(1);opacity:.09}}
:root[data-theme="dark"] .plan{filter:invert(1);opacity:.09}
main{position:relative;z-index:1}
.hero.s{min-height:min(80svh,720px)}
.hero.s h1{font-size:clamp(3rem,8.4vw,6.6rem)}
.crumb{font:500 .78rem var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-bottom:14px}
.crumb a{color:var(--hi);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.nav nav a[aria-current="page"]{opacity:1;color:var(--accent)}
.hero.s .hbody{padding-bottom:140px}

.fl{position:relative;z-index:2;background:color-mix(in srgb,var(--surface) 93%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:24px;padding:clamp(22px,4vw,52px);box-shadow:0 34px 90px rgba(0,0,0,.16);margin-block:34px}
.fl.first{margin-top:-96px}
.rv{opacity:0;transform:translateY(80px) scale(.98);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.noscroll .rv{opacity:1;transform:none}
.fl h2{margin-bottom:14px}
.fl .lede{color:var(--muted);max-width:40em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.stats div{border-top:2px solid var(--accent);padding-top:12px}
.stats b{display:block;font:800 2.4rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.stats span{color:var(--muted);font-size:.9rem}

/* diagram + hotspotok */
.dgw{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center;margin-top:26px}
.dg{position:relative;border-radius:18px;overflow:hidden;background:#dfe8ee}
.dg img{display:block;width:100%;height:auto}
.hs{position:absolute;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--on-accent);border:2px solid #fff;font:600 .8rem var(--f-mono);transform:translate(-50%,-50%);cursor:pointer;padding:0;animation:pulse 2.6s infinite}
.hs.on{background:#fff;color:#111a22;border-color:var(--accent);transform:translate(-50%,-50%) scale(1.25);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,176,32,.6)}70%{box-shadow:0 0 0 14px rgba(255,176,32,0)}100%{box-shadow:0 0 0 0 rgba(255,176,32,0)}}
.dl{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.dl li{display:grid;grid-template-columns:34px 1fr;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s}
.dl li.on{background:var(--accent-soft);border-color:var(--accent)}
.dl b{font:500 .85rem var(--f-mono);color:var(--atext);padding-top:2px}
.dl strong{display:block;font:800 1.2rem/1 var(--f-display);text-transform:uppercase}
.dl span{color:var(--muted);font-size:.88rem}
.cap2{font-size:.78rem;color:var(--muted);margin-top:10px}

/* GYIK / CTA */
.faq{max-width:820px}
.cta2{position:relative;z-index:2;background:var(--night);color:var(--hi);border-radius:24px;padding:clamp(28px,5vw,64px);margin-block:34px;display:grid;grid-template-columns:1.3fr .7fr;gap:24px;align-items:center}
.cta2 h2{font-size:clamp(2.2rem,5vw,3.8rem)}
.cta2 p{color:rgba(244,247,248,.8);margin-top:10px}
.cta2 .btn{justify-self:start}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.links a{font:500 .8rem var(--f-mono);letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:9px 14px;text-decoration:none;color:var(--ink)}
.links a:hover{border-color:var(--accent);color:var(--atext)}
@media (max-width:900px){
  .dgw,.cta2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .fl.first{margin-top:-60px}
  .hero.s .hbody{padding-bottom:90px}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hs{animation:none}}
.demo{position:relative;z-index:3}
footer{position:relative;z-index:2}