/* ============================================================
   Hello Biztonság — FIATALOK ÉS ERŐSZAK · 2. aloldal (BULLYING) stílus
   Minden szabály .fe2 alá skópozva, hogy ne ütközzön a témával.
   A blokkjaidra tedd rá a .fe2 wrappert (ld. szekció-fájl).
   A dinamikus tartalmat (besoroló, igaz/hamis, lépés-kártyák,
   helyzetek, elérhetőségek) az fe2-page.js építi fel — a kártyák
   belső stílusa ott, inline van.
   ============================================================ */

.fe2{
  --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);
}
.fe2 *{box-sizing:border-box}
.fe2 img{display:block}
.fe2 a{text-decoration:none}
.fe2 button{font-family:inherit}
.fe2 .i{display:inline-flex;align-items:center;justify-content:center}
.fe2 .i svg{width:100%;height:100%;display:block}

/* ---- Interaktív elemek közös hover-jei ---- */
.fe2-concept{cursor:pointer;transition:transform .15s,background .18s,border-color .18s}
@media (hover:hover) and (pointer:fine){.fe2-concept:hover{transform:translateY(-2px)}}
.fe2-ctab{cursor:pointer;transition:transform .12s,background .15s,border-color .15s}
@media (hover:hover) and (pointer:fine){.fe2-ctab:hover{transform:translateY(-1px)}}
.fe2-opt{cursor:pointer;transition:transform .12s,background .18s,border-color .18s}
@media (hover:hover) and (pointer:fine){.fe2-opt:not(:disabled):hover{transform:translateY(-2px)}}
.fe2-sopt{cursor:pointer;transition:transform .12s,background .18s,border-color .18s}
@media (hover:hover) and (pointer:fine){.fe2-sopt:not(:disabled):hover{transform:translateY(-2px)}}
.fe2-card{cursor:grab;touch-action:none;user-select:none}
.fe2-hidden{display:none!important}
.fe2-hhead{transition:background .18s}
@media (hover:hover) and (pointer:fine){.fe2-hcard:hover{border-color:rgba(247,245,240,.24)}}
/* 03 lépés-kártyák: görgetéskor egymásra csúsznak (sticky-stack), felfelé görgetve visszaválnak.
   A rögzülési vonal a --fe2-stack-top (alap 24px, a #fe2-help-en felülírható). */
.fe2-hcard.fe2-hstack{box-shadow:0 -3px 18px rgba(0,0,0,.22)}
@media (prefers-reduced-motion: reduce){
  .fe2-hcard.fe2-hstack{position:static!important;box-shadow:none}
}
.fe2-contact{transition:transform .15s,border-color .18s}
@media (hover:hover) and (pointer:fine){.fe2-contact:hover{transform:translateY(-3px)}}

/* ---- Belépő animációk ---- */
.fe2-pop{animation:fe2pop .5s cubic-bezier(.2,.9,.3,1.2) backwards}
.fe2-rise{animation:fe2rise .45s ease backwards}

/* ---- Animációk ---- */
@keyframes fe2float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes fe2pulseL{0%,100%{box-shadow:0 0 0 0 rgba(201,234,61,.5)}70%{box-shadow:0 0 0 16px rgba(201,234,61,0)}}
@keyframes fe2marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes fe2pop{from{opacity:0;transform:translateY(22px) scale(.94)}60%{transform:translateY(-4px) scale(1.01)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fe2rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fe2numpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* ---- 03 · „Mit tehetsz?" — kiemelt szavak + mozgalmas lenyílás ---- */
/* aláhúzott kulcsszavak: vastag + halk lime-glow pulzálás (kissé eltolt fázis) */
.fe2-emph{display:inline-block;font-weight:800;color:#fff;animation:fe2emph 1.9s ease-in-out infinite;will-change:transform}
.fe2-emph:nth-of-type(2n){animation-delay:.5s}
.fe2-emph:nth-of-type(3n){animation-delay:1s}
@keyframes fe2emph{
  0%,100%{transform:scale(1);text-shadow:0 0 0 rgba(201,234,61,0)}
  50%{transform:scale(1.09);text-shadow:0 0 13px rgba(201,234,61,.9)}
}

/* lépés-sorok felülről lefelé kaszkádolnak, a sorszám-jelvények balról jobbra fordulnak be */
.fe2-steprow{animation:fe2rise .5s ease backwards}
.fe2-stepnum{transform-origin:left center;animation:fe2flip .55s cubic-bezier(.2,.7,.3,1.1) backwards}
@keyframes fe2flip{from{transform:perspective(320px) rotateY(-90deg);opacity:0}to{transform:perspective(320px) rotateY(0);opacity:1}}

/* fej-ikon pukkanás lenyíláskor */
.fe2-iconpop{animation:fe2iconpop .5s cubic-bezier(.2,.8,.3,1.3) backwards}
@keyframes fe2iconpop{0%{transform:scale(.55) rotate(-14deg);opacity:0}60%{transform:scale(1.12) rotate(4deg)}100%{transform:scale(1) rotate(0);opacity:1}}

/* chevron: lefelé mutat zárva, felfelé fordul nyitáskor (pörgő átmenet) */
.fe2-chev{transition:transform .25s ease}
.fe2-chev.open{transform:rotate(180deg);animation:fe2chev .32s ease}
@keyframes fe2chev{from{transform:rotate(0)}to{transform:rotate(180deg)}}

/* tipp-doboz csillámikonja finoman pislákol */
.fe2-twinkle{display:inline-flex;animation:fe2twinkle 2.4s ease-in-out infinite}
@keyframes fe2twinkle{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}

/* elérhetőség-számok előtti telefon-ikon: időnként finoman megbillen (mint egy csengő telefon) */
.fe2-phwobble{display:inline-flex;transform-origin:center bottom;animation:fe2wobble 2s ease-in-out infinite}
@keyframes fe2wobble{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: aki kéri, annak nyugalom (a glow statikusan marad) */
@media (prefers-reduced-motion: reduce){
  .fe2-emph,.fe2-twinkle,.fe2-steprow,.fe2-stepnum,.fe2-iconpop,.fe2-chev.open,.fe2-phwobble{animation:none}
  .fe2-emph{text-shadow:0 0 8px rgba(201,234,61,.45)}
}

/* ---- Reszponzív ---- */
@media(max-width:900px){
  .fe2-hero-grid{grid-template-columns:1fr!important}
  .fe2-swipe-grid{grid-template-columns:1fr!important}
  .fe2-three{grid-template-columns:1fr!important}
  .fe2-contacts{grid-template-columns:1fr 1fr!important}
  .fe2-concept-grid{grid-template-columns:1fr 1fr!important}
}
@media(max-width:600px){
  .fe2-nav-links{display:none!important}
  .fe2-contacts{grid-template-columns:1fr!important}
  .fe2-concept-grid{grid-template-columns:1fr!important}
  .fe2-two{grid-template-columns:1fr!important}

  /* Válaszgombok mobilon is 2×2-ben maradnak — kicsit kompaktabb, hogy elférjenek */
  .fe2-opts{gap:8px!important}
  .fe2-opt{padding:11px 12px!important;font-size:13px!important}

  /* kisebb oldalsó margó, hogy több hely legyen */
  .fe2 header,
  .fe2 #fe2-besorolo,
  .fe2 #fe2-tehetsz{padding-left:16px!important;padding-right:16px!important}
  .fe2 #fe2-huzol > div,
  .fe2 #fe2-lepsz > div,
  .fe2 #fe2-segitseg > div{padding-left:16px!important;padding-right:16px!important}
}