/* ==========================================================================
   Takhitech - Datacentre Monitoring Operations Platform
   Draft 1 design system. Dark-first, Linear / Vercel adjacent.
   ========================================================================== */

:root{
  /* Surfaces */
  --bg:            #08090b;
  --bg-2:          #0b0d10;
  --panel:         #0f1216;
  --panel-2:       #12161b;
  --panel-3:       #171c22;
  --line:          rgba(255,255,255,.07);
  --line-2:        rgba(255,255,255,.12);

  /* Type */
  --text:          #e8ecf1;
  --text-2:        #aab4c0;
  --muted:         #7d8896;
  --faint:         #5b6470;

  /* Brand */
  --accent:        #35e0d0;
  --accent-2:      #6b8cff;
  --accent-dim:    rgba(53,224,208,.14);
  --accent-line:   rgba(53,224,208,.35);

  /* Status */
  --ok:            #35d39a;
  --info:          #6b8cff;
  --warn:          #f7b955;
  --alarm:         #ff4d5e;
  --offline:       #6b7280;

  /* Geometry */
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --maxw: 1200px;
  --nav-h: 64px;

  --shadow-2: 0 12px 40px -12px rgba(0,0,0,.7);
  --shadow-3: 0 40px 120px -30px rgba(0,0,0,.9);

  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:rgba(53,224,208,.28); color:#fff; }

/* ---------- Layout primitives ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.section{ position:relative; padding:88px 0; overflow:hidden; }
.section--tight{ padding:64px 0; }
.section-head{ max-width:760px; margin-bottom:56px; }
.section-head.center{ margin-inline:auto; text-align:center; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:650; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:16px;
}
.eyebrow::before{ content:""; width:16px; height:1px; background:var(--accent-line); }
.section-head.center .eyebrow::before{ display:none; }

h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.022em; line-height:1.14; }
h1{ font-size:clamp(32px,4.4vw,52px); letter-spacing:-.032em; }
h2{ font-size:clamp(24px,2.8vw,34px); letter-spacing:-.024em; }
h3{ font-size:19px; letter-spacing:-.012em; }
p{ margin:0; }

.lede{ font-size:clamp(15.5px,1.4vw,17.5px); color:var(--text-2); line-height:1.68; margin-top:18px; }
.sub{ color:var(--muted); font-size:15px; margin-top:12px; }

.grad-text{
  background:linear-gradient(180deg,#ffffff 28%, #96a2b1);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.accent-text{ color:var(--accent); }

/* ---------- Ambient background ---------- */
.glow{ position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0; }
.glow--hero{
  width:1100px; height:620px; left:50%; top:-280px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(53,224,208,.16), rgba(107,140,255,.09) 55%, transparent 75%);
}
.glow--soft{
  width:720px; height:420px; left:-160px; top:20%;
  background:radial-gradient(closest-side, rgba(107,140,255,.10), transparent 72%);
}
.grid-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}
.section > .wrap{ position:relative; z-index:1; }
.rule{ height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); border:0; margin:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:42px; padding:0 18px; border-radius:var(--r);
  font-size:14.5px; font-weight:550; letter-spacing:-.01em;
  transition:.18s ease; white-space:nowrap;
}
.btn svg{ width:15px; height:15px; }
.btn--primary{
  background:linear-gradient(180deg,#4fead9,#26c5b6);
  color:#04211f; font-weight:650;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 24px -8px rgba(53,224,208,.55);
}
.btn--primary:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.btn--ghost{ background:rgba(255,255,255,.045); border:1px solid var(--line-2); color:var(--text); }
.btn--ghost:hover{ background:rgba(255,255,255,.085); border-color:rgba(255,255,255,.2); }
.btn--sm{ height:36px; padding:0 14px; font-size:13px; border-radius:8px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- Chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  height:30px; padding:0 12px 0 10px; border-radius:99px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-2);
  font-size:12.5px; color:var(--text-2); backdrop-filter:blur(8px);
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px rgba(53,224,208,.18); }
.dot{ display:inline-block; }
.dot--ok{ background:var(--ok); box-shadow:0 0 0 3px rgba(53,211,154,.16); }
.dot--warn{ background:var(--warn); box-shadow:0 0 0 3px rgba(247,185,85,.16); }
.dot--alarm{ background:var(--alarm); box-shadow:0 0 0 3px rgba(255,77,94,.16); }
.dot--info{ background:var(--info); box-shadow:0 0 0 3px rgba(107,140,255,.16); }

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; height:var(--nav-h); z-index:100;
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:background .25s, border-color .25s, backdrop-filter .25s;
}
.nav.is-stuck{
  background:rgba(8,9,11,.72); backdrop-filter:blur(14px) saturate(160%);
  border-bottom-color:var(--line);
}
.nav .wrap{ display:flex; align-items:center; gap:30px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:650; letter-spacing:-.02em; font-size:16.5px; flex:none; }
/* Logo mark is 1.589:1 (wider than tall) — size by height, let width follow.
   flex:none + object-fit are load-bearing: as a flex child it otherwise gets
   shrunk horizontally when the nav is tight, which squashes the mark. */
.brand .mark{ height:30px; width:auto; flex:none; object-fit:contain; max-width:none; }
.brand small{ display:block; font-size:9px; letter-spacing:.2em; color:var(--faint); font-weight:600; margin-top:-4px; }
.nav-links{ display:flex; gap:2px; }
.nav-links a{ padding:8px 12px; border-radius:8px; font-size:14px; color:var(--text-2); transition:.15s; white-space:nowrap; }
.nav-links a:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; width:38px; height:38px; border-radius:8px; border:1px solid var(--line-2); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:calc(var(--nav-h) + 88px) 0 40px; overflow:hidden; }
.hero-inner{ max-width:980px; margin-inline:auto; text-align:center; position:relative; z-index:1; }
/* the home headline is long; cap it so it breaks into two balanced lines */
.hero h1{ margin-top:22px; font-size:clamp(32px,4.6vw,56px); }
.hero .lede{ max-width:660px; margin-inline:auto; }
.hero .btn-row{ justify-content:center; margin-top:34px; }
.hero-meta{
  display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px;
  margin-top:28px; font-size:13px; color:var(--faint);
}
.hero-meta span{ display:inline-flex; align-items:center; gap:7px; }
.hero-meta i{ width:5px; height:5px; border-radius:50%; background:var(--ok); font-style:normal; }

/* ---------- App frame ---------- */
.frame-shell{ position:relative; margin-top:60px; z-index:1; }
.frame-shell::after{
  content:""; position:absolute; left:10%; right:10%; bottom:-26px; height:64px;
  background:radial-gradient(ellipse at center, rgba(53,224,208,.18), transparent 70%);
  filter:blur(26px); pointer-events:none;
}
.frame{
  position:relative; z-index:1;
  background:linear-gradient(180deg,#0d1015,#0a0c0f);
  border:1px solid var(--line-2); border-radius:var(--r-xl);
  box-shadow:var(--shadow-3), 0 0 0 1px rgba(255,255,255,.03) inset;
  overflow:hidden;
}
.frame-bar{
  display:flex; align-items:center; gap:12px; height:42px; padding:0 14px;
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.02);
}
.tl{ display:flex; gap:6px; }
.tl i{ width:10px; height:10px; border-radius:50%; background:#22272e; }
.tl i:first-child{ background:#39434f; }
.frame-url{
  flex:1; max-width:340px; height:24px; border-radius:6px; margin-inline:auto;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:11.5px; color:var(--muted); font-family:var(--mono);
}
.frame-url .lock{ color:var(--ok); }

/* ---------- Console mock ---------- */
.console{ display:grid; grid-template-columns:56px minmax(0,1fr); min-height:600px; }
.rail{
  border-right:1px solid var(--line); background:rgba(255,255,255,.015);
  display:flex; flex-direction:column; align-items:center; padding:12px 0; gap:6px;
}
.rail-btn{
  width:36px; height:36px; border-radius:9px; display:grid; place-items:center;
  color:var(--faint); transition:.15s; position:relative;
}
.rail-btn svg{ width:17px; height:17px; }
.rail-btn:hover{ color:var(--text-2); background:rgba(255,255,255,.05); }
.rail-btn.active{ color:var(--accent); background:var(--accent-dim); box-shadow:inset 0 0 0 1px var(--accent-line); }
.rail-btn .badge{
  position:absolute; top:0; right:0; min-width:16px; height:16px; padding:0 4px;
  border-radius:99px; background:var(--alarm); color:#fff; font-size:9.5px; font-weight:700;
  display:grid; place-items:center; border:2px solid #0d1015;
}
.rail-sep{ width:22px; height:1px; background:var(--line-2); margin:6px 0; }

.console-main{ display:flex; flex-direction:column; min-width:0; }
.topbar{
  height:46px; border-bottom:1px solid var(--line); display:flex; align-items:center;
  gap:12px; padding:0 14px; background:rgba(255,255,255,.012);
}
.site-select{
  display:flex; align-items:center; gap:8px; height:28px; padding:0 10px; border-radius:7px;
  background:rgba(255,255,255,.045); border:1px solid var(--line); font-size:12.5px; color:var(--text-2);
}
.search-mock{
  flex:1; max-width:260px; height:28px; border-radius:7px; padding:0 10px;
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--faint);
  white-space:nowrap; overflow:hidden;
}
.site-select{ white-space:nowrap; }
.search-mock kbd{
  margin-left:auto; font-family:var(--mono); font-size:10px; border:1px solid var(--line-2);
  border-radius:4px; padding:0 4px; color:var(--faint);
}
.topbar .spacer{ flex:1; }
.top-stat{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); font-family:var(--mono); white-space:nowrap; }
.avatar{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(140deg,#2b6f7f,#1d4b6b); font-size:10.5px; font-weight:700; color:#cfeff2;
}

.console-body{ display:grid; grid-template-columns:290px minmax(0,1fr) 232px; flex:1; min-height:0; }
.pane{ min-width:0; display:flex; flex-direction:column; }
.pane + .pane{ border-left:1px solid var(--line); }
.pane-head{
  display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line);
  font-size:11px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.pane-head .count{
  margin-left:auto; font-size:10.5px; padding:1px 7px; border-radius:99px;
  background:rgba(255,77,94,.14); color:#ff8d97; letter-spacing:0; font-weight:700;
}
.pane-scroll{ padding:8px; display:flex; flex-direction:column; gap:6px; overflow:hidden; }

/* Event cards */
.evt{
  position:relative; border:1px solid var(--line); border-radius:9px; padding:10px 11px 10px 14px;
  background:var(--panel-2); cursor:pointer; transition:.15s; text-align:left; width:100%;
}
.evt::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--muted);
}
.evt:hover{ background:var(--panel-3); border-color:var(--line-2); }
.evt.is-active{ background:rgba(53,224,208,.06); border-color:var(--accent-line); }
.evt--p1::before{ background:var(--alarm); box-shadow:0 0 12px rgba(255,77,94,.7); }
.evt--p2::before{ background:var(--warn); }
.evt--p3::before{ background:var(--info); }
.evt-top{ display:flex; align-items:center; gap:8px; }
.evt-pri{
  font-family:var(--mono); font-size:10px; font-weight:700; padding:1px 5px; border-radius:4px;
  background:rgba(255,255,255,.06); color:var(--text-2); letter-spacing:.04em;
}
.evt--p1 .evt-pri{ background:rgba(255,77,94,.16); color:#ff8d97; }
.evt--p2 .evt-pri{ background:rgba(247,185,85,.15); color:#f7cd8c; }
.evt--p3 .evt-pri{ background:rgba(107,140,255,.15); color:#a3b6ff; }
.evt-time{ margin-left:auto; font-family:var(--mono); font-size:10.5px; color:var(--faint); }
.evt-title{ font-size:13px; font-weight:550; margin-top:6px; letter-spacing:-.01em; }
.evt-loc{ font-size:11.5px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:6px; }
.evt-loc code{ font-family:var(--mono); font-size:10.5px; color:var(--faint); }

/* Detail pane */
.detail{ padding:16px; display:flex; flex-direction:column; gap:14px; min-width:0; }
.detail-head{ display:flex; align-items:flex-start; gap:12px; }
.detail-title{ font-size:17px; font-weight:600; letter-spacing:-.02em; }
.detail-meta{ font-size:11.5px; color:var(--muted); margin-top:5px; font-family:var(--mono); }
.sev-badge{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px;
  border-radius:99px; font-size:11.5px; font-weight:650; white-space:nowrap;
  background:rgba(255,77,94,.13); color:#ff8d97; border:1px solid rgba(255,77,94,.3);
}
.sev-badge .pulse{ width:6px; height:6px; border-radius:50%; background:var(--alarm); animation:pulse 1.4s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.3; transform:scale(.78);} }

.detail-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:14px; }
.cam{
  position:relative; aspect-ratio:16/10; border-radius:10px; overflow:hidden;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(107,140,255,.16), transparent 60%),
    linear-gradient(160deg,#0f1418,#08090c);
  border:1px solid var(--line-2);
}
.cam-noise{
  position:absolute; inset:0; opacity:.55;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
}
.cam-rack{ position:absolute; bottom:14%; border-radius:2px; background:linear-gradient(180deg,#1c242c,#11161b); border:1px solid rgba(255,255,255,.08); }
.cam-led{ position:absolute; width:3px; height:3px; border-radius:1px; }
.cam-osd{
  position:absolute; left:9px; top:8px; right:9px; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.72); text-shadow:0 1px 2px #000;
}
.cam-osd .rec{ display:flex; align-items:center; gap:5px; color:#ff8d97; }
.cam-osd .rec i{ width:6px; height:6px; border-radius:50%; background:var(--alarm); animation:pulse 1.6s infinite; }
.cam-osd .ts{ margin-left:auto; }
.cam-bottom{
  position:absolute; left:9px; right:9px; bottom:8px; display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; color:rgba(255,255,255,.62);
}
.cam-scrub{ flex:1; height:3px; border-radius:2px; background:rgba(255,255,255,.16); position:relative; }
.cam-scrub i{ position:absolute; left:0; top:0; bottom:0; width:38%; background:var(--accent); border-radius:2px; }

.kv{ display:flex; flex-direction:column; gap:8px; }
.kv-row{ display:flex; align-items:center; gap:10px; font-size:12px; }
.kv-row .k{ color:var(--faint); width:92px; flex:none; }
.kv-row .v{ color:var(--text-2); font-family:var(--mono); font-size:11.5px; }
.kv-row .v.bad{ color:#ff8d97; }
.kv-row .v.good{ color:#6fe3b6; }

/* Workflow strip inside console */
.wf-strip{ border:1px solid var(--line); border-radius:11px; background:var(--panel); overflow:hidden; }
.wf-strip-head{
  display:flex; align-items:center; gap:9px; padding:9px 12px; border-bottom:1px solid var(--line);
  background:rgba(53,224,208,.05);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
.wf-strip-head .step-of{
  margin-left:auto; color:var(--muted); letter-spacing:0; font-weight:500;
  text-transform:none; font-family:var(--mono); font-size:10.5px;
}
.wf-strip-body{ padding:12px; }
.wf-q{ font-size:13.5px; font-weight:550; }
.wf-note{ font-size:12px; color:var(--muted); margin-top:6px; line-height:1.5; }
.wf-actions{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.wf-btn{
  height:31px; padding:0 12px; border-radius:7px; font-size:12px; font-weight:550;
  background:rgba(255,255,255,.05); border:1px solid var(--line-2); color:var(--text-2); transition:.15s;
}
.wf-btn:hover{ background:rgba(255,255,255,.1); color:var(--text); }
.wf-btn--go{ background:var(--accent-dim); border-color:var(--accent-line); color:#8ff0e4; }
.wf-btn--go:hover{ background:rgba(53,224,208,.22); color:#c6fff7; }

/* Right pane tiles */
.tiles{ padding:10px; display:flex; flex-direction:column; gap:8px; }
.tile{ border:1px solid var(--line); border-radius:9px; background:var(--panel-2); padding:10px 11px; }
.tile-k{ font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.tile-v{ font-size:19px; font-weight:600; letter-spacing:-.02em; margin-top:3px; font-family:var(--mono); }
.tile-v small{ font-size:11px; color:var(--muted); font-weight:500; margin-left:3px; }
.spark{ display:flex; align-items:flex-end; gap:2px; height:26px; margin-top:8px; }
.spark i{ flex:1; background:linear-gradient(180deg,var(--accent),rgba(53,224,208,.12)); border-radius:1px; min-height:2px; transition:height .6s ease; }
.spark.warn i{ background:linear-gradient(180deg,var(--warn),rgba(247,185,85,.12)); }

.ticker{
  border-top:1px solid var(--line); height:30px; display:flex; align-items:center;
  padding:0 14px; gap:10px; font-family:var(--mono); font-size:11px; color:var(--muted);
  background:rgba(255,255,255,.012); overflow:hidden;
}
.ticker .lbl{ color:var(--accent); font-weight:600; flex:none; }
.ticker-line{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- Stats ---------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.stat{ background:var(--bg-2); padding:26px 24px; }
.stat .n{ font-size:30px; font-weight:600; letter-spacing:-.03em; font-family:var(--mono); }
.stat .l{ font-size:13px; color:var(--muted); margin-top:5px; }

/* ---------- Cards ---------- */
.cards{ display:grid; gap:16px; }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.cards--3{ grid-template-columns:repeat(3,1fr); }
.cards--4{ grid-template-columns:repeat(4,1fr); }

.card{
  position:relative; padding:24px; border-radius:var(--r-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border:1px solid var(--line); transition:.2s ease; overflow:hidden;
}
.card:hover{
  border-color:var(--line-2); transform:translateY(-2px);
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}
.card h3{ margin-bottom:8px; }
.card p{ font-size:14px; color:var(--muted); line-height:1.62; }
.card .ico{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--accent-dim); color:var(--accent); border:1px solid var(--accent-line);
}
.card .ico svg{ width:19px; height:19px; }
.card-tag{
  position:absolute; top:18px; right:18px; font-size:9.5px; font-weight:650; letter-spacing:.08em;
  text-transform:uppercase; color:var(--faint); border:1px solid var(--line-2); border-radius:99px; padding:2px 8px;
}

/* Coverage grid */
.cov{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.cov-item{ background:var(--bg-2); padding:20px; transition:.18s; }
.cov-item:hover{ background:var(--panel-2); }
.cov-item .ico{ color:var(--accent); margin-bottom:12px; }
.cov-item .ico svg{ width:20px; height:20px; }
.cov-item h4{ font-size:14.5px; font-weight:600; }
.cov-item p{ font-size:12.5px; color:var(--faint); margin-top:6px; line-height:1.55; }

/* ---------- 3D datacentre view ---------- */
.dc{
  position:relative; border:1px solid var(--line-2); border-radius:var(--r-xl); overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, rgba(107,140,255,.07), transparent 70%),
    linear-gradient(180deg,#0c0f13,#08090b);
  box-shadow:var(--shadow-3);
}
.dc-toolbar{
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.02); flex-wrap:wrap;
}
.dc-toolbar .t-label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:650; }
.seg{ display:flex; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:8px; padding:2px; }
.seg button{ padding:4px 11px; border-radius:6px; font-size:12px; color:var(--muted); transition:.15s; }
.seg button.active{ background:rgba(53,224,208,.16); color:#8ff0e4; box-shadow:inset 0 0 0 1px var(--accent-line); }
.legend{ display:flex; gap:14px; margin-left:auto; flex-wrap:wrap; }
.legend span{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); }
.legend i{ width:8px; height:8px; border-radius:2px; }

.dc-body{ display:grid; grid-template-columns:minmax(0,1fr) 300px; }
.dc-stage-wrap{
  position:relative; height:520px; overflow:hidden; cursor:grab;
  perspective:1400px; perspective-origin:50% 42%;
  touch-action:none;
}
.dc-stage-wrap.dragging{ cursor:grabbing; }
.dc-stage-wrap::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(ellipse 66% 66% at 50% 48%, transparent 45%, rgba(8,9,11,.6) 100%);
}
.dc-stage{
  position:absolute; left:50%; top:50%; width:0; height:0;
  transform-style:preserve-3d;
  transition:transform .12s linear;
}
.floor{
  position:absolute; width:760px; height:520px; left:-380px; top:-260px;
  transform-style:preserve-3d;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(160deg, #1a212a, #0d1116);
  border:1px solid rgba(255,255,255,.13);
  border-radius:4px;
  box-shadow:0 0 90px rgba(0,0,0,.8);
}
.zone-plate{
  position:absolute; border:1px dashed rgba(255,255,255,.12); border-radius:3px;
  background:rgba(255,255,255,.02);
}
.zone-plate span{
  position:absolute; top:5px; left:8px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.28); font-weight:700; font-family:var(--mono);
}
.rack{ position:absolute; transform-style:preserve-3d; cursor:pointer; }
.rack .f{ position:absolute; transform-origin:0 0; backface-visibility:hidden; }
.rack .f.top{
  transform-origin:50% 50%;
  background:linear-gradient(150deg,#38424e,#1d242c);
  border:1px solid rgba(255,255,255,.18);
}
.rack .f.side{
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.35) 0 1px, transparent 1px 5px),
    linear-gradient(180deg,#252e38,#12171d);
  border:1px solid rgba(255,255,255,.09);
}
.rack .f.front{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px),
    linear-gradient(180deg,#2c3641,#151b22);
  border:1px solid rgba(255,255,255,.12);
}
.rack.ok .f.top{ box-shadow:0 0 0 1px rgba(53,211,154,.22); }
.rack.warn .f.top{ background:linear-gradient(150deg,#3a3123,#20190f); box-shadow:0 0 18px rgba(247,185,85,.4); border-color:rgba(247,185,85,.5); }
.rack.alarm .f.top{ background:linear-gradient(150deg,#4a2229,#25121a); box-shadow:0 0 26px rgba(255,77,94,.6); border-color:rgba(255,77,94,.65); }
.rack.alarm .f.front{ border-color:rgba(255,77,94,.35); }
.rack.offline .f.top{ background:linear-gradient(150deg,#20242a,#111418); border-color:rgba(255,255,255,.1); opacity:.6; }
.rack:hover .f.top{ filter:brightness(1.45); }
.rack.is-selected .f.top{ box-shadow:0 0 0 2px var(--accent), 0 0 26px rgba(53,224,208,.5); }
.rack-label{
  position:absolute; transform-origin:50% 50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:8.5px; color:rgba(255,255,255,.5); letter-spacing:.04em;
  pointer-events:none;
}
.rack.alarm .rack-label{ color:#ffc3c9; }
.beacon{
  position:absolute; width:6px; height:6px; margin-left:-3px; border-radius:50%;
  background:var(--alarm); box-shadow:0 0 12px 3px rgba(255,77,94,.85);
  animation:beacon 1.5s ease-in-out infinite; pointer-events:none;
}
.beacon.warn{ background:var(--warn); box-shadow:0 0 12px 3px rgba(247,185,85,.75); }
@keyframes beacon{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

.dc-side{ border-left:1px solid var(--line); display:flex; flex-direction:column; background:rgba(255,255,255,.012); }
.dc-side-head{
  padding:12px 16px; border-bottom:1px solid var(--line);
  font-size:11px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.dc-side-body{ padding:16px; display:flex; flex-direction:column; gap:14px; }
.dc-empty{ color:var(--faint); font-size:13px; line-height:1.6; }
.dc-title{ font-size:16px; font-weight:600; letter-spacing:-.02em; }
.dc-path{ font-family:var(--mono); font-size:11px; color:var(--accent); margin-top:4px; }
.bar{ height:5px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),#4fb8ff); transition:width .5s; }
.bar.warn i{ background:linear-gradient(90deg,var(--warn),#ff9d5c); }
.bar.bad i{ background:linear-gradient(90deg,#ff7a86,var(--alarm)); }
.metric{ display:flex; flex-direction:column; gap:6px; }
.metric-top{ display:flex; align-items:baseline; gap:8px; font-size:12px; color:var(--text-2); }
.metric-top b{ margin-left:auto; font-family:var(--mono); font-weight:600; font-size:12px; }
.dc-hint{
  position:absolute; left:16px; bottom:14px; z-index:4; font-size:11.5px; color:var(--faint);
  display:flex; align-items:center; gap:8px; pointer-events:none;
}
.dc-hint kbd{ font-family:var(--mono); border:1px solid var(--line-2); border-radius:4px; padding:1px 5px; font-size:10px; }

/* ---------- Workflow section ---------- */
.wf{ display:grid; grid-template-columns:340px minmax(0,1fr); gap:0; border:1px solid var(--line-2); border-radius:var(--r-xl); overflow:hidden; background:linear-gradient(180deg,#0d1015,#0a0c0f); box-shadow:var(--shadow-2); }
.wf-rail{ border-right:1px solid var(--line); padding:22px; background:rgba(255,255,255,.015); }
.wf-rail h4{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; }
.wf-steps{ display:flex; flex-direction:column; }
.wf-step{ display:flex; gap:12px; padding-bottom:20px; position:relative; }
.wf-step::before{
  content:""; position:absolute; left:11px; top:24px; bottom:0; width:1px; background:var(--line-2);
}
.wf-step:last-child::before{ display:none; }
.wf-step .n{
  width:23px; height:23px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:700; font-family:var(--mono);
  background:rgba(255,255,255,.05); color:var(--faint); border:1px solid var(--line-2); z-index:1;
}
.wf-step.done .n{ background:rgba(53,211,154,.16); color:#6fe3b6; border-color:rgba(53,211,154,.4); }
.wf-step.current .n{ background:var(--accent-dim); color:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px rgba(53,224,208,.12); }
.wf-step .t{ font-size:13.5px; color:var(--faint); line-height:1.4; padding-top:2px; }
.wf-step.done .t{ color:var(--text-2); }
.wf-step.current .t{ color:var(--text); font-weight:550; }
.wf-step .t em{ display:block; font-style:normal; font-size:11.5px; color:var(--faint); margin-top:3px; font-family:var(--mono); }

.wf-main{ padding:28px; display:flex; flex-direction:column; min-height:460px; }
.wf-eventbar{
  display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:22px;
}
.wf-eventbar .sev{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:rgba(255,77,94,.14); color:#ff8d97; border:1px solid rgba(255,77,94,.3);
}
.wf-eventbar .sev svg{ width:17px; height:17px; }
.wf-eventbar .txt b{ font-size:14.5px; font-weight:600; display:block; letter-spacing:-.01em; }
.wf-eventbar .txt span{ font-size:11.5px; color:var(--muted); font-family:var(--mono); }
.wf-timer{
  margin-left:auto; text-align:right; font-family:var(--mono);
}
.wf-timer b{ font-size:19px; font-weight:600; color:var(--warn); }
.wf-timer span{ display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }

.wf-card{ animation:fadeUp .3s ease; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.wf-kicker{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:650; }
.wf-head{ font-size:22px; font-weight:600; letter-spacing:-.025em; margin-top:10px; }
.wf-body{ color:var(--text-2); font-size:14.5px; line-height:1.65; margin-top:12px; max-width:640px; }
.wf-callout{
  margin-top:18px; border:1px solid var(--line-2); border-radius:12px; padding:14px 16px;
  background:rgba(255,255,255,.028); font-size:13.5px; color:var(--text-2); line-height:1.6;
}
.wf-callout b{ color:var(--text); }
.wf-callout .row{ display:flex; align-items:center; gap:10px; }
.wf-callout .row + .row{ margin-top:8px; }
.wf-callout code{ font-family:var(--mono); font-size:12px; color:var(--accent); }
.wf-choices{ display:flex; flex-wrap:wrap; gap:10px; margin-top:auto; padding-top:26px; }
.choice{
  display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 18px; border-radius:10px;
  border:1px solid var(--line-2); background:rgba(255,255,255,.045); font-size:14px; font-weight:550;
  color:var(--text-2); transition:.16s;
}
.choice:hover{ background:rgba(255,255,255,.1); color:var(--text); transform:translateY(-1px); }
.choice--primary{ background:var(--accent-dim); border-color:var(--accent-line); color:#8ff0e4; }
.choice--primary:hover{ background:rgba(53,224,208,.24); color:#c9fff8; }
.choice--danger{ background:rgba(255,77,94,.12); border-color:rgba(255,77,94,.32); color:#ff9ba4; }
.choice--danger:hover{ background:rgba(255,77,94,.22); color:#ffc6cb; }
.wf-reset{ margin-top:16px; font-size:12.5px; color:var(--faint); }
.wf-reset button{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Architecture ---------- */
.arch{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch;
}
.arch-col{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; gap:12px;
}
.arch-col.is-ours{ border-color:var(--accent-line); background:linear-gradient(180deg, rgba(53,224,208,.07), rgba(53,224,208,.015)); }
.arch-col h4{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.arch-col.is-ours h4{ color:var(--accent); }
.arch-node{
  border:1px solid var(--line-2); border-radius:10px; padding:12px 14px; background:rgba(0,0,0,.25);
  font-size:13.5px; font-weight:550;
}
.arch-node span{ display:block; font-size:11.5px; color:var(--muted); font-weight:400; margin-top:4px; line-height:1.5; }
.arch-flow{
  display:flex; align-items:center; gap:10px; justify-content:center; margin:26px 0 8px;
  font-family:var(--mono); font-size:11.5px; color:var(--faint); flex-wrap:wrap;
}
.arch-flow b{ color:var(--accent); font-weight:600; }

/* ---------- Mapping table ---------- */
.tbl-wrap{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:auto; background:rgba(255,255,255,.015); }
table{ width:100%; border-collapse:collapse; min-width:640px; }
th,td{ text-align:left; padding:14px 18px; font-size:13.5px; border-bottom:1px solid var(--line); }
th{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:650; background:rgba(255,255,255,.02); }
tr:last-child td{ border-bottom:0; }
td.mono{ font-family:var(--mono); font-size:12.5px; color:var(--accent); white-space:nowrap; }
td .m{ color:var(--muted); font-size:12.5px; display:block; margin-top:3px; }

/* ---------- Products teaser ---------- */
.prod{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.prod-card{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; gap:10px; min-height:190px; transition:.2s;
}
.prod-card:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.prod-card.is-live{ border-color:var(--accent-line); background:linear-gradient(180deg, rgba(53,224,208,.08), rgba(53,224,208,.015)); }
.prod-card .badge{
  align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:3px 9px; border-radius:99px; border:1px solid var(--line-2); color:var(--faint);
}
.prod-card.is-live .badge{ border-color:var(--accent-line); color:var(--accent); background:var(--accent-dim); }
.prod-card p{ font-size:13.5px; color:var(--muted); line-height:1.6; }
.prod-card .go{ margin-top:auto; font-size:13px; color:var(--accent); display:inline-flex; align-items:center; gap:6px; }

/* ---------- CTA ---------- */
.cta{
  position:relative; overflow:hidden; border:1px solid var(--line-2); border-radius:var(--r-xl);
  padding:64px 48px; text-align:center;
  background:
    radial-gradient(ellipse 60% 120% at 50% 0%, rgba(53,224,208,.16), transparent 65%),
    linear-gradient(180deg,#0e1216,#0a0c0f);
}
.cta h2{ max-width:640px; margin-inline:auto; }
.cta .lede{ max-width:520px; margin-inline:auto; }
.cta .btn-row{ justify-content:center; margin-top:30px; }

/* ---------- Footer ---------- */
.footer{ border-top:1px solid var(--line); padding:64px 0 40px; background:var(--bg-2); }
.footer-grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:32px; }
.footer h5{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:650; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer a{ font-size:13.5px; color:var(--faint); transition:.15s; }
.footer a:hover{ color:var(--text-2); }
.footer-bottom{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--faint);
}
.footer-bottom .spacer{ flex:1; }
.footer-note{ font-size:13px; color:var(--faint); line-height:1.6; margin-top:14px; max-width:300px; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .console-body{ grid-template-columns:250px minmax(0,1fr); }
  .console-body .pane--tiles{ display:none; }
  .dc-body{ grid-template-columns:minmax(0,1fr); }
  .dc-side{ border-left:0; border-top:1px solid var(--line); }
  .cards--4{ grid-template-columns:repeat(2,1fr); }
  .cov{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-toggle{ display:grid; place-items:center; }
  .nav.is-open .nav-links{
    display:flex; flex-direction:column; position:absolute; top:var(--nav-h); left:16px; right:16px;
    background:rgba(12,14,17,.98); border:1px solid var(--line-2); border-radius:var(--r); padding:10px;
    backdrop-filter:blur(14px);
  }
  .section{ padding:80px 0; }
  .cards--3,.cards--2,.cards--4,.arch,.prod{ grid-template-columns:1fr; }
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
  .console-body{ grid-template-columns:minmax(0,1fr); }
  .console-body .pane--queue{ display:none; }
  .detail-grid{ grid-template-columns:1fr; }
  .wf{ grid-template-columns:1fr; }
  .wf-rail{ border-right:0; border-bottom:1px solid var(--line); }
  .dc-stage-wrap{ height:400px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .cta{ padding:44px 24px; }
}
@media (max-width:560px){
  .nav .wrap{ padding-inline:16px; gap:12px; }
  .nav-cta .btn--ghost:not(.nav-toggle){ display:none; }
  .cov{ grid-template-columns:1fr; }
  .rail{ display:none; }
  .console{ grid-template-columns:minmax(0,1fr); }
  .hero-meta{ gap:8px 14px; font-size:12px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* ==========================================================================
   Multi-page additions
   ========================================================================== */

/* ---------- brand lockup / product designation ---------- */
.brand-sub{
  display:flex; align-items:center; gap:9px; padding-left:13px; margin-left:1px;
  border-left:1px solid var(--line-2); font-size:15px; font-weight:600; letter-spacing:-.02em;
}
.brand-sub .tm{
  font-size:9px; letter-spacing:.16em; color:var(--faint); font-weight:600;
  border:1px solid var(--line-2); border-radius:4px; padding:1px 5px;
}
.nav-links a.is-current{ color:var(--text); background:rgba(255,255,255,.06); }

/* ---------- subpage hero ---------- */
.page-hero{ position:relative; padding:calc(var(--nav-h) + 76px) 0 20px; overflow:hidden; }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ font-size:clamp(34px,4.6vw,58px); }
.page-hero .lede{ max-width:680px; }
.page-hero .btn-row{ margin-top:32px; }
.crumb{
  display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--faint);
  margin-bottom:20px; font-family:var(--mono);
}
.crumb a:hover{ color:var(--accent); }

/* ---------- flagship band ---------- */
.flagship{
  position:relative; overflow:hidden;
  border:1px solid var(--accent-line); border-radius:var(--r-xl); padding:44px;
  display:grid; grid-template-columns:1.02fr .98fr; gap:44px; align-items:center;
  background:
    radial-gradient(ellipse 70% 130% at 100% 0%, rgba(53,224,208,.13), transparent 60%),
    linear-gradient(180deg,#0e1216,#0a0c0f);
}
.flagship .kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.flagship h2{ font-size:clamp(26px,3vw,38px); margin-top:14px; }
.flagship .lede{ font-size:16px; }
.product-lockup{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.product-lockup .p{ font-size:34px; font-weight:650; letter-spacing:-.03em; }
.product-lockup .by{ font-size:14px; color:var(--muted); }

/* ---------- generic split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split--wide{ grid-template-columns:1.15fr .85fr; }

.ticks{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:13px; }
.ticks li{ display:flex; gap:11px; font-size:14.5px; color:var(--text-2); line-height:1.55; }
.ticks svg{ width:17px; height:17px; color:var(--accent); flex:none; margin-top:3px; }
.ticks b{ color:var(--text); font-weight:600; }

/* ---------- numbered / lettered feature blocks ---------- */
.numbered{ display:flex; flex-direction:column; gap:0; }
.numbered-item{ display:grid; grid-template-columns:56px 1fr; gap:20px; padding:26px 0; border-top:1px solid var(--line); }
.numbered-item:last-child{ border-bottom:1px solid var(--line); }
.numbered-item .num{ font-family:var(--mono); font-size:12px; color:var(--accent); padding-top:4px; letter-spacing:.08em; }
.numbered-item h3{ margin-bottom:7px; }
.numbered-item p{ font-size:14px; color:var(--muted); line-height:1.62; max-width:640px; }

/* ---------- about: people / values ---------- */
.team{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.person{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; background:rgba(255,255,255,.02);
}
.person .pic{
  width:52px; height:52px; border-radius:50%; margin-bottom:16px;
  background:linear-gradient(140deg,#1f4d57,#16333f); border:1px solid var(--line-2);
  display:grid; place-items:center; color:#7fd8d0; font-weight:700; font-size:15px; font-family:var(--mono);
}
.person h4{ font-size:15px; font-weight:600; }
.person span{ display:block; font-size:12.5px; color:var(--muted); margin-top:4px; }
.person p{ font-size:12.5px; color:var(--faint); margin-top:10px; line-height:1.55; }

.quote{
  border-left:2px solid var(--accent); padding:6px 0 6px 26px; margin:0;
  font-size:clamp(19px,2.2vw,26px); line-height:1.45; letter-spacing:-.02em; color:var(--text);
}
.quote footer{ font-size:13.5px; color:var(--muted); margin-top:16px; letter-spacing:0; }

.factlist{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.fact{ background:var(--bg-2); padding:22px; }
.fact dt{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.fact dd{ margin:6px 0 0; font-size:15px; color:var(--text-2); }

/* ---------- solutions: segment cards ---------- */
.seg-card{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; background:rgba(255,255,255,.02);
  transition:.2s;
}
.seg-card:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.seg-card .ico{ width:36px; height:36px; border-radius:9px; display:grid; place-items:center; margin-bottom:16px; background:var(--accent-dim); color:var(--accent); border:1px solid var(--accent-line); }
.seg-card .ico svg{ width:18px; height:18px; }
.seg-card h3{ margin-bottom:8px; }
.seg-card p{ font-size:13.5px; color:var(--muted); line-height:1.6; }
.seg-card ul{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:8px; }
.seg-card li{ font-size:12.5px; color:var(--faint); display:flex; gap:8px; }
.seg-card li::before{ content:"—"; color:var(--accent); }

.prod-card--lg{ min-height:auto; padding:32px; }
.prod-card--lg h3{ font-size:24px; letter-spacing:-.025em; }
.prod-card--lg p{ font-size:14.5px; }

/* ---------- roadmap ---------- */
.road{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.road-col{ background:var(--bg-2); padding:24px; }
.road-col h4{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.road-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.road-col li{ font-size:13.5px; color:var(--text-2); display:flex; gap:10px; align-items:flex-start; }
.road-col li i{ width:6px; height:6px; border-radius:50%; margin-top:7px; flex:none; background:var(--faint); }
.road-col.now li i{ background:var(--ok); }
.road-col.next li i{ background:var(--warn); }

@media (max-width:1080px){
  .team{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .flagship,.split,.split--wide{ grid-template-columns:1fr; gap:32px; padding:28px; }
  .road{ grid-template-columns:1fr; }
  .factlist{ grid-template-columns:1fr; }
  .numbered-item{ grid-template-columns:1fr; gap:6px; }
  .brand-sub{ display:none; }
}

/* ==========================================================================
   Phosphor icon sizing + product logos
   Icons are Phosphor (regular), 256-unit viewBox, fill-based — so they need
   an explicit box rather than the stroke sizing the old set used.
   ========================================================================== */
.frame-url .lock{ width:12px; height:12px; color:var(--ok); flex:none; }
.site-select .caret{ width:12px; height:12px; flex:none; opacity:.7; }
.nav-toggle .burger{ width:18px; height:18px; }
.search-mock > svg:first-child{ width:13px; height:13px; flex:none; }
.go svg{ width:13px; height:13px; }

.prod-logo{
  height:26px; width:auto; max-width:180px; object-fit:contain;
  margin-bottom:2px;
}

/* product lockup: a mark sitting inline with the product name */
.prod-h{ display:flex; align-items:center; gap:9px; }
.prod-mark{ height:22px; width:auto; flex:none; }

/* ==========================================================================
   Product row — one panel, equal cells. Replaces the old .prod cards, where
   only the "live" one was highlighted and the logo lockups were different
   widths, so the three never lined up.
   ========================================================================== */
.prodrow{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line-2);
  border-radius:var(--r-lg); overflow:hidden;
}
.prodrow--4{ grid-template-columns:repeat(4,1fr); }
.prodrow-item{
  background:var(--bg-2); padding:26px 24px;
  display:flex; flex-direction:column; gap:12px; transition:background .18s;
}
.prodrow-item:hover{ background:var(--panel-2); }

/* fixed-height mark box keeps every product name on the same baseline,
   whatever shape its logo is */
.prodrow-head{ display:flex; align-items:center; gap:11px; min-height:28px; }
.prodrow-head img{ height:26px; width:auto; flex:none; object-fit:contain; }
.prodrow-head .ico{
  width:26px; height:26px; border-radius:7px; flex:none; display:grid; place-items:center;
  background:var(--accent-dim); border:1px solid var(--accent-line); color:var(--accent);
}
.prodrow-head .ico svg{ width:15px; height:15px; }
.prodrow-head h3{ margin:0; font-size:17px; letter-spacing:-.015em; }
.prodrow-item p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.62; }
.prodrow-item .go{
  margin-top:auto; padding-top:8px; font-size:12.5px; color:var(--accent);
  display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
}
.prodrow-item .go svg{ width:13px; height:13px; }
.prodrow-item .go:hover{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:1080px){ .prodrow--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:860px){ .prodrow, .prodrow--4{ grid-template-columns:1fr; } }

/* ==========================================================================
   Lifted band. Used to separate the other products from Sightline, which sits
   in its own accent-bordered panel above.
   ========================================================================== */
.section--band{
  background:linear-gradient(180deg,#12161d,#0d1015);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.section--band .prodrow{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.17);
}
.section--band .prodrow-item{ background:#181d25; }
.section--band .prodrow-item:hover{ background:#1d232c; }

/* small label sitting directly above a row */
.rowlabel{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px;
}

/* the flagship panel gets a label of its own */
.flagship .eyebrow{ margin-bottom:10px; }


/* ==========================================================================
   Home hero backdrop: isometric hall built from the same rack layout as the 3D
   site view, with an instrument readout. Replaces the generic 64px grid, which
   every dev-tool site on earth is using.

   Two nested elements because the artwork needs two masks (a horizontal fade
   across the headline and a vertical fade before the console mockup) and
   mask-composite is not reliable enough to do it in one.
   ========================================================================== */
.hero-bg{
  position:absolute; inset:0 0 auto 0; height:780px; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 52%,transparent 88%);
}
.hero-bg-in{
  position:absolute; inset:0; display:flex; justify-content:flex-end; align-items:center;
  color:#b6cbe2; opacity:.16;
  /* never fully transparent on the left, so the hall stays faintly present
     behind the headline instead of dying out */
  -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.22) 22%,rgba(0,0,0,.55) 48%,#000 78%);
  mask-image:linear-gradient(100deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.22) 22%,rgba(0,0,0,.55) 48%,#000 78%);
}
.hero-bg-in img{ width:1500px; max-width:none; height:auto; transform:translate(260px,0); }

.hero-aside img, .hero-readout img{ width:100%; height:auto; }

/* left companion: signal flow, deliberately quieter than the readout */
.hero-aside{
  position:absolute; left:16px; top:312px; width:186px; z-index:0;
  pointer-events:none; color:#cfe0f2; opacity:.27;
}

.hero-readout{
  position:absolute; right:18px; top:286px; width:238px; z-index:0;
  pointer-events:none; color:#cfe0f2; opacity:.35;
}

/* the readout needs clear margin beside the 900px copy column */
@media (max-width:1400px){ .hero-readout, .hero-aside{ display:none; } }
/* below this the hall sits straight behind the headline with nowhere to fade */
@media (max-width:860px){ .hero-bg{ display:none; } }


/* ==========================================================================
   Surface levels. One flat black for every section made the pages read as a
   single slab; these give the page a rhythm. Same values as the other two
   sites so the three feel like one company.
   ========================================================================== */
.section--alt{
  background:linear-gradient(180deg,#10151c,#0c1015);
  border-block:1px solid var(--line-2);
}
.section--alt .card{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); }
.section--alt .cov-item, .section--alt .stat, .section--alt .fact, .section--alt .road-col{ background:#11161d; }


/* Keyboard focus. The browser default is close to invisible on this
   background, which made the sites unusable without a mouse. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}
a:focus-visible, button:focus-visible{ outline-offset:4px; }