/* NOCTURNE — every design token lives here. Monochrome; colour only for P&L and model brands. */
/* [audit R2-FE-01] Geist and Geist Mono from our own origin (fonts/, OFL: fonts/OFL.txt), never a third party on the
   render path. font-display: swap; until Geist arrives, Arial sized to Geist's width and line metrics stands in, so the
   swap doesn't move the page. The engine's gate, 404 and legal pages get the same fonts through this file. */
@font-face { font-family: 'Geist'; src: url('fonts/geist-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/geist-mono-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 102.2%; ascent-override: 98.34%; descent-override: 28.86%; line-gap-override: 0%; }

:root {
  /* canvas + surfaces */
  --ns-bg: #000000;
  --ns-surface: #0E0F11;
  --ns-surface-2: #16171A;
  --ns-surface-3: #1E1F23;
  --ns-line: rgba(255,255,255,.09);
  --ns-line-2: rgba(255,255,255,.16);

  /* text */
  --ns-text: #FFFFFF;
  --ns-text-2: #B4B6BB;
  --ns-muted: #85878D;

  /* "accent" is white: the site has no brand colour */
  --ns-accent: #FFFFFF;
  --ns-accent-2: #E6E7E9;
  --ns-accent-ink: #000000;
  --ns-accent-soft: rgba(255,255,255,.06);
  --ns-accent-glow: rgba(255,255,255,.22);

  /* light band (end of the night) */
  --ns-light: #F2F2F0;
  --ns-light-2: #E4E5E3;
  --ns-ink: #0B0C0E;
  --ns-ink-2: #4A4D53;
  --ns-ink-line: rgba(0,0,0,.12);

  /* gains / losses only */
  --ns-gain: #3FD08A;
  --ns-loss: #FF6868;
  --ns-stale: #A8ABB1;

  /* model brands (cards, chart lines, marks) */
  --m-claude: #D97757;
  --m-gpt: #FFFFFF;
  --m-grok: #C4C8CF;
  --m-gemini: #8AB4F8;
  --m-gemini-grad: linear-gradient(120deg, #4285F4 0%, #9B72CB 50%, #D96570 100%);
  --m-deepseek: #4D6BFE;
  --m-qwen: #8B6CFF;
  --m-dummy: #8A8C92;

  /* the night, section by section (landing backgrounds) */
  --t-1600: radial-gradient(120% 80% at 70% 120%, #3A3E46 0%, #16181C 45%, #000 80%);
  --t-1800: linear-gradient(180deg, #000 0%, #121418 100%);
  --t-2100: linear-gradient(180deg, #121418 0%, #0A0B0E 100%);
  --t-0000: #000000;
  --t-0200: radial-gradient(80% 60% at 20% 0%, #101218 0%, #000 70%);
  --t-0400: linear-gradient(180deg, #000 0%, #0D1016 100%);
  --t-0600: linear-gradient(180deg, #0D1016 0%, #222731 100%);
  --t-0700: radial-gradient(60% 55% at 75% 50%, rgba(255,255,255,.06), transparent 70%), #222731;
  --t-0800: linear-gradient(180deg, #222731 0%, #626974 100%);
  --t-0900: linear-gradient(180deg, #626974 0%, #9AA0A8 14%, #F2F2F0 100%);   /* [audit DES-13] one dusk-to-day run: starts where 0800 ends, ends at 0930 */
  --t-0930: #F2F2F0;

  /* type: Geist only */
  --ns-serif: 'Geist', 'Geist Fallback', 'Helvetica Neue', system-ui, sans-serif; /* legacy alias */
  --ns-sans: 'Geist', 'Geist Fallback', 'Helvetica Neue', system-ui, sans-serif;
  --ns-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  --ns-display: clamp(44px, 5.8vw, 84px);   /* [integration] 84 max, so the hero question holds one line beside the monitor */
  --ns-h2: clamp(32px, 3.4vw, 52px);   /* [audit DES-03] the hero H1 stays the largest type at every width */
  --ns-h3: clamp(20px, 1.8vw, 24px);
  --ns-body: 17px;
  --ns-small: 13px;

  /* shape */
  --ns-r-card: 20px;
  --ns-r-tile: 14px;
  --ns-r-sm: 10px;
  --ns-r-pill: 999px;

  /* space */
  --ns-gutter: clamp(20px, 4vw, 56px);
  --ns-section: clamp(88px, 11vw, 160px);
  --ns-maxw: 1320px;   /* [integration] one grid for nav, hero and every section */
}

html, body { margin: 0; background: var(--ns-bg); color: var(--ns-text); font-family: var(--ns-sans); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .8; }
button { font-family: inherit; }
::selection { background: #fff; color: #000; }
/* [audit DES-15] one branded focus ring (ink on the light bands), one pressed state */
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
[data-screen-label="FAQ"] :focus-visible, [data-screen-label="Footer"] :focus-visible { outline-color: var(--ns-ink); }
/* [audit R2-DES-04] the press scale is for pill buttons only; rows, cards, FAQ questions and tabs darken instead */
:is(a, button)[style*="--ns-r-pill"]:active { transform: scale(.98); transition: transform .08s; }
:is(a, button):not([style*="--ns-r-pill"]):active { background-color: rgba(255,255,255,.04); }
[data-screen-label="FAQ"] button:active { background-color: rgba(0,0,0,.04); }
/* [audit MOB-12] a 44 px touch area around a small control, without changing how it looks */
.ns-hit { position: relative; }
.ns-hit::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.ns-card-link:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px; }   /* [audit FE-10] the model cards' own ring (they reset every style) */
/* [audit DES-32] no endless pulse when reduced motion is asked for */
@media (prefers-reduced-motion: reduce) { [style*="nsPulse"] { animation: none !important; } }

@keyframes nsPulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
@keyframes nsShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes nsSpin { to { transform: rotate(360deg); } }