/* ============ Buttons ============ */
.btn { display:inline-flex; align-items:center; gap:var(--space-2); padding:11px 20px;
  border-radius:var(--radius-input); font-weight:500; font-size:15px; line-height:1;
  border:1px solid transparent; transition: background var(--dur-ui) var(--ease-out),
  border-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); white-space:nowrap; }
.btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.btn--primary { background:var(--accent-fill); color:var(--ink-on-accent); }
.btn--primary:hover { background:var(--accent-hover); }
.btn--primary:active { background:var(--accent-press); transform:translateY(1px); }
.btn--secondary { background:transparent; border-color:var(--hairline-strong); color:var(--ink); }
.btn--secondary:hover { background:var(--surface-sunken); }
.btn--tertiary { padding:6px 0; color:var(--accent); }
.btn--tertiary:hover { color:var(--accent-hover); }
.btn--lg { padding:14px 26px; font-size:16px; }
.btn--block { width:100%; justify-content:center; }
.btn .ext::after { content:' ↗'; }

/* ============ Navbar ============ */
.nav { position:sticky; top:0; z-index:50; background:var(--surface-glass);
  -webkit-backdrop-filter:blur(18px) saturate(160%); backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--hairline); }
.nav__inner { display:flex; align-items:center; gap:var(--space-8); height:64px; }
.nav__logo { display:flex; align-items:center; gap:10px; font-family:'Inter Tight'; font-weight:600;
  font-size:18px; letter-spacing:-0.02em; }
.nav__mark { width:26px; height:26px; }
.nav__links { display:flex; align-items:center; gap:var(--space-6); margin-left:auto; }
.nav__links a { font-size:15px; color:var(--ink-secondary); transition:color var(--dur-ui) var(--ease-out); }
.nav__links a:hover, .nav__links a.is-active { color:var(--ink); }
.nav__cta { margin-left:var(--space-2); }
.nav__burger { display:none; margin-left:auto; width:40px; height:40px; border:1px solid var(--hairline-strong);
  border-radius:var(--radius-input); background:var(--surface); align-items:center; justify-content:center; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after { content:''; display:block; width:18px; height:1.5px; background:var(--ink); position:relative; }
.nav__burger span::before { position:absolute; top:-5px; } .nav__burger span::after { position:absolute; top:5px; }
@media (max-width:900px){
  .nav__links { position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--surface); border-bottom:1px solid var(--hairline); padding:var(--space-2) var(--space-6) var(--space-6);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:all var(--dur-ui) var(--ease-out); }
  .nav__links.is-open { transform:none; opacity:1; pointer-events:auto; }
  .nav__links a { padding:14px 0; border-bottom:1px solid var(--hairline); }
  .nav__cta { margin:var(--space-4) 0 0; } .nav__burger { display:inline-flex; }
}

/* ============ Hero ============ */
.hero { position:relative; background:var(--gradient-canvas); overflow:hidden; border-top:none; }
.hero__grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--space-12); align-items:center;
  padding-block:clamp(var(--space-16),8vw,120px); }
.hero__title { margin:var(--space-6) 0 var(--space-6); }
.hero__lead { max-width:46ch; }
.hero__actions { display:flex; gap:var(--space-3); margin-top:var(--space-8); flex-wrap:wrap; }
.hero__chips { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-8); }
.hero__media { position:relative; aspect-ratio:3/2; border-radius:var(--radius-card); overflow:hidden;
  border:1px solid var(--hairline); box-shadow:var(--shadow-raised); background:var(--surface-sunken); }
.hero__media img { width:100%; height:100%; object-fit:cover; }
.hero__bracket { position:absolute; width:18px; height:18px; border:1.5px solid var(--accent); }
.hero__bracket--tl { top:12px; left:12px; border-right:none; border-bottom:none; }
.hero__bracket--br { bottom:12px; right:12px; border-left:none; border-top:none; }
@media (max-width:900px){ .hero__grid { grid-template-columns:1fr; gap:var(--space-8); } }
@media (max-width:560px){ .hero__title { font-size:33px; line-height:1.06; letter-spacing:-0.02em; } }

/* signal line — restrained: one node pulse, occasional tick */
.signal { position:absolute; left:0; right:0; top:50%; height:1px; background:var(--gradient-hud-line); opacity:.5; }
.signal__node { position:absolute; top:50%; left:32%; width:7px; height:7px; border-radius:50%;
  background:var(--accent); transform:translate(-50%,-50%); box-shadow:0 0 0 4px rgba(30,72,224,.15);
  animation:nodePulse 3.2s var(--ease-out) infinite; }
@keyframes nodePulse { 0%,100%{ box-shadow:0 0 0 3px rgba(30,72,224,.16);} 50%{ box-shadow:0 0 0 7px rgba(30,72,224,.04);} }
@media (prefers-reduced-motion:reduce){ .signal__node{ animation:none; } }

/* ============ Chips / status / placeholder ============ */
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--radius-chip);
  background:var(--surface-sunken); border:1px solid var(--hairline); font-size:13px; color:var(--ink-secondary); }
.dot { width:7px; height:7px; border-radius:50%; background:var(--status-idle); flex:none; }
.dot--online { background:var(--status-online); box-shadow:0 0 0 3px var(--status-online-wash); }
.status { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:500; }
.status--online { background:var(--status-online-wash); color:var(--status-online); }
.status--warn { background:var(--status-warn-wash); color:var(--status-warn); }
.status--idle { background:var(--surface-sunken); color:var(--ink-muted); }
.ph { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--ink-muted);
  background:var(--accent-wash-soft); border:1px dashed var(--hairline-strong); border-radius:var(--radius-chip);
  padding:1px 7px; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.ph::before { content:'•'; color:var(--accent); }
.ph-note { display:inline-flex; align-items:center; gap:6px; }

/* ============ Cards / grids ============ */
.grid { display:grid; gap:var(--space-6); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid--3,.grid--4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid--2,.grid--3,.grid--4 { grid-template-columns:1fr; } }

.card { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-card);
  padding:var(--space-6); transition:border-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
.card--hover:hover { border-color:var(--hairline-strong); transform:translateY(-2px); box-shadow:var(--shadow-flat); }
.card__icon { width:40px; height:40px; border-radius:var(--radius-input); background:var(--accent-wash);
  display:grid; place-items:center; color:var(--accent); margin-bottom:var(--space-4); }
.card__icon svg { width:20px; height:20px; }
.card h3 { margin-bottom:var(--space-2); }
.card p { color:var(--ink-secondary); font-size:15px; }
.card__link { margin-top:var(--space-4); color:var(--accent); font-weight:500; font-size:15px; display:inline-flex; gap:4px; }
.pricing-feats { display:grid; gap:10px; margin-top:var(--space-4); }
.pricing-feats li { display:flex; gap:10px; font-size:14px; color:var(--ink-secondary); }
.pricing-feats li::before { content:''; width:14px; height:14px; margin-top:3px; flex:none; background:var(--accent-wash);
  border-radius:50%; box-shadow:inset 0 0 0 1px var(--accent); }

/* big audience split cards */
.split-cards { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); }
@media (max-width:780px){ .split-cards { grid-template-columns:1fr; } }
.split-card { position:relative; padding:var(--space-12); border:1px solid var(--hairline);
  border-radius:var(--radius-lg); background:var(--surface-raised); overflow:hidden;
  transition:border-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
.split-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.split-card .eyebrow { margin-bottom:var(--space-6); }
.split-card h3 { font-size:26px; margin-bottom:var(--space-3); }
.split-card ul { margin:var(--space-6) 0; display:grid; gap:var(--space-3); }
.split-card li { display:flex; gap:10px; color:var(--ink-secondary); font-size:15px; }
.split-card li::before { content:''; width:6px; height:6px; margin-top:8px; flex:none; background:var(--accent); }

/* ============ Spec list / table ============ */
.spec-list { border-top:1px solid var(--hairline); }
.spec-row { display:flex; justify-content:space-between; gap:var(--space-6); padding:14px 0;
  border-bottom:1px solid var(--hairline); align-items:baseline; }
.spec-row dt { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-muted); }
.spec-row dd { font-size:15px; color:var(--ink); text-align:right; }
.table { width:100%; border-collapse:collapse; font-size:14px; }
.table th { text-align:left; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-muted); font-weight:500; padding:12px var(--space-4); border-bottom:1px solid var(--hairline-strong); }
.table td { padding:13px var(--space-4); border-bottom:1px solid var(--hairline); }
.table tbody tr:nth-child(even) { background:var(--accent-wash-soft); }
.table .mono { color:var(--ink); }

/* ============ Feature list ============ */
.flist { display:grid; gap:0; border-top:1px solid var(--hairline); }
.flist li { display:flex; gap:var(--space-4); padding:var(--space-6) 0; border-bottom:1px solid var(--hairline); }
.flist .idx { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent); padding-top:3px; }
.flist h4 { font-size:17px; font-weight:500; margin-bottom:4px; }
.flist p { color:var(--ink-secondary); font-size:15px; }

/* ============ Stepper / diagram / timeline / process ============ */
.flow { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); counter-reset:step; }
@media (max-width:780px){ .flow { grid-template-columns:1fr; } }
.flow__step { position:relative; padding:var(--space-6); border:1px solid var(--hairline); border-radius:var(--radius-card); background:var(--surface); }
.flow__step .n { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent); }
.flow__step h4 { font-size:16px; font-weight:500; margin:var(--space-2) 0 6px; }
.flow__step p { font-size:14px; color:var(--ink-secondary); }
.timeline { border-left:2px solid var(--hairline); margin-left:6px; }
.timeline li { position:relative; padding:0 0 var(--space-8) var(--space-8); }
.timeline li::before { content:''; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%;
  background:var(--surface); border:2px solid var(--accent); }
.timeline h4 { font-size:17px; font-weight:500; margin-bottom:4px; }
.timeline p { color:var(--ink-secondary); font-size:15px; }
.timeline .n { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ink-muted); }

/* ============ Marquee ============ */
.marquee { overflow:hidden; border-block:1px solid var(--hairline); padding-block:var(--space-8);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track { display:flex; gap:var(--space-12); width:max-content; animation:marq 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state:paused; }
.marquee__item { display:flex; align-items:center; gap:10px; font-family:'Inter Tight'; font-weight:600;
  font-size:20px; color:var(--ink-secondary); opacity:.8; }
.marquee__logo { height:30px; width:auto; opacity:.78; filter:grayscale(0.15); transition:opacity var(--dur-ui) var(--ease-out); }
.marquee__item:hover .marquee__logo { opacity:1; }
.logo-text { font-family:'Inter Tight'; font-weight:600; font-size:22px; letter-spacing:-0.02em; color:var(--ink-secondary); }
/* partner cards with logo */
.partner__logo { height:34px; width:auto; margin-bottom:var(--space-4); }
.partner__logo--txt { display:inline-flex; align-items:center; height:34px; font-family:'Inter Tight'; font-weight:600; font-size:22px; color:var(--ink); margin-bottom:var(--space-4); }
@keyframes marq { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track { animation:none; } }

/* ============ Stats ============ */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
@media (max-width:780px){ .stats { grid-template-columns:1fr; } }
.stat { padding:var(--space-8) 0; border-top:2px solid var(--accent); }
.stat .v { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; font-size:40px;
  letter-spacing:-0.02em; line-height:1; color:var(--ink); }
.stat .l { margin-top:var(--space-3); color:var(--ink-secondary); font-size:15px; }

/* ============ Split media / text-media ============ */
.media-split { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); align-items:center; }
.media-split--rev .media-split__media { order:-1; }
@media (max-width:820px){ .media-split { grid-template-columns:1fr; gap:var(--space-8); } .media-split--rev .media-split__media { order:0; } }
.media-split__media { aspect-ratio:1/1; border-radius:var(--radius-card); overflow:hidden; border:1px solid var(--hairline); box-shadow:var(--shadow-flat); background:var(--surface-sunken); }
.media-split__media img { width:100%; height:100%; object-fit:cover; }
.media-split ul { display:grid; gap:var(--space-3); margin-top:var(--space-6); }
.media-split li { display:flex; gap:10px; color:var(--ink-secondary); }
.media-split li::before { content:''; width:6px; height:6px; margin-top:9px; flex:none; background:var(--accent); }

/* ============ CTA banner ============ */
.cta { position:relative; border-radius:var(--radius-lg); padding:clamp(var(--space-12),6vw,72px);
  background:linear-gradient(135deg,#15349E,#1E48E0 60%,#2C63FF); color:#fff; overflow:hidden; }
.cta::after { content:''; position:absolute; inset:0; background:radial-gradient(60% 120% at 85% 0%,rgba(25,198,245,.35),transparent 60%); pointer-events:none; }
.cta h2 { color:#fff; max-width:18ch; }
.cta p { color:rgba(255,255,255,.82); max-width:52ch; margin-top:var(--space-4); }
.cta__actions { display:flex; gap:var(--space-3); margin-top:var(--space-8); flex-wrap:wrap; position:relative; }
.cta .btn--primary { background:#fff; color:var(--accent-fill); }
.cta .btn--primary:hover { background:#eef2ff; }
.cta .btn--secondary { border-color:rgba(255,255,255,.4); color:#fff; }
.cta .btn--secondary:hover { background:rgba(255,255,255,.1); }

/* ============ Breadcrumbs / subhero ============ */
.subhero { background:var(--gradient-canvas); border-top:none; padding-block:var(--space-16) var(--space-12); }
.crumbs { display:flex; gap:8px; font-size:13px; color:var(--ink-muted); margin-bottom:var(--space-6); font-family:'JetBrains Mono',monospace; }
.crumbs a:hover { color:var(--ink); } .crumbs span { color:var(--hairline-strong); }
.subhero h1 { max-width:18ch; } .subhero .lead { margin-top:var(--space-4); max-width:60ch; }

/* ============ Accordion ============ */
.acc__item { border-bottom:1px solid var(--hairline); }
.acc__q { width:100%; display:flex; justify-content:space-between; gap:var(--space-4); align-items:center;
  padding:var(--space-6) 0; text-align:left; background:none; border:none; font-size:17px; font-weight:500; color:var(--ink); }
.acc__q .pm { width:16px; height:16px; position:relative; flex:none; }
.acc__q .pm::before,.acc__q .pm::after { content:''; position:absolute; background:var(--accent); inset:0; margin:auto; }
.acc__q .pm::before { width:16px; height:1.5px; } .acc__q .pm::after { width:1.5px; height:16px; transition:transform var(--dur-ui) var(--ease-out); }
.acc__item.is-open .pm::after { transform:scaleY(0); }
.acc__a { max-height:0; overflow:hidden; transition:max-height var(--dur-panel) var(--ease-out); }
.acc__a p { padding-bottom:var(--space-6); color:var(--ink-secondary); max-width:70ch; }

/* ============ Forms ============ */
.form { display:grid; gap:var(--space-4); }
.field { display:grid; gap:6px; }
.field label { font-size:13px; color:var(--ink-secondary); }
.field input,.field select,.field textarea { width:100%; padding:11px 13px; font:inherit; font-size:15px;
  border:1px solid var(--hairline-strong); border-radius:var(--radius-input); background:var(--surface); color:var(--ink);
  transition:border-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out); }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:620px){ .form__row { grid-template-columns:1fr; } }
.form-card { max-width:480px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:var(--space-8); box-shadow:var(--shadow-flat); }

/* ============ Glass card (LK) ============ */
.lk { background:var(--surface-sunken); min-height:100vh; }
.glass { background:var(--surface-glass); -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%); border:1px solid var(--hairline); border-radius:var(--radius-card);
  box-shadow:var(--shadow-glass), var(--shadow-glass-inset); padding:var(--space-6); position:relative; overflow:hidden; }
.glass::before { content:''; position:absolute; inset:0 0 auto 0; height:1px; background:var(--gradient-hud-line); }
.lk__bg { position:fixed; inset:0; z-index:0; object-fit:cover; width:100%; height:100%; opacity:.5; }
.lk__wrap { position:relative; z-index:1; }
.lk__top { display:flex; align-items:center; gap:var(--space-6); padding:var(--space-4) 0; }
.lk__tabs { display:flex; gap:var(--space-2); margin-left:auto; flex-wrap:wrap; }
.lk__tabs a { padding:8px 14px; border-radius:var(--radius-input); font-size:14px; color:var(--ink-secondary); border:1px solid transparent; }
.lk__tabs a.is-active { background:var(--accent-wash); color:var(--accent); border-left:2px solid var(--accent); border-radius:0 var(--radius-input) var(--radius-input) 0; }
.metric { display:grid; gap:6px; }
.metric .l { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); }
.metric .v { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; font-size:30px; letter-spacing:-0.02em; }

/* ============ Footer ============ */
.footer { border-top:1px solid var(--hairline); background:var(--surface-raised); padding-block:var(--space-16) var(--space-8); }
.footer__grid { display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:var(--space-8); }
@media (max-width:900px){ .footer__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid { grid-template-columns:1fr; } }
.footer__brand .nav__logo { margin-bottom:var(--space-4); }
.footer__brand p { color:var(--ink-muted); font-size:14px; max-width:32ch; }
.footer h5 { font-size:12px; font-family:'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:var(--space-4); }
.footer__col a { display:block; padding:5px 0; color:var(--ink-secondary); font-size:14px; }
.footer__col a:hover { color:var(--ink); }
.footer__bottom { margin-top:var(--space-12); padding-top:var(--space-6); border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:var(--space-4) var(--space-8); font-size:13px; color:var(--ink-muted); }
.footer__bottom .mono { font-size:12px; }

/* utilities */
.stack-sm > * + * { margin-top:var(--space-3); }
.mt-6 { margin-top:var(--space-6); } .mt-8 { margin-top:var(--space-8); }
.flex { display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; }
.notice { display:flex; gap:10px; padding:var(--space-4); border:1px solid var(--hairline); border-left:2px solid var(--accent);
  border-radius:var(--radius-input); background:var(--accent-wash-soft); font-size:14px; color:var(--ink-secondary); }