/* colors.css */
/* Minden szín pontosan egy dolgot csinál, és soha nem csinál mást. */
:root{
/* alap */
--grafit:#1F1D1A;--feher:#FFFFFF;--vonal:#E2E0DC;--melyzold:#2F5D50;--rez:#B3714E;
--szoveg-masodlagos:#5A5651;--szoveg-halvany:#8A857E;
/* származtatott — csak állapotokhoz, sosem új arculati szín */
--grafit-hover:#332F2A;--grafit-active:#12110F;--melyzold-hover:#274E43;--melyzold-halvany:#EDF1EF;
--vakolat:#F3F1ED;
/* szemantikus: szöveg */
--text-1:var(--grafit);--text-2:var(--szoveg-masodlagos);--text-3:var(--szoveg-halvany);
--text-invert:var(--feher);--text-link:var(--melyzold);--text-accent:var(--rez);
--text-disabled:#B5B1AB;
/* szemantikus: felület */
--surface-page:var(--feher);--surface-card:var(--feher);--surface-field:var(--feher);
--surface-dark:var(--grafit);--surface-quiet:var(--vakolat);--surface-selected:var(--melyzold-halvany);
--surface-disabled:#F6F5F3;
/* szemantikus: vonal — KIZÁRÓLAG 1 px-es vonalként, sosem kitöltés */
--border-hairline:var(--vonal);--border-strong:var(--grafit);--border-active:var(--melyzold);
--border-field:var(--vonal);--border-field-hover:#C9C6C0;
/* szemantikus: interakció */
--action-fill:var(--grafit);--action-fill-hover:var(--grafit-hover);--action-fill-active:var(--grafit-active);
--action-on-fill:var(--feher);--focus-ring:var(--melyzold);
/* akcentus — egy oldalon egyszer */
--accent:var(--rez);
}


/* typography.css */
/* Méretskála az arculati alaplapról. px értékek, nem kerekítve. */
:root{
--fs-h1:48px;--lh-h1:1.05; /* @kind other */--ls-h1:-0.02em; /* @kind other */--fw-h1:600; /* @kind font */
--fs-h2:32px;--lh-h2:1.15; /* @kind other */--ls-h2:-0.01em; /* @kind other */--fw-h2:600; /* @kind font */
--fs-h3:22px;--lh-h3:1.30; /* @kind other */--ls-h3:0; /* @kind other */--fw-h3:500; /* @kind font */
--fs-body:17px;--lh-body:1.60; /* @kind other */--ls-body:0; /* @kind other */--fw-body:400; /* @kind font */
--fs-small:14px;--lh-small:1.50; /* @kind other */--ls-small:0; /* @kind other */--fw-small:400; /* @kind font */
--fs-label:12px;--lh-label:1.00; /* @kind other */--ls-label:0.16em; /* @kind other */--fw-label:500; /* @kind font */
--fw-regular:400; /* @kind font */--fw-medium:500; /* @kind font */--fw-semibold:600; /* @kind font */
--measure:64ch; /* @kind other */
}
.kb-h1{font:var(--fw-h1) var(--fs-h1)/var(--lh-h1) var(--font-core);letter-spacing:var(--ls-h1);color:var(--text-1);margin:0}
.kb-h2{font:var(--fw-h2) var(--fs-h2)/var(--lh-h2) var(--font-core);letter-spacing:var(--ls-h2);color:var(--text-1);margin:0}
.kb-h3{font:var(--fw-h3) var(--fs-h3)/var(--lh-h3) var(--font-core);color:var(--text-1);margin:0}
.kb-body{font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-core);color:var(--text-1);margin:0}
.kb-small{font:var(--fw-small) var(--fs-small)/var(--lh-small) var(--font-core);color:var(--text-2);margin:0}
.kb-label{font:var(--fw-label) var(--fs-label)/var(--lh-label) var(--font-core);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-3);margin:0}


/* spacing.css */
/* Alapegység 8 px. A térközlétra nem folytonos: 8 · 16 · 24 · 40 · 64 · 96. */
:root{
--unit:8px; /* @kind spacing */--space-1:8px;--space-2:16px;--space-3:24px;--space-4:40px;--space-5:64px;--space-6:96px;
--radius-button:4px;--radius-card:8px;--radius-field:4px;--radius-pill:999px;
--control-min:44px;--control-h:56px;--control-h-compact:44px;
--content-max:1120px;--grid-columns:12; /* @kind other */--grid-gutter:24px;--viewport-min:390px;
}


/* motion.css */
:root{
--ease:cubic-bezier(.2,0,0,1) /* @kind other */;
--dur-fast:120ms /* @kind other */;
--dur:180ms /* @kind other */;
--dur-slow:280ms /* @kind other */;
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important}}


/* base.css */
:root{color-scheme:light}
body{margin:0;background:var(--surface-page);color:var(--text-1);font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-core);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--text-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color var(--dur) var(--ease)}
a:hover{color:var(--grafit);text-decoration-thickness:1px}
a:focus-visible{outline:none;border-radius:2px;box-shadow:var(--shadow-focus)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
img{display:block;max-width:100%}


/* components.css */
/* Komponens-osztályok. Öt állapot mindenhol: alap, hover, fókusz, aktív, letiltott. */
.kb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--control-h);min-width:44px;padding:0 24px;border-radius:var(--radius-button);border:1px solid transparent;font:var(--fw-medium) 17px/1 var(--font-core);text-decoration:none;cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.kb-btn--compact{min-height:var(--control-h-compact);padding:0 16px;font-size:var(--fs-small)}
.kb-btn--primary{background:var(--action-fill);color:var(--action-on-fill);border-color:var(--action-fill)}
.kb-btn--primary:hover{background:var(--action-fill-hover);border-color:var(--action-fill-hover)}
.kb-btn--primary:active{background:var(--action-fill-active);border-color:var(--action-fill-active)}
.kb-btn--secondary{background:var(--feher);color:var(--text-1);border-color:var(--border-strong)}
.kb-btn--secondary:hover{background:var(--surface-quiet)}
.kb-btn--secondary:active{background:var(--vonal)}
.kb-btn--quiet{background:transparent;color:var(--text-1);border-color:var(--border-hairline)}
.kb-btn--quiet:hover{border-color:var(--border-strong)}
.kb-btn--quiet:active{background:var(--surface-quiet)}
.kb-btn--accent{background:var(--accent);color:var(--feher);border-color:var(--accent)}
.kb-btn--accent:hover{background:#A2653F;border-color:#A2653F}
.kb-btn:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.kb-btn[disabled],.kb-btn[aria-disabled="true"]{background:var(--surface-disabled);color:var(--text-disabled);border-color:var(--vonal);cursor:not-allowed}
.kb-field{display:flex;flex-direction:column;gap:8px}
.kb-input{width:100%;min-height:var(--control-h-compact);padding:12px 14px;background:var(--surface-field);color:var(--text-1);border:1px solid var(--border-field);border-radius:var(--radius-field);font:var(--fw-regular) var(--fs-body)/1.4 var(--font-core);transition:border-color var(--dur) var(--ease)}
.kb-input::placeholder{color:var(--text-3)}
.kb-input:hover{border-color:var(--border-field-hover)}
.kb-input:focus{outline:none;border-color:var(--border-active);box-shadow:var(--shadow-focus)}
.kb-input[disabled]{background:var(--surface-disabled);color:var(--text-disabled);cursor:not-allowed}
.kb-input[aria-invalid="true"]{border-color:var(--accent)}
textarea.kb-input{min-height:120px;resize:vertical}
select.kb-input{appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--grafit) 50%),linear-gradient(135deg,var(--grafit) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.kb-choice{display:flex;gap:12px;align-items:flex-start;min-height:var(--control-min);padding:10px 0;cursor:pointer}
.kb-choice input{appearance:none;margin:0;flex:none;width:20px;height:20px;margin-top:2px;background:var(--feher);border:1px solid var(--border-strong);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.kb-choice input[type="radio"]{border-radius:50%}
.kb-choice input[type="checkbox"]{border-radius:2px}
.kb-choice:hover input{border-color:var(--border-active)}
.kb-choice input:checked{background:var(--melyzold);border-color:var(--melyzold)}
.kb-choice input[type="checkbox"]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M4.5 10.5 8.5 14.5 15.5 6'/%3E%3C/svg%3E")}
.kb-choice input[type="radio"]:checked{box-shadow:inset 0 0 0 3px var(--feher)}
.kb-choice input:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.kb-choice input[disabled]{background:var(--surface-disabled);border-color:var(--vonal)}
.kb-card{background:var(--surface-card);border:var(--hairline);border-radius:var(--radius-card);padding:24px}
.kb-card--selectable{cursor:pointer;transition:border-color var(--dur) var(--ease)}
.kb-card--selectable:hover{border-color:var(--border-field-hover)}
.kb-card--selected{border-color:var(--border-active);background:var(--surface-selected)}
.kb-card--selectable:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.kb-figure{margin:0}
.kb-figure img{border:var(--hairline);border-radius:2px;padding:0;width:100%;object-fit:cover}
.kb-figure figcaption{display:flex;justify-content:space-between;gap:16px;padding-top:8px;margin-top:8px;border-top:var(--hairline);font:var(--fw-regular) var(--fs-small)/1.5 var(--font-core);color:var(--text-2)}
.kb-step{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--border-active);color:var(--melyzold);font:var(--fw-medium) var(--fs-small)/1 var(--font-core);flex:none}
.kb-step--done{background:var(--melyzold);color:var(--feher)}
.kb-corner{position:relative}
.kb-corner::before,.kb-corner::after{content:"";position:absolute;width:var(--corner-arm);height:var(--corner-arm);border:1px solid var(--grafit);pointer-events:none}
.kb-corner::before{top:0;left:0;border-right:0;border-bottom:0}
.kb-corner::after{bottom:0;right:0;border-left:0;border-top:0}


/* lines.css */
/* Vonal és textúra — a fehér felületet ezek törik meg, sosem szín. */
:root{
--hairline:1px solid var(--border-hairline); /* @kind other */
--rule-double:linear-gradient(to bottom,var(--grafit) 0 1px,transparent 1px 4px,var(--grafit) 4px 5px); /* @kind other */
--corner-arm:16px;
--measure-tick:6px;--measure-opacity:0.42; /* @kind other */
--grain-opacity:0.03; /* @kind other */
--focus-ring-width:2px;--focus-ring-offset:2px;
--shadow-focus:0 0 0 var(--focus-ring-offset) var(--surface-page),0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring);
}
/* Mérőléc: 1 px-es függőleges osztások 6 px-enként, 42% átlátszósággal. */
.kb-measure{height:14px;opacity:var(--measure-opacity);background-image:repeating-linear-gradient(to right,var(--grafit) 0 1px,transparent 1px var(--measure-tick));background-position:bottom;background-repeat:repeat-x;background-size:auto 8px}
.kb-measure--tall{height:16px;background-image:repeating-linear-gradient(to right,var(--grafit) 0 1px,transparent 1px var(--measure-tick)),repeating-linear-gradient(to right,var(--grafit) 0 1px,transparent 1px calc(var(--measure-tick) * 5));background-size:auto 8px,auto 16px;background-position:bottom,bottom;background-repeat:repeat-x,repeat-x}
.kb-rule{border:0;border-top:var(--hairline);margin:0}
.kb-rule--dotted{border-top:1px dotted var(--border-hairline)}
.kb-hatch{background-image:repeating-linear-gradient(45deg,var(--vonal) 0 1px,transparent 1px 6px)}
.kb-grid8{background-image:repeating-linear-gradient(to right,var(--vonal) 0 1px,transparent 1px 8px),repeating-linear-gradient(to bottom,var(--vonal) 0 1px,transparent 1px 8px);opacity:.5}
.kb-grain{position:relative}
.kb-grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain-opacity);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url%28%23n%29'/%3E%3C/svg%3E")}


/* oldal */
:root { --font-core: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: var(--font-core); --font-display: var(--font-core); }
html, body { margin: 0; padding: 0; background: #FFFFFF; }
img { height: auto; }
[role="slider"] img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
a { color: #2F5D50; }
a:hover { color: #1F1D1A; }
*, *::before, *::after { box-sizing: border-box; }
.kb-btn { white-space: nowrap; }
@media (max-width: 1200px) {
  [data-hero-text] {
    left: 5% !important;
    transform: translateY(-50%) !important;
    width: clamp(280px, 88%, 420px) !important;
    padding: 24px !important;
    background: rgba(255, 255, 255, .30);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 8px;
  }
}
@media (max-width: 900px) {
  [data-nav-links] { display: none !important; }
}
@media (max-width: 620px) {
  header nav { display: none !important; }
}
@media (max-width: 860px) {
  [data-hero-img] { aspect-ratio: 4/5 !important; }
  [data-cols-2] { grid-template-columns: 1fr !important; gap: 40px !important; }
  [data-cols-4] { grid-template-columns: 1fr !important; }
  [data-cols-3] { grid-template-columns: 1fr !important; }
  [data-mobile-bar] { display: block !important; }
  [data-pair-side] { grid-template-columns: 1fr !important; }
  [data-page] { padding-bottom: 88px !important; }
}
@keyframes kubik-load { 0% { left: -35%; } 100% { left: 100%; } }
@keyframes kubik-breathe { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  figure { overflow: hidden; }
  figure > img, #elrendezesek div > img { will-change: transform; }
  figure:hover > img, #elrendezesek div:hover > img { animation: kubik-breathe 5.5s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; animation: none !important; } }