/* ============================================================
   Hello Biztonság — 1a „Arcade" stílus
   Minden szabály .hb alá van skópozva, hogy ne ütközzön
   az Elementor/téma stílusaival. A blokkjaidra tedd rá a
   .hb wrappert (ld. README / elementor-szekciok.html).
   ============================================================ */

.hb{
  --navy:#003153; --navy-d:#00263f; --teal:#11B7A3; --lime:#C9EA3D; --cream:#F7F5F0;
  --err:#E23D3D;
  --f-display:'Anton',sans-serif;
  --f-head:'Space Grotesk',sans-serif;
  --f-body:'DM Sans',system-ui,sans-serif;
  --f-mono:'Space Mono',monospace;
  color:var(--cream); font-family:var(--f-body); background:transparent;
}
/* Főoldal háttere: folytonos átmenet sötétkékből türkizbe az oldal aljáig.
   Az .hb wrapperek és a szekciók átlátszók, hogy ez a gradiens végigfusson.
   Csak a főoldalon aktív (body.home), az aloldalakat nem érinti. */
body.home{background:linear-gradient(180deg,#00263f 0%,#003a5c 34%,#0c7d70 78%,#11a493 100%);min-height:100vh}
.hb *{box-sizing:border-box}
.hb img{display:block}
.hb a{text-decoration:none;color:inherit}
.hb button{font-family:inherit}

.hb-wrap{max-width:1280px;margin:0 auto}
.hb-icn{display:inline-flex;align-items:center;justify-content:center}
.hb-icn svg{width:100%;height:100%;display:block}

/* Nav */
.hb-nav{display:flex;align-items:center;justify-content:space-between;padding:22px 40px;position:relative;z-index:5}
.hb-nav img{height:70px}
.hb-nav-links{display:flex;align-items:center;gap:30px}
.hb-nav-links a{font:600 14px var(--f-head);color:rgba(247,245,240,.8)}
.hb-btn-pill{font:700 14px var(--f-head)!important;color:var(--cream)!important;background:#E23A3A;padding:11px 20px;border-radius:999px}

/* Hero */
/* FIGYELEM: az overflow:hidden ÁTKERÜLT a .hb-hero-sec teljes szélességű
   burkolóra. Így a hero jobb felső fénye túlnyúlhat a 1280px-es hero-dobozon,
   és csak a KÉPERNYŐ szélén vágódik el — ott a vágás nem látszik. Ha ide
   visszakerülne az overflow:hidden, a fény éles függőleges éllel elvágódna
   a hero doboz szélén (1280px-nél szélesebb nézetben az a képernyőn belül van). */
.hb-hero-sec{position:relative;overflow:hidden}
.hb-hero{position:relative;padding:40px 40px 70px}
/* Fény-foltok. Négy dolog kell a lágy szélhez, MINDEGYIK fontos:
   1) A `transparent 70%` helyett több stop, ami 100%-ig fut ki és a végén már alig
      csökken. A lineáris rámpa 70%-nál nemnulla meredekséggel áll meg -> a szem
      Mach-sávot lát ott, azaz éles körvonalat.
   2) Explicit rgba(szín,0) a `transparent` helyett: az utóbbi rgba(0,0,0,0), amit
      régebbi böngészők feketén keresztül interpolálnak (szürke halo).
   3) `closest-side`! A gradiens alapértelmezése `farthest-corner`, vagyis a 100%-os
      (átlátszó) stop a doboz SARKÁRA esik — az oldalfelezőnél az alfa még ~0.07, és
      ott a border-radius:50% élesen elvágja. A closest-side a beírt körhöz igazítja
      a kifutást, így a vágás pont a nulla alfánál történik.
   4) A foltok TELJESEN a heron belül maradnak (top/right/bottom/left: 0, nincs negatív
      offset). A hero max-width:1280px + overflow:hidden, tehát 1280px-nél szélesebb
      képernyőn a hero széle BELÜL van a nézetben: ami kilóg, azt ott vágja el egy éles
      egyenessel. Ezt a blur nem menti meg, mert az ősszülő az elmosott képet nyesi el. */
/* A türkiz fény a KÉP jobb felső sarkához tapad (a .hb-hero-media gyereke),
   nem a hero sarkához — korábban a képes hasáb teljesen kitakarta a magját.
   Geometria (a média-doboz sarkához képest):
     • right:-280px + width:560px -> a folt vízszintes KÖZEPE pont a kép jobb szélén,
       és 280px-t nyúlik jobbra: a képernyő széléig kifut, ott vágódik (nem látszik).
     • top:-40px + height:360px  -> a közép a kép tetejétől 140px-re lejjebb.
       A 40px felfelé nyúlás NEM véletlen: pont ennyi hely van a kép fölött a hero
       padding-top-jában. Ennél nagyobb érték a .hb-hero-sec tetején éles
       vízszintes vonalban vágódna el.
     • `ellipse closest-side` -> a gradiens NULLA alfával ér a doboz mind a négy
       oldalához, tehát a border-radius:50% vágás pont a láthatatlan résznél
       történik (ld. a fenti négy pontot a lágy szélről). */
.hb-hero-glow1{position:absolute;top:-40px;right:-280px;width:560px;height:360px;border-radius:50%;background:radial-gradient(ellipse closest-side,rgba(17,183,163,.5) 0%,rgba(17,183,163,.42) 20%,rgba(17,183,163,.3) 38%,rgba(17,183,163,.18) 55%,rgba(17,183,163,.08) 72%,rgba(17,183,163,.025) 86%,rgba(17,183,163,0) 100%);filter:blur(30px);pointer-events:none}
.hb-hero-glow2{position:absolute;bottom:0;left:0;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle closest-side,rgba(201,234,61,.20) 0%,rgba(201,234,61,.17) 20%,rgba(201,234,61,.12) 38%,rgba(201,234,61,.07) 55%,rgba(201,234,61,.03) 72%,rgba(201,234,61,.01) 86%,rgba(201,234,61,0) 100%);filter:blur(30px)}
.hb-hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;position:relative;z-index:2}
.hb-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border:1.5px solid rgba(201,234,61,.5);border-radius:999px;font:700 12px var(--f-mono);letter-spacing:.12em;color:var(--lime);text-transform:uppercase;margin-bottom:26px}
.hb-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);display:block;animation:hbpulse 2s infinite}
.hb-h1{font:400 80px/.92 var(--f-display);margin:0 0 22px;letter-spacing:-.01em;text-transform:uppercase}
.hb-h1 .lime{color:var(--lime)}
.hb-lead{font-size:19px;line-height:1.6;color:rgba(247,245,240,.82);max-width:440px;margin:0 0 34px}
.hb-cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.hb-btn{display:inline-flex;align-items:center;gap:10px;background:var(--lime);color:var(--navy)!important;font:700 17px var(--f-head);padding:16px 30px;border-radius:14px;box-shadow:0 10px 30px -8px rgba(201,234,61,.6);border:none;cursor:pointer}
.hb-btn-ghost{display:inline-flex;align-items:center;gap:10px;color:var(--cream);font:600 16px var(--f-head);padding:16px 8px}
.hb-icn.teal{color:var(--teal)}
.hb-stats{display:flex;gap:34px;margin-top:44px}
.hb-stat-n{font:400 34px/1 var(--f-display);color:var(--teal)}
.hb-stat-l{font:500 13px var(--f-body);color:rgba(247,245,240,.6)}
.hb-hero-media{position:relative}
/* Hero-diavetítő: 7 kép a 7 fő témára, 3 mp-enként átúszva.
   A képeket és a hozzájuk tartozó lebegő feliratokat a hb-quiz.js HERO tömbje
   adja (#hb-hero-slides). A rögzített aspect-ratio KELL: enélkül a doboz
   magassága képenként ugrálna, és a hero alatti tartalom is ugrálna vele.
   A képek 1085x1450 körüliek, az object-fit:cover levágja a pár tized eltérést. */
.hb-hero-stage{position:relative;z-index:1;aspect-ratio:1085/1450;border-radius:20px;overflow:hidden;background:rgba(0,49,83,.35)}
.hb-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.hb-slide.on{opacity:1}
/* A feliratot a belső span-en animáljuk, NEM a badge-en: a badge-eken lebegő
   keyframe-animáció (hbfloat/hbfloat2) fut, azzal egy transform ütközne.
   Egyszer lejátszódó belépő animáció, `both` kitöltéssel: a szöveg cseréje és
   az animáció UGYANABBAN a tickben történik, így nincs két külön időzítő, amit
   a böngésző háttérben eltéríthetne (a felirat sosem ragad kifakulva). */
.hb-badge-in{display:flex;align-items:center;gap:9px}
.hb-badge-in.hb-pop{animation:hbbadgein .38s ease both}
.hb-ph{border-radius:20px;background:repeating-linear-gradient(135deg,rgba(17,183,163,.28) 0 12px,rgba(0,49,83,.2) 12px 24px);border:1.5px dashed rgba(17,183,163,.6);display:flex;align-items:center;justify-content:center;text-align:center}
.hb-ph span{font:700 13px var(--f-mono);color:rgba(247,245,240,.7);letter-spacing:.05em}
/* Rétegsorrend a .hb-hero-media-n belül: fény (auto) < képdoboz (1) < badge-ek (2).
   A z-index:2 KELL: a .hb-hero-stage z-index:1-et kapott (hogy a fény mögé
   kerüljön), és egy z-index nélküli, pozicionált badge a DOM-sorrendtől
   függetlenül a z-index:1 alá festődne — a feliratok eltűnnének a kép mögött. */
.hb-badge{position:absolute;z-index:2;padding:12px 16px;border-radius:14px;font:700 14px var(--f-head);box-shadow:0 12px 24px -8px rgba(0,0,0,.4)}
.hb-badge small{font-family:var(--f-mono);font-size:11px;display:block;opacity:.7}
.hb-badge-1{top:62%;left:-26px;background:var(--lime);color:var(--navy);animation:hbfloat 5s ease-in-out infinite}
.hb-badge-2{bottom:24px;right:-30px;background:var(--teal);color:var(--navy);animation:hbfloat2 6s ease-in-out infinite}
/* Kategória-címke: az épp látható dia témaneve (HERO[n].alt).
   ASZTALIN a kép jobb felső sarkába kerül (right:-30px, mint a badge-2), EGYENESEN
   (nincs dőlés). MOBILON felül középre — a pozíciót a @media(max-width:900px) blokk
   írja felül. NINCS rajta hbfloat lebegő animáció; csak a belső span pop-animációja
   fut a dia-cserénél. */
.hb-badge-cat{top:-18px;right:-30px;font-size:42px;background:var(--navy);color:var(--cream);border:1.5px solid rgba(247,245,240,.16);white-space:nowrap}

/* Marquee */
.hb-marq{background:var(--lime);overflow:hidden;padding:14px 0;border-top:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.hb-marq-track{display:flex;width:max-content;animation:hbmarq 26s linear infinite}
.hb-marq-track span{font:700 15px var(--f-head);color:var(--navy);padding:0 26px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}

/* Topics */
.hb-sec{padding:64px 40px 40px;background:transparent}
.hb-sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:34px;flex-wrap:wrap;gap:16px}
.hb-kicker{font:700 13px var(--f-mono);letter-spacing:.14em;color:var(--teal);text-transform:uppercase;margin-bottom:12px}
.hb-h2{font:700 40px var(--f-head);margin:0;color:var(--cream);letter-spacing:-.01em}
.hb-sec-note{font:500 15px var(--f-body);color:rgba(247,245,240,.6);max-width:320px}
.hb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* Asztali nézetben tömör navy kártya („felső kék"), hogy a gradiens türkiz része
   ne üssön át rajta. Mobilon (≤560px) áttetsző marad — ott jól néz ki. */
.hb-card{background:#0c3a58;border:1.5px solid rgba(247,245,240,.12);border-radius:18px;padding:26px 24px 22px;display:flex;flex-direction:column;gap:16px;transition:transform .18s,border-color .18s,background .18s}
.hb-card-top{display:flex;align-items:center;justify-content:space-between}
.hb-card .hb-icn{color:var(--lime)}
.hb-card-tag{font:700 13px var(--f-mono);color:rgba(247,245,240,.35)}
.hb-card-body{flex:1}
.hb-card h3{font:700 20px var(--f-head);margin:0 0 8px;color:var(--cream);line-height:1.15}
.hb-card p{font-size:14px;line-height:1.5;color:rgba(247,245,240,.62);margin:0}
.hb-card-levels{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:1px solid rgba(247,245,240,.1)}
.hb-lvl{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--teal);background:rgba(247,245,240,.04);border:1px solid rgba(247,245,240,.08);font:600 14px var(--f-head);transition:background .15s,color .15s,border-color .15s,transform .15s}
.hb-lvl .hb-icn{width:20px;height:20px;flex:0 0 auto;color:var(--lime);transition:color .15s}
.hb-lvl-t{flex:1;color:inherit;line-height:1.25}
.hb-lvl-c{width:16px;height:16px;flex:0 0 auto;color:rgba(247,245,240,.4);transition:color .15s,transform .15s}
.hb-card-cta{background:var(--teal);color:var(--navy);border-radius:18px;padding:26px 24px;display:flex;flex-direction:column;justify-content:space-between}
.hb-card-cta .hb-icn{color:var(--navy)}
.hb-card-cta h3{font:700 20px var(--f-head);margin:0 0 6px}
.hb-card-cta p{font-size:14px;line-height:1.5;margin:0 0 14px;color:rgba(0,49,83,.75)}
.hb-card-cta .go{font:700 14px var(--f-head);display:inline-flex;align-items:center;gap:7px}
/* Kríziskezelés kiemelő kártya (a 8. cella) — piros, figyelemfelhívó */
.hb-card-crisis{cursor:pointer;text-decoration:none;background:linear-gradient(150deg,#ff5a5a,#d02b2b);box-shadow:0 18px 42px -16px rgba(255,90,90,.7);transition:transform .15s,box-shadow .15s}
.hb-card-crisis h3{font-size:22px;color:#F7F5F0}
.hb-card-crisis p{color:rgba(247,245,240,.9)}
.hb-card-crisis .go{color:#F7F5F0}
.hb-card-crisis .hb-icn{color:#F7F5F0}
/* Kríziskezelés-logó: nagy, háttér nélkül, szívdobogásszerűen pulzál */
.hb-crisis-logo{transform-origin:center;animation:hb-heartbeat 1.4s ease-in-out infinite}
@keyframes hb-heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.13)}28%{transform:scale(1)}42%{transform:scale(1.1)}56%{transform:scale(1)}}
/* A kríziskezelés doboz 3 gyorsgombja (2026-09-15): közvetlen veszély /
   baleset / rosszullét — mindegyik a témája krízis-blokkjára ugrik.
   A doboz már nem egyetlen link (<a>), hanem <div>: a cím és a „go” sor
   a gyűjtőoldalra, a három gomb a saját céljára visz. */
.hb-crisis-btns{display:flex;flex-direction:column;gap:8px;margin:12px 0 16px}
.hb-card-crisis .hb-crisis-btn{display:flex;align-items:center;gap:10px;background:#F7F5F0;color:#003153;border-radius:12px;padding:11px 14px;font:700 14px var(--f-head);line-height:1.2;text-decoration:none}
.hb-card-crisis .hb-crisis-btn .hb-icn{color:#003153;flex:0 0 auto}
.hb-card-crisis a.go{text-decoration:none}
@media (hover:hover) and (pointer:fine){
  .hb-card-crisis .hb-crisis-btn:hover{background:#fff}
}
/* MOBILON (≤600px) a doboz a marquee alá, a témakörök fejléce ELÉ kerül —
   a hb-quiz.js teszi át (placeCrisis) és ezt az osztályt kapja; itt csak a térköze. */
.hb-crisis-top{margin:0 0 36px}
@media(max-width:600px){
  /* Mobil főoldal (2026-09-15): nincs statisztika-sor (7 téma / 30+ / 100%) és
     nincs képes dia — a hero a szöveggel és a két gombbal zárul, alatta
     marquee → krízis-doboz → témakörök. A dia képeit a JS ilyenkor le sem tölti. */
  .hb-stats,.hb-hero-media{display:none}
  .hb-hero-grid{gap:0}
  .hb-hero{padding-bottom:44px}
}

/* ============================================================
   Témakör-ikon mikro-animációk (a kártyák tetején).
   A .hb-tanim-<ikonnév> osztály a hb-quiz.js buildTopics-ából jön.
   Egyszerű ikonok: Lucide + whole-icon transzform. Pénztárca és
   szerződés: egyedi SVG belső mozgó résszel. Konfetti-popper:
   Lucide popper + repülő konfetti. Reduced-motion esetén minden áll.
   ============================================================ */
.hb-card{--hb-card-bg:#0c3a58}
.hb-tanim{position:relative}
.hb-card .hb-tanim svg{overflow:visible}

/* 01 · autó — pöfög/halad: minimális le-fel billegés + kipufogó-pöffenet */
@keyframes hb-car{0%{transform:translateY(0) rotate(0)}20%{transform:translateY(-1.4px) rotate(-1.4deg)}45%{transform:translateY(.7px) rotate(.3deg)}70%{transform:translateY(-1px) rotate(1.2deg)}100%{transform:translateY(0) rotate(0)}}
.hb-tanim-car svg{animation:hb-car .95s ease-in-out infinite;transform-origin:62% 72%}
.hb-tanim-car::after{content:"";position:absolute;left:5px;bottom:8px;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0;animation:hb-puff .95s ease-out infinite}
@keyframes hb-puff{0%{opacity:0;transform:translate(0,0) scale(.4)}30%{opacity:.4}100%{opacity:0;transform:translate(-8px,-8px) scale(1.35)}}

/* 02 · pajzs — ~3 mp-ként megfordul a függőleges tengelye körül */
@keyframes hb-flip{0%,66%{transform:perspective(240px) rotateY(0)}100%{transform:perspective(240px) rotateY(360deg)}}
.hb-tanim-shield-check svg{animation:hb-flip 3s cubic-bezier(.55,0,.3,1) infinite;transform-origin:center}

/* 03 · kéz — jobbra-balra billeg */
@keyframes hb-wob{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}}
.hb-tanim-grab svg{animation:hb-wob 1.5s ease-in-out infinite;transform-origin:50% 58%}

/* 04 · konfetti — a popper SAJÁT konfettije rajzolódik / pukkan ki, egymás után.
   A tölcsér áll; a 4 pötty és a 3 szalag (a Lucide ikon eredeti elemei) animálódnak. */
@keyframes hb-cf-line{0%{stroke-dashoffset:var(--len);opacity:0}12%{opacity:1}52%{stroke-dashoffset:0;opacity:1}80%{opacity:1}92%{opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes hb-cf-dot{0%,10%{opacity:0;stroke-width:0}24%{opacity:1;stroke-width:2.6}55%{stroke-width:2}80%{opacity:1;stroke-width:2}92%{opacity:0;stroke-width:3.4}100%{opacity:0;stroke-width:0}}
.hb-tanim-party-popper .hb-cf{opacity:0}
.hb-tanim-party-popper .hb-cf-line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:hb-cf-line 2.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*.16s)}
.hb-tanim-party-popper .hb-cf-dot{animation:hb-cf-dot 2.4s ease-in-out infinite;animation-delay:calc(var(--i,0)*.16s)}

/* 05 · pénztárca — felül kicsúszik egy bankkártya, majd vissza */
@keyframes hb-wcard{0%,18%{transform:translateY(0)}42%,60%{transform:translateY(-7px)}84%,100%{transform:translateY(0)}}
.hb-tanim-wallet .hb-wcard{animation:hb-wcard 3.2s ease-in-out infinite}

/* 06 · aktatáska — pulzál */
@keyframes hb-pulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.13)}}
.hb-tanim-briefcase svg{animation:hb-pulse2 1.7s ease-in-out infinite;transform-origin:center}

/* 07 · szerződés — a sorok kirajzolódnak, mintha írnák */
.hb-tanim-file-text .hb-line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:hb-write 3.4s ease-in-out infinite}
.hb-tanim-file-text line.hb-line:nth-of-type(2){animation-delay:.3s}
.hb-tanim-file-text line.hb-line:nth-of-type(3){animation-delay:.6s}
@keyframes hb-write{0%{stroke-dashoffset:var(--len);opacity:0}8%{opacity:1}40%,82%{stroke-dashoffset:0;opacity:1}93%{opacity:0}100%{stroke-dashoffset:var(--len);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .hb-tanim-car svg,.hb-tanim-shield-check svg,.hb-tanim-grab svg,.hb-tanim-briefcase svg,.hb-cf,.hb-wcard,.hb-tanim-file-text .hb-line,.hb-crisis-logo{animation:none!important}
  .hb-tanim-car::after{display:none}
  .hb-tanim-file-text .hb-line{stroke-dashoffset:0;opacity:1}
  .hb-tanim-party-popper .hb-cf{opacity:1;stroke-dashoffset:0;stroke-width:2}
}

/* Game highlight (interaktív játék kiemelő) */
.hb-game{position:relative;padding:70px 40px 74px;overflow:hidden;background:transparent}
.hb-game-glow1{position:absolute;top:-140px;right:-60px;width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(201,234,61,.16),transparent 68%)}
.hb-game-glow2{position:absolute;bottom:-120px;left:-80px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(17,183,163,.30),transparent 70%)}
.hb-game-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;max-width:1200px;margin:0 auto}
.hb-game-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border:1.5px solid rgba(201,234,61,.5);border-radius:999px;font:700 12px var(--f-mono);letter-spacing:.12em;color:var(--lime);text-transform:uppercase;margin-bottom:24px}
.hb-game h2{font:400 60px/.96 var(--f-display);margin:0 0 16px;letter-spacing:-.01em;text-transform:uppercase;color:var(--cream)}
.hb-game h2 .lime{color:var(--lime)}
.hb-game-tagline{font:700 21px var(--f-head);color:var(--lime);margin:0 0 18px;line-height:1.2}
.hb-game-lead{font-size:19px;line-height:1.6;color:rgba(247,245,240,.82);max-width:480px;margin:0 0 22px}
.hb-game-feats{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:32px}
.hb-game-feat{display:flex;align-items:center;gap:10px;font:600 15px var(--f-body);color:rgba(247,245,240,.8)}
.hb-game-feat .hb-icn{color:var(--teal)}
.hb-game-cta{display:inline-flex;align-items:center;gap:11px;background:var(--lime);color:var(--navy)!important;font:700 18px var(--f-head);padding:17px 32px;border-radius:14px;box-shadow:0 12px 32px -8px rgba(201,234,61,.6);animation:hbpulse 2.6s infinite}
.hb-game-media{position:relative}
.hb-game-ph{aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(17,183,163,.28) 0 12px,rgba(0,49,83,.35) 12px 24px);border:1.5px dashed rgba(17,183,163,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;transition:transform .2s ease}
.hb-game-ph .hb-icn{color:var(--lime)}
.hb-game-ph span{font:700 13px var(--f-mono);color:rgba(247,245,240,.7);letter-spacing:.05em}
.hb-game-badge{position:absolute;padding:12px 16px;border-radius:14px;font:700 14px var(--f-head);box-shadow:0 12px 24px -8px rgba(0,0,0,.4)}
.hb-game-badge small{font-family:var(--f-mono);font-size:11px;display:block;opacity:.7}
.hb-game-badge-1{top:-20px;left:-24px;background:var(--lime);color:var(--navy);animation:hbfloat 5s ease-in-out infinite}
.hb-game-badge-2{bottom:20px;right:-26px;background:var(--teal);color:var(--navy);animation:hbfloat2 6s ease-in-out infinite;display:flex;align-items:center;gap:9px}

/* Quiz */
.hb-quiz-sec{padding:70px 40px;background:transparent}
.hb-quiz-head{max-width:760px;margin:0 auto 34px;text-align:center}
.hb-quiz-head .hb-kicker{color:var(--lime)}
.hb-quiz-head h2{font:700 38px var(--f-head);margin:0;color:var(--cream)}
.hb-quiz{max-width:720px;margin:0 auto;background:var(--cream);border-radius:22px;padding:38px 40px 40px;color:var(--navy);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.hb-q-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.hb-q-topic{font:700 12px var(--f-mono);letter-spacing:.1em;color:var(--teal);text-transform:uppercase}
.hb-q-count{font:700 13px var(--f-head);color:rgba(0,49,83,.5)}
.hb-bar{height:8px;background:rgba(0,49,83,.1);border-radius:999px;overflow:hidden;margin-bottom:26px}
.hb-bar-fill{height:100%;background:var(--teal);border-radius:999px;transition:width .3s ease;width:0}
.hb-q-text{font:700 24px var(--f-head);line-height:1.25;margin:0 0 24px}
.hb-answers{display:flex;flex-direction:column;gap:12px}
.hb-ans{text-align:left;font:600 16px var(--f-body);color:var(--navy);background:#fff;border:2px solid rgba(0,49,83,.12);border-radius:14px;padding:16px 20px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;transition:border-color .15s,background .15s}
.hb-ans .txt{padding:2px 8px;border-radius:6px}
.hb-ans .mark{font-weight:700;font-size:18px}
.hb-ans.correct .txt{background:var(--lime);color:var(--navy)}
.hb-ans.wrong .txt{background:rgba(226,61,61,.14);color:var(--err);text-decoration:line-through}
.hb-ans.dim{opacity:.5}
.hb-ans.locked{cursor:default}
.hb-q-foot{display:flex;align-items:center;justify-content:space-between;margin-top:24px;gap:16px;flex-wrap:wrap}
.hb-feedback{font:700 16px var(--f-head);color:var(--navy)}
.hb-next{background:var(--navy);color:var(--lime);font:700 15px var(--f-head);border:none;padding:13px 26px;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.hb-result{text-align:center;padding:14px 0}
.hb-result .hb-icn{color:var(--teal);margin:0 auto 16px}
.hb-score{font:400 64px/1 var(--f-display);color:var(--navy)}
.hb-result p{font-size:17px;color:rgba(0,49,83,.7);margin:8px 0 24px}
.hb-restart{background:var(--lime);color:var(--navy);font:700 16px var(--f-head);border:none;padding:15px 30px;border-radius:14px;cursor:pointer}
.hb-hidden{display:none!important}

/* Footer — a stílusa ÁTKÖLTÖZÖTT a hb/hb-ui.css-be.
   Ugyanez a lábléc ül minden aloldal alján is, ezért a globálisan betöltődő
   hb-ui.css a helye (az aloldalak nem töltik be ezt a fájlt előnézetben).
   A markup változatlan: .hb-foot > .hb-foot-inner > left/center/right. */

/* Animations */
@keyframes hbfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes hbfloat2{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-22px) rotate(2deg)}}
@keyframes hbmarq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes hbpulse{0%,100%{box-shadow:0 0 0 0 rgba(201,234,61,.55)}70%{box-shadow:0 0 0 22px rgba(201,234,61,0)}}
@keyframes hbbadgein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Responsive */
@media(max-width:900px){
  /* Mobilon a hero egyoszlopos: ez a gap a statisztikák (30+/próbatétel…) és a
     kép közötti függőleges térköz. Megnövelve, hogy a kép fölé középre lógó
     #hb-hero-cat kategória-badge ne érjen közel a statisztikákhoz. */
  .hb-hero-grid{grid-template-columns:1fr;gap:56px}
  /* Mobilon a kategória-badge felül KÖZÉPEN marad (az asztali jobbra-fent helyett).
     A méret mérsékelten nagyobb (20px) — az asztali 42px itt kilógna a képernyőről,
     de a 14px-nél kicsit nagyobb szöveg mobilon is jól olvasható. */
  .hb-badge-cat{right:auto;left:50%;transform:translateX(-50%);font-size:20px}
  .hb-h1{font-size:56px}
  .hb-grid{grid-template-columns:repeat(2,1fr)}
  /* Mobilon a Témák/Kvíz on-page horgonyok elrejtve (görgetéssel elérhetők),
     de a Rólunk KÜLÖN oldal — a navból kell elérni, ezért látszik marad. */
  .hb-nav-links a:not(.hb-btn-pill):not(.hb-nav-rolunk){display:none}
  .hb-nav-links{gap:16px}
  .hb-quiz{padding:28px 22px}
  .hb-q-text{font-size:20px}
  .hb-game-grid{grid-template-columns:1fr;gap:36px}
  .hb-game h2{font-size:46px}
}
@media(max-width:560px){
  .hb-nav,.hb-hero,.hb-sec,.hb-quiz-sec,.hb-game{padding-left:20px;padding-right:20px}
  /* a lábléc mobil szabályai szintén a hb-ui.css-ben vannak */
  .hb-h1{font-size:44px}
  .hb-grid{grid-template-columns:1fr}
  .hb-stats{gap:22px}
  .hb-game h2{font-size:40px}
  .hb-card{background:rgba(247,245,240,.05)}
}

/* ============================================================
   HOVER-EFFEKTEK — CSAK EGÉRREL
   ------------------------------------------------------------
   iOS Safarin a koppintás először a :hover állapotot kapcsolja be.
   Ha ez a hover EL IS MOZDÍTJA az elemet (a témakör-kártya
   translateY(-6px)-tal felemelkedett, a benne lévő alpont-link pedig
   translateX(3px)-szel oldalra csúszott), akkor a link kikerül az ujj
   alól, a böngésző eldobja a koppintást — és a menüpont csak MÁSODIK
   koppintásra nyílt meg. Pontosan ezt jelentette a „először csak
   kijelöli, másodjára nyitja meg”.

   Megoldás: minden hover-szabály `@media (hover:hover) and
   (pointer:fine)` mögé kerül, így érintőképernyőn SOHA nem lép be a
   hover állapot, és az első koppintás azonnal navigál. Egérrel
   minden marad a régiben.

   FIGYELEM: ide kerüljön minden új :hover szabály is — a fájl
   többi részében szándékosan nincs egyetlen hover sem.
   Ugyanez a kapu van a hb-ui.css-ben és a hb-quiz.js injektált
   stílusában (a .hb-lvl:hover ott is szerepel tartalékként).
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .hb-nav-links a:hover{color:var(--lime)}
  .hb-btn-pill:hover{background:#c62f2f;color:var(--cream)!important}
  .hb-btn:hover{transform:translateY(-2px)}
  .hb-card:hover{transform:translateY(-6px);border-color:var(--lime);background:#0f4569}
  .hb-card:hover{--hb-card-bg:#0f4569}
  .hb-lvl:hover{background:var(--lime);color:var(--navy)!important;border-color:var(--lime);transform:translateX(3px)}
  .hb-lvl:hover .hb-icn,.hb-lvl:hover .hb-lvl-c{color:var(--navy)}
  .hb-card-crisis:hover{transform:translateY(-3px);box-shadow:0 22px 52px -16px rgba(255,90,90,.9)}
  .hb-game-cta:hover{transform:translateY(-2px)}
  .hb-game-ph:hover{transform:translateY(-4px)}
  .hb-ans:hover{border-color:var(--teal)}
}
/* a ≤560px-es kártya-hover a saját töréspontján belül marad */
@media (hover:hover) and (pointer:fine) and (max-width:560px){
  .hb-card:hover{background:rgba(201,234,61,.08)}
}

/* ---- Mobil koppintási felület a nav-linkeken ----
   A „Rólunk" link doboza mindössze 46×18 px volt — az iOS/WCAG ajánlott 44px-es
   minimum alatt. Egy ekkora célpontot könnyű elvéteni, és ilyenkor úgy tűnik,
   mintha „kétszer kellene rákoppintani": az első koppintás egyszerűen mellé
   megy. A szedés nem változik, csak a link köré kerül függőleges tér. */
@media(max-width:600px){
  .hb-nav-links a{display:inline-flex;align-items:center;min-height:44px}
  .hb-nav-links a:not(.hb-btn-pill){padding:0 6px}
}