/* ============================================================
   BETŰTÍPUSOK - saját tárhelyről (assets/fonts/), latin + latin-ext
   ============================================================ */
@font-face{font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/archivo-500.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/archivo-600.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/archivo-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2")}

/* ============================================================
   muszakiterv.hu - irányított tervválasztó
   Vizuális nyelv: TERVLAP. Halvány milliméterháló, vékony
   vonalak, jobb alsó fejbélyeg (title block) - ami egyben a
   folyamat állapotjelzője is.
   ============================================================ */
:root{
  --paper:   #EFEFF1;   /* hideg semleges - a logó szürkéjéből */
  --sheet:   #FAFAFB;
  --ink:     #101820;   /* MÁRKA SÖTÉT - a logó pupillája */
  --ink-2:   #5C6570;
  --line:    #D3D3D9;
  --line-2:  #E5E5EA;
  --blue:    #284090;   /* MÁRKAKÉK - a logóból kimérve */
  --blue-lt: #E8EBF5;
  --grey:    #9898A0;   /* MÁRKASZÜRKE - a logó középső gyűrűje */
  --amber:   #96650F;   /* opció, külön ajánlat */
  --red:     #A83A1E;   /* rossz döntés, felesleges költség */
  --green:   #2E6B4F;

  --disp: "Archivo", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gut: clamp(18px, 4vw, 48px);
}
*{box-sizing:border-box}
/* a tervválasztó oldalszélességű kék sávja ne okozzon vízszintes görgetést */
html,body{overflow-x:clip}   /* clip: nem hoz létre görgetőkonténert, a ragadós fejléc működik */
@supports not (overflow:clip){ html,body{overflow-x:hidden} }
body{
  margin:0; color:var(--ink); font-family:var(--body);
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
  background:var(--paper);
  background-image:
    linear-gradient(to right, rgba(40,64,144,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(40,64,144,.06) 1px, transparent 1px);
  background-size:26px 26px;
}
h1,h2,h3{font-family:var(--disp); font-weight:600; line-height:1.08; margin:0; letter-spacing:-.01em}
p{margin:0 0 1em}
.wrap{max-width:1080px; margin:0 auto; padding-inline:var(--gut)}
.mono{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
:where(button,a,input,select,textarea):focus-visible{outline:2.5px solid var(--amber); outline-offset:3px}

/* ---------- fejléc ---------- */
.top{border-bottom:1px solid var(--line); background:rgba(242,241,237,.92); backdrop-filter:blur(6px); position:sticky; top:0; z-index:30}
.top__in{display:flex; align-items:center; gap:18px; height:72px}
.brand{display:flex; align-items:center; gap:16px; text-decoration:none; color:inherit}
.brand img{height:40px; width:auto; display:block}
.brand__d{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); border-left:1px solid var(--line); padding-left:16px;
}
.top__spacer{flex:1}
.top__tel{font-family:var(--mono); font-size:.85rem; text-decoration:none; color:inherit; white-space:nowrap}

/* ---------- mini hero ---------- */
.hero{padding:clamp(40px,6.5vw,76px) 0 clamp(26px,3.5vw,38px)}
.hero h1{margin-bottom:26px}
.hero__kicker{
  font-family:var(--mono); font-weight:400; font-size:.7rem; line-height:1.6; letter-spacing:.13em; text-transform:uppercase;
  color:var(--blue); margin:0 0 18px; padding-bottom:14px;
  border-bottom:1px solid var(--line); display:inline-block;
}
.hero__slogan{display:block; font-size:clamp(2.2rem,5.2vw,3.7rem); max-width:20ch}
.hero__slogan em{font-style:normal; color:var(--blue); display:block}
/* helyzetsor a főcím alatt (2026-10-23) - kattintható, a választóba visz előjelöléssel */
.sit{display:flex; flex-wrap:wrap; gap:8px; margin:-8px 0 24px; padding:0; list-style:none}
.sit__l{flex-basis:100%; font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-bottom:2px}
.sit a{display:inline-flex; align-items:center; gap:7px; background:#fff; border:1.5px solid #9CC3AD; border-radius:999px; text-decoration:none;
  padding:6px 13px 6px 10px; font-family:var(--disp); font-weight:600; font-size:.92rem; color:var(--ink); line-height:1.1; transition:border-color .14s, background .14s}
.sit a::before{content:""; flex:none; width:14px; height:14px; border-radius:50%; background:var(--green); box-shadow:inset 0 0 0 3.5px var(--green), inset 0 0 0 7px #fff}
@media (hover:hover){ .sit a:hover{border-color:var(--green); background:#EDF5F0} }
@media (max-width:620px){ .sit{gap:7px; margin:-10px 0 20px} .sit a{font-size:.88rem; padding:11px 14px 11px 10px} }
/* 2026-10-16: 360 px alatt az "engedélyeztetéssel." (gázterv-hero) nem fért ki - csak itt kisebb */
@media (max-width:400px){ .hero__slogan{font-size:min(2.2rem, 9.6vw)} }
.hero__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(26px,4vw,52px); align-items:start}
.hero__txt p{margin-bottom:.9em}
.hero__txt p:last-child{margin-bottom:0}
.hero p{color:var(--ink-2); max-width:58ch; font-size:1.06rem; margin:0}
.hero p b{color:var(--ink); font-weight:600}
.hero__free{
  margin-top:0 !important; display:block;
  border-left:3px solid var(--blue); background:var(--blue-lt);
  padding:11px 17px; font-size:.95rem; color:var(--ink-2);
}
.hero__free b{color:var(--blue) !important}
.hero__cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.hero__cta .btn{text-decoration:none; display:inline-flex; align-items:center; gap:8px}
.hero__cta-n{font-family:var(--mono); font-size:.72rem !important; letter-spacing:.04em; color:var(--ink-2); margin-top:9px !important}

/* gázterv-hero (2026-10-20): pipás "Mi intézzük" lista + "Az Ön dolga" sáv + ársor */
.gx__h{font-family:var(--disp); font-weight:700; font-size:1.05rem; color:var(--ink) !important; margin:0 0 8px !important}
.gx__l{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:7px}
.gx__l li{position:relative; padding-left:30px; font-size:1.02rem; line-height:1.4; color:var(--ink)}
.gx__l li::before{content:""; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:2px; background:var(--green)}
.gx__l li::after{content:""; position:absolute; left:7px; top:4px; width:6px; height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.gx__lead{font-size:1.06rem !important; color:var(--ink) !important; font-weight:500; line-height:1.5; margin:0 0 14px !important; padding-left:12px; border-left:3px solid var(--blue)}
.gx__you{background:#EDF5F0; border-left:4px solid var(--green); padding:11px 14px !important; margin:0 0 14px !important; font-size:.98rem !important; line-height:1.45}
.gx__you b{color:var(--green) !important}
.gx__meta{display:flex; flex-wrap:wrap; gap:6px 18px; font-family:var(--mono); font-size:.8rem !important; letter-spacing:.03em; margin:0 !important}
.gx__meta b{font-size:.95rem}
/* mobilon a gombok közvetlenül az ár után jönnek, az "ingyenes ajánlat" doboz alájuk kerül */
@media (max-width:900px){
  :is(.hero--gaz,.hero--futes,.hero--hoszivattyu) .hero__side{display:flex; flex-direction:column}
  :is(.hero--gaz,.hero--futes,.hero--hoszivattyu) .hero__free{order:3; margin-top:18px !important}
  :is(.hero--gaz,.hero--futes,.hero--hoszivattyu) .hero__cta{order:1; margin-top:0}
  :is(.hero--gaz,.hero--futes,.hero--hoszivattyu) .hero__cta-n{order:2}
}

/* szakág-csempék a hero alatt (2026-10-16, a 10-14-i gyorsugró helyett) - a tervválasztó zöldjével */
.szk{margin:0 0 30px}
.szk h2{font-family:var(--disp); font-weight:700; font-size:clamp(1.6rem,3.2vw,2.2rem); line-height:1.1; letter-spacing:-.01em; color:var(--ink); margin:0 0 14px}
.szk__g{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.szk__c{position:relative; display:flex; flex-direction:column; gap:5px; text-decoration:none; color:var(--ink);
  background:#EDF5F0; border:1px solid #BCD7C7; border-left:4px solid var(--green); border-radius:2px; padding:15px 40px 15px 16px;
  transition:background .14s, border-color .14s}
.szk__c b{font-family:var(--disp); font-weight:700; font-size:1.12rem; line-height:1.2}
.szk__d{font-size:.9rem; color:var(--ink-2); line-height:1.35}
.szk__m{font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; color:var(--green); font-weight:600; margin-top:3px}
.szk__a{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--green); font-size:1.25rem}
.szk__fn{margin:10px 0 0; font-size:.8rem; line-height:1.5; color:var(--ink-2); max-width:none}
.szk__c.is-hit{background:#fff; border:2px solid var(--green); border-left-width:6px; box-shadow:0 6px 18px -10px rgba(46,107,79,.55)}
@media (hover:hover){ .szk__c:hover{background:#fff; border-color:var(--green)} }
@media (max-width:900px){ .szk__g{grid-template-columns:1fr 1fr} }
@media (max-width:600px){
  .szk__g{gap:8px} .szk__c{padding:12px} .szk__c b{font-size:1rem; padding-right:16px}
  .szk__d{display:none} .szk__a{top:14px; transform:none; right:10px; font-size:1.05rem} .szk__m{font-size:.68rem}
}

/* ---------- erősség-sáv ---------- */
.trust{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  margin-bottom:0;   /* 2026-10-27: alatta a .refl folytatja */
}
/* referenciák a számsáv alatt, ugyanabban a keretben (2026-10-27) */
.refl{border:1px solid var(--line); border-top:0; background:var(--sheet); padding:18px 20px 18px; margin:0 0 clamp(34px,5vw,58px)}
.refl__k{margin:0 0 6px; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); max-width:none}
.refl__w{overflow:hidden}
.refl__l{font-size:1rem; list-style:none; margin:0 0 0 -1.3em; padding:0; display:flex; flex-wrap:wrap}
.refl__l li{font-family:var(--disp); font-weight:600; font-size:1em; line-height:1.55; color:var(--ink)}
.refl__l li::before{content:"·"; display:inline-block; width:1.3em; text-align:center; color:var(--blue)}
.refl__n{margin:8px 0 0; font-size:.8rem; color:var(--ink-2); max-width:none}
.refl__s{margin:12px 0 2px; font-family:var(--disp); font-weight:700; font-size:clamp(1.05rem,1.8vw,1.25rem); color:var(--ink); max-width:none; padding-left:12px; border-left:3px solid var(--green)}
.trust div{background:var(--sheet); padding:16px 15px 18px; display:flex; flex-direction:column; gap:8px}
.trust svg{width:22px; height:22px; color:var(--blue); stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.trust b{font-family:var(--disp); font-size:1.32rem; font-weight:600; line-height:1.05; white-space:nowrap}
.trust span{font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); line-height:1.45}

/* horgonyra érkezéskor a ragadós fejléc ne takarja a szekció tetejét */
section[id]{scroll-margin-top:92px}

/* ---------- átfutási idő ---------- */
.speed{margin-bottom:clamp(34px,5vw,54px)}
.speed__h{margin-bottom:20px}
.speed__h .mono{color:var(--blue); display:block; margin-bottom:9px}
.speed__h h2{font-size:clamp(1.4rem,2.8vw,2rem); margin-bottom:8px}
.speed__h p{color:var(--ink-2); max-width:none; margin:0; font-size:.96rem}
.sgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.scard{background:var(--sheet); padding:20px 18px 22px; display:flex; flex-direction:column; gap:9px}
.scard svg{width:44px; height:32px; color:var(--blue); stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.scard__t{font-family:var(--mono); font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2)}
.scard b{font-family:var(--disp); font-size:2.5rem; font-weight:700; line-height:.92; color:var(--blue); display:flex; flex-direction:column; gap:4px}
.scard b i{font-style:normal; font-size:.78rem; font-weight:500; color:var(--ink); font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase}
.scard em{font-style:normal; font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; color:var(--ink-2); margin-top:auto; padding-top:4px}
.scard--tbd b{color:var(--ink-2); font-size:1.7rem}
.scard--tbd em{color:var(--amber)}
.speed__plain{font-size:.9rem; color:var(--ink-2); margin:14px 0 0}

/* ---------- hogyan készül az ajánlat ---------- */
.offer{margin-bottom:clamp(40px,6vw,68px)}
.offer__h{margin-bottom:22px}
.offer__h .mono{color:var(--blue); display:block; margin-bottom:9px}
.offer__h h2{font-size:clamp(1.6rem,3.2vw,2.35rem); margin-bottom:10px}
.offer__h p{color:var(--ink-2); max-width:none; margin:0; font-size:.99rem}
.offer__h p b{color:var(--ink)}

.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.tier{
  background:var(--sheet); padding:20px 16px 21px; text-align:center;
  position:relative; border-top:4px solid var(--grey);
}
.tier--mid{background:var(--blue-lt); border-top-color:var(--blue); padding-top:30px}
.tier__n{font-family:var(--disp); font-weight:600; font-size:clamp(1rem,2.1vw,1.35rem); line-height:1.15; display:block}
.tier--mid .tier__n{color:var(--blue)}
.tier__b{
  position:absolute; top:0; left:0; right:0; background:var(--blue); color:#fff;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 6px 4px; line-height:1.3;
}
.tiers__axis{
  display:flex; justify-content:space-between; margin-top:9px;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2); position:relative;
}
.tiers__axis::before{
  content:""; position:absolute; left:0; right:0; top:50%; height:1px;
  background:linear-gradient(to right, var(--blue), var(--line));
  opacity:.45; z-index:0;
}
.tiers__axis span{background:var(--paper); padding:0 9px; position:relative; z-index:1}

/* ingyenes ajánlat + garancia */
.offer__free{
  margin:22px 0 0; padding:16px 20px; background:var(--blue); color:#fff;
  font-family:var(--disp); font-size:clamp(1.05rem,2vw,1.3rem); line-height:1.3;
}
.offer__free b{font-weight:600}
.offer__free span{color:#C9D0E8; font-weight:500}
.guar{
  margin-top:12px; padding:16px 20px 17px; background:var(--sheet);
  border:1px solid var(--line); border-left:3px solid var(--blue);
}
.guar .mono{display:block; color:var(--blue); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px}
.guar p{margin:0; font-size:.95rem; color:var(--ink-2); max-width:none}
.guar p b{color:var(--ink); font-weight:600}



/* ---------- választó felvezetése ---------- */
/* 2026-10-12: a tervválasztó feje oldalszélességű, milliméterpapír-mintás kék sáv,
   a lap (.sheet) félig ráúszik - hogy a görgetés megálljon rajta, ne olvadjon bele a szövegbe */
.lead{position:relative; isolation:isolate; margin-bottom:0; padding:clamp(40px,6vw,64px) 0 clamp(110px,12vw,140px)}
.lead::before{
  content:""; position:absolute; top:0; bottom:0; left:-100vmax; right:-100vmax; z-index:-1;
  background-color:var(--blue);
  background-image:
    linear-gradient(to right, rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px;
}
.lead .mono{color:#B9C6EE; display:block; margin-bottom:9px}
.lead h2{font-size:clamp(1.95rem,4.4vw,3.1rem); margin-bottom:12px; max-width:20ch; color:#fff}
.lead p{color:#DCE3F7; max-width:none; margin:0; font-size:1.05rem}

/* ---------- csapat ---------- */
.team{margin-bottom:clamp(44px,7vw,80px)}
.team__h{margin-bottom:22px}
.team__h .mono{color:var(--blue); display:block; margin-bottom:9px}
.team__h h2{font-size:clamp(1.4rem,2.8vw,2rem); margin-bottom:8px; max-width:24ch}
.team__h p{color:var(--ink-2); max-width:none; margin:0; font-size:.98rem}
.tgrid{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.tcard{background:var(--sheet); margin:0; display:flex; flex-direction:column}
/* A fotóhelyek 2026-10-07-én kikerültek az index.php-ból, amíg nincsenek valódi
   képek. Ez a néhány szabály szándékosan bent maradt: ha a .tcard__img div
   visszakerül a kártyákba, azonnal újra működik, nem kell újraírni. */
.tcard__img{
  aspect-ratio:4/5; background:var(--blue-lt); border-bottom:1px solid var(--line-2);
  position:relative; display:grid; place-items:center;
}
.tcard__img::before{
  content:attr(data-i); font-family:var(--disp); font-weight:700;
  font-size:2.6rem; color:var(--blue); opacity:.3;
}
.tcard__img::after{
  content:"FOTÓ"; position:absolute; bottom:9px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.14em;
  color:var(--blue); border:1px dashed var(--blue); padding:3px 8px; opacity:.6;
}
.tcard figcaption{padding:18px 17px}
.tcard h3{font-size:1.06rem; margin-bottom:4px}
.tcard__r{display:block; font-size:.86rem; color:var(--ink); font-weight:500; margin-bottom:6px}
.tcard em{font-style:normal; display:block; color:var(--blue); font-size:.62rem; margin-bottom:10px}
.tcard em:last-child{margin-bottom:0}
.tcard p{font-size:.84rem; color:var(--ink-2); line-height:1.5; margin:10px 0 0}
.tcard--ext{background:var(--blue-lt)}
.tcard--ext .tcard__img{background:#DCE2F0}
.tcard__tag{
  display:inline-block; background:var(--blue); color:#fff; margin-bottom:8px;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.11em; text-transform:uppercase;
  padding:4px 9px 3px; border-radius:2px;
}

/* ---------- működési terület ---------- */
.area{margin-bottom:clamp(44px,7vw,80px)}
.area__h{margin-bottom:24px}
.area__h .mono{color:var(--blue); display:block; margin-bottom:9px}
.area__h h2{font-size:clamp(1.4rem,2.8vw,2rem); margin-bottom:8px; max-width:30ch}
.area__h p{color:var(--ink-2); max-width:72ch; margin:0; font-size:.98rem}

.area__grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
.acard{background:var(--sheet); padding:20px clamp(18px,2.4vw,26px) 24px; display:flex; flex-direction:column}
.acard__tag{
  align-self:flex-start; font-family:var(--mono); font-size:.63rem; letter-spacing:.11em;
  text-transform:uppercase; color:#fff; background:var(--blue); padding:4px 9px 3px; margin-bottom:14px;
}
.acard__tag--alt{background:var(--ink)}
.acard img{width:100%; height:auto; display:block; margin-bottom:16px}
.acard h3{font-size:1.18rem; margin-bottom:7px}
.acard p{color:var(--ink-2); font-size:.93rem; margin:0; max-width:none}
.acard__list{margin:9px 0 0; padding:0; list-style:none; display:grid; gap:6px}
.acard__list li{position:relative; padding-left:17px; font-size:.93rem; color:var(--ink-2); line-height:1.45}
.acard__list li::before{
  content:""; position:absolute; left:0; top:.55em; width:7px; height:7px;
  background:var(--blue-lt); border:1.5px solid var(--blue);
}
.area__note{
  margin:16px 0 0; border-left:3px solid var(--blue); background:var(--blue-lt);
  padding:13px 18px; font-size:.93rem; color:var(--ink-2); max-width:none;
}
.area__note b{color:var(--ink)}
@media (max-width:760px){ .area__grid{grid-template-columns:1fr} }

/* ---------- nagyságrendek ---------- */
.prices{margin-bottom:clamp(44px,7vw,86px)}
.prices__h{margin-bottom:20px}
.prices__h .mono{color:var(--blue); display:block; margin-bottom:9px}
.prices__h h2{font-size:clamp(1.4rem,2.8vw,2rem); margin-bottom:8px}
.prices__h p{color:var(--ink-2); max-width:none; margin:0; font-size:.98rem}
.pgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.pcard{background:var(--sheet); border:1px solid var(--line); display:flex; flex-direction:column}
.pcard__h{padding:14px 18px 13px; border-bottom:1px solid var(--line-2); background:#F4F4F6}
.pcard__h .mono{color:var(--blue); font-size:.63rem; display:block; margin-bottom:5px}
.pcard__h h3{font-size:1.1rem}
.pcard__h em{font-style:normal; display:block; font-family:var(--mono); font-size:.76rem; color:var(--ink-2); margin-top:5px; text-transform:none; letter-spacing:0}
.pcard__b{padding:15px 18px 10px; flex:1}
.pcard__b .pcard__inc{font-size:.6rem; color:var(--ink-2); display:block; margin-bottom:7px}
.pcard__b ul{margin:0; padding-left:18px}
.pcard__b li{font-size:.86rem; color:var(--ink-2); margin-bottom:5px; line-height:1.45}
.pcard__x{padding:0 18px 12px; margin:0; font-size:.8rem; color:var(--ink-2); line-height:1.45; font-style:italic}
.pcard__f{padding:14px 18px 17px; border-top:1px solid var(--line-2); background:var(--blue-lt)}
.pcard__f .mono{font-size:.6rem; color:var(--ink-2); display:block; margin-bottom:3px}
.pcard__f b{font-family:var(--disp); font-size:1.42rem; font-weight:600; color:var(--blue); line-height:1.1}
.pcard__f i{
  font-style:normal; display:block; margin-top:5px; font-family:var(--mono);
  font-size:.74rem; letter-spacing:.04em; color:var(--ink-2);
}

.prices__half{
  border:1px solid var(--blue); background:var(--blue-lt); padding:15px 19px;
  font-size:.95rem; color:var(--ink-2); margin-top:16px;
}
.prices__half b{color:var(--blue)}

/* szekció végi gomb vissza a tervválasztóhoz (árak, spórolás) */
.sec-cta{margin:22px 0 0; max-width:none}
.sec-cta .btn{text-decoration:none; display:inline-flex; align-items:center; gap:8px}

/* bruttó jelölés */
.vat{
  display:inline-block; font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--red);
  border:1px solid var(--red); padding:2px 7px 1px; line-height:1.4; vertical-align:middle;
}
.vat--line{display:table; margin:0 0 8px}

.prices__note{border-left:3px solid var(--amber); background:#FAF7F0; padding:14px 18px; font-size:.86rem; color:var(--ink-2); margin-top:16px}
.prices__note b{color:var(--ink)}

/* ---------- amin nem érdemes spórolni ---------- */
.save{margin-bottom:clamp(44px,7vw,86px)}
.save__h{margin-bottom:24px}
.save__h .mono{color:var(--red); display:block; margin-bottom:9px}
.save__h h2{font-size:clamp(1.7rem,3.6vw,2.7rem); margin-bottom:10px}
.save__h p{color:var(--ink-2); max-width:none; margin:0; font-size:.99rem}

.pull{
  margin:0 0 26px; padding:22px 26px; background:var(--ink); color:#fff;
  font-family:var(--disp); font-weight:600; font-size:clamp(1.15rem,2.3vw,1.6rem); line-height:1.25;
}
.pull span{display:block; color:#9FA8B8; font-weight:500; font-size:.72em; margin-top:6px}
.pull--sm{font-size:clamp(1.05rem,2vw,1.4rem); margin-bottom:22px; padding:18px 22px}
.pull--sm span{font-size:.72em; line-height:1.5; max-width:78ch}

/* olcsó terv vs. rendes terv összegző */
.verdict{display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; margin-bottom:22px}
.verdict__c{padding:16px 20px 17px; border:1px solid var(--line); display:flex; flex-direction:column; align-items:flex-start; gap:5px}
.verdict__c.bad{background:#FAF1EE; border-top:3px solid var(--red)}
.verdict__c.good{background:var(--blue-lt); border-top:3px solid var(--blue)}
.verdict__c .mono{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.verdict__c b{font-family:var(--disp); font-size:clamp(1.6rem,3.2vw,2.2rem); font-weight:700; line-height:1.1}
.verdict__c.bad b{color:var(--red)}
.verdict__c.good b{color:var(--blue)}
.verdict__c em{font-style:normal; font-size:.88rem; color:var(--ink-2)}
.verdict__vs{font-family:var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2)}

/* összehasonlító táblázat */
.vs{width:100%; border-collapse:collapse; border:1px solid var(--line); background:var(--sheet); margin-bottom:20px}
.vs th, .vs td{padding:13px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line-2)}
.vs thead th{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--ink); background:#F4F4F6;
}
.vs thead th.bad{color:var(--red)}
.vs thead th.good{color:var(--blue)}
.vs td:first-child{font-weight:500; font-size:.94rem; width:38%}
.vs td em{font-style:normal; display:block; font-weight:400; font-size:.82rem; color:var(--ink-2); margin-top:4px; line-height:1.45}
.vs .num{font-family:var(--mono); font-size:.9rem; width:31%}
.vs .num span{color:var(--ink-2); font-size:.78rem}
.vs td.bad{background:#FAF1EE}
.vs td.good{background:var(--blue-lt)}
.vs td.bad b{color:var(--red); font-weight:500}
.vs td.good b{color:var(--blue); font-weight:500}
.vs tr.hl td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.vs tfoot td{border-bottom:0; border-top:1px solid var(--ink); font-weight:600; font-size:1rem}
.vs tfoot .num b{font-family:var(--disp); font-size:1.24rem; font-weight:700}

.save__end{
  border-left:3px solid var(--red); background:#FAF1EE; padding:15px 19px;
  font-size:.96rem; color:var(--ink-2); margin:0;
}
.save__end b{color:var(--red)}

/* ---------- lebegő visszahívás ---------- */
.fab{
  position:fixed; right:clamp(14px,3vw,26px); bottom:clamp(14px,3vw,26px); z-index:60;
  display:flex; align-items:center; gap:10px; cursor:pointer; font:inherit;
  background:var(--blue); color:#fff; border:0; border-radius:3px;
  padding:13px 19px 12px; box-shadow:0 8px 24px -8px rgba(16,24,32,.55);
  font-family:var(--disp); font-weight:600; font-size:1rem; letter-spacing:.01em;
  transition:background .14s, transform .14s;
}
.fab:hover{background:#1E3170; transform:translateY(-1px)}
.fab svg{width:19px; height:19px; flex:none}

.cb{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:18px}
.cb[hidden]{display:none}
.cb__bg{position:absolute; inset:0; background:rgba(16,24,32,.6); backdrop-filter:blur(3px)}
.cb__box{
  position:relative; width:min(520px,100%); max-height:90vh; overflow-y:auto;
  background:var(--sheet); border:1px solid var(--ink); border-radius:3px;
  padding:26px clamp(20px,4vw,30px) 28px; box-shadow:0 20px 50px -20px rgba(16,24,32,.6);
}
.cb__x{
  position:absolute; top:10px; right:12px; background:none; border:0; cursor:pointer;
  font-size:1.6rem; line-height:1; color:var(--ink-2); padding:4px 8px;
}
.cb__x:hover{color:var(--ink)}
.cb__e{color:var(--blue); display:block; margin-bottom:7px}
.cb__box h3{font-size:1.5rem; margin-bottom:8px}
.cb__box>p{color:var(--ink-2); font-size:.94rem; margin-bottom:18px}

/* ---------- jogi ablak ---------- */
.lg{z-index:80}
.lg__box{width:min(720px,100%); padding-top:18px}
.lg__tabs{display:flex; gap:0; border-bottom:1px solid var(--line); margin:0 36px 22px 0}
.lg__tabs button{
  background:none; border:0; cursor:pointer; padding:9px 2px 10px; margin-right:22px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.lg__tabs button.is-on{color:var(--blue); border-bottom-color:var(--blue)}
.lg__doc h3{font-size:1.5rem; margin-bottom:8px}
.lg__doc h4{font-family:var(--disp); font-size:1rem; font-weight:600; margin:22px 0 7px; color:var(--ink)}
.lg__doc p{color:var(--ink-2); font-size:.9rem; line-height:1.6; margin:0 0 9px; max-width:none}
.lg__doc p b{color:var(--ink); font-weight:600}
.lg__doc a{color:var(--blue)}
.lg__lead{border-left:3px solid var(--blue); background:var(--blue-lt); padding:11px 15px; color:var(--ink) !important}
.lg__dl{display:grid; grid-template-columns:max-content 1fr; gap:5px 18px; margin:0; font-size:.88rem}
.lg__dl dt{font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); padding-top:2px}
.lg__dl dd{margin:0; color:var(--ink)}
.lg__date{margin-top:22px !important; padding-top:12px; border-top:1px solid var(--line-2); font-size:.8rem !important}
.todo{background:#FFF1B8; color:#5A4500; padding:0 3px}
@media (max-width:620px){ .lg__dl{grid-template-columns:1fr; gap:1px 0} .lg__dl dd{margin-bottom:7px} }

/* ---------- portfólió ---------- */
.port{border-top:1px solid var(--ink); padding-top:clamp(30px,4vw,44px); margin-bottom:clamp(44px,7vw,80px)}
.port__h{margin-bottom:26px}
.port__h .mono{color:var(--blue); display:block; margin-bottom:9px}
.port__h h2{font-size:clamp(1.4rem,2.8vw,2rem); margin-bottom:8px}
.port__h p{color:var(--ink-2); max-width:none; margin:0; font-size:.98rem}

.port__cols{columns:3; column-gap:26px}
.pblock{
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  background:var(--sheet); border:1px solid var(--line); border-top:3px solid var(--grey);
  padding:14px 16px 15px; margin-bottom:12px; display:inline-block; width:100%;
}
.pblock--hl{border-top-color:var(--blue); background:var(--blue-lt)}
.pblock h3{font-size:.95rem; margin-bottom:9px; line-height:1.25}
.pblock--hl h3{color:var(--blue)}
.pblock ul{margin:0; padding-left:16px}
.pblock li{font-size:.82rem; color:var(--ink-2); line-height:1.45; margin-bottom:5px}
.pblock li::marker{color:var(--grey)}
.pblock--hl li::marker{color:var(--blue)}
.pblock b{color:var(--ink)}

/* ============================================================
   TERVLAP - a folyamat kerete
   ============================================================ */
.sheet{
  background:var(--sheet); border:1px solid var(--ink);
  box-shadow:0 1px 0 var(--line), 0 26px 50px -26px rgba(10,20,60,.6);
  margin-top:clamp(-110px,-10vw,-80px);   /* ráúszik a kék sávra (.lead) */
  margin-bottom:clamp(40px,7vw,90px); position:relative; z-index:1;
}
.sheet__inner{border:1px solid var(--line-2); margin:9px; padding:clamp(22px,3.4vw,40px) clamp(20px,3.4vw,40px) 0}

.step__head{margin-bottom:8px}
.step__no{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--blue); display:block; margin-bottom:9px}
.step__head h3{font-size:clamp(1.35rem,2.6vw,1.95rem)}
.step__hint{color:var(--ink-2); font-size:.95rem; margin:0 0 24px; max-width:64ch}

/* ---------- választókártyák ---------- */
.grid{display:grid; gap:12px; margin-bottom:8px}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}

.card{
  position:relative; text-align:left; cursor:pointer; font:inherit; color:inherit;
  /* 2026-10-23: fehér, kiemelkedő "gomb" (előtte halványzöld lap) - a hideg teszten nem érezték kattinthatónak */
  background:#fff; border:1.5px solid #9CC3AD; border-radius:2px;
  box-shadow:0 2px 0 #BCD7C7, 0 8px 18px -14px rgba(16,24,32,.45);
  padding:18px 18px 20px; transition:border-color .14s, box-shadow .14s, background .14s, transform .14s;
  display:flex; flex-direction:column; gap:10px;
}
/* csak egérrel: érintőképernyőn koppintás után ne ragadjon be a lebegő állapot */
@media (hover:hover){ .card:hover{background:#fff; border-color:var(--green); box-shadow:0 10px 20px -12px rgba(46,107,79,.5); transform:translateY(-2px)} .card.is-on:hover{background:var(--green)} }
.card.is-on{border-color:var(--green); background:var(--green); color:#fff}
.card.is-on .card__d{color:#D9EBE1}
.card.is-on .card__tag{color:#BFE0CD}
.card.is-on .card__ico{color:#fff}
.card__ico{width:46px; height:34px; color:var(--green)}
.card.is-on .card__note{color:#F1DDB0; border-top-color:rgba(255,255,255,.3)}
.card__t{font-family:var(--disp); font-weight:600; font-size:1.06rem; line-height:1.2}
.card__d{font-size:.85rem; color:var(--ink-2); line-height:1.45}
.card__tag{font-family:var(--mono); font-size:.63rem; letter-spacing:.09em; text-transform:uppercase; color:var(--blue)}

/* ---- 2026-10-23: választhatóság jelzése ----
   egyválasztós kártya: kör (card__r) jobb felül + kék "Ezt választom ›" gomb (card__go) alul;
   mobilon (≤620 px) lista-sor: kör balra, nyíl jobbra, rövid leírás (card__ds). */
.card__r{position:absolute; top:14px; right:14px; width:22px; height:22px; border-radius:50%; border:2px solid #7FAF95; background:#fff}
.card.is-on .card__r{border-color:#fff; background:#fff; box-shadow:inset 0 0 0 4px var(--green)}
.card:not(.card--multi) .card__t, .card:not(.card--multi) .card__tag{padding-right:30px}
.card__go{align-self:flex-start; margin-top:auto; background:var(--blue); color:#fff; border-radius:2px; padding:7px 12px;
  font-family:var(--mono); font-size:.78rem; font-weight:600; letter-spacing:.04em; white-space:nowrap; transition:background .14s}
.card__go::before{content:"Ezt választom \203A"}
.card.is-on .card__go{background:#fff; color:var(--green)}
.card.is-on .card__go::before{content:"Kiválasztva \2713"}
.card__note ~ .card__go{margin-top:12px}
@media (hover:hover){ .card:hover .card__go{background:#1d2f6b} .card.is-on:hover .card__go{background:#fff} }
.card__ds{display:none}
.card__txt{display:flex; flex-direction:column; gap:4px}
/* "koppintson / kattintson egyre" útmutató a kérdés alatt */
.step__no{display:inline-block; background:var(--blue); color:#fff; padding:3px 8px; border-radius:2px}
.step__tap{position:relative; padding-left:28px; font-family:var(--mono); font-size:.78rem; line-height:1.5; letter-spacing:.03em; font-weight:600;
  color:var(--blue); margin:-12px 0 16px; max-width:none}
.step__tap::before{content:""; position:absolute; left:0; top:0; width:18px; height:18px; box-sizing:border-box; border-radius:50%; border:2px solid var(--blue); box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 9px var(--blue)}
.step__tap:empty{display:none}
.t-touch{display:none}
@media (pointer:coarse){ .t-touch{display:inline} .t-mouse{display:none} }
/* "vagy" elválasztó és a széles FMV-kártya az 1. lépésben */
.step__or{display:flex; align-items:center; gap:12px; margin:14px 0 10px; max-width:none;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2)}
.step__or::before, .step__or::after{content:""; flex:1; height:1px; background:var(--line)}
.card--wide{width:100%; flex-direction:row; align-items:center; gap:18px; padding:16px 56px 16px 18px; margin-bottom:8px}
.card--wide .card__r{top:50%; transform:translateY(-50%); right:18px}
.card--wide .card__txt{flex:1}
.card--wide .card__go{align-self:center; margin:0}
@media (max-width:620px){
  .card:not(.card--multi){padding:13px 40px 13px 50px; gap:4px; min-height:62px; justify-content:center}
  .card:not(.card--multi) .card__r{top:50%; left:14px; right:auto; transform:translateY(-50%)}
  .card:not(.card--multi) .card__t, .card:not(.card--multi) .card__tag{padding-right:0}
  .card:not(.card--multi)::after{content:"\203A"; position:absolute; right:14px; top:50%; transform:translateY(-55%); font-size:1.9rem; line-height:1; color:var(--green)}
  .card.is-on:not(.card--multi)::after{color:#fff}
  .card__go{display:none}
  .card__note ~ .card__go{display:none}
  .card--ico{display:grid; grid-template-columns:40px 1fr; column-gap:12px; row-gap:2px; align-items:center}
  .card--ico .card__ico{grid-row:1 / span 3; width:38px; height:28px}
  .card--ico .card__t{font-size:1rem}
  .card--ico .card__txt{display:contents}
  .card--ds .card__d{display:none}
  .card__ds{display:block; font-size:.8rem; color:var(--ink-2); line-height:1.3}
  .card.is-on .card__ds{color:#D9EBE1}
  #g-epulet{gap:8px}
}

/* többválasztós jelölő */
.card--multi{padding-left:48px}
.card--multi::before{
  content:""; position:absolute; left:18px; top:19px; width:17px; height:17px;
  border:1.5px solid var(--line); border-radius:2px; background:#fff;
}
.card--multi.is-on::before{background:#fff; border-color:#fff}
.card--multi.is-on::after{
  content:""; position:absolute; left:23px; top:23px; width:6px; height:10px;
  border:solid var(--green); border-width:0 2px 2px 0; transform:rotate(43deg);
}

.card__note{
  font-family:var(--mono); font-size:.63rem; letter-spacing:.05em; line-height:1.5;
  color:var(--amber); border-top:1px dashed var(--line); padding-top:9px; margin-top:auto;
}

/* kivitelezési opció az eredményoldalon */
.kiv{border-top:1px solid var(--ink); margin-top:30px; padding-top:26px}
.kiv__h{margin-bottom:16px}
.kiv__h .mono{color:var(--blue); display:block; margin-bottom:8px}
.kiv__h h3{font-size:1.3rem; margin-bottom:7px}
.kiv__h p{color:var(--ink-2); font-size:.95rem; max-width:62ch; margin:0}

/* szabad szöveges "Egyéb" mező a 3. lépésben */
/* 1. lépés: az FMV-út 2026-10-23 óta rendes kártya (.card--wide #alt-me), a régi .alt sáv stílusa törölve */
/* 2. lépés: visszaút a tervezési útról */
.switch{margin:14px 0 4px; font-size:.9rem; color:var(--ink-2); max-width:none}
.switch button{background:none; border:0; padding:0; cursor:pointer; font:inherit; font-weight:600; color:var(--blue); border-bottom:1px solid currentColor}
/* 4. lépés: kiegészítők, megjegyzés */
#s4-extra{margin-top:12px}
#s4-extra .lbl{display:block; margin-bottom:4px}
.resnote{border-left:3px solid var(--blue); background:var(--blue-lt); padding:13px 17px; font-size:.92rem; color:var(--ink-2); margin:0; max-width:none}
.resnote b{color:var(--ink); font-weight:600}
.egyeb{margin-top:13px; border:1px dashed var(--blue); background:var(--blue-lt); padding:14px 17px 16px}
.egyeb textarea{
  width:100%; min-height:76px; resize:vertical; padding:11px 13px;
  font:inherit; font-size:.96rem; background:#fff;
  border:1px solid var(--line); border-radius:2px; color:var(--ink);
}

/* ---------- fejbélyeg (title block) ---------- */
.block{
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1.25fr;
  border-top:1px solid var(--ink); margin:26px 9px 9px;
}
.block>div{padding:9px 14px 10px; border-right:1px solid var(--line-2)}
.block>div:last-child{border-right:0; background:var(--blue-lt)}
.block dt{font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2); margin-bottom:3px}
.block dd{margin:0; font-family:var(--mono); font-size:.82rem; font-weight:500}
.block .prog{display:flex; gap:4px; margin-top:5px}
.block .prog i{flex:1; height:4px; background:var(--line); border-radius:1px}
.block .prog i.on{background:var(--blue)}

/* ---------- navigáció ---------- */
.nav{display:flex; gap:12px; align-items:center; padding:22px 0 26px; border-top:1px solid var(--line-2); margin-top:26px}
.btn{
  font-family:var(--disp); font-weight:600; font-size:1rem; letter-spacing:.01em;
  padding:11px 22px; border:1.5px solid var(--blue); background:var(--blue); color:#fff;
  border-radius:2px; cursor:pointer; transition:background .14s, opacity .14s;
}
.btn:hover{background:#1E3170; border-color:#1E3170}
.btn[disabled]{opacity:.32; cursor:not-allowed}
.btn--ghost{background:transparent; color:var(--blue)}
.btn--ghost:hover{background:var(--blue-lt)}
.nav__note{font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-2); margin-left:auto; text-align:right}

/* ---------- eredmény ---------- */
.pack{border:1px solid var(--line); margin-bottom:14px; background:#fff}
.pack__h{display:flex; align-items:baseline; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line-2); background:#F4F4F6}
.pack__h h3{font-size:1.08rem; flex:1}
.pack__h .mono{color:var(--blue); font-size:.66rem}
.pack ul{margin:0; padding:14px 18px 16px 36px}
.pack li{font-size:.92rem; margin-bottom:6px; line-height:1.5}
.pack li::marker{color:var(--blue)}
.pack li.opt{color:var(--amber)}
.pack li.opt::marker{color:var(--amber)}

.always{border:1px solid var(--blue); background:var(--blue-lt); padding:18px 20px 20px; margin:22px 0 14px}
.always h3{font-size:1.05rem; margin-bottom:10px}
.always ul{margin:0; padding-left:20px}
.always li{font-size:.92rem; margin-bottom:5px}

.note{border-left:3px solid var(--amber); background:#FAF7F0; padding:14px 18px; font-size:.88rem; color:var(--ink-2); margin-bottom:22px}
.note b{color:var(--ink)}

/* ---------- ajánlatkérés ---------- */
.ask{margin-top:4px}
.form{display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:18px}
.form label{display:block}
.form .full{grid-column:1/-1}
.lbl{font-family:var(--mono); font-size:.65rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2); display:block; margin-bottom:5px}
.lbl b{color:var(--red); font-weight:400}
.form input, .form textarea{
  width:100%; padding:11px 13px; font:inherit; font-size:.96rem;
  background:#fff; border:1px solid var(--line); border-radius:2px; color:var(--ink);
}
.form textarea{min-height:84px; resize:vertical}
.summary{
  grid-column:1/-1; font-family:var(--mono); font-size:.78rem; line-height:1.7;
  background:#fff; border:1px dashed var(--blue); padding:14px 16px; color:var(--ink-2);
}
.summary b{color:var(--blue); font-weight:500}
/* hívási időpont */
.when{border:1px solid var(--blue); background:var(--blue-lt); padding:15px 18px 17px; border-radius:2px}
.when__d{font-size:.84rem; color:var(--ink-2); margin:0 0 12px; line-height:1.45}
.pills{display:flex; flex-wrap:wrap; gap:9px}
.pill{position:relative; cursor:pointer}
.pill input{position:absolute; opacity:0; width:0; height:0}
.pill span{
  display:block; padding:9px 15px; background:#fff; border:1.5px solid var(--line);
  border-radius:2px; font-family:var(--mono); font-size:.76rem; letter-spacing:.04em;
  transition:border-color .14s, background .14s, color .14s;
}
.pill:hover span{border-color:var(--blue)}
.pill input:checked + span{background:var(--blue); border-color:var(--blue); color:#fff}
.pill input:focus-visible + span{outline:2.5px solid var(--amber); outline-offset:2px}

.consent{grid-column:1/-1; display:flex; gap:9px; align-items:flex-start; font-size:.82rem; color:var(--ink-2)}
.consent input{width:auto; margin-top:3px}


/* ---------- zárás ---------- */
.close{background:var(--ink); color:#DDE3E8; padding:clamp(56px,8vw,104px) 0}
.close__e{color:var(--grey); display:block; margin-bottom:16px}
.close h2{
  font-size:clamp(2rem,5vw,3.5rem); color:#fff; margin-bottom:18px;
  max-width:18ch; letter-spacing:-.01em;
}
.close h2 em{font-style:normal; display:block; color:var(--cold-lt, #7D92C9)}
.close__p{color:#9FA8B8; font-size:1.05rem; max-width:52ch; margin-bottom:30px}
.close__cta{display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center}
.btn--light{background:transparent; color:#fff; border-color:#4A5868}
.btn--light:hover{background:#fff; color:var(--ink); border-color:#fff}
.close__tel{
  font-family:var(--mono); font-size:.84rem; color:#9FA8B8; text-decoration:none;
  border-bottom:1px solid #3A4654; padding-bottom:2px;
}
.close__tel:hover{color:#fff; border-color:#fff}

/* ---------- lábléc ---------- */
.foot{border-top:0; padding:30px 0 40px; font-size:.85rem; color:var(--ink-2)}
.foot__pillars{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--grey); margin:0 0 20px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.foot__in{display:flex; flex-wrap:wrap; gap:14px 34px; justify-content:space-between}
.foot b{font-family:var(--disp); color:var(--ink)}
.foot a{color:var(--blue)}
.consent a{color:var(--blue)}

.hide{display:none}

@media (max-width:900px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .block{grid-template-columns:1fr 1fr}
  .block>div{border-bottom:1px solid var(--line-2)}
  .trust{grid-template-columns:repeat(3,1fr)}
  .sgrid{grid-template-columns:repeat(2,1fr)}
  .tgrid{grid-template-columns:repeat(3,1fr)}

  .pgrid{grid-template-columns:repeat(2,1fr)}
  .hero__grid{grid-template-columns:1fr}
  .port__cols{columns:2}
}
@media (max-width:620px){
  .grid--4,.grid--3,.grid--2{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .brand__d{display:none}
  .nav{flex-wrap:wrap}
  .nav__note{margin-left:0; width:100%; text-align:left}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust b{white-space:normal; font-size:1.2rem}
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:1fr}
  .port__cols{columns:1}
  .vs td:first-child{width:auto}
  .vs th, .vs td{padding:10px 11px}
  .vs .num{width:auto; font-size:.82rem}
  .vs td em{font-size:.76rem}
  .verdict{grid-template-columns:1fr; gap:8px}
  .fab{width:54px; height:54px; padding:0; justify-content:center; border-radius:50%}
  .fab span{display:none}
  .fab svg{width:22px; height:22px}
  .verdict__vs{padding:2px 0}
}
@media (max-width:360px){
  .vs th, .vs td{padding:9px 7px}
  .vs .num{font-size:.76rem}
}

/* ============================================================
   SÜTISÁV + BEÁLLÍTÁSOK
   ============================================================ */
.ck{
  position:fixed; left:0; right:0; bottom:0; z-index:65;
  background:var(--sheet); border-top:1px solid var(--ink);
  box-shadow:0 -12px 34px -22px rgba(16,24,32,.55);
}
.ck[hidden]{display:none}
.ck__in{display:flex; align-items:center; gap:18px 28px; padding-top:16px; padding-bottom:16px}
.ck__txt{margin:0; font-size:.9rem; color:var(--ink-2); line-height:1.5; max-width:none; flex:1}
.ck__txt b{color:var(--ink); font-weight:600}
.ck__txt a{color:var(--blue)}
.ck__btns{display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:none}
.ck__link{background:none; border:0; padding:6px 4px; cursor:pointer; font:inherit; font-size:.9rem; color:var(--blue); text-decoration:underline; text-underline-offset:3px}
.ck-open .fab{display:none}
.ck-set{z-index:78}
.ck__rows{display:grid; gap:0; border:1px solid var(--line); margin:4px 0 20px}
.ck__row{
  display:grid; grid-template-columns:1fr auto; gap:3px 18px; align-items:center;
  padding:13px 16px; border-bottom:1px solid var(--line-2); cursor:pointer; background:#fff;
}
.ck__row:last-child{border-bottom:0}
.ck__h{grid-column:1; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
.ck__h b{font-family:var(--disp); font-weight:600; font-size:1rem; color:var(--ink)}
.ck__h span{font-family:var(--mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2)}
.ck__d{grid-column:1; font-size:.84rem; color:var(--ink-2); line-height:1.45}
.ck__row input{grid-column:2; grid-row:1 / span 2; width:20px; height:20px; accent-color:var(--blue)}
.ck__btns--set{justify-content:flex-end}
@media (max-width:900px){
  .ck__in{flex-direction:column; align-items:stretch}
  .ck__btns{justify-content:flex-end}
}
@media (max-width:620px){
  .ck__btns .btn{flex:1 1 45%; padding-left:10px; padding-right:10px}
  .ck__link{order:3; flex-basis:100%; text-align:center}
}

/* ============================================================
   ŰRLAPOK: hibajelzés, küldés, köszönet
   ============================================================ */
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.form .is-err input, .form .is-err select, .form .is-err textarea{border-color:var(--red); background:#FFF8F6}
.form .when.is-err{border-color:var(--red); background:#FAF1EE}
.form .consent.is-err span{color:var(--red)}
.err{display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.02em; color:var(--red); margin-top:5px}
.form__msg{grid-column:1 / -1; margin:0; padding:11px 15px; border-left:3px solid var(--red); background:#FAF1EE; font-size:.9rem; color:var(--ink)}
.form__msg a{color:var(--blue)}
.btn.is-busy{opacity:.6; cursor:progress}
.thanks{border:1px solid var(--blue); background:var(--blue-lt); padding:24px 26px 22px}
.thanks:focus{outline:none}
.thanks .mono{display:block; color:var(--blue); margin-bottom:8px}
.thanks h3{font-size:1.45rem; margin-bottom:8px}
.thanks p{margin:0 0 8px; color:var(--ink-2); font-size:.95rem; max-width:none}
.thanks p b{color:var(--ink); font-weight:600}
.thanks a{color:var(--blue)}
.thanks__id{font-family:var(--mono); font-size:.72rem !important; letter-spacing:.04em; margin-top:12px !important}

/* ---------- 5. lépés: megnyugtató szöveg, nagy küldés-gomb (2026-10-30) ---------- */
.step__hint--ok{color:var(--ink)}
.step__hint--ok b{color:var(--green)}
.lbl .opt-l{font-style:normal; text-transform:none; letter-spacing:0; color:var(--ink-2); margin-left:4px}
.form .consent--box{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; background:#fff; border:1.5px solid #9CC3AD; border-radius:6px; font-size:.92rem; color:var(--ink); cursor:pointer}
.form .consent--box input{width:22px; height:22px; margin:1px 0 0; accent-color:var(--green); flex:none; cursor:pointer}
.form .consent--box.is-err{border-color:var(--red)}
.btn--send{display:block; width:100%; padding:20px 24px; border:0; border-radius:6px; background:var(--green); color:#fff;
  font-size:1.25rem; font-weight:700; line-height:1.2; box-shadow:0 6px 0 #1f4a36, 0 10px 24px rgba(46,107,79,.28)}
.btn--send:hover{background:#255A42; border-color:#255A42}
.btn--send:active{transform:translateY(3px); box-shadow:0 3px 0 #1f4a36, 0 6px 14px rgba(46,107,79,.25)}
.btn--send .btn__sub{display:block; font-family:var(--body, inherit); font-size:.88rem; font-weight:500; line-height:1.3; opacity:.92; margin-top:5px}
.btn--send.is-busy{opacity:.75; cursor:wait}
.sendok{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin:14px 0 0; padding:0; list-style:none; font-size:.85rem; color:var(--ink-2)}
.sendok li{display:flex; align-items:center; gap:7px}
.sendok li::before{content:"\2713"; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--green); color:#fff; font-size:.7rem; font-weight:700; flex:none}
@media (max-width:620px){
  .btn--send{font-size:1.12rem; padding:18px 16px}
  .sendok{display:grid; justify-content:center; justify-items:start; gap:6px}   /* nem max-content: az a rács oszlopát is kiszélesítené */
}