/* ───────────────────────────────────────────────────────────────────────────
   Clusev — clusev.com landing
   "Tactical Terminal" — brand-matched to the panel (handoff §6 tokens, self-hosted fonts).
   Static, no framework. Plain CSS custom properties = the panel's @theme tokens.
─────────────────────────────────────────────────────────────────────────── */

/* ── Self-hosted fonts (no CDN / Google) ─────────────────────────────────── */
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/chakra-petch-400.woff2') format('woff2'); }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/chakra-petch-500.woff2') format('woff2'); }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/chakra-petch-600.woff2') format('woff2'); }
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/chakra-petch-700.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/space-grotesk.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap; src:url('fonts/jetbrains-mono.woff2') format('woff2'); }

/* ── Tokens (1:1 with the panel) ─────────────────────────────────────────── */
:root {
  --void:#06080A; --base:#0A0D10; --surface:#0F1318; --raised:#141A20; --inset:#0B0E12;
  --accent:#FF6B2C; --accent-bright:#FF8A4D; --accent-deep:#E25617; --accent-text:#FF9259;
  --cyan:#43C1D8; --cyan-bright:#74D7E8;
  --online:#35D07F; --warning:#E8B931; --offline:#FF5247;
  --ink:#E9EEF3; --ink-2:#9DAAB6; --ink-3:#7E8A95; --ink-4:#707B85;
  --line:rgba(255,255,255,.10); --line-soft:rgba(255,255,255,.055); --line-strong:rgba(255,255,255,.17);
  --font-display:'Chakra Petch',ui-sans-serif,system-ui,sans-serif;
  --font-sans:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:16px;
  --maxw:1140px;
}

*,*::before,*::after { box-sizing:border-box; }
html { color-scheme:dark; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* Atmosphere: faint dot-grid + a soft signal-orange glow up top. */
body::before {
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:linear-gradient(to bottom, #000 0%, transparent 70%);
}
body::after {
  content:""; position:fixed; top:-30vh; left:50%; transform:translateX(-50%);
  width:90vw; height:80vh; z-index:-2; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 40%, rgba(255,107,44,.13), rgba(67,193,216,.05) 45%, transparent 72%);
  filter:blur(20px);
}

a { color:inherit; text-decoration:none; }
img,svg { display:block; }
.icon { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.mono { font-family:var(--font-mono); }
.eyebrow {
  font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent-text); display:inline-flex; align-items:center; gap:8px;
}
.eyebrow::before { content:""; width:18px; height:1px; background:var(--accent); opacity:.7; }
.eyebrow.cyan { color:var(--cyan-bright); }
.eyebrow.cyan::before { background:var(--cyan); }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(10px); background:rgba(8,10,13,.72);
  border-bottom:1px solid var(--line-soft);
}
.nav .wrap { display:flex; align-items:center; gap:20px; height:64px; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:19px; letter-spacing:.01em; }
.brand .mark {
  display:grid; place-items:center; width:34px; height:34px; border-radius:var(--r-md);
  color:var(--accent); border:1px solid rgba(255,107,44,.28); background:rgba(255,107,44,.10);
  box-shadow:0 0 18px -2px rgba(255,107,44,.55);
}
.brand .mark svg { width:19px; height:19px; }
.brand .e { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:26px; margin-left:auto; }
.nav-links a { color:var(--ink-2); font-size:14px; transition:color .15s; }
.nav-links a:hover { color:var(--ink); }
.nav-cta { margin-left:6px; }

.btn {
  display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:13.5px; font-weight:500;
  padding:10px 16px; border-radius:var(--r-md); border:1px solid var(--line); color:var(--ink);
  background:var(--raised); transition:border-color .16s, background .16s, transform .16s, color .16s; cursor:pointer;
}
.btn:hover { border-color:rgba(255,107,44,.45); color:var(--accent-text); transform:translateY(-1px); }
.btn svg { width:16px; height:16px; }
.btn-primary {
  background:linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  border-color:rgba(255,107,44,.5); color:#1a0c04;
  box-shadow:0 8px 22px -10px rgba(255,107,44,.8), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { color:#1a0c04; transform:translateY(-1px); filter:brightness(1.05); }
.btn-ghost { background:transparent; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding:84px 0 64px; }
.hero .wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.hero h1 {
  font-family:var(--font-display); font-weight:700; line-height:1.04; letter-spacing:-.01em;
  font-size:clamp(38px, 5.4vw, 62px); margin:18px 0 0;
}
.hero h1 .hl { color:var(--accent); }
.hero p.lede { color:var(--ink-2); font-size:clamp(16px,1.5vw,18.5px); max-width:40ch; margin:20px 0 0; }
.hero .cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hero .meta { display:flex; flex-wrap:wrap; gap:18px 26px; margin-top:30px; }
.hero .meta div { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3); }
.dot { width:7px; height:7px; border-radius:50%; flex:none; }
.dot.on{ background:var(--online); box-shadow:0 0 8px var(--online); }
.dot.cy{ background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.dot.ac{ background:var(--accent); box-shadow:0 0 8px var(--accent); }

/* Faux fleet-status console */
.console {
  border:1px solid var(--line); border-radius:var(--r-xl); background:
    linear-gradient(180deg, rgba(20,26,32,.9), rgba(15,19,24,.92));
  box-shadow:var(--shadow,0 24px 60px -30px #000), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.console-bar { display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line-soft); background:rgba(255,255,255,.015); }
.console-bar .tl { display:flex; gap:6px; }
.console-bar .tl i { width:10px; height:10px; border-radius:50%; display:block; }
.console-bar .tl i:nth-child(1){ background:var(--offline); } .console-bar .tl i:nth-child(2){ background:var(--warning); } .console-bar .tl i:nth-child(3){ background:var(--online); }
.console-bar .title { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); margin-left:6px; letter-spacing:.04em; }
.console-bar .live { margin-left:auto; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; color:var(--online); display:flex; align-items:center; gap:6px; }
.console-body { padding:14px; display:grid; gap:9px; }
.srv { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--line-soft); border-radius:var(--r-md); background:rgba(11,14,18,.6); }
.srv .name { font-family:var(--font-mono); font-size:13px; color:var(--ink); }
.srv .sub { font-family:var(--font-mono); font-size:11px; color:var(--ink-4); }
.srv .gauges { display:flex; gap:14px; }
.srv .g { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.srv .g span { font-family:var(--font-mono); font-size:10px; color:var(--ink-4); letter-spacing:.08em; }
.srv .bar { width:54px; height:4px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.srv .bar i { display:block; height:100%; border-radius:99px; }
.ping { position:relative; }
.ping::after { content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid currentColor; opacity:.5; animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite; }

/* ── Sections ────────────────────────────────────────────────────────────── */
section { position:relative; }
.section-head { max-width:64ch; }
.section-head h2 { font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; font-size:clamp(26px,3.4vw,38px); margin:14px 0 0; }
.section-head p { color:var(--ink-2); margin:14px 0 0; font-size:17px; }

.band { padding:74px 0; border-top:1px solid var(--line-soft); }

/* What-it-is strip */
.lead-statement { font-family:var(--font-display); font-weight:500; font-size:clamp(21px,2.7vw,30px); line-height:1.34; letter-spacing:-.005em; max-width:24ch; }
.lead-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.lead-points { display:grid; gap:14px; }
.lead-points li { list-style:none; display:flex; gap:12px; align-items:flex-start; color:var(--ink-2); }
.lead-points .ic { color:var(--cyan); margin-top:2px; flex:none; }
.lead-points b { color:var(--ink); font-weight:600; }

/* Features */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; }
.card {
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  padding:22px; transition:border-color .18s, transform .18s, background .18s;
  position:relative; overflow:hidden;
}
.card::before { content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 0% 0%, rgba(255,107,44,.07), transparent 50%); opacity:0; transition:opacity .25s; }
.card:hover { border-color:rgba(255,107,44,.4); transform:translateY(-3px); }
.card:hover::before { opacity:1; }
.card .ico {
  display:grid; place-items:center; width:42px; height:42px; border-radius:var(--r-md);
  color:var(--accent); background:rgba(255,107,44,.1); border:1px solid rgba(255,107,44,.22); margin-bottom:16px;
}
.card .ico svg { width:21px; height:21px; }
.card h3 { font-family:var(--font-display); font-weight:600; font-size:18px; margin:0 0 7px; }
.card p { color:var(--ink-3); font-size:14.5px; margin:0; }
.card .tag { position:absolute; top:18px; right:18px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; color:var(--cyan-bright); border:1px solid rgba(67,193,216,.3); border-radius:99px; padding:3px 8px; }

/* Open core band */
.opencore { border-top:1px solid var(--line-soft); }
.oc-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.oc-card { border:1px solid rgba(67,193,216,.22); border-radius:var(--r-xl); background:linear-gradient(180deg, rgba(67,193,216,.06), rgba(15,19,24,.5)); padding:26px; }
.oc-card .row { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line-soft); }
.oc-card .row:last-child { border-bottom:0; }
.oc-card .row .ic { color:var(--cyan); flex:none; }
.oc-card .row b { color:var(--ink); }
.oc-card .row span { color:var(--ink-3); font-size:14px; }

/* Get started */
.terminal { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--inset); overflow:hidden; }
.terminal-head { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line-soft); }
.terminal-head .tl{ display:flex; gap:6px; } .terminal-head .tl i{ width:10px;height:10px;border-radius:50%;display:block; }
.terminal-head .tl i:nth-child(1){background:var(--offline)} .terminal-head .tl i:nth-child(2){background:var(--warning)} .terminal-head .tl i:nth-child(3){background:var(--online)}
.terminal-head .lbl { font-family:var(--font-mono); font-size:11px; color:var(--ink-4); letter-spacing:.06em; }
.terminal-head .copy { margin-left:auto; }
.copy-btn { font-family:var(--font-mono); font-size:11px; color:var(--ink-3); background:transparent; border:1px solid var(--line); border-radius:var(--r-sm); padding:5px 10px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:border-color .15s,color .15s; }
.copy-btn:hover { color:var(--accent-text); border-color:rgba(255,107,44,.4); }
.copy-btn svg{ width:13px; height:13px; }
.terminal pre { margin:0; padding:18px 16px; font-family:var(--font-mono); font-size:14px; color:var(--ink); overflow-x:auto; }
.terminal pre .pr { color:var(--accent); user-select:none; } .terminal pre .cm { color:var(--ink-4); }
.steps { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.step { border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--surface); padding:16px; }
.step .k { font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); }
.step h4 { font-family:var(--font-display); font-weight:600; font-size:15.5px; margin:8px 0 5px; }
.step p { color:var(--ink-3); font-size:13.5px; margin:0; }
.step .chip { font-family:var(--font-mono); font-size:11px; color:var(--accent-text); }
.step .chip.cy { color:var(--cyan-bright); }

/* Footer */
.footer { border-top:1px solid var(--line-soft); padding:42px 0; margin-top:24px; }
.footer .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:18px; }
.footer .brand { font-size:17px; }
.footer .brand .mark{ width:30px; height:30px; } .footer .brand .mark svg{ width:16px; height:16px; }
.footer .links { display:flex; gap:22px; margin-left:auto; }
.footer .links a { color:var(--ink-3); font-size:13.5px; transition:color .15s; } .footer .links a:hover{ color:var(--ink); }
.footer .legal { width:100%; color:var(--ink-4); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding-top:18px; border-top:1px solid var(--line-soft); }
.footer .legal .shield{ color:var(--cyan); }

/* ── Reveal animations ───────────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }
.hero .reveal { transition-delay:var(--d,0s); }

@keyframes ping { 75%,100% { transform:scale(2); opacity:0; } }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:980px) {
  .hero .wrap { grid-template-columns:1fr; gap:40px; }
  .hero { padding:60px 0 48px; }
  .feat-grid { grid-template-columns:1fr 1fr; }
  .lead-grid, .oc-grid { grid-template-columns:1fr; gap:30px; }
  .nav-links a:not(.nav-cta) { display:none; }
}
@media (max-width:620px) {
  .wrap { padding-inline:18px; }
  .feat-grid { grid-template-columns:1fr; }
  .steps { grid-template-columns:1fr; }
  .hero .cta-row .btn { flex:1 1 auto; justify-content:center; }
  .footer .links { margin-left:0; width:100%; flex-wrap:wrap; }
  .srv .gauges .g:nth-child(3) { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}