/* ==========================================================================
   Uzleti Pilota v3 home page (card 5184720b, Zoltán TG 61508 + 61516)
   Concept "Éjszakai irányítótorony": Lead, the conductor, stands in the middle
   of a radar ring and hands work to eight specialist agents (3D, js/hos3d.js).
   Type: Archivo (display) + Instrument Sans (body), as on v2 and /pro.
   Palette: night ink, lamp amber (signal), radar cyan.
   ========================================================================== */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url(/betuk/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}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;src:url(/betuk/archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/betuk/instrument-sans-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}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/betuk/instrument-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}


:root{
  --ink:#070C18;
  --ink-2:#0D1526;
  --ink-3:#141F36;
  --ink-4:#1D2B48;
  --on-ink:#E8EDF5;
  --on-ink-2:#AEB9CC;
  --signal:#FFB020;
  --signal-2:#FF8E24;
  --signal-soft:#FFF3DC;
  --signal-text:#7A4A00;   /* amber family dark enough for text on white */
  --radar:#2DC4DA;
  --mint:#2ECF92;
  --mint-dark:#13734F;
  --paper:#FFFFFF;
  --paper-2:#F1F4F9;
  --line:#DCE3ED;
  --muted:#4F5B72;
  --fd:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fb:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --hd-h:72px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hd-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--fb);font-size:18px;line-height:1.6}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--fd);line-height:1.12;margin:0 0 .5em;letter-spacing:-.015em}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.005em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.sr-csak{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ikon-keszlet{position:absolute;width:0;height:0;overflow:hidden}

.ugro{position:absolute;left:-9999px;top:0;z-index:200}
.ugro:focus{left:16px;top:12px;background:var(--signal);color:var(--ink);padding:10px 14px;font-weight:700;border-radius:8px}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}

/* own line icons (eszkoz/ikonok.json): one stroke width, amber accent strokes */
.ik{width:44px;height:44px;flex:none;color:currentColor;--ikon-a:var(--signal)}

/* ---------- buttons ---------- */
.gomb{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:10px;
  background:var(--signal);color:var(--ink);font-family:var(--fd);font-weight:800;font-size:1.05rem;text-decoration:none;border:0;cursor:pointer;
  box-shadow:0 10px 30px -10px rgba(255,176,32,.55);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),background .2s}
.gomb:hover{background:#FFC048;transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(255,176,32,.7)}
.gomb svg{width:18px;height:18px;transition:transform .25s var(--ease-out)}
.gomb:hover svg{transform:translateX(3px)}
.gomb-kicsi{min-height:44px;padding:0 18px;font-size:.95rem;box-shadow:none}
.gomb-szellem{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);box-shadow:none}
.gomb-szellem:hover{background:rgba(255,255,255,.08);box-shadow:none}

/* ---------- header: brand + "a Kreatív Kontroll készíti" ---------- */
.fej{position:sticky;top:0;z-index:50;background:rgba(7,12,24,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07)}
.fej .wrap{display:flex;align-items:center;gap:28px;min-height:var(--hd-h)}
.marka{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;font-family:var(--fd);font-weight:800;font-size:1.12rem;letter-spacing:-.01em;line-height:1.1}
.marka svg{width:40px;height:40px;flex:none}
.marka-szoveg small{display:block;font-family:var(--fb);font-weight:500;font-size:.78rem;color:var(--on-ink-2);letter-spacing:0;margin-top:2px}
.menu{display:flex;gap:4px;margin-left:auto;align-items:center}
.menu a{color:var(--on-ink);text-decoration:none;font-size:.95rem;padding:10px 12px;border-radius:8px;transition:background .2s,color .2s}
.menu a:hover{background:rgba(255,255,255,.07);color:#fff}
.menu .gomb{color:var(--ink);margin-left:8px}
.menu .gomb:hover{background:#FFC048;color:var(--ink)}
.menu-gomb{display:none}

/* ---------- 1. hero: the conductor and his agents ---------- */
.hos{position:relative;background:radial-gradient(120% 90% at 72% 40%,#0F1C38 0%,var(--ink) 62%);color:var(--on-ink);overflow:hidden;isolation:isolate}
.hos-radar{position:absolute;inset:0;z-index:-1;opacity:.5;
  background:repeating-radial-gradient(circle at 72% 46%,rgba(45,196,218,.10) 0 1px,transparent 1px 110px)}
.hos-radar::after{content:"";position:absolute;left:72%;top:46%;width:1600px;height:1600px;margin:-800px 0 0 -800px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(45,196,218,.16),rgba(45,196,218,0) 22%,transparent);animation:sopres 9s linear infinite}
@keyframes sopres{to{transform:rotate(360deg)}}
.hos-racs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-areas:"cimke szinpad" "h1 szinpad" "lead szinpad" "os szinpad" "cta szinpad";
  grid-template-rows:auto auto auto auto 1fr;column-gap:24px;align-items:start;min-height:calc(100vh - var(--hd-h));min-height:calc(100svh - var(--hd-h));max-height:900px;padding-top:64px;padding-bottom:40px}
.hos-cimke{grid-area:cimke;display:inline-flex;align-items:center;gap:10px;font-size:.92rem;font-weight:600;color:var(--on-ink-2);margin:0 0 18px}
.hos-cimke .pont{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(46,207,146,.18)}
.hos h1{grid-area:h1;font-size:clamp(2.2rem,3.3vw,3.15rem);font-weight:900;color:#fff;letter-spacing:-.025em;margin:0 0 18px}
.hos h1 span{display:block;color:var(--signal)}
.hos-lead{grid-area:lead;font-size:1.15rem;color:var(--on-ink-2);max-width:30em;margin:0 0 22px}
.hos-os{grid-area:os;display:flex;align-items:center;gap:14px;margin:0 0 26px;color:#fff}
.os-logok{display:flex;gap:8px;flex-shrink:0}
.os-logo{width:40px;height:40px;padding:7px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff}
.os-szoveg{font-size:1.02rem;color:var(--on-ink-2);line-height:1.4}
.os-szoveg b{display:block;color:#fff;font-family:var(--fd);font-size:1.12rem}
/* price: two fixed lines, break only after the comma (Zoltán TG 61710) */
.os-ar{display:block;white-space:nowrap}
.hos-cta{grid-area:cta}
.hos-ar{margin:14px 0 0;font-size:1rem;color:var(--on-ink-2)}
.hos-ar b{color:#fff;font-family:var(--fd)}
.hos-ar span{display:inline-flex;align-items:center;gap:6px;color:var(--mint)}
.hos-ar span::before{content:"";width:14px;height:8px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg) translateY(-2px)}

/* the 3D stage; the still image shows until WebGL proves it runs */
.hos-szinpad{grid-area:szinpad;position:relative;align-self:center;height:min(660px,calc(100svh - var(--hd-h) - 60px));min-height:520px;margin-right:-28px}
.hos-szinpad canvas{position:absolute!important;inset:0;width:100%!important;height:100%!important;cursor:default;touch-action:pan-y}
.hos-tartalek{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hos-tartalek img{width:100%;height:100%;object-fit:contain}
.hos-szinpad.el .hos-tartalek{display:none}
.ag-cimkek{position:absolute;inset:0;pointer-events:none}
.ag-cimke{position:absolute;left:0;top:0;padding:5px 10px;border-radius:8px;background:rgba(13,21,38,.82);border:1px solid rgba(45,196,218,.28);white-space:nowrap;
  font-size:.78rem;line-height:1.25;color:var(--on-ink-2);transition:opacity .4s,border-color .4s;will-change:transform}
.ag-cimke b{display:block;color:#fff;font-family:var(--fd);font-size:.84rem}
.ag-cimke span{display:none}
.ag-cimke.aktiv{border-color:var(--signal);background:rgba(13,21,38,.94)}
.ag-cimke.aktiv span{display:block;color:var(--signal)}
/* z-index: the 3D canvas is appended after the bubble and would swallow its clicks */
.lead-buborek{position:absolute;z-index:3;left:0;top:0;opacity:0;padding:10px 16px;border-radius:16px 16px 16px 4px;background:#fff;color:var(--ink);font-family:var(--fd);font-weight:800;font-size:.95rem;
  text-decoration:none;white-space:nowrap;box-shadow:0 10px 30px -8px rgba(0,0,0,.5);transition:opacity .5s .6s,background .2s}
.lead-buborek.kesz{opacity:1}
.lead-buborek:hover{background:var(--signal)}

/* ---------- generic sections ---------- */
.szakasz{padding:104px 0}
.szakasz-fej{max-width:760px;margin-bottom:44px}
.szakasz-fej p{font-size:1.1rem;color:var(--muted)}
/* eyebrow label: sentence case with the radar ping (Lead's ring), not tracked caps */
.cimke{display:inline-flex;align-items:center;gap:10px;font-family:var(--fd);font-size:.98rem;font-weight:800;letter-spacing:0;color:var(--signal-text);margin-bottom:14px}
.cimke::before{content:"";flex:none;width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;background:radial-gradient(circle,currentColor 0 2.5px,transparent 3px)}
.sotet{background:var(--ink-2);color:var(--on-ink)}
.sotet h2,.sotet h3{color:#fff}
.sotet .szakasz-fej p{color:var(--on-ink-2)}
.sotet .cimke{color:var(--signal)}
.halvany{background:var(--paper-2)}
.mailto{font-weight:700;color:var(--ink)}

/* ---------- 2. the problem ---------- */
.prob-sor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.prob-sor li{padding:28px;border-radius:14px;background:var(--paper-2);border:1px solid var(--line)}
.prob-sor .ik{color:var(--ink);--ikon-a:#C67A00;margin-bottom:18px}
.prob-sor p{color:var(--muted);margin:0}
.prob-zaro{margin:40px 0 0;font-family:var(--fd);font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.3;max-width:28em}

/* ---------- 3. capability cards: a grid on desktop, a snap row on phones ---------- */
.kepes-sor{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kepes{position:relative;padding:24px 22px 22px;border-radius:14px;background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid rgba(255,255,255,.08);
  transition:border-color .3s,transform .35s var(--ease-out)}
.kepes:hover{border-color:rgba(255,176,32,.5);transform:translateY(-4px)}
.kepes .ik{color:#fff;margin-bottom:16px}
.kepes h3{font-size:1.08rem;margin-bottom:6px}
.kepes p{font-size:.95rem;color:var(--on-ink-2);margin:0}
.kepes-lab{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:32px}
.kepes-gorget{display:none;margin:0;font-size:.9rem;color:var(--on-ink-2)}

/* ---------- 4. videos ---------- */
.vid-racs{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:center}
.vid-fo video{width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;background:var(--ink);box-shadow:0 30px 60px -30px rgba(7,12,24,.5)}
figure{margin:0}
figcaption{font-size:.92rem;color:var(--muted);margin-top:12px}
.telefon-keret{padding:10px;border-radius:34px;background:var(--ink);box-shadow:0 30px 60px -30px rgba(7,12,24,.6),inset 0 0 0 2px #26324D}
.telefon-keret video{width:100%;height:auto;aspect-ratio:9/16;border-radius:24px;background:#000}
.vid-telefon figcaption{text-align:center}
.vid-lista{display:grid;grid-template-columns:repeat(9,minmax(150px,1fr));gap:12px;margin-top:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
.vid-lista li{scroll-snap-align:start}
.vid-valaszt{display:block;width:100%;padding:0;border:2px solid transparent;border-radius:10px;background:var(--paper-2);text-align:left;font:inherit;cursor:pointer;overflow:hidden;color:var(--ink)}
.vid-valaszt img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.vid-valaszt span{display:block;padding:8px 10px;font-size:.85rem;font-weight:600;line-height:1.3}
.vid-valaszt i{font-style:normal;color:var(--muted);font-weight:500}
.vid-valaszt.aktiv{border-color:var(--signal)}
.vid-hely div{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:100%;min-height:130px;border:2px dashed #B8C2D3;border-radius:10px;color:var(--muted);text-align:center;font-size:.85rem;font-weight:600;line-height:1.3}
.vid-hely .ik{width:32px;height:32px;--ikon-a:#B8C2D3}
.vid-hely i{font-style:normal;font-weight:500;color:#8A95AA}

/* ---------- 5. guarantee seal ---------- */
.garancia{background:var(--ink);color:#fff;padding:96px 0;overflow:hidden}
.gar-racs{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:center}
.pecset{width:340px;height:340px}
.pecset svg{width:100%;height:100%}
.pecset .forog{transform-origin:170px 170px;animation:forog 30s linear infinite}
@keyframes forog{to{transform:rotate(360deg)}}
.gar-szoveg h2{font-size:clamp(2.8rem,5.6vw,4.6rem);font-weight:900;color:var(--signal);letter-spacing:-.03em;line-height:1.02;margin-bottom:22px}
.gar-szoveg p{font-size:1.2rem;color:var(--on-ink);max-width:30em;margin:0}
.garancia .cimke{color:var(--signal)}

/* ---------- 6. price ---------- */
.ar-racs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:start}
.kell{margin-top:28px}
.kell ul{display:grid;gap:14px}
.kell li{display:flex;gap:14px;align-items:flex-start;color:var(--muted)}
.kell .ik{width:32px;height:32px;color:var(--ink);--ikon-a:#C67A00}
.ar-doboz{padding:32px;border-radius:16px;background:var(--ink);color:var(--on-ink);box-shadow:0 30px 60px -30px rgba(7,12,24,.5)}
.ar-sor{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.ar-sor b{font-family:var(--fd);font-size:1.4rem;color:#fff;white-space:nowrap}
.ar-sor.fo b{font-size:2rem;color:var(--signal)}
.ar-sor small{font-family:var(--fb);font-weight:500;font-size:.85rem;color:var(--on-ink-2)}
.ar-pipak{display:grid;gap:10px;margin:20px 0}
.ar-pipak li{position:relative;padding-left:26px;font-size:.95rem;color:var(--on-ink-2)}
.ar-pipak li::before{content:"";position:absolute;left:2px;top:7px;width:12px;height:7px;border-left:2.5px solid var(--mint);border-bottom:2.5px solid var(--mint);transform:rotate(-45deg)}
.ar-igeret{display:flex;gap:10px;align-items:center;font-family:var(--fd);font-weight:800;color:#fff;margin:0 0 18px}
.ar-igeret svg{width:22px;height:22px;color:var(--mint)}
.ar-doboz .gomb{width:100%}
.ar-egyszer{font-weight:700;color:var(--signal-text)}
.ar-doboz .ar-egyszer{color:var(--signal)}

/* ---------- 7. we run on it too ---------- */
.csapat{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:center;margin-bottom:56px}
.csapat-kozep{text-align:center;padding:20px;border-radius:20px;background:radial-gradient(circle at 50% 40%,rgba(45,196,218,.18),transparent 70%)}
.csapat-kozep img{width:200px;height:200px;margin:0 auto 8px}
.csapat-kozep b{display:block;font-family:var(--fd);font-size:1.3rem;color:#fff}
.csapat-kozep span{color:var(--on-ink-2);font-size:.95rem}
.csapat-tagok{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.csapat-tagok li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.csapat-tagok .ik,.csapat-tagok img{grid-row:span 2;width:40px;height:40px;color:#fff}
.csapat-tagok img{border-radius:50%;object-fit:cover}
.csapat-tagok b{font-family:var(--fd);color:#fff}
.csapat-tagok span{font-size:.88rem;color:var(--on-ink-2)}
.csapat-tagok .ember{border-color:rgba(255,176,32,.4)}
.szamok{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid rgba(255,255,255,.12);padding-top:40px}
.szamok b{display:block;font-family:var(--fd);font-weight:900;font-size:3.2rem;line-height:1;color:var(--signal);margin-bottom:10px}
.szamok span{color:var(--on-ink-2)}
.szamok small{display:block;font-size:.82rem;color:#8A95AA;margin-top:4px}

/* ---------- 8. a weekday: timeline ---------- */
.idovonal{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;padding-top:34px}
.idovonal::before{content:"";position:absolute;left:0;right:0;top:9px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--ink-4),var(--signal) 50%,var(--mint))}
.idovonal li{position:relative}
.idovonal li::before{content:"";position:absolute;left:0;top:-31px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--signal)}
.idovonal time{display:block;font-family:var(--fd);font-weight:800;font-size:1.5rem;color:var(--ink);margin-bottom:10px}
.idovonal .ik{width:36px;height:36px;color:var(--ink);--ikon-a:#C67A00;margin-bottom:10px}
.idovonal p{color:var(--muted);font-size:.95rem;margin:0}

/* ---------- 9. five steps ---------- */
.lepesek{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:l}
.lepesek li{padding:24px 20px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.lepesek b{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:9px;background:var(--ink);color:var(--signal);font-family:var(--fd);font-size:1.1rem;margin-bottom:14px}
.lepesek li:last-child b{background:var(--signal);color:var(--ink)}
.lepesek p{color:var(--muted);font-size:.95rem;margin:0}

/* ---------- 10. for whom ---------- */
.kinek-racs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.kinek{padding:30px;border-radius:14px;border:1px solid var(--line)}
.kinek.igen{background:#EFFAF5;border-color:#BFE8D6}
.kinek ul{display:grid;gap:10px}
.kinek li{position:relative;padding-left:28px;color:var(--ink)}
.kinek.igen li::before{content:"";position:absolute;left:3px;top:8px;width:12px;height:7px;border-left:2.5px solid var(--mint-dark);border-bottom:2.5px solid var(--mint-dark);transform:rotate(-45deg)}
.kinek.nem li::before,.kinek.nem li::after{content:"";position:absolute;left:3px;top:13px;width:14px;height:2.5px;background:#A3141F;transform:rotate(45deg)}
.kinek.nem li::after{transform:rotate(-45deg)}

/* ---------- FAQ ---------- */
.gyik-racs{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px}
.gyik details{border-bottom:1px solid var(--line)}
.gyik details:first-child{border-top:1px solid var(--line)}
.gyik summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;font-family:var(--fd);font-weight:700;font-size:1.12rem;position:relative}
.gyik summary::-webkit-details-marker{display:none}
.gyik summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg);transition:transform .3s var(--ease-out)}
.gyik details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.gyik details p{color:var(--muted);margin:0 0 20px;max-width:46em}

/* ---------- hero, v3 text additions ---------- */
.hos-racs{grid-template-areas:"cimke szinpad" "h1 szinpad" "lead szinpad" "os szinpad" "cta szinpad" "bizalom szinpad";
  grid-template-rows:auto auto auto auto auto auto 1fr}
.hos-gombsor{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px}
.mini-pecset{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:800;font-size:.98rem;color:var(--mint)}
.mini-pecset svg{width:26px;height:26px}
.hos-gomb-alatt{margin:12px 0 22px;font-size:.92rem;color:var(--on-ink-2)}
/* three gauges under the hero: the earlier /pro page look (.instr/.gauge), scaled for the main page */
.tud-sav{background:var(--ink);padding:0 0 clamp(36px,5vw,64px)}
.tud-racs{list-style:none;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(9px,1.6vw,18px)}
.tud{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);border-radius:14px;padding:clamp(12px,2vw,22px) 11px;text-align:center}
.tud b{display:block;font-family:var(--fd);font-weight:800;font-size:clamp(1.15rem,2.6vw,2rem);color:var(--signal);letter-spacing:-.03em;line-height:1.15}
.tud span{display:block;margin-top:4px;font-size:clamp(.75rem,1.1vw,.86rem);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.66);line-height:1.3}
.hos-bizalom{grid-area:bizalom;font-size:.93rem;color:var(--on-ink-2);max-width:34em;margin:0}
.hos-bizalom b{color:#fff}
.hos-bizalom a{display:inline-block;margin-top:4px;color:var(--signal);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,176,32,.5)}
.hos-lead{margin-bottom:20px}

/* ---------- 2. problem: week grid ---------- */
.prob-racs{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px 56px;align-items:start}
.prob-sor{grid-template-columns:1fr;gap:14px}
.prob-sor li{display:flex;gap:18px;align-items:flex-start;padding:20px 22px}
.prob-sor .ik{margin:0}
.prob-sor h3{margin-bottom:4px}
.prob-zaro{grid-column:1/-1;margin-top:16px}

/* ---------- 3. reframe ---------- */
.osszevet{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff}
.osszevet-fej,.osszevet-sor{display:grid;grid-template-columns:1fr 1fr}
.osszevet-fej span{padding:16px 24px;font-family:var(--fd);font-weight:800;font-size:1.05rem}
.osszevet-fej span:last-child{background:var(--ink);color:var(--signal)}
.osszevet-sor span{padding:16px 24px;border-top:1px solid var(--line);color:var(--muted)}
.osszevet-sor span:last-child{background:#0D1526;color:#fff;border-top-color:rgba(255,255,255,.08);position:relative;padding-left:52px}
.osszevet-sor span:last-child::before{content:"";position:absolute;left:24px;top:22px;width:12px;height:7px;border-left:2.5px solid var(--mint);border-bottom:2.5px solid var(--mint);transform:rotate(-45deg)}

/* ---------- 4. agent system: org chart ---------- */
.fa{position:relative;display:grid;justify-items:center;gap:0}
.fa-te span{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.4);font-family:var(--fd);font-weight:800;color:#fff}
.fa-te::after,.fa-fo::after{content:"";display:block;width:2px;height:34px;margin:0 auto;background:linear-gradient(var(--signal),rgba(255,176,32,.2))}
.fa-fo{text-align:center}
.fa-fo img{width:96px;height:96px;margin:0 auto 8px;border-radius:50%;border:3px solid var(--signal);box-shadow:0 0 0 8px rgba(255,176,32,.12)}
.fa-fo b{display:block;font-family:var(--fd);font-size:1.2rem;color:#fff}
.fa-fo span{display:block;font-size:.9rem;color:var(--on-ink-2)}
.fa-agak{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;padding-top:30px;border-top:2px solid rgba(255,176,32,.35)}
.fa-agak li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:start;padding:18px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09)}
.fa-agak .ik{grid-row:span 2;width:40px;height:40px;color:#fff}
.fa-agak b{font-family:var(--fd);color:#fff}
.fa-agak span{font-size:.92rem;color:var(--on-ink-2);line-height:1.45}
.rend-lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:32px;align-items:center;margin-top:44px}
.kk-kiemelt{margin:0;padding:22px 26px;border-left:4px solid var(--signal);background:rgba(255,176,32,.08);border-radius:0 12px 12px 0;font-size:1.1rem;color:var(--on-ink)}
.kk-kiemelt b{color:var(--signal);font-family:var(--fd)}
.csevego-hely{padding:20px;border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.csevego-fej{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.csevego-fej img{width:40px;height:40px;border-radius:50%}
.csevego-fej b{font-family:var(--fd)}
.csevego-fej span{margin-left:auto;font-size:.8rem;color:var(--muted)}
.csevego-uzenet{background:var(--paper-2);border-radius:4px 14px 14px 14px;padding:12px 14px;font-size:.95rem;margin:0 0 14px}

/* ---------- 5. what it takes over ---------- */
.atvesz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.atvesz li{display:flex;gap:16px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--line)}
.atvesz .ik{width:40px;height:40px;color:var(--ink);--ikon-a:#C67A00}
.atvesz h3{margin-bottom:4px}
.atvesz p{color:var(--muted);font-size:.96rem;margin:0}

/* ---------- 8. memory ---------- */
.mas-racs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center}
.mas-racs .szakasz-fej{margin-bottom:0}
.emlek{padding:26px;border-radius:16px;background:var(--ink);color:var(--on-ink)}
.emlek-kerdes{font-size:1.05rem;color:var(--on-ink-2);margin-bottom:16px}
.emlek-kerdes q{display:block;margin-top:6px;padding:12px 14px;border-radius:14px 14px 4px 14px;background:var(--signal);color:var(--ink);font-family:var(--fd);font-weight:700;quotes:none}
.emlek-abra{width:100%;height:auto}
.emlek-abra-m{display:none;width:100%;height:auto}
.emlek-vonal{stroke-dasharray:240;stroke-dashoffset:240}
.js .emlek.on .emlek-vonal{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease-io) .3s}
.js .emlek .emlek-lap{opacity:.35;transition:opacity .6s}
.js .emlek.on .emlek-lap.talalt{opacity:1;transition-delay:1.4s}
.emlek figcaption{color:#fff;font-family:var(--fd);font-weight:700;font-size:1.05rem}

/* ---------- 9. three columns ---------- */
.folyam{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.folyam>li{padding:28px;border-radius:16px;border:1px solid var(--line);background:#fff}
.folyam-szam{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:9px;background:var(--ink);color:var(--signal);font-family:var(--fd);font-weight:800;margin-bottom:14px}
.folyam-szam.kesz{background:var(--mint);color:var(--ink)}
.folyam p{color:var(--muted);margin:0}
.folyam-lapok{display:grid;gap:8px}
.folyam-lapok li{padding:9px 12px;border-radius:8px;background:var(--paper-2);font-size:.95rem;border-left:3px solid var(--signal)}

/* ---------- 10. timeline, dark ---------- */
.idovonal{grid-template-columns:repeat(6,minmax(0,1fr))}
.idovonal::before{background:linear-gradient(90deg,var(--radar),var(--signal) 50%,var(--mint))}
.nap .idovonal time{color:var(--signal)}
.nap .idovonal .ik{color:#fff;--ikon-a:var(--signal)}
.nap .idovonal li::before{background:var(--ink-2)}
.nap .idovonal p{color:var(--on-ink-2)}
.nap-lab{margin:36px 0 0;font-family:var(--fd);font-size:1.15rem;color:#fff}

/* ---------- 11. week table ---------- */
.tabla-tarto{overflow-x:auto;border-radius:16px;border:1px solid var(--line)}
.het-tabla{width:100%;border-collapse:collapse;min-width:620px}
.het-tabla th,.het-tabla td{padding:16px 20px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
.het-tabla thead th{border-top:0;font-family:var(--fd);font-size:1.02rem}
.het-tabla tbody th{font-weight:600;width:28%}
.het-tabla td{color:var(--muted)}
.het-tabla .pilota{background:#0D1526;color:#fff;border-top-color:rgba(255,255,255,.08)}
.het-tabla thead .pilota{color:var(--signal)}

/* ---------- 12. payback calculator ---------- */
.meg-racs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:56px;align-items:start}
.kalk{padding:30px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(7,12,24,.35)}
.kalk-mezo{border:0;padding:0;margin:0 0 24px;min-width:0}
.kalk-mezo label,.kalk-mezo legend{display:flex;justify-content:space-between;gap:12px;font-weight:600;margin-bottom:10px}
.kalk-mezo output{font-family:var(--fd);font-weight:800;color:var(--ink)}
.kalk input[type=range]{width:100%;height:44px;accent-color:var(--signal);cursor:pointer}
.kalk-gombok{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kalk-gombok label{position:relative;margin:0}
.kalk-gombok input{position:absolute;opacity:0;width:1px;height:1px}
.kalk-gombok span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px;border:1.5px solid #9AA6BC;border-radius:8px;font-weight:600;font-size:.92rem;cursor:pointer;white-space:nowrap}
.kalk-gombok input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.kalk-gombok input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.kalk-eredmeny{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.kalk-eredmeny div{padding:16px;border-radius:12px;background:var(--ink);color:var(--on-ink-2);font-size:.88rem}
.kalk-eredmeny b{display:block;font-family:var(--fd);font-weight:900;font-size:1.7rem;color:var(--signal);margin-top:4px;white-space:nowrap}
.kalk-oszlopok{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end;height:120px;margin-bottom:16px}
.kalk-oszlop{display:flex;flex-direction:column;justify-content:flex-end;height:100%;font-size:.8rem;color:var(--muted)}
.kalk-oszlop i{display:block;height:calc(var(--h)*84px);min-height:3px;border-radius:6px 6px 0 0;transition:height .5s var(--ease-out)}
.kalk-oszlop.ertek i{background:linear-gradient(var(--signal),var(--signal-2))}
.kalk-oszlop.dij i{background:var(--radar)}
.kalk-oszlop span{margin-top:6px}
.kalk-osszevet{font-weight:600;margin:0 0 10px}
.kalk-lab{font-size:.84rem;color:var(--muted);margin:0}

/* ---------- 13-14. who is behind it ---------- */
.mi-racs{display:grid;grid-template-columns:340px minmax(0,1fr);gap:56px;align-items:start;margin-bottom:64px}
.mi-racs .szakasz-fej{max-width:none;margin:0}
.alapito img{width:100%;height:auto;border-radius:16px;filter:saturate(.9)}
.alapito figcaption{color:var(--on-ink-2)}
.minket .csapat-tagok{grid-template-columns:repeat(5,minmax(0,1fr));margin:24px 0}
.minket .csapat-tagok .fo{border-color:rgba(255,176,32,.5)}
.kapcsolat{color:var(--on-ink-2)}
.kapcsolat a,.sotet .mailto{color:#fff;font-weight:700}
.szamok-cim{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:24px}

/* ---------- 15. steps ---------- */
.lepes-zaro{margin:28px 0 0;font-family:var(--fd);font-weight:800;font-size:1.3rem}

/* ---------- 16. guarantee ---------- */
.gar-al{font-size:1.3rem!important;margin-bottom:24px!important;color:#fff!important}
.gar-pontok{display:grid;gap:14px;margin:0 0 30px;counter-reset:g}
.gar-pontok li{position:relative;padding-left:44px;font-size:1.08rem;color:var(--on-ink);max-width:36em;counter-increment:g}
.gar-pontok li::before{content:counter(g);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:rgba(255,176,32,.14);color:var(--signal);font-family:var(--fd);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem}

/* ---------- 17. price ---------- */
.ar-megj{display:grid;gap:12px;margin-top:20px}
.ar-megj p{font-size:1rem;color:var(--muted);margin:0;padding:14px 16px;border-radius:10px;background:var(--paper-2)}
.ar-megj b{color:var(--ink)}
.ar-havi{margin:18px 0 0;color:#fff;font-weight:600}

/* ---------- 19. four questions ---------- */
.negy-racs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.negy-k{padding:28px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09)}
.negy-k h3{font-size:1.25rem;color:var(--signal)!important}
.negy-k p{color:var(--on-ink-2);margin:0 0 .7em}
.negy-k p:last-child{margin:0}

/* ---------- 20. where it is going ---------- */
.merre{background:var(--ink);color:var(--on-ink);padding:88px 0}
.merre-racs{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:48px;align-items:center}
.merre h2{color:#fff}
.merre p{color:var(--on-ink-2);max-width:44em}
.merre .cimke{color:var(--signal)}
.merre-abra{width:200px;height:200px}
.merre-abra path,.merre-abra circle:last-child{transform-origin:80px 80px;animation:forog 12s linear infinite}
/* ---------- form ---------- */
.jel-racs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:56px;align-items:start}
.jel-bal .sotet-kartya{background:var(--ink);color:var(--on-ink);border-radius:12px;padding:26px;margin-top:24px}
.jel-bal .sotet-kartya svg{width:100%;max-width:300px;margin:0 auto}
.jel-bal .sotet-kartya p{text-align:center;font-size:.92rem;color:var(--on-ink-2);margin:14px 0 0}
/* honeypot: clipped in place inside the form, never parked off-screen */
.csapda{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.csapda input{width:1px;height:1px;padding:0;border:0}
.urlap{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px;box-shadow:0 30px 60px -40px rgba(7,12,24,.35)}
.mezo{margin-bottom:18px}
.mezo label,.mezo legend{display:block;font-weight:600;font-size:.98rem;margin-bottom:6px}
.mezo .opc{font-weight:400;color:var(--muted);font-size:.85rem}
.mezo input[type=text],.mezo input[type=email],.mezo input[type=tel],.mezo textarea{width:100%;min-height:48px;padding:11px 14px;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid #9AA6BC;border-radius:8px}
.mezo textarea{min-height:88px;resize:vertical}
.mezo input:focus,.mezo textarea:focus{border-color:var(--ink);outline:3px solid rgba(255,176,32,.55);outline-offset:1px}
.mezo .seged{font-size:.86rem;color:var(--muted);margin:5px 0 0}
fieldset.mezo{border:0;padding:0;margin:0 0 18px;min-width:0}
.valaszto{display:flex;flex-wrap:wrap;gap:8px}
.valaszto label{position:relative;margin:0;font-weight:500}
.valaszto input{position:absolute;opacity:0;width:1px;height:1px}
.valaszto span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid #9AA6BC;border-radius:8px;cursor:pointer;transition:background .2s,border-color .2s}
.valaszto input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.valaszto input:focus-visible+span{outline:3px solid var(--signal);outline-offset:2px}
.ket-mezo{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.pipa-mezo{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.pipa-mezo input{width:22px;height:22px;margin:2px 0 0;flex:none;accent-color:var(--ink)}
.hiba{display:none;color:#A3141F;font-size:.88rem;font-weight:600;margin:6px 0 0}
.mezo.hibas .hiba,.pipa-tarto.hibas .hiba{display:block}
.mezo.hibas input,.mezo.hibas .valaszto span{border-color:#A3141F}
.urlap-igeret{font-family:var(--fd);font-weight:700;margin:22px 0 12px;display:flex;gap:10px;align-items:center}
.urlap-igeret svg{width:20px;height:20px;color:var(--mint-dark)}
.urlap .gomb{width:100%}
.urlap-megj{font-size:.9rem;color:var(--muted);margin:10px 0 0;text-align:center}
.urlap .gomb:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.urlap-nojs{margin:12px 0 0;padding:12px 14px;border-left:3px solid var(--signal);background:var(--signal-soft);color:var(--ink);font-size:.95rem}
.urlap-uzenet{display:none;margin-top:16px;padding:14px 16px;border-radius:8px;background:#FBF1F2;color:#7E0F18;font-weight:600}
.urlap-uzenet.on{display:block}
.siker{display:none;text-align:left}
.siker.on{display:block}
.siker h3{font-size:1.6rem}
.proba-jegyzet{margin-top:16px;padding:12px 14px;border:1px dashed #9AA6BC;border-radius:8px;font-size:.86rem;color:var(--muted)}
.proba-jegyzet dl{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin:8px 0 0}
.proba-jegyzet dt{font-weight:600}
.proba-jegyzet dd{margin:0;word-break:break-word}

/* ---------- closing: 7.00 ---------- */
.zaro{position:relative;min-height:640px;display:flex;align-items:center;color:#fff;overflow:hidden;isolation:isolate;background:var(--ink)}
.zaro-kep{position:absolute;inset:0;z-index:-2}
.zaro-kep img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.zaro .wrap{width:100%}
.zaro-kep .este{opacity:0}
.js .zaro-kep .este{opacity:1;transition:opacity 2.8s var(--ease-io) .2s}
.js .zaro.reggel .zaro-kep .este{opacity:0}
.zaro::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,12,24,.92) 0%,rgba(7,12,24,.78) 34%,rgba(7,12,24,.1) 62%,rgba(7,12,24,0) 80%)}
.zaro h2{font-size:clamp(2rem,3.6vw,3.2rem);max-width:12em;color:#fff}
.zaro-ora{font-family:var(--fd);font-weight:800;color:var(--signal);font-size:1rem;margin-bottom:12px;display:inline-flex;gap:10px;align-items:center}
.zaro-megj{color:var(--on-ink);margin:14px 0 0}
.zaro-megj a{color:#fff;font-weight:700;text-decoration:none;border-bottom:2px solid var(--signal)}

/* ---------- footer ---------- */
.lab{background:var(--ink);color:var(--on-ink-2);padding:34px 0;font-size:.93rem}
.lab .wrap{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
.lab a{color:var(--on-ink);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.lab a:hover{color:#fff;border-bottom-color:var(--signal)}
.lab .marka{font-size:1rem}
.lab .marka svg{width:28px;height:28px}
.lab img{height:34px;width:auto}

/* ---------- mobile sticky CTA ---------- */
.zaro-al{font-family:var(--fd);font-weight:700;font-size:1.2rem;color:var(--signal);margin:0 0 24px}

/* ---------- floating "ask Lead" button: links to the form, no live chat ---------- */
.lead-gomb{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:10px;padding:6px 18px 6px 6px;border-radius:999px;background:#fff;color:var(--ink);
  font-family:var(--fd);font-weight:800;text-decoration:none;box-shadow:0 14px 40px -10px rgba(7,12,24,.55);transition:transform .3s var(--ease-out),opacity .3s}
.lead-gomb img{width:44px;height:44px;border-radius:50%;border:2px solid var(--signal)}
.lead-gomb:hover{transform:translateY(-3px)}
.lead-gomb.rejtett{opacity:0;transform:translateY(20px);pointer-events:none}
/* the consent bar (js/hozzajarulas.js) publishes its height as --kk-sav-hely; the button sits above it */
.lead-gomb{bottom:calc(20px + var(--kk-sav-hely,0px))}

/* ---------- reveal (only when JS proved it runs) ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .rv.on{opacity:1;transform:none}
.js .hos .belep{opacity:0;transform:translateY(16px);animation:belep .9s var(--ease-out) forwards}
.js .hos .belep:nth-child(2){animation-delay:.1s}
.js .hos .belep:nth-child(3){animation-delay:.2s}
.js .hos .belep:nth-child(4){animation-delay:.3s}
.js .hos .belep:nth-child(5){animation-delay:.4s}
.js .hos .belep:nth-child(n+6){animation-delay:.5s}
@keyframes belep{to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1240px){
  .menu a:not(.gomb){padding:10px 8px;font-size:.9rem}
  .idovonal{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:48px}
}
@media (max-width:1080px){
  .menu{display:none}
  .menu.nyitva{display:flex;position:absolute;top:var(--hd-h);left:0;right:0;flex-direction:column;align-items:stretch;background:var(--ink);padding:12px 20px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
  .menu.nyitva .gomb{margin:8px 0 0}
  .menu-gomb{display:inline-flex;margin-left:auto;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35);border-radius:8px;font:inherit;font-weight:600;cursor:pointer}
  .menu-gomb span{display:none}
  .prob-racs,.mas-racs,.meg-racs,.ar-racs,.jel-racs,.gyik-racs,.rend-lab,.mi-racs{grid-template-columns:minmax(0,1fr);gap:36px}
  .alapito{max-width:320px}
  .fa-agak,.atvesz{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kepes-sor{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lepesek{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gar-racs{grid-template-columns:minmax(0,1fr) 240px;gap:40px}
  .pecset{width:240px;height:240px}
  .minket .csapat-tagok{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  /* phone hero order: chip, H1, stage, OS line, CTA, then the rest */
  .hos-racs{grid-template-columns:1fr;grid-template-areas:"cimke" "h1" "szinpad" "os" "cta" "lead" "bizalom";grid-template-rows:none;min-height:0;max-height:none;padding-top:22px;padding-bottom:40px}
  .hos-szinpad{min-height:0;height:250px;margin:0 -20px 14px}
  .hos-cimke{margin-bottom:10px}
  .hos h1{margin-bottom:6px}
  .hos-os{margin-bottom:16px}
  .hos-gomb-alatt{margin-bottom:24px}
}
@media (max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  :root{--hd-h:62px}
  .marka svg{width:32px;height:32px}
  .marka{font-size:1rem}
  .marka-szoveg small{font-size:.74rem}
  .hos h1{font-size:1.72rem;line-height:1.1}
  .hos-cimke{font-size:.8rem}
  .os-logo{width:36px;height:36px;padding:6px}
  .os-szoveg{font-size:.92rem}
  /* the two-line price never breaks inside a line; when it cannot sit beside the logos it drops below them */
  .hos-os{flex-wrap:wrap;row-gap:10px}
  .os-szoveg b{font-size:1.02rem}
  .hos-gombsor .gomb{width:100%}
  .hos-gombsor{gap:10px}
  .szakasz{padding:64px 0}
  .szakasz-fej{margin-bottom:30px}
  .fa-agak,.atvesz,.folyam,.negy-racs,.kinek-racs,.lepesek,.szamok,.ket-mezo{grid-template-columns:1fr}
  .fa-agak{gap:10px}
  .osszevet-fej span,.osszevet-sor span{padding:12px 14px;font-size:.92rem}
  .osszevet-sor span:last-child{padding-left:36px}
  .osszevet-sor span:last-child::before{left:13px;top:18px}
  /* capability row: horizontal snap scroll */
  .kepes-sor{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:0 20px 10px;scrollbar-width:none}
  .kepes-sor::-webkit-scrollbar{display:none}
  .kepes{flex:0 0 72%;scroll-snap-align:start}
  .kepes-gorget{display:block}
  .kepes-lab{flex-direction:column;align-items:flex-start}
  .vid-racs{grid-template-columns:1fr}
  .vid-telefon{max-width:260px;margin:0 auto}
  .vid-lista{display:flex;margin:24px -20px 0;padding:0 20px 8px}
  .vid-lista li{flex:0 0 46%}
  .idovonal{grid-template-columns:1fr;padding:0 0 0 34px;row-gap:28px}
  .idovonal::before{left:6px;right:auto;top:0;bottom:0;width:3px;height:auto;background:linear-gradient(180deg,var(--radar),var(--signal) 50%,var(--mint))}
  .idovonal li::before{left:-34px;top:6px}
  .gar-racs{grid-template-columns:1fr;justify-items:start}
  .pecset{width:200px;height:200px}
  .kalk{padding:20px}
  .kalk-gombok{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kalk-eredmeny b{font-size:1.35rem}
  .minket .csapat-tagok{grid-template-columns:repeat(2,minmax(0,1fr))}
  .merre-racs{grid-template-columns:1fr;gap:24px}
  .merre-abra{width:120px;height:120px}
  .szamok b{font-size:2.5rem}
  .urlap{padding:20px}
  .zaro{min-height:560px;align-items:flex-end;padding-bottom:56px}
  .zaro-kep img{object-position:80% 50%}
  .zaro::before{background:linear-gradient(0deg,rgba(7,12,24,.95) 0%,rgba(7,12,24,.8) 50%,rgba(7,12,24,.15) 100%)}
  .lead-gomb{right:12px;bottom:calc(12px + var(--kk-sav-hely,0px));padding-right:14px;font-size:.92rem}
  .lead-gomb img{width:40px;height:40px}
  .suti{bottom:76px;right:12px;width:calc(100% - 24px);padding:10px 12px;font-size:.84rem;gap:8px 10px}
  .suti p{flex-basis:100%}
  .suti button{min-height:44px;flex:1}
  .lab .wrap{flex-direction:column;align-items:flex-start}
  .lab{padding-bottom:90px}
}
@media (max-width:360px){
  .hos h1{font-size:1.55rem}
  .gomb{padding:0 16px;font-size:.98rem}
}

/* ---------- reduced motion: everything stands still, everything visible; only Lead's wave remains (hos3d.js) ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv,.js .hos .belep{opacity:1!important;transform:none!important}
  .emlek-vonal{stroke-dashoffset:0!important}
  .js .emlek .emlek-lap{opacity:1!important}
  .js .zaro-kep .este{opacity:0!important}
}

/* gate fixes 2026-10-26: price rows wrap on phones; the phone memory diagram keeps 11 px+ text at 320 */
.ar-sor{flex-wrap:wrap}
@media (max-width:560px){
  .emlek-abra{display:none}
  .emlek-abra-m{display:block}
}
/* gauges: pull the band up into the hero's bottom padding; on phones one row per gauge, the uppercase label would not fit a third of 390 px */
.tud-sav{position:relative;z-index:1;margin-top:-40px}
@media (max-width:560px){
  .tud-sav{margin-top:0;padding-top:18px}
  .tud-racs{grid-template-columns:1fr;gap:8px}
  .tud{display:flex;align-items:baseline;gap:12px;text-align:left;padding:12px 16px}
  .tud b{font-size:1.3rem;min-width:6.2em}
  .tud span{margin-top:0;font-size:.78rem}
}
/* 320 px: "A JÓVÁHAGYÁSODAT" plus the 6.2em verb column was 2 px wider than the row (measured 2026-10-26) */
@media (max-width:359px){
  .tud{gap:10px;padding:12px 12px}
  .tud b{min-width:5.6em}
  .tud span{letter-spacing:.04em}
}

/* ===== 78846/78849/78855 (Zoltán TG 61589-61597, 2026-10-26) ===== */
/* headline: three lines, the two "Te" carry the accent, the middle line points at the 3D Lead */
.hos h1{font-size:clamp(2.2rem,3.4vw,3.2rem);line-height:1.06}
.hos h1 .h1-sor{display:block;color:#fff;text-wrap:balance}
.hos h1 em{font-style:normal;color:var(--signal)}
.hos h1 .h1-o{color:#7FE3F0}

/* org chart: "Te" is the biggest node, wider than any branch card */
.fa-te{position:relative;display:grid;justify-items:center;text-align:center;width:min(560px,100%);margin-bottom:36px;padding:24px 28px 22px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,176,32,.18),rgba(255,176,32,.05));border:2px solid var(--signal);box-shadow:0 0 0 10px rgba(255,176,32,.07),0 30px 60px -30px rgba(0,0,0,.6)}
.fa-te b{font-family:var(--fd);font-weight:900;font-size:clamp(2.6rem,5vw,4rem);line-height:1;color:var(--signal)}
.fa-te span{display:block;width:auto;height:auto;margin-top:8px;border:0;border-radius:0;font-family:inherit;font-weight:600;font-size:1.05rem;color:#fff}
.fa-te::after{position:absolute;top:100%;left:50%;height:36px;margin:0;transform:translateX(-50%)}
.rend-lab{grid-template-columns:minmax(0,1fr) 260px}
.rend-lab-bal{display:grid;gap:20px}
.rendszer .vid-telefon figcaption{color:var(--on-ink-2);margin-top:10px}

/* capability cards with their own film; the featured one runs across two columns, film on the left */
.kepes-videok{margin-bottom:16px}
.kepes-video{display:flex;flex-direction:column;padding:0;overflow:hidden}
.kepes-video:hover{transform:none}
.kepes-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.kepes-szoveg{padding:16px 18px 18px}
.kepes-video h3 i{font-style:normal;font-weight:500;font-size:.85rem;color:var(--on-ink-2);margin-left:4px}
.kepes-fo{grid-column:span 2;flex-direction:row;align-items:center;gap:4px;padding:16px}
.kepes-fo video{flex:0 0 60%;width:60%;border-radius:10px}
.kepes-fo .kepes-szoveg{padding:8px 8px 8px 20px}
.kepes-fo h3{font-size:1.3rem}
.kepes-tovabb{padding:0;border-color:rgba(255,176,32,.45);background:linear-gradient(180deg,rgba(255,176,32,.14),rgba(255,176,32,.04))}
.kepes-tovabb a{display:flex;flex-direction:column;justify-content:center;gap:6px;height:100%;min-height:150px;padding:22px;color:#fff;text-decoration:none}
.kepes-tovabb b{font-family:var(--fd);font-weight:900;font-size:2.4rem;line-height:1;color:var(--signal)}
.kepes-tovabb span{font-weight:600}
.kepes-tovabb svg{width:22px;height:22px;color:var(--signal)}
.kepes-lab .gomb{display:none}

/* the Kovács scene as a Pilóta chat window */
.emlek-cset{padding:0;overflow:hidden;background:#0D1526;border:1px solid #26324D;border-radius:18px;box-shadow:0 30px 60px -30px rgba(7,12,24,.5)}
.cset-fej{display:flex;align-items:center;gap:10px;padding:14px 18px;background:#141F36;border-bottom:1px solid #26324D;color:#fff}
.cset-fej img{width:40px;height:40px;border-radius:50%;border:2px solid var(--signal)}
.cset-fej b{font-family:var(--fd)}
.cset-fej span{margin-left:auto;font-size:.8rem;color:var(--on-ink-2)}
.cset-folyam{display:grid;gap:12px;padding:20px 18px 22px}
.cset-te{justify-self:end;max-width:85%;margin:0;padding:12px 14px;border-radius:16px 16px 4px 16px;background:var(--signal);color:var(--ink);font-weight:600;line-height:1.45}
.cset-lead{position:relative;justify-self:start;max-width:90%;margin:0;padding:12px 14px;border-radius:16px 16px 16px 4px;background:#F3F6FB;color:#070C18;line-height:1.5}
/* transparent, not visibility:hidden: the full reply keeps the bubble size AND stays in the accessibility tree */
.cset-sz{color:transparent}
.cset-irt{position:absolute;top:12px;left:14px;right:14px}
.cset-pontok{display:inline-flex;gap:5px;padding-top:6px}
.cset-pontok i{width:8px;height:8px;border-radius:50%;background:#7A869C;animation:cset-pont 1s infinite ease-in-out}
.cset-pontok i:nth-child(2){animation-delay:.15s}
.cset-pontok i:nth-child(3){animation-delay:.3s}
@keyframes cset-pont{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.cset-piszkozat{justify-self:start;max-width:90%;display:grid;gap:4px;padding:12px 14px;border-radius:12px;background:#141F36;border:1px solid #2C3B5E;border-left:3px solid #2DC4DA;color:#fff;font-size:.9rem;line-height:1.45}
.cset-cimke{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#2DC4DA}
.cset-piszkozat b{font-family:var(--fd)}
.cset-piszkozat span:last-child{color:var(--on-ink-2)}
.emlek-cset.var .cset-te,.emlek-cset.var .cset-lead,.emlek-cset.var .cset-piszkozat{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease-io),transform .45s var(--ease-io)}
.emlek-cset.var.kerdes .cset-te{opacity:1;transform:none}
.emlek-cset.var.kerdes .cset-lead{opacity:1;transform:none;transition-delay:.7s}
.emlek-cset.var.kesz .cset-piszkozat{opacity:1;transform:none;transition-delay:.3s}

/* the order form: two fields */
.urlap .mezo + .mezo{margin-top:4px}
.urlap-megj a{color:inherit}

@media (max-width:1080px){
  .kepes-fo{grid-column:1/-1}
}
@media (max-width:760px){
  .hos h1{font-size:1.75rem;line-height:1.1}
  .rend-lab{grid-template-columns:minmax(0,1fr)}
  /* tree on phones: the branches hang off a line on the left, so "Te" stays the widest node */
  .fa-agak{padding:0 0 0 16px;border-top:0;border-left:2px solid rgba(255,176,32,.35)}
  .fa-te{padding:20px 18px 18px}
  .kepes-fo{flex-direction:column;align-items:stretch;gap:0;padding:0}
  .kepes-fo video{flex:none;width:100%;border-radius:0}
  .kepes-fo .kepes-szoveg{padding:16px 18px 18px}
  .kepes-fo h3{font-size:1.08rem}
  .kepes-tovabb{display:none}
  .kepes-lab .gomb{display:inline-flex}
  .cset-folyam{padding:16px 14px 18px}
}
@media (max-width:360px){
  .hos h1{font-size:1.55rem}
}
@media (prefers-reduced-motion:reduce){
  .cset-pontok i{animation:none}
}
.ar-elso{margin:10px 0 0;font-size:.9rem;line-height:1.5;color:var(--on-ink-2)}

/* how-it-works h2: the hero's line-per-sentence type, on paper */
.cim-sorok{font-weight:900;letter-spacing:-.025em;line-height:1.04}
.cim-sorok .cim-sor{display:block;white-space:nowrap}
.cim-sorok em{font-style:normal;color:var(--signal-text)}
.cim-sorok .cim-o{color:#0E7C8C}

/* tree: every agent node is labelled as an AI agent */
.ai-jel{display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid rgba(255,176,32,.55);border-radius:6px;font-family:var(--fb);font-style:normal;font-size:.72rem;font-weight:700;line-height:1.35;letter-spacing:.01em;color:var(--signal);vertical-align:.2em;white-space:nowrap}
.fa-fo .ai-jel{font-size:.62em}

/* 6b. comparison (card 5866a35a): mirror spine instead of section 3's boxed table.
   Left = an empty AI agent (muted, right-aligned), right = the Pilóta (ink, left-aligned),
   the spine nodes say "+" for what the Pilóta adds. */
.tobb-gerinc{position:relative;max-width:1000px;margin:0 auto}
.tobb-gerinc::before{content:"";position:absolute;left:50%;top:56px;bottom:28px;width:2px;margin-left:-1px;
  background:linear-gradient(var(--mint) 0 72px,var(--signal) 120px);opacity:.55}
.tobb-fej,.tobb-sor{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center}
.tobb-fej{padding-bottom:18px}
.tobb-fej span{font-family:var(--fd);font-weight:800;font-size:1.05rem;line-height:1.3}
.tobb-fej span:first-child{text-align:right;color:var(--muted)}
.tobb-fej span:last-child{color:var(--ink)}
.tobb-fej span:last-child::after{content:"";display:block;width:56px;height:4px;margin-top:8px;border-radius:2px;background:var(--signal)}
.tobb-fej span:first-child::after{content:"";display:block;width:56px;height:4px;margin:8px 0 0 auto;border-radius:2px;background:var(--line)}
.tobb-sor span{align-self:stretch;display:flex;align-items:center;padding:22px 0;line-height:1.5}
.tobb-sor span:first-child{justify-content:flex-end;text-align:right;color:var(--muted);font-size:1.02rem}
.tobb-sor span:last-child{color:var(--ink);font-weight:600;font-size:1.08rem}
.tobb-sor i{justify-self:center;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  font-family:var(--fd);font-style:normal;font-weight:900;font-size:1.35rem;line-height:1;background:var(--signal);color:var(--ink);
  box-shadow:0 0 0 6px var(--paper)}
.tobb-sor + .tobb-sor:not(.tobb-azonos) span{border-top:1px solid var(--line)}
.tobb-azonos{background:rgba(46,207,146,.1);border-radius:14px}
.tobb-azonos span:first-child{color:var(--ink);font-weight:600;font-size:1.08rem}
.tobb-azonos i{background:var(--paper);color:var(--mint-dark);border:2.5px solid var(--mint);box-shadow:none}
.tobb-gerinc .tobb-azonos + .tobb-sor span{border-top:0}
.tobb-azonos span:first-child{padding-left:20px}
.tobb-azonos span:last-child{padding-right:20px}
.tobb-zaro{max-width:1000px;margin:44px auto 0;text-align:center;font-family:var(--fd);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(1.45rem,2.6vw,2.1rem);line-height:1.2;color:var(--muted)}
.tobb-zaro span{color:var(--ink);box-shadow:inset 0 -.32em 0 var(--signal-soft)}
@media (max-width:560px){
  .tobb-gerinc::before{top:64px}
  .tobb-fej,.tobb-sor{grid-template-columns:minmax(0,.82fr) 36px minmax(0,1.18fr)}
  .tobb-gerinc::before{left:calc((100% - 36px) * .41 + 18px)}
  .tobb-fej span{font-size:.9rem}
  .tobb-sor span{padding:16px 0;font-size:.94rem}
  .tobb-sor span:first-child{font-size:.9rem}
  .tobb-azonos span:first-child{font-size:.94rem}
  .tobb-azonos span:first-child{padding-left:8px}
  .tobb-azonos span:last-child{padding-right:8px}
  .tobb-sor i{width:30px;height:30px;font-size:1.1rem;box-shadow:0 0 0 4px var(--paper)}
  .tobb-zaro{margin-top:32px;text-align:left}
}

/* ==========================================================================
   /kepessegek subpage (Felix v3 Doc 1eh2ilUSMuQ4hjWa70NbGWxGec8eu2xQp6wtidVU_nsc)
   Dark opening with the radar and a theme index, then one row per theme:
   sticky icon column on the left, the list in two columns on the right.
   ========================================================================== */
.kt-nyit{position:relative;overflow:hidden;isolation:isolate;padding:88px 0 72px;
  background:radial-gradient(110% 90% at 80% 20%,#0F1C38 0%,var(--ink) 64%);color:var(--on-ink)}
.kt-nyit .hos-radar::after{left:80%;top:30%}
/* Lead with his agents (still render of the hero, kepek/hos-allo.webp); faded into the ink at the edges */
.kt-kep{position:absolute;right:max(0px,calc(50% - 720px));top:40px;width:560px;height:auto;z-index:-1;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}
.kt-nyit .cimke{display:inline-flex;align-items:center;gap:10px;color:var(--on-ink-2);text-transform:none;letter-spacing:0;font-size:.95rem}
.kt-nyit .cimke::before{display:none}
.kt-nyit .pont{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(46,207,146,.18)}
.kt-nyit h1{font-size:clamp(2.3rem,5vw,4.2rem);font-weight:900;color:#fff;letter-spacing:-.025em;line-height:1.04;margin:0 0 20px;max-width:14em}
.kt-al{font-size:1.2rem;color:var(--on-ink-2);max-width:40em;margin:0 0 32px}
.kt-ugro{margin-top:56px}
.kt-ugro ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kt-ugro a{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:10px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--on-ink);text-decoration:none;font-weight:600;font-size:.95rem;line-height:1.3;
  transition:border-color .2s,background .2s}
.kt-ugro a:hover,.kt-ugro a:focus-visible{border-color:rgba(255,176,32,.6);background:rgba(255,176,32,.08)}
.kt-ugro a span{margin-left:auto;font-family:var(--fd);font-weight:800;color:var(--signal)}
.ik-k{width:26px;height:26px;flex:none;color:#fff;--ikon-a:var(--signal)}

.kt-test{padding-top:24px;padding-bottom:40px}
.kt-tema{display:grid;grid-template-columns:300px 1fr;gap:56px;padding:64px 0;border-top:1px solid var(--line)}
.kt-tema:first-child{border-top:0}
.kt-tema-fej{position:sticky;top:calc(var(--hd-h) + 24px);align-self:start}
.kt-ikon{display:grid;place-items:center;width:76px;height:76px;border-radius:18px;background:var(--ink);color:#fff;margin-bottom:20px;
  box-shadow:0 0 0 6px rgba(255,176,32,.12)}
.kt-szam{font-family:var(--fd);font-weight:800;font-size:.9rem;letter-spacing:.08em;color:var(--signal-text);margin:0 0 6px}
.kt-tema h2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;margin:0 0 8px}
.kt-db{margin:0;color:var(--muted);font-size:1rem}
.kt-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;counter-reset:kt}
.kt-lista li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--line);font-size:1.02rem;line-height:1.5}
.kt-lista li::before{content:"";position:absolute;left:2px;top:22px;width:14px;height:8px;border-left:2.5px solid var(--signal);border-bottom:2.5px solid var(--signal);transform:rotate(-45deg)}
.kt-palya{display:block;width:140px;height:140px;margin:0 0 18px -6px}

.kt-zaro{background:var(--ink);color:var(--on-ink);text-align:center;padding:96px 0;position:relative;overflow:hidden}
.kt-zaro::before{content:"";position:absolute;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;
  background:repeating-radial-gradient(circle,rgba(45,196,218,.12) 0 1px,transparent 1px 90px);pointer-events:none}
.kt-zaro .wrap{position:relative}
.kt-zaro h2{color:#fff;font-size:clamp(2rem,4vw,3.2rem);margin:0 0 14px}
.kt-zaro-sor{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--mint);font-size:1.15rem;margin:0 0 28px}
.kt-zaro-sor .ik-k{color:var(--mint)}

/* order band between themes: dark strip on paper, text left, the two main-page buttons right */
.kt-cta{display:flex;align-items:center;justify-content:space-between;gap:20px 32px;margin:8px 0;padding:24px 28px;border-radius:16px;
  background:var(--ink);color:#fff;box-shadow:inset 4px 0 0 var(--signal)}
.kt-cta + .kt-tema{border-top:0}
.kt-cta-sor{margin:0;font-family:var(--fd);font-weight:800;font-size:1.2rem;line-height:1.3;max-width:34ch}
.kt-cta-gombok{display:flex;flex-wrap:wrap;gap:12px;flex:none}
.kt-zaro-gombok{justify-content:center}

@media (max-width:1080px){
  .kt-kep{display:none}
  .kt-ugro ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kt-tema{grid-template-columns:240px 1fr;gap:36px}
}
@media (max-width:860px){
  .kt-ugro ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kt-tema{grid-template-columns:1fr;gap:20px;padding:48px 0}
  .kt-tema-fej{position:static;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}
  .kt-palya{grid-row:span 3;width:96px;height:96px;margin:0}
  .kt-lista{grid-template-columns:1fr}
  .kt-cta{flex-direction:column;align-items:stretch;padding:22px 20px}
  .kt-cta-gombok{flex-direction:column}
  .kt-cta-gombok .gomb{width:100%}
}
@media (max-width:560px){
  .kt-nyit{padding:48px 0 48px}
  .kt-ugro{margin-top:36px}
  .kt-ugro ul{grid-template-columns:1fr}
  .kt-al{font-size:1.08rem}
  .kt-nyit .gomb{width:100%}
}
.kt-kk{max-width:40em;margin:-14px 0 32px;font-size:1.05rem;color:var(--on-ink-2)}
.kt-kk b{color:#fff}

/* ==========================================================================
   3b. Pick your pilot (Zoltán TG 62658, card 5184720b)
   Phone mock on the right copies the relay PWA header (40 px round avatar with the
   status dot, name, status line, activity + menu icons, app.css .fejlec). The grid
   on the left lights one face at a time in sync with the mock (Motion Focus idea:
   one item in focus, the rest step back); a click stops it on the chosen face.
   ========================================================================== */

/* the default picture (B mark) takes a 2x2 slot: 4 + 20 cells fill 6 columns and 4 columns without a gap */
/* while cycling: the face in the mock gets the amber ring, the others dim slightly */
/* the chosen face keeps the ring and gets a check badge */

/* phone mock: same tokens as the app (app.css :root) */

@media (max-width:1080px){
}
/* phone: the mock above the grid, four columns */
@media (max-width:760px){
}
@media (prefers-reduced-motion:reduce){
}

/* ---------- /kepessegek hero on the /vegleges/ colour field (card 501c71a7, f93dcc8d, Zoltán TG 67134) ----------
   The colours and the desktop layers are a copy of eszkoz/vegleges.css .hos (read 2026-11-02): same seven colours,
   same base linear stops. The theme links get a dark glass tile, so their text keeps its contrast on the warm colours. */
.kt-nyit{
  --szin-kek:43,71,242;--szin-indigo:30,28,150;--szin-ibolya:124,44,214;--szin-magenta:226,54,140;
  --szin-korall:255,98,70;--szin-borostyan:255,176,32;--szin-cian:45,196,218;--kt-atmenet:96px;
  padding-bottom:var(--kt-atmenet);
  background:
  radial-gradient(34% 46% at 66% 0%,rgba(var(--szin-borostyan),1),rgba(var(--szin-borostyan),.55) 42%,transparent 74%),
  radial-gradient(30% 56% at 100% 16%,rgba(var(--szin-korall),1),rgba(var(--szin-korall),.5) 48%,transparent 76%),
  radial-gradient(36% 46% at 96% 70%,rgba(var(--szin-magenta),.95),rgba(var(--szin-magenta),.4) 50%,transparent 74%),
  radial-gradient(36% 42% at 62% 82%,rgba(var(--szin-ibolya),.9),transparent 72%),
  radial-gradient(30% 34% at 20% 100%,rgba(var(--szin-korall),.75),transparent 72%),
  radial-gradient(22% 30% at 80% 44%,rgba(var(--szin-cian),.6),transparent 72%),
  radial-gradient(56% 74% at 0% 0%,rgba(var(--szin-kek),1),rgba(var(--szin-kek),.6) 40%,transparent 72%),
  linear-gradient(165deg,#2338D8 0%,#1B23A6 38%,#2A1C94 66%,#4A1F96 100%)}
.kt-nyit .hos-radar{display:none}
/* the transparent still of the 3D stage (the opaque hos-allo.webp sat as a dark box on the colour field) */
.kt-kep{-webkit-mask-image:none;mask-image:none;top:24px}
.kt-nyit::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--kt-atmenet);z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--paper) 0%,rgba(255,255,255,.957) 12.5%,rgba(255,255,255,.844) 25%,rgba(255,255,255,.684) 37.5%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.316) 62.5%,rgba(255,255,255,.156) 75%,rgba(255,255,255,.043) 87.5%,rgba(255,255,255,0) 100%)}
.kt-nyit .cimke,.kt-nyit .kt-al,.kt-nyit .kt-kk,.kt-nyit .kt-szamsor{color:var(--on-ink)}
.kt-ugro a{background:rgba(7,12,24,.62);border-color:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kt-ugro a:hover,.kt-ugro a:focus-visible{background:rgba(7,12,24,.78)}
@media (max-width:860px){
  /* phone: the text runs the whole width, the warm colours sit under the theme list (bottom-anchored, in px) */
  .kt-nyit{--kt-atmenet:40px;padding-bottom:var(--kt-atmenet);background:
    radial-gradient(240px 190px at 82% calc(100% - 300px),rgba(var(--szin-borostyan),1),rgba(var(--szin-borostyan),.5) 46%,transparent 76%),
    radial-gradient(220px 230px at 104% calc(100% - 160px),rgba(var(--szin-korall),1),rgba(var(--szin-korall),.45) 50%,transparent 76%),
    radial-gradient(230px 210px at 0% calc(100% - 170px),rgba(var(--szin-magenta),.95),rgba(var(--szin-magenta),.4) 50%,transparent 76%),
    radial-gradient(150px 110px at 34% calc(100% - 290px),rgba(var(--szin-cian),.6),transparent 72%),
    radial-gradient(300px 260px at 100% 30%,rgba(var(--szin-ibolya),.9),transparent 74%),
    radial-gradient(260px 260px at 0% 100%,rgba(var(--szin-korall),.7),transparent 72%),
    radial-gradient(320px 300px at 100% 100%,rgba(var(--szin-magenta),.7),transparent 72%),
    radial-gradient(360px 260px at 0% 0%,rgba(var(--szin-kek),1),transparent 72%),
    linear-gradient(170deg,#2338D8 0%,#1B23A6 40%,#2A1C94 70%,#4A1F96 100%)}
  /* lap-atvetel URES SAV 2026-11-02: hero to first theme was 191 px at 390 (limit 120); the faded hero bottom already
     reads as space, so the first theme starts closer */
  .kt-test .kt-tema:first-child{padding-top:24px}
  /* same gate, the bottom: last theme to the closing band 201 px, closing band to the footer 147 px (both older than this
     change, measured 2026-11-02) */
  .kt-test .kt-tema:last-child{padding-bottom:16px}
  .kt-zaro{padding:44px 0 56px}
}

/* KK mark after the Pilóta logo in the header, small (brand manual section 1, same rules as /vegleges/stilus.css;
   card 69abf224, Zoltán TG 67077) */
.kk-termek{display:flex;align-items:center;gap:10px;margin:0 0 0 6px;padding-left:18px;border-left:1px solid rgba(255,255,255,.16);color:var(--on-ink-2);font-size:.8rem;line-height:1.2;white-space:nowrap}
.kk-termek img{display:block;height:30px;width:auto}
.kk-termek span{max-width:8.5em;white-space:normal}
@media (max-width:1240px){
  .kk-termek{padding-left:12px;margin-left:2px}
  .kk-termek span{display:none}
}
@media (max-width:1080px){
  .kk-termek{margin-left:auto;border-left:0;padding-left:0}
  .kk-termek span{display:block;font-size:.72rem;max-width:7.5em}
}
@media (max-width:760px){
  .kk-termek{gap:7px}
  .kk-termek img{height:24px}
  .kk-termek span{font-size:.68rem;max-width:6.6em}
}
@media (max-width:360px){.kk-termek img{display:none}}
/* header band: the reference's deep indigo instead of the near-black grey bar (Zoltán TG 66397, /vegleges/stilus.css;
   card 69abf224). .fej-csak-logo pages keep their transparent band (partner-wl.css) */
.fej{background:rgba(30,28,150,.95);border-bottom-color:rgba(255,255,255,.12)}
@media (max-width:860px){.menu.nyitva{background:rgb(30,28,150)}}

/* ==========================================================================
   /vegleges/ additions (card f93dcc8d): appended after the v3 CSS by vegleges-epit.py
   ========================================================================== */

/* header: B logo left, "a Kreatív Kontroll terméke" with the KK logo top right (Zoltán TG 65615) */
.marka-kep{display:flex;align-items:center;border:0}
.marka-kep img{display:block;height:44px;width:auto}
.kk-termek{display:flex;align-items:center;gap:10px;margin:0 0 0 6px;padding-left:18px;border-left:1px solid rgba(255,255,255,.16);color:var(--on-ink-2);font-size:.8rem;line-height:1.2;white-space:nowrap}
.kk-termek img{display:block;height:30px;width:auto}
.kk-termek span{max-width:8.5em;white-space:normal}

/* order section: text and form left, the phone card right, both columns carry content (Zoltán TG 65632) */
.veg-jel{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:stretch}
.veg-jel .urlap{margin-top:24px}
.veg-telefon{background:var(--ink);color:var(--on-ink);border-radius:14px;padding:32px 28px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.veg-telefon svg{width:100%;max-width:300px;height:auto}
.veg-telefon p{text-align:center;font-size:.92rem;color:var(--on-ink-2);margin:16px 0 0;max-width:24em}

@media (max-width:1240px){
  .kk-termek{padding-left:12px;margin-left:2px}
  .kk-termek span{display:none}
}
@media (max-width:1080px){
  .kk-termek{margin-left:auto;border-left:0;padding-left:0}
  .kk-termek span{display:block;font-size:.72rem;max-width:7.5em}
  .menu-gomb{margin-left:12px}
}
@media (max-width:860px){
  .veg-jel{grid-template-columns:minmax(0,1fr)}
  .veg-telefon{padding:26px 20px}
}
@media (max-width:760px){
  .marka-kep img{height:34px}
  .kk-termek{gap:7px}
  .kk-termek img{height:24px}
  .kk-termek span{font-size:.68rem;max-width:6.6em}
  .menu-gomb{margin-left:10px;padding:0 10px}
}
@media (max-width:360px){
  .marka-kep img{height:30px}
  .kk-termek img{display:none}
}
.lab .marka-kep{border-bottom:0}
.lab .marka-kep img{height:36px;width:auto}


/* payback: the calculator spans the full width, inputs left, results right (1440: left column was
   empty for ~500 px under a two-line heading) */
@media (min-width:861px){
  .megterul .meg-racs{grid-template-columns:minmax(0,1fr);gap:28px}
  .megterul .szakasz-fej{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:56px;align-items:end}
  .megterul .szakasz-fej .cimke{grid-column:1 / -1}
  .megterul .szakasz-fej h2{margin-bottom:0}
  .megterul .szakasz-fej p{margin:0}
  .megterul .kalk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"ora eredmeny" "dij oszlopok" "osszevet lab";column-gap:56px;align-items:start}
  .megterul .kalk > .kalk-mezo:first-child{grid-area:ora}
  .megterul .kalk > fieldset.kalk-mezo{grid-area:dij}
  .megterul .kalk-eredmeny{grid-area:eredmeny}
  .megterul .kalk-oszlopok{grid-area:oszlopok}
  .megterul .kalk-osszevet{grid-area:osszevet;margin:0}
  .megterul .kalk-lab{grid-area:lab;margin:0}
}

/* hero H1: two states in one grid cell, so the box keeps the taller state's height while they swap
   (Zoltán TG 65758, Lead 85560; vegleges/hos-valto.js toggles .b). Without JS, and with reduced motion, B stands. */
.hos h1 .h1-valto{display:grid}
.hos h1 .h1-all{grid-area:1 / 1;transition:opacity .7s var(--ease-out),visibility 0s linear 0s}
.hos h1 .h1-a,
.js .hos h1 .h1-valto:not(.b) .h1-b{opacity:0;visibility:hidden;transition:opacity .7s var(--ease-out),visibility 0s linear .7s}
.js .hos h1 .h1-valto:not(.b) .h1-a{opacity:1;visibility:visible}
/* "AI-asszisztensek" broke after the hyphen at 1440 (five-line H1 measured 2026-11-01) */
.hos h1 .egyben{display:inline;color:inherit;white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .js .hos h1 .h1-valto .h1-a{opacity:0;visibility:hidden}
  .js .hos h1 .h1-valto .h1-b{opacity:1;visibility:visible}
}

/* hero right column: the 3D stage from the top of the hero, the three gauges under it in one row, the way the /pro
   page had .instr/.gauge under its right-hand element (Zoltán TG 65744, 61583, 65737; Lead 85545, 85550) */
.hos-jobb .tud-racs{margin:0}
@media (min-width:861px){
  .hos-racs{grid-template-areas:"cimke jobb" "h1 jobb" "lead jobb" "os jobb" "cta jobb" "bizalom jobb";grid-template-rows:auto auto auto auto auto 1fr}
  /* pulled up into the hero's top padding: Lead's bubble lands about 40 px under the header (MÉRCE 1, 2) */
  .hos-jobb{grid-area:jobb;align-self:start;display:flex;flex-direction:column;margin:var(--jobb-fel,-104px) -28px 0 0}
  .hos-jobb .hos-szinpad{align-self:stretch;height:auto;aspect-ratio:3 / 2;min-height:0;margin:0}
  .hos-jobb .tud-racs{gap:10px;margin-top:var(--tud-fel,-8px);position:relative;z-index:2}
  .hos-jobb .tud{padding:14px 10px}
  .hos-jobb .tud b{font-size:clamp(1.2rem,1.9vw,1.6rem)}
  .hos-jobb .tud span{font-size:.72rem}
  /* state B is longer than the old H1; at 3.2rem it took five lines at 1440 and the left column outgrew the right */
  .hos h1{font-size:clamp(2.1rem,3vw,2.75rem)}
}
/* tall desktop windows: a taller stage and a higher camera (orbit seen rounder, js/hos3d.js reads --kamera-*), so the
   scene plus the gauges reach down towards the left column's end. Zoltán's 1280x608 keeps the flat 3:2 framing.
   Assumption, 2026-11-01: 760 px is where the flat scene left over 200 px empty under the gauges (1440x900 capture).
   Values tuned on the 1440x900 and 1920x1080 captures 2026-11-01: camera height 12 of 10/12/14 (14 looked down on
   Lead too steeply), the bubble 50 px under the header, the gauges level with the order button. */
@media (min-width:861px) and (min-height:760px){
  .hos-jobb{--jobb-fel:-215px;--tud-fel:-80px}
  .hos-jobb .hos-szinpad{aspect-ratio:auto;height:680px;--kamera-mag:12;--kamera-cel:1.7;--kamera-tav:.88}
}
@media (max-width:860px){
  .hos-racs{grid-template-areas:"cimke" "h1" "szinpad" "os" "cta" "lead" "bizalom" "tud"}
  .hos-jobb{display:contents}
  /* bottom margin: the hero grid has no bottom padding on phones (.wrap padding wins); keeps the gauges above the hero fade */
  .hos-jobb .tud-racs{grid-area:tud;margin:22px 0 calc(var(--atmenet-h) + 16px)}
  .hos-cta{margin-bottom:22px}
}

/* problem section: "Van más út." takes the week grid's column (Zoltán TG 65778, Lead 85577). Text leads, one icon a line. */
.mas-ut{padding:30px 28px;border-radius:16px;background:var(--ink);color:var(--on-ink);margin-top:8px}
.mas-ut h3{font-family:var(--fd);font-size:1.7rem;font-weight:800;letter-spacing:-.02em;color:#fff;margin:0 0 6px}
.mas-ut>p{color:var(--on-ink-2);margin:0 0 20px}
.mas-ut-lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mas-ut-lista li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.mas-ut-lista .ik{flex:none;width:26px;height:26px;margin-top:1px;color:#fff;--ikon-a:var(--signal)}
.mas-ut-lista span{color:#fff;font-weight:600;line-height:1.45}

/* capability cards: poster plus play mark, the video opens on click in a dialog (TG 65796, Lead 85591) */
.kepes-lejatszo{position:relative;display:block;width:100%;padding:0;border:0;background:#000;cursor:pointer;aspect-ratio:16 / 9;overflow:hidden;font:inherit}
.kepes-lejatszo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease-out),opacity .3s}
.kepes-lejatszo:hover img{transform:scale(1.03);opacity:.85}
.kepes-lejatszo:focus-visible{outline:3px solid var(--signal);outline-offset:-3px}
.lejatszo-jel{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--signal);box-shadow:0 12px 30px -8px rgba(0,0,0,.7);transition:transform .25s var(--ease-out)}
.lejatszo-jel::before{content:"";position:absolute;left:25px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--ink)}
.kepes-lejatszo:hover .lejatszo-jel{transform:scale(1.08)}
.kepes-fo .kepes-lejatszo{flex:0 0 60%;width:60%;border-radius:10px}
/* width also bounded by the viewport height, so a landscape phone keeps the controls and the close button on screen
   (Codex P2 on 58633d618a): 140 px = the close button above plus air */
.video-ablak{padding:0;border:0;background:transparent;width:min(1100px,92vw,calc((100svh - 140px) * 16 / 9));max-width:none;max-height:none;overflow:visible}
.video-ablak::backdrop{background:rgba(4,8,16,.85)}
.video-ablak video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;background:#000;border-radius:12px}
.video-zar{position:absolute;right:0;top:-56px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:1.7rem;line-height:1;cursor:pointer}
.video-zar:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
@media (max-width:760px){
  .kepes-fo .kepes-lejatszo{flex:none;width:100%;border-radius:0}
  .lejatszo-jel{width:54px;height:54px;margin:-27px 0 0 -27px}
  .lejatszo-jel::before{left:21px;top:16px;border-width:11px 0 11px 17px}
  .video-ablak{width:min(100vw,calc((100svh - 140px) * 16 / 9))}
  .video-ablak video{border-radius:0}
  .video-zar{right:12px}
}

/* how it works: one image series, the image closes each card at the bottom edge, so no empty band under card 3
   (TG 65810, Lead 85594) */
.folyam>li{display:flex;flex-direction:column;overflow:hidden}
.folyam>li>:nth-last-child(2){margin-bottom:22px}
.folyam-kep{display:block;flex:1 0 auto;width:calc(100% + 56px);max-width:none;height:auto;min-height:220px;aspect-ratio:4 / 3;object-fit:cover;margin:0 -28px -28px;background:var(--ink)}

/* Lead's portrait video, larger (TG 65789, Lead 85587): 360 px video in a 380 px phone frame on desktop */
.rend-lab{grid-template-columns:minmax(0,1fr) 380px}
@media (max-width:1080px){
  .rend-lab{grid-template-columns:minmax(0,1fr)}
  .vid-telefon{max-width:380px;margin:0 auto}
}
@media (max-width:760px){
  /* the video takes the content width, no frame padding (MÉRCE 26: at least 340 px at 390) */
  .vid-telefon{max-width:none}
  .telefon-keret{padding:0;border-radius:24px;box-shadow:0 30px 60px -30px rgba(7,12,24,.6)}
}

/* ---------- background, round 2 (Zoltán TG 65779, 66094; Lead 86146, card f93dcc8d): the suara.hu look itself ----------
   suara.hu (measured 2026-11-01, store/pilota-vegleges-1101/suara/suara-hatter.md): the first screen is a saturated,
   many-coloured field with large rounded glass panels, melting softly into the base below. Round 1 took the technique
   with faint glows (0.28-0.30 alpha) and read dark and single-coloured. Here the colour is the point: vivid blue,
   indigo and violet carry the text column (white text keeps 4.5:1 there), amber, coral, pink and cyan sit behind the
   3D stage and the right edge. Own colour values, not suara's. Pure CSS gradients, the panels are empty boxes. */
:root{
  --szin-kek:43,71,242;        /* vivid blue */
  --szin-indigo:30,28,150;
  --szin-ibolya:124,44,214;    /* violet */
  --szin-magenta:226,54,140;
  --szin-korall:255,98,70;
  --szin-borostyan:255,176,32; /* the Pilóta amber */
  --szin-cian:45,196,218;      /* the Pilóta cyan */
  /* hero bottom fade: room is reserved under the content (padding below), so no text ever sits on it */
  --hos-atmenet:96px;
}
@media (max-width:860px){:root{--hos-atmenet:56px}}
.hos-radar{display:none}
.hos{background:
  radial-gradient(34% 46% at 66% 0%,rgba(var(--szin-borostyan),1),rgba(var(--szin-borostyan),.55) 42%,transparent 74%),
  radial-gradient(30% 56% at 100% 16%,rgba(var(--szin-korall),1),rgba(var(--szin-korall),.5) 48%,transparent 76%),
  radial-gradient(36% 46% at 96% 70%,rgba(var(--szin-magenta),.95),rgba(var(--szin-magenta),.4) 50%,transparent 74%),
  radial-gradient(36% 42% at 62% 82%,rgba(var(--szin-ibolya),.9),transparent 72%),
  radial-gradient(30% 34% at 20% 100%,rgba(var(--szin-korall),.75),transparent 72%),
  radial-gradient(22% 30% at 80% 44%,rgba(var(--szin-cian),.6),transparent 72%),
  radial-gradient(56% 74% at 0% 0%,rgba(var(--szin-kek),1),rgba(var(--szin-kek),.6) 40%,transparent 72%),
  linear-gradient(165deg,#2338D8 0%,#1B23A6 38%,#2A1C94 66%,#4A1F96 100%)}
@media (max-width:860px){
  /* phone: the text runs the whole width; the warm colours go behind the 3D stage band (about 150-400 px into the
     hero, 390 capture 2026-11-01; 60 px lower since the 2026-11-02 top padding, the H1 lines sat on amber), sizes in px so
     they stay put however long the hero grows */
  .hos{background:
    radial-gradient(240px 190px at 82% 250px,rgba(var(--szin-borostyan),1),rgba(var(--szin-borostyan),.5) 46%,transparent 76%),
    radial-gradient(220px 230px at 104% 400px,rgba(var(--szin-korall),1),rgba(var(--szin-korall),.45) 50%,transparent 76%),
    radial-gradient(230px 210px at 0% 390px,rgba(var(--szin-magenta),.95),rgba(var(--szin-magenta),.4) 50%,transparent 76%),
    radial-gradient(150px 110px at 34% 270px,rgba(var(--szin-cian),.6),transparent 72%),
    radial-gradient(300px 260px at 100% 680px,rgba(var(--szin-ibolya),.9),transparent 74%),
    radial-gradient(260px 260px at 0% 100%,rgba(var(--szin-korall),.7),transparent 72%),
    radial-gradient(320px 300px at 100% 100%,rgba(var(--szin-magenta),.7),transparent 72%),
    radial-gradient(360px 260px at 0% 0%,rgba(var(--szin-kek),1),transparent 72%),
    linear-gradient(170deg,#2338D8 0%,#1B23A6 40%,#2A1C94 70%,#4A1F96 100%)}
}
.hos::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hos-atmenet);z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--paper) 0%,rgba(255,255,255,.957) 12.5%,rgba(255,255,255,.844) 25%,rgba(255,255,255,.684) 37.5%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.316) 62.5%,rgba(255,255,255,.156) 75%,rgba(255,255,255,.043) 87.5%,rgba(255,255,255,0) 100%)}
.hos-racs{padding-bottom:var(--hos-atmenet)}
@media (max-width:860px){
  .hos-racs{padding-bottom:var(--hos-atmenet)}
  .hos-jobb .tud-racs{margin-bottom:16px}
}
/* glass panels: large rounded boxes, a lighter fill that also lifts the saturation behind them, a hairline edge.
   Placed off the text column (desktop) and off every text line (phone), measured on the 1440 and 390 captures. */
/* since 2026-11-02 the panels live inside .hos-szinpad (vegleges-epit.py) and their box ends 16 px above the gauge row
   (--tud-fel pulls the gauges up into the stage), so no panel can reach a gauge card at any window size (Zoltán TG 66397,
   MÉRCE M3). The panels may run past the stage top and right edge; the hero clips them. */
.hos-uveg{position:absolute;left:0;right:0;top:0;bottom:calc(16px - var(--tud-fel,0px));z-index:-1;pointer-events:none}
.hos-uveg i{position:absolute;display:block;border-radius:56px;border:1px solid rgba(255,255,255,.30);
  background:linear-gradient(150deg,rgba(255,255,255,.20),rgba(255,255,255,.06) 46%,rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(22px) saturate(1.25);backdrop-filter:blur(22px) saturate(1.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 30px 80px -40px rgba(20,10,60,.55)}
.hos-uveg i:nth-child(1){left:14%;top:4%;width:64%;bottom:26%}
.hos-uveg i:nth-child(2){left:calc(100% - 150px);top:22%;width:380px;bottom:6%;border-radius:64px}
.hos-uveg i:nth-child(3){left:-4%;top:46%;width:46%;bottom:0;border-radius:48px}
.hos-uveg i:nth-child(4){display:none}
@media (max-width:860px){
  .hos-uveg i{border-radius:32px}
  .hos-uveg i:nth-child(1){left:52%;top:-2%;width:240px;bottom:6%}
  .hos-uveg i:nth-child(2){left:calc(100% - 70px);top:46%;width:200px;bottom:0;border-radius:28px}
  .hos-uveg i:nth-child(3){left:-70px;top:12%;width:150px;bottom:28%}
}
/* text on the coloured field: the lighter body grey (#AEB9CC) lost contrast over vivid blue and violet */
.hos-cimke,.hos-lead,.os-szoveg,.hos-bizalom{color:#E9EDF6}
.os-logo{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
/* the three gauges become dark glass panels, so their small capitals keep 4.5:1 over violet and pink */
.hos .tud{background:rgba(14,14,52,.58);border-color:rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hos .tud span{color:rgba(255,255,255,.86)}
.hos .mini-pecset{color:#8DF2C8}

/* section fades: smoothstep alpha (1 - 3t^2 + 2t^3) instead of round 1's steep start, the largest step per pixel row
   is 1.5x the mean (M5 measured 14.6 on the 40 px #kepessegek fade with the old curve, 2026-11-01). --f is the colour. */
:root{--atmenet-h:48px}
#kepessegek{--atmenet-h:40px}
/* phones: 40 px (32 px gave a 12.0 step at #garancia, M5 2026-11-01); the nearest text line of a dark section is 46 px in */
@media (max-width:760px){:root{--atmenet-h:36px}}
/* #kepessegek also carries the card class .kepes (v3): its 1 px border and 14 px corners framed the section and left a
   dark hairline above the top fade (M5: 216 at 1440 and 390) */
#kepessegek{border:0;border-radius:0}
/* the same class collision set its desktop top padding to 24 px (.kepes beats .szakasz by order): the eyebrow sat on
   the 40 px top fade (M22 p2 4.35, 2026-11-01). 64 px keeps the fade above it; phones already get .szakasz 64 px */
@media (min-width:761px){#kepessegek{padding-top:var(--szakasz-pad)}}
/* dark sections: the fades from and to the neighbouring colour (top --elotte, bottom --utana) on ::before/::after,
   plus one or two large colour pools of the hero palette that die out well before the section edge */
#hogyan-epul,#kepessegek,#egy-nap,#ki-all-mogotte,#garancia,.negy,.merre,#integraciok{position:relative;isolation:isolate}
#hogyan-epul::before,#kepessegek::before,#egy-nap::before,#ki-all-mogotte::before,#garancia::before,.negy::before,.merre::before,#integraciok::before,
#hogyan-epul::after,#kepessegek::after,#egy-nap::after,#ki-all-mogotte::after,#garancia::after,.negy::after,.merre::after,#integraciok::after,
.zaro::after{content:"";position:absolute;left:0;right:0;height:var(--atmenet-h);z-index:-1;pointer-events:none}
#hogyan-epul::before,#kepessegek::before,#egy-nap::before,#ki-all-mogotte::before,#garancia::before,.negy::before,.merre::before,#integraciok::before{top:0;--f:var(--elotte,transparent);
  background:linear-gradient(to bottom,var(--a0) 0%,var(--a1) 12.5%,var(--a2) 25%,var(--a3) 37.5%,var(--a4) 50%,var(--a5) 62.5%,var(--a6) 75%,var(--a7) 87.5%,transparent 100%)}
#hogyan-epul::after,#kepessegek::after,#egy-nap::after,#ki-all-mogotte::after,#garancia::after,.negy::after,.merre::after,#integraciok::after{bottom:0;--f:var(--utana,transparent);
  background:linear-gradient(to top,var(--a0) 0%,var(--a1) 12.5%,var(--a2) 25%,var(--a3) 37.5%,var(--a4) 50%,var(--a5) 62.5%,var(--a6) 75%,var(--a7) 87.5%,transparent 100%)}
#hogyan-epul::before,#kepessegek::before,#egy-nap::before,#ki-all-mogotte::before,#garancia::before,.negy::before,.merre::before,#integraciok::before,
#hogyan-epul::after,#kepessegek::after,#egy-nap::after,#ki-all-mogotte::after,#garancia::after,.negy::after,.merre::after,#integraciok::after{
  --a0:color-mix(in srgb,var(--f) 100%,transparent);--a1:color-mix(in srgb,var(--f) 95.7%,transparent);--a2:color-mix(in srgb,var(--f) 84.4%,transparent);
  --a3:color-mix(in srgb,var(--f) 68.4%,transparent);--a4:color-mix(in srgb,var(--f) 50%,transparent);--a5:color-mix(in srgb,var(--f) 31.6%,transparent);
  --a6:color-mix(in srgb,var(--f) 15.6%,transparent);--a7:color-mix(in srgb,var(--f) 4.3%,transparent)}
#hogyan-epul,#egy-nap,#ki-all-mogotte,.negy{background:
  radial-gradient(38% 46% at 86% 26%,rgba(var(--szin-ibolya),.42),transparent 72%),
  radial-gradient(42% 50% at 10% 74%,rgba(var(--szin-kek),.48),transparent 72%),
  radial-gradient(26% 30% at 70% 84%,rgba(var(--szin-magenta),.22),transparent 72%),
  var(--ink-2)}
#kepessegek{background:
  /* the blue pool sits under the cards, not under the eyebrow label (M22 p2 3.8 at 12% 20%, 2026-11-01) */
  radial-gradient(40% 40% at 10% 66%,rgba(var(--szin-kek),.46),transparent 72%),
  radial-gradient(38% 46% at 90% 68%,rgba(var(--szin-magenta),.42),transparent 72%),
  radial-gradient(34% 30% at 88% 14%,rgba(var(--szin-ibolya),.5),transparent 72%),
  linear-gradient(#141F36,#0D1526)}
#garancia,.merre{background:
  radial-gradient(40% 52% at 82% 30%,rgba(var(--szin-korall),.26),rgba(var(--szin-magenta),.14) 45%,transparent 72%),
  radial-gradient(42% 54% at 14% 72%,rgba(var(--szin-kek),.46),transparent 72%),
  var(--ink)}
/* the pseudo fades (z-index -1 in the isolated section) paint under the in-flow content, over the section background */
#hogyan-epul,#kepessegek,#egy-nap,#garancia,#ki-all-mogotte{--elotte:var(--paper);--utana:var(--paper)}
.negy{--elotte:var(--paper);--utana:var(--ink)}
.merre{--elotte:var(--ink);--utana:var(--paper)}
/* integrations (Lead 86187) follow the guarantee: ink meets ink there, the fade runs only into the white price section */
#garancia{--utana:var(--ink)}
#integraciok{--elotte:var(--ink);--utana:var(--paper);background:
  radial-gradient(40% 48% at 86% 24%,rgba(var(--szin-ibolya),.40),transparent 72%),
  radial-gradient(42% 52% at 10% 70%,rgba(var(--szin-kek),.44),transparent 72%),
  radial-gradient(26% 32% at 62% 92%,rgba(var(--szin-borostyan),.16),transparent 72%),
  var(--ink)}
/* closing section: the dark text overlay (.zaro::before) covered round 1's photo-layer fade on the left (M5 measured a
   214 step at 1440); the fade now sits on .zaro::after, above that overlay, plus a bottom fade into the footer ink */
.zaro::after{top:0;bottom:0;height:auto;
  background:linear-gradient(to bottom,var(--paper-2) 0,rgba(241,244,249,.957) calc(var(--atmenet-h) * .125),rgba(241,244,249,.844) calc(var(--atmenet-h) * .25),rgba(241,244,249,.684) calc(var(--atmenet-h) * .375),rgba(241,244,249,.5) calc(var(--atmenet-h) * .5),rgba(241,244,249,.316) calc(var(--atmenet-h) * .625),rgba(241,244,249,.156) calc(var(--atmenet-h) * .75),rgba(241,244,249,.043) calc(var(--atmenet-h) * .875),rgba(241,244,249,0) var(--atmenet-h)),
    linear-gradient(to top,var(--ink) 0,rgba(7,12,24,.957) calc(var(--zaro-le) * .125),rgba(7,12,24,.844) calc(var(--zaro-le) * .25),rgba(7,12,24,.684) calc(var(--zaro-le) * .375),rgba(7,12,24,.5) calc(var(--zaro-le) * .5),rgba(7,12,24,.316) calc(var(--zaro-le) * .625),rgba(7,12,24,.156) calc(var(--zaro-le) * .75),rgba(7,12,24,.043) calc(var(--zaro-le) * .875),rgba(7,12,24,0) var(--zaro-le))}
.zaro{--zaro-le:120px}
@media (max-width:760px){.zaro{--zaro-le:48px}}
/* light sections: white and the light grey (#F1F4F9) meet in a 48 px blend instead of an edge; --h-fel/--h-le name the
   neighbour's colour at the top and bottom (default white) */
.szakasz.halvany{background:linear-gradient(var(--h-fel,var(--paper)) 0,var(--paper-2) 48px,var(--paper-2) calc(100% - 48px),var(--h-le,var(--paper)) 100%)}
/* grey meets grey: the section after the product overview (.szakagensek starts grey), FAQ -> order, order -> closing photo */
section[aria-labelledby="atker-cim"],#gyik,#jelentkezes{--h-le:var(--paper-2)}
#jelentkezes{--h-fel:var(--paper-2)}

/* closing note: two lines, off the laptop in the photo (Zoltán TG 65829, Lead 85609). The photo moves 10 % right on
   wide screens (its left part is under the dark overlay anyway), so the first sentence fits beside the laptop.
   Laptop area measured on the 1440 and 1920 captures 2026-11-01 (report, MÉRCE 45). */
.zaro-ket-sor{font-size:1.06rem}
@media (min-width:1281px){
  .zaro-kep img{transform:translateX(10%)}
  .zaro-ket-sor{white-space:nowrap}
}
@media (max-width:1280px){
  .zaro-ket-sor br{display:none}
  .zaro-ket-sor{max-width:30em}
}

/* one sentence where the pilot picker was (Zoltán TG 65785, Lead 85635): the page's statement style, plenty of air,
   a soft step from the light grey section above to white */
.szakagensek{background:linear-gradient(var(--paper-2),var(--paper))}
.szakagensek h2{margin:0;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.15;letter-spacing:-.025em;max-width:18em;text-wrap:balance}

/* "Nálunk is így megy." with the KK logo on its left, about two lines high (Zoltán TG 65786, Lead 85649) */
.kk-kiemelt-sor{display:flex;align-items:center;gap:20px}
.kk-kiemelt-logo{flex:none;display:block;height:56px;width:auto}
/* phones: the logo goes above, beside it the text narrowed to an eight-line column (390 capture 2026-11-01) */
@media (max-width:760px){
  .kk-kiemelt-sor{flex-direction:column;align-items:flex-start;gap:12px}
  .kk-kiemelt-logo{height:44px}
}
/* the bold pair of sentences (TG 65784) also takes the heading colour, so the emphasis reads at a glance */
.szakasz-fej p strong{color:var(--ink)}
.sotet .szakasz-fej p strong{color:#fff}

/* "Ugyanaz a heted" table under 680 px: no sideways scroll, every row becomes a card, the two columns stack
   and each cell names its column from data-cimke (Lead 85762 task 1). The table min-width is 620 px, so it
   fits from 668 px up (620 + 2 x 20 px wrap padding + border; measured 2026-11-01). Generated label with
   empty alt text: screen readers get the column from the hidden header row (explicit ARIA roles in the HTML). */
@media (max-width:680px){
  .tabla-tarto{overflow:visible;border:0;border-radius:0}
  .het-tabla{display:block;min-width:0}
  .het-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .het-tabla tbody{display:grid;gap:14px}
  .het-tabla tr{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
  .het-tabla tbody th,.het-tabla td{display:block;width:auto;padding:14px 18px}
  .het-tabla tbody th{border-top:0;font-family:var(--fd);font-size:1.02rem;line-height:1.35}
  .het-tabla td::before{content:attr(data-cimke);content:attr(data-cimke) / "";display:block;margin-bottom:4px;font-size:.94rem;font-weight:700;color:var(--ink)}
  .het-tabla td.pilota::before{color:var(--signal)}
}

/* integrations grid (Zoltán TG 66111, Lead 86187): glass tiles, one white icon each (Simple Icons, or the vendor's own mark
   as a white silhouette), the name under it. Level 1 tiles carry the amber edge. Icon 44 px desktop, 40 px phone (MÉRCE M2). */
.int-csoport-cim{font-family:var(--fd);font-size:1.25rem;font-weight:800;color:#fff;margin:40px 0 6px}
/* group subtitle (Felix's Doc 1bReT, 19.25): one line under the group title, the grid follows */
.int-csoport-al{max-width:760px;margin:0 0 16px;font-size:1rem;line-height:1.55;color:#E9EDF6}
.integraciok .szakasz-fej+.int-csoport-cim{margin-top:8px}
.int-racs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}
.int-elem{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;padding:18px 8px 14px;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);text-align:center}
.int-elem img{display:block;width:auto;height:44px;max-width:100%;object-fit:contain}
.int-elem span{font-size:.86rem;line-height:1.25;color:#E9EDF6;font-weight:600}
.int-kesz .int-elem{border-color:rgba(255,176,32,.42);background:linear-gradient(160deg,rgba(255,176,32,.14),rgba(255,255,255,.03) 70%)}
@media (max-width:760px){
  .int-racs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .int-elem{padding:14px 6px 12px;gap:8px}
  .int-elem img{height:40px}
  .int-elem span{font-size:.8rem}
}

/* org chart: the "Te" node spans more than half the content width (1184 px at 1440), so the top of the tree does not
   read as a half-empty band (vegleges-uresseg.cjs, 50 % / 300 px; Lead 86330). 640 px, still narrower than the branch
   grid under it. Measured 2026-11-01: 560 px gave a 424 px band. */
.fa-te{width:min(640px,100%)}

/* ---------- fix round 2026-11-02 (card f93dcc8d, Lead 86888, Zoltán TG 66397-66408) ---------- */
/* header: the hero's deep indigo instead of the near-black grey bar (TG 66397). Over the white sections the bar reads
   rgb(41,39,155); menu text #E8EDF5 on it about 10:1, the KK line #AEB9CC about 6:1 (MÉRCE M1, measured on the build) */
.fej{background:rgba(30,28,150,.95);border-bottom-color:rgba(255,255,255,.12)}
@media (max-width:860px){.menu.nyitva{background:rgb(30,28,150)}}
/* hero: lower, with air under the header; no full-window height, so no empty colour band under the content (TG 66397).
   Assumption, 2026-11-02: 96 px top padding = 96 px from the header to the H1's first line at 1440 (MÉRCE M2: 72) */
.hos-racs{padding-top:96px;min-height:0;max-height:none}
@media (max-width:860px){.hos-racs{padding-top:48px}}
/* agent tiles of the 3D stage and their labels in the page palette (TG 66399): indigo-violet tiles (js/hos3d.js reads
   --lapka-szin and --lapka-izzas from the stage), indigo glass labels with a violet hairline */
.hos-szinpad{--lapka-szin:#4B3BE8;--lapka-izzas:#2A1CA8}
.hos .ag-cimke{background:rgba(30,28,150,.86);border-color:rgba(166,140,255,.45)}
.hos .ag-cimke.aktiv{background:rgba(30,28,150,.95);border-color:var(--signal)}
/* section rhythm (TG 66401, 66403: "túl sok white space"): one padding token for every section, 56 px desktop, 44 px phone;
   48 px desktop, 36 px phone since the gate's empty-band check (store/lap-atvetel-ures-sav.cjs, 2026-11-02) counts card
   padding as empty too: section padding plus card padding stays under 160 / 120 px. The dark-section fades
   (--atmenet-h 48 / 36 px) stay inside that padding, so no text sits on a fade. */
:root{--szakasz-pad:48px}
@media (max-width:760px){:root{--szakasz-pad:36px}}
.szakasz,.garancia,.merre{padding-top:var(--szakasz-pad);padding-bottom:var(--szakasz-pad)}
/* phones: the gauges end where the hero fade starts (the fade is the hero's bottom padding) */
@media (max-width:860px){.hos-jobb .tud-racs{margin-bottom:0}}
.szakasz-fej{margin-bottom:32px}
@media (max-width:760px){.szakasz-fej{margin-bottom:24px}}
/* the headings lost their kicker labels (TG 66408): the H2 opens the section */
.szakasz-fej h2{margin-top:0}
/* Lead's video (TG 66406): under the chat sentence, the full content width, landscape 16:9 on every width.
   The KK line and the chat card share the row above it on desktop. */
.rend-lab{grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.rend-lab-bal{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
.vid-szeles{margin:0}
.vid-szeles video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;border-radius:16px;background:#000;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.vid-szeles figcaption{text-align:center;color:var(--on-ink-2);margin-top:10px}
@media (max-width:860px){.rend-lab-bal{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.vid-szeles video{border-radius:12px}}
/* phone: the payback bars are background boxes, which the gate's empty-band check does not count as content; a
   96 px bar field keeps the band between the result line and the bar captions under 120 px (141 px measured) */
@media (max-width:760px){
  .kalk-oszlopok{height:96px}
  .kalk-oszlop i{height:calc(var(--h)*64px)}
  .kalk-eredmeny{margin-bottom:10px}
}
/* phone price section: the grid gap and the card padding are empty for the gate's band check (127 and 121 px measured
   2026-11-02 at 390, limit 120): 24 px gap, 24 px card padding */
@media (max-width:760px){
  .ar-racs{gap:24px}
  .ar-doboz{padding:24px}
}

/* Air between the top fade of a dark section and its first line, and between its last line and the bottom fade
   (Zoltán 09.35, TG 66736, 66738, 66740; Lead 87277 points 2, 3, 3b and 87281 point 6). The fades are
   --atmenet-h tall and the padding used to equal them, so the heading started where the white fade ended.
   Assumption, measured 2026-11-02 on staging: the first line sits exactly at the padding (no margin above it).
   Only the four headings the brief names get the extra top air, only the "minket" numbers the extra bottom air:
   on every dark section the extra pushed lap-atvetel's empty-band check over its limit (193/160 px at 1440,
   149/120 at 390, measured 2026-11-02 10.0x), mostly at dark-to-dark joins. The light section right above one
   of the four gives back part of it (--elotte-pad), so the band between its last line and the heading stays
   under the limit while the heading keeps its air. */
:root{--cim-levego:36px;--lab-levego:28px;--elotte-pad:32px}
@media (max-width:760px){:root{--cim-levego:24px;--lab-levego:20px;--elotte-pad:20px}}
#kepessegek,#ki-all-mogotte,#garancia,.negy,#egy-nap{padding-top:calc(var(--atmenet-h) + var(--cim-levego))}
#ki-all-mogotte,#egy-nap{padding-bottom:calc(var(--atmenet-h) + var(--lab-levego))}
section:has(+ #kepessegek),section:has(+ #ki-all-mogotte),section:has(+ #garancia),section:has(+ .negy),section:has(+ #egy-nap){padding-bottom:var(--elotte-pad)}
/* #egy-nap joined the lists above (Zoltán TG 67136, Lead 87615 point 4, 2026-11-02): air above "Így néz ki egy napod"
   and below "Amihez nem adtál hozzáférést"; measured before 48 / 48 px at 1440, 36 / 36 at 390 from the section edge */

/* Lead's intro video: smaller than the content width, so one 1440x900 screen shows a line above and below it
   (Zoltán 09.33, Lead 87277 point 4); the play icon is the capability cards' mark, larger */
.vid-szeles{width:100%;max-width:880px;margin:0 auto}
.vid-keret{position:relative}
.vid-indito{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:16px;background:transparent;cursor:pointer;font:inherit}
.vid-indito[hidden]{display:none}
.vid-indito .lejatszo-jel{width:88px;height:88px;margin:-44px 0 0 -44px}
.vid-indito .lejatszo-jel::before{left:34px;top:27px;border-width:17px 0 17px 26px}
.vid-indito:hover .lejatszo-jel{transform:scale(1.08)}
.vid-indito:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
@media (max-width:760px){
  .vid-indito{border-radius:12px}
  .vid-indito .lejatszo-jel{width:72px;height:72px;margin:-36px 0 0 -36px}
  .vid-indito .lejatszo-jel::before{left:28px;top:22px;border-width:14px 0 14px 21px}
}

/* "Egy chatbot minden reggel amnéziás": the self-learning line as its own box (Lead 87281 point 7) */
.szakasz-fej .mas-kiemeles{margin:24px 0 0;padding:18px 22px;border-radius:14px;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--signal);
  box-shadow:0 18px 40px -28px rgba(7,12,24,.35);font-family:var(--fd);font-weight:600;font-size:1.45rem;line-height:1.32;letter-spacing:-.01em;color:var(--ink)}
.mas-kiemeles b{font-weight:800}
@media (max-width:760px){.szakasz-fej .mas-kiemeles{font-size:1.22rem;padding:16px 18px}}

/* Closing band, the end of the page (Zoltán TG 67002, request 30d014e9): the lamp switches on and the laptop shows
   the Pilóta, with the visitor's own clock on its taskbar. The behaviour is in lap.js and only runs where this
   property is 1. The scene box is the photo's drawn area (set by lap.js), so every position below is a share of the
   photo: lamp mouth measured at 1283,390 of 1536x1024 and 565,342 of 780x887 (2026-11-02). */
.zaro{--zaro-lampa:1}
.zl-jelenet{position:absolute;pointer-events:none}
.zl-feny,.zl-izzo{position:absolute;opacity:0}
.zl-feny{inset:0;mix-blend-mode:screen;background:
  radial-gradient(9% 5% at 83.5% 38.6%,rgba(255,236,196,.95),rgba(255,206,130,.45) 55%,transparent 100%),
  radial-gradient(16% 20% at 85% 66%,rgba(255,190,110,.55),rgba(255,170,80,.18) 55%,transparent 100%),
  radial-gradient(30% 42% at 84% 52%,rgba(255,170,80,.28),transparent 72%),
  radial-gradient(14% 12% at 69% 58%,rgba(150,190,255,.22),transparent 75%)}
/* the lit opening of the shade, tilted like the shade rim in the photo */
.zl-izzo{left:79%;top:36.9%;width:9%;height:3.4%;border-radius:50%;transform:rotate(14deg);
  background:radial-gradient(closest-side,#FFF6E2,rgba(255,226,170,.9) 60%,rgba(255,200,120,0));filter:blur(1px)}
.zl-mobil .zl-feny{background:
  radial-gradient(11% 6% at 72.4% 38.6%,rgba(255,236,196,.95),rgba(255,206,130,.45) 55%,transparent 100%),
  radial-gradient(20% 16% at 76% 70%,rgba(255,190,110,.5),rgba(255,170,80,.16) 55%,transparent 100%),
  radial-gradient(34% 34% at 72% 52%,rgba(255,170,80,.26),transparent 72%),
  radial-gradient(18% 12% at 47% 58%,rgba(150,190,255,.2),transparent 75%)}
.zl-mobil .zl-izzo{left:64.2%;top:36.6%;width:16.6%;height:4.4%;transform:rotate(16deg)}
/* steam over the mug once the lamp is on (Zoltán TG 67405, request 23bfcc13): three soft wisps rise and fade, 3.6-4.8 s
   each. The box stands on the mug rim, measured on the photos 2026-11-02: rim centre 1335,632 of 1536x1024 (rim 105 px
   wide) and 605,549 of 780x887 (92 px); the box is 230/200 photo px tall. Only transform and opacity move. */
.zl-goz{position:absolute;left:83.5%;top:39.2%;width:6.8%;height:22.5%;opacity:0;filter:blur(4px)}
/* phones: the photo sits under the closing text and its dark overlay (.zaro::before, .5-.8 at the mug), so the wisps are
   brighter and less blurred there, else the steam does not show (frame delta max 11 of 255 measured 2026-11-02) */
.zl-mobil .zl-goz{left:71.7%;top:39.4%;width:11.8%;filter:blur(2.5px)}
.zl-mobil .zl-goz path{stroke:#fff;stroke-width:6.5}
.zl-goz svg{display:block;width:100%;height:100%;overflow:visible}
.zl-goz path{fill:none;stroke:#F4F1EA;stroke-width:5.5;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:50% 100%}
.lampa-be .zl-goz{opacity:1;transition:opacity 1.2s var(--ease-out) .7s}
.lampa-be .zl-goz path{animation:zl-goz 4.2s cubic-bezier(.4,0,.6,1) infinite}
.lampa-be .zl-goz path:nth-child(2){animation-duration:3.6s;animation-delay:-1.4s}
.lampa-be .zl-goz path:nth-child(3){animation-duration:4.8s;animation-delay:-2.7s}
.lampa-be .zl-mobil .zl-goz path{animation-name:zl-goz-m}
@keyframes zl-goz{
  0%{opacity:0;transform:translate(0,12%) scale(.9,.85)}
  25%{opacity:.42}
  55%{transform:translate(-8%,-4%) scale(1.05,1) skewX(5deg)}
  75%{opacity:.22}
  100%{opacity:0;transform:translate(6%,-16%) scale(1.25,1.05) skewX(-4deg)}}
@keyframes zl-goz-m{
  0%{opacity:0;transform:translate(0,12%) scale(.9,.85)}
  25%{opacity:.85}
  55%{transform:translate(-8%,-4%) scale(1.05,1) skewX(5deg)}
  75%{opacity:.5}
  100%{opacity:0;transform:translate(6%,-16%) scale(1.25,1.05) skewX(-4deg)}}
/* the screen: 480x300 px drawn, mapped onto the panel by lap.js */
.zl-kijelzo{position:absolute;left:0;top:0;width:480px;height:300px;transform-origin:0 0;opacity:0;overflow:hidden;
  display:flex;flex-direction:column;background:#0D1526;font-family:var(--fb);color:var(--on-ink);
  box-shadow:0 0 40px 6px rgba(120,160,255,.25)}
.zl-app{flex:1;padding:16px 20px 0;display:flex;flex-direction:column;gap:10px;
  background:radial-gradient(120% 90% at 100% 0%,rgba(43,71,242,.45),transparent 60%),radial-gradient(80% 70% at 0% 100%,rgba(124,44,214,.35),transparent 70%)}
.zl-fej{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-size:20px;color:#fff;margin-bottom:4px}
.zaro-kep .zl-fej img{position:static;inset:auto;width:28px;height:28px;object-fit:contain;transform:none;opacity:1;transition:none}
.zl-fut{margin-left:auto;font-family:var(--fb);font-size:15px;font-weight:700;color:var(--mint)}
.zl-fut::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mint);margin-right:6px;vertical-align:1px}
.zl-sor{margin:0;max-width:92%;padding:9px 14px;border-radius:4px 14px 14px 14px;background:rgba(255,255,255,.1);font-size:16px;line-height:1.3;color:#fff}
.zl-talca{height:44px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;background:rgba(7,12,24,.92);border-top:1px solid rgba(255,255,255,.08)}
.zl-talca i{width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.18)}
.zl-talca .zl-robot{background:var(--signal)}
.zl-ido{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;line-height:1.05}
.zl-ora{font-size:21px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.zl-datum{font-size:12px;color:var(--on-ink-2)}
/* switching on: the lamp flickers, then the screen wakes and the lines come in one by one */
.lampa-be .zl-feny,.lampa-be .zl-izzo{opacity:1;animation:zl-villan .7s steps(1,end) both}
.lampa-be .zl-kijelzo{opacity:1;transition:opacity .9s var(--ease-out) .7s}
.zl-sor{opacity:0;transform:translateY(8px)}
.lampa-be .zl-sor{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.lampa-be .zl-sor:nth-of-type(1){transition-delay:1.5s}
.lampa-be .zl-sor:nth-of-type(2){transition-delay:2.1s}
.lampa-be .zl-sor:nth-of-type(3){transition-delay:2.7s}
@keyframes zl-villan{0%{opacity:0}18%{opacity:.75}30%{opacity:.1}46%{opacity:1}60%{opacity:.55}72%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .lampa-be .zl-feny,.lampa-be .zl-izzo{animation:none}
  .lampa-be .zl-kijelzo,.lampa-be .zl-sor{transition:none}
  .lampa-be .zl-goz{transition:none}
  .lampa-be .zl-goz path{animation:none;opacity:.22;transform:none}
  .lampa-be .zl-mobil .zl-goz path{animation:none;opacity:.45}
}
/* on phones the photo sits under the closing text, so the screen keeps only its glow, the logo and the clock */
.zl-mobil .zl-sor{display:none}
/* evening and night by the visitor's clock (Zoltán TG 67501, card 49bfa5fa): lap.js sets .este-marad, the night photo
   stays (also under reduced motion, it is not a movement), and the lamp lit in that photo gets no second flicker */
.js .zaro.este-marad .zaro-kep .este{opacity:1!important}
.zl-este .zl-feny,.zl-este .zl-izzo{display:none}

/* footer: the legal links start their own row, ÁSZF first (Zoltán TG 67502, card 49bfa5fa) */
.lab .lab-jogi{flex-basis:100%;display:flex;flex-wrap:wrap;gap:10px 22px}
@media (max-width:760px){.lab .lab-jogi{flex-basis:auto;width:100%}}   /* the footer is a column there */

/* testimonials (Zoltán TG 67473, card dbcbdc27): photo, name, company, the quote verbatim; one .pl-kartya per person,
   a second card stacks under the first. Placed after "who is behind it", before the steps and the price. */
.referencia .ref-lista{display:grid;gap:24px}
.ref-kartya{margin:0;display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);grid-template-rows:1fr auto 1fr;column-gap:44px;padding:28px}
.ref-foto{grid-row:1 / -1;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:10px}
.ref-kartya blockquote{grid-column:2;grid-row:2;margin:0}
.ref-kartya blockquote p{margin:0;font-size:1.2rem;line-height:1.6;color:var(--ink)}
.ref-kartya figcaption{grid-column:2;grid-row:3;align-self:start;margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;color:var(--muted)}
.ref-kartya figcaption b{font-family:var(--fd);font-weight:700;color:var(--ink)}
.ref-logo{display:block;height:24px;width:auto}
@media (max-width:760px){
  .ref-kartya{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:22px;padding:20px}
  .ref-foto,.ref-kartya blockquote,.ref-kartya figcaption{grid-column:auto;grid-row:auto;margin-top:0}
  .ref-foto{max-width:240px}
  .ref-kartya blockquote p{font-size:1.06rem}
}
/* comparison header: "Egy üres AI-ágens" breaks between words at 390 px, never after "AI-" */
.tobb-fej span{text-wrap:balance}
/* promise line under "Van más út.", verbatim from Zoltán (TG 69089); below the fold, not in the hero (TG 69095,
   card 6de1e613). Amber on the ink box is 10,68:1 per the brand manual (arculat/index.html). */
.mas-ut>p.mas-ut-igeret{font-family:var(--fd);font-weight:800;font-size:1.2rem;line-height:1.3;letter-spacing:-.01em;color:var(--signal);margin:0 0 12px;text-wrap:balance}
/* FAQ "Mi kell hozzá?": the machine requirements as a tick list in the first FAQ item, open by default (card f81f1c83,
   Zoltán TG 70164). Same tick as the "Neked való" list; text colour and width as the other FAQ answers. */
.kell-lista{display:grid;gap:10px;margin:0 0 22px;max-width:46em}
.kell-lista li{position:relative;padding-left:28px;color:var(--muted)}
.kell-lista li::before{content:"";position:absolute;left:3px;top:8px;width:12px;height:7px;border-left:2.5px solid var(--mint-dark);border-bottom:2.5px solid var(--mint-dark);transform:rotate(-45deg)}
/* News (card 56e7fd06, Zoltán TG 70391, TG 70401): the Frissítések box under the hero and the /hirek/ pages.
   Only the page's own tokens: card as .lepesek li, date colour as .cimke, column width as .szakasz-fej. */
.frissitesek{padding:40px 0 72px}
@media (max-width:760px){.frissitesek{padding:24px 0 56px}}
.friss-cim{margin-bottom:28px}
.friss-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:16px}
.friss-lista li{min-width:0;padding:22px 20px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.friss-lista time,.hir-lista time{display:block;font-family:var(--fd);font-weight:800;font-size:.9rem;color:var(--signal-text);margin-bottom:10px}
.friss-lista h3{font-size:1.05rem;margin-bottom:8px}
.friss-lista p{color:var(--muted);font-size:.95rem;margin:0}
.friss-tovabb{margin:28px 0 0;font-family:var(--fd);font-weight:800}
.friss-tovabb a,.hir-vissza a,.hir-tovabb a{color:var(--ink);text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
.hir-lista{display:grid;gap:20px;max-width:860px}
.hir-lista li{padding:28px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.hir-lista h2{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.hir-lista h2 a{text-decoration:none}
.hir-lista h2 a:hover{text-decoration:underline;text-decoration-color:var(--signal)}
.hir-lista p{color:var(--muted)}
.hir-tovabb{margin:0;font-family:var(--fd);font-weight:800}
.hir-hasab{max-width:816px}
.hir-vissza{margin:0 0 20px;font-family:var(--fd);font-weight:700}
.hir-cikk h1{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:800;margin-bottom:.6em}
.hir-cikk h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:1.6em 0 .5em}
.hir-lead{font-size:1.22rem;line-height:1.55}
.hir-cikk p:not(.hir-lead):not(.cimke):not(.hir-vissza){color:var(--muted)}
.hir-cikk p a{overflow-wrap:anywhere}
.hir-kapcsolat{margin-top:2.4em;padding-top:1.4em;border-top:1px solid var(--line)}

/* ---------- rooms block (card 9f8a2b1c, Zoltán TG 69437) ----------
   One project room: your people and agents on the left, the client and his own agent on the right, the room in
   the middle. The look follows the Pilóta PWA (relay/pwa/static/app.css: the colour field behind the app, glass
   panels, .buborek/.kuldo/.szerep-chip, the approval row). Two copy layers: data-funkcio="szoba-ember" and
   data-funkcio="szoba-agens"; .szobak.agens-nelkul (or .ember-nelkul) on the section switches a layer off, the
   rest of the block stays whole (the guest agent node, its spoke, its message and avatar go with the layer).
   Motion: vegleges/szobak.js plays the messages one by one and flies a dot from the sender to the room; without
   JS or with reduced motion the finished conversation stands still. */
.szobak .szakasz-fej p strong{color:var(--ink)}
.szobak.agens-nelkul [data-funkcio="szoba-agens"],.szobak.ember-nelkul [data-funkcio="szoba-ember"]{display:none!important}
.szoba-szinpad{--av:58px;--uveg:rgba(7,12,24,.58);--uveg-szel:rgba(255,255,255,.16);position:relative;margin:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:22px;padding:28px;border-radius:28px;overflow:hidden;color:var(--on-ink);isolation:isolate;
  background:
    radial-gradient(34% 46% at 66% 0%,rgba(var(--szin-borostyan),1),rgba(var(--szin-borostyan),.55) 42%,transparent 74%),
    radial-gradient(30% 56% at 100% 16%,rgba(var(--szin-korall),1),rgba(var(--szin-korall),.5) 48%,transparent 76%),
    radial-gradient(36% 46% at 96% 70%,rgba(var(--szin-magenta),.95),rgba(var(--szin-magenta),.4) 50%,transparent 74%),
    radial-gradient(36% 42% at 62% 82%,rgba(var(--szin-ibolya),.9),transparent 72%),
    radial-gradient(30% 34% at 20% 100%,rgba(var(--szin-korall),.75),transparent 72%),
    radial-gradient(22% 30% at 80% 44%,rgba(var(--szin-cian),.6),transparent 72%),
    radial-gradient(56% 74% at 0% 0%,rgba(var(--szin-kek),1),rgba(var(--szin-kek),.6) 40%,transparent 72%),
    linear-gradient(180deg,rgb(var(--szin-kek)) 0%,rgb(var(--szin-ibolya)) 100%);
  box-shadow:0 30px 80px -30px rgba(30,28,150,.55)}
.szoba-halo,.szoba-ablak{position:relative;border-radius:20px;background:var(--uveg);border:1px solid var(--uveg-szel);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
.szoba-halo{aspect-ratio:5/4;min-height:400px}
.szoba-kuplungok{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.szoba-kuplungok line{stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-dasharray:3 6;vector-effect:non-scaling-stroke;transition:stroke .3s}
.szoba-kuplungok line.aktiv{stroke:var(--signal);stroke-dasharray:none;stroke-width:2.5}
.szoba-ceg{position:absolute;top:5%;bottom:4%;border:1.5px dashed rgba(255,255,255,.26);border-radius:16px}
.szoba-ceg span{position:absolute;top:10px;left:14px;font-family:var(--fd);font-size:.78rem;font-weight:800;color:#fff}
.szoba-ceg-sajat{left:3%;right:50%}
.szoba-ceg-vendeg{left:74%;right:2.5%}
.szoba-ceg-vendeg span{left:50%;transform:translateX(-50%);white-space:nowrap}
.szoba-csp,.szoba-kozep{position:absolute;left:var(--x);top:var(--y);width:118px;margin-left:-59px;margin-top:calc(var(--av)/-2);display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.25}
.szoba-csp img,.szoba-mono{width:var(--av);height:var(--av);border-radius:50%;flex:none;margin-bottom:8px;box-shadow:0 0 0 3px rgba(7,12,24,.9),0 0 0 4.5px rgba(255,255,255,.22);transition:box-shadow .25s,transform .25s}
.szoba-csp img{object-fit:cover;background:var(--ink-3)}
.szoba-mono{display:grid;place-items:center;background:var(--m);color:var(--ink);font-family:var(--fd);font-style:normal;font-weight:800;font-size:1.15rem}
.szoba-vendeg-gep img{box-shadow:0 0 0 3px rgba(7,12,24,.9),0 0 0 5px var(--signal)}
.szoba-csp b,.szoba-kozep b{font-family:var(--fd);font-size:.95rem;font-weight:800;color:#fff}
.szoba-csp small,.szoba-kozep small{font-size:.8rem;color:#D5DCE8}
/* label plates: the dashed spokes run under the labels and the amber field shows through the glass; measured
   2026-11-05 (meres.mjs, worst pixel under the text): without the plate "kolléga" was 4,0:1 */
.szoba-csp b,.szoba-csp small,.szoba-kozep b,.szoba-kozep small,.szoba-ceg span{background:rgba(7,12,24,.88);border-radius:6px;padding:0 5px}
.szoba-csp.kuld img,.szoba-csp.kuld .szoba-mono{transform:scale(1.08);box-shadow:0 0 0 3px rgba(7,12,24,.9),0 0 0 6px var(--signal)}
.szoba-kozep{--av:76px}
.szoba-kozep i{width:var(--av);height:var(--av);border-radius:22px;display:grid;place-items:center;margin-bottom:8px;background:linear-gradient(140deg,var(--signal),var(--signal-2));color:var(--ink);font-family:var(--fd);font-style:normal;font-weight:800;font-size:1.4rem;box-shadow:0 0 0 3px rgba(7,12,24,.9),0 10px 34px -6px rgba(255,176,32,.7)}
.szoba-kozep.fogad i{animation:szoba-fogad .7s var(--ease-out)}
@keyframes szoba-fogad{0%{box-shadow:0 0 0 3px rgba(7,12,24,.9),0 0 0 0 rgba(255,176,32,.75)}100%{box-shadow:0 0 0 3px rgba(7,12,24,.9),0 0 0 26px rgba(255,176,32,0)}}
.szoba-csomag{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px rgba(255,176,32,.28),0 0 18px 4px rgba(255,176,32,.7);opacity:0;pointer-events:none;z-index:2}
/* the room window: the PWA chat, read only */
.szoba-ablak{display:flex;flex-direction:column;overflow:hidden;background:rgba(7,12,24,.84)}
.szoba-ablak-fej{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(13,21,38,.9)}
.szoba-korong{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:linear-gradient(140deg,var(--signal),var(--signal-2));color:var(--ink);font-family:var(--fd);font-style:normal;font-weight:800;font-size:.9rem}
.szoba-ablak-fej>span:first-of-type{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.szoba-ablak-fej b{font-family:var(--fd);font-weight:800;font-size:1.02rem;color:#fff}
.szoba-ablak-fej small{font-size:.8rem;color:var(--on-ink-2)}
.szoba-tagkep{display:flex}
.szoba-tagkep img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--ink-3);box-shadow:0 0 0 2px var(--ink-2)}
.szoba-tagkep img+img{margin-left:-7px}
.szoba-uzenetek{list-style:none;margin:0;padding:14px 12px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.szoba-uz{align-self:flex-start;max-width:92%;padding:8px 12px 9px;border-radius:16px;border-bottom-left-radius:6px;background:var(--ink-3);font-size:.94rem;line-height:1.4;color:var(--on-ink)}
.szoba-kuldo{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:2px;font-size:.78rem;font-weight:700;color:var(--signal)}
.szoba-chip{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--ink-4);color:var(--on-ink);font-size:.74rem;font-weight:700;font-style:normal;white-space:nowrap}
.szoba-chip.vendeg{background:var(--signal-soft);color:var(--signal-text)}
.szoba-jovahagyas{align-self:stretch;max-width:none;display:grid;gap:8px;justify-items:center;text-align:center;border-radius:12px;border:1px solid var(--signal);background:rgba(255,176,32,.1);margin-top:4px}
.szoba-gombok,.szoba-jovahagyva{grid-area:2/1}
.szoba-gombok{display:flex;gap:8px;visibility:hidden}
.szoba-gombok em{font-style:normal;font-family:var(--fd);font-weight:700;font-size:.88rem;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2)}
.szoba-gombok .szoba-igen{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.szoba-jovahagyva{color:var(--mint);font-family:var(--fd);font-weight:800}
/* the player (szobak.js) is on: messages wait for their turn */
.szoba-el .szoba-uz{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.szoba-el .szoba-uz.lat{opacity:1;transform:none}
.szoba-el .szoba-jovahagyas:not(.kesz) .szoba-gombok{visibility:visible}
.szoba-el .szoba-jovahagyas:not(.kesz) .szoba-jovahagyva{visibility:hidden}
.szoba-el .szoba-jovahagyas.nyom .szoba-igen{transform:scale(.94);box-shadow:0 0 0 4px rgba(255,176,32,.35)}
.szoba-el.elhalvanyul .szoba-uz{opacity:0;transition-duration:.6s}
@media (max-width:1100px){
  .szoba-szinpad{grid-template-columns:minmax(0,1fr) minmax(290px,.9fr)}
  .szoba-halo{aspect-ratio:auto}
}
@media (max-width:860px){
  .szoba-szinpad{--av:44px;grid-template-columns:1fr;gap:14px;padding:14px;border-radius:22px;margin:0 -8px}
  .szoba-halo{min-height:0;aspect-ratio:auto;height:364px}
  .szoba-ceg{top:3.5%;bottom:2.5%}
  .szoba-csp,.szoba-kozep{width:88px;margin-left:-44px}
  .szoba-kozep{--av:56px}
  .szoba-kozep i{border-radius:16px;font-size:1.1rem}
  .szoba-csp b,.szoba-kozep b{font-size:.84rem}
  .szoba-csp small,.szoba-kozep small{font-size:.75rem}
  .szoba-ceg span{left:10px;top:8px;font-size:.75rem}
  .szoba-ceg-vendeg{left:72%;right:.5%}
  .szoba-uz{font-size:.95rem}
  /* the gate's empty-band check (lap-atvetel, 120 px at 390) measured 131 px under "Jóváhagyva" on 2026-11-05 */
  .szoba-szinpad{padding-bottom:10px}
  .szoba-uzenetek{padding-bottom:8px}
  .szoba-jovahagyas{padding-bottom:6px}
  .szoba-gombok em{padding:5px 12px}
}