/* ============================================================
   Hello Biztonság — SZERZŐDÉSKÖTÉS · 2. aloldal („Az apró betűk") stílus
   Minden szabály .sz2 alá skópozva, hogy ne ütközzön a témával.
   A blokkjaidra tedd rá a .sz2 wrappert (ld. szekció-fájl).
   A dinamikus tartalmat (dokumentum-kártyák, „Melyikben keresnéd?",
   szerződésröntgen, hangfal-útvonalak, üzenetminták, elérhetőségek)
   az sz2-page.js építi fel — a kártyák belső stílusa ott, inline van;
   ide csak az kerül, amit inline nem lehet (hover, animáció, reszponzív).
   ============================================================ */

.sz2{
  --navy:#003153; --navy-d:#00263f; --teal:#11B7A3; --lime:#C9EA3D;
  --cream:#F7F5F0; --danger:#FF5A5A; --amber:#F5B324; --info:#8AA9C9;
  --neon:#FF2A4D;
  --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);
}
.sz2 *{box-sizing:border-box}
.sz2 img{display:block}
.sz2 a{text-decoration:none}
.sz2 button{font-family:inherit}
.sz2 .i{display:inline-flex;align-items:center;justify-content:center}
.sz2 .i svg{width:100%;height:100%;display:block}
.sz2-hidden{display:none!important}

/* ---- Belépő animációk ---- */
.sz2-pop{animation:sz2pop .5s cubic-bezier(.2,.9,.3,1.2) backwards}
.sz2-rise{animation:sz2rise .45s ease backwards}
.sz2-fb{animation:sz2rise .3s ease}
@keyframes sz2float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes sz2pulseT{0%,100%{box-shadow:0 0 0 0 rgba(17,183,163,.5)}70%{box-shadow:0 0 0 16px rgba(17,183,163,0)}}
@keyframes sz2marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes sz2pop{from{opacity:0;transform:translateY(22px) scale(.94)}60%{transform:translateY(-4px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sz2rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes sz2shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ---- HERO — a lebegő dokumentum + a rajta vándorló nagyító ---- */
.sz2-hero-card{animation:sz2float 6s ease-in-out infinite}
.sz2-lens{
  position:absolute;width:118px;height:118px;border-radius:50%;
  border:4px solid var(--teal);background:#062338;
  box-shadow:0 0 0 3px rgba(0,38,63,.9),0 14px 30px -10px rgba(0,0,0,.7),inset 0 0 22px rgba(17,183,163,.18);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  animation:sz2lens 10s ease-in-out infinite;pointer-events:none;
}
.sz2-lens::after{content:'';position:absolute;right:-30px;bottom:-22px;width:46px;height:14px;border-radius:7px;background:var(--teal);transform:rotate(40deg);transform-origin:left center}
.sz2-lens-t{font:800 15px 'Space Grotesk';color:#F7F5F0;line-height:1.15;opacity:0;animation:sz2lenstext 10s ease-in-out infinite}
.sz2-lens-s{font:700 9.5px 'Space Mono';letter-spacing:.06em;text-transform:uppercase;color:var(--lime);margin-top:4px;opacity:0;animation:sz2lenstext 10s ease-in-out infinite}
@keyframes sz2lens{
  0%{transform:translate(0,0)}
  22%{transform:translate(120px,22px)}
  38%{transform:translate(120px,22px)}
  60%{transform:translate(10px,96px)}
  76%{transform:translate(10px,96px)}
  100%{transform:translate(0,0)}
}
@keyframes sz2lenstext{0%,18%{opacity:0}26%,36%{opacity:1}44%,56%{opacity:0}64%,74%{opacity:1}82%,100%{opacity:0}}
.sz2-accept{cursor:pointer;transition:transform .15s,box-shadow .2s}
@media (hover:hover) and (pointer:fine){.sz2-accept:hover{transform:translateY(-2px);box-shadow:0 0 30px -6px rgba(201,234,61,.8)}}
.sz2-accept:active{transform:scale(.97)}

/* ---- 01 · dokumentum-kártyák (nyithatók) ---- */
.sz2-doc{cursor:pointer;transition:transform .15s,border-color .18s}
@media (hover:hover) and (pointer:fine){.sz2-doc:hover{transform:translateY(-3px)}}
.sz2-doc:focus-visible{outline:2px solid #C9EA3D;outline-offset:3px}
.sz2-chev{transition:transform .25s ease;display:inline-flex}
.sz2-chev.open{transform:rotate(180deg)}
.sz2-doc-body{animation:sz2rise .3s ease}
.sz2-li{animation:sz2rise .4s ease backwards}
.sz2-li:nth-child(2){animation-delay:.05s}
.sz2-li:nth-child(3){animation-delay:.1s}
.sz2-li:nth-child(4){animation-delay:.15s}
.sz2-li:nth-child(5){animation-delay:.2s}
.sz2-li:nth-child(6){animation-delay:.25s}

/* ---- Válaszgombok (közös: „Melyikben keresnéd?", csapda, röntgen, hangfal) ---- */
.sz2-opt{cursor:pointer;transition:transform .12s,background .18s,border-color .18s,opacity .18s}
@media (hover:hover) and (pointer:fine){.sz2-opt:not(:disabled):hover{transform:translateY(-2px)}}
.sz2-opt:disabled{cursor:default}
.sz2-opt.sz2-opt-wrong{animation:sz2shake .4s ease}
.sz2-btn{cursor:pointer;transition:transform .12s,background .18s,box-shadow .18s}
@media (hover:hover) and (pointer:fine){.sz2-btn:not(:disabled):hover{transform:translateY(-2px)}}
.sz2-btn:disabled{opacity:.4;cursor:default}

/* ---- 02 · szerződésröntgen — az ajánlat sorai, ha „átvilágítjuk" ---- */
.sz2-offer-line{position:relative;border-radius:8px;padding:3px 8px;margin:0 -8px;transition:background .25s,box-shadow .25s,color .25s}
.sz2-offer-line.sz2-scan{background:rgba(201,234,61,.16);box-shadow:0 0 0 1.5px rgba(201,234,61,.7);color:#fff;overflow:hidden}
.sz2-offer-line.sz2-scan::before{content:'';position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,rgba(201,234,61,.35),transparent);animation:sz2sweep 1.6s ease-in-out infinite}
.sz2-offer-line.sz2-done{background:rgba(17,183,163,.12);box-shadow:0 0 0 1px rgba(17,183,163,.5)}
@keyframes sz2sweep{from{left:-40%}to{left:110%}}
.sz2-xtab{cursor:pointer;transition:transform .12s,background .18s,border-color .18s}
@media (hover:hover) and (pointer:fine){.sz2-xtab:not(:disabled):hover{transform:translateY(-2px)}}
.sz2-retry{animation:sz2shake .45s ease}

/* ---- 03 · hangfal — a két helyzet kártyái, nyitható lapok ---- */
.sz2-route{cursor:pointer;transition:transform .15s,border-color .18s,background .18s}
@media (hover:hover) and (pointer:fine){.sz2-route:hover{transform:translateY(-3px)}}
.sz2-route:focus-visible{outline:2px solid #C9EA3D;outline-offset:3px}
.sz2-open{cursor:pointer;transition:transform .15s,border-color .18s,background .18s}
@media (hover:hover) and (pointer:fine){.sz2-open:hover{transform:translateY(-2px)}}
.sz2-open:focus-visible{outline:2px solid #C9EA3D;outline-offset:3px}
.sz2-step{animation:sz2rise .35s ease}

/* ---- 04 · segítség ---- */
.sz2-tpl-btn{cursor:pointer;transition:transform .12s,background .18s,border-color .18s}
@media (hover:hover) and (pointer:fine){.sz2-tpl-btn:hover{transform:translateY(-2px)}}
.sz2-contact{transition:transform .15s,border-color .18s}
@media (hover:hover) and (pointer:fine){.sz2-contact:hover{transform:translateY(-3px)}}
.sz2-prep{transition:transform .15s}
@media (hover:hover) and (pointer:fine){.sz2-prep:hover{transform:translateY(-3px)}}
.sz2-phwobble{display:inline-flex;transform-origin:center bottom;animation:sz2wobble 2s ease-in-out infinite}
@keyframes sz2wobble{0%,55%,100%{transform:rotate(0)}62%{transform:rotate(-9deg)}70%{transform:rotate(7deg)}78%{transform:rotate(-6deg)}86%{transform:rotate(4deg)}94%{transform:rotate(-2deg)}}

/* ---- Mozgásérzékenység ---- */
@media (prefers-reduced-motion: reduce){
  .sz2-hero-card,.sz2-lens,.sz2-lens-t,.sz2-lens-s,.sz2-pop,.sz2-rise,.sz2-fb,.sz2-doc-body,.sz2-li,
  .sz2-offer-line.sz2-scan::before,.sz2-opt.sz2-opt-wrong,.sz2-retry,.sz2-step,.sz2-phwobble{animation:none!important}
  .sz2-lens{transform:translate(120px,22px)}
  .sz2-lens-t,.sz2-lens-s{opacity:1}
}

/* ---- Reszponzív ---- */
/* a 04-es blokk bevezetőjében a sortörés csak PC-n él */
.sz2 .sz2-br-pc{display:inline}
@media(max-width:900px){
  .sz2 .sz2-br-pc{display:none}
  .sz2-hero-grid{grid-template-columns:1fr!important}
  .sz2-hero-visual{justify-self:start!important}
  .sz2-two{grid-template-columns:1fr!important}
  .sz2-doc-grid{grid-template-columns:1fr!important}
  .sz2-contacts{grid-template-columns:1fr 1fr!important}
  .sz2-prep-grid{grid-template-columns:1fr 1fr!important}
  .sz2-routes{grid-template-columns:1fr!important}
}
@media(max-width:600px){
  .sz2-nav-links{display:none!important}
  .sz2-hero-visual{width:100%!important}
  .sz2-hero-visual > div{width:100%!important;max-width:340px}
  .sz2-contacts{grid-template-columns:1fr!important}
  .sz2-prep-grid{grid-template-columns:1fr!important}
  .sz2-three{grid-template-columns:1fr!important}

  /* kisebb oldalsó margó (az inline paddingra illeszkedő szelektorok) */
  .sz2 > nav,.sz2 > header,
  .sz2 > section[style*="padding:70px 40px"],
  .sz2 > section[style*="padding:60px 40px"]{padding-left:18px!important;padding-right:18px!important}
  .sz2 > section > div[style*="padding:0 40px"]{padding-left:18px!important;padding-right:18px!important}

  .sz2-opts{grid-template-columns:1fr!important}
  .sz2-opt{padding:12px 14px!important;font-size:14px!important}
  .sz2-fb-head{flex-wrap:nowrap!important;gap:8px!important}
  .sz2-fb-title{font-size:12.5px!important;letter-spacing:0!important}
  .sz2-fb-pill{flex:none;font-size:10.5px!important;padding:4px 9px!important;white-space:normal;text-align:center;max-width:46%}
  .sz2-xtabs{grid-template-columns:1fr 1fr 1fr!important;gap:6px!important}
  .sz2-xtab{padding:10px 6px!important;font-size:12px!important}
  .sz2-stepnav{flex-direction:column!important;align-items:stretch!important}
  .sz2-stepnav > *{justify-content:center}
}