/* =========================================================
   microplasma.hu — stíluslap

   Felépítés:
     1. Tokenek (NUXON-színek, betűk, térközök) — globális állítás itt
     2. Alapok
     3. Közös elemek (keret, gombok, szakaszok, képhelyőrzők)
     4. Fejléc és menü
     5. Blokkok (hero, kérdések, technológia, alkalmazások,
        termékek, folyamat, figyelmeztetés, GYIK, aloldalak)
     6. Űrlap
     7. Jogi oldalak, 404, lábléc
     8. Süti-banner
     9. Reszponzív és csökkentett mozgás

   SZABÁLY: módosításkor az eredeti szabályt írd át, ne fűzz a fájl
   végére felülírást. Új márkaszínt ne vezess be; a NUXON-tokenekből
   dolgozz. (Az alap az iparilegszures.hu v26 stíluslapja.)
   ========================================================= */

/* =========================================================
   1. TOKENEK
   ========================================================= */
:root{
  /* NUXON márkaszínek — nem változtathatók */
  --nuxon-primary:  #183090;
  --nuxon-primary-dark: #101F5E;
  --nuxon-accent:   #18A8D8;
  --nuxon-antracit: #18212B;
  --nuxon-deep:     #101C4A;

  --felulet:        #FFFFFF;
  --felulet-alt:    #F3F6F7;
  --felulet-kek:    #EEF3FA;

  --szoveg:         #15232A;
  --szoveg-halk:    #4F6169;
  --szoveg-inverz:  #F3F6F7;
  --szoveg-inverz-halk: #B9C6DE;
  --vonal:          #D5DEE1;
  --vonal-eros:     #B7C4C9;

  /* a türkiz csak légáramra, kiemelésre és fókuszra */
  --jel:            var(--nuxon-accent);
  --jel-halvany:    rgba(24,168,216,.14);

  /* szagterhelt (szennyezett) levegő a vázlatokon: barnás-zöld */
  --szag:           #8A7B3C;

  --siker:          #1B7A4B;
  --figyel:         #9A6410;
  --hiba:           #A3231F;

  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.125rem;
  --fs-lg:   1.2rem;
  --fs-xl:   clamp(1.3rem, 1.9vw, 1.55rem);
  --fs-2xl:  clamp(1.65rem, 3vw, 2.3rem);
  --fs-hero: clamp(2.1rem, 4.2vw, 3.4rem);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --r-kicsi: 3px;
  --r-kozep: 6px;
  --r-nagy:  12px;

  --arnyek: 0 4px 16px rgba(21,35,42,.09), 0 1px 3px rgba(21,35,42,.06);

  --keret:   1280px;
  --olvaso:  66ch;
  --fejlec-m: 76px;

  --mozgas: 260ms cubic-bezier(.2,.6,.3,1);
}

@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:optional;}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:optional;}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:optional;}
@font-face{font-family:"IBM Plex Serif";src:url("../fonts/plex-serif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:optional;}
@font-face{font-family:"IBM Plex Serif";src:url("../fonts/plex-serif-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:optional;}
@font-face{font-family:"IBM Plex Serif";src:url("../fonts/plex-serif-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:optional;}

/* =========================================================
   2. ALAPOK
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--fejlec-m) + 12px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--felulet); color:var(--szoveg);
  font-family:var(--font-serif); font-size:var(--fs-base); line-height:1.7;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
img{ height:auto; display:block; }
h1,h2,h3{
  font-family:var(--font-sans); font-weight:600; line-height:1.18;
  letter-spacing:-.012em; margin:0 0 var(--sp-4); color:inherit;
}
h1{ font-size:var(--fs-hero); letter-spacing:-.022em; }
h2{ font-size:var(--fs-2xl); }
h3{ font-size:var(--fs-xl); }
p{ margin:0 0 var(--sp-4); }
a{ color:var(--nuxon-primary); text-underline-offset:.18em; }
a:hover{ text-decoration-thickness:2px; }
:focus-visible{ outline:3px solid var(--jel); outline-offset:3px; border-radius:2px; }

.sr{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.ugro{
  position:absolute; left:var(--sp-4); top:-60px; z-index:100;
  background:var(--nuxon-primary); color:#fff; padding:var(--sp-2) var(--sp-4);
  font-family:var(--font-sans); border-radius:var(--r-kicsi);
}
.ugro:focus{ top:var(--sp-3); }
.ikonkeszlet{ position:absolute; width:0; height:0; overflow:hidden; }

/* =========================================================
   3. KÖZÖS ELEMEK
   ========================================================= */
.keret{ max-width:var(--keret); margin:0 auto; padding:0 clamp(16px,4vw,40px); }

.szakasz{ padding:clamp(56px,8vw,104px) 0; }
.szakasz--alt{ background:var(--felulet-alt); }
.szakasz--sotet{ background:var(--nuxon-deep); color:var(--szoveg-inverz); }
.szakasz--sotet a:not(.btn){ color:#fff; }
.szakasz__fej{ margin-bottom:clamp(32px,4vw,56px); }
.szakasz__fej h2,.olvaso,.bevezeto{ max-width:var(--olvaso); }
.bevezeto{ font-family:var(--font-sans); font-size:var(--fs-lg); line-height:1.5; color:var(--szoveg-halk); }
.kicker{ font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:600; color:var(--nuxon-primary); margin:0 0 var(--sp-2); }
.szakasz--sotet .kicker{ color:var(--jel); }

.ket-oszlop{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px); align-items:center;
}
.gombsor{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-5); margin-top:var(--sp-6); margin-bottom:0; }

/* gombok */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:48px; padding:12px 22px; border-radius:var(--r-kozep);
  font-family:var(--font-sans); font-size:1rem; font-weight:600; line-height:1.25;
  text-decoration:none; text-align:center; cursor:pointer;
  border:2px solid transparent; transition:background-color var(--mozgas), border-color var(--mozgas), color var(--mozgas);
}
.btn--elsodleges{ background:linear-gradient(100deg, var(--nuxon-primary) 0%, #1A62B4 60%, var(--nuxon-accent) 140%); color:#fff; }
.btn--elsodleges:hover{ background:var(--nuxon-primary-dark); color:#fff; }
.btn--masodlagos{ background:var(--felulet); color:var(--nuxon-primary); border-color:var(--nuxon-primary); }
.btn--masodlagos:hover{ background:var(--jel-halvany); }
.btn--nagy{ min-height:56px; padding:14px 28px; font-size:1.0625rem; }
.btn:disabled{ opacity:.6; cursor:not-allowed; }
.szoveglink{ font-family:var(--font-sans); font-weight:600; min-height:44px; display:inline-flex; align-items:center; text-underline-offset:.25em; }

/* kiemelt mondat */
.kiemeles{
  font-family:var(--font-sans); font-weight:500; font-size:var(--fs-xl); line-height:1.4;
  max-width:48ch; margin:clamp(36px,5vw,56px) 0 0; padding-left:var(--sp-5);
  border-left:4px solid var(--jel);
}
.kiemeles--kicsi{ font-size:var(--fs-lg); max-width:60ch; }

/* pipás lista */
.pipalista{ list-style:none; margin:0 0 var(--sp-4); padding:0; display:grid; gap:var(--sp-2); }
.pipalista li{ position:relative; padding-left:28px; }
.pipalista li::before{ content:""; position:absolute; left:2px; top:.45em; width:12px; height:7px; border-left:2.5px solid var(--nuxon-primary); border-bottom:2.5px solid var(--nuxon-primary); transform:rotate(-45deg); }

/* vonalikonok (a lap elején lévő ikonkészletből) */
.ikon{ fill:none; stroke:var(--nuxon-primary); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* ---------- képhelyőrzők ----------
   Amíg nincs kép, ez áll a helyén: rajta van, mi kell oda, honnan
   szerezhető be és milyen fájlnéven kerül a helyére (KEPEK.md).
   Élesben helyőrző nem maradhat. */
.kep{ margin:0; position:relative; }
.kep img{ width:100%; object-fit:cover; border-radius:var(--r-kozep); }
.kep__helyorzo{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:6px;
  padding:clamp(14px,2.2vw,24px); border:2px dashed var(--vonal-eros); border-radius:var(--r-kozep);
  background:repeating-linear-gradient(135deg, #EEF2F4 0 14px, #E7ECEF 14px 28px);
  font-family:var(--font-sans); font-size:.9375rem; line-height:1.45; color:var(--szoveg);
  overflow-wrap:anywhere;
}
.kep--43 .kep__helyorzo,.kep--43 img{ aspect-ratio:4/3; }
.kep--32 .kep__helyorzo,.kep--32 img{ aspect-ratio:3/2; }
.kep--11 .kep__helyorzo,.kep--11 img{ aspect-ratio:1/1; }
.kep__id{ font-weight:600; font-size:.8125rem; color:#fff; background:var(--nuxon-primary); border-radius:var(--r-kicsi); padding:2px 8px; }
.kep__mi{ font-weight:600; font-size:1rem; }
.kep__sor{ margin:0; font-size:.875rem; }
.kep__sor b{ font-weight:600; }
.kep__sor a{ color:var(--nuxon-primary); }

/* morzsamenü (aloldalak) */
.morzsa{ font-family:var(--font-sans); font-size:var(--fs-sm); margin:0 0 var(--sp-5); }
.morzsa ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px; }
.morzsa li{ display:inline-flex; align-items:center; }
.morzsa li + li::before{ content:"›"; margin:0 8px; color:var(--szoveg-halk); }
.morzsa a{ color:var(--nuxon-primary); display:inline-flex; align-items:center; min-height:32px; }
.morzsa [aria-current]{ color:var(--szoveg-halk); }

/* =========================================================
   4. FEJLÉC ÉS MENÜ
   ========================================================= */
.fejlec{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97);
  border-bottom:1px solid transparent; transition:border-color var(--mozgas), box-shadow var(--mozgas);
}
.fejlec.is-kompakt{ border-bottom-color:var(--vonal); box-shadow:0 2px 10px rgba(21,35,42,.06); }
.fejlec__sor{ display:flex; align-items:center; gap:var(--sp-5); min-height:var(--fejlec-m); transition:min-height var(--mozgas); }
.fejlec.is-kompakt .fejlec__sor{ min-height:62px; }
.marka{ flex:none; display:flex; align-items:center; gap:var(--sp-3); line-height:0; text-decoration:none; }
.marka img{ width:90px; }
.marka__alcim{ font-family:var(--font-sans); font-size:.875rem; font-weight:600; line-height:1.2; color:var(--nuxon-primary); border-left:1px solid var(--vonal-eros); padding-left:var(--sp-3); }

.fonav{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-5); }
.fonav ul{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(12px,1.6vw,26px); }
.fonav ul a{
  font-family:var(--font-sans); font-size:.95rem; font-weight:500; color:var(--szoveg);
  text-decoration:none; padding:var(--sp-2) 0; border-bottom:2px solid transparent;
}
.fonav ul a:hover{ border-bottom-color:var(--jel); }
.fonav__cta{ min-height:44px; padding:10px 18px; font-size:.95rem; }

.menu-gomb{
  display:none; margin-left:auto; width:48px; height:48px; border:0; background:transparent;
  cursor:pointer; position:relative; border-radius:var(--r-kozep);
}
.menu-gomb__vonal,.menu-gomb__vonal::before,.menu-gomb__vonal::after{
  position:absolute; left:12px; width:24px; height:2px; background:var(--szoveg); content:"";
  transition:transform var(--mozgas), opacity var(--mozgas);
}
.menu-gomb__vonal{ top:23px; }
.menu-gomb__vonal::before{ top:-8px; left:0; }
.menu-gomb__vonal::after{ top:8px; left:0; }
.menu-gomb[aria-expanded="true"] .menu-gomb__vonal{ background:transparent; }
.menu-gomb[aria-expanded="true"] .menu-gomb__vonal::before{ transform:translateY(8px) rotate(45deg); }
.menu-gomb[aria-expanded="true"] .menu-gomb__vonal::after{ transform:translateY(-8px) rotate(-45deg); }

/* =========================================================
   5. BLOKKOK
   ========================================================= */

/* ---------- hero (világos) ---------- */
.hero{
  background:linear-gradient(180deg, var(--felulet-kek) 0%, var(--felulet) 100%);
  padding:clamp(32px,5vw,80px) 0 clamp(40px,5vw,64px);
}
.hero__racs{ display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr); gap:clamp(28px,4vw,64px); align-items:center; }
.hero h1{ color:var(--nuxon-deep); max-width:18ch; }
.hero__bev{ font-size:var(--fs-base); color:var(--szoveg); max-width:58ch; }
.hero__kiemelt{ font-family:var(--font-sans); font-size:var(--fs-lg); font-weight:500; line-height:1.45; color:var(--nuxon-primary); max-width:46ch; }
.hero__kep .kep__helyorzo{ background:repeating-linear-gradient(135deg, #E6EDF7 0 14px, #DFE7F3 14px 28px); border-color:#A9B9D6; }
.hero--alo h1{ max-width:24ch; font-size:clamp(1.95rem,3.6vw,3rem); }

/* ---------- főoldali hero: plazma-háttérkép ----------
   A kép (hero-plazma-*.webp) úgy készült, hogy a gömb a kép szélességének
   72%-ánál álljon; az object-position ugyanezt a pontot a hero 72%-ára
   teszi, így a gömb minden képernyőszélességen a szöveg jobb oldalán van. */
.hero--foto{ position:relative; overflow:hidden; background:#03060B; color:#fff;
  padding:clamp(56px,8vw,120px) 0; min-height:clamp(520px,68vh,700px); display:flex; align-items:center; }
.hero__hatter{ position:absolute; inset:0; z-index:0; }
.hero__hatter img{ width:100%; height:100%; object-fit:cover; object-position:72% 46%; }
.hero--foto::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(90deg, rgba(3,6,11,.85) 0%, rgba(3,6,11,.6) 38%, rgba(3,6,11,0) 60%); }
.hero__belso{ position:relative; z-index:1; width:100%; }
.hero--foto .hero__szoveg{ max-width:600px; }
.hero--foto h1{ color:#fff; }
.hero--foto .hero__bev{ color:#D9E3EF; }
.hero--foto .hero__kiemelt{ color:#7AD4F2; }
.hero--foto .szoveglink{ color:#fff; }

/* ---------- kérdések (Ismerős a probléma?) ---------- */
.kerdesek{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-6); border-top:1px solid var(--vonal-eros); }
.kerdesek li{ display:flex; gap:var(--sp-4); align-items:center; padding:var(--sp-4) 0; border-bottom:1px solid var(--vonal-eros); font-family:var(--font-sans); font-weight:500; font-size:var(--fs-lg); line-height:1.4; }
.kerdesek .ikon{ width:36px; height:36px; }

/* ---------- technológia: Micro-Plasma elvi ábra (HTML + CSS) ----------
   Minden animáció úgy van felépítve, hogy a kör eleje és vége azonos
   legyen, így az újraindulás nem látszik:
   - a nyilak pöttysora és a plazma sávja pontosan egy mintahosszt
     (14 px, ill. 120 px) halad egy kör alatt;
   - a lebegés, a villódzás és a részecskék oda-vissza mozognak.
   Képernyőn kívül minden animáció szünetel. */
.plazma-abra{ margin:0; font-family:var(--font-sans); }
.plazma-abra *{ animation-play-state:paused !important; }
.plazma-abra.is-lathato *{ animation-play-state:running !important; }
.pa-racs{ display:grid; grid-template-columns:minmax(0,1fr) 72px minmax(0,1.25fr) 72px minmax(0,.9fr); align-items:center; gap:var(--sp-3); }
.pa-oszlop{ display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); }
.pa-cim{ font-weight:600; font-size:var(--fs-base); color:var(--nuxon-deep); margin:0; text-align:center; }
.pa-megj{ font-size:var(--fs-sm); color:var(--szoveg-halk); margin:0; text-align:center; }

/* szaganyag- és kimenő „buborékok" */
.pa-chipek{ list-style:none; margin:0; padding:var(--sp-3) 0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--sp-3) var(--sp-3); }
.pa-chip{
  font-size:1rem; font-weight:500; line-height:1.2; color:var(--szoveg); padding:10px 16px; border-radius:999px;
  background:radial-gradient(circle at 28% 24%, rgba(255,255,255,.95) 0 14%, rgba(255,255,255,0) 34%), rgba(138,123,60,.12);
  border:1.5px solid rgba(138,123,60,.55); box-shadow:inset 0 -6px 12px rgba(138,123,60,.10);
  animation:lebeg 3.6s ease-in-out infinite;
}
.pa-chip--nagy{ font-size:1.125rem; font-weight:600; padding:12px 20px; }
.pa-chip--kicsi{ font-size:var(--fs-sm); color:var(--szoveg-halk); }
.pa-chip:nth-child(2){ animation-delay:-1.2s; } .pa-chip:nth-child(3){ animation-delay:-2.1s; } .pa-chip:nth-child(4){ animation-delay:-.6s; }
.pa-chip--ki{ background:radial-gradient(circle at 28% 24%, rgba(255,255,255,.95) 0 14%, rgba(255,255,255,0) 34%), rgba(24,168,216,.10); border-color:rgba(24,168,216,.6); box-shadow:inset 0 -6px 12px rgba(24,168,216,.10); }
.pa-bub{ width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 30% 28%, #fff 0 18%, rgba(255,255,255,0) 40%), rgba(24,168,216,.10); border:1.5px solid rgba(24,168,216,.55); animation:lebeg 4.2s ease-in-out infinite; }
.pa-bub--kicsi{ width:18px; height:18px; animation-delay:-1.8s; }
.pa-chipek--ki li:nth-child(4){ animation-delay:-2.6s; }
@keyframes lebeg{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* nyilak: pöttysor halad a nyílhegy felé */
.pa-nyilak{ display:flex; flex-direction:column; gap:22px; }
.pa-nyilak span{ position:relative; display:block; height:8px; margin-right:12px;
  background:radial-gradient(circle, var(--szag) 0 2.6px, transparent 3px) 0 50% / 14px 8px repeat-x;
  animation:pottyok .7s linear infinite; }
.pa-nyilak span::after{ content:""; position:absolute; right:-14px; top:50%; transform:translateY(-50%); border:8px solid transparent; border-left:12px solid var(--szag); border-right:0; }
.pa-nyilak--ki span{ background-image:radial-gradient(circle, var(--jel) 0 2.6px, transparent 3px); }
.pa-nyilak--ki span::after{ border-left-color:var(--jel); }
@keyframes pottyok{ from{ background-position-x:0; } to{ background-position-x:14px; } }
@keyframes pottyok-le{ from{ background-position-y:0; } to{ background-position-y:14px; } }

/* a reaktor rétegei */
.pa-cella{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--sp-3); justify-items:stretch; }
.pa-cella > *{ grid-column:1; }
.pa-jel{ justify-self:center; fill:none; stroke:var(--nuxon-antracit); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.pa-jel--hv{ width:40px; height:44px; stroke:var(--hiba); }
.pa-jel--fold{ width:40px; height:30px; stroke:var(--szoveg-halk); }
.pa-elektroda{ text-align:center; font-weight:600; font-size:var(--fs-base); color:var(--nuxon-deep); padding:12px 8px; border-radius:var(--r-kozep);
  background:linear-gradient(90deg, #8E9DA9 0%, #DCE3E8 45%, #C3CDD4 60%, #8E9DA9 100%); }
.pa-keramia{ text-align:center; font-size:var(--fs-sm); font-weight:500; color:var(--szoveg); padding:7px 8px; margin:4px -6px; border-radius:var(--r-kicsi);
  background:linear-gradient(180deg, #FFFFFF, #E6EBEF); box-shadow:0 1px 3px rgba(21,35,42,.15); }
.pa-plazma{ position:relative; height:96px; overflow:hidden; border-radius:2px;
  background:
    linear-gradient(180deg, rgba(16,28,74,.65) 0%, rgba(16,28,74,0) 35%, rgba(16,28,74,0) 65%, rgba(16,28,74,.65) 100%),
    linear-gradient(90deg, #142C78 0, #1B5FB8 30px, #23A9DC 60px, #1B5FB8 90px, #142C78 120px);
  /* a második réteg 120 px-es csempe, ami pontosan 120 px-t halad egy kör alatt */
  background-size:100% 100%, 120px 100%; background-repeat:no-repeat, repeat-x;
  animation:plazma 3s linear infinite; }
@keyframes plazma{ from{ background-position:0 0, 0 0; } to{ background-position:0 0, 120px 0; } }
.pa-kisules{ position:absolute; inset:0; width:100%; height:100%; }
.pa-kisules path{ fill:none; stroke:#E8F7FF; stroke-width:1.6; stroke-linecap:round; opacity:.35; animation:villan 1.4s ease-in-out infinite; vector-effect:non-scaling-stroke; }
.pa-kisules path:nth-child(2){ animation-delay:-.5s; } .pa-kisules path:nth-child(3){ animation-delay:-.9s; }
.pa-kisules path:nth-child(4){ animation-delay:-.2s; } .pa-kisules path:nth-child(5){ animation-delay:-1.1s; } .pa-kisules path:nth-child(6){ animation-delay:-.7s; }
@keyframes villan{ 0%,100%{ opacity:.25; } 50%{ opacity:.95; } }
.pa-plazma__felirat{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:clamp(1.25rem,2vw,1.6rem); font-weight:600; color:#fff; letter-spacing:.02em; text-shadow:0 0 12px rgba(24,168,216,.9); }
.pa-reszecske{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); font-size:.875rem; font-weight:600; color:#fff; padding:1px 7px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45); animation:villan 2.2s ease-in-out infinite; }
.pa-reszecske:nth-of-type(2){ animation-delay:-.7s; } .pa-reszecske:nth-of-type(3){ animation-delay:-1.4s; } .pa-reszecske:nth-of-type(4){ animation-delay:-.3s; } .pa-reszecske:nth-of-type(5){ animation-delay:-1.8s; }
.pa-res{ grid-column:2; grid-row:4; position:relative; display:flex; align-items:center; padding-left:16px; font-size:var(--fs-xs); line-height:1.25; color:var(--szoveg-halk); max-width:6.5em; }
.pa-res::before{ content:""; position:absolute; left:4px; top:4px; bottom:4px; width:8px; border:1.5px solid var(--szoveg-halk); border-right:0; }
.forras{ font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--szoveg-halk); margin:var(--sp-6) 0 0; }
.forras a{ color:var(--nuxon-primary); }
@keyframes aramlik{ to{ stroke-dashoffset:-40; } }
.f-szag circle{ fill:#8A6A3E; }
.f-szag path{ stroke:#8A6A3E; stroke-width:2; }

/* ---------- alkalmazás-kártyák ---------- */
.akartyak{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--sp-5); }
/* 5 kártya: felül 3, alul 2 középre igazítva (6 oszlopos rács, kártyánként 2) */
.akartyak > li{ grid-column:span 2; }
.akartyak > li:nth-child(4){ grid-column:2 / span 2; }
.akartya{
  display:flex; flex-direction:column; gap:var(--sp-3); height:100%; padding:var(--sp-5); color:inherit; text-decoration:none;
  border:2px solid var(--vonal); border-radius:var(--r-nagy); background:var(--felulet);
  transition:border-color var(--mozgas), box-shadow var(--mozgas), background-color var(--mozgas);
}
.akartya:hover,.akartya:focus-visible{ border-color:var(--nuxon-primary); box-shadow:var(--arnyek); }
.akartya .ikon{ width:48px; height:48px; }
.akartya__cim{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-lg); line-height:1.3; color:var(--nuxon-primary); }
.akartya__szoveg{ font-size:var(--fs-sm); line-height:1.6; color:var(--szoveg); flex:1; }
.akartya__tovabb{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-sm); color:var(--nuxon-primary); }
.akartya__tovabb::after{ content:" →"; }

/* ---------- termékek: PSA / PAD ---------- */
.termekek{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); }
.termek{ display:flex; flex-direction:column; border:1px solid var(--vonal); border-top:4px solid var(--nuxon-primary); border-radius:var(--r-nagy); background:var(--felulet); overflow:hidden; }
.termek__torzs{ padding:var(--sp-5) clamp(20px,3vw,32px) clamp(24px,3vw,32px); display:flex; flex-direction:column; flex:1; }


.termek .gombsor{ margin-top:auto; padding-top:var(--sp-4); }
.termek__abrak{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-4); align-items:start; padding:var(--sp-5) clamp(20px,3vw,32px) 0; }
/* a jelmagyarázat a vázlat és a fotó alatt, két oszlopban: 1–2 / 3–4 */
.termek__abrak .vazlat__jel{ grid-column:1 / -1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px var(--sp-4); margin-top:0; }
/* a termékfotó ugyanakkora, mint mellette a vázlat (4:3), keret nélkül */
.termek__abrak .termekfoto img{ aspect-ratio:4/3; object-fit:cover; }
.termek__leiras{ font-family:var(--font-sans); font-size:var(--fs-lg); font-weight:400; line-height:1.5; color:var(--szoveg); margin-bottom:0; }
.termek__leiras strong{ font-weight:600; color:var(--nuxon-deep); }

/* beépítési vázlatok (PSA / PAD) */
.vazlat{ margin:0; }
.vazlat svg{ display:block; width:100%; height:auto; background:var(--felulet-kek); border-radius:var(--r-kozep); }
.vazlat figcaption{ font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--szoveg-halk); margin-top:var(--sp-2); line-height:1.45; }
.vazlat__jel{ list-style:none; margin:var(--sp-3) 0 0; padding:0; display:grid; gap:4px; font-family:var(--font-sans); font-size:var(--fs-sm); line-height:1.4; counter-reset:vj; }
.vazlat__jel li{ counter-increment:vj; position:relative; padding-left:30px; min-height:22px; }
.vazlat__jel li::before{ content:counter(vj); position:absolute; left:0; top:0; width:22px; height:22px; border-radius:50%; background:var(--nuxon-primary); color:#fff; display:grid; place-items:center; font-size:.75rem; font-weight:600; }
.v-fal{ fill:#C9D3E3; }
.v-padlo{ stroke:var(--szoveg-halk); stroke-width:2; }
.v-keszulek{ fill:#fff; stroke:var(--nuxon-primary); stroke-width:2.5; }
.v-racs{ stroke:var(--nuxon-primary); stroke-width:2; stroke-linecap:round; }
.v-aram--szag{ stroke:var(--szag) !important; }
.v-aram{ fill:none; stroke:var(--jel); stroke-width:2.5; stroke-dasharray:8 12; stroke-linecap:round; animation:aramlik 2.4s linear infinite paused; }
.v-nyil{ fill:var(--jel); }
.v-nyil--szag{ fill:var(--szag); }
.v-cso{ fill:#fff; stroke:var(--szoveg-halk); stroke-width:2.5; }
.v-venti{ fill:#fff; stroke:var(--nuxon-antracit); stroke-width:2.5; }
.v-lapat{ fill:none; stroke:var(--nuxon-antracit); stroke-width:2.5; stroke-linecap:round; }
.v-szam circle{ fill:var(--nuxon-primary); }
.v-szam text{ font-family:var(--font-sans); font-size:15px; font-weight:600; fill:#fff; text-anchor:middle; }
.vazlat.is-lathato .v-aram{ animation-play-state:running; }

/* termékfotók (PSA, PAD) — fehér hátterű gyártói képek fehér kártyán */
.termekfoto{ margin:0; }
/* keret nélkül; a fotó fehér háttere „beleolvad” az alatta lévő felületbe */
.termekfoto img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:contain; mix-blend-mode:multiply; }

/* ---------- 4 lépéses folyamat ---------- */
.lepesek{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-5); counter-reset:l; position:relative; }
.lepesek::before{ content:""; position:absolute; left:20px; right:20px; top:20px; height:2px; background:var(--jel); }
.lepesek li{ counter-increment:l; position:relative; padding-top:60px; }
.lepesek li::before{ content:counter(l); position:absolute; left:0; top:0; width:42px; height:42px; border-radius:50%; background:var(--nuxon-primary); color:#fff;
  display:grid; place-items:center; font-family:var(--font-sans); font-weight:600; box-shadow:0 0 0 5px var(--felulet); }
.szakasz--alt .lepesek li::before{ box-shadow:0 0 0 5px var(--felulet-alt); }
.lepesek strong{ display:block; font-family:var(--font-sans); font-weight:600; font-size:var(--fs-lg); line-height:1.3; margin-bottom:var(--sp-2); color:var(--nuxon-deep); }
.lepesek span{ display:block; font-size:var(--fs-base); line-height:1.55; }

/* ---------- figyelmeztetés (sötét) ---------- */
.figyelem{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-6); align-items:start; }
.figyelem .ikon{ width:56px; height:56px; stroke:var(--jel); }
.figyelem p{ color:var(--szoveg-inverz); max-width:var(--olvaso); }

/* ---------- aloldalak törzse ---------- */
.alo-racs{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start; }
.alo-blokk + .alo-blokk{ margin-top:var(--sp-7); }
.alo-blokk h2{ font-size:var(--fs-xl); color:var(--nuxon-deep); }
.alo-oldalsav{ position:sticky; top:calc(var(--fejlec-m) + 24px); display:grid; gap:var(--sp-4); }
.oldalkartya{ display:block; padding:var(--sp-5); border:2px solid var(--vonal); border-radius:var(--r-nagy); background:var(--felulet); color:inherit; text-decoration:none; transition:border-color var(--mozgas), box-shadow var(--mozgas); }
.oldalkartya:hover,.oldalkartya:focus-visible{ border-color:var(--nuxon-primary); box-shadow:var(--arnyek); }
.oldalkartya__kod{ display:block; font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; color:var(--nuxon-primary); }
.oldalkartya__cim{ display:block; font-family:var(--font-sans); font-weight:600; font-size:var(--fs-lg); line-height:1.3; color:var(--nuxon-primary); margin:2px 0 var(--sp-2); }
.oldalkartya__szoveg{ display:block; font-size:var(--fs-sm); line-height:1.55; }
.oldalsav__cim{ font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--szoveg-halk); margin:0; }
.megjegyzes{ font-family:var(--font-sans); font-weight:500; padding:var(--sp-4) var(--sp-5); background:var(--felulet-kek); border-left:4px solid var(--nuxon-primary); border-radius:0 var(--r-kicsi) var(--r-kicsi) 0; }
.megjegyzes--figyel{ background:rgba(154,100,16,.08); border-left-color:var(--figyel); }

/* termékoldal */
.termek-abra{ max-width:560px; }

/* ---------- GYIK ---------- */
.gyik{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(24px,4vw,64px); align-items:start; }
.gyik__lista{ border-top:1px solid var(--vonal); }
.gyik details{ border-bottom:1px solid var(--vonal); }
.gyik summary{
  list-style:none; cursor:pointer; padding:var(--sp-4) 40px var(--sp-4) 0; position:relative;
  font-family:var(--font-sans); font-weight:500; font-size:var(--fs-lg); line-height:1.4;
}
.gyik summary::-webkit-details-marker{ display:none; }
.gyik summary::after{
  content:""; position:absolute; right:8px; top:50%; width:12px; height:12px; margin-top:-8px;
  border-right:2px solid var(--nuxon-primary); border-bottom:2px solid var(--nuxon-primary);
  transform:rotate(45deg); transition:transform var(--mozgas);
}
.gyik details[open] summary::after{ transform:rotate(225deg); margin-top:-2px; }
.gyik details p{ padding:0 40px var(--sp-5) 0; margin:0; color:var(--szoveg-halk); max-width:var(--olvaso); }

/* =========================================================
   6. ŰRLAP (a mezőket az assets/js/lead.js rajzolja ki a
      config.js szövegeiből)
   ========================================================= */
.zaro{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:clamp(28px,4vw,64px); align-items:start; }
.zaro__szoveg{ position:sticky; top:calc(var(--fejlec-m) + 24px); }
#szagvizsgalat{ scroll-margin-top:var(--fejlec-m); }
#szagvizsgalat:focus{ outline:none; }
.zaro__elerhetoseg{ font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--szoveg-halk); border-top:1px solid var(--vonal); padding-top:var(--sp-4); margin-top:var(--sp-5); }
.zaro__elerhetoseg a{ font-weight:600; white-space:nowrap; }

.lead-doboz{
  background:var(--felulet); border:1px solid var(--vonal); border-top:4px solid var(--nuxon-primary); border-radius:var(--r-nagy);
  box-shadow:var(--arnyek); padding:clamp(20px,3.5vw,44px); font-family:var(--font-sans); min-height:200px;
}
.lead-doboz:focus{ outline:none; }
.lead__bev{ font-size:var(--fs-base); line-height:1.55; margin-bottom:var(--sp-5); }
.lead abbr{ text-decoration:none; color:var(--hiba); }
.lead__opc{ font-weight:400; font-size:var(--fs-sm); color:var(--szoveg-halk); }
.lead__sugo{ font-size:var(--fs-sm); color:var(--szoveg-halk); line-height:1.5; margin:0; }
.lead__csoport{ border:0; padding:0; margin:0 0 var(--sp-6); min-width:0; }
.lead__csoport legend{ font-weight:600; font-size:var(--fs-base); padding:0; margin-bottom:var(--sp-3); }
.lead__csoport--belso{ margin-bottom:var(--sp-4); }
.lead__csoport--belso legend{ font-size:var(--fs-sm); margin-bottom:var(--sp-2); }
.lead__racs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4) var(--sp-5); }

.lmezo{ margin:0 0 var(--sp-4); display:grid; gap:6px; }
.lead__racs .lmezo{ margin:0; }
.lmezo label,.lmezo__cim{ font-weight:600; font-size:var(--fs-sm); }
.lmezo input[type="text"],.lmezo input[type="email"],.lmezo input[type="tel"],.lmezo textarea,.lmezo select{
  font:inherit; font-size:1rem; color:var(--szoveg); background:var(--felulet); width:100%;
  border:2px solid var(--vonal-eros); border-radius:var(--r-kozep); min-height:50px; padding:10px 12px;
}
.lmezo select{ appearance:none; padding-right:40px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--nuxon-primary) 50%), linear-gradient(135deg, var(--nuxon-primary) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size:6px 6px; background-repeat:no-repeat; }
.lmezo textarea{ min-height:130px; resize:vertical; line-height:1.5; }
.lmezo input:focus,.lmezo textarea:focus,.lmezo select:focus{ outline:0; border-color:var(--nuxon-primary); box-shadow:0 0 0 3px var(--jel-halvany); }
.lmezo.is-hibas input,.lmezo.is-hibas textarea,.lmezo.is-hibas select{ border-color:var(--hiba); }
.lmezo__hiba{ font-size:var(--fs-sm); font-weight:500; color:var(--hiba); }
.lmezo__hiba:empty{ display:none; }
.lmezo__szamlalo{ font-size:var(--fs-xs); color:var(--szoveg-halk); }
.lmezo--jelolo{ margin:var(--sp-5) 0; }

.lead__valasztok{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.valaszto{
  display:inline-flex; align-items:center; gap:var(--sp-2); min-height:44px; padding:8px 14px;
  border:2px solid var(--vonal); border-radius:var(--r-kozep); cursor:pointer; font-size:var(--fs-sm); font-weight:500;
  background:var(--felulet); transition:border-color var(--mozgas), background-color var(--mozgas);
}
.valaszto input{ width:18px; height:18px; margin:0; flex:none; accent-color:var(--nuxon-primary); }
.valaszto:hover{ border-color:var(--vonal-eros); }
.valaszto:has(input:checked){ border-color:var(--nuxon-primary); background:var(--jel-halvany); }
.valaszto:focus-within{ outline:3px solid var(--jel); outline-offset:2px; }
.valaszto--jogi{ border:0; padding:0; font-weight:400; align-items:flex-start; background:none; font-size:var(--fs-sm); }
.valaszto--jogi:has(input:checked){ background:none; }
.valaszto--jogi input{ margin-top:3px; }
.lmezo.is-hibas .valaszto--jogi{ color:var(--hiba); }

/* feltöltés */
.feltolto{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-3); }
.feltolto__gomb{ position:relative; }
.feltolto__input{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.feltolto__gomb label{
  display:inline-flex; align-items:center; gap:var(--sp-2); min-height:48px; padding:10px 18px; cursor:pointer;
  border:2px dashed var(--nuxon-primary); border-radius:var(--r-kozep); color:var(--nuxon-primary); font-weight:600; font-size:var(--fs-sm);
  background:var(--felulet);
}
.feltolto__gomb label:hover{ background:var(--jel-halvany); }
.feltolto__input:focus-visible + label{ outline:3px solid var(--jel); outline-offset:3px; }
.feltolto__gomb svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.feltolto__lista{ list-style:none; margin:var(--sp-3) 0 0; padding:0; display:grid; gap:var(--sp-2); }
.feltolto__lista:empty{ display:none; }
.feltolto__lista li{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:var(--sp-4); align-items:center;
  padding:var(--sp-2) var(--sp-3); background:var(--felulet-alt); border-radius:var(--r-kicsi); font-size:var(--fs-sm);
}
.feltolto__nev{ font-weight:500; overflow-wrap:anywhere; }
.feltolto__info{ grid-column:1; color:var(--szoveg-halk); font-size:var(--fs-xs); }
.feltolto__torol{
  grid-column:2; grid-row:1 / span 2; min-height:44px; padding:0 var(--sp-3); border:0; background:none; cursor:pointer;
  font:inherit; font-size:var(--fs-sm); color:var(--hiba); text-decoration:underline; text-underline-offset:.18em;
}

.lead__kuld{ margin:0; }
.lead__kuld .btn{ white-space:normal; }
.lead__hiba{ margin:var(--sp-4) 0 0; padding:var(--sp-3) var(--sp-4); background:rgba(163,35,31,.07); border-left:3px solid var(--hiba); color:var(--hiba); font-weight:500; font-size:var(--fs-sm); }
.csapda{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.lead-siker{ display:flex; gap:var(--sp-4); align-items:flex-start; }
.lead-siker:focus{ outline:none; }
.lead-siker__ikon{ flex:none; width:48px; height:48px; fill:none; stroke:var(--siker); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lead-siker h3{ font-size:var(--fs-xl); margin-bottom:var(--sp-2); }
.lead-siker p{ margin:0 0 var(--sp-2); color:var(--szoveg-halk); }
.lead-noscript{ margin:0; }

/* =========================================================
   7. JOGI OLDALAK, 404, LÁBLÉC
   ========================================================= */
.jogi-vissza{ margin-left:auto; font-family:var(--font-sans); font-weight:500; font-size:var(--fs-sm); color:var(--nuxon-primary); }
.jogi-oldal{ max-width:860px; font-size:var(--fs-base); line-height:1.7; overflow-wrap:anywhere; }
.jogi-oldal h1{ font-size:var(--fs-2xl); margin-bottom:var(--sp-6); }
.jogi-oldal h2,.jogi-oldal h3{ font-size:var(--fs-lg); margin:var(--sp-6) 0 var(--sp-3); }
.jogi-oldal p{ margin:0 0 var(--sp-3); }
.jogi-oldal ul,.jogi-oldal ol{ margin:0 0 var(--sp-4); padding-left:1.4em; }
.jogi-oldal li p{ margin:0 0 var(--sp-1); }
.jogi-oldal a{ color:var(--nuxon-primary); }
.jogi-tabla{ overflow-x:auto; margin:0 0 var(--sp-5); }
.jogi-tabla table{ border-collapse:collapse; width:100%; min-width:560px; font-family:var(--font-sans); font-size:var(--fs-sm); }
.jogi-tabla th,.jogi-tabla td{ border:1px solid var(--vonal); padding:8px 10px; text-align:left; vertical-align:top; }
.jogi-tabla th{ background:var(--felulet-alt); font-weight:600; }

.hiba404{
  font-family:var(--font-sans); font-weight:600; line-height:1; margin:0 0 var(--sp-4);
  font-size:clamp(4rem,12vw,7rem); letter-spacing:-.04em; color:#6F82C2;
}

/* ---------- NUXON közös lábléc (2026.10.06., minden oldalon azonos) ---------- */
.site-foot{
  position:relative; overflow:hidden;
  background:#14202A; color:#B9C8CE;
  padding:var(--sp-9) 0 var(--sp-6);
  font-family:var(--font-sans); font-size:var(--fs-sm); line-height:1.6;
}
.site-foot > .keret{ position:relative; z-index:2; }
.site-foot a{ color:#fff; }
.site-foot p{ margin:0 0 var(--sp-2); }
.site-foot h2{
  position:relative; margin:0 0 var(--sp-3); padding-bottom:var(--sp-3); line-height:1.3;
  color:#fff; font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
}
.site-foot h2::after{ content:""; position:absolute; left:0; bottom:0; width:38px; height:3px; background:var(--nuxon-accent); }
.foto-hatter{ position:absolute; inset:0; z-index:0; }
.foto-hatter img{ width:100%; height:100%; object-fit:cover; display:block; }
.foto-hatter--halk img{ filter:blur(3px); opacity:.30; }
.site-foot::after{ content:""; position:absolute; inset:0; background:rgba(15,29,36,.86); z-index:1; }
.foot-fejlec{ margin-bottom:var(--sp-6); }
.foot-fejlec .foot-logo{ display:block; width:auto; height:52px; margin:0; }
.foot-grid{ display:grid; grid-template-columns:1.25fr 1fr 1.15fr 1fr; gap:var(--sp-6); align-items:start; }
.foot-grid > div > :first-child{ margin-top:0; }
.foot-brandszoveg p:first-child{
  font-size:clamp(1.15rem,1.7vw,1.5rem); font-weight:500; line-height:1.4;
  color:#fff; margin-bottom:var(--sp-4); max-width:24ch;
}
.foot-brandszoveg p + p{ font-size:var(--fs-sm); color:#A9BBC2; max-width:46ch; }
.foot-oldalak{ list-style:none; margin:0; padding:0; }
.foot-oldalak li{ margin:0 0 var(--sp-2); }
.foot-oldalak a,.foot-oldal--jelenlegi{ font-size:var(--fs-sm); line-height:1.6; }
.foot-oldal--jelenlegi{ color:#fff; font-weight:600; }
.foot-kozossegi-sor{ margin-top:var(--sp-7); }
.foot-kozossegi{ display:flex; gap:var(--sp-3); list-style:none; margin:0; padding:0; }
.foot-kozossegi a{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; color:#fff;
  border:1px solid rgba(255,255,255,.28); border-radius:var(--r-kicsi);
}
.foot-kozossegi a:hover{ border-color:var(--nuxon-accent); color:var(--nuxon-accent); }
.foot-kozossegi svg{ width:20px; height:20px; }
.foot-kozossegi .ico{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.foot-alap{ border-top:1px solid rgba(255,255,255,.14); margin-top:var(--sp-6); padding-top:var(--sp-5); }
.foot-alap p{ margin:0; font-size:var(--fs-xs); color:#A3B4BC; }
.foot-zaro{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-5); margin-top:var(--sp-4); }
.foot-zaro p{ margin:0; font-size:var(--fs-xs); color:#A3B4BC; }
.foot-jogi{ list-style:none; margin:0; padding:0; }
.foot-zaro .foot-jogi{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-5); margin-left:auto; }
.foot-zaro .foot-jogi li{ margin:0; }
.foot-zaro .foot-jogi a{ font-size:var(--fs-xs); }
.site-foot .szam{ white-space:nowrap; }

/* =========================================================
   8. SÜTI-BANNER
   ========================================================= */
.cc{ position:fixed; left:0; right:0; bottom:0; z-index:90; padding:clamp(12px,2vw,20px); font-family:var(--font-sans); }
.cc__doboz{
  max-width:var(--keret); margin:0 auto; background:var(--felulet); color:var(--szoveg);
  border:1px solid var(--vonal); border-top:3px solid var(--jel); border-radius:var(--r-nagy); box-shadow:var(--arnyek);
  padding:clamp(18px,2.4vw,28px); display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-5) clamp(24px,3vw,40px); align-items:start;
}
.cc__cim{ font-size:var(--fs-lg); margin:0 0 var(--sp-2); }
.cc__leiras{ font-size:var(--fs-sm); line-height:1.55; color:var(--szoveg-halk); margin:0; max-width:74ch; }
.cc__link{ color:var(--nuxon-primary); }
.cc__gombok{ display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:flex-start; }
.cc__gomb{ white-space:nowrap; }
.cc__reszletek{ margin-top:var(--sp-5); padding-top:var(--sp-5); border-top:1px solid var(--vonal); display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5); }
.cc__kat-fej{ display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2); min-height:32px; }
.cc__kat-cim{ font-size:var(--fs-sm); font-weight:600; }
.cc__kat-leiras{ font-size:var(--fs-xs); line-height:1.5; color:var(--szoveg-halk); margin:0; }
.cc__mindig{ font-size:var(--fs-xs); font-weight:600; color:var(--siker); background:rgba(27,122,75,.10); border-radius:100px; padding:3px 10px; }
.cc__kapcsolo{ display:flex; align-items:center; gap:var(--sp-3); cursor:pointer; }
.cc__kapcsolo input{ width:20px; height:20px; accent-color:var(--nuxon-primary); flex:none; }

/* =========================================================
   9. RESZPONZÍV
   ========================================================= */
@media (max-width:1200px){
  .fonav ul{ gap:14px; }
  .fonav ul a{ font-size:.9rem; }
  .akartyak{ grid-template-columns:1fr 1fr; }
  .akartyak > li,.akartyak > li:nth-child(4){ grid-column:auto; }
  .akartyak > li:last-child:nth-child(odd){ grid-column:1 / -1; }
  .marka__alcim{ display:none; }
}

@media (max-width:1023px){
  /* mobilmenü */
  .menu-gomb{ display:block; }
  .fonav{
    position:fixed; left:0; right:0; top:var(--fejlec-m); bottom:0; background:var(--felulet);
    flex-direction:column; align-items:stretch; gap:var(--sp-5); padding:var(--sp-5) clamp(16px,4vw,40px);
    overflow-y:auto; transform:translateX(100%); visibility:hidden; transition:transform var(--mozgas), visibility var(--mozgas);
  }
  .fejlec.is-kompakt .fonav{ top:62px; }
  .fonav.is-nyitva{ transform:none; visibility:visible; }
  .fonav ul{ flex-direction:column; gap:0; }
  .fonav ul a{ display:block; padding:var(--sp-4) 0; font-size:var(--fs-lg); border-bottom:1px solid var(--vonal); }
  .menu-nyitva body{ overflow:hidden; }
  .marka__alcim{ display:block; }

  .hero__racs,.ket-oszlop,.zaro,.gyik,.alo-racs{ grid-template-columns:1fr; }
  .pa-racs{ grid-template-columns:1fr; gap:var(--sp-2); justify-items:center; }
  .pa-oszlop{ width:100%; max-width:520px; }
  .pa-nyilak{ flex-direction:row; gap:22px; height:64px; width:auto; }
  .pa-nyilak span{ width:8px; height:44px; margin:0 0 12px; background-position:50% 0; background-size:8px 14px; background-repeat:repeat-y; animation-name:pottyok-le; }
  .pa-nyilak span::after{ right:auto; left:50%; top:auto; bottom:-14px; transform:translateX(-50%); border:8px solid transparent; border-top:12px solid var(--szag); border-bottom:0; }
  .pa-nyilak--ki span::after{ border-top-color:var(--jel); }
  .hero__kep{ max-width:640px; }
  .zaro__szoveg,.alo-oldalsav{ position:static; }
  .termekek{ grid-template-columns:1fr; }
  .lepesek{ grid-template-columns:1fr 1fr; row-gap:var(--sp-6); }
  .lepesek::before{ display:none; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .cc__doboz{ grid-template-columns:1fr; }
  .cc__reszletek{ grid-template-columns:1fr 1fr; }
}

@media (max-width:767px){
  :root{ --fejlec-m:64px; --fs-base:1.0625rem; }
  .marka img{ width:77px; }
  .marka__alcim{ font-size:.8125rem; }
  .fejlec.is-kompakt .fejlec__sor{ min-height:64px; }
  .fejlec.is-kompakt .fonav{ top:64px; }

  .kerdesek,.akartyak,.lead__racs,.termek__abrak{ grid-template-columns:1fr; }
  .kerdesek li{ font-size:var(--fs-base); }
  .hero--foto{ min-height:0; }
  .hero__hatter img{ object-position:50% 46%; }
  .hero--foto::after{ background:rgba(3,6,11,.62); }
  .lepesek{ grid-template-columns:1fr; row-gap:var(--sp-5); }
  .lepesek li{ padding:0 0 0 60px; min-height:42px; }
  .figyelem{ grid-template-columns:1fr; gap:var(--sp-4); }
  .lead__valasztok{ flex-direction:column; align-items:stretch; }
  .feltolto__gomb,.feltolto__gomb label{ width:100%; justify-content:center; }
  .gombsor .btn{ width:100%; }

  .foot-grid{ grid-template-columns:1fr; }
  .foot-zaro .foot-jogi{ margin-left:0; }
  .foot-jogi a,.foot-oldalak a,.site-foot .foot-alap a,.site-foot p a{ display:inline-flex; align-items:center; min-height:44px; padding:2px 0; }
  .foot-kozossegi a{ width:44px; height:44px; }

  .cc{ padding:0; }
  .cc__doboz{ border-radius:var(--r-nagy) var(--r-nagy) 0 0; border-bottom:0; max-height:86vh; overflow-y:auto; }
  .cc__reszletek{ grid-template-columns:1fr; gap:var(--sp-4); }
  .cc__gombok{ flex-direction:column; }
  .cc__gomb{ width:100%; }
}


/* =========================================================
   DÍSZÍTŐ ANIMÁCIÓK (v9) — csak díszítés, a tartalomhoz nem tartoznak
   - mind aria-hidden, nem kattinthatók, a szöveg alatt vannak;
   - csak akkor mozognak, amikor a képernyőn vannak (main.js: .anim);
   - minden kör eleje és vége azonos (vagy átlátszó), így az
     újraindulás nem látszik;
   - mobilon (a hero kivételével) és csökkentett mozgásnál nem jelennek meg.
   Ha valamelyik nem kell: a HTML-ben a hozzá tartozó „deko” blokkot töröld.
   ========================================================= */
.hero__deko,.deko,.deko--kerdojel{ pointer-events:none; }
.hero__deko *,.deko *,.deko--kerdojel *{ animation-play-state:paused; }
.hero__deko.is-lathato *,.deko.is-lathato *,.deko--kerdojel.is-lathato *{ animation-play-state:running; }
.deko-szakasz{ position:relative; overflow:hidden; }
.deko-szakasz > .keret{ position:relative; z-index:1; }
.deko{ position:absolute; z-index:0; }

/* hero: a gömb felé szálló szagrészecskék, a gömb lüktető fénye */
.hero__deko{ position:absolute; inset:0; z-index:1; }
.hd-kozep{ position:absolute; left:72%; top:46%; width:0; height:0; }
.hd-feny{ position:absolute; left:-170px; top:-170px; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(122,212,242,.32) 0%, rgba(122,212,242,.10) 40%, rgba(122,212,242,0) 65%);
  animation:hd-luktet 4.2s ease-in-out infinite; }
@keyframes hd-luktet{ 0%,100%{ opacity:.55; transform:scale(.94); } 50%{ opacity:1; transform:scale(1.06); } }
.hd-kozep i{ position:absolute; left:0; top:0; width:var(--m); height:var(--m); margin:calc(var(--m) / -2) 0 0 calc(var(--m) / -2);
  border-radius:50%; background:#B3A45E; box-shadow:0 0 6px rgba(179,164,94,.7); opacity:0;
  animation:hd-szall var(--t) cubic-bezier(.45,0,.7,1) var(--k) infinite; }
@keyframes hd-szall{
  0%{ transform:translate(var(--dx),var(--dy)) scale(1); opacity:0; background:#B3A45E; }
  15%{ opacity:.85; }
  68%{ opacity:.85; background:#B3A45E; box-shadow:0 0 6px rgba(179,164,94,.7); }
  86%{ opacity:.9; background:#7AD4F2; box-shadow:0 0 10px #7AD4F2; }
  100%{ transform:translate(calc(var(--dx) * .18),calc(var(--dy) * .18)) scale(.35); opacity:0; background:#7AD4F2; box-shadow:0 0 10px #7AD4F2; }
}
.hero__belso{ z-index:2; }

/* „Ismerős a probléma?": két oldalt, a teljes szekció magasságában felszálló
   szagfoszlányok. A .dsz-emel a szekció magasságával azonos réteg, amely a
   szekció alja alól (translateY 100%) a teteje fölé (−150 px) halad; a
   szekció széle levágja, így a foszlány az alatta lévő szekció mögül bukkan
   elő, és a hero alá bújik. Kör elején és végén a képen kívül van, ezért az
   újraindulás nem látszik. */
.deko--szag{ inset:0; }
/* a sáv a tartalom melletti szabad margóban fut */
.dsz-oldal{ position:absolute; top:0; bottom:0; width:clamp(60px, calc((100vw - var(--keret)) / 2 + 20px), 220px); }
.dsz-oldal--bal{ left:0; }
.dsz-oldal--jobb{ right:0; }
.dsz-emel{ position:absolute; left:var(--x); top:0; width:30px; height:100%; transform:translateY(100%); animation:dsz-emel var(--t) linear var(--k) infinite; }
@keyframes dsz-emel{ from{ transform:translateY(100%); } to{ transform:translateY(-150px); } }
.dsz-foszlany{ display:block; width:22px; overflow:visible; animation:dsz-ring var(--sw) ease-in-out infinite alternate; }
.dsz-foszlany path{ fill:none; stroke:var(--szag); stroke-width:2.2; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:.38; }
.dsz-pont{ display:block; width:7px; height:7px; border-radius:50%; background:var(--szag); opacity:.45; animation:dsz-ring var(--sw) ease-in-out infinite alternate; }
@keyframes dsz-ring{ from{ transform:translateX(-8px); } to{ transform:translateX(8px); } }

/* technológia: dolgozó plazmagömb a szöveg mellett */
#technologia > .keret{ position:relative; }
.deko--plazma{ right:clamp(0px,3vw,40px); top:-8px; width:240px; height:240px; }
.deko--plazma svg{ width:100%; height:100%; }
.dp-uveg{ fill:rgba(24,48,144,.04); stroke:rgba(24,48,144,.22); stroke-width:1.5; }
.dp-mag{ transform-box:fill-box; transform-origin:center; animation:hd-luktet 3.2s ease-in-out infinite; }
.dp-szalak{ transform-origin:120px 120px; animation:dp-forog 48s linear infinite; }
.dp-szalak path{ fill:none; stroke:#23A9DC; stroke-width:1.8; stroke-linecap:round; opacity:.25; animation:villan 1.8s ease-in-out infinite; }
.dp-szalak path:nth-child(2){ animation-delay:-.6s; } .dp-szalak path:nth-child(3){ animation-delay:-1.1s; }
.dp-szalak path:nth-child(4){ animation-delay:-.3s; } .dp-szalak path:nth-child(5){ animation-delay:-1.4s; } .dp-szalak path:nth-child(6){ animation-delay:-.9s; }
@keyframes dp-forog{ to{ transform:rotate(360deg); } }

/* „Hogyan dolgozunk?": fényimpulzus fut végig a lépések vonalán */
.lepesek::after{ content:""; position:absolute; left:20px; right:20px; top:18px; height:6px; border-radius:3px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0)) no-repeat;
  background-size:110px 100%; background-position-x:-30%; animation:impulzus 4.8s linear infinite paused; }
.lepesek.is-lathato::after{ animation-play-state:running; }
.lepesek li::before{ z-index:1; }
@keyframes impulzus{ from{ background-position-x:-30%; } to{ background-position-x:130%; } }

/* sötét blokk: halk légáramvonalak a jobb oldalon */
.deko--aram{ inset:0; }
.deko--aram svg{ width:100%; height:100%; }
.deko--aram path{ fill:none; stroke:#23A9DC; stroke-width:1.6; stroke-linecap:round; stroke-dasharray:10 30; opacity:.24; vector-effect:non-scaling-stroke; animation:aram-deko 5s linear infinite; }
.deko--aram path:nth-child(2){ animation-duration:6.5s; } .deko--aram path:nth-child(3){ animation-duration:4.4s; } .deko--aram path:nth-child(4){ animation-duration:7s; }
@keyframes aram-deko{ to{ stroke-dashoffset:-80; } }

/* GYIK: megjelenő és eltűnő kérdőjelek */
.deko--kerdojel{ position:relative; height:230px; margin-top:var(--sp-5); }
.deko--kerdojel i{ position:absolute; left:var(--x); top:var(--y); font-style:normal; opacity:0; animation:kerdo 8s ease-in-out var(--k) infinite; }
.deko--kerdojel i::before{ content:"?"; font-family:var(--font-sans); font-weight:600; font-size:var(--s); line-height:1; color:var(--nuxon-primary); }
.deko--kerdojel i:nth-child(even)::before{ color:var(--nuxon-accent); }
@keyframes kerdo{ 0%{ opacity:0; transform:translateY(10px) scale(.8); } 15%,35%{ opacity:.38; transform:translateY(0) scale(1); } 50%,100%{ opacity:0; transform:translateY(-8px) scale(1.05); } }

@media (max-width:1100px){ .deko--plazma{ display:none; } }
@media (max-width:1023px){ .lepesek::after{ display:none; } .deko--kerdojel{ display:none; } }
@media (max-width:767px){ .deko{ display:none; } .hd-kozep{ left:50%; } }
@media (prefers-reduced-motion:reduce){ .hero__deko,.deko,.deko--kerdojel,.lepesek::after{ display:none !important; } }

/* =========================================================
   CSÖKKENTETT MOZGÁS — minden információ statikusan is teljes
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}