/* ============================================================
   Hello Biztonság — „HAMAROSAN” általános oldal stílus
   ------------------------------------------------------------
   Erre a lapra mutass minden olyan menüpontot / gombot, aminek a
   tartalma még készül vagy nem végleges. EGY fájlpár szolgál ki
   minden ilyen esetet: a lap szövege a .hm wrapper data-attribútu-
   maiból jön (ld. hm-page.js fejléce), így ugyanaz a markup
   használható bármelyik téma alatt.

   Minden szabály .hm alá skópozva, hogy ne ütközzön a témával és a
   többi aloldallal (.hb / .kb / .pb / .bsz* / .vv / .fe / .kr / .ro).

   A Rólunk oldalhoz (ro-style.css) hasonlóan itt a szekció-HTML NEM
   inline stílusokkal dolgozik, hanem osztályokkal — rövid, szöveges
   lap, így egy helyen szerkeszthető marad.
   KIVÉTEL: a blokk-sorszámokon (01/02/…) szándékosan ott van az
   inline `font-family:'Anton'` — a globális hb-ui.js EBBŐL ismeri
   fel a blokkfejlécet (gépelődő cím + sorszám-fordulat).
   ============================================================ */

.hm{
  --navy:#003153; --navy-d:#00263f; --navy-c:#0a3a5c;
  --teal:#11B7A3; --lime:#C9EA3D; --cream:#F7F5F0; --danger:#FF5A5A;
  --amber:#F5B324;
  --f-display:'Anton',sans-serif;
  --f-head:'Space Grotesk',sans-serif;
  --f-body:'DM Sans',system-ui,sans-serif;
  --f-mono:'Space Mono',monospace;
  background:var(--navy); color:var(--cream); font-family:var(--f-body);
}
/* clip és NEM hidden: a hidden görgetési konténert csinál a wrapperből,
   amitől a benne lévő position:sticky (hb-stack paklik) hatástalan lesz. */
.hm{overflow-x:clip}
@supports not (overflow-x:clip){ .hm{overflow-x:hidden} }
.hm *{box-sizing:border-box}
.hm img{display:block}
.hm a{text-decoration:none;color:inherit}
.hm button{font-family:inherit}
/* Ikon-tok: a Lucide <i data-lucide> helyére kerülő <svg> a tok méretét veszi fel. */
.hm .i{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex:none}
.hm .i svg{width:100%;height:100%;display:block}
.hm-wrap{max-width:1180px;margin:0 auto}
.hm-lime{color:var(--lime)}
.hm-teal{color:var(--teal)}
.hm-amber{color:var(--amber)}

/* ---------------- NAV ---------------- */
.hm-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 40px;flex-wrap:wrap}
/* A .hm prefix KELL: az Elementor `.elementor img{height:auto}` resetje ugyanolyan
   specificitású (0,1,1) és később töltődik, tehát döntetlennél ő nyerne. */
.hm .hm-nav img{height:50px;width:auto}

/* ---------------- HERO ---------------- */
.hm-hero{position:relative;padding:34px 40px 60px;overflow:hidden}
/* Fény-folt: closest-side + sok stop 100%-ig kifutva, hogy ne legyen éles
   körvonal (ugyanaz a recept, mint a főoldalon). A hb-ui.css mobilon ezt az
   ELSŐ gyereket húzza egységesen a jobb felső sarokba — ezért kell elsőnek
   maradnia a headerben. */
.hm-hero-glow{position:absolute;top:-60px;left:26%;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle closest-side,rgba(245,179,36,.26) 0%,rgba(245,179,36,.15) 40%,rgba(245,179,36,.06) 66%,rgba(245,179,36,.02) 84%,rgba(245,179,36,0) 100%);
  filter:blur(30px);pointer-events:none}
.hm-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;
  gap:46px;align-items:center}
.hm-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;
  border:1.5px solid rgba(245,179,36,.55);border-radius:999px;
  font:700 12px var(--f-mono);letter-spacing:.12em;color:var(--amber);
  text-transform:uppercase;margin-bottom:22px}
.hm-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);display:block;
  animation:hmpulse 2s infinite}
.hm-h1{font:400 72px/.92 var(--f-display);margin:0 0 18px;letter-spacing:-.01em;
  text-transform:uppercase}
.hm-lead{font-size:18px;line-height:1.6;color:rgba(247,245,240,.82);max-width:480px;margin:0 0 26px}
.hm-lead b{color:var(--cream);font-weight:700}
.hm-cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hm-btn{display:inline-flex;align-items:center;gap:9px;background:var(--lime);
  color:var(--navy)!important;font:700 16px var(--f-head);padding:14px 26px;border-radius:12px;
  box-shadow:0 12px 30px -10px rgba(201,234,61,.6);transition:transform .15s}
.hm-btn-ghost{display:inline-flex;align-items:center;gap:9px;color:var(--cream);
  font:600 15px var(--f-head);padding:14px 12px;border-bottom:1.5px solid transparent}
.hm-btn-ghost .i{color:var(--teal)}
/* „Vissza a témához” — csak akkor látszik, ha a wrapperen van data-hm-back
   (a hm-page.js teszi rá a .hm-on osztályt). */
.hm-back{display:none}
.hm-back.hm-on{display:inline-flex}

/* Hero állapot-kártya (a hm-page.js tölti fel: #hm-steps, #hm-bar, #hm-pct) */
.hm-card{justify-self:center;position:relative;animation:hmfloat 6.5s ease-in-out infinite}
.hm-card-in{width:340px;max-width:100%;background:var(--navy-d);border:8px solid var(--navy-c);
  border-radius:26px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);padding:24px 22px 20px;
  position:relative;overflow:hidden}
.hm-card-glow{position:absolute;top:-50px;right:-40px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,179,36,.2),transparent 70%);pointer-events:none}
.hm-card-head{display:flex;align-items:center;gap:11px;margin-bottom:18px;position:relative;z-index:2}
.hm-card-ico{flex:none;width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--amber),var(--navy));
  display:flex;align-items:center;justify-content:center;color:#fff}
.hm-card-ico .i{width:20px;height:20px}
/* display:block — a markupban <span>-ek (az Elementor a <div>-eket
   néha megbontja a widgetben), de két külön sorként kell viselkedniük */
.hm-card-t{display:block;font:700 15px var(--f-head);color:var(--cream);line-height:1.2}
.hm-card-s{display:block;font:400 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(247,245,240,.45);margin-top:3px}

/* haladás-sáv */
.hm-bar-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:7px;
  position:relative;z-index:2}
.hm-bar-l{font:600 12px var(--f-body);color:rgba(247,245,240,.75)}
.hm-bar-n{font:700 14px var(--f-mono);color:var(--lime)}
.hm-bar{height:10px;background:rgba(247,245,240,.08);border-radius:999px;overflow:hidden;
  position:relative;z-index:2}
.hm-bar-fill{height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--teal),var(--lime));
  transition:width 1.1s cubic-bezier(.25,.8,.3,1)}

/* lépéslista (#hm-steps) */
.hm-steps{margin-top:16px;display:flex;flex-direction:column;position:relative;z-index:2}
.hm-step{display:flex;align-items:flex-start;gap:10px;padding:9px 0;
  border-top:1px solid rgba(247,245,240,.08);font-size:13px;line-height:1.35}
.hm-step:first-child{border-top:none}
.hm-step .i{width:16px;height:16px;margin-top:1px}
.hm-step-done{color:rgba(247,245,240,.55)}
.hm-step-done .i{color:var(--teal)}
.hm-step-now{color:var(--cream);font-weight:700}
.hm-step-now .i{color:var(--amber);animation:hmspin 2.4s linear infinite}
.hm-step-wait{color:rgba(247,245,240,.42)}
.hm-step-wait .i{color:rgba(247,245,240,.3)}
/* Opcionális záró sáv a kártya alján — alapból NINCS a markupban (nem ígérünk
   dátumot). Ha mégis kell, ez a szedés áll rá:
   <div class="hm-card-foot"><span class="i"><i data-lucide="clock"></i></span>
     Várható megjelenés: <span data-hm-slot="eta">hamarosan</span></div> */
.hm-card-foot{margin-top:14px;background:rgba(201,234,61,.1);
  border:1px solid rgba(201,234,61,.3);border-radius:12px;
  padding:10px 13px;display:flex;align-items:center;gap:9px;
  font:600 12.5px var(--f-head);color:rgba(247,245,240,.85);position:relative;z-index:2}
.hm-card-foot .i{width:16px;height:16px;color:var(--lime)}

/* ---------------- FIGYELMEZTETŐ SZALAG ----------------
   Sárga-navy „építkezés” szalag: a csíkok CSS-gradiensből vannak, a felirat
   pedig végtelenített marquee (két azonos sáv egymás után, -50% eltolással). */
.hm-tape{background:repeating-linear-gradient(-45deg,
    #F5B324 0 22px,#00263f 22px 44px);
  border-top:2px solid var(--navy-d);border-bottom:2px solid var(--navy-d);
  padding:3px 0}
.hm-tape-in{background:var(--navy-d);overflow:hidden;padding:10px 0}
.hm-tape-track{display:flex;width:max-content;animation:hmmarq 26s linear infinite}
.hm-tape-track span{font:700 13px var(--f-mono);color:var(--amber);padding:0 22px;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}

/* ---------------- SZEKCIÓ-FEJEK ---------------- */
.hm-sec{padding:66px 40px}
.hm-sec-alt{background:var(--navy-d)}
/* A teljes szélességű hátterű („alt”) szekcióknál a .hm-wrap BELÜL van a
   szekció 40px-es paddingján, a többinél maga a szekció A wrap. Hogy a
   tartalom bal széle a kétféle szekcióban pontosan egy vonalba essen, itt
   1100px a maximum (1180 − 2×40). */
.hm-sec .hm-wrap{max-width:1100px}
.hm-sec-head{display:flex;align-items:center;gap:14px;margin-bottom:8px}
/* A méret azért kell CSS-ből, mert a hb-ui.js 26px felett tekinti blokk-
   sorszámnak (a kártyákon lévő kisebbeket szándékosan kihagyja). */
.hm-num{font-size:30px;line-height:1;color:var(--teal)}
.hm-kicker{font:700 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,245,240,.5)}
.hm-h2{font:700 40px/1.1 var(--f-head);margin:0 0 14px;letter-spacing:-.01em}
.hm-p{font-size:16px;line-height:1.65;color:rgba(247,245,240,.78);max-width:720px;margin:0 0 26px}

/* ---------------- 01 · MI KÉSZÜL ITT? ---------------- */
.hm-promise{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hm-promise-card{background:var(--navy-c);border:1.5px solid rgba(247,245,240,.12);
  border-radius:16px;padding:22px 22px 20px;transition:transform .15s,border-color .18s}
.hm-promise-ico{width:42px;height:42px;border-radius:12px;background:var(--lime);
  color:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.hm-promise-ico .i{width:22px;height:22px}
.hm-promise-t{font:700 16px var(--f-head);margin:0 0 8px}
.hm-promise-d{font-size:13.5px;line-height:1.5;color:rgba(247,245,240,.72);margin:0}

/* ---------------- 02 · ADDIG IS ---------------- */
.hm-ready{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hm-ready-card{display:flex;flex-direction:column;background:var(--navy-c);
  border:1.5px solid rgba(247,245,240,.12);border-radius:16px;padding:18px 20px;
  transition:transform .15s,border-color .18s,box-shadow .18s}
.hm-ready-top{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.hm-ready-ico{flex:none;width:38px;height:38px;border-radius:11px;background:var(--teal);
  color:var(--navy);display:flex;align-items:center;justify-content:center}
.hm-ready-ico .i{width:20px;height:20px}
.hm-ready-t{font:700 15px var(--f-head);line-height:1.2}
.hm-ready-d{font-size:13px;line-height:1.5;color:rgba(247,245,240,.72);margin:0 0 13px;flex:1}
.hm-ready-go{display:inline-flex;align-items:center;gap:6px;font:700 12.5px var(--f-head);
  color:rgba(247,245,240,.6);transition:gap .18s,color .18s}
.hm-ready-go .i{width:15px;height:15px}

/* ---------------- 03 · HA MOST KELL SEGÍTSÉG ---------------- */
.hm-help{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;
  background:var(--navy-c);border:1.5px solid rgba(247,245,240,.12);
  border-left:4px solid var(--danger);border-radius:20px;padding:28px 30px}
.hm-help h2{font:700 30px/1.12 var(--f-head);margin:8px 0 12px}
.hm-help p{font-size:15px;line-height:1.6;color:rgba(247,245,240,.78);margin:0 0 18px}
.hm-nums{display:flex;flex-direction:column;gap:9px}
.hm-num-card{display:flex;align-items:center;gap:12px;background:rgba(247,245,240,.05);
  border:1px solid rgba(247,245,240,.12);border-radius:12px;padding:11px 14px}
.hm-num-card .i{width:17px;height:17px;flex:none}
.hm-num-n{font-family:var(--f-display);font-size:24px;line-height:1}
.hm-num-d{font-size:12px;line-height:1.35;color:rgba(247,245,240,.7)}

/* ---------------- 04 · VAN ÖTLETED? ---------------- */
.hm-idea{text-align:center;max-width:680px;margin:0 auto}
.hm-idea h2{font:700 34px/1.12 var(--f-head);margin:0 0 12px}
.hm-idea p{font-size:16px;line-height:1.6;color:rgba(247,245,240,.78);margin:0 0 22px}

/* ---------------- „HAMAROSAN” BLOKK (egy szekció helyére) ----------------
   Ez NEM a /hamarosan/ laphoz kell, hanem akkor, ha egy egyébként kész
   aloldalnak csak EGY-KÉT blokkja hiányzik: a hiányzó blokk helyére a
   `hamarosan-blokk-szekciok.html` 01/02/03-as darabját illeszted be.
   Csak markup + ez a CSS kell hozzá, JS nincs benne (így két placeholder
   is elfér egy oldalon — nincsenek id-k, amik ütköznének).

   A blokk hátterét a .hm wrapper inline stílusa adja, hogy a szomszédos
   szekciókhoz igazítható legyen (#003153 vagy #00263f). */
.hm-hold{position:relative;overflow:hidden;background:var(--navy-c);
  border:1.5px solid rgba(245,179,36,.3);border-radius:20px;
  box-shadow:0 24px 50px -30px rgba(0,0,0,.7)}
/* építkezés-szalag a doboz tetején (tisztán CSS, nem animált) */
.hm-hold-tape{height:10px;
  background:repeating-linear-gradient(-45deg,#F5B324 0 16px,#00263f 16px 32px)}
.hm-hold-in{display:grid;grid-template-columns:1.08fr .92fr;gap:30px;
  padding:28px 30px 26px;align-items:start}
.hm-hold-ico{width:46px;height:46px;border-radius:13px;
  background:linear-gradient(135deg,var(--amber),var(--navy));
  display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px}
.hm-hold-ico .i{width:24px;height:24px}
.hm-hold-t{font:700 21px/1.25 var(--f-head);margin:0 0 10px}
.hm-hold-d{font-size:15px;line-height:1.6;color:rgba(247,245,240,.78);margin:0 0 20px}
/* jobb hasáb: állapot-doboz (statikus sáv — a szélességet inline adod meg) */
.hm-hold-state{background:rgba(247,245,240,.05);border:1px solid rgba(247,245,240,.12);
  border-radius:14px;padding:16px 18px 12px}
.hm-hold-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* a doboz jobb alsó sarkában halvány pontraszter (mint a visszajelző paneleken) */
.hm-hold-dots{position:absolute;right:0;bottom:0;width:130px;height:130px;pointer-events:none;
  background-image:radial-gradient(rgba(245,179,36,.42) 1.6px,transparent 1.8px);
  background-size:13px 13px;
  -webkit-mask-image:radial-gradient(circle at bottom right,#000,transparent 72%);
  mask-image:radial-gradient(circle at bottom right,#000,transparent 72%)}
@media(max-width:900px){
  .hm-hold-in{grid-template-columns:1fr;gap:22px}
}
@media(max-width:600px){
  .hm-hold-in{padding:22px 20px 20px}
  .hm-hold-t{font-size:19px}
  .hm-hold-cta .hm-btn,.hm-hold-cta .hm-btn-ghost{width:100%;justify-content:center}
}

/* ---------------- ANIMÁCIÓK ---------------- */
@keyframes hmpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
@keyframes hmfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes hmspin{to{transform:rotate(360deg)}}
@keyframes hmmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .hm-card,.hm-dot,.hm-tape-track,.hm-step-now .i{animation:none!important}
  .hm-bar-fill{transition:none}
}

/* ---------------- HOVER — CSAK EGÉRREL ----------------
   iOS Safarin a koppintás először a :hover állapotot kapcsolja be, és csak a
   MÁSODIK koppintás navigál. Ezért minden hover-szabály e kapu mögé kerül. */
@media (hover:hover) and (pointer:fine){
  .hm-btn:hover{transform:translateY(-2px)}
  .hm-btn-ghost:hover{border-bottom-color:var(--lime);color:var(--lime)}
  .hm-promise-card:hover{transform:translateY(-3px);border-color:rgba(247,245,240,.28)}
  .hm-ready-card:hover{transform:translateY(-3px);border-color:rgba(247,245,240,.28);
    box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
  .hm-ready-card:hover .hm-ready-go{gap:10px;color:var(--lime)}
}

/* ---------------- RESZPONZÍV ---------------- */
@media(max-width:900px){
  .hm-hero-grid{grid-template-columns:1fr;gap:34px}
  /* stretch (és nem start): a start zsugorodó rácselemet csinál a kártyából,
     amitől mobilon keskenyebb lenne, mint a szekció. A belső doboz szabja a
     méretet: tableten 340px, 600px alatt teljes szélesség. */
  .hm-card{justify-self:stretch}
  .hm-promise,.hm-ready{grid-template-columns:1fr 1fr}
  .hm-help{grid-template-columns:1fr;padding:24px 22px}
}
@media(max-width:600px){
  .hm-nav{padding:16px 20px}
  .hm-hero{padding:26px 20px 46px}
  .hm-lead{font-size:16.5px}
  .hm-sec{padding:48px 20px}
  .hm-h2{font-size:30px}
  .hm-promise,.hm-ready{grid-template-columns:1fr}
  .hm-card-in{width:100%}
  .hm-idea h2{font-size:27px}
  .hm-help h2{font-size:25px}
  /* a szekció-hivatkozások helyét mobilon a Rólunk + Kríziskezelés kapja
     (ugyanaz a séma, mint a többi aloldalon) */
  .hm-nav-links{display:none}
}