/* ==========================================================================
   Gradien × application-focused campaign theme (pa- prefix).
   Standalone by design. Reference DNA (altitude.so teardown, 2026-08-16):
   dark warm charcoal ground, the product surfaces ARE the marketing,
   sparse giant display type, mono machine voice, one signal-blue accent.
   Local fonts only: Satoshi display/body, IBM Plex Mono for provenance.
   ========================================================================== */

@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Satoshi'; src: url('assets/fonts/satoshi-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  /* Warm gray family only — no cool grays on this page */
  --bg: #161513; --panel: #1d1b18; --panel-2: #232019;
  --text: #f2f0ea; --muted: #a8a294; --dim: #6f6a5e;
  --line: rgba(232, 228, 214, 0.14); --line-soft: rgba(232, 228, 214, 0.07);
  --blue: #3D7BFF;            /* the single accent */

  --sans: 'Satoshi', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ease-out3: cubic-bezier(0.33, 1, 0.68, 1);
  --t-micro: 250ms; --t-move: 650ms;
  --gutter: clamp(20px, 4vw, 56px);
  --r-card: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-weight: 400; font-size: 16.5px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* faint grain so the dark ground isn't sterile flat */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: 0.05; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 { font-weight: 400; margin: 0; }
h1 { font-size: clamp(42px, 6.6vw, 96px); line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance; }
h2 { font-size: clamp(30px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.012em; text-wrap: balance; }
h3 { font-size: clamp(20px, 2.2vw, 30px); line-height: 1.05; letter-spacing: -0.008em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.mono--caps { text-transform: uppercase; letter-spacing: 0.09em; font-size: 11px; color: var(--muted); }

.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(61, 123, 255, 0.35); }

/* Reveal — additive; page complete without JS */
html.js .reveal,
html.js .reveal-group > * { opacity: 0; transform: translateY(22px); transition: opacity var(--t-move) var(--ease-out3), transform var(--t-move) var(--ease-out3); }
html.js .reveal.is-in,
html.js .reveal-group.is-in > * { opacity: 1; transform: none; }
html.js .reveal-group.is-in > :nth-child(2) { transition-delay: 90ms; }
html.js .reveal-group.is-in > :nth-child(3) { transition-delay: 180ms; }
html.js .reveal-group.is-in > :nth-child(4) { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal, html.js .reveal-group > * { opacity: 1; transform: none; transition: none; }
}