/* ── Játékos mozgás (2026-10-13) ───────────────────────────────────────────────────────────
   A szolid alap (style.css „Animáció”) fölé, a márkaszínekben (kobalt + kiemelő sárga).
   Szabályok: csak transform / translate / scale / opacity / background-size (nincs layout-eltolódás,
   a CLS 0 marad); minden a „prefers-reduced-motion: no-preference” mögött, így aki a mozgást
   kikapcsolta, annak semmi nem mozog; a tartalom JS és animáció nélkül is teljes. */

@media (prefers-reduced-motion: no-preference) {

  /* Olvasásjelző: vékony kobalt→sárga sáv a lap tetején (JS: --scroll 0..1) */
  .scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:120; pointer-events:none;
    background:linear-gradient(90deg, var(--cb), #6E8FF0 60%, var(--hl)); transform-origin:0 50%; transform:scaleX(var(--scroll, 0)); }

  /* Hero: a sárga kiemelés „rátollasodik” a címre */
  .hero h1 em{ background-repeat:no-repeat; background-size:0% 100%; animation:m-hl-sweep .9s var(--ease-out) .45s forwards; }
  @keyframes m-hl-sweep{ to{ background-size:100% 100%; } }

  /* Hero: az alcím-csempe csillaga egyszer megpördül */
  .hero .eyebrow::before{ animation:m-spin-in .8s var(--ease-out) .15s backwards; }
  @keyframes m-spin-in{ from{ rotate:-180deg; scale:.4; opacity:0; } }

  /* Hero: a bizalmi sor pipái egymás után pattannak be */
  .hero-trust li{ animation:c-rise .5s var(--ease-out) backwards; }
  .hero-trust li:nth-child(1){ animation-delay:.9s; } .hero-trust li:nth-child(2){ animation-delay:1s; }
  .hero-trust li:nth-child(3){ animation-delay:1.1s; } .hero-trust li:nth-child(4){ animation-delay:1.2s; }
  .hero-trust li::before{ display:inline-block; animation:m-pop .45s cubic-bezier(.3,1.6,.5,1) backwards; animation-delay:inherit; }
  @keyframes m-pop{ from{ scale:0; } 60%{ scale:1.35; } }

  /* Hero: a termékképek a kurzor felé enyhén megdőlnek (JS: --tx, --ty; csak finom mutatónál) */
  .hero-stack{ transition:transform .5s var(--ease-out); transform:perspective(1400px) rotateY(calc(var(--tx, 0) * 5deg)) rotateX(calc(var(--ty, 0) * -4deg)); }

  /* Fő gomb: fényvillanás hoverre + kis „nyomás” kattintáskor */
  .btn-primary{ position:relative; overflow:hidden; isolation:isolate; }
  .btn-primary::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); translate:-120% 0; }
  .btn-primary:hover::after{ translate:120% 0; transition:translate .7s var(--ease-out); }
  .btn:active{ scale:.97; }

  /* „Jelenleg → A Contóval”: a gondokat egy vonal áthúzza, a pipák rugózva érkeznek, a nyíl lüktet */
  .roi-compare .roi-col:not(.roi-col-after) li::after{ content:''; position:absolute; left:22px; right:8%; top:50%; height:1.5px;
    background:var(--smoke); opacity:.55; transform:scaleX(0); transform-origin:0 50%; }
  .roi-compare.in .roi-col:not(.roi-col-after) li::after{ transition:transform .5s var(--ease-out); transition-delay:calc(.35s + var(--k, 0) * .18s); transform:scaleX(1); }
  .roi-compare.in .roi-col-after li::before{ display:inline-block; animation:m-pop .5s cubic-bezier(.3,1.6,.5,1) backwards; animation-delay:calc(1.2s + var(--k, 0) * .15s); }
  .roi-compare.in .roi-arrow{ animation:m-nudge 1.6s ease-in-out 1s 3; }
  @keyframes m-nudge{ 50%{ translate:8px 0; } }

  /* Hónapzárás 4 lépése: kobalt folyamatvonal fut végig, az ikonok sorban felugranak */
  #eloszoba .feat-grid{ position:relative; }
  #eloszoba .feat-grid::before{ content:''; position:absolute; left:0; right:0; top:-1px; height:2px; z-index:1;
    background:linear-gradient(90deg, var(--cb), var(--hl)); transform:scaleX(0); transform-origin:0 50%; }
  #eloszoba .feat-grid.in::before{ transition:transform 1.4s var(--ease-out) .2s; transform:scaleX(1); }
  #eloszoba .feat-grid.in .feat-card-icon{ animation:m-hop .6s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay:calc(.3s + var(--i, 0) * .3s); }
  @keyframes m-hop{ from{ translate:0 10px; scale:.6; opacity:0; } 60%{ translate:0 -4px; scale:1.1; } }

  /* Funkciókártyák: az ikon hoverre megbillen */
  .feat-card:hover .feat-card-icon{ animation:m-wiggle .5s ease-in-out; }
  @keyframes m-wiggle{ 25%{ rotate:-10deg; } 60%{ rotate:8deg; } }

  /* Funkció-linklista: a nyíl elcsúszik, a sor finoman kiemelődik */
  .feat-group a::after{ display:inline-block; transition:translate .25s var(--ease-out); }
  .feat-group a:hover::after{ translate:5px 0; }
  .feat-group li{ transition:translate .25s var(--ease-out); } .feat-group li:hover{ translate:3px 0; }

  /* Szerepkör-jelvények: beúszáskor egymás után „bepattannak” */
  .roles-grid.in .role-badge{ animation:m-pop .5s cubic-bezier(.3,1.6,.5,1) backwards; animation-delay:calc(.25s + var(--i, 0) * .12s); }

  /* Bemutatóvideó: enyhe ráközelítéssel érkezik */
  .demo-video.fade{ transform:translateY(16px) scale(.96); }
  .demo-video.fade.in{ transform:none; transition:opacity .7s ease, transform .9s var(--ease-out); }

  /* Alapítói sáv: időnként csillogás fut át rajta */
  .founder-banner{ position:relative; overflow:hidden; }
  .founder-banner::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 40%, rgba(255,239,137,.22) 50%, transparent 60%); translate:-100% 0;
    animation:m-sheen 7s ease-in-out 2s infinite; }
  @keyframes m-sheen{ 0%, 70%{ translate:-100% 0; } 100%{ translate:100% 0; } }

  /* Kiemelt csomag: lassú, halk fénylés */
  .price-card.featured{ animation:m-glow 4.5s ease-in-out infinite; }
  @keyframes m-glow{ 50%{ box-shadow:0 8px 30px rgba(0,0,0,.4), 0 0 72px rgba(37,87,230,.28); } }

  /* GYIK: lágy nyitás (ahol a böngésző támogatja; máshol a megszokott azonnali nyitás) */
  :root{ interpolate-size:allow-keywords; }
  .faq details::details-content{ height:0; overflow:clip; transition:height .35s var(--ease-out), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content{ height:auto; }

  /* Záró blokk: a gomb egyszer „int”, amikor a látogató odaér */
  .closing.in .btn-primary{ animation:m-wave 1s ease-in-out .6s 2; }
  @keyframes m-wave{ 30%{ rotate:-2deg; scale:1.04; } 60%{ rotate:2deg; scale:1.04; } }
}

/* A felszámoló szám rögzített szélességű dobozban, egyforma szélességű számjegyekkel: a „0”→„20” alatt a mondat
   nem tördelődik újra (különben a hero editorial-rácsában minden elmozdult – CLS 0,42 volt). */
.countup{ display:inline-block; min-width:2ch; text-align:right; font-variant-numeric:tabular-nums; }

/* Mobilon (érintőképernyő) nincs dőlés – ott a kurzor nem követhető */
@media (hover: none){ .hero-stack{ transform:none !important; } }