/* =========================================================
   konyhaszag.hu — stíluslap (v03: egyoldalas főoldal, V4 specifikáció)
   A NUXON közös komponensrendszerére épül (iparilegszures.hu v26),
   a konyhaszag.hu design brief szerint világos, elegáns kivitelben.

   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. Oldalfej (hero), morzsamenü
     6. Tartalmi blokkok
     7. Űrlapok
     8. GYIK, jogi oldalak, 404
     9. Oldaltérkép-sáv és NUXON közös lábléc
    10. Süti-banner, mobil alsó gomb
    11. Reszponzív, 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. (Design brief: a konkrét színek a jóváhagyott NUXON webes
   tokenekből jönnek — ezek ugyanazok, mint a többi NUXON-oldalon.)
   ========================================================= */

/* =========================================================
   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-acel:   #EEF2F4;   /* világos rozsdamentes árnyalat a kártyákhoz */

  --szoveg:         #15232A;
  --szoveg-halk:    #54666E;
  --szoveg-inverz:  #F3F6F7;
  --szoveg-inverz-halk: #AEBBD6;
  --vonal:          #D5DEE1;
  --vonal-eros:     #B7C4C9;

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

  --siker:          #1B7A4B;
  --figyel:         #8A5A0E;
  --figyel-hatter:  #FFF4DD;
  --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;          /* törzsszöveg 18 px asztalon */
  --fs-lg:   1.2rem;
  --fs-xl:   clamp(1.3rem, 1.9vw, 1.55rem);
  --fs-2xl:  clamp(1.65rem, 3vw, 2.35rem);
  --fs-hero: clamp(2.1rem, 4.2vw, 3.4rem);
  --fs-szam: clamp(2.2rem, 5vw, 3.6rem);

  --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,.08), 0 1px 3px rgba(21,35,42,.05);

  --keret:   1240px;   /* V4 02: 1180–1240 px tartalomszélesség */
  --olvaso:  66ch;
  --fejlec-m: 76px;

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

/* Betűk saját kiszolgálásból (IBM Plex, a NUXON arculati betűi).
   font-display:optional: ha a betű nem érkezik meg azonnal, az oldal nem ugrál. */
@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:var(--nuxon-deep);
}
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; }
ul,ol{ margin:0 0 var(--sp-4); }

.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; }
.ikon{ fill:none; stroke:var(--nuxon-primary); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }

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

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

.gombsor{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-5); margin:var(--sp-6) 0 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:var(--nuxon-primary); 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:.5; cursor:not-allowed; }

/* kiemelt mondat */
.kiemeles{
  font-family:var(--font-sans); font-weight:500; font-size:var(--fs-xl); line-height:1.4; color:var(--nuxon-deep);
  max-width:46ch; margin:clamp(36px,5vw,56px) 0 0; padding-left:var(--sp-5);
  border-left:4px solid var(--jel);
}
.szakasz--sotet .kiemeles{ color:#fff; }

/* 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:30px; }
.pipalista li::before{ content:""; position:absolute; left:3px; 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); }
.pipalista--sotet li::before{ border-color:var(--jel); }

/* címkék (chipek) */
.cimkek{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.cimkek li{ font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:500; padding:6px 14px; border:1px solid var(--vonal-eros); border-radius:100px; background:var(--felulet); }

/* számozott folyamat (függőleges) */

/* ---------- képhelyőrzők ----------
   A helyükre a végleges fotó kerül (lásd KEPEK.md). Élesben helyőrző
   nem maradhat. A helyőrzőn szerepel: mi kell, honnan szerezhető be,
   milyen jog kell hozzá, mekkora legyen és mi legyen a fájlneve. */
.kep{ margin:0; position:relative; }
.kep img{ width:100%; object-fit:cover; border-radius:var(--r-nagy); }
.kep--32 .kep__helyorzo,.kep--32 img{ aspect-ratio:3/2; }
.kep--43 .kep__helyorzo,.kep--43 img{ aspect-ratio:4/3; }
.kep--169 .kep__helyorzo,.kep--169 img{ aspect-ratio:16/9; }
.kep--11 .kep__helyorzo,.kep--11 img{ aspect-ratio:1/1; }
.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-nagy);
  background:repeating-linear-gradient(135deg, #F1F4F6 0 14px, #EAEFF2 14px 28px);
  font-family:var(--font-sans); font-size:.875rem; line-height:1.45; color:var(--szoveg); overflow-wrap:anywhere;
}
.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:.9375rem; color:var(--nuxon-deep); }
.kep__sor{ display:block; }
.kep__sor b{ font-weight:600; }
.kep__meret{ font-size:.8125rem; color:var(--szoveg-halk); }
.kep figcaption{ font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:500; color:var(--szoveg-halk); margin-top:var(--sp-2); }

/* ---------- fejlesztői jelölés ----------
   Csak a teszt-időszakra: forrásra vagy jóváhagyásra váró tartalom.
   Élesítés előtt mindet meg kell szüntetni (ATADAS.md 7. pont). */
.fejl{
  display:inline-flex; align-items:baseline; gap:6px; margin:var(--sp-2) 0 0;
  font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:500; line-height:1.45;
  color:var(--figyel); background:var(--figyel-hatter); border:1px solid #EBCB8B; border-radius:var(--r-kicsi); padding:4px 10px;
}
.fejl::before{ content:"FEJLESZTÉS:"; font-weight:600; letter-spacing:.03em; }
.szakasz--sotet .fejl{ color:#5C3D06; }

/* =========================================================
   4. FEJLÉC ÉS MENÜ
   ========================================================= */
.fejlec{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--vonal); transition:box-shadow var(--mozgas);
}
.fejlec.is-kompakt{ 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); }
.marka{ flex:none; display:block; line-height:0; }
.marka img{ width:90px; }

.fonav{ margin-left:auto; display:flex; align-items:center; gap:var(--sp-5); }
.fonav__lista{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:clamp(10px,1.4vw,22px); }
.fonav__lista > li{ position:relative; }
.fonav__link,.fonav__nyito{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0;
  font-family:var(--font-sans); font-size:.95rem; font-weight:500; color:var(--szoveg);
  text-decoration:none; background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
}
.fonav__link:hover,.fonav__nyito:hover{ border-bottom-color:var(--jel); }
.fonav__link[aria-current="page"],.fonav__nyito.is-aktiv{ color:var(--nuxon-primary); border-bottom-color:var(--nuxon-primary); }
.fonav__nyito::after{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform var(--mozgas); }
.fonav__nyito[aria-expanded="true"]::after{ transform:translateY(2px) rotate(225deg); }
.fonav__al a[aria-current="page"]{ color:var(--nuxon-primary); background:var(--jel-halvany); }
.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. OLDALFEJ (HERO), MORZSAMENÜ
   ========================================================= */
/* Világos alap; a finom vízszintes vonalazás rozsdamentes panelre utal. */
.hero{
  position:relative; padding:clamp(40px,6vw,88px) 0 clamp(44px,6vw,80px);
  background:
    repeating-linear-gradient(180deg, rgba(24,48,144,.028) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #F6F9FA 0%, #FFFFFF 100%);
  border-bottom:1px solid var(--vonal);
}
.hero__racs{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,5vw,72px); align-items:center; }
.hero h1{ max-width:19ch; }
.hero__alcim{ font-family:var(--font-sans); font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.5; color:var(--szoveg); max-width:52ch; }
.hero__szoveg p{ max-width:60ch; }
.hero__kep .kep__helyorzo{ min-height:100%; }

/* =========================================================
   6. TARTALMI BLOKKOK
   ========================================================= */

/* ---------- problémaválasztó kártyák ---------- */

/* ---------- folyamatsáv (KONYHA → … → KIFÚVÁS) ----------
   A konyhaszag.hu visszatérő ábrája. A szaggatott keretű elem
   „ha szükséges” fokozat. */
.aram{ margin:0; }
.aram__lista{ list-style:none; margin:0; padding:0; display:flex; align-items:stretch; gap:0; }
.aram__elem{ flex:1 1 0; display:flex; align-items:stretch; min-width:0; }
.aram__doboz{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
  padding:var(--sp-4) var(--sp-3); background:var(--felulet); border:2px solid var(--nuxon-primary); border-radius:var(--r-nagy);
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-sm); line-height:1.3; color:var(--nuxon-deep);
}
.aram__doboz .ikon{ width:34px; height:34px; }
.aram__doboz > span{ display:flex; flex-direction:column; align-items:center; }
.aram__elem--opc .aram__doboz{ border-style:dashed; border-color:var(--vonal-eros); color:var(--szoveg); }
.aram__elem--opc .aram__doboz .ikon{ stroke:var(--szoveg-halk); }
.aram__opc{ font-weight:500; font-size:var(--fs-xs); color:var(--szoveg-halk); }
.aram__nyil{ flex:none; width:clamp(18px,2.4vw,34px); align-self:center; height:2px; position:relative;
  background:repeating-linear-gradient(90deg, var(--jel) 0 6px, transparent 6px 11px); background-size:22px 2px; }
.aram__nyil::after{ content:""; position:absolute; right:-1px; top:-4px; border:5px solid transparent; border-left:7px solid var(--jel); border-right:0; }
.aram.is-lathato .aram__nyil{ animation:aramlik-x 1.1s linear infinite; }
@keyframes aramlik-x{ to{ background-position:22px 0; } }
@keyframes aramlik{ to{ stroke-dashoffset:-40; } }

/* ---------- bizonyíték: használt ESP-cella ---------- */
.cella{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; }

/* ---------- videó (kattintásra betöltődő YouTube-lejátszó) ---------- */
.video{ margin:clamp(44px,5vw,72px) auto 0; max-width:880px; }
.video__keret{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-nagy); background:var(--nuxon-deep);
  box-shadow:0 14px 40px rgba(16,28,74,.16); }
.video__keret img{ width:100%; height:100%; object-fit:cover; transition:transform var(--mozgas), opacity var(--mozgas); }
.video__keret::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,28,74,0) 40%, rgba(16,28,74,.45) 100%); }
.video__gomb{ position:absolute; z-index:1; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%;
  background:var(--nuxon-primary); box-shadow:0 0 0 8px rgba(255,255,255,.22); transition:transform var(--mozgas), background var(--mozgas); }
.video__gomb::before{ content:""; position:absolute; left:30px; top:24px; border-style:solid; border-width:14px 0 14px 22px; border-color:transparent transparent transparent #fff; }
.video__keret:hover .video__gomb{ transform:scale(1.08); background:var(--nuxon-accent); }
.video__keret:hover img{ transform:scale(1.02); }
.video__keret:focus-visible{ outline:3px solid var(--jel); outline-offset:3px; }
.video__keret iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video.fut .video__keret::after,.video.fut .video__gomb{ display:none; }
.video figcaption{ font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--szoveg-halk); margin-top:var(--sp-3); text-align:center; }
@media (max-width:767px){ .video__gomb{ width:64px; height:64px; margin:-32px 0 0 -32px; } .video__gomb::before{ left:25px; top:20px; border-width:12px 0 12px 19px; } }

/* ---------- referenciakártyák ---------- */
/* flex + középre: a nem teli utolsó sor is középre kerül */
.referenciak{ --oszlop:4; --koz:var(--sp-5); display:flex; flex-wrap:wrap; justify-content:center; gap:var(--koz); }
.referenciak > .ref{ flex:0 0 calc((100% - (var(--oszlop) - 1) * var(--koz)) / var(--oszlop)); min-width:0; }
.ref{ display:flex; flex-direction:column; border:1px solid var(--vonal); border-radius:var(--r-nagy); overflow:hidden; background:var(--felulet); }
.ref .kep img,.ref .kep__helyorzo{ border-radius:0; }
.ref .kep__helyorzo{ border-width:0 0 2px; }
.ref__torzs{ flex:1; display:flex; flex-direction:column; padding:var(--sp-5); }
.ref h3{ font-size:var(--fs-lg); margin-bottom:var(--sp-1); }
.ref__cimke{ font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:600; letter-spacing:.02em; color:var(--nuxon-primary); margin-bottom:var(--sp-3); }

/* ---------- elszívás ≠ levegőkezelés ---------- */

/* ---------- lépések (Hogyan dolgozunk?) ---------- */

/* ---------- technológiák ---------- */

/* ---------- két út: meglévő / új ---------- */
.utak{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.ut{ display:flex; flex-direction:column; padding:clamp(22px,3vw,40px); background:var(--felulet); border:1px solid var(--vonal); border-radius:var(--r-nagy); }
.ut h3{ font-size:var(--fs-xl); }
.ut .gombsor{ margin-top:auto; padding-top:var(--sp-5); }

/* ---------- mérési modul ---------- */
.meres{ padding:var(--sp-5); background:var(--felulet); border:1px solid var(--vonal); border-radius:var(--r-nagy); font-family:var(--font-sans); }
.szakasz--sotet .meres{ background:rgba(255,255,255,.05); border-color:rgba(174,187,214,.3); }

/* ---------- termékkártyák ---------- */
.termekek{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5); }
.termek{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--sp-5); align-items:center; padding:var(--sp-5); background:var(--felulet); border:1px solid var(--vonal); border-radius:var(--r-nagy); }
.termek h3{ font-size:var(--fs-xl); margin-bottom:var(--sp-2); }
.termek__kod{ font-family:var(--font-sans); font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; color:var(--nuxon-primary); margin:0 0 var(--sp-1); }
.termek p{ font-size:var(--fs-sm); line-height:1.6; }
.termek .kep img{ object-fit:contain; background:linear-gradient(180deg,#F6F9FA,#E9EEF1); padding:8%; }

/* ---------- CTA-sáv (oldalak alján) ---------- */
.cta-sav{ background:var(--nuxon-deep); color:var(--szoveg-inverz); padding:clamp(48px,6vw,80px) 0; position:relative; overflow:hidden; }
.cta-sav::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px); pointer-events:none; }
.cta-sav .keret{ position:relative; display:grid; grid-template-columns:minmax(0,1.4fr) auto; gap:var(--sp-6); align-items:center; }
.cta-sav h2{ color:#fff; margin-bottom:var(--sp-3); }
.cta-sav p{ color:var(--szoveg-inverz-halk); max-width:62ch; margin:0 0 var(--sp-3); }
.cta-sav p:last-child{ margin-bottom:0; }
.cta-sav .gombsor{ margin:0; flex-direction:column; align-items:stretch; }

/* ---------- partnerblokk ---------- */

/* ---------- NUXON háttér ---------- */

/* ---------- kapcsolati kártyák ---------- */
.kapcsolat{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5); }
.kapcsolat article{ padding:var(--sp-5); background:var(--felulet); border:1px solid var(--vonal); border-radius:var(--r-nagy); font-family:var(--font-sans); font-size:var(--fs-sm); }
.kapcsolat h2{ font-size:var(--fs-lg); }
.kapcsolat p{ margin:0 0 var(--sp-2); }
.kapcsolat .szam{ white-space:nowrap; font-weight:600; }

/* ---------- köszönjük ---------- */
.koszonjuk{ max-width:760px; }

/* ---------- ESP működési ábra ---------- */
.esp-abra{ margin:0; }
.esp-abra svg{ display:block; width:100%; height:auto; }
.m-keret{ stroke:var(--nuxon-antracit); stroke-width:3; fill:none; }
.m-reszecske circle{ fill:#8A7A55; }
.m-reszecske--kotott circle{ fill:#B39A5E; }
.m-szal path{ stroke:var(--nuxon-primary); stroke-width:2; stroke-dasharray:3 7; fill:none; }
.m-toltes text{ font-family:var(--font-sans); font-size:28px; font-weight:600; fill:var(--jel); text-anchor:middle; }
.m-lemez path{ stroke:var(--nuxon-primary); stroke-width:5; stroke-linecap:round; }
.m-aram path{ stroke:var(--jel); stroke-width:2.5; stroke-dasharray:8 12; fill:none; opacity:.55; }
.m-aram--tiszta path{ opacity:.9; }
.m-szam circle{ fill:var(--nuxon-primary); }
.m-szam text{ font-family:var(--font-sans); font-size:17px; font-weight:600; fill:#fff; }
.esp-abra.is-lathato .m-aram path{ animation:aramlik 2.4s linear infinite; }
.m-por{ fill:#8A7A55; }
.m-halo{ fill:none; stroke:var(--jel); stroke-width:1.6; }
.m-minusz{ stroke:#fff; stroke-width:1.8; stroke-linecap:round; }
.esp-abra.anim-fut .m-statikus{ display:none; }

/* ---------- esettanulmány adatlap ---------- */
.adatlap{ margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--sp-6); border-top:1px solid var(--vonal); }
.adatlap div{ display:grid; grid-template-columns:minmax(150px,.7fr) 1fr; gap:var(--sp-4); padding:var(--sp-3) 0; border-bottom:1px solid var(--vonal); }
.adatlap dt{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-sm); color:var(--szoveg-halk); }

/* =========================================================
   7. ŰRLAPOK
   ========================================================= */
.urlap-racs{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr); gap:clamp(28px,4vw,64px); align-items:start; }
.urlap-racs__szoveg{ position:sticky; top:calc(var(--fejlec-m) + 24px); }
.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(22px,3.5vw,44px); font-family:var(--font-sans);
}
.lead-doboz:focus{ outline:none; }
.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; max-width:62ch; margin:0 0 var(--sp-3); }
.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-lg); color:var(--nuxon-deep); padding:0; margin-bottom:var(--sp-3); }
.lead__csoport .lead__csoport{ margin-bottom:var(--sp-4); }
.lead__csoport .lead__csoport legend{ font-size:var(--fs-sm); color:var(--szoveg); margin-bottom:var(--sp-2); }
.lead__racs{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4) var(--sp-5); }
.lead__lepes{ display:inline-grid; place-items:center; width:28px; height:28px; margin-right:8px; border-radius:50%; background:var(--nuxon-primary); color:#fff; font-size:.875rem; vertical-align:2px; }
.lead__nyithato{ border:1px solid var(--vonal); border-radius:var(--r-nagy); padding:0 var(--sp-5); margin:0 0 var(--sp-6); }
.lead__nyithato > summary{ list-style:none; cursor:pointer; padding:var(--sp-4) 0; font-weight:600; font-size:var(--fs-lg); color:var(--nuxon-deep); position:relative; padding-right:32px; }
.lead__nyithato > summary::-webkit-details-marker{ display:none; }
.lead__nyithato > summary::after{ content:""; position:absolute; right:6px; top:50%; width:10px; height:10px; margin-top:-7px; border-right:2px solid var(--nuxon-primary); border-bottom:2px solid var(--nuxon-primary); transform:rotate(45deg); transition:transform var(--mozgas); }
.lead__nyithato[open] > summary::after{ transform:rotate(225deg); margin-top:-2px; }
.lead__nyithato-leiras{ display:block; font-weight:400; font-size:var(--fs-sm); color:var(--szoveg-halk); }
.lead__nyithato[open]{ padding-bottom:var(--sp-4); }

.lmezo{ margin:0 0 var(--sp-2); display:grid; gap:6px; }
.lmezo label{ font-weight:600; font-size:var(--fs-sm); }
.lmezo input[type="text"],.lmezo input[type="email"],.lmezo input[type="tel"],.lmezo input[type="url"],.lmezo textarea{
  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 textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.lmezo input:focus,.lmezo textarea: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{ border-color:var(--hiba); }
.lmezo input::placeholder,.lmezo textarea::placeholder{ color:#6E7E86; }
.lmezo__hiba{ font-size:var(--fs-sm); font-weight:500; color:var(--hiba); }
.lmezo__hiba:empty{ display:none; }
.lmezo--jelolo{ margin:var(--sp-5) 0; }
.lmezo__egyseges{ display:flex; align-items:stretch; flex-wrap:wrap; gap:var(--sp-3); }

.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; }
.valaszto--jogi:has(input:checked){ background:none; }
.valaszto--jogi input{ margin-top:3px; }
.lmezo.is-hibas .valaszto--jogi{ color:var(--hiba); }
.lead__csoport.is-hibas .valaszto{ border-color:rgba(163,35,31,.45); }

/* feltöltés */
.feltolto{ display:flex; flex-wrap:wrap; gap: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__gomb--kamera{ display:none; }
@media (hover:none) and (pointer:coarse){ .feltolto__gomb--kamera{ display:block; } }
.feltolto__lista{ list-style:none; margin:var(--sp-3) 0 0; padding:0; display:grid; gap:var(--sp-2); }
.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__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); }

/* =========================================================
   8. GYIK, JOGI OLDALAK, 404
   ========================================================= */
.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; color:var(--nuxon-deep);
}
.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); }

.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-tabla{ overflow-x:auto; margin:0 0 var(--sp-5); }
.jogi-tabla table{ border-collapse:collapse; width:100%; min-width:640px; 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; }
.jogi-tabla th,.jogi-tabla td{ overflow-wrap:normal; word-break:normal; }
.jogi-tabla td:first-child{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85em; }

.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:var(--nuxon-primary); opacity:.25;
}

/* =========================================================
   9. OLDALTÉRKÉP-SÁV ÉS NUXON KÖZÖS LÁBLÉC
   ========================================================= */

.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:22ch; }
.foot-brandszoveg p + p{ font-size:var(--fs-sm); color:#9FB2BA; 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:#94A7B0; }
.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:#94A7B0; }
.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; }

/* =========================================================
   10. SÜTI-BANNER, MOBIL ALSÓ GOMB
   ========================================================= */
.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; }

/* Mobilon alul rögzített „Projektet küldök” gomb. Nem jelenik meg, amíg a
   süti-banner nyitva van, a projektoldalon, és amikor egy űrlap látszik. */
.also-cta{ display:none; }

/* =========================================================
   10b. V4 — EGYOLDALAS FŐOLDAL ELEMEI
   ========================================================= */

/* ---------- jóváhagyás (V4 02 · 07): data-approved="true|false" ----------
   Élesben (konyhaszag.hu) csak a jóváhagyott referencia és termék látszik,
   és a fejlesztői jelölések sem. Az előnézeten (konyhaszag.com, saját gép)
   minden látszik, a jóvá nem hagyott elem szaggatott kerettel. */
html:not(.elonezet) [data-approved="false"],
html:not(.elonezet) .fejl{ display:none !important; }
html:not(.elonezet) .jovahagyott-blokk:not(:has([data-approved="true"])){ display:none; }
html:not(.elonezet):not(:has(#referenciak [data-approved="true"])) .fonav a[href$="#referenciak"]{ display:none; }
.elonezet [data-approved="false"]{ position:relative; outline:2px dashed #D9A441; outline-offset:4px; }
.elonezet [data-approved="false"]::before{
  content:"NINCS JÓVÁHAGYVA – élesben nem jelenik meg"; position:absolute; z-index:3; top:10px; right:10px;
  font-family:var(--font-sans); font-size:.75rem; font-weight:600; letter-spacing:.02em;
  color:#5C3D06; background:var(--figyel-hatter); border:1px solid #EBCB8B; border-radius:var(--r-kicsi); padding:3px 8px;
}

/* ---------- hero: teljes szélességű háttérfotó ----------
   A fotón balról sötétkék (NUXON) fátyol fut, hogy a fehér szöveg
   kontrasztja a kép bármely részén legalább 4,5:1 maradjon. */
.hero--foto{ position:relative; overflow:hidden; background:var(--nuxon-deep); border-bottom:0;
  padding:clamp(64px,9vw,128px) 0 clamp(64px,8vw,112px); min-height:clamp(520px,44vw,680px); 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:58% 70%; }
.hero--foto::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(16,28,74,.92) 0%, rgba(16,28,74,.80) 40%, rgba(16,28,74,.35) 70%, rgba(16,28,74,.05) 100%); }
.hero__tartalom{ position:relative; z-index:2; width:100%; }
.hero--foto .hero__szoveg{ max-width:640px; }
.hero--foto h1{ color:#fff; max-width:18ch; }
.hero--foto .hero__alcim{ color:#fff; }
.hero--foto .hero__szoveg p{ color:#DCE3F0; }
.hero--foto .btn--elsodleges{ background:linear-gradient(100deg, var(--nuxon-primary) 0%, #1A62B4 60%, var(--nuxon-accent) 140%); }
.hero--foto .btn--elsodleges:hover{ background:var(--nuxon-primary-dark); }
.hero--foto .hero__link{ color:#fff; }
.hero--foto :focus-visible{ outline-color:#fff; }
@media (max-width:767px){
  .hero--foto{ min-height:0; padding:56px 0 64px; }
  .hero__hatter img{ object-position:50% 60%; }
  .hero--foto::before{ background:linear-gradient(180deg, rgba(16,28,74,.72) 0%, rgba(16,28,74,.84) 55%, rgba(16,28,74,.92) 100%); }
}
/* ---------- hero kép (régi, kétoszlopos változat) ---------- */
.hero__kep img{ border-radius:var(--r-nagy); box-shadow:var(--arnyek); }
.hero__link{ font-family:var(--font-sans); font-weight:600; font-size:1rem; display:inline-flex; align-items:center; min-height:44px; }

/* ---------- problémák: 3 oszlop ---------- */
.feladatok{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5); }
.feladatok li{ display:flex; flex-direction:column; gap:var(--sp-3); padding:clamp(22px,2.6vw,32px); background:var(--felulet);
  border:1px solid var(--vonal); border-top:3px solid var(--nuxon-primary); border-radius:var(--r-nagy); }
.feladatok .ikon{ width:42px; height:42px; }
.feladatok h3{ font-size:var(--fs-lg); margin:0; }
.feladatok p{ margin:0; font-size:var(--fs-sm); line-height:1.65; color:var(--szoveg-halk); }

/* ---------- referencia: projekt-adatsor ---------- */
.ref__sor{ margin:0 0 var(--sp-2); font-size:var(--fs-sm); line-height:1.6; }
.rejtett{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ref__sor b{ font-family:var(--font-sans); font-weight:600; }

/* ---------- megoldási rendszer: ábra + 3 fokozat ---------- */
.rendszer{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,56px); align-items:start; margin-top:var(--sp-6); }
/* szűrő előtt / után képpár */
.elotte-utana{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); }
.elotte-utana figcaption{ font-size:var(--fs-xs); line-height:1.5; }
.elotte-utana figcaption b{ display:block; font-size:var(--fs-sm); font-weight:600; color:var(--nuxon-deep); margin-bottom:2px; }
@media (max-width:767px){ .elotte-utana{ grid-template-columns:1fr; gap:var(--sp-5); } }
.fokozatok{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); }
.fokozatok li{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:var(--sp-4); padding:var(--sp-5); background:var(--felulet); border:1px solid var(--vonal); border-radius:var(--r-nagy); }
.fokozatok .ikon{ width:40px; height:40px; }
.fokozatok h3{ font-size:var(--fs-lg); margin:0 0 var(--sp-2); }
.fokozatok p{ margin:0; font-size:var(--fs-sm); line-height:1.65; color:var(--szoveg-halk); }

/* ---------- partner: kiemelt sötét blokk ---------- */
.partner-sav .keret{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,4vw,64px); align-items:start; }
.partner-sav h2{ max-width:20ch; }
.partner-sav .cimkek li{ background:transparent; color:#fff; border-color:rgba(174,187,214,.5); }
.tamogatas{ background:rgba(255,255,255,.05); border:1px solid rgba(174,187,214,.3); border-radius:var(--r-nagy); padding:clamp(22px,3vw,36px); }
.tamogatas h3{ font-size:var(--fs-lg); }
.tamogatas .pipalista li{ color:var(--szoveg-inverz); }

/* ---------- technológiák: termékkártya címke ---------- */
.termek__sor{ font-size:var(--fs-sm); margin:0 0 var(--sp-2); }
.termek__leiras{ margin:0 0 var(--sp-3); }
.termek__sor b{ font-family:var(--font-sans); font-weight:600; }

/* ---------- miért NUXON ---------- */
.miert{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.miert .kiemeles{ margin-top:0; }
.miert__lista{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4); }
.miert__lista li{ border-top:3px solid var(--nuxon-primary); padding-top:var(--sp-3); font-family:var(--font-sans); }
.miert__lista b{ display:block; font-weight:600; color:var(--nuxon-deep); }
.miert__lista span{ font-size:var(--fs-sm); color:var(--szoveg-halk); }

/* ---------- kapcsolat: elérhetőség a szöveg alatt ---------- */
.elerhetoseg{ margin-top:var(--sp-5); padding:var(--sp-4) var(--sp-5); background:var(--felulet); border:1px solid var(--vonal); border-radius:var(--r-nagy); font-family:var(--font-sans); font-size:var(--fs-sm); }
.elerhetoseg p{ margin:0 0 var(--sp-2); }
.elerhetoseg p:last-child{ margin:0; }
.elerhetoseg .szam{ font-weight:600; white-space:nowrap; }
.lead__tipus .valaszto{ flex:1 1 180px; }
.ut .ikon{ width:44px; height:44px; margin-bottom:var(--sp-3); }
.termekek--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.termekek--3 .termek{ grid-template-columns:1fr; align-content:start; align-items:start; }
.termekek--3 .termek .kep{ max-width:260px; }
.termekek--6{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.termekek--6 .termek{ grid-template-columns:1fr; align-content:start; align-items:start; }
.termek .kep--foto img{ padding:0; background:#fff; }

/* =========================================================
   11. RESZPONZÍV
   ========================================================= */
@media (max-width:1200px){
  .fonav__lista{ gap:12px; }
  .fonav__link,.fonav__nyito{ font-size:.9rem; }
  .referenciak{ --oszlop:3; }
  .termekek{ grid-template-columns:1fr; }
  .termekek--3{ grid-template-columns:1fr 1fr; }
  .termekek--6{ grid-template-columns:1fr 1fr; }
}

@media (max-width:1023px){
  .referenciak{ --oszlop:2; }
  .feladatok{ grid-template-columns:1fr 1fr; }
  .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-4) clamp(18px,4vw,40px) var(--sp-7);
    overflow-y:auto; transform:translateX(100%); visibility:hidden; transition:transform var(--mozgas), visibility var(--mozgas);
  }
  .fonav.is-nyitva{ transform:none; visibility:visible; }
  .fonav__lista{ flex-direction:column; align-items:stretch; gap:0; }
  .fonav__link,.fonav__nyito{ width:100%; justify-content:space-between; min-height:56px; font-size:var(--fs-lg); border-bottom:1px solid var(--vonal); }
  .fonav__link:hover,.fonav__nyito:hover{ border-bottom-color:var(--vonal); }
  .menu-nyitva body{ overflow:hidden; }

  .hero__racs,.cella,.urlap-racs,.gyik,.cta-sav .keret,.rendszer,.partner-sav .keret,.miert{ grid-template-columns:1fr; }
  .urlap-racs__szoveg{ position:static; }
  .kapcsolat{ grid-template-columns:1fr 1fr; }
  .cc__doboz{ grid-template-columns:1fr; }
  .cc__reszletek{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .aram__lista{ flex-direction:column; }
  .aram__elem{ flex-direction:column; align-items:stretch; }
  .aram__doboz{ flex-direction:row; justify-content:flex-start; text-align:left; gap:var(--sp-3); }
  .aram__doboz > span{ align-items:flex-start; }
  .aram__nyil{ width:2px; height:22px; align-self:center; background:repeating-linear-gradient(180deg, var(--jel) 0 6px, transparent 6px 11px); background-size:2px 22px; }
  .aram__nyil::after{ right:auto; left:-4px; top:auto; bottom:-2px; border:5px solid transparent; border-top:7px solid var(--jel); border-bottom:0; }
  .aram.is-lathato .aram__nyil{ animation:aramlik-y 1.1s linear infinite; }
}
@keyframes aramlik-y{ to{ background-position:0 22px; } }

@media (max-width:767px){
  :root{ --fejlec-m:64px; --fs-base:1.0625rem; }
  .marka img{ width:77px; }
  .gombsor .btn{ width:100%; }
  .utak,.kapcsolat,.feladatok{ grid-template-columns:1fr; }
  .referenciak{ --oszlop:1; }
  .termek{ grid-template-columns:1fr; }
  .termekek--3{ grid-template-columns:1fr; }
  .termekek--6{ grid-template-columns:1fr; }
  .adatlap{ grid-template-columns:1fr; }
  .adatlap div{ grid-template-columns:1fr; gap:2px; }
  .lead__racs{ grid-template-columns:1fr; gap:0; }
  .lead__valasztok{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .valaszto{ padding:8px 10px; min-width:0; }
  .valaszto span{ min-width:0; overflow-wrap:anywhere; hyphens:auto; }
  .feltolto__gomb,.feltolto__gomb label{ width:100%; justify-content:center; }

  .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%; }

  .also-cta{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:40;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97);
    border-top:1px solid var(--vonal); box-shadow:0 -4px 14px rgba(21,35,42,.08);
    transition:transform var(--mozgas);
  }
  .also-cta .btn{ width:100%; min-height:48px; }
  .also-cta.is-rejtett,html[data-cc-nyitva] .also-cta,.menu-nyitva .also-cta{ transform:translateY(110%); }
  body.van-also-cta{ padding-bottom:72px; }
}

/* ---------- díszítő háttéranimációk (deko.py) ----------
   Ventilátor, szag, köd, kérdőjelek, por: a szakaszok üres részein, a tartalom mögött.
   Halványak, nem kattinthatók; 1023 px alatt csak a nyitóképernyő pora marad. */
.szakasz--deko{ position:relative; overflow:hidden; }
.szakasz--deko > .keret{ position:relative; z-index:1; }
.deko{ position:absolute; z-index:0; pointer-events:none; color:var(--nuxon-primary); }
.deko svg{ display:block; width:100%; height:auto; overflow:visible; }
.deko__vonal{ fill:none; stroke:currentColor; stroke-width:2; opacity:.22; }
.deko__vonal--halk{ opacity:.1; }
.deko__tele{ fill:currentColor; opacity:.16; }
.deko__lyuk{ fill:var(--felulet-alt); }
.deko__aram{ fill:none; stroke:var(--jel); stroke-width:3; stroke-linecap:round; stroke-dasharray:6 19; opacity:.45; animation:deko-aram 3s linear infinite; }
.deko__forog{ transform-box:view-box; transform-origin:120px 120px; animation:deko-forog 4.5s linear infinite; }
.deko__fuj{ fill:none; stroke:var(--jel); stroke-width:3; stroke-linecap:round; stroke-dasharray:20 80; opacity:.6; animation:deko-fuj 7s linear infinite; }
.deko--por i{ position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); border-radius:50%;
  background:currentColor; opacity:var(--o); animation:deko-por var(--t) ease-in-out var(--k) infinite; }
@keyframes deko-forog{ to{ transform:rotate(360deg); } }
@keyframes deko-aram{ to{ stroke-dashoffset:-100; } }
@keyframes deko-fuj{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:-100; } }
@keyframes deko-por{
  0%{ transform:translate(0,0); opacity:0; }
  20%,75%{ opacity:var(--o); }
  100%{ transform:translate(var(--dx),var(--dy)); opacity:0; } }

/* elhelyezés: a fejléc melletti üres sáv jobbra, a tartalomkeret széléhez igazítva */
.deko--jobb{ top:clamp(40px,6vw,84px); right:max(16px, calc((100% - var(--keret)) / 2 + 28px)); width:clamp(170px,17vw,230px); }
.deko--inverz{ color:#fff; }
.deko--inverz .deko__lyuk{ fill:var(--nuxon-deep); }
.deko--inverz .deko__tele{ opacity:.1; }
.deko--gyik{ top:clamp(170px,14vw,200px); left:max(16px, calc((100% - var(--keret)) / 2 + 24px)); width:clamp(220px,22vw,300px); }
/* 02: a kártyák tetejéből felszálló szag, köd, illetve a harmadik fölött ventilátor */
.feladatok--deko{ position:relative; z-index:0; }
.feladatok--deko li{ position:relative; }
.feladatok--deko .deko{ z-index:-1; } /* a kártya mögül indul */
.deko--kartya{ bottom:calc(100% - 4px); left:50%; width:200px; transform:translateX(-50%); }
.deko--kartya-vent{ bottom:calc(100% + 10px); width:118px; }
.deko--kartya-szag{ bottom:calc(100% - 34px); }
.deko--kartya-kod{ bottom:calc(100% - 40px); }
.deko__szag{ fill:none; stroke:#8C9A63; stroke-width:3; stroke-linecap:round; opacity:0; animation:deko-szag 3.6s ease-in-out infinite; }
.deko--kod{ height:110px; }
.deko--kod i{ position:absolute; bottom:-6px; left:var(--x); width:var(--s); height:var(--s); border-radius:50%;
  background:radial-gradient(circle, rgba(88,98,114,.6), rgba(88,98,114,0) 68%); filter:blur(4px); opacity:0;
  animation:deko-kod var(--t) ease-out var(--k) infinite; }
@keyframes deko-szag{ 0%{ transform:translateY(20px); opacity:0; } 30%{ opacity:.75; } 100%{ transform:translateY(-24px); opacity:0; } }
@keyframes deko-kod{ 0%{ transform:translate(0,10px) scale(.5); opacity:0; } 25%{ opacity:.9; } 100%{ transform:translate(var(--dx),-52px) scale(1.6); opacity:0; } }
@media (min-width:1024px){ .feladatok--deko{ margin-top:clamp(90px,8vw,110px); } }
/* 06: nagy ventilátor, jobbra lent kicsit lelóg */
.deko--nagyvent{ bottom:-80px; right:-70px; width:clamp(320px,30vw,420px); }
.deko--nagyvent .deko__vonal{ opacity:.3; }
/* 09: felbukkanó kérdőjelek */
.deko--kerdes{ height:220px; }
.deko--kerdes i{ position:absolute; left:var(--x); top:var(--y); font:700 var(--m)/1 var(--font-sans); font-style:normal;
  color:var(--nuxon-primary); opacity:0; animation:deko-kerdes var(--t) ease-in-out var(--k) infinite; }
.deko--kerdes i:nth-child(3n){ color:var(--jel); }
@keyframes deko-kerdes{ 0%,100%{ opacity:0; transform:rotate(var(--f)) scale(.5); } 35%,65%{ opacity:.32; transform:rotate(var(--f)) scale(1); } }
/* 04: kis animált ikonok a folyamatsávban (minden kijelzőn) */
.mini{ display:block; flex:none; width:40px; height:40px; color:var(--nuxon-primary); }
.mini svg{ display:block; width:100%; height:100%; overflow:visible; }
.mini__vonal{ fill:none; stroke:currentColor; stroke-width:2; }
.mini__vonal--halk{ opacity:.3; stroke-width:1.5; }
.mini__tele{ fill:currentColor; }
.mini__forog{ transform-box:view-box; transform-origin:24px 24px; animation:deko-forog 7s linear infinite; }
.mini__mag{ fill:currentColor; }
.mini__elektron{ fill:var(--jel); }
.mini__szag{ fill:none; stroke:#7E8F4F; stroke-width:2.4; stroke-linecap:round; animation:mini-szag 2.8s ease-in-out infinite; }
.mini__fuj{ fill:none; stroke:var(--jel); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:34 66; animation:deko-fuj 2.6s linear infinite; }
@keyframes mini-szag{ 0%{ transform:translateY(5px); opacity:0; } 35%{ opacity:1; } 100%{ transform:translateY(-6px); opacity:0; } }
.mini.all *{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .mini__szag{ opacity:1; } }
/* a main.js megállítja, amíg a díszítés nem látszik */
.deko.all *{ animation-play-state:paused; }
/* nyitóképernyő: gőz- és porszemek a fénysávban (a fátyol fölött, a szöveg alatt) */
.deko--hero{ inset:0; z-index:1; color:#fff; }
.deko--hero i{ left:calc(30% + var(--x) * .7); filter:blur(.6px); }
.deko--hero i:nth-child(4n){ filter:blur(1.6px); }
@media (max-width:1023px){ .deko:not(.deko--hero){ display:none; } }
@media (max-width:767px){ .deko--hero i{ left:var(--x); } .deko--hero i:nth-child(2n){ display:none; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* nyomtatás: a navigáció és a sávok nélkül */
@media print{
  .fejlec,.cc,.also-cta,.site-foot,.cta-sav{ display:none !important; }
  body{ font-size:11pt; }
}