/* VIR Systems website — same palette as the app (shell.css) */
:root{
  --bg:#0b0f17;
  --surface-rgb:17,24,39;
  --surface-2:#0b1220;
  --panel2:#0f172a;
  --border:#1f2937;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --accent:#22c55e;
  --accent-rgb:34,197,94;
  --accent-ink:#052e16;
  --overlay-rgb:255,255,255;
  --ok-bg:rgba(34,197,94,.15);       --ok-text:#4ade80;
  --warn-bg:rgba(245,158,11,.15);    --warn-text:#fbbf24;
  --danger-bg:rgba(239,68,68,.15);   --danger-text:#f87171;
  --neutral-bg:rgba(148,163,184,.15);--neutral-text:#94a3b8;
  --info-bg:rgba(56,189,248,.15);    --info-text:#7dd3fc;
  --shadow:0 30px 80px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --bg:#f5f6f8;
  --surface-rgb:255,255,255;
  --surface-2:#eef0f3;
  --panel2:#eef0f3;
  --border:#d8dce3;
  --text:#111827;
  --muted:#5b6472;
  --accent:#16a34a;
  --accent-rgb:22,163,74;
  --accent-ink:#ffffff;
  --overlay-rgb:0,0,0;
  --ok-bg:rgba(22,163,74,.12);       --ok-text:#15803d;
  --warn-bg:rgba(217,119,6,.14);     --warn-text:#b45309;
  --danger-bg:rgba(220,38,38,.12);   --danger-text:#b91c1c;
  --neutral-bg:rgba(100,116,139,.14);--neutral-text:#475569;
  --info-bg:rgba(2,132,199,.12);     --info-text:#0369a1;
  --shadow:0 30px 70px rgba(15,23,42,.14);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:76px; }
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
*{ scrollbar-width:thin; scrollbar-color:rgba(var(--overlay-rgb),.22) transparent; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
.mono{ font-family:ui-monospace,"Cascadia Code",Consolas,monospace; }

.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .wrap{ padding:0 16px; } }

/* ---------- top bar ---------- */
.top{
  position:sticky; top:0; z-index:50;
  background:rgba(var(--surface-rgb),.78);
  backdrop-filter:saturate(1.4) blur(12px);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--border);
}
.top .wrap{ display:flex; align-items:center; gap:18px; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.logo{
  width:38px; height:38px; border-radius:11px;
  display:grid; place-items:center;
  background:rgba(var(--accent-rgb),.14);
  border:1px solid rgba(var(--accent-rgb),.45);
  color:var(--accent); font-weight:800; font-size:14px; letter-spacing:1px;
  font-family:ui-monospace,Consolas,monospace;
}
.brand b{ font-size:18px; letter-spacing:.6px; }
.brand span{ color:var(--muted); font-weight:500; font-size:13px; margin-left:2px; }
.menu{ display:flex; gap:4px; margin-left:auto; }
.menu a{
  text-decoration:none; color:var(--muted); font-size:14px; font-weight:550;
  padding:8px 12px; border-radius:10px; white-space:nowrap;
}
.top .cta-top{ white-space:nowrap; }
.menu a:hover{ color:var(--text); background:rgba(var(--overlay-rgb),.05); }
.tools{ display:flex; gap:8px; align-items:center; }
.chip{
  height:36px; min-width:36px; padding:0 10px;
  border:1px solid var(--border); border-radius:10px;
  background:rgba(var(--surface-rgb),.6); color:var(--text);
  font-weight:600; font-size:13px; line-height:1; font-family:inherit; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.chip:hover{ border-color:rgba(var(--accent-rgb),.6); }
.chip:focus-visible,.btn:focus-visible,.menu a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.burger{ display:none; }
@media (max-width:1200px){
  .menu{
    display:none; position:absolute; left:0; right:0; top:64px;
    flex-direction:column; gap:0; padding:8px 16px 14px;
    background:rgba(var(--surface-rgb),.98); border-bottom:1px solid var(--border);
  }
  .menu.open{ display:flex; }
  .menu a{ padding:12px; }
  .burger{ display:inline-flex; }
  .tools{ margin-left:auto; }
  .top .cta-top{ display:none; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 20px; border-radius:12px;
  font-weight:650; font-size:15px; line-height:1; font-family:inherit; text-decoration:none; cursor:pointer;
  border:1px solid var(--border); background:rgba(var(--surface-rgb),.7); color:var(--text);
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
}
.btn:hover{ transform:translateY(-1px); border-color:rgba(var(--accent-rgb),.6); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.primary:hover{ filter:brightness(1.08); }
.btn.sm{ height:36px; padding:0 14px; font-size:13.5px; border-radius:10px; }

/* ---------- sections ---------- */
section{ padding:96px 0; }
section.tight{ padding:64px 0; }
.alt{ background:rgba(var(--overlay-rgb),.022); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--accent); font-weight:700; font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase;
}
.kicker::before{ content:""; width:18px; height:2px; background:var(--accent); border-radius:2px; }
h1,h2,h3{ margin:0; line-height:1.15; letter-spacing:-.01em; }
h2{ font-size:clamp(28px,3.6vw,40px); margin-top:12px; }
.lead{ color:var(--muted); font-size:18px; max-width:680px; margin:14px 0 0; }
.sec-head{ margin-bottom:44px; }
.sec-head.center{ text-align:center; }
.sec-head.center .lead{ margin-left:auto; margin-right:auto; }
.sec-head.center .kicker::after{ content:""; width:18px; height:2px; background:var(--accent); border-radius:2px; }

/* ---------- hero ---------- */
.hero{ padding:72px 0 88px; position:relative; }
.hero::before{
  content:""; position:absolute; inset:-120px 0 auto 0; height:620px; z-index:-1;
  background:
    radial-gradient(600px 300px at 18% 20%, rgba(var(--accent-rgb),.16), transparent 70%),
    radial-gradient(500px 280px at 85% 10%, rgba(56,189,248,.08), transparent 70%);
}
.hero-grid{ display:grid; grid-template-columns:1.02fr 1fr; gap:52px; align-items:center; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:44px; } }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600;
  background:rgba(var(--accent-rgb),.1); color:var(--accent); border:1px solid rgba(var(--accent-rgb),.3);
}
.badge i{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.2); }
.hero h1{ font-size:clamp(36px,5.2vw,60px); margin-top:20px; letter-spacing:-.025em; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero .lead{ font-size:19px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.hero-points{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:28px; color:var(--muted); font-size:14px; }
.hero-points span{ display:inline-flex; align-items:center; gap:8px; }
.tick{ width:16px; height:16px; border-radius:50%; background:var(--ok-bg); color:var(--ok-text); display:inline-grid; place-items:center; font-size:10px; font-weight:900; flex-shrink:0; }

/* ---------- mock app window ---------- */
.win{
  border:1px solid var(--border); border-radius:18px; overflow:hidden;
  background:rgba(var(--surface-rgb),.92); box-shadow:var(--shadow);
}
.win-bar{
  display:flex; align-items:center; gap:7px; padding:10px 14px;
  border-bottom:1px solid var(--border); background:rgba(var(--overlay-rgb),.03);
  font-size:12px; color:var(--muted);
}
.win-bar i{ width:10px; height:10px; border-radius:50%; background:rgba(var(--overlay-rgb),.14); }
.win-bar .url{ margin-left:10px; padding:3px 10px; border-radius:7px; background:rgba(var(--overlay-rgb),.05); font-family:ui-monospace,Consolas,monospace; font-size:11.5px; }
.app-mock{ display:grid; grid-template-columns:150px 1fr; min-height:360px; }
.app-side{ border-right:1px solid var(--border); padding:12px 10px; display:flex; flex-direction:column; gap:3px; font-size:12px; }
.app-side .mini-brand{ display:flex; gap:8px; align-items:center; padding:4px 6px 12px; font-weight:700; }
.app-side .mini-brand .logo{ width:26px; height:26px; border-radius:8px; font-size:10px; }
.app-side a{ padding:6px 8px; border-radius:8px; color:var(--muted); text-decoration:none; display:flex; justify-content:space-between; }
.app-side a.on{ background:rgba(var(--accent-rgb),.12); color:var(--text); }
.app-side a small{ color:var(--warn-text); font-weight:700; }
.app-main{ padding:14px 16px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.app-main h4{ margin:0; font-size:15px; }
.app-main .sub{ color:var(--muted); font-size:12px; margin-top:2px; }
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.tile{ border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:rgba(var(--overlay-rgb),.02); }
.tile .l{ font-size:10.5px; color:var(--muted); }
.tile .v{ font-size:18px; font-weight:750; margin-top:2px; }
.tile .v.ok{ color:var(--ok-text); } .tile .v.warn{ color:var(--warn-text); } .tile .v.bad{ color:var(--danger-text); }
.attn{ border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.attn .h{ padding:8px 12px; font-size:11.5px; font-weight:700; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; color:var(--muted); }
.attn .r{ display:flex; align-items:center; gap:10px; padding:8px 12px; font-size:12.5px; border-bottom:1px solid var(--border); }
.attn .r:last-child{ border-bottom:0; }
.attn .r .t{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.attn .r .t b{ font-weight:650; }
.attn .r .t span{ color:var(--muted); }
.pill{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; font-size:10.5px; font-weight:750; letter-spacing:.2px; white-space:nowrap; }
.pill.ok{ background:var(--ok-bg); color:var(--ok-text); }
.pill.warn{ background:var(--warn-bg); color:var(--warn-text); }
.pill.bad{ background:var(--danger-bg); color:var(--danger-text); }
.pill.neutral{ background:var(--neutral-bg); color:var(--neutral-text); }
.pill.info{ background:var(--info-bg); color:var(--info-text); }
@media (max-width:560px){
  .app-mock{ grid-template-columns:1fr; }
  .app-side{ display:none; }
  .tiles{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- logos / numbers strip ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:16px; overflow:hidden; }
.stats > div{ background:var(--bg); padding:22px 22px; }
.stats b{ display:block; font-size:30px; letter-spacing:-.02em; color:var(--accent); }
.stats span{ color:var(--muted); font-size:14px; }
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* ---------- flow ---------- */
.flow{ display:grid; grid-template-columns:repeat(8,1fr); gap:0; counter-reset:step; position:relative; }
.flow::before{ content:""; position:absolute; left:6%; right:6%; top:23px; height:2px; background:linear-gradient(90deg,rgba(var(--accent-rgb),.1),rgba(var(--accent-rgb),.7),rgba(var(--accent-rgb),.1)); }
.flow li{ list-style:none; text-align:center; padding:0 6px; position:relative; counter-increment:step; }
.flow li::before{
  content:counter(step); display:grid; place-items:center; margin:0 auto 14px;
  width:46px; height:46px; border-radius:14px; font-weight:800; font-size:15px;
  background:var(--bg); border:1.5px solid rgba(var(--accent-rgb),.55); color:var(--accent);
  position:relative;
}
.flow b{ display:block; font-size:14.5px; }
.flow span{ display:block; color:var(--muted); font-size:12.5px; margin-top:4px; line-height:1.4; }
.flow{ padding:0; margin:0; }
@media (max-width:980px){
  .flow{ grid-template-columns:repeat(4,1fr); row-gap:30px; }
  .flow::before{ display:none; }
}
@media (max-width:520px){ .flow{ grid-template-columns:repeat(2,1fr); } }

/* ---------- showcase rows ---------- */
.show{ display:grid; grid-template-columns:1fr 1.08fr; gap:60px; align-items:center; }
.show + .show{ margin-top:110px; }
.show.flip .show-text{ order:2; }
@media (max-width:980px){
  .show{ grid-template-columns:1fr; gap:34px; }
  .show.flip .show-text{ order:0; }
  .show + .show{ margin-top:80px; }
}
.show h3{ font-size:clamp(24px,2.8vw,32px); margin-top:10px; }
.show p{ color:var(--muted); font-size:16.5px; }
.checks{ list-style:none; padding:0; margin:20px 0 0; display:grid; gap:10px; }
.checks li{ display:flex; gap:12px; font-size:15px; }
.checks li .tick{ margin-top:4px; }
.checks b{ font-weight:650; }

/* kiosk mock */
.tablet{
  border:10px solid #111827; border-radius:28px; background:var(--bg); box-shadow:var(--shadow);
  padding:16px; max-width:560px; margin:0 auto;
}
:root[data-theme="light"] .tablet{ border-color:#1f2937; }
.k-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.k-head .who{ font-weight:700; }
.k-head .who small{ display:block; color:var(--muted); font-weight:500; font-size:11.5px; }
.k-clock{ font-family:ui-monospace,Consolas,monospace; color:var(--muted); font-size:13px; }
.k-run{
  border:1px solid rgba(var(--accent-rgb),.5); background:rgba(var(--accent-rgb),.07);
  border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:14px; margin-bottom:12px;
}
.k-run .t{ flex:1; font-size:13px; }
.k-run .t b{ display:block; font-size:15px; }
.k-run .timer{ font:800 26px/1 ui-monospace,Consolas,monospace; color:var(--accent); }
.k-btn{ border:0; border-radius:10px; padding:10px 14px; font-weight:750; font-size:13px; line-height:1; font-family:inherit; cursor:default; }
.k-btn.go{ background:var(--accent); color:var(--accent-ink); }
.k-btn.stop{ background:var(--danger-bg); color:var(--danger-text); }
.k-btn.ghost{ background:rgba(var(--overlay-rgb),.06); color:var(--muted); }
.k-ops{ display:grid; gap:8px; }
.k-op{ border:1px solid var(--border); border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:12px; background:rgba(var(--surface-rgb),.6); }
.k-op .n{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:800; font-size:12px; background:rgba(var(--overlay-rgb),.06); color:var(--muted); flex-shrink:0; }
.k-op .t{ flex:1; min-width:0; font-size:13px; }
.k-op .t b{ display:block; font-size:14px; }
.k-op .t span{ color:var(--muted); font-size:12px; }
.k-op.done{ opacity:.55; }
.k-op.locked{ opacity:.6; }
.k-op.live{ border-color:rgba(var(--accent-rgb),.55); }

/* floor screen mock */
.tv{ border:12px solid #0a0a0a; border-bottom-width:18px; border-radius:14px; background:#070b12; box-shadow:var(--shadow); color:#e5e7eb; padding:14px; font-size:12px; }
.tv-alert{ display:flex; gap:10px; align-items:center; padding:8px 12px; border-radius:10px; background:rgba(239,68,68,.16); color:#fca5a5; font-weight:700; margin-bottom:12px; font-size:12.5px; }
.tv-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.m{ border-radius:12px; padding:10px 12px; border:1px solid #1f2937; background:#0f172a; min-height:96px; }
.m .c{ display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:14px; }
.m .s{ font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px; }
.m.run{ border-color:rgba(34,197,94,.55); background:linear-gradient(180deg,rgba(34,197,94,.12),#0f172a 70%); }
.m.run .s{ background:rgba(34,197,94,.2); color:#4ade80; }
.m.idle .s{ background:rgba(148,163,184,.18); color:#94a3b8; }
.m.down{ border-color:rgba(239,68,68,.55); background:linear-gradient(180deg,rgba(239,68,68,.12),#0f172a 70%); }
.m.down .s{ background:rgba(239,68,68,.2); color:#f87171; }
.m .d{ color:#9ca3af; margin-top:6px; line-height:1.35; }
.m .d b{ color:#e5e7eb; font-weight:650; }
.m .tm{ font:800 17px/1 ui-monospace,Consolas,monospace; color:#4ade80; margin-top:6px; }
.tv-foot{ display:flex; justify-content:space-between; margin-top:10px; color:#6b7280; font-size:11px; }
@media (max-width:520px){ .tv-grid{ grid-template-columns:repeat(2,1fr); } }

/* cost vs quote mock */
.cost{ padding:18px; }
.cost-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.cost-head b{ font-size:15px; }
.bars{ display:grid; gap:14px; margin-top:18px; }
.bar .lbl{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-bottom:6px; }
.bar .lbl b{ color:var(--text); }
.track{ height:12px; border-radius:999px; background:rgba(var(--overlay-rgb),.07); overflow:hidden; }
.fill{ height:100%; border-radius:999px; background:var(--accent); width:0; transition:width 1.1s cubic-bezier(.2,.8,.2,1); }
.fill.q{ background:rgba(var(--overlay-rgb),.28); }
.fill.warn{ background:var(--warn-text); }
.cost-sum{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:18px; }
.cost-note{ margin-top:14px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--border); padding-top:12px; }

/* ---------- module grid ---------- */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:980px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid{ grid-template-columns:1fr; } }
.card{
  border:1px solid var(--border); border-radius:16px; padding:22px;
  background:rgba(var(--surface-rgb),.55);
  transition:border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color:rgba(var(--accent-rgb),.45); transform:translateY(-2px); }
.ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(var(--accent-rgb),.1); color:var(--accent); margin-bottom:14px;
}
.ico svg{ width:22px; height:22px; }
.card h3{ font-size:17px; }
.card p{ color:var(--muted); font-size:14.5px; margin:8px 0 0; }
.card .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }

/* ---------- add-ons ---------- */
.addons{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .addons{ grid-template-columns:1fr; } }
.addon{ border:1px solid var(--border); border-radius:18px; padding:26px; background:rgba(var(--surface-rgb),.6); display:flex; flex-direction:column; position:relative; overflow:hidden; }
.addon::after{ content:""; position:absolute; right:-60px; top:-60px; width:160px; height:160px; border-radius:50%; background:rgba(var(--accent-rgb),.08); }
.addon .tag{ font-size:11px; font-weight:800; letter-spacing:1.2px; color:var(--accent); text-transform:uppercase; }
.addon h3{ font-size:22px; margin-top:8px; }
.addon p{ color:var(--muted); font-size:15px; }
.addon ul{ margin:6px 0 18px; padding-left:18px; color:var(--text); font-size:14.5px; display:grid; gap:6px; }
.addon ul li::marker{ color:var(--accent); }
.addon .price{ margin-top:auto; padding-top:16px; border-top:1px solid var(--border); display:flex; align-items:baseline; gap:6px; }
.addon .price b{ font-size:26px; }
.addon .price span{ color:var(--muted); font-size:13.5px; }

/* ---------- pricing ---------- */
.billing{ display:inline-flex; padding:4px; border:1px solid var(--border); border-radius:12px; background:rgba(var(--surface-rgb),.6); margin-top:24px; }
.billing button{ border:0; background:none; color:var(--muted); font-weight:650; font-size:14px; line-height:1; font-family:inherit; padding:10px 16px; border-radius:9px; cursor:pointer; }
.billing button.on{ background:var(--accent); color:var(--accent-ink); }
.billing button small{ font-weight:700; opacity:.85; margin-left:4px; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
@media (max-width:980px){ .plans{ grid-template-columns:1fr; max-width:520px; margin:0 auto; } }
.plan{ border:1px solid var(--border); border-radius:20px; padding:28px; background:rgba(var(--surface-rgb),.6); display:flex; flex-direction:column; position:relative; }
.plan.best{ border-color:rgba(var(--accent-rgb),.7); background:linear-gradient(180deg,rgba(var(--accent-rgb),.09),rgba(var(--surface-rgb),.6) 40%); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.2), var(--shadow); }
.plan .ribbon{ position:absolute; top:-12px; left:28px; background:var(--accent); color:var(--accent-ink); font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:999px; letter-spacing:.4px; }
.plan h3{ font-size:20px; }
.plan .for{ color:var(--muted); font-size:14px; margin-top:6px; min-height:42px; }
.plan .amount{ display:flex; align-items:baseline; gap:6px; margin-top:18px; }
.plan .amount b{ font-size:44px; letter-spacing:-.03em; }
.plan .amount span{ color:var(--muted); font-size:14px; }
.plan .note{ color:var(--muted); font-size:12.5px; margin-top:4px; min-height:19px; }
.plan .btn{ margin-top:22px; width:100%; }
.plan ul{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:10px; font-size:14.5px; }
.plan ul li{ display:flex; gap:10px; }
.plan ul li .tick{ margin-top:4px; }
.plan ul li.head{ font-weight:700; color:var(--muted); font-size:12.5px; text-transform:uppercase; letter-spacing:1px; margin-top:6px; }
.plan ul li.no{ color:var(--muted); }
.plan ul li.no .tick{ background:var(--neutral-bg); color:var(--neutral-text); }
.extras{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px; }
@media (max-width:780px){ .extras{ grid-template-columns:1fr; } }
.extra{ border:1px dashed var(--border); border-radius:14px; padding:16px 18px; display:flex; justify-content:space-between; gap:14px; align-items:center; }
.extra div{ font-size:14px; }
.extra div small{ display:block; color:var(--muted); font-size:12.5px; }
.extra b{ font-size:18px; white-space:nowrap; }
.fine{ text-align:center; color:var(--muted); font-size:13px; margin-top:22px; }

/* ---------- trust ---------- */
.trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:980px){ .trust{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .trust{ grid-template-columns:1fr; } }
.trust .card{ padding:20px; }
.trust h3{ font-size:16px; }

/* ---------- faq ---------- */
.faq{ max-width:820px; margin:0 auto; display:grid; gap:10px; }
.faq details{ border:1px solid var(--border); border-radius:14px; background:rgba(var(--surface-rgb),.55); }
.faq summary{ cursor:pointer; list-style:none; padding:18px 20px; font-weight:650; font-size:16px; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--accent); font-size:22px; line-height:1; transition:transform .2s ease; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:0; padding:0 20px 18px; color:var(--muted); font-size:15px; }

/* ---------- contact ---------- */
.contact{ display:grid; grid-template-columns:1fr 1.15fr; gap:40px; }
@media (max-width:900px){ .contact{ grid-template-columns:1fr; } }
.c-list{ display:grid; gap:12px; margin-top:28px; }
.c-item{ display:flex; gap:14px; align-items:center; padding:14px 16px; border:1px solid var(--border); border-radius:14px; background:rgba(var(--surface-rgb),.55); text-decoration:none; }
.c-item:hover{ border-color:rgba(var(--accent-rgb),.5); }
.c-item .ico{ margin:0; flex-shrink:0; }
.c-item small{ display:block; color:var(--muted); font-size:12.5px; }
.c-item b{ font-size:15.5px; word-break:break-word; }
form.card{ padding:26px; }
form.card:hover{ transform:none; }
.f-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .f-grid{ grid-template-columns:1fr; } }
.f-grid .full{ grid-column:1/-1; }
label{ display:grid; gap:6px; font-size:13px; font-weight:600; color:var(--muted); }
input,select,textarea{
  width:100%; font-size:15px; line-height:1.4; font-family:inherit; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:11px 12px;
}
textarea{ min-height:120px; resize:vertical; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); }
.f-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:18px; }
.f-msg{ font-size:13.5px; color:var(--muted); }

/* ---------- custom software ---------- */
.cs-sub{ font-size:20px; margin:52px 0 0; }
.cs-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:20px 0 0; padding:0; counter-reset:cs; }
@media (max-width:980px){ .cs-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .cs-steps{ grid-template-columns:1fr; } }
.cs-steps li{ list-style:none; counter-increment:cs; border-top:2px solid rgba(var(--accent-rgb),.55); padding-top:14px; }
.cs-steps li::before{ content:"0" counter(cs); display:block; color:var(--accent); font-weight:800; font-size:13px; letter-spacing:1px; margin-bottom:6px; }
.cs-steps b{ display:block; font-size:16px; }
.cs-steps span{ display:block; color:var(--muted); font-size:14.5px; margin-top:6px; }
.cs-cta{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; margin-top:40px; }
.cs-cta p{ color:var(--muted); font-size:14.5px; margin:0; max-width:56ch; }

/* ---------- VirAuto, coming soon ---------- */
.soon{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
@media (max-width:900px){ .soon{ grid-template-columns:1fr; } }
.soon-actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:26px; }
.soon-actions .pill{ font-size:12px; padding:4px 10px; }
.soon-note{ color:var(--muted); font-size:14.5px; margin-top:18px; max-width:52ch; }
.soon-card ul{ margin-bottom:0; }
.soon-ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px;
  background:rgba(var(--accent-rgb),.12); color:var(--accent); }
.soon-ico svg{ width:24px; height:24px; }

/* ---------- cta band + footer ---------- */
.band{ border:1px solid rgba(var(--accent-rgb),.4); border-radius:22px; padding:44px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:radial-gradient(500px 200px at 10% 0%, rgba(var(--accent-rgb),.16), transparent 70%), rgba(var(--surface-rgb),.6); }
.band h2{ margin:0; font-size:clamp(24px,3vw,32px); }
.band p{ color:var(--muted); margin:8px 0 0; }
footer{ border-top:1px solid var(--border); padding:40px 0; color:var(--muted); font-size:14px; }
footer .wrap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
footer nav{ display:flex; gap:18px; flex-wrap:wrap; }
footer a{ text-decoration:none; }
footer a:hover{ color:var(--text); }

/* reveal on scroll */
.rv{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .fill{ transition:none; }
}

/* ---------- screenshots ---------- */
.hidden{ display:none; }
.shot-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:22px; }
.shot-tabs button{
  border:1px solid var(--border); background:rgba(var(--surface-rgb),.6); color:var(--muted);
  font-weight:600; font-size:14px; line-height:1; font-family:inherit;
  padding:10px 14px; border-radius:999px; cursor:pointer;
}
.shot-tabs button:hover{ color:var(--text); border-color:rgba(var(--accent-rgb),.5); }
.shot-tabs button.on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.shot-tabs button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.shot{ margin:0; }
.shot-frame{
  border:1px solid var(--border); border-radius:16px; overflow:hidden; background:#0b0f17;
  box-shadow:var(--shadow); cursor:zoom-in; display:flex; justify-content:center; align-items:center;
  aspect-ratio:16/10; max-height:78vh;
}
.shot-frame img{ width:100%; height:100%; object-fit:contain; object-position:top center; transition:opacity .2s ease; }
.shot-frame.tall{ aspect-ratio:auto; max-height:none; padding:24px 0; }
.shot-frame.tall img{ width:auto; max-width:100%; max-height:70vh; height:auto; border-radius:18px; border:1px solid #1f2937; }
.shot figcaption{ text-align:center; color:var(--muted); font-size:15px; margin:16px auto 0; max-width:720px; }
.lightbox{
  position:fixed; inset:0; z-index:100; background:rgba(3,6,12,.92); display:flex; align-items:center; justify-content:center;
  padding:24px; cursor:zoom-out;
}
.lightbox[hidden]{ display:none; }
.lightbox img{ max-width:100%; max-height:100%; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lightbox .chip{ position:absolute; top:16px; right:16px; }

/* ---------- brochures ---------- */
.brochures{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:900px){ .brochures{ grid-template-columns:1fr; max-width:520px; } }
.brochure{
  display:flex; flex-direction:column; text-decoration:none; overflow:hidden;
  border:1px solid var(--border); border-radius:18px; background:rgba(var(--surface-rgb),.6);
  transition:border-color .15s ease, transform .15s ease;
}
.brochure:hover{ border-color:rgba(var(--accent-rgb),.55); transform:translateY(-3px); }
.brochure img{ width:100%; height:auto; aspect-ratio:720/508; object-fit:cover; border-bottom:1px solid var(--border); background:#fff; }
.b-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
.b-body .pill{ align-self:flex-start; }
.b-body h3{ font-size:17px; margin-top:4px; }
.b-body p{ margin:0; color:var(--muted); font-size:13.5px; }
.b-dl{ margin-top:auto; padding-top:12px; color:var(--accent); font-weight:700; font-size:14.5px; }

/* ---------- legal pages ---------- */
.legal{ padding:56px 0 80px; }
.legal .wrap{ max-width:820px; }
.legal h1{ font-size:clamp(30px,4vw,42px); margin:12px 0 8px; letter-spacing:-.02em; }
.legal .sub{ color:var(--muted); margin:0 0 32px; }
.legal h2{ font-size:20px; margin:36px 0 10px; }
.legal p, .legal li{ color:var(--text); font-size:16px; line-height:1.65; }
.legal p.muted, .legal .muted{ color:var(--muted); }
.legal ul{ padding-left:20px; display:grid; gap:6px; }
.legal a{ color:var(--accent); }
.facts{ border:1px solid var(--border); border-radius:16px; overflow:hidden; background:rgba(var(--surface-rgb),.55); margin:0; }
.facts > div{ display:grid; grid-template-columns:220px 1fr; gap:16px; padding:13px 18px; border-top:1px solid var(--border); }
.facts > div:first-child{ border-top:0; }
.facts > div[hidden]{ display:none; }
.facts dt{ color:var(--muted); font-size:14px; }
.facts dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }
@media (max-width:560px){ .facts > div{ grid-template-columns:1fr; gap:2px; } }
.back{ display:inline-flex; color:var(--muted); text-decoration:none; font-size:14px; font-weight:600; }
.back:hover{ color:var(--text); }
.top .legal-links{ display:flex; gap:4px; margin-left:auto; }
.top .legal-links a{ text-decoration:none; color:var(--muted); font-size:14px; font-weight:550; padding:8px 12px; border-radius:10px; }
.top .legal-links a:hover, .top .legal-links a.on{ color:var(--text); background:rgba(var(--overlay-rgb),.05); }
@media (max-width:560px){ .top .legal-links{ display:none; } .top .tools{ margin-left:auto; } }