/* ============================================================================
   STERLING DIGITAL — "Engine Room"
   Dark premium / technical / alive. One accent (signal-cyan), hairlines over
   shadows, blueprint grid, mono technical labels.
   ============================================================================ */

:root {
  /* base surfaces */
  --bg:        #0b0e14;          /* near-black cool charcoal (deeper than #0d1117 for contrast) */
  --bg-2:      #0d1117;
  --surface:   #131922;          /* card / panel */
  --surface-2: #171e29;          /* raised panel */
  --surface-3: #1b2330;          /* hover / active */

  /* hairlines — structure carried by borders, not shadow */
  --line:      rgba(230, 237, 243, 0.09);
  --line-2:    rgba(230, 237, 243, 0.14);
  --line-3:    rgba(230, 237, 243, 0.22);

  /* text — lifted grey, never pure white. Tuned for WCAG AA on dark surfaces. */
  --text:      #e6edf3;
  --text-2:    #aeb9c6;          /* secondary  ~9:1  */
  --text-3:    #8d97a5;          /* muted      ~6:1 on bg, >=4.5 on cards */
  --text-4:    #838d9b;          /* faint/caps >=4.5 on bg & surfaces */

  /* THE accent — signal cyan. Overridable by Tweaks. */
  --accent:        #22d3ee;
  --accent-ink:    #06141a;      /* text on accent fills */
  --accent-soft:   color-mix(in oklch, var(--accent) 16%, transparent);
  --accent-line:   color-mix(in oklch, var(--accent) 38%, transparent);
  --accent-glow:   color-mix(in oklch, var(--accent) 55%, transparent);
  --accent-dim:    color-mix(in oklch, var(--accent) 70%, var(--text-3));

  /* status hues — ONLY inside the dashboard demo */
  --ok:    #34d399;
  --warn:  #fbbf24;
  --bad:   #f87171;
  --info:  #60a5fa;

  --grid-strength: 1;            /* tweakable */

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);

  --font-display: "Clash Display", "Satoshi", system-ui, sans-serif;
  --font-body:    "Satoshi", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

::selection { background: var(--accent); color: var(--accent-ink); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

img { max-width: 100%; display: block; }

/* ============================================================================
   BLUEPRINT BACKDROP — fixed engineering grid, faded at edges
   ============================================================================ */
.blueprint {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--grid-strength);
  transition: opacity .4s var(--ease);
}
.blueprint::before {
  content: "";
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 78%);
}
.blueprint::after {
  /* finer secondary grid */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(230,237,243,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230,237,243,0.035) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000, transparent 80%);
          mask-image: radial-gradient(80% 60% at 50% 40%, #000, transparent 80%);
}
/* ambient deep-space glow that follows scroll sections */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% -8%, color-mix(in oklch, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(50% 40% at 100% 12%, rgba(96,165,250,0.05), transparent 70%);
}

/* ============================================================================
   LAYOUT
   ============================================================================ */
.shell { position: relative; z-index: 1; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
section { position: relative; }

.sec-pad { padding-block: clamp(96px, 14vh, 180px); }

/* numbered section marker */
.sec-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3);
}
.sec-tag .num { color: var(--accent); }
.sec-tag .tick { width: 22px; height: 1px; background: var(--line-3); display: inline-block; }

/* ============================================================================
   TYPE
   ============================================================================ */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1.display { font-size: clamp(2.6rem, 7.2vw, 6.2rem); font-weight: 600; }
h2.display { font-size: clamp(2rem, 4.6vw, 3.8rem); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-3);
}
.lede { font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--text-2); line-height: 1.5; text-wrap: pretty; }
.mono { font-family: var(--font-mono); }
.accent { color: var(--accent); }
.muted { color: var(--text-3); }

/* per-line / per-word reveal primitives */
.r-line { display: block; overflow: hidden; }
.r-line > span { display: block; will-change: transform; }
.r-word { display: inline-block; overflow: hidden; vertical-align: top; }
.r-word > span { display: inline-block; will-change: transform; }
.fade-up { opacity: 0; transform: translateY(22px); will-change: transform, opacity; }
.is-in .fade-up,
.fade-up.is-in { opacity: 1; transform: none; }

/* ============================================================================
   BUTTONS — magnetic
   ============================================================================ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 500; font-size: 16px;
  letter-spacing: -0.01em;
  padding: 14px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .2s;
  will-change: transform;
}
.btn .mag { display: inline-flex; align-items: center; gap: 10px; }
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 30px -8px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 0 0 1px var(--accent), 0 12px 40px -6px var(--accent-glow); }
.btn-ghost {
  background: color-mix(in oklch, var(--surface) 60%, transparent);
  border-color: var(--line-2);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--line-3); background: var(--surface-2); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ink); }

/* animated underline link */
.ul {
  position: relative; color: var(--text-2);
  transition: color .25s;
}
.ul::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.ul:hover { color: var(--text); }
.ul:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================================
   SPOTLIGHT / HAIRLINE CARDS
   ============================================================================ */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.card::before {
  /* cursor-tracked spotlight */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), color-mix(in oklch, var(--accent) 10%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease);
  pointer-events: none;
}
.card:hover { border-color: var(--line-2); }
.card:hover::before { opacity: 1; }
.card-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-4);
}

/* big metric number */
.metric {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  line-height: 1; letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.metric-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

/* ============================================================================
   CUSTOM CURSOR
   ============================================================================ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 2147483000;
  pointer-events: none; border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; background: #fff; margin: -3px 0 0 -3px; }
.cursor-ring {
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid rgba(255,255,255,0.6);
  transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), border-color .25s;
}
.cursor-ring.hot { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--accent); }
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none !important; } }

/* ============================================================================
   LIVE / STATUS BITS
   ============================================================================ */
.live {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-2);
}
.live .pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.live .pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent);
  animation: pulse 1.8s var(--ease) infinite;
}
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 70% { transform: scale(3); opacity: 0; } 100% { opacity: 0; } }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2);
  color: var(--text-2);
  white-space: nowrap;
}
.badge.ok   { color: var(--ok);   border-color: color-mix(in oklch, var(--ok) 35%, transparent);   background: color-mix(in oklch, var(--ok) 9%, transparent); }
.badge.warn { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 35%, transparent); background: color-mix(in oklch, var(--warn) 9%, transparent); }
.badge.bad  { color: var(--bad);  border-color: color-mix(in oklch, var(--bad) 35%, transparent);  background: color-mix(in oklch, var(--bad) 9%, transparent); }
.badge.info { color: var(--info); border-color: color-mix(in oklch, var(--info) 35%, transparent); background: color-mix(in oklch, var(--info) 9%, transparent); }

/* marquee */
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 56px; padding-right: 56px; white-space: nowrap; animation: marquee 28s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================================
   QA / A11Y — focus, anchor offset, long-token wrapping
   ============================================================================ */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 5px; }
[id] { scroll-margin-top: 92px; }
.ul, .cc-row, .footer-bottom, .pt-url, .ep-d, .lede, .feat-desc { overflow-wrap: anywhere; }
.tracked-num, .fr-num, .bv-callnum, .bv-cfn, .hero-meta b { white-space: nowrap; }

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .fade-up { opacity: 1 !important; transform: none !important; }
  .r-line > span, .r-word > span { transform: none !important; }
  /* compose §01 engine to its open state, hero console flat */
  .problem { --p: 1 !important; }
  .hero-console { transform: rotateX(0) rotateY(0) !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ============================================================================
   CALM MOTION (tweak) — freeze decorative loops, keep reveals
   ============================================================================ */
body[data-motion="calm"] .hero-float,
body[data-motion="calm"] .hero-scrollcue i,
body[data-motion="calm"] .marquee-track { animation: none !important; }
body[data-motion="calm"] .live .pulse::after { animation-duration: 3.2s; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .cursor-dot, .cursor-ring { display: none; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
}