/* ============================================================
   LANCE — Tactical mesh comms for ATAK
   Shared design system
   ============================================================ */

@import url('fonts.css');

:root {
  /* base */
  --black: #05070A;
  --navy: #0B1220;
  --slate: #111827;
  --slate-2: #0E1726;
  --signal: #22C55E;
  --signal-dim: #16A34A;
  --amber: #F59E0B;
  --cyan: #38BDF8;
  --muted: #94A3B8;
  --muted-2: #64748B;
  --white: #F8FAFC;

  /* glass */
  --glass-bg: rgba(148, 163, 184, 0.045);
  --glass-bg-2: rgba(148, 163, 184, 0.07);
  --glass-border: rgba(248, 250, 252, 0.09);
  --glass-border-strong: rgba(248, 250, 252, 0.16);

  /* fonts */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* layout */
  --wrap: 1200px;
  --header-h: 76px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-sm: 10px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: auto; }

body {
  font-family: var(--font-body);
  background: var(--black);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* atmospheric base layers */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(1100px 700px at 80% -10%, rgba(34, 197, 94, 0.10), transparent 60%),
    radial-gradient(900px 600px at 5% 8%, rgba(56, 189, 248, 0.08), transparent 55%),
    linear-gradient(180deg, var(--black), #060912 50%, var(--black));
}
/* topo grid */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(148,163,184,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 78%);
  opacity: 0.5;
}

/* noise overlay */
.noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.section { padding: 110px 0; position: relative; }
.section-sm { padding: 70px 0; }
.center { text-align: center; }
.relative { position: relative; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px var(--signal);
}
.eyebrow.cyan { color: var(--cyan); }
.eyebrow.cyan::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.eyebrow.amber { color: var(--amber); }
.eyebrow.amber::before { background: var(--amber); box-shadow: 0 0 10px var(--amber); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }
.h-xl { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 700; }
.h-lg { font-size: clamp(2rem, 4.4vw, 3.3rem); }
.h-md { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.28rem); color: var(--muted); line-height: 1.6; max-width: 60ch; }
.muted { color: var(--muted); }
.text-balance { text-wrap: balance; }
.gradient-text {
  background: linear-gradient(120deg, var(--white) 30%, var(--signal) 75%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- glass ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
}
.glass-strong { background: var(--glass-bg-2); border-color: var(--glass-border-strong); }
.glass::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(248,250,252,0.05), transparent 40%);
  pointer-events: none;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.95rem;
  padding: 13px 22px; border-radius: 12px; border: 1px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, border-color 0.25s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background: var(--signal); color: #05140A;
  box-shadow: 0 8px 28px -8px rgba(34,197,94,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(34,197,94,0.7), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-ghost { background: var(--glass-bg-2); color: var(--white); border-color: var(--glass-border-strong); backdrop-filter: blur(10px); }
.btn-ghost:hover { transform: translateY(-2px); border-color: rgba(248,250,252,0.34); background: rgba(148,163,184,0.12); }
.btn-cyan { background: var(--cyan); color: #04141F; box-shadow: 0 8px 28px -8px rgba(56,189,248,0.55); }
.btn-cyan:hover { transform: translateY(-2px); }

/* google play badge */
.btn-play {
  display: inline-flex; align-items: center; gap: 11px;
  background: linear-gradient(180deg, #161E2E, #0C1422);
  border: 1px solid var(--glass-border-strong);
  border-radius: 13px; padding: 9px 18px 9px 15px; color: var(--white);
  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
}
.btn-play:hover { transform: translateY(-2px); border-color: rgba(34,197,94,0.45); box-shadow: 0 12px 30px -10px rgba(0,0,0,0.7); }
.btn-play .play-icon { width: 22px; height: 24px; flex: none; }
.btn-play .play-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.btn-play .play-txt small { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.btn-play .play-txt span { font-family: var(--font-display); font-size: 17px; font-weight: 600; }
.btn-lg { padding: 16px 28px; font-size: 1.02rem; }

/* ---------- HUD chips ---------- */
.hud-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em;
  padding: 7px 12px; border-radius: 9px;
  background: rgba(8, 13, 22, 0.72);
  border: 1px solid var(--glass-border);
  color: var(--white); backdrop-filter: blur(8px);
}
.hud-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.hud-chip .dot.cyan { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hud-chip .dot.amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.hud-chip.mono-amber { color: var(--amber); }
.hud-chip.mono-cyan { color: var(--cyan); }

/* trust badges row */
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.t-badge {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--muted); padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s, border-color 0.2s;
}
.t-badge:hover { color: var(--white); border-color: var(--glass-border-strong); }
.t-badge svg { width: 14px; height: 14px; color: var(--signal); }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background 0.35s, backdrop-filter 0.35s, border-color 0.35s, box-shadow 0.35s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(5, 8, 13, 0.72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: var(--glass-border);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,0.9);
}
.header-inner { display: flex; align-items: center; gap: 30px; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.04em; }
.brand .mark { width: 30px; height: 30px; flex: none; }
.brand b { color: var(--white); }

.nav-main { display: flex; align-items: center; gap: 4px; margin-left: 6px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.95rem; font-weight: 500; color: var(--muted);
  padding: 9px 14px; border-radius: 10px; transition: color 0.2s, background 0.2s;
}
.nav-link:hover, .nav-link.active { color: var(--white); background: var(--glass-bg-2); }
.nav-link .caret { width: 13px; height: 13px; transition: transform 0.25s; opacity: 0.7; }
.nav-item.open .caret { transform: rotate(180deg); }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lang-menu { position: relative; }
.lang-cur-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 9px; padding: 7px 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); transition: border-color 0.2s, background 0.2s, color 0.2s; }
.lang-cur-btn:hover { border-color: var(--glass-border-strong); background: var(--glass-bg-2); color: var(--white); }
.lang-cur-btn svg { opacity: 0.8; }
.lang-caret { transition: transform 0.25s; }
.lang-menu.open .lang-caret { transform: rotate(180deg); }
.lang-list { position: absolute; top: calc(100% + 10px); right: 0; display: none; flex-direction: column; min-width: 150px; padding: 7px; background: rgba(9,14,23,0.96); backdrop-filter: blur(20px); border: 1px solid var(--glass-border-strong); border-radius: 13px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.9); z-index: 1200; }
.lang-menu.open .lang-list { display: flex; }
.lang-item { text-align: left; background: none; border: none; color: var(--muted); font-family: var(--font-body); font-size: 0.92rem; padding: 9px 12px; border-radius: 8px; transition: background 0.2s, color 0.2s; }
.lang-item:hover { background: var(--glass-bg-2); color: var(--white); }
.lang-item.active { color: var(--signal); }
.mobile-lang { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 0.95rem; padding: 14px 4px; border-bottom: 1px solid var(--glass-border); color: var(--muted); }
.mobile-lang button { background: none; border: 1px solid var(--glass-border); border-radius: 8px; padding: 7px 13px; color: var(--muted); font-family: var(--font-mono); }
.mobile-lang button.active { color: var(--signal); border-color: rgba(34,197,94,0.4); }

/* dropdown / mega menu — display-based for reliability across render engines */
.nav-item { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  display: none;
  background: rgba(9, 14, 23, 0.94); backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border-strong); border-radius: var(--radius);
  padding: 14px; box-shadow: 0 30px 70px -25px rgba(0,0,0,0.9); z-index: 1100;
  animation: dropIn 0.22s var(--ease);
}
.nav-item.open .dropdown { display: block; }
.dropdown.mega { display: none; }
.nav-item.open .dropdown.mega { display: grid; }
@keyframes dropIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%); } }
/* bridge so hover doesn't drop between trigger and menu */
.dropdown::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.dropdown.mega { width: 560px; grid-template-columns: 1fr 1fr; gap: 6px; }
.dropdown.single { width: 260px; }
.drop-link { display: flex; gap: 12px; padding: 11px 12px; border-radius: 11px; transition: background 0.2s; }
.drop-link:hover { background: var(--glass-bg-2); }
.drop-link .di { width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--glass-bg-2); border: 1px solid var(--glass-border); color: var(--signal); }
.drop-link .di svg { width: 17px; height: 17px; }
.drop-link h5 { font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; color: var(--white); }
.drop-link p { font-size: 0.78rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }

/* mobile nav */
.hamburger { display: none; width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--glass-border); background: var(--glass-bg); align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.hamburger span { width: 20px; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; }
.mobile-nav {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(5, 8, 13, 0.97); backdrop-filter: blur(20px);
  transform: translateX(100%);
  padding: 90px 28px 40px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a { font-family: var(--font-display); font-size: 1.5rem; padding: 14px 4px; border-bottom: 1px solid var(--glass-border); color: var(--white); }
.mobile-nav .mob-sub { font-size: 1rem; color: var(--muted); padding: 9px 16px; border: none; font-family: var(--font-body); }
.mobile-close { position: absolute; top: 22px; right: 24px; width: 44px; height: 44px; border-radius: 11px; border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--white); font-size: 22px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--glass-border); padding: 70px 0 40px; margin-top: 40px; background: linear-gradient(180deg, transparent, rgba(11,18,32,0.5)); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 40px; }
.footer-brand .brand { margin-bottom: 16px; }
.footer-brand p { color: var(--muted); font-size: 0.9rem; max-width: 30ch; }
.footer-col h6 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 16px; }
.footer-col a { display: block; color: var(--muted); font-size: 0.92rem; padding: 6px 0; transition: color 0.2s; }
.footer-col a:hover { color: var(--signal); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 54px; padding-top: 28px; border-top: 1px solid var(--glass-border); color: var(--muted-2); font-size: 0.84rem; font-family: var(--font-mono); }
.footer-bottom .status { display: inline-flex; align-items: center; gap: 8px; }
.footer-bottom .status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); }

/* ---------- reveal (JS rAF tween drives the entrance; CSS is just the resting/fallback state) ---------- */
.reveal { opacity: 0; transform: translateY(24px); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  * { animation: none !important; }
}

/* ---------- cards / bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.card {
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 28px; backdrop-filter: blur(14px); position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease), border-color 0.4s, background 0.4s;
}
.card:hover { transform: translateY(-4px); border-color: var(--glass-border-strong); background: var(--glass-bg-2); }
.card .glow { position: absolute; width: 200px; height: 200px; border-radius: 50%; filter: blur(60px); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.card:hover .glow { opacity: 0.4; }
.feat-icon { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--glass-bg-2); border: 1px solid var(--glass-border-strong); color: var(--signal); margin-bottom: 18px; }
.feat-icon svg { width: 23px; height: 23px; }
.card h3 { font-size: 1.22rem; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 0.94rem; }
.card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--signal); font-size: 0.86rem; font-weight: 600; font-family: var(--font-mono); }
.card .more svg { width: 14px; height: 14px; transition: transform 0.25s; }
.card:hover .more svg { transform: translateX(4px); }
.card-badge { position: absolute; top: 18px; right: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; padding: 4px 9px; border-radius: 999px; z-index: 2; }
.card-badge.pro { color: var(--signal); background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); }
.card-badge.ent { color: var(--cyan); background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.3); }
.card-badge.usp { color: var(--amber); background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.32); }
.card-badge.beta { color: var(--cyan); background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.3); }
/* small inline beta note */
.beta-note { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--muted); background: rgba(56,189,248,0.06); border: 1px solid rgba(56,189,248,0.22); border-radius: 9px; padding: 9px 13px; }
.beta-note b { color: var(--cyan); font-weight: 600; letter-spacing: 0.04em; }

/* mini ui snippet inside cards */
.mini-ui { margin-top: 18px; border-radius: 12px; border: 1px solid var(--glass-border); background: rgba(6,10,18,0.6); padding: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.mini-ui .row { display: flex; justify-content: space-between; padding: 4px 0; }
.mini-ui .row b { color: var(--white); }
.mini-ui .bar { height: 5px; border-radius: 3px; background: rgba(148,163,184,0.18); overflow: hidden; margin-top: 7px; }
.mini-ui .bar i { display: block; height: 100%; border-radius: 3px; background: var(--signal); }

/* language flags: endless marquee inside the mini card */
.lang-marquee { overflow: hidden; margin-top: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.lang-marquee-track { display: flex; gap: 13px; width: max-content; animation: langScroll 22s linear infinite; }
.lang-marquee:hover .lang-marquee-track { animation-play-state: paused; }
.lang-marquee .flag { width: 30px; height: 20px; flex: none; border-radius: 3px; object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.12); }
@keyframes langScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lang-marquee-track { animation: none; flex-wrap: wrap; } }
/* flag swatch used in the features language grid */
.flag-swatch { width: 30px; height: 20px; flex: none; border-radius: 4px; object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.14); }

/* ---------- phone mockup ---------- */
.phone {
  width: 300px; aspect-ratio: 300 / 620; border-radius: 38px; padding: 11px;
  background: linear-gradient(160deg, #1b2536, #0a101c);
  border: 1px solid var(--glass-border-strong);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.12);
  position: relative;
}
.phone .screen { width: 100%; height: 100%; border-radius: 28px; overflow: hidden; position: relative; background: #060B14; }
.phone .notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 88px; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.6); z-index: 5; }

/* tactical map inside phone */
.tac-map { position: absolute; inset: 0; background:
  radial-gradient(120% 90% at 70% 20%, rgba(34,197,94,0.10), transparent 60%),
  radial-gradient(100% 80% at 20% 90%, rgba(56,189,248,0.10), transparent 55%),
  linear-gradient(180deg, #07101C, #060B14);
}
.tac-map .topo { position: absolute; inset: 0; opacity: 0.5; }
.tac-map .grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.08) 1px, transparent 1px); background-size: 34px 34px; }
.app-bar { position: absolute; top: 0; left: 0; right: 0; height: 52px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(180deg, rgba(6,11,20,0.9), transparent); z-index: 4; font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.app-bar .ttl { color: var(--white); font-weight: 600; letter-spacing: 0.1em; }
.map-hud { position: absolute; z-index: 4; }
.node-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px var(--signal); z-index: 3; }
.node-dot.self { background: var(--cyan); box-shadow: 0 0 14px var(--cyan); width: 14px; height: 14px; }
.node-dot.self::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid var(--cyan); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
.app-foot { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 14px 16px; background: linear-gradient(0deg, rgba(6,11,20,0.95), transparent); z-index: 4; }

/* ---------- pricing ---------- */
.price-toggle { display: inline-flex; padding: 5px; border-radius: 12px; background: var(--glass-bg); border: 1px solid var(--glass-border); gap: 4px; }
.price-toggle button { padding: 9px 18px; border-radius: 9px; border: none; background: transparent; color: var(--muted); font-weight: 600; font-size: 0.88rem; transition: all 0.25s; }
.price-toggle button.active { background: var(--signal); color: #05140A; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card { display: flex; flex-direction: column; padding: 30px; border-radius: var(--radius-lg); border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(14px); position: relative; transition: transform 0.4s var(--ease), border-color 0.4s; }
.price-card:hover { transform: translateY(-5px); }
.price-card.featured { border-color: rgba(34,197,94,0.4); background: linear-gradient(180deg, rgba(34,197,94,0.08), var(--glass-bg)); box-shadow: 0 30px 70px -30px rgba(34,197,94,0.4); }
.price-card .rec-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; background: var(--signal); color: #05140A; font-weight: 600; }
.price-card .plan-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.price-card .plan-pos { color: var(--muted); font-size: 0.9rem; margin-top: 6px; min-height: 40px; }
.price-card .price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; margin: 18px 0 4px; min-height: 64px; display: flex; flex-direction: column; justify-content: center; }
.price-card .price small { font-size: 0.9rem; color: var(--muted); font-weight: 400; font-family: var(--font-body); }
.price-card .price-was { font-size: 1.3rem; color: var(--muted-2); font-weight: 400; text-decoration: line-through; text-decoration-color: rgba(148,163,184,0.6); margin-right: 6px; }
.price-card .plist { list-style: none; margin: 22px 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.price-card .plist li { display: flex; gap: 10px; font-size: 0.9rem; color: var(--muted); align-items: flex-start; }
.price-card .plist li svg { width: 17px; height: 17px; color: var(--signal); flex: none; margin-top: 2px; }

/* ---------- comparison table ---------- */
.compare { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.compare thead th { position: sticky; top: var(--header-h); z-index: 20; background: rgba(8,12,20,0.94); backdrop-filter: blur(14px); padding: 18px 16px; text-align: center; font-family: var(--font-display); font-weight: 600; border-bottom: 1px solid var(--glass-border-strong); }
.compare thead th:first-child { text-align: left; }
.compare thead th.feat-plan small { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.compare thead th.feat-other { color: var(--muted); font-weight: 500; }
.compare thead th.feat-other small { color: var(--muted-2); }
.compare td.col-other { color: var(--muted-2); }
.compare .grp td { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); padding: 26px 16px 10px; }
.compare tbody td { padding: 14px 16px; border-bottom: 1px solid var(--glass-border); text-align: center; color: var(--muted); }
.compare tbody td:first-child { text-align: left; color: var(--white); font-weight: 500; }
.compare tbody tr:hover td { background: rgba(148,163,184,0.04); }
.compare .yes { color: var(--signal); }
.compare .no { color: var(--muted-2); }
.compare .val { font-family: var(--font-mono); font-size: 0.82rem; color: var(--white); }
.compare .val.dim { color: var(--muted); }

/* ---------- docs / wiki ---------- */
.docs-layout { display: grid; grid-template-columns: 270px 1fr; gap: 40px; align-items: start; }
.docs-sidebar { position: sticky; top: calc(var(--header-h) + 20px); height: calc(100vh - var(--header-h) - 40px); overflow: hidden; display: flex; flex-direction: column; }
.docs-nav-clip { position: relative; flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%); }
.docs-nav { will-change: transform; padding-bottom: 20px; }
.docs-search { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--glass-border); background: var(--glass-bg); margin-bottom: 22px; }
.docs-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.docs-search input { background: none; border: none; outline: none; color: var(--white); font-family: var(--font-body); font-size: 0.9rem; width: 100%; }
.docs-search kbd { font-family: var(--font-mono); font-size: 10px; color: var(--muted); border: 1px solid var(--glass-border); padding: 2px 6px; border-radius: 5px; }
.docs-nav h6 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin: 20px 0 8px; }
.docs-nav a { display: block; padding: 7px 12px; border-radius: 8px; color: var(--muted); font-size: 0.88rem; transition: all 0.2s; border-left: 2px solid transparent; }
.docs-nav a:hover { color: var(--white); background: var(--glass-bg); }
.docs-nav a.active { color: var(--signal); border-left-color: var(--signal); background: var(--glass-bg); }
.docs-article { max-width: 760px; min-width: 0; }
.docs-article h2 { font-size: 2rem; margin-bottom: 12px; scroll-margin-top: calc(var(--header-h) + 20px); }
.docs-article h3 { font-size: 1.35rem; margin: 38px 0 12px; scroll-margin-top: calc(var(--header-h) + 20px); }
.docs-article p { color: var(--muted); margin-bottom: 16px; }
.docs-article ul, .docs-article ol { color: var(--muted); margin: 0 0 16px 20px; }
.docs-article li { margin-bottom: 7px; }
.callout { border-radius: 12px; padding: 16px 18px; margin: 20px 0; border: 1px solid var(--glass-border); display: flex; gap: 13px; font-size: 0.9rem; }
.callout svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.callout .c-body { color: var(--muted); }
.callout .c-body b { color: var(--white); display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.callout.info { background: rgba(56,189,248,0.06); border-color: rgba(56,189,248,0.25); } .callout.info svg { color: var(--cyan); }
.callout.warn { background: rgba(245,158,11,0.06); border-color: rgba(245,158,11,0.25); } .callout.warn svg { color: var(--amber); }
.callout.pro { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.25); } .callout.pro svg { color: var(--signal); }
.callout.ent { background: rgba(148,163,184,0.06); border-color: var(--glass-border-strong); } .callout.ent svg { color: var(--white); }
.code-block { font-family: var(--font-mono); font-size: 0.82rem; background: rgba(4,8,15,0.8); border: 1px solid var(--glass-border); border-radius: 11px; padding: 16px 18px; color: #cdd7e6; margin: 18px 0; overflow-x: auto; line-height: 1.7; }
.code-block .ck { color: var(--cyan); } .code-block .cv { color: var(--signal); } .code-block .cc { color: var(--muted-2); }
.limit-table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 0.86rem; }
.limit-table th, .limit-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--glass-border); }
.limit-table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.limit-table td { color: var(--muted); } .limit-table td:first-child { color: var(--white); }
/* table wrapper: simple tables fill & wrap (no scroll); only --wide tables scroll */
.table-scroll { margin: 18px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--glass-border); border-radius: 12px; max-width: 100%; }
.table-scroll .limit-table { margin: 0; }
.table-scroll .limit-table th:first-child, .table-scroll .limit-table td:first-child { padding-left: 16px; }
.table-scroll .limit-table tr:last-child td { border-bottom: none; }
/* cells wrap at spaces; never split short words like "Yellow" mid-character */
.limit-table td, .limit-table th { overflow-wrap: break-word; }
/* wide multi-column tables: keep cells on one line and scroll sideways */
.limit-table--wide th, .limit-table--wide td { white-space: nowrap; }
.limit-table--wide { min-width: 520px; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; min-width: 0; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.84rem; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.04em; }
.field label .req { color: var(--signal); }
.field input, .field select, .field textarea {
  background: rgba(6,10,18,0.6); border: 1px solid var(--glass-border); border-radius: 11px;
  padding: 13px 15px; color: var(--white); font-family: var(--font-body); font-size: 0.95rem; outline: none;
  width: 100%; min-width: 0; max-width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: rgba(34,197,94,0.5); box-shadow: 0 0 0 3px rgba(34,197,94,0.12); }
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }
.check-row { display: flex; gap: 11px; align-items: flex-start; }
.check-row input { width: 19px; height: 19px; accent-color: var(--signal); margin-top: 2px; flex: none; }
.check-row label { font-size: 0.88rem; color: var(--muted); }
.form-success { display: none; text-align: center; padding: 40px; }
.form-success.show { display: block; }
.form-success .check-circle { width: 64px; height: 64px; border-radius: 50%; background: rgba(34,197,94,0.15); border: 1px solid var(--signal); display: grid; place-items: center; margin: 0 auto 20px; color: var(--signal); }

/* ---------- thank-you modal (form submit) ---------- */
.lance-modal { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 24px; }
.lance-modal.show { display: flex; }
.lance-modal-backdrop { position: absolute; inset: 0; background: rgba(5, 8, 13, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.lance-modal-card { position: relative; z-index: 1; width: 100%; max-width: 440px; text-align: center; padding: 44px 36px 36px; border-radius: var(--radius-lg); }
.lance-modal-card .check-circle { width: 64px; height: 64px; border-radius: 50%; background: rgba(34,197,94,0.15); border: 1px solid var(--signal); display: grid; place-items: center; margin: 0 auto 20px; color: var(--signal); }
.lance-modal-card .lance-modal-ok { margin-top: 26px; justify-content: center; min-width: 140px; }
.lance-modal-x { position: absolute; top: 14px; right: 18px; background: none; border: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px; }
.lance-modal-x:hover { color: var(--white); }

/* ---------- how-it-works storytelling ---------- */
.step-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; color: var(--muted-2); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 12px; }
.step-num::after { content: ""; width: 40px; height: 1px; background: var(--glass-border); }
.story-step { opacity: 0.4; transition: opacity 0.5s var(--ease); padding-left: 22px; border-left: 2px solid var(--glass-border); }
.story-step.active { opacity: 1; border-left-color: var(--signal); }
.step-list { list-style: none; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.step-list li { font-family: var(--font-mono); font-size: 12px; color: var(--muted); padding: 6px 12px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--glass-bg); }
.story-step.active .step-list li { color: var(--white); border-color: var(--glass-border-strong); }
.story-stage { opacity: 0; transition: opacity 0.6s var(--ease); pointer-events: none; }
.story-stage.active { opacity: 1; }

/* ---------- use-case cards ---------- */
.use-card { overflow: hidden; }
.use-bg { position: absolute; inset: 0; opacity: 0.5; transition: opacity 0.4s, transform 0.6s var(--ease);
  background:
    radial-gradient(70% 60% at 75% 15%, rgba(56,189,248,0.14), transparent 60%),
    radial-gradient(60% 50% at 15% 90%, rgba(34,197,94,0.12), transparent 60%),
    linear-gradient(180deg, transparent, rgba(6,11,20,0.85));
}
.use-card::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(148,163,184,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.06) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(180deg, #000, transparent 70%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); opacity: 0.6; pointer-events: none; }
.use-card:hover .use-bg { opacity: 0.85; transform: scale(1.04); }
.use-ic { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(8,13,22,0.6); border: 1px solid var(--glass-border-strong); color: var(--cyan); z-index: 2; }
.use-ic svg { width: 22px; height: 22px; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq-item { border: 1px solid var(--glass-border); border-radius: 13px; background: var(--glass-bg); overflow: hidden; transition: border-color 0.3s; }
.faq-item.open { border-color: var(--glass-border-strong); }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 19px 22px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--white); }
.faq-q .pm { width: 22px; height: 22px; flex: none; position: relative; }
.faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: var(--signal); border-radius: 2px; transition: transform 0.3s; }
.faq-q .pm::before { width: 12px; height: 2px; }
.faq-q .pm::after { width: 2px; height: 12px; }
.faq-item.open .pm::after { transform: translate(-50%,-50%) scaleY(0); }
.faq-a { max-height: 0; overflow: hidden; }
.faq-a-inner { padding: 0 22px 20px; color: var(--muted); font-size: 0.95rem; }
.faq-item.open .faq-a { max-height: 320px; }

/* ---------- feature modules ---------- */
.check-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.check-list li { display: flex; align-items: flex-start; gap: 11px; color: var(--muted); font-size: 0.96rem; }
.check-list li::before { content: ""; width: 20px; height: 20px; flex: none; border-radius: 6px; margin-top: 1px; background: rgba(34,197,94,0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 13l4 4L19 7' stroke='%2322C55E' stroke-width='2.4'/%3E%3C/svg%3E") center / 14px no-repeat; border: 1px solid rgba(34,197,94,0.3); }
.flow-diagram { display: flex; align-items: center; justify-content: space-between; gap: 4px; position: relative; }
.flow-packets { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; border-radius: 8px; }
.flow-packet { position: absolute; top: 50%; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; opacity: 0; will-change: transform, opacity; }
.flow-node { flex: 1; text-align: center; padding: 14px 6px; border-radius: 11px; border: 1px solid var(--glass-border); background: rgba(6,10,18,0.5); }
.flow-node b { display: block; font-family: var(--font-display); font-size: 0.92rem; color: var(--white); }
.flow-node span { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.flow-node.cyan { border-color: rgba(56,189,248,0.35); }
.flow-node.cyan b { color: var(--cyan); }
.flow-arrow { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 2px; }
.flow-arrow svg { width: 34px; height: 10px; }
.flow-arrow small { font-family: var(--font-mono); font-size: 8px; color: var(--muted-2); }
@media (max-width: 820px) {
  .mod-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .mod-grid [style*="order:2"], .mod-grid [style*="order: 2"] { order: 0 !important; }
  .mod-grid [style*="order:1"], .mod-grid [style*="order: 1"] { order: 0 !important; }
}

/* ---------- feature detail ---------- */
.bd-section { display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: start; }
.bd-num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; color: var(--signal); padding-top: 8px; position: relative; }
.bd-num::after { content: ""; display: block; width: 1px; height: calc(100% - 4px); background: linear-gradient(var(--glass-border-strong), transparent); margin: 12px auto 0; }
.stat { text-align: left; padding: 6px 0; }
.stat-v { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 700; color: var(--white); }
.stat-v.cyan { color: var(--cyan); }
.stat-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.col-3 { grid-column: span 3; }
@media (max-width: 820px) {
  .bd-section { grid-template-columns: 1fr; gap: 10px; }
  .bd-num::after { display: none; }
  .col-3 { grid-column: span 6; }
}

/* ---------- download cards ---------- */
.dl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; }
.dl-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 13px; border: 1px solid var(--glass-border); background: var(--glass-bg); transition: transform 0.3s var(--ease), border-color 0.3s, background 0.3s; }
.dl-card:hover { transform: translateY(-3px); border-color: rgba(34,197,94,0.4); background: var(--glass-bg-2); }
.dl-ic { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--glass-bg-2); border: 1px solid var(--glass-border); color: var(--signal); }
.dl-ic svg { width: 21px; height: 21px; }
.dl-card div { flex: 1; }
.dl-card b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 0.98rem; color: var(--white); }
.dl-card small { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.dl-arrow { width: 18px; height: 18px; color: var(--muted); flex: none; transition: transform 0.25s, color 0.25s; }
.dl-card:hover .dl-arrow { color: var(--signal); transform: translateY(2px); }
.dl-card.dl-soon { cursor: default; opacity: 0.55; }
.dl-card.dl-soon:hover { transform: none; border-color: var(--glass-border); background: var(--glass-bg); }
.dl-card.dl-soon small { color: var(--amber); }
@media (max-width: 820px) {
  .dl-grid { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr !important; gap: 32px !important; }
  .req-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ---------- roadmap ---------- */
.rm-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.rm-pill.trials { color: var(--cyan); background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.3); }
.rm-pill.dev { color: var(--signal); background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); }
.rm-pill.planned { color: var(--amber); background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.32); }
.rm-pill.exploring { color: var(--muted); background: var(--glass-bg); border: 1px solid var(--glass-border-strong); }
.rm-pill.research { color: #b6a6f2; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.32); }
.roadmap-list { display: flex; flex-direction: column; gap: 16px; }
.roadmap-item { display: grid; grid-template-columns: 64px 1fr; gap: 22px; align-items: start; padding: 26px 28px; border-radius: var(--radius-lg); border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(14px); transition: border-color 0.3s, transform 0.3s var(--ease); }
.roadmap-item:hover { border-color: var(--glass-border-strong); transform: translateY(-3px); }
.rm-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--glass-bg-2); border: 1px solid var(--glass-border-strong); color: var(--signal); }
.rm-icon svg { width: 25px; height: 25px; }
.rm-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.rm-head h3 { font-size: 1.25rem; }
.rm-body p { color: var(--muted); font-size: 0.96rem; }
@media (max-width: 640px) {
  .roadmap-item { grid-template-columns: 1fr; gap: 14px; }
}

/* ---------- zero-config animated flow ---------- */
.zc { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid rgba(245,158,11,0.20); background: var(--glass-bg-2); backdrop-filter: blur(16px); padding: 48px; }
.zc::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(148,163,184,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,0.05) 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(120% 80% at 80% 0%, #000, transparent 70%); -webkit-mask-image: radial-gradient(120% 80% at 80% 0%, #000, transparent 70%); }
.zc::after { content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(245,158,11,0.12), transparent 65%); pointer-events: none; }
.zc-top { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.zc-intro-r { display: flex; flex-direction: column; align-items: flex-start; }
.zc-intro-r .muted { font-size: 1.02rem; }
.zc-flow { position: relative; z-index: 1; }
.zc-rail { position: absolute; top: 28px; left: 16.66%; right: 16.66%; height: 2px; background: var(--glass-border-strong); border-radius: 2px; z-index: 0; }
.zc-rail-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--signal), var(--cyan)); box-shadow: 0 0 14px rgba(34,197,94,0.55); }
.zc-packet { position: absolute; top: 50%; left: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 4px rgba(56,189,248,0.9); opacity: 0; }
.zc-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.zc-step { text-align: center; padding: 0 8px; }
.zc-node { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 20px; display: grid; place-items: center; position: relative; z-index: 2;
  background: rgba(6,10,18,0.85); border: 1.5px solid var(--glass-border-strong); color: var(--muted); }
.zc-num { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.05em; }
.zc-ic { width: 24px; height: 24px; position: absolute; opacity: 0; }
.zc-step h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; margin-bottom: 7px; letter-spacing: -0.01em; }
.zc-step p { color: var(--muted); font-size: 0.9rem; max-width: 26ch; margin: 0 auto; }
.zc-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--glass-border); background: rgba(8,13,22,0.6); color: var(--muted); margin-top: 16px; opacity: 0; transform: translateY(8px); }
.zc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); }
/* active state — driven by scroll progress (no CSS transition; stays reliable in capture engines) */
.zc-step.active .zc-node { border-color: rgba(34,197,94,0.6); color: var(--signal); background: rgba(34,197,94,0.10); box-shadow: 0 0 26px -4px rgba(34,197,94,0.55); }
.zc-step.active .zc-num { opacity: 0; }
.zc-step.active .zc-ic { opacity: 1; }
.zc-step.active .zc-chip { opacity: 1; transform: none; }
.zc-step.active .zc-dot { background: var(--signal); box-shadow: 0 0 8px var(--signal); }
.zc-step.active .zc-chip.ok { color: var(--signal); border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.10); }
@media (max-width: 760px) {
  .zc { padding: 32px 22px; }
  .zc-top { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
  .zc-rail { display: none; }
  .zc-steps { grid-template-columns: 1fr; gap: 26px; text-align: left; }
  .zc-step { display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: start; padding: 0; }
  .zc-node { margin: 0; }
  .zc-step h4 { grid-column: 2; }
  .zc-step p, .zc-step .zc-chip { grid-column: 2; margin-left: 0; }
  .zc-step p { max-width: none; }
}

/* ---------- legal / prose pages ---------- */
.legal { max-width: 820px; margin: 0 auto; }
.legal .docs-article table.limit-table { margin: 14px 0 24px; }
.legal .docs-article h2 { font-size: 1.5rem; margin-top: 40px; }
.legal .docs-article h2:first-of-type { margin-top: 8px; }
.legal .docs-article p, .legal .docs-article li { font-size: 0.98rem; line-height: 1.7; }

.faq-jump { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.faq-jump .t-badge { cursor: pointer; }
.faq-cat { margin-bottom: 40px; scroll-margin-top: calc(var(--header-h) + 24px); }

/* landscape phone variant (ATAK is often used in landscape) */
.phone.landscape { width: 470px; aspect-ratio: 16 / 9; padding: 10px; border-radius: 30px; }
.phone.landscape .screen { border-radius: 22px; }
.phone.landscape .notch { top: 50%; left: auto; right: 9px; transform: translateY(-50%); width: 5px; height: 64px; border-radius: 3px; }
@media (max-width: 520px) {
  .phone.landscape { width: 100%; max-width: 380px; }
}

/* feature grid lays out as centered flex so an odd count wraps cleanly */
#featureGrid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
#featureGrid > .card { flex: 0 1 calc(33.333% - 12px); min-width: 260px; }
@media (max-width: 820px) { #featureGrid > .card { flex-basis: calc(50% - 9px); } }
@media (max-width: 560px) { #featureGrid > .card { flex-basis: 100%; } }

/* mesh canvas */
.mesh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* hero responsive */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-visual { margin-top: 30px; }
  .story-grid { grid-template-columns: 1fr !important; }
  .story-sticky { position: relative !important; top: 0 !important; margin-bottom: 30px; width: 100%; }
  /* the inline-styled relative wrapper around the phone has no width of its
     own; in the centered flex column that collapses the landscape phone
     (which switches to width:100% on mobile) down to ~0. Give it a real
     width so the graphic renders at a sensible size. */
  .story-sticky > div { width: 100%; max-width: 440px; }
  .story-sticky .phone.landscape { width: 100% !important; max-width: 100% !important; }
  #docs-teaser .glass-strong > div { grid-template-columns: minmax(0, 1fr) !important; }
  #docs-teaser .glass-strong > div > * { min-width: 0; }
  #docs-teaser [style*="border-left"] { border-left: none !important; border-top: 1px solid var(--glass-border); }
}

/* utility */
.stack { display: flex; flex-direction: column; }
.row { display: flex; }
.gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.wrap-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .mt-56 { margin-top: 56px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-40 { margin-bottom: 40px; }
.col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
.divider { height: 1px; background: var(--glass-border); border: none; margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .nav-main { display: none; }
  .header-right .btn-play .play-txt { display: none; }
  .hamburger { display: flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { position: relative; top: 0; height: auto; overflow: visible; display: block; margin-bottom: 30px; padding: 18px; border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--glass-bg); }
  .docs-nav-clip { overflow: visible; flex: none; -webkit-mask-image: none; mask-image: none; }
  .docs-nav { transform: none !important; }
  .docs-sidebar .docs-nav { columns: 2; column-gap: 24px; }
  .docs-sidebar .docs-nav h6:first-child { margin-top: 0; }
}
@media (max-width: 820px) {
  .section { padding: 80px 0; }
  .pricing-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .bento .col-4, .bento .col-6, .bento .col-8 { grid-column: span 12; }
  .col-4, .col-6, .col-8 { grid-column: span 12; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .footer-grid { grid-template-columns: 1fr; }
  .compare-scroll { overflow-x: auto; }
  .compare { min-width: 640px; }
}

/* ============================================================
   MOBILE HARDENING — inline grid-column spans on .bento children
   override the class-based media queries above, so force-collapse
   every bento item with !important. Also stop CTA rows overflowing.
   ============================================================ */
@media (max-width: 860px) {
  /* any bento card (incl. inline grid-column:span N) stacks full width */
  .bento > * { grid-column: 1 / -1 !important; }
  .bento { gap: 16px !important; }
  .pricing-grid { grid-template-columns: 1fr !important; }
  /* stat tiles: keep two-up so the planning-figures block stays compact */
  .bento .stat { grid-column: span 1 !important; }
  #posStats { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 680px) {
  /* CTA / button rows must wrap instead of overflowing the screen */
  .row.justify-center,
  .row.wrap-wrap,
  .hero-copy .row,
  .badge-row { flex-wrap: wrap !important; }
  .section .btn,
  .section .btn-lg,
  .section .btn-play { max-width: 100%; }
  .btn-lg { padding: 14px 20px; font-size: 0.95rem; }
  /* wiki sidebar: single column on phones so labels never clip */
  .docs-sidebar .docs-nav { columns: 1 !important; }
  /* comparison table scrolls horizontally rather than crushing */
  .compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare { min-width: 600px; }
  /* wiki tables: simple ones fit & wrap; wide ones scroll (handled by base rules) */
  .docs-article { min-width: 0; }
  /* long unbroken strings (configs) wrap without splitting normal words */
  .docs-article, .legal { overflow-wrap: break-word; }
  .docs-article .code-block { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
  #posStats { grid-template-columns: 1fr !important; }
  .bento .stat { grid-column: 1 / -1 !important; }
}

/* ============================================================
   MOBILE FIX — Enterprise page right-edge overflow. The inline
   2-col .ent-cards grid never collapsed and long German compound
   words (Flottenverwaltung, Bereitstellung) couldn't wrap, forcing
   the whole page wider than the viewport so the right gutter
   disappeared and the contact form looked off-centre.
   ============================================================ */
@media (max-width: 900px) {
  /* let the hero feature cards shrink instead of forcing page width */
  .ent-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ent-cards > * { min-width: 0; }
  /* safety net: never allow horizontal scrolling on small screens
     (clip, not hidden, so position:sticky keeps working) */
  body { overflow-x: clip; }
}
@media (max-width: 560px) {
  /* one card per row on phones so long labels fit on a single line */
  .ent-cards { grid-template-columns: 1fr; }
  .ent-cards > * { margin-top: 0 !important; }
}
@media (max-width: 820px) {
  /* long unbroken compound words wrap instead of widening the page */
  .h-xl, .h-lg, .h-md { overflow-wrap: break-word; }
  .ent-cards h3 { overflow-wrap: break-word; }
  .contact-wrap > * { min-width: 0; }
}

/* ============================================================
   MOBILE FIX — header overflow (hamburger clipping) + homepage
   Documentation mock preview overflow.
   ============================================================ */
/* Homepage "Documentation" two-column block — collapses on mobile */
.doc-cta-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; align-items: stretch; }

@media (max-width: 1000px) {
  /* tighten the header so the menu button is never pushed off-screen */
  .header-inner { gap: 14px; padding: 0 18px; }
}
@media (max-width: 860px) {
  /* minmax(0,1fr) + min-width:0 prevents the mock's wide min-content
     (fixed sidebar + code block) from blowing the single column wider
     than the viewport, which clipped the text column on the right. */
  .doc-cta-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-cta-grid > * { min-width: 0; }
  #docs-teaser .doc-cta-grid > div:first-child { padding: 30px !important; }
  .doc-mock { border-left: none !important; border-top: 1px solid var(--glass-border); }
}
@media (max-width: 600px) {
  /* the in-menu Google Play link covers this on phones — drop the badge so
     the hamburger always fits within the viewport */
  .header-right { gap: 9px; }
  .header-right .btn-play { display: none; }
  .header-inner { padding: 0 14px; }
}
@media (max-width: 560px) {
  /* stack the docs mock so its content never clips on the right */
  .doc-mock { flex-direction: column !important; padding: 18px !important; gap: 14px !important; }
  .doc-mock-side { width: auto !important; flex: none; border-right: none !important; border-bottom: 1px solid var(--glass-border); padding-right: 0 !important; padding-bottom: 14px !important; }
}

/* ============================================================
   MOBILE FIX — hero phone mockup too large + floating cards
   clipped at the viewport edges on phones.
   ============================================================ */
@media (max-width: 560px) {
  /* keep the hero visual inside the viewport so nothing is cut off */
  .hero-visual { overflow: hidden; padding: 0 6px; }
  /* shrink the portrait phone (exclude the landscape story variant) */
  .hero-visual .phone:not(.landscape) { width: 232px; }
  /* pull the floating glass cards inward and make them narrower */
  .hero-float { width: 150px !important; padding: 11px 13px !important; }
  .hero-float-left { left: 0 !important; top: 34px !important; }
  .hero-float-right { right: 0 !important; bottom: 96px !important; }
  .hero-float-chip { right: 0 !important; top: -8px !important; }
}
@media (max-width: 400px) {
  .hero-visual .phone:not(.landscape) { width: 208px; }
  .hero-float { width: 136px !important; }
  .hero-float-left { top: 22px !important; }
}