/* ============================================================
   Webiparos Ajánlatgép – termékoldal + élő demó
   Saját, önálló stíluslap (a GÚZ-demóhoz hasonlóan), a Webiparos
   design rendszerére építve: Space Grotesk + Montserrat,
   primary #315A7F, accent #C2410C, navy #0F172A.
   ============================================================ */

/* Az előtöltött betűk block módban: a szöveg rögtön a végleges betűvel jelenik meg, nincs csere és elmozdulás */
@font-face { font-family: 'Montserrat'; font-weight: 400; font-style: normal; font-display: block; src: url('/fonts/montserrat-v31-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 500; font-style: normal; font-display: block; src: url('/fonts/montserrat-v31-latin_latin-ext-500.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: block; src: url('/fonts/montserrat-v31-latin_latin-ext-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-style: normal; font-display: block; src: url('/fonts/montserrat-v31-latin_latin-ext-700.woff2') format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-style: normal; font-display: block; src: url('/fonts/space-grotesk-v22-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/space-grotesk-v22-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Space Grotesk'; font-weight: 700; font-style: normal; font-display: block; src: url('/fonts/space-grotesk-v22-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-style: normal; font-display: block; src: url('/fonts/space-grotesk-v22-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Méretre igazított tartalékbetű: amíg a webes betű tölt, nem ugrik a szöveg */
@font-face { font-family: 'Montserrat Fallback'; src: local('Arial'); ascent-override: 96.8%; descent-override: 25.1%; line-gap-override: 0%; size-adjust: 111%; }
@font-face { font-family: 'Space Grotesk Fallback'; src: local('Arial'); ascent-override: 98.4%; descent-override: 29.2%; line-gap-override: 0%; size-adjust: 109%; }

:root {
  --navy: #0F172A;
  --primary: #315A7F;
  --secondary: #60A5FA;
  --accent: #C2410C;
  --accent-sotet: #9A3412;
  --tinta: #0F172A;
  --szoveg: #334155;
  --halk: #64748B;
  --vonal: #E2E8F0;
  --halvany: #F3F5F7;
  --primary-mosas: #EAF0F5;
  --display: 'Space Grotesk', 'Space Grotesk Fallback', system-ui, sans-serif;
  --sans: 'Montserrat', 'Montserrat Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: 24px;
  /* a beágyazott űrlap (embed.js) címeinek betűtípusa */
  --ag-cim-betu: var(--display);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--szoveg); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); color: var(--tinta); margin: 0; letter-spacing: -0.02em; line-height: 1.12; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }
h3 { font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
strong, b { color: var(--tinta); font-weight: 600; }
.halk { color: var(--halk); font-weight: 400; }
code { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 0.85em; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { :root { --gutter: 16px; } }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 6px; }
.skip:focus { left: 8px; }

/* ---------- Felcím (eyebrow): vékony vonal + nagybetűs címke ---------- */
.felcim { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.felcim::before { content: ''; width: 32px; height: 1px; background: var(--primary); flex: none; }
.felcim span { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); }
.felcim--sotet::before { background: var(--accent); }
.felcim--sotet span { color: #FDBA74; }

/* ---------- Gombok ---------- */
.gomb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 26px; border-radius: 8px; border: 2px solid transparent; font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.gomb:active { transform: translateY(1px); }
.gomb:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.gomb--accent { background: var(--accent); color: #fff; }
.gomb--accent:hover { background: var(--accent-sotet); }
.gomb--szellem { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); color: #fff; }
.gomb--szellem:hover { background: rgba(255,255,255,.14); }
.gomb--sotet { background: var(--navy); color: #fff; }
.gomb--sotet:hover { background: var(--primary); }
.gomb--korvonal { background: transparent; border-color: var(--vonal); color: var(--tinta); }
.gomb--korvonal:hover { border-color: var(--tinta); }
.gomb--kicsi { padding: 10px 16px; font-size: 14px; }
.gomb--teljes { width: 100%; }
.gomb[disabled] { opacity: .75; cursor: progress; }

/* ---------- Fejléc ---------- */
.fejlec { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.fejlec.is-gorgetett { background: rgba(15, 23, 42, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.fejlec__sor { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.fejlec__logo { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.fejlec__logo img { width: 34px; height: 34px; filter: brightness(0) invert(1); }
.fejlec__nav { display: flex; gap: 28px; margin-left: auto; }
.fejlec__nav a { color: #CBD5E1; text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; }
.fejlec__nav a:hover { color: #fff; }
/* Nyelvváltó (HU / EN) */
.fejlec__nyelv { color: #CBD5E1; text-decoration: none; font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .08em; padding: 6px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; transition: color .2s, border-color .2s; }
.fejlec__nyelv:hover { color: #fff; border-color: rgba(255,255,255,.5); }
@media (max-width: 860px) { .fejlec__nav { display: none; } .fejlec__nyelv { margin-left: auto; } }
@media (max-width: 420px) { .fejlec__logo span { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--navy); color: #CBD5E1; padding: 132px 0 96px; overflow: hidden; }
.hero__fenyek { position: absolute; inset: 0; pointer-events: none; }
.hero__fenyek::before, .hero__fenyek::after { content: ''; position: absolute; border-radius: 50%; filter: blur(90px); }
.hero__fenyek::before { width: 520px; height: 520px; left: -160px; top: -120px; background: rgba(49, 90, 127, .35); }
.hero__fenyek::after { width: 420px; height: 420px; right: -120px; bottom: -160px; background: rgba(194, 65, 12, .14); }
.hero__racs { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); line-height: 1.06; margin-bottom: 24px; }
.hero__lede { font-size: 1.08rem; max-width: 34rem; margin-bottom: 32px; }
.hero__lede strong { color: #fff; }
.hero__gombok { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero__aprobetu { font-size: 13px; color: #94A3B8; }
@media (max-width: 960px) {
  .hero { padding: 112px 0 72px; }
  .hero__racs { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 560px) {
  .hero { padding: 100px 0 56px; }
  .hero h1 { font-size: 2.05rem; margin-bottom: 18px; }
  .hero__lede { font-size: 1rem; margin-bottom: 26px; }
  .hero__gombok { flex-direction: column; }
  .hero__gombok .gomb { width: 100%; }
  .zaro__gombok .gomb, .siker__gombok .gomb { width: 100%; }
  .fejlec__sor { height: 64px; }
  .gomb--kicsi { padding: 9px 13px; font-size: 13px; }
  h2 { font-size: 1.65rem; }
}

/* A termék kimenete: „nyugta” – tipográfiai dokumentum, nem kártya */
.nyugta { margin: 0; background: #fff; color: var(--szoveg); border-radius: 4px; padding: 28px 28px 22px; font-size: 14px; position: relative; }
.nyugta::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); border-radius: 4px 0 0 4px; }
.nyugta__fej { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--navy); }
.nyugta__ceg { font-family: var(--display); font-weight: 700; color: var(--tinta); font-size: 16px; }
.nyugta__meta { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--halk); margin-top: 4px; line-height: 1.5; }
.nyugta__meta--jobb { text-align: right; margin-top: 0; }
.nyugta__sorok { list-style: none; margin: 0; padding: 0; }
.nyugta__sorok li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--vonal); }
.nyugta__sorok span { display: flex; flex-direction: column; min-width: 0; }
.nyugta__sorok b { font-weight: 600; font-size: 14px; }
.nyugta__sorok i { font-style: normal; font-size: 12px; color: var(--halk); }
.nyugta__sorok em { font-style: normal; font-weight: 600; color: var(--tinta); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nyugta__tobb { color: var(--halk); font-size: 12px; justify-content: flex-start !important; }
.nyugta__osszeg { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 16px; }
.nyugta__osszeg span { font-size: 13px; font-weight: 600; color: var(--tinta); }
.nyugta__osszeg strong { font-family: var(--display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nyugta__lab { font-size: 11px; color: var(--halk); margin-top: 14px; }
@media (max-width: 480px) {
  .nyugta { padding: 22px 18px 18px 20px; }
  .nyugta__meta--jobb { display: none; }
  .nyugta__osszeg { flex-direction: column; gap: 2px; }
}

/* Hero-animáció: űrlap kitöltése → beérkező levél soronként → végösszeg felpörög (JS: ajanlatgep.js).
   JS nélkül és csökkentett mozgásnál a kész nyugta látszik. */
.nyugta__uj { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.agp__szinpad { display: grid; }
.agp__jelenet { grid-area: 1 / 1; min-width: 0; transition: opacity .45s ease, transform .6s var(--ease); }
.agp__jelenet--urlap { display: flex; flex-direction: column; opacity: 0; transform: translateY(-8px); pointer-events: none; }
.agp.is-urlap .agp__jelenet--urlap { opacity: 1; transform: none; }
.agp.is-urlap .agp__jelenet--level { opacity: 0; transform: translateY(10px); }
.agp.is-urlap .agp__jelenet--urlap, .agp:not(.is-urlap) .agp__jelenet--level { transition-delay: .35s; }
/* A <head> szkriptje jelzi (agp-mozog), hogy lesz animáció: az első rajzolástól az űrlap látszik, amíg a JS át nem veszi */
.agp-mozog .agp:not(.is-anim) .agp__jelenet--urlap { opacity: 1; transform: none; transition: none; }
.agp-mozog .agp:not(.is-anim) .agp__jelenet--level { opacity: 0; transform: translateY(10px); transition: none; }
.agp__kerdes { font-size: 13px; font-weight: 600; color: var(--tinta); margin: 16px 0 8px; }
.agp__mezo { display: flex; align-items: center; width: 10rem; height: 36px; line-height: 1; /* fix magasság: üresen és kitöltve ugyanakkora, nem mozdul a hero */ border: 1px solid #CBD5E1; border-radius: 6px; padding: 6px 10px; font-family: var(--display); font-weight: 600; color: var(--tinta); }
.agp__egyseg { margin-left: auto; color: var(--halk); font-family: var(--sans); font-weight: 500; font-size: 13px; }
.agp__kurzor { width: 1.5px; height: 1.05em; margin-left: 1px; background: var(--primary); opacity: 0; }
.agp.is-gepel .agp__kurzor { opacity: 1; animation: agp-villog 1s steps(1) infinite; }
@keyframes agp-villog { 50% { opacity: 0; } }
.agp__chipek { display: flex; flex-wrap: wrap; gap: 6px; }
.agp__chip { font-size: 12.5px; font-weight: 500; padding: 7px 12px; border: 1px solid #CBD5E1; border-radius: 6px; color: var(--tinta); transition: border-color .25s, background-color .25s, color .25s, box-shadow .25s; }
.agp__chip.is-on { border-color: var(--primary); background: var(--primary-mosas); color: var(--primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primary); }
.agp__gomb-hely { margin-top: auto; padding-top: 20px; }
.agp__gomb { display: inline-block; background: var(--primary); color: #fff; font-family: var(--display); font-weight: 700; font-size: 13px; border-radius: 6px; padding: 9px 16px; transition: transform .15s, background-color .2s; }
.agp__gomb.is-nyomva { transform: scale(.96); background: #274A69; }
.agp.is-anim .nyugta__uj, .agp.is-anim .nyugta__sorok li, .agp.is-anim .nyugta__osszeg { opacity: 0; transform: translateY(6px); transition: opacity .35s ease, transform .5s var(--ease); }
.agp.is-anim .is-be { opacity: 1 !important; transform: none !important; }

/* ---------- Szakaszok ---------- */
.szakasz { padding: 104px 0; }
.szakasz--feher { background: #fff; }
.szakasz--halvany { background: var(--halvany); }
.szakasz--sotet { background: var(--navy); color: #CBD5E1; }
.szakasz--sotet h2, .szakasz--sotet h3 { color: #fff; }
.szakasz__fej { max-width: 46rem; margin-bottom: 56px; }
@media (max-width: 640px) { .szakasz { padding: 72px 0; } .szakasz__fej { margin-bottom: 40px; } }

/* Hogyan működik – vízszintes idővonal (mobilon függőleges) */
.idovonal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; position: relative; }
.idovonal::before { content: ''; position: absolute; left: 7px; right: 0; top: 7px; height: 1px; background: var(--vonal); }
.idovonal li { position: relative; padding-top: 40px; }
.idovonal__pont { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--primary); background: #fff; }
.idovonal li:last-child .idovonal__pont { border-color: var(--accent); background: var(--accent); }
.idovonal h3 { margin-bottom: 10px; font-size: 1.35rem; }
.idovonal p { color: var(--szoveg); }
@media (max-width: 800px) {
  .idovonal { grid-template-columns: 1fr; gap: 32px; }
  .idovonal::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .idovonal li { padding: 0 0 0 40px; }
}

/* ---------- Próbáld ki (a demóoldalra visz) ---------- */
.probald { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.probald__szoveg h2 { margin-bottom: 18px; }
.probald__szoveg > p { margin-bottom: 28px; }
.probald__lepesek { list-style: none; counter-reset: lepes; margin: 0 0 32px; padding: 0; border-top: 1px solid #D5DDE5; }
.probald__lepesek li { counter-increment: lepes; display: grid; grid-template-columns: 32px 1fr; column-gap: 8px; padding: 14px 0; border-bottom: 1px solid #D5DDE5; }
.probald__lepesek li::before { content: counter(lepes); grid-row: span 2; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--accent); line-height: 1.5; }
.probald__lepesek b { font-size: 15px; }
.probald__lepesek span { font-size: 14px; color: var(--halk); }
@media (max-width: 960px) { .probald { grid-template-columns: 1fr; gap: 48px; } }

/* Előnézet: a demóoldal kicsinyített, nem interaktív képe böngészőkeretben */
.elonezet { display: block; text-decoration: none; color: inherit; }
.elonezet__ablak { background: #fff; border: 1px solid #D5DDE5; border-radius: 8px; overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease); max-height: 460px; position: relative; }
.elonezet:hover .elonezet__ablak { border-color: var(--primary); transform: translateY(-3px); }
.elonezet__ablak::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, rgba(243,245,247,0), var(--halvany)); }
.elonezet__sav { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F1F5F9; border-bottom: 1px solid var(--vonal); }
.elonezet__sav i { width: 9px; height: 9px; border-radius: 50%; background: #CBD5E1; }
.elonezet__sav span { margin-left: 10px; font-size: 11px; color: var(--halk); background: #fff; border-radius: 4px; padding: 3px 10px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elonezet__fejlec { display: flex; align-items: center; gap: 9px; padding: 14px 22px; border-bottom: 1px solid var(--vonal); font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--tinta); }
.elonezet__fejlec b { color: var(--accent); }
.elonezet__fejlec .festo-logo__jel i { width: 5px; height: 17px; }
.elonezet__fejlec .festo-logo__jel i:nth-child(2) { height: 14px; margin-top: 3px; }
.elonezet__fejlec .festo-logo__jel i:nth-child(3) { height: 11px; margin-top: 6px; }
.elonezet__tartalom { background: var(--halvany); padding: 22px 22px 0; }
.elonezet__felcim { font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
.elonezet__cim { font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.15; color: var(--tinta); margin-bottom: 18px; max-width: 18em; }
.elonezet__urlap { background: #fff; border: 1px solid var(--vonal); border-top: 3px solid var(--accent); border-radius: 5px; padding: 18px; }
.elonezet__legend { font-family: var(--display); font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--primary); padding-bottom: 6px; border-bottom: 2px solid var(--navy); margin-bottom: 12px; }
.elonezet__kerdes { font-size: 12px; font-weight: 600; color: var(--tinta); margin: 12px 0 7px; }
.elonezet__mezo { width: 110px; border: 1px solid #CBD5E1; border-radius: 5px; padding: 6px 10px; font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--tinta); display: flex; justify-content: space-between; }
.elonezet__mezo span { color: var(--halk); }
.elonezet__chipek { display: flex; flex-wrap: wrap; gap: 6px; }
.elonezet__chipek span { font-size: 11px; font-weight: 500; padding: 6px 10px; border: 1px solid #CBD5E1; border-radius: 5px; color: var(--tinta); }
.elonezet__chipek .is-valasztott { border-color: var(--primary); background: var(--primary-mosas); color: var(--primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primary); }

/* Űrlap */
.urlap fieldset { border: 0; margin: 0 0 36px; padding: 0; min-width: 0; }
.urlap legend { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--primary); padding: 0 0 10px; margin-bottom: 20px; width: 100%; border-bottom: 2px solid var(--navy); }
.mezo { margin-bottom: 22px; }
.mezo:last-child { margin-bottom: 0; }
.mezo > label, .mezo__cimke { display: block; font-weight: 600; color: var(--tinta); font-size: 15px; margin-bottom: 10px; line-height: 1.4; }
.mezo__sugo { font-size: 13px; color: var(--halk); margin-top: 8px; }
.mezo__hiba { font-size: 13px; font-weight: 600; color: var(--accent); margin-top: 6px; min-height: 0; }
.mezo__hiba:empty { display: none; }
.ketoszlop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.ketoszlop .mezo:last-child { margin-bottom: 22px; }
@media (max-width: 640px) { .ketoszlop { grid-template-columns: 1fr; } }

.urlap input[type="text"], .urlap input[type="email"], .urlap input[type="tel"], .urlap input[type="number"], .urlap select, .urlap textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--tinta); background: #fff; border: 1px solid #CBD5E1; border-radius: 8px; padding: 13px 14px; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none;
}
.urlap select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.urlap textarea { resize: vertical; min-height: 90px; }
.urlap input:focus, .urlap select:focus, .urlap textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(49, 90, 127, .18); }
.urlap .is-hibas input, .urlap input.is-hibas { border-color: var(--accent); }
.urlap input[type="number"]::-webkit-inner-spin-button, .urlap input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.urlap input[type="number"] { -moz-appearance: textfield; }

.bevitel-egyseg { position: relative; max-width: 220px; }
.bevitel-egyseg input { padding-right: 48px; font-family: var(--display); font-weight: 600; font-size: 18px; }
.bevitel-egyseg span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--halk); font-weight: 600; pointer-events: none; }

/* Választó „chipek” (rádiógombok) */
.chipek { display: flex; flex-wrap: wrap; gap: 8px; }
.chipek--oszlop { flex-direction: column; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 10px 16px; border: 1px solid #CBD5E1; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--tinta); background: #fff; transition: border-color .15s, background-color .15s, color .15s; line-height: 1.35; }
.chip small { font-size: 12px; color: var(--halk); font-weight: 400; }
.chip:hover span { border-color: var(--primary); }
.chip input:checked + span { border-color: var(--primary); background: var(--primary-mosas); color: var(--primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primary); }
.chip input:focus-visible + span { outline: 3px solid var(--secondary); outline-offset: 2px; }
.is-hibas .chip span { border-color: #FDBA74; }

/* Léptető (tapétázandó falak) */
.leptetos { display: inline-flex; align-items: stretch; border: 1px solid #CBD5E1; border-radius: 8px; overflow: hidden; }
.leptetos button { width: 52px; border: 0; background: var(--halvany); font-size: 22px; font-weight: 600; color: var(--tinta); cursor: pointer; transition: background-color .15s; }
.leptetos button:hover { background: var(--primary-mosas); }
.urlap .leptetos input { width: 72px; border: 0; border-radius: 0; text-align: center; font-family: var(--display); font-weight: 600; font-size: 18px; box-shadow: none; }

.mezo > .jelolo { font-weight: 400; margin-bottom: 0; }
[data-siker-azonosito] { white-space: nowrap; }
.jelolo { display: flex; gap: 12px; align-items: flex-start; font-size: 13px !important; line-height: 1.55; color: var(--szoveg); cursor: pointer; }
.jelolo input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--primary); }
.jelolo a { color: var(--primary); }

.csapda { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.urlap__kuldes { border-top: 1px solid var(--vonal); padding-top: 28px; }
.turnstile > div { margin-bottom: 16px; }
.urlap__allapot { font-size: 14px; margin-top: 14px; color: var(--halk); }
.urlap__allapot.is-hiba { color: var(--accent); font-weight: 600; }
.urlap__allapot:empty { display: none; }

/* Siker */
.siker { outline: none; }
.siker h3 { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem); margin-bottom: 16px; }
.siker p { margin-bottom: 12px; }
.siker__figyelem { color: var(--accent); font-weight: 600; }
.siker__gombok { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- A szaki oldala ---------- */
.szaki { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.szaki__szoveg h2 { margin-bottom: 20px; }
.szaki__szoveg > p { margin-bottom: 28px; }
.szaki__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.szaki__lista li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 15px; }
.szaki__lista b { color: #fff; }
@media (max-width: 1040px) { .szaki { grid-template-columns: 1fr; gap: 48px; } .szaki__szoveg { max-width: 46rem; } }

.tabla-keret { min-width: 0; scroll-margin-top: 96px; }
.tabla-ablak { background: #fff; border-radius: 6px; overflow: hidden; color: var(--tinta); }
.tabla-ablak__cim { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--vonal); font-size: 13px; }
.tabla-ablak__fajl { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabla-ablak__menu { font-size: 12px; font-weight: 600; color: var(--primary); background: var(--primary-mosas); padding: 4px 10px; border-radius: 4px; white-space: nowrap; }
.tabla-gorgeto { overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 300px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.tabla th { background: var(--navy); color: #fff; font-weight: 600; text-align: left; padding: 9px 12px; font-size: 12px; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--vonal); border-right: 1px solid #F1F5F9; color: var(--szoveg); }
.tabla .jobb { text-align: right; font-variant-numeric: tabular-nums; }
.tabla code { color: var(--primary); background: var(--primary-mosas); padding: 2px 6px; border-radius: 3px; }
.tabla__ar { font-weight: 600; color: var(--tinta) !important; background: #FFFBEB; }
.tabla__ertek { font-weight: 600; color: var(--tinta) !important; background: #FFFBEB; }
.tabla--beallitas td:first-child { font-weight: 600; color: var(--tinta); }
.tabla__uj td { background: #F8FAFC; }
@media (prefers-reduced-motion: no-preference) {
  .tabla__uj.is-friss td { animation: friss 2.4s var(--ease); }
}
@keyframes friss { 0% { background: #FEF3C7; } 100% { background: #F8FAFC; } }
.statusz { display: inline-block; padding: 3px 9px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.statusz--atnezes { background: #FEF3C7; color: #92400E; }
.statusz--elkuldve { background: #E3EAF1; color: var(--primary); }
.statusz--felhivva { background: #E0E7FF; color: #3730A3; }
.statusz--felmeres { background: #FFEDD5; color: var(--accent); }
.statusz--megrendelte { background: #DCFCE7; color: #166534; }
.tabla-ablak__fulek { display: flex; gap: 2px; padding: 0 8px; background: #F1F5F9; border-top: 1px solid var(--vonal); overflow-x: auto; }
.tabla-ablak__fulek button { font: inherit; font-size: 13px; font-weight: 500; color: var(--halk); background: transparent; border: 0; padding: 10px 16px; cursor: pointer; border-top: 2px solid transparent; white-space: nowrap; }
.tabla-ablak__fulek button[aria-selected="true"] { color: var(--primary); background: #fff; border-top-color: var(--primary); font-weight: 600; }
.tabla-ablak__fulek button:focus-visible { outline: 2px solid var(--secondary); outline-offset: -2px; }
/* Keskeny kijelzőn (és TikTok-felvételen) a lényeges oszlopok maradnak */
@media (max-width: 640px) {
  .tabla--erdeklodok th:nth-child(2), .tabla--erdeklodok td:nth-child(2),
  .tabla--erdeklodok th:nth-child(4), .tabla--erdeklodok td:nth-child(4),
  .tabla--erdeklodok th:nth-child(5), .tabla--erdeklodok td:nth-child(5),
  .tabla--tetelek th:nth-child(2), .tabla--tetelek td:nth-child(2),
  .tabla--tetelek th:nth-child(3), .tabla--tetelek td:nth-child(3),
  .tabla--tetelek th:nth-child(4), .tabla--tetelek td:nth-child(4) { display: none; }
  .tabla--kerdesek th:nth-child(3), .tabla--kerdesek td:nth-child(3),
  .tabla--kerdesek th:nth-child(4), .tabla--kerdesek td:nth-child(4) { display: none; }
  .tabla-gorgeto { min-height: 0; }
}
@media (max-width: 440px) {
  .tabla--erdeklodok th:nth-child(1), .tabla--erdeklodok td:nth-child(1) { display: none; }
  .tabla td, .tabla th { padding-left: 8px; padding-right: 8px; }
  .statusz { font-size: 11px; padding: 3px 7px; }
}
.tabla-keret__jegyzet { font-size: 12px; color: #94A3B8; margin-top: 12px; }

/* ---------- Előnyök: sorlista, vékony elválasztókkal ---------- */
.elonyok { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; border-top: 1px solid var(--vonal); }
.elony { padding: 32px 0; border-bottom: 1px solid var(--vonal); }
.elony h3 { margin-bottom: 10px; }
@media (max-width: 760px) { .elonyok { grid-template-columns: 1fr; } }

/* ---------- Így kerül a weboldaladra: három út, kártya nélkül ---------- */
.utak { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.ut { padding: 28px 0 36px; min-width: 0; border-top: 1px solid var(--vonal); }
.ut h3 { margin-bottom: 10px; }
.ut p { margin-bottom: 14px; }
.kodblokk { margin: 0 0 12px; background: var(--navy); color: #E2E8F0; border-radius: 6px; padding: 14px 16px; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.kodblokk code { font-size: inherit; }
.ut__apro { font-size: 13px; color: var(--halk); }
.ut__cim { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 14px; color: var(--tinta); background: var(--halvany); border-radius: 6px; padding: 10px 14px; overflow-wrap: anywhere; }
.ut__cim b { color: var(--accent); }
.ut__link { color: var(--primary); font-weight: 600; font-size: 14px; text-decoration: none; border-bottom: 1px solid currentColor; }
.ut__link:hover { color: var(--accent); }
@media (max-width: 960px) { .utak { grid-template-columns: 1fr; gap: 0; } .ut { padding: 28px 0; } .ut:last-child { border-bottom: 1px solid var(--vonal); } }

/* ---------- Hová megy el az időd? – „most” és „az Ajánlatgéppel” egymás mellett, vékony vonalakkal ---------- */
.ido__fej, .ido__sorok li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; }
.ido__fej { padding-bottom: 12px; border-bottom: 2px solid var(--navy); font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--halk); }
.ido__fej span:last-child { color: var(--accent); }
.ido__sorok { list-style: none; margin: 0; padding: 0; }
.ido__sorok li { align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--vonal); }
.ido__most { margin: 0; color: var(--halk); }
.ido__gep { margin: 0; position: relative; padding-left: 28px; color: var(--tinta); font-weight: 600; }
.ido__gep::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-family: var(--display); font-weight: 700; }
@media (max-width: 760px) {
  .ido__fej { display: none; }
  .ido__sorok { border-top: 2px solid var(--navy); }
  .ido__sorok li { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
}

/* ---------- Záró szakasz: jelentkezési űrlap (Formspree) ---------- */
.hero__aprobetu a { color: #CBD5E1; text-decoration: underline; text-underline-offset: 3px; }
.hero__aprobetu a:hover { color: #fff; }
.szakasz--halvany .ut__cim { background: #fff; }
.zaro .jel h3, .zaro .jel__siker h3, .zaro .jel legend { color: var(--tinta); }
.zaro__bev { margin: 18px 0 22px; color: #CBD5E1; max-width: 34rem; }
.zaro__pontok { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid rgba(255,255,255,.12); }
.zaro__pontok li { padding: 12px 0 12px 26px; border-bottom: 1px solid rgba(255,255,255,.12); position: relative; color: #fff; font-weight: 600; }
.zaro__pontok li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-family: var(--display); font-weight: 700; }
.zaro__beta { margin: 0; padding: 14px 16px; border-left: 3px solid var(--accent); background: rgba(194, 65, 12, .12); color: #E2E8F0; font-size: 15px; max-width: 34rem; }
.zaro__beta b { color: #fff; }
.zaro__email a { color: #CBD5E1; }
.jel { background: #fff; color: var(--szoveg); border-radius: 8px; padding: 28px 28px 24px; }
.jel__cim { font-size: 1.35rem; margin-bottom: 18px; }
.jel__mezo { margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.jel__mezo > label, .jel__mezo legend { display: block; font-weight: 600; color: var(--tinta); font-size: 14px; margin-bottom: 6px; padding: 0; }
.jel__mezo > label span { font-weight: 400; color: var(--halk); }
.jel__mezo input, .jel__mezo select { width: 100%; font: inherit; font-size: 16px; color: var(--tinta); background: #fff; border: 1px solid #CBD5E1; border-radius: 6px; padding: 11px 12px; appearance: none; -webkit-appearance: none; }
.jel__mezo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.jel__mezo input:focus, .jel__mezo select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(49, 90, 127, .18); }
.jel__chipek { display: flex; flex-wrap: wrap; gap: 8px; }
.jel__chipek label { margin: 0; cursor: pointer; }
.jel__chipek input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.jel__chipek span { display: block; padding: 9px 16px; border: 1px solid #CBD5E1; border-radius: 6px; font-weight: 500; color: var(--tinta); font-size: 14px; }
.jel__chipek input:checked + span { border-color: var(--primary); background: var(--primary-mosas); color: var(--primary); font-weight: 600; box-shadow: inset 0 0 0 1px var(--primary); }
.jel__chipek input:focus-visible + span { outline: 3px solid var(--secondary); outline-offset: 2px; }
.jel__csapda { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.jel__jelolo { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--halk); margin: 4px 0 14px; cursor: pointer; }
.jel__jelolo input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--primary); }
.jel__jelolo a { color: var(--primary); }
.jel__hiba { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--accent); }
.jel__gomb { width: 100%; }
.jel__apro { margin: 10px 0 0 !important; font-size: 12px; color: var(--halk); text-align: center; }
.jel__siker { background: #fff; color: var(--szoveg); border-radius: 8px; padding: 28px; }
.jel__siker h3 { margin-bottom: 10px; }
.jel__siker a { color: var(--primary); }
@media (max-width: 960px) { .jel { padding: 22px 18px 20px; } }

/* ---------- Áttekintés utáni finomítások ---------- */
/* Hero: a döntés érvei jól láthatóan, a záró pontokkal azonos nyíllal */
.hero__ervek { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 6px; }
.hero__ervek li { position: relative; padding-left: 22px; font-size: 15px; font-weight: 600; color: #E2E8F0; }
.hero__ervek li::before { content: '→'; position: absolute; left: 0; color: var(--accent); font-family: var(--display); font-weight: 700; }
.hero__ervek a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px; }
.hero__ervek a:hover { text-decoration-color: currentColor; }
/* Szakmák: rövid cím + bevezető */
.szakmak__bev { margin: 14px 0 0; color: var(--szoveg); max-width: 32rem; }
/* Így kerül hozzád: a külön szolgáltatás jelölése */
.ut__jel { margin: 0 0 6px !important; font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--accent); }
/* Mobilon a demó-előnézet elmarad: a hero-animáció már megmutatja az űrlapot */
@media (max-width: 760px) { .probald .elonezet { display: none; } }

/* ---------- GYIK: lenyitható sorok vékony elválasztókkal ---------- */
.gyik__lista { max-width: 52rem; border-top: 1px solid #D5DDE5; }
.gyik__elem { border-bottom: 1px solid #D5DDE5; }
.gyik__elem summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-family: var(--display); font-weight: 600; font-size: 1.08rem; color: var(--tinta); }
.gyik__elem summary::-webkit-details-marker { display: none; }
.gyik__elem summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease); }
.gyik__elem[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.gyik__elem summary:hover { color: var(--primary); }
.gyik__elem summary:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.gyik__elem p { padding: 0 0 22px; max-width: 46rem; color: var(--szoveg); }

/* ---------- Szakmák ---------- */
.szakmak { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.szakmak__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #D5DDE5; }
.szakmak__lista li { padding: 13px 0; border-bottom: 1px solid #D5DDE5; font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--tinta); }
@media (max-width: 860px) { .szakmak { grid-template-columns: 1fr; gap: 36px; } }

/* ---------- Záró CTA ---------- */
.zaro__racs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; }
.zaro__jobb p { margin-bottom: 28px; }
.zaro__gombok { display: flex; flex-wrap: wrap; gap: 12px; }
.zaro__email { margin-top: 20px !important; margin-bottom: 0 !important; font-size: 14px; color: #94A3B8; }
@media (max-width: 860px) { .zaro__racs { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Lábléc ---------- */
.lablec { background: var(--navy); color: #94A3B8; font-size: 13px; border-top: 1px solid rgba(255,255,255,.08); }
.lablec__sor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 28px; padding-bottom: 28px; }
.lablec nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lablec a { color: #94A3B8; text-decoration: none; }
.lablec a:hover { color: #fff; }

/* ============================================================
   /ajanlatgep/demo – egy kitalált festő vállalkozás ajánlatkérő
   oldala. Középre zárt, keskeny oszlop: gépen felvéve könnyen
   vágható állóra (TikTok).
   ============================================================ */
.festo { background: var(--halvany); }
.festo-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.festo-racs { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
@media (max-width: 1000px) { .festo-racs { grid-template-columns: 1fr; gap: 48px; } }

.festo-demosav { background: var(--navy); color: #94A3B8; font-size: 12px; font-weight: 500; text-align: center; padding: 7px 16px; letter-spacing: .02em; }
.festo-demosav a { color: #fff; }
.festo-demosav[hidden] { display: none; }

.festo-fejlec { background: #fff; border-bottom: 1px solid var(--vonal); }
.festo-fejlec__sor { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; }
.festo-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--display); font-size: 21px; font-weight: 700; color: var(--tinta); letter-spacing: -0.02em; }
.festo-logo b { color: var(--accent); font-weight: 700; }
/* Festékcsík-jel: három színminta, a márka színeivel */
.festo-logo__jel { display: flex; gap: 3px; }
.festo-logo__jel i { display: block; width: 7px; height: 24px; border-radius: 2px; background: var(--navy); }
.festo-logo__jel i:nth-child(2) { background: var(--primary); height: 20px; margin-top: 4px; }
.festo-logo__jel i:nth-child(3) { background: var(--accent); height: 16px; margin-top: 8px; }
.festo-fejlec__szolg { font-size: 13px; font-weight: 600; color: var(--halk); }
@media (max-width: 560px) { .festo-fejlec__szolg { display: none; } .festo-fejlec__sor { height: 64px; } }

.festo-fo { padding: 64px 0 96px; }
.festo-intro { margin-bottom: 40px; max-width: 46rem; }
.festo-intro h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); line-height: 1.08; margin-bottom: 18px; }
.festo-intro p { font-size: 1.08rem; max-width: 40rem; }
.festo-urlap-hely { min-width: 0; }
.festo-utana { margin: 20px 0 0; }
@media (max-width: 640px) { .festo-fo { padding: 40px 0 64px; } .festo-intro p { font-size: 1rem; } .festo-urlap-hely { margin: 0 -4px; } }

/* Önálló ajánlatkérő oldal (/ajanlat/…, /quote/…): egy hasábos */
.oldal-hasab { max-width: 760px; }
.festo-logo img { max-height: 44px; width: auto; display: block; }
.festo-lablec .oldal-motor { color: var(--halk); }

/* Oldalsáv: kártya nélkül, vékony elválasztókkal */
.festo-oldal { position: sticky; top: 32px; }
.festo-oldal__blokk + .festo-oldal__blokk { margin-top: 40px; }
.festo-oldal h2 { font-size: 1.15rem; margin-bottom: 14px; }
.festo-oldal ul, .festo-oldal ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid #D5DDE5; }
.festo-oldal li { padding: 13px 0; border-bottom: 1px solid #D5DDE5; font-size: 14px; color: var(--halk); }
.festo-oldal ul b { display: block; color: var(--tinta); font-size: 15px; margin-bottom: 2px; }
.festo-oldal ol { counter-reset: tovabb; }
.festo-oldal ol li { counter-increment: tovabb; display: grid; grid-template-columns: 26px 1fr; color: var(--szoveg); }
.festo-oldal ol li::before { content: counter(tovabb); font-family: var(--display); font-weight: 700; color: var(--accent); }
@media (max-width: 1000px) { .festo-oldal { position: static; } }

.festo-lablec { border-top: 1px solid var(--vonal); background: #fff; font-size: 12px; color: var(--halk); }
.festo-lablec__sor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; padding-bottom: 22px; }
.festo-lablec a { color: var(--halk); }

/* ============================================================
   Nagy kijelzők (2K / 4K)
   1700 px fölött szélesebb tartalom és nagyobb betűk (a főoldal
   1536 px-es sávjához igazodva), 3200 px fölött (4K nagyítás
   nélkül) az egész oldal arányos nagyítása – a Windows ajánlott
   150%-os 4K-beállításának megfelelően. A médialekérdezések a
   valódi szélességre figyelnek, a zoom nem befolyásolja őket.
   ============================================================ */
@media (min-width: 1700px) {
  :root { --gutter: 32px; }
  body { font-size: 17px; }
  .wrap, .festo-wrap { max-width: 1440px; }
  .oldal-hasab { max-width: 840px; }
  .hero { padding: 156px 0 120px; }
  .hero__racs { gap: 96px; }
  .hero h1 { font-size: 4.1rem; }
  .hero__lede { font-size: 1.18rem; max-width: 38rem; }
  h2 { font-size: 2.85rem; }
  h3 { font-size: 1.3rem; }
  .szakasz { padding: 136px 0; }
  .szakasz__fej { max-width: 52rem; margin-bottom: 68px; }
  .nyugta { font-size: 15px; padding: 34px 34px 26px; }
  .nyugta__sorok b { font-size: 15px; }
  .probald, .szaki { gap: 96px; }
  .elonyok { gap: 0 88px; }
  .utak { gap: 0 64px; }
  .tabla { font-size: 14px; }
  .gyik__lista { max-width: 60rem; }
  .festo-racs { grid-template-columns: minmax(0, 1fr) 380px; gap: 80px; }
  .festo-intro h1 { font-size: 3.4rem; }
  .festo-intro p { font-size: 1.15rem; }
}
@media (min-width: 3200px) {
  html { zoom: 1.5; }
}