/* VARDYR weboldal — közös stílus. Sötét, acélkék márka; termékenként saját kiemelő szín (--acc). */
:root{
  --bg:#0A0E15; --bg2:#0D121B; --panel:#111827; --panel2:#151E2E; --line:#1E2838; --line2:#2B3852;
  --ink:#E7ECF5; --ink2:#B6C1D6; --muted:#8696B2;
  --steel:#7FA8E6; --steel-hi:#A7C4F2; --steel-lo:#5F88CC;
  --sec:#7FA8E6; --san:#6CC8B4; --est:#E6934E; --ok:#5FD08A; --alarm:#F06A5E;
  --acc:var(--steel);
  --f-head:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-body:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --r:14px; --w:1160px; --gut:24px;
}
body.p-sec{--acc:var(--sec)} body.p-san{--acc:var(--san)} body.p-est{--acc:var(--est)}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html,body{margin:0; padding:0}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:var(--f-head); line-height:1.15; margin:0; letter-spacing:-.01em; text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--w); margin:0 auto; padding:0 var(--gut)}
.ic{width:20px; height:20px; flex:none}
.logo{width:auto; height:100%}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- gombok ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-head); font-weight:700; font-size:15px;
  letter-spacing:.01em; padding:13px 22px; border-radius:100px; border:1px solid transparent; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, transform .15s; white-space:nowrap}
.btn .ic{width:18px; height:18px}
.btn-pri{background:var(--acc); color:#08101C}
.btn-pri:hover{background:#fff; transform:translateY(-1px)}
.btn-ghost{border-color:var(--line2); color:var(--ink)}
.btn-ghost:hover{border-color:var(--acc); color:var(--acc)}
.btn-row{display:flex; gap:12px; flex-wrap:wrap}

/* ---------- fejléc ---------- */
.site-head{position:sticky; top:0; z-index:50; background:rgba(10,14,21,.82); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(30,40,56,.7)}
.site-head .wrap{display:flex; align-items:center; gap:18px; height:68px}
.brand{display:flex; align-items:center; gap:11px; color:var(--steel)}
.brand .logo{height:28px}
.brand .wm{font-family:var(--f-head); font-weight:800; letter-spacing:.24em; font-size:15px; color:var(--ink)}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{font-family:var(--f-head); font-weight:600; font-size:14.5px; color:var(--ink2); padding:8px 14px; border-radius:100px;
  display:flex; align-items:center; gap:8px; transition:background .15s, color .15s}
.nav a:hover{background:var(--panel2); color:var(--ink)}
.nav a[aria-current]{color:var(--ink); background:var(--panel2)}
.nav .code{font-weight:800; letter-spacing:.14em; font-size:12.5px}
.nav .dot{width:7px; height:7px; border-radius:50%}
.nav .btn{margin-left:10px; padding:10px 18px; font-size:14px}
.nav a.btn-pri,.nav a.btn-pri:hover{color:#08101C}
.nav a.btn-pri:hover{background:#fff}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--line2); color:var(--ink);
  border-radius:12px; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer}
.nav-toggle .ic{width:22px; height:22px}

/* ---------- szekciók ---------- */
section{position:relative}
.sec-pad{padding:104px 0}
.sec-alt{background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--f-head); font-weight:700; font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--acc); display:inline-flex; align-items:center; gap:10px}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor}
.sec-head{max-width:720px; margin-bottom:52px}
.sec-head h2{font-size:clamp(30px,4vw,44px); font-weight:700; margin-top:16px}
.sec-head p{color:var(--ink2); font-size:18px; margin-top:16px; max-width:62ch}
.center{text-align:center; margin-left:auto; margin-right:auto}
.center .eyebrow::after{content:""; width:22px; height:1px; background:currentColor}

/* ---------- nyitókép ---------- */
.hero{padding:96px 0 104px; overflow:hidden}
.hero-bg{position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(70% 55% at 50% 0%, rgba(64,110,180,.22) 0%, rgba(10,14,21,0) 65%),
             radial-gradient(60% 50% at 85% 100%, rgba(30,46,80,.35) 0%, rgba(10,14,21,0) 60%)}
.hero-bg svg{position:absolute; top:-260px; left:50%; transform:translateX(-50%); width:1300px; max-width:none; opacity:.55}
.hero-bg circle{fill:none; stroke:#1F2C44; stroke-width:1}
.hero .wrap{position:relative; z-index:1}
.hero-c{text-align:center; max-width:860px; margin:0 auto}
.hero-mark{height:112px; color:var(--steel); margin:0 auto 26px; filter:drop-shadow(0 10px 40px rgba(127,168,230,.25))}
.hero-mark .logo{height:112px; margin:0 auto}
.hero h1{font-size:clamp(40px,6.6vw,76px); font-weight:700; letter-spacing:-.025em; margin-top:18px}
.hero .lead{font-size:clamp(18px,2.2vw,21px); color:var(--ink2); margin:22px auto 0; max-width:46ch}
.hero .btn-row{justify-content:center; margin-top:36px}
.family-chips{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:56px}
.chip{display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 12px; border:1px solid var(--line2);
  border-radius:100px; font-size:14px; color:var(--ink2); background:rgba(17,24,39,.6); transition:border-color .15s, background .15s}
.chip:hover{border-color:var(--c); background:var(--panel2)}
.chip b{font-family:var(--f-head); letter-spacing:.16em; font-size:12.5px; color:var(--c)}
.chip .cst{font-size:12.5px; color:var(--muted)}

/* termék-hero (két oszlop) */
.hero-2{display:grid; grid-template-columns:1.02fr 1fr; gap:56px; align-items:center}
.hero-2 h1{font-size:clamp(40px,5.4vw,64px)}
.hero-2 .lead{margin-left:0}
.hero-2 .btn-row{justify-content:flex-start}
.prod-tag{display:inline-flex; align-items:center; gap:14px; flex-wrap:wrap}
.prod-tag .name{font-family:var(--f-head); font-weight:800; letter-spacing:.22em; font-size:15px}
.prod-tag .name span{color:var(--acc)}

/* állapot-címke */
.status{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head); font-weight:700; font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 12px 5px 10px; border-radius:100px;
  border:1px solid color-mix(in srgb, var(--c, var(--acc)) 45%, transparent);
  color:var(--c, var(--acc)); background:color-mix(in srgb, var(--c, var(--acc)) 10%, transparent)}
.status .pulse{width:7px; height:7px; border-radius:50%; background:currentColor; animation:pulse 2.4s ease-out infinite}
.status.live{--c:var(--ok)}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, currentColor 60%, transparent)}
  70%{box-shadow:0 0 0 9px transparent} 100%{box-shadow:0 0 0 0 transparent}}

/* ---------- manifesztó ---------- */
.manifesto{padding:84px 0; text-align:center}
.manifesto p{font-family:var(--f-serif); font-style:italic; font-size:clamp(21px,2.8vw,29px); line-height:1.5;
  color:#EEF2FA; max-width:34ch; margin:0 auto; text-wrap:balance}
.manifesto p b{font-style:normal; font-family:var(--f-head); letter-spacing:.06em; color:var(--steel)}
.manifesto .sig{font-family:var(--f-head); font-style:normal; font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin-top:26px}

/* ---------- kiemelt ígéretek ---------- */
.promises-band{padding:0 0 88px}
.promises{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.prom{padding:30px 28px; border-radius:var(--r); border:1px solid color-mix(in srgb, var(--acc) 35%, var(--line));
  background:linear-gradient(160deg, color-mix(in srgb, var(--acc) 14%, var(--panel2)) 0%, var(--panel) 70%)}
.prom > .ic{width:30px; height:30px; color:var(--acc)}
.prom h3{font-size:21px; font-weight:700; margin-top:18px}
.prom p{color:var(--ink2); margin-top:10px; font-size:15.5px}
@media (max-width:1020px){ .promises{grid-template-columns:1fr} }

/* ---------- QR-ellenőrzőpontok ---------- */
.qrsec{display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center}
.qrsec h2{font-size:clamp(28px,3.6vw,40px); font-weight:700; margin-top:16px}
.qrsec p{color:var(--ink2); font-size:17px; margin-top:16px}
.shield-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.shield-list li{display:flex; gap:16px; align-items:flex-start; padding:16px 18px; border-radius:14px; background:var(--panel); border:1px solid var(--line)}
.shield-list .ic{color:var(--acc); margin-top:2px; width:22px; height:22px}
.shield-list b{display:block; font-family:var(--f-head); font-size:16px}
.shield-list span{color:var(--ink2); font-size:15px}
@media (max-width:1020px){ .qrsec{grid-template-columns:1fr; gap:32px} }

/* ---------- szolgálatátadás ---------- */
.handover{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center}
.handover h2{font-size:clamp(30px,4vw,44px); font-weight:700; margin-top:16px}
.handover p{color:var(--ink2); font-size:18px; margin-top:16px; max-width:56ch}
.handover p b{color:var(--ink)}
.hcard{max-width:420px; justify-self:center; width:100%; padding:20px; border-radius:24px; border:1px solid var(--line2);
  background:#0E1626; box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 6px rgba(21,30,46,.6); display:grid; gap:10px}
.hc-head{display:flex; justify-content:space-between; align-items:baseline; padding:4px 4px 8px; border-bottom:1px solid var(--line)}
.hc-head span{font-family:var(--f-head); font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc)}
.hc-head b{font-family:var(--f-head); font-size:15px}
.hc-row{display:grid; grid-template-columns:20px 1fr auto; gap:12px; align-items:center; padding:12px 14px; border-radius:12px;
  background:var(--panel2); font-size:14.5px; color:var(--ink2)}
.hc-row .ic{width:18px; height:18px; color:var(--acc)}
.hc-row b{color:var(--ink); font-family:var(--f-head); font-size:14px}
.hc-btn{margin-top:6px; text-align:center; padding:13px; border-radius:12px; background:var(--acc); color:#08101C;
  font-family:var(--f-head); font-weight:800}
@media (max-width:1020px){ .handover{grid-template-columns:1fr; gap:36px} }

/* ---------- csapat ---------- */
.team{padding:72px 0}
.team-in{display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:center; padding:44px 48px;
  border:1px solid var(--line2); border-radius:22px;
  background:radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 60%), var(--panel)}
.team h2{font-size:clamp(26px,3.2vw,36px); font-weight:700; margin-top:14px}
.team p{color:var(--ink2); margin-top:14px; font-size:17px}
.stats{display:grid; gap:12px}
.stat{display:flex; align-items:baseline; gap:16px; padding:18px 22px; border-radius:14px; background:var(--bg); border:1px solid var(--line)}
.stat b{font-family:var(--f-head); font-weight:700; font-size:30px; color:var(--acc); min-width:4.2em; line-height:1}
.stat span{color:var(--ink2)}
@media (max-width:1020px){ .team-in{grid-template-columns:1fr; gap:28px} }
@media (max-width:640px){ .team-in{padding:28px 20px} .stat b{font-size:24px} }

/* ---------- termékkártyák ---------- */
.products{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pcard{--c:var(--steel); position:relative; display:flex; flex-direction:column; gap:16px; padding:30px 28px 26px;
  background:linear-gradient(180deg, var(--panel2) 0%, var(--panel) 100%); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; transition:border-color .2s, transform .2s}
.pcard::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--c)}
.pcard::after{content:""; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--c) 18%, transparent) 0%, transparent 70%)}
.pcard:hover{border-color:color-mix(in srgb, var(--c) 55%, transparent); transform:translateY(-3px)}
.pcard.sec{--c:var(--sec)} .pcard.san{--c:var(--san)} .pcard.est{--c:var(--est)}
.pcard .status{align-self:flex-start}
.pcard .code{font-family:var(--f-head); font-weight:800; font-size:34px; letter-spacing:.2em; color:var(--c); line-height:1}
.pcard .sector{font-family:var(--f-head); font-weight:700; font-size:14px; color:var(--ink2); letter-spacing:.02em}
.pcard .txt{color:var(--ink2); font-size:16px; flex:1}
.pcard .foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:6px}
.pcard .go{width:42px; height:42px; border-radius:50%; border:1px solid var(--line2); display:flex; align-items:center;
  justify-content:center; color:var(--c); transition:background .15s, color .15s}
.pcard:hover .go{background:var(--c); color:#08101C; border-color:var(--c)}

/* ---------- ikonos rács ---------- */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.feat{padding:24px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.feat .ibox{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  color:var(--acc); background:color-mix(in srgb, var(--acc) 12%, transparent); margin-bottom:16px}
.feat .ibox .ic{width:22px; height:22px}
.feat h3{font-size:17px; font-weight:700}
.feat p{color:var(--ink2); font-size:15px; margin-top:8px}

.why{display:grid; grid-template-columns:repeat(3,1fr); gap:36px}
.why .n{font-family:var(--f-head); font-weight:800; font-size:13px; letter-spacing:.2em; color:var(--acc)}
.why h3{font-size:22px; font-weight:800; margin-top:12px}
.why p{color:var(--ink2); margin-top:10px}

/* ---------- problémák ---------- */
.pains{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden}
.pain{background:var(--bg); padding:28px 26px; display:flex; gap:16px}
.sec-alt .pain{background:var(--bg2)}
.pain .ic{color:var(--alarm); width:22px; height:22px; margin-top:2px}
.pain p{font-size:17px; color:var(--ink2)}
.pain b{color:var(--ink); font-weight:700}

/* ---------- pillérek ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pillar{padding:30px 28px; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel2), var(--panel))}
.pillar .head{display:flex; align-items:center; gap:14px}
.pillar .head .ibox{width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  color:#08101C; background:var(--acc)}
.pillar .head .ibox .ic{width:24px; height:24px}
.pillar h3{font-size:24px; font-weight:800}
.pillar .who{font-size:14px; color:var(--muted)}
.pillar ul{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:12px}
.pillar li{display:flex; gap:12px; color:var(--ink2); font-size:15.5px}
.pillar li::before{content:""; flex:none; width:6px; height:6px; border-radius:50%; background:var(--acc); margin-top:9px}

/* ---------- folyam (riasztás útja) ---------- */
.flow{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; counter-reset:st; position:relative}
.flow::before{content:""; position:absolute; left:4%; right:4%; top:27px; height:2px;
  background:linear-gradient(90deg, var(--alarm), var(--acc) 40%, var(--ok))}
.step{position:relative; text-align:left}
.step .num{width:56px; height:56px; border-radius:50%; background:var(--bg); border:2px solid var(--acc);
  display:flex; align-items:center; justify-content:center; color:var(--acc); position:relative; z-index:1}
.step:first-child .num{border-color:var(--alarm); color:var(--alarm)}
.step:last-child .num{border-color:var(--ok); color:var(--ok)}
.sec-alt .step .num{background:var(--bg2)}
.step .num .ic{width:24px; height:24px}
.step h3{font-size:17px; font-weight:800; margin-top:18px}
.step h3::before{counter-increment:st; content:counter(st) ". "; color:var(--muted); font-weight:700}
.step p{font-size:14.5px; color:var(--ink2); margin-top:8px}
.callout{margin-top:52px; padding:26px 30px; border-radius:var(--r); border:1px solid var(--line2);
  background:linear-gradient(90deg, color-mix(in srgb, var(--acc) 10%, transparent), transparent 70%);
  display:flex; align-items:center; gap:20px}
.callout .ic{width:30px; height:30px; color:var(--acc)}
.callout p{font-family:var(--f-head); font-weight:700; font-size:clamp(18px,2.2vw,22px)}

/* ---------- funkció-csoportok ---------- */
.fgroups{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.fg{padding:24px 24px 22px; border:1px solid var(--line); border-radius:var(--r); background:var(--panel)}
.fg .t{display:flex; align-items:center; gap:12px; color:var(--acc)}
.fg h3{font-size:17px; font-weight:800; color:var(--ink)}
.fg .tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.tag{font-size:13.5px; color:var(--ink2); padding:5px 11px; border-radius:8px; background:var(--panel2); border:1px solid var(--line)}
.fg.soon{background:transparent; border-style:dashed; border-color:var(--line2); grid-column:span 3}
.fg.soon .tags{gap:10px}
.fg.soon .tag{display:inline-flex; align-items:center; gap:8px; background:transparent; border-style:dashed}
.fg.soon .tag .ic{width:16px; height:16px; color:var(--acc)}

/* ---------- lépések (bevezetés) ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.st{padding:26px 24px; border-radius:var(--r); border:1px solid var(--line); background:var(--panel); position:relative}
.st .when{font-family:var(--f-head); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc)}
.st h3{font-size:19px; font-weight:800; margin-top:10px}
.st p{color:var(--ink2); font-size:15px; margin-top:8px}
.st .big{position:absolute; right:20px; top:14px; font-family:var(--f-head); font-weight:800; font-size:44px;
  color:color-mix(in srgb, var(--acc) 16%, transparent); line-height:1}

/* ---------- díjazás ---------- */
.price{display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; padding:48px;
  border:1px solid var(--line2); border-radius:22px;
  background:radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--acc) 14%, transparent), transparent 60%), var(--panel)}
.price h2{font-size:clamp(28px,3.6vw,40px); font-weight:700; margin-top:14px}
.price .lead{color:var(--ink2); margin-top:14px; font-size:17px}
.price ul{list-style:none; padding:0; margin:0; display:grid; gap:14px}
.price li{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:12px; background:var(--bg); border:1px solid var(--line)}
.price li .ic{color:var(--acc); margin-top:2px}
.price li b{display:block; font-family:var(--f-head)}
.price li span{color:var(--ink2); font-size:15px}

/* ---------- GYIK ---------- */
.faq{max-width:860px; margin:0 auto; display:grid; gap:12px}
.faq details{border:1px solid var(--line); border-radius:12px; background:var(--panel); transition:border-color .15s}
.faq details[open]{border-color:var(--line2)}
.faq summary{list-style:none; cursor:pointer; padding:20px 22px; font-family:var(--f-head); font-weight:700; font-size:17px;
  display:flex; justify-content:space-between; gap:16px; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:24px; font-weight:400; color:var(--acc); line-height:1; transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--acc)}
.faq details p{padding:0 22px 22px; color:var(--ink2)}

/* ---------- zárás / CTA ---------- */
.closing{padding:120px 0; text-align:center; overflow:hidden}
.closing h2{font-size:clamp(34px,5vw,58px); font-weight:700; letter-spacing:-.02em}
.closing p{color:var(--ink2); font-size:18px; margin:18px auto 0; max-width:48ch}
.closing .btn-row{justify-content:center; margin-top:34px}

/* ---------- kapcsolat ---------- */
.contact{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:start}
.contact h2{font-size:clamp(30px,4vw,44px); font-weight:700; margin-top:16px}
.contact .lead{color:var(--ink2); font-size:18px; margin-top:16px}
.direct{display:grid; gap:12px; margin-top:32px}
.direct a{display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel); transition:border-color .15s, background .15s}
.direct a:hover{border-color:var(--acc); background:var(--panel2)}
.direct .ic{color:var(--acc)}
.direct small{display:block; color:var(--muted); font-size:13px}
.direct b{font-family:var(--f-head); font-size:17px}
form.cform{padding:32px; border:1px solid var(--line2); border-radius:20px; background:var(--panel); display:grid; gap:16px}
.cform .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.cform label{display:grid; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink2); font-family:var(--f-head)}
.cform input,.cform textarea,.cform select{font:inherit; font-family:var(--f-body); font-weight:400; font-size:16px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line2); border-radius:10px; padding:12px 14px; width:100%; transition:border-color .15s, box-shadow .15s}
.cform textarea{min-height:120px; resize:vertical}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none; border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 25%, transparent)}
.cform .pick{display:flex; flex-wrap:wrap; gap:8px}
.cform .pick label{display:block}
.cform .pick input{position:absolute; opacity:0; width:1px; height:1px}
.cform .pick span{display:inline-block; padding:9px 15px; border-radius:100px; border:1px solid var(--line2); color:var(--ink2);
  font-size:14px; cursor:pointer; transition:.15s; font-weight:600}
.cform .pick input:checked + span{background:var(--acc); border-color:var(--acc); color:#08101C}
.cform .pick input:focus-visible + span{box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 35%, transparent)}
.cform .note{font-size:13px; color:var(--muted); font-family:var(--f-body); font-weight:400}
.cform .hp{position:absolute; left:-9999px}
.cform .msg{display:none; padding:14px 16px; border-radius:10px; font-size:15px}
.cform .msg.ok{display:block; background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok)}
.cform .msg.err{display:block; background:color-mix(in srgb, var(--alarm) 14%, transparent); color:var(--alarm)}
.cform .btn{justify-self:start}

/* ---------- illusztráció (élő térkép) ---------- */
.device{position:relative}
.device .screen{border-radius:16px; border:1px solid var(--line2); background:#0C1220; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 6px rgba(21,30,46,.6)}
.device .bar{display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--panel)}
.device .bar i{width:9px; height:9px; border-radius:50%; background:var(--line2)}
.device .phone{position:absolute; right:-14px; bottom:-34px; width:38%; border-radius:26px; border:1px solid var(--line2);
  background:#0B111C; padding:10px; box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 5px rgba(21,30,46,.8)}
.phone .ph-in{border-radius:18px; background:#0E1626; padding:14px 12px 12px; display:grid; gap:9px}
.ph-alarm{border-radius:12px; padding:11px 12px; background:color-mix(in srgb, var(--alarm) 18%, #0E1626);
  border:1px solid color-mix(in srgb, var(--alarm) 55%, transparent)}
.ph-alarm .k{font-family:var(--f-head); font-weight:800; font-size:10px; letter-spacing:.16em; color:var(--alarm)}
.ph-alarm .t{font-family:var(--f-head); font-weight:800; font-size:13px; margin-top:4px}
.ph-alarm .s{font-size:11px; color:var(--ink2); margin-top:2px}
.ph-row{display:flex; justify-content:space-between; font-size:11px; color:var(--ink2); padding:7px 10px; border-radius:9px; background:var(--panel2)}
.ph-row b{color:var(--ink); font-family:var(--f-head)}
.ph-btn{border-radius:10px; text-align:center; font-family:var(--f-head); font-weight:800; font-size:12px; padding:10px; background:var(--acc); color:#08101C}

/* ---------- képernyőképek (valódi felület, kitalált demó cég adataival) ---------- */
.device .screen img{display:block; width:100%; height:auto}
.device .phone.shot-ph{padding:7px; width:26%; right:-12px; bottom:-40px}
.device .phone.shot-ph img{display:block; width:100%; height:auto; border-radius:20px}
.shots{display:grid; gap:20px; margin-top:44px}
.shots.c2{grid-template-columns:1fr 1fr}
.shots.c3{grid-template-columns:1fr 1.6fr 1.6fr; align-items:end}
.shot{margin:0}
.shot .frame{border-radius:14px; border:1px solid var(--line2); background:var(--panel); overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.shot .frame .bar{display:flex; gap:6px; padding:9px 12px; border-bottom:1px solid var(--line)}
.shot .frame .bar i{width:8px; height:8px; border-radius:50%; background:var(--line2)}
.shot img{display:block; width:100%; height:auto}
.shot.ph .frame{border-radius:26px; padding:6px; background:#0B111C; max-width:260px; margin:0 auto}
.shot.ph img{border-radius:20px}
.shot figcaption{font-size:14px; color:var(--muted); margin-top:12px; text-align:center}
.shot figcaption b{color:var(--ink2); font-weight:600}
.showcase{position:relative; max-width:980px; margin:56px auto 0; padding-bottom:34px}
.playback{display:grid; grid-template-columns:1fr 1.5fr; gap:56px; align-items:center}
.playback h2{font-size:clamp(28px,3.6vw,40px); font-weight:700; margin-top:16px}
.playback p{color:var(--ink2); font-size:17px; margin-top:16px}
.qr-ph{max-width:240px; margin-top:28px}
@media (max-width:1020px){
  .shots.c3{grid-template-columns:1fr 1fr} .shots.c3 .shot.ph{grid-column:1 / -1}
  .playback{grid-template-columns:1fr; gap:32px}
}
@media (max-width:640px){ .shots.c2,.shots.c3{grid-template-columns:1fr} .device .phone.shot-ph{width:34%; right:-6px} }

/* ---------- jogi lapok ---------- */
.doc{max-width:820px; margin:0 auto; padding:72px var(--gut) 96px}
.doc h1{font-size:clamp(32px,4.4vw,46px); font-weight:800}
.doc h2{font-size:22px; font-weight:800; margin:40px 0 12px}
.doc p,.doc li{color:var(--ink2)}
.doc p{margin:0 0 12px}
.doc table{width:100%; border-collapse:collapse; margin:12px 0 20px; font-size:15px}
.doc th,.doc td{text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line)}
.doc th{color:var(--ink); font-family:var(--f-head); width:34%}

/* ---------- lábléc ---------- */
.site-foot{border-top:1px solid var(--line); background:var(--bg2); padding:64px 0 36px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:36px}
.foot-grid .brand .logo{height:30px}
.foot-grid .about{color:var(--muted); font-size:14.5px; margin-top:16px; max-width:34ch}
.foot-grid h4{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:14px}
.flinks{display:grid; gap:4px}
.flinks a{display:flex; align-items:center; gap:10px; padding:7px 10px; margin-left:-10px; border-radius:8px; color:var(--ink2);
  font-size:15px; transition:background .15s, color .15s}
.flinks a:hover{background:var(--panel2); color:var(--ink)}
.flinks .code{font-family:var(--f-head); font-weight:800; letter-spacing:.14em; font-size:12.5px; min-width:34px}
.flinks .ic{width:16px; height:16px; color:var(--steel)}
.foot-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:22px;
  border-top:1px solid var(--line); color:var(--muted); font-size:13px}

/* ---------- megjelenés görgetéskor ---------- */
.rv{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none} .status .pulse{animation:none} html{scroll-behavior:auto} }

/* ---------- reszponzív ---------- */
@media (max-width:1020px){
  .products,.pillars,.fgroups,.grid-3{grid-template-columns:1fr 1fr}
  .fg.soon{grid-column:span 2}
  .grid-4,.steps{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:repeat(3,1fr); row-gap:36px}
  .flow::before{display:none}
  .hero-2{grid-template-columns:1fr; gap:64px}
  .device{max-width:640px}
  .price,.contact{grid-template-columns:1fr; gap:36px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .pains{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .nav-toggle{display:flex}
  .nav{display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px;
    padding:12px var(--gut) 20px; background:rgba(10,14,21,.97); border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{padding:13px 14px; font-size:16px}
  .nav .btn{margin:10px 0 0; justify-content:center}
}
@media (max-width:640px){
  :root{--gut:16px}
  body{font-size:16px}
  .sec-pad{padding:72px 0}
  .hero{padding:64px 0 72px}
  .hero-mark,.hero-mark .logo{height:84px}
  .products,.pillars,.fgroups,.grid-3,.grid-4,.grid-2,.steps,.why,.pains{grid-template-columns:1fr}
  .fg.soon{grid-column:auto}
  .flow{grid-template-columns:1fr; row-gap:0}
  .step{display:grid; grid-template-columns:56px 1fr; column-gap:18px; padding-bottom:26px; position:relative}
  .step:not(:last-child)::after{content:""; position:absolute; left:27px; top:56px; bottom:0; width:2px; background:var(--line2)}
  .step h3{margin-top:4px} .step p{grid-column:2}
  .step .num{grid-row:span 2}
  .price{padding:28px 20px}
  form.cform{padding:22px 18px}
  .cform .row2{grid-template-columns:1fr}
  .callout{flex-direction:column; align-items:flex-start; padding:22px}
  .foot-grid{grid-template-columns:1fr}
  .device .phone{width:46%; right:-6px; bottom:-28px}
  .btn{padding:13px 20px}
  .hero .btn-row .btn{flex:1 1 100%; justify-content:center}
}