/* KUBIK landing — design system (tokens + komponensek) + oldalstílus */

/* ---- tokens/fonts.css ---- */
/* Archivo (Google Fonts, OFL) — változó betűtípus, a rendszer csak 400 / 500 / 600 súlyt használ. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/Archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 600;font-display:swap;src:url('../fonts/Archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* ---- tokens/colors.css ---- */
/* KUBIK színek — minden szín pontosan egy dolgot csinál */
:root{
  /* Alapértékek */
  --kb-grafit:#1F1D1A;   /* szöveg, gomb háttere, ikonvonal */
  --kb-feher:#FFFFFF;    /* oldal, kártya, űrlapmező */
  --kb-vonal:#E2E0DC;    /* KIZÁRÓLAG hajszálvonal — soha nem kitöltés */
  --kb-melyzold:#2F5D50; /* aktív / kiválasztott állapot, link, lépésszám */
  --kb-rez:#B3714E;      /* egyetlen hangsúly oldalanként */
  --kb-szoveg-2:#5A5651; /* másodlagos szöveg */
  --kb-szoveg-3:#8A857E; /* halvány kiegészítő szöveg */

  /* Szemantikus aliasok */
  --text-primary:var(--kb-grafit);
  --text-secondary:var(--kb-szoveg-2);
  --text-muted:var(--kb-szoveg-3);
  --text-on-dark:var(--kb-feher);
  --text-link:var(--kb-melyzold);
  --text-accent:var(--kb-rez);

  --surface-page:var(--kb-feher);
  --surface-card:var(--kb-feher);
  --surface-field:var(--kb-feher);
  --surface-dark:var(--kb-grafit);       /* sötét sáv — mindig szemcsével */

  --line-hair:var(--kb-vonal);           /* keret, elválasztó, mezőszegély */
  --line-strong:var(--kb-grafit);        /* dupla vonal, sarokjel, másodlagos gomb kerete */

  --action-bg:var(--kb-grafit);
  --action-fg:var(--kb-feher);
  --state-active:var(--kb-melyzold);
  --state-selected:var(--kb-melyzold);
  --state-focus:var(--kb-melyzold);
  --state-disabled-fg:var(--kb-szoveg-3);
  --state-disabled-line:var(--kb-vonal);

  --accent-once:var(--kb-rez);
}


/* ---- tokens/typography.css ---- */
:root{
  --font-sans:'Archivo',system-ui,sans-serif;
  --font-body:var(--font-sans);
  --font-display:var(--font-sans);

  /* Három súly és semmi több */
  --fw-heading:600;/* @kind font */  /* címsorok */
  --fw-medium:500;/* @kind font */   /* gombfelirat, címke, kiemelt sor, Címsor 3 */
  --fw-regular:400;/* @kind font */  /* futó szöveg */

  /* Méretskála (arculati alaplap) */
  --fs-h1:48px; --lh-h1:1.05;/* @kind font */ --ls-h1:-0.02em;/* @kind font */
  --fs-h2:32px; --lh-h2:1.15;/* @kind font */ --ls-h2:-0.01em;/* @kind font */
  --fs-h3:22px; --lh-h3:1.30;/* @kind font */ --ls-h3:0;/* @kind font */
  --fs-body:17px; --lh-body:1.60;/* @kind font */
  --fs-small:14px; --lh-small:1.50;/* @kind font */
  --fs-label:12px; --lh-label:1.00;/* @kind font */ --ls-label:0.16em;/* @kind font */
  --fs-button:17px;

  /* Szemantikus */
  --type-h1:var(--fw-heading) var(--fs-h1)/var(--lh-h1) var(--font-sans);
  --type-h2:var(--fw-heading) var(--fs-h2)/var(--lh-h2) var(--font-sans);
  --type-h3:var(--fw-medium) var(--fs-h3)/var(--lh-h3) var(--font-sans);
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  --type-small:var(--fw-regular) var(--fs-small)/var(--lh-small) var(--font-sans);
  --type-label:var(--fw-medium) var(--fs-label)/var(--lh-label) var(--font-sans);
}


/* ---- tokens/spacing.css ---- */
:root{
  --unit:8px;
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:40px; --space-5:64px; --space-6:96px;

  --content-max:1120px;
  --grid-cols:12;/* @kind other */
  --grid-gutter:24px;
  --mobile-base:390px;

  --tap-min:44px;      /* minden kattintható elem */
  --button-h:56px;     /* gomb legalább 56 px */
  --field-h:44px;      /* mező (alaplap) */
  --field-h-lg:56px;   /* mező gomb mellé */

  --radius-button:4px;
  --radius-card:8px;
  --radius-none:0;
}


/* ---- tokens/surfaces.css ---- */
/* Vonal, textúra, fókusz. Nincs árnyék — egyetlen kivétel a fókuszgyűrű. */
:root{
  --line-w:1px;
  --border-hair:1px solid var(--kb-vonal);
  --border-strong:1px solid var(--kb-grafit);

  --focus-ring-w:2px;
  --focus-ring-offset:2px;
  --focus-ring:2px solid var(--kb-melyzold);

  --shadow-none:none;

  /* Mérőléc: 1 px függőleges osztás 6 px-enként, minden ötödik hosszabb, 42% */
  --ruler-color:rgba(31,29,26,.42);
  --ruler-pitch:6px;
  --ruler-h:14px;
  --ruler-bg:
    repeating-linear-gradient(90deg,var(--ruler-color) 0 1px,transparent 1px 30px) left bottom/100% 14px no-repeat,
    repeating-linear-gradient(90deg,var(--ruler-color) 0 1px,transparent 1px 6px) left bottom/100% 7px no-repeat,
    linear-gradient(var(--ruler-color),var(--ruler-color)) left bottom/100% 1px no-repeat;

  /* Pontsor: 1 px, 2 / 6 osztás */
  --dots-bg:repeating-linear-gradient(90deg,var(--kb-grafit) 0 2px,transparent 2px 8px) left center/100% 1px no-repeat;

  /* Ferde vonalkázás — üres állapot: 45°, 6 px osztás */
  --hatch-bg:repeating-linear-gradient(45deg,var(--kb-vonal) 0 1px,transparent 1px 6px);

  /* Rács — 8 px, nagyon halvány háttér */
  --grid-bg:
    linear-gradient(90deg,rgba(226,224,220,.6) 1px,transparent 1px) 0 0/8px 8px,
    linear-gradient(rgba(226,224,220,.6) 1px,transparent 1px) 0 0/8px 8px;

  /* Szemcse — zaj ~3%, nagy egyszínű felületre */
  --grain-url:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");/* @kind other */
  --grain-opacity-light:.035;/* @kind other */
  --grain-opacity-dark:.08;/* @kind other */

  --corner-mark-arm:16px;

  --ease:cubic-bezier(.2,0,0,1);/* @kind other */
  --dur-fast:120ms;/* @kind other */
  --dur:200ms;/* @kind other */

}


/* ---- tokens/base.css ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p{margin:0}
h1,.kb-h1{font:var(--type-h1);letter-spacing:var(--ls-h1);text-wrap:balance}
h2,.kb-h2{font:var(--type-h2);letter-spacing:var(--ls-h2);text-wrap:balance}
h3,.kb-h3{font:var(--type-h3);letter-spacing:0}
p,.kb-body{font:var(--type-body);text-wrap:pretty}
.kb-small{font:var(--type-small)}
.kb-label{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary)}
.kb-secondary{color:var(--text-secondary)}
.kb-muted{color:var(--text-muted)}
.kb-accent{color:var(--accent-once)}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:active{color:var(--kb-grafit)}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
img{display:block;max-width:100%}
.kb-container{max-width:calc(var(--content-max) + 2 * var(--space-3));margin:0 auto;padding:0 var(--space-3)}
.kb-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gutter)}

/* Grafikus elemek */
.kb-rule{border:0;border-top:var(--border-hair);margin:0;height:0}
.kb-rule-double{border:0;border-top:1px solid var(--kb-grafit);border-bottom:1px solid var(--kb-grafit);height:5px;margin:0}
.kb-dots{height:1px;background:var(--dots-bg)}
.kb-ruler{height:var(--ruler-h);background:var(--ruler-bg)}
.kb-hatch{background:var(--hatch-bg)}
.kb-gridbg{background:var(--grid-bg)}
.kb-grain{position:relative;isolation:isolate}
.kb-grain::after{content:"";position:absolute;inset:0;background:var(--grain-url);opacity:var(--grain-opacity-light);mix-blend-mode:multiply;pointer-events:none;z-index:-1}
.kb-dark{background:var(--surface-dark);color:var(--text-on-dark)}
.kb-dark.kb-grain::after{opacity:var(--grain-opacity-dark);mix-blend-mode:screen;z-index:0}
.kb-dark.kb-grain>*{position:relative;z-index:1}
.kb-corners{background:
 linear-gradient(var(--kb-grafit),var(--kb-grafit)) top left/16px 1px no-repeat,
 linear-gradient(var(--kb-grafit),var(--kb-grafit)) top left/1px 16px no-repeat,
 linear-gradient(var(--kb-grafit),var(--kb-grafit)) top right/16px 1px no-repeat,
 linear-gradient(var(--kb-grafit),var(--kb-grafit)) top right/1px 16px no-repeat,
 linear-gradient(var(--kb-grafit),var(--kb-grafit)) bottom left/16px 1px no-repeat,
 linear-gradient(var(--kb-grafit),var(--kb-grafit)) bottom left/1px 16px no-repeat,
 linear-gradient(var(--kb-grafit),var(--kb-grafit)) bottom right/16px 1px no-repeat,
 linear-gradient(var(--kb-grafit),var(--kb-grafit)) bottom right/1px 16px no-repeat,
 var(--surface-card)}

/* Anyagtextúrák — nagy kivágás, sosem ismétlődő minta, sosem a fő szöveg alatt */
.kb-tex{background-size:cover;background-position:center;background-repeat:no-repeat}


/* ---- components/kubik.css ---- */
/* KUBIK komponens-stílusok. Öt állapot: alap, hover, fókusz, aktív, letiltott.
   A hover soha nem az egyetlen jelzés. Nincs árnyék, csak a fókuszgyűrű. */

.kb-icon{display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--kb-icon) center/contain no-repeat;mask:var(--kb-icon) center/contain no-repeat}

/* Gomb */
.kb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--button-h);padding:0 28px;border-radius:var(--radius-button);border:1px solid transparent;font:var(--fw-medium) var(--fs-button)/1 var(--font-sans);letter-spacing:0;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);-webkit-tap-highlight-color:transparent}
.kb-btn:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.kb-btn__label{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color var(--dur-fast) var(--ease)}
.kb-btn:hover .kb-btn__label{text-decoration-color:currentColor}
.kb-btn .kb-btn__trail{transition:transform var(--dur) var(--ease)}
.kb-btn:hover .kb-btn__trail{transform:translateX(3px)}
.kb-btn--sm{min-height:var(--tap-min);padding:0 18px;font-size:15px}
.kb-btn--block{display:flex;width:100%}
.kb-btn--primary{background:var(--action-bg);color:var(--action-fg);border-color:var(--action-bg)}
.kb-btn--primary:active,.kb-btn--primary.is-active{background:var(--state-active);border-color:var(--state-active)}
.kb-btn--secondary{background:var(--kb-feher);color:var(--kb-grafit);border-color:var(--kb-grafit)}
.kb-btn--secondary:active,.kb-btn--secondary.is-active{color:var(--state-active);border-color:var(--state-active)}
.kb-btn--text{background:none;color:var(--text-link);padding:0 4px;min-height:var(--tap-min)}
.kb-btn--text .kb-btn__label{text-decoration-color:currentColor}
.kb-btn--text:hover .kb-btn__label{text-decoration-thickness:2px}
.kb-btn--text:active{color:var(--kb-grafit)}
.kb-btn:disabled,.kb-btn[aria-disabled="true"]{background:var(--kb-feher);color:var(--state-disabled-fg);border-color:var(--state-disabled-line);cursor:not-allowed}
.kb-btn--text:disabled{border-color:transparent}
.kb-btn:disabled .kb-btn__label{text-decoration-color:transparent}
.kb-btn:disabled .kb-btn__trail{transform:none}

/* Ikon gomb */
.kb-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);padding:0;border:1px solid var(--kb-vonal);border-radius:var(--radius-button);background:var(--kb-feher);color:var(--kb-grafit);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.kb-iconbtn--bare{border-color:transparent}
.kb-iconbtn:hover{border-color:var(--kb-grafit)}
.kb-iconbtn:active,.kb-iconbtn.is-active{border-color:var(--state-active);color:var(--state-active)}
.kb-iconbtn:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.kb-iconbtn:disabled{color:var(--state-disabled-fg);border-color:var(--kb-vonal);cursor:not-allowed}

/* Mezők */
.kb-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.kb-field__label{font:var(--fw-medium) 15px/1.3 var(--font-sans);color:var(--kb-grafit)}
.kb-field__opt{font-weight:400;color:var(--text-muted)}
.kb-field__hint{font:var(--type-small);color:var(--text-secondary)}
.kb-field__error{display:flex;gap:6px;align-items:center;font:var(--fw-medium) 14px/1.4 var(--font-sans);color:var(--kb-grafit)}
.kb-input,.kb-select,.kb-textarea{width:100%;height:var(--field-h);padding:0 16px;border:1px solid var(--kb-vonal);border-radius:var(--radius-button);background:var(--surface-field);color:var(--kb-grafit);font:var(--fw-regular) 17px/1.3 var(--font-sans);transition:border-color var(--dur-fast) var(--ease);-webkit-appearance:none;appearance:none}
.kb-input--lg,.kb-select--lg{height:var(--field-h-lg)}
.kb-textarea{height:auto;min-height:120px;padding:12px 16px;line-height:1.5;resize:vertical}
.kb-input::placeholder,.kb-textarea::placeholder{color:var(--text-muted)}
.kb-input:hover,.kb-select:hover,.kb-textarea:hover{border-color:var(--text-muted)}
.kb-input:focus,.kb-select:focus,.kb-textarea:focus{outline:none;border-color:var(--kb-melyzold)}
.kb-input:focus-visible,.kb-select:focus-visible,.kb-textarea:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.kb-input[aria-invalid="true"],.kb-select[aria-invalid="true"],.kb-textarea[aria-invalid="true"]{border-color:var(--kb-grafit)}
.kb-input:disabled,.kb-select:disabled,.kb-textarea:disabled{color:var(--state-disabled-fg);background:var(--hatch-bg),var(--kb-feher);cursor:not-allowed;border-color:var(--kb-vonal)}
.kb-field--disabled .kb-field__label{color:var(--state-disabled-fg)}
.kb-select-wrap{position:relative}
.kb-select{padding-right:48px;cursor:pointer}
.kb-select-wrap .kb-icon{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--kb-grafit)}

/* Jelölőnégyzet és rádió */
.kb-check{display:inline-flex;align-items:center;gap:12px;min-height:var(--tap-min);cursor:pointer;font:var(--type-body);color:var(--kb-grafit)}
.kb-check input{-webkit-appearance:none;appearance:none;margin:0;flex:none;width:22px;height:22px;border:1px solid var(--kb-grafit);background:var(--kb-feher) center/14px no-repeat;border-radius:4px;cursor:pointer;transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.kb-check input[type="radio"]{border-radius:50%;background-size:0}
.kb-check:hover input{border-color:var(--kb-melyzold)}
.kb-check input:checked{background-color:var(--kb-melyzold);border-color:var(--kb-melyzold);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")}
.kb-check input[type="radio"]:checked{background:var(--kb-feher);border-color:var(--kb-melyzold);box-shadow:none;background-image:radial-gradient(circle,var(--kb-melyzold) 0 5px,transparent 5.5px)}
.kb-check input:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.kb-check input:disabled{border-color:var(--kb-vonal);cursor:not-allowed}
.kb-check input:disabled:checked{background-color:var(--kb-vonal)}
.kb-check--disabled{color:var(--state-disabled-fg);cursor:not-allowed}

/* Kártya */
.kb-card{background:var(--surface-card);border:var(--border-hair);border-radius:var(--radius-card);padding:var(--space-3);display:flex;flex-direction:column;gap:12px;min-width:0}
.kb-card--corners{border-radius:0;padding:var(--space-3) var(--space-4)}
.kb-card--flush{padding:0;overflow:hidden}
.kb-card__strip{height:14px;border-radius:2px}
a.kb-card,button.kb-card{text-align:left;color:inherit;text-decoration:none;cursor:pointer;font:inherit;transition:border-color var(--dur-fast) var(--ease)}
a.kb-card:hover,button.kb-card:hover{border-color:var(--kb-grafit)}
a.kb-card:focus-visible,button.kb-card:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}

/* Választókártya */
.kb-choice{position:relative;display:flex;flex-direction:column;gap:12px;padding:8px 8px 16px;background:var(--kb-feher);border:1px solid var(--kb-vonal);border-radius:var(--radius-card);text-align:left;cursor:pointer;font:inherit;color:var(--kb-grafit);min-height:var(--tap-min);transition:border-color var(--dur-fast) var(--ease)}
.kb-choice:hover{border-color:var(--kb-grafit)}
.kb-choice:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.kb-choice[aria-checked="true"]{border-color:var(--kb-melyzold);outline:1px solid var(--kb-melyzold);outline-offset:-2px}
.kb-choice[aria-checked="true"]:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.kb-choice:disabled{cursor:not-allowed;color:var(--state-disabled-fg);border-color:var(--kb-vonal)}
.kb-choice:disabled img{opacity:.5}
.kb-choice__img{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:4px}
.kb-choice__body{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 8px}
.kb-choice__title{font:var(--fw-medium) 17px/1.3 var(--font-sans)}
.kb-choice[aria-checked="true"] .kb-choice__title{color:var(--kb-melyzold)}
.kb-choice__desc{font:var(--type-small);color:var(--text-secondary);margin-top:4px}
.kb-choice__mark{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--kb-vonal);display:flex;align-items:center;justify-content:center;color:var(--kb-feher)}
.kb-choice[aria-checked="true"] .kb-choice__mark{background:var(--kb-melyzold);border-color:var(--kb-melyzold)}

/* Fotókeret */
.kb-photo{margin:0;border:var(--border-hair);border-radius:var(--radius-card);padding:8px;background:var(--kb-feher);display:flex;flex-direction:column;gap:0;min-width:0}
.kb-photo img{width:100%;object-fit:cover;border-radius:4px}
.kb-photo figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:12px;padding:10px 4px 2px;border-top:var(--border-hair);font:var(--type-small);color:var(--text-secondary)}

/* Címke */
.kb-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--kb-vonal);border-radius:var(--radius-button);font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.kb-badge--active{border-color:var(--kb-melyzold);color:var(--kb-melyzold)}
.kb-badge--strong{border-color:var(--kb-grafit);color:var(--kb-grafit)}
.kb-badge--accent{border-color:var(--kb-rez);color:var(--kb-rez)}

/* Fülek */
.kb-tabs{display:flex;gap:0;border-bottom:var(--border-hair);overflow-x:auto;scrollbar-width:none}
.kb-tab{position:relative;min-height:var(--tap-min);padding:0 16px;border:0;background:none;font:var(--fw-regular) 16px/1 var(--font-sans);color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.kb-tab::after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:2px;background:transparent}
.kb-tab:hover{color:var(--kb-grafit)}
.kb-tab:hover::after{background:var(--kb-vonal)}
.kb-tab[aria-selected="true"]{color:var(--kb-melyzold);font-weight:500}
.kb-tab[aria-selected="true"]::after{background:var(--kb-melyzold)}
.kb-tab:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
.kb-tab:disabled{color:var(--state-disabled-fg);cursor:not-allowed}

/* Lépések */
.kb-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-2);list-style:none;margin:0;padding:0}
.kb-steps--vertical{grid-auto-flow:row;gap:0}
.kb-step{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--kb-vonal);position:relative}
.kb-step::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--kb-melyzold);transition:width var(--dur) var(--ease)}
.kb-step--done::before,.kb-step--current::before{width:100%}
.kb-step__num{display:flex;align-items:center;gap:8px;font:var(--fw-medium) 14px/1 var(--font-sans);letter-spacing:.04em;color:var(--kb-melyzold);font-variant-numeric:tabular-nums}
.kb-step--upcoming .kb-step__num{color:var(--text-muted)}
.kb-step__title{font:var(--fw-medium) 16px/1.3 var(--font-sans);color:var(--kb-grafit)}
.kb-step--upcoming .kb-step__title{color:var(--text-secondary)}
.kb-step__desc{font:var(--type-small);color:var(--text-secondary)}
.kb-steps--vertical .kb-step{flex-direction:row;gap:var(--space-3);padding:var(--space-3) 0}
.kb-steps--vertical .kb-step::before{display:none}
.kb-steps--vertical .kb-step__num{font:var(--fw-heading) 32px/1 var(--font-sans);letter-spacing:-0.01em;min-width:56px}

/* Párbeszédablak */
.kb-dialog-backdrop{position:fixed;inset:0;background:rgba(31,29,26,.56);display:flex;align-items:center;justify-content:center;padding:var(--space-3);z-index:100}
.kb-dialog{position:relative;width:100%;max-width:520px;background:var(--kb-feher);border:1px solid var(--kb-vonal);border-radius:var(--radius-card);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.kb-dialog__close{position:absolute;top:12px;right:12px}
.kb-dialog__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--space-2)}

/* Elválasztó */
.kb-divider{border:0;margin:0}
.kb-divider--hair{border-top:1px solid var(--kb-vonal)}
.kb-divider--double{height:5px;border-top:1px solid var(--kb-grafit);border-bottom:1px solid var(--kb-grafit)}
.kb-divider--dots{height:1px;background:var(--dots-bg)}
.kb-divider--ruler{height:var(--ruler-h);background:var(--ruler-bg)}


/* ---- oldal ---- */
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:#fff}
a:not(.kb-btn){color:var(--kb-melyzold)}
a:not(.kb-btn):hover{color:var(--kb-grafit)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-120px;z-index:50;display:flex;align-items:center;min-height:44px;padding:0 16px;background:#fff;border:1px solid var(--kb-grafit);border-radius:4px;color:var(--kb-grafit)!important}
.skip:focus{top:12px}
.wrap{max-width:1168px;margin:0 auto;padding:0 24px;box-sizing:border-box}
.sec{padding-top:40px;padding-bottom:40px}
.sec--line{border-top:1px solid var(--kb-vonal)}
.intro{max-width:660px;display:flex;flex-direction:column;gap:16px}
.lead{color:var(--kb-szoveg-2)}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico--16{width:16px;height:16px}
.cta-row{display:flex;margin-top:40px}
.cta-row .kb-btn{width:100%}
.todo{padding:4px 8px;background:var(--hatch-bg);color:var(--kb-szoveg-2)}
.kb-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:4px}

/* fejléc */
.site-head{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--kb-vonal)}
.site-head .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo-full{display:none}
.logo-mark{display:block;height:24px;width:auto}
@media (max-width:359px){.site-head .wrap{padding:0 16px}.site-head .kb-btn--sm{padding:0 12px;font-size:14px}}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.hero__spacer{grid-area:1/1;width:100%;aspect-ratio:4/5;max-height:calc(100vh - 64px);max-height:calc(100svh - 64px)}
.hero__pic{position:absolute;inset:0;display:block}
.hero__pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.hero__text{grid-area:1/1;align-self:start;position:relative;z-index:1;display:flex;flex-direction:column;gap:16px;margin:16px;padding:24px 20px;max-width:440px;box-sizing:border-box;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:8px}
.hero__label{color:var(--kb-grafit);text-align:center}
.hero h1{font:600 36px/1.05 var(--font-sans);letter-spacing:-.02em;margin:0;text-align:center;text-wrap:balance}
.hero__sub{margin:0;color:var(--kb-grafit)}
.hero__cta{display:flex}
.hero__cta .kb-btn{width:100%}
.facts{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:24px 0;border-bottom:1px solid var(--kb-vonal)}
.facts p{margin:0;max-width:520px}
.facts strong{font-weight:500}

/* 2 — felmérés */
.sec2-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:40px;align-items:start}
.points{display:flex;flex-direction:column;gap:16px}
.points h3,.points p{margin:0}
.points .kb-card p{color:var(--kb-szoveg-2)}
.not-box{padding:16px 24px 0;display:flex;flex-direction:column;gap:8px;color:var(--kb-szoveg-2)}
.not-box .kb-label{color:var(--kb-szoveg-3)}
.details{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}

/* 3 — lépések */
.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.steps .kb-step{gap:12px}
.step__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.step__head .kb-label{color:var(--kb-grafit)}
.step__body{display:flex;flex-direction:column;gap:6px}
.step__body .kb-step__title{font-size:17px}

/* 4 — típusok */
.types{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:24px;margin-top:40px}
.types .kb-card img.type__photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.type__body{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:16px 24px 24px;align-items:start}
.type__diagram{display:block;width:72px;height:72px;border:1px solid var(--kb-vonal);border-radius:4px;box-sizing:border-box}
.type__body h3,.type__body p{margin:0}
.type__body p{color:var(--kb-szoveg-2);margin-top:6px}

/* referencia-sáv */
.refs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.refs-nav{display:flex;gap:8px}
.strip{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:24px;padding:40px 24px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--kb-vonal) transparent}
.strip::after{content:"";flex:0 0 1px}
.strip:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
.ref{flex:none;display:flex;flex-direction:column;gap:12px;scroll-snap-align:start}
.ref__pair{display:flex;gap:16px;align-items:flex-start}
.ref__main{width:280px;flex:none}
.ref__det{width:200px;flex:none}

/* 5 — előtte-utána */
.pairs{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.ba{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/3;--pos:50%;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ba img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;border-radius:0;aspect-ratio:auto}
.ba__after{position:absolute;inset:0}
.ba.is-ready{cursor:ew-resize}
.ba.is-ready .ba__after{clip-path:inset(0 0 0 var(--pos))}
.ba__tag{position:absolute;top:16px;background:#fff}
.ba__tag--l{left:16px}.ba__tag--r{right:16px}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.ba__handle{display:none;position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.ba.is-ready .ba__handle{display:block}
.ba__knob{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;border:1px solid var(--kb-grafit);display:flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--kb-grafit)}
.ba input:focus-visible ~ .ba__handle .ba__knob{outline:var(--focus-ring);outline-offset:2px}

/* 6 — ár */
.price-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 64px;align-items:start}
.price-intro{display:flex;flex-direction:column;gap:16px;max-width:660px}
.price-intro p{margin:0}
.rez-mark{width:40px;height:2px;background:var(--kb-rez)}
.price-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px 40px}
.price-cols h3{margin:0 0 8px}
.price-cols ul{list-style:none;margin:0;padding:0}
.price-cols li{padding:12px 0;border-top:1px solid var(--kb-vonal)}
.price-q{display:flex;flex-direction:column;gap:12px;max-width:660px;padding-top:24px;border-top:1px solid var(--kb-grafit);margin-top:40px}
.price-q h3,.price-q p{margin:0}
.price-q p{color:var(--kb-szoveg-2)}
.price-q .cta-row{margin-top:12px}

/* 7 — űrlap */
.form-sec{padding:40px 24px}
.form-grid{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:40px 64px;align-items:start}
.form-intro{display:flex;flex-direction:column;gap:16px;max-width:520px;color:#fff}
.form-intro .kb-label,.form-intro h2,.form-intro p{color:#fff;margin:0}
.form-intro ul{list-style:none;margin:16px 0 0;padding:0}
.form-intro li{padding:12px 0;border-top:1px solid rgba(255,255,255,.3)}
.form-intro li:last-child{border-bottom:1px solid rgba(255,255,255,.3)}
.form-panel{background:#fff;color:var(--kb-grafit);border-radius:8px;overflow:hidden;max-width:560px;width:100%}
.form-panel__strip{height:14px;background:url('../img/texturak/tolgy-vilagos.webp') center/cover no-repeat}
.form-panel__body{padding:24px}
.form{display:flex;flex-direction:column;gap:20px}
.form h3{margin:0}
.form fieldset{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:20px}
.form__alert{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border:1px solid var(--kb-grafit);border-radius:4px;font:var(--fw-medium) 14px/1.5 var(--font-sans)}
.form__alert[hidden],.kb-field__error[hidden],.form__success[hidden],.form[hidden]{display:none}
.form__status{margin:0;color:var(--kb-szoveg-2);min-height:21px}
.select-ico{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--kb-grafit)}
.kb-check{align-items:flex-start;padding-top:10px}
.kb-check input{margin-top:1px}
.kb-check span{font-size:15px;line-height:1.5}
.link-tap{display:inline-flex;align-items:center;min-height:44px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__success{display:flex;flex-direction:column;gap:16px;padding:8px 0}
.form__success:focus{outline:none}
.form__success h3,.form__success p{margin:0}
.form__success .ico{width:32px;height:32px;color:var(--kb-melyzold)}
.form__success .kb-small{color:var(--kb-szoveg-2)}

/* lábléc */
.site-foot{padding-top:40px;padding-bottom:48px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:24px;padding-top:40px}
.foot-col{display:flex;flex-direction:column;gap:8px}
.foot-col--brand{gap:16px}
.foot-col p{margin:0;color:var(--kb-szoveg-2);max-width:320px}
.foot-note{margin:32px 0 0;color:var(--kb-szoveg-2);max-width:660px}

@media (min-width:768px){
  .sec{padding-top:64px;padding-bottom:64px}
  .cta-row .kb-btn,.hero__cta .kb-btn{width:auto}
  .site-head .wrap{height:72px}
  .logo-full{display:block;height:40px;width:auto}
  .logo-mark{display:none}
  .hero__spacer{aspect-ratio:16/10;max-height:calc(100vh - 72px);max-height:calc(100svh - 72px)}
  .hero__pic img{object-position:left center}
  .hero__text{align-self:center;margin:40px 0 40px 6%;padding:32px}
  .hero h1{font-size:44px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .details{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .strip{gap:40px}
  .ref__main{width:520px}
  .ref__det{width:280px;margin-top:96px}
  .pairs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pairs>:last-child{grid-column:1/-1}
  .form-sec{padding:64px 24px}
  .form-panel__body{padding:32px 40px 24px}
}
@media (min-width:1200px){
  .hero__spacer{aspect-ratio:21/9}
  .hero__text{margin:0 0 0 9.5%;width:26.5%;min-width:300px;max-width:none;padding:40px 0;gap:24px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:0}
  .hero h1{font-size:clamp(34px,2.9vw,48px)}
  .sec2-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .pairs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pairs>:last-child{grid-column:auto}
  .price-grid{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .form-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
}
@media print{.site-head{position:static}.strip{overflow:visible;flex-wrap:wrap}}