/* ==========================================================================
   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%}

/* ---------- 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}
.het-abra{padding:24px;border-radius:16px;background:var(--ink);color:var(--on-ink);margin-top:8px}
.het-abra figcaption{color:var(--on-ink-2);font-size:.95rem}
.het-abra figcaption b{display:block;color:#fff;font-family:var(--fd);font-size:1.15rem;line-height:1.3;margin-bottom:4px}
.het-cella{transform-box:fill-box;transform-origin:50% 100%}
.js .het-abra .het-cella.admin{transform:scaleY(0);transition:transform .5s var(--ease-out)}
.js .het-abra.on .het-cella.admin{transform:none}
.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)}
.folyam-abra{width:100%;height:auto;margin-top:16px}
.folyam-ut{animation:folyik 1.2s linear infinite}
@keyframes folyik{to{stroke-dashoffset:-28}}

/* ---------- 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}
  .js .het-abra .het-cella.admin{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.
   ========================================================================== */
.pv-racs-elrendezes{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"fej telefon" "valaszto telefon";gap:0 72px;align-items:start}
.pv-fej{grid-area:fej;margin-bottom:36px}
.pv-fej .pv-al{font-size:1rem;font-weight:600;color:var(--ink)}
.pv-telefon{grid-area:telefon;margin:0;position:sticky;top:calc(var(--hd-h) + 24px)}
.pv-valaszto{grid-area:valaszto}

.pv-racs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;max-width:680px}
/* the default picture (B mark) takes a 2x2 slot: 4 + 20 cells fill 6 columns and 4 columns without a gap */
.pv-racs .pv-alap{grid-column:span 2;grid-row:span 2}
.pv-alap .pv-opcio[aria-pressed="true"]::after{width:18%;height:18%}
.pv-opcio{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:50%;background:var(--paper-2);cursor:pointer;
  box-shadow:0 0 0 3px transparent;transition:box-shadow .5s var(--ease-out),transform .5s var(--ease-out),opacity .5s}
.pv-opcio img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.pv-opcio:hover{transform:translateY(-3px)}
.pv-opcio:focus-visible{outline:3px solid var(--signal);outline-offset:4px}
/* while cycling: the face in the mock gets the amber ring, the others dim slightly */
.pv-racs.forog .pv-opcio{opacity:.8}
.pv-racs.forog .pv-opcio:hover{opacity:1}
.pv-racs .pv-opcio.aktiv{opacity:1;box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--signal);transform:scale(1.06)}
/* the chosen face keeps the ring and gets a check badge */
.pv-opcio[aria-pressed="true"]::after{content:"";position:absolute;right:2%;bottom:2%;width:28%;height:28%;border-radius:50%;border:3px solid var(--paper);
  background:var(--mint-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/62% no-repeat}

/* phone mock: same tokens as the app (app.css :root) */
.pv-kijelzo{display:flex;flex-direction:column;height:470px;border-radius:40px;overflow:hidden;background:var(--ink-2);color:var(--on-ink);
  border:10px solid var(--ink);box-shadow:0 0 0 1px #26324D,0 40px 80px -30px rgba(7,12,24,.55)}
.pv-fejlec{display:flex;align-items:center;gap:12px;padding:22px 14px 12px;background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
.pv-avatar{position:relative;flex:none;width:40px;height:40px}
.pv-avatar img{position:absolute;inset:0;width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--ink-3)}
.pv-kep{transition:opacity .9s var(--ease-io)}
.pv-kep.uj{opacity:0;transition:none}
.pv-potty{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;background:var(--mint);border:2px solid var(--ink)}
.pv-fej-szoveg{flex:1;min-width:0}
.pv-nev{margin:0;font-family:var(--fd);font-weight:700;font-size:1.12rem;line-height:1.3;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-allapot{margin:0;font-size:.85rem;line-height:1.35;color:var(--on-ink-2)}
.pv-ikon{flex:none;width:24px;height:24px;fill:none;stroke:var(--on-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pv-menu{flex:none;display:flex;flex-direction:column;gap:4px;padding:0 4px}
.pv-menu i{display:block;width:20px;height:2px;border-radius:2px;background:var(--on-ink)}
.pv-uzenetek{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:14px 12px;margin:0;list-style:none}
.pv-buborek{max-width:84%;padding:8px 12px;border-radius:16px;font-size:.95rem;line-height:1.45}
.pv-buborek.be{align-self:flex-start;background:var(--ink-3);border-bottom-left-radius:6px}
.pv-buborek.ki{align-self:flex-end;background:var(--ink-4);border-bottom-right-radius:6px}
.pv-kuldes{display:flex;gap:8px;align-items:center;padding:10px 12px 14px;background:var(--ink);border-top:1px solid rgba(255,255,255,.08)}
.pv-kuldes span{flex:1;min-height:44px;display:flex;align-items:center;padding:0 14px;border-radius:14px;background:var(--ink-2);border:1px solid var(--ink-4);color:var(--on-ink-2);font-size:.92rem}
.pv-kuldes b{display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:12px;background:var(--signal);color:var(--ink);font-family:var(--fd);font-size:.92rem}

@media (max-width:1080px){
  .pv-racs-elrendezes{grid-template-columns:minmax(0,1fr) 320px;gap:0 40px}
  .pv-racs{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}
/* phone: the mock above the grid, four columns */
@media (max-width:760px){
  .pv-racs-elrendezes{grid-template-columns:minmax(0,1fr);grid-template-areas:"fej" "telefon" "valaszto"}
  .pv-fej{margin-bottom:28px}
  .pv-telefon{position:static;width:100%;max-width:340px;margin:0 auto 32px}
  .pv-kijelzo{height:auto;min-height:300px;border-radius:32px;border-width:8px}   /* content-driven: the bubble wraps to 4 lines at 320 (Codex P2 on c053310acd) */
  .pv-racs{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .pv-opcio,.pv-kep{transition:none}
  .pv-opcio:hover{transform:none}
  .pv-opcio.aktiv{transform:none}
}

/* ---------- /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)}}