/* ============================================================
   IMPACT LINK · Design tokens
   Operated by Impact Automation.
   Surface inverts: near-black is the default for every product.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
  /* ---------- Color: surface & ink (DEFAULT — dark surface) ---------- */
  --bg:           #0A0A0A;   /* near-black, the default everywhere     */
  --bg-step:      #141418;   /* hover for cards/rows                   */
  --bg-step-2:    #1A1A20;   /* press for cards/rows                   */
  --fg:           #FFFFFF;   /* primary text                           */
  --fg-muted:     #8A8F99;   /* secondary text                         */
  --rule:         #1F2128;   /* hairline dividers                      */

  /* ---------- Color: accent (use sparingly) ---------- */
  --accent:        #4F86F7;  /* brand blue — emphasis only             */
  --accent-hover:  #3D6FE0;  /* one step darker                        */
  --accent-soft:   rgba(79, 134, 247, 0.08);

  /* ---------- Color: button (white on dark) ---------- */
  --btn-bg:        #FFFFFF;
  --btn-bg-hover:  #ECECE6;
  --btn-bg-press:  #DCDCD4;
  --btn-fg:        #0A0A0A;

  /* ---------- Typography ---------- */
  --font-sans:  'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --t-hero-num:    144px;
  --t-display-xl:  64px;
  --t-display-lg:  48px;
  --t-display-md:  36px;
  --t-title:       24px;
  --t-eyebrow:     12px;
  --t-body-lg:     18px;
  --t-body:        16px;
  --t-meta:        14px;
  --t-mono:        14px;

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-base:    1.5;
  --lh-loose:   1.6;

  --tr-display: -0.02em;
  --tr-body:    0;
  --tr-eyebrow: 0.12em;

  /* ---------- Spacing scale ---------- */
  --s-1:   4px;  --s-2:   8px;  --s-3:  12px;  --s-4:  16px;  --s-5:  24px;
  --s-6:  32px;  --s-7:  48px;  --s-8:  64px;  --s-9:  96px;  --s-10: 128px;

  /* ---------- Layout ---------- */
  --max-content: 1200px;
  --gutter:      24px;
  --margin-x:    80px;
  --slide-w:     1920px;
  --slide-h:     1080px;
  --slide-pad:   96px;

  /* ---------- Radii ---------- */
  --r-0: 0px;  --r-sm: 4px;  --r-md: 8px;  --r-full: 999px;

  /* ---------- Borders ---------- */
  --bd-hair:   1px solid var(--rule);
  --bd-strong: 1px solid var(--fg);
  --bd-accent: 1px solid var(--accent);

  /* ---------- Shadows — none. Elevation is borders. ---------- */
  --shadow-none: none;

  /* ---------- Motion ---------- */
  --ease:     cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;

  /* ---------- Focus ring ---------- */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* ============================================================
   Base styles
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  font-feature-settings: 'ss01', 'cv11';
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--t-display-lg); font-weight: var(--w-regular);
  line-height: var(--lh-tight); letter-spacing: var(--tr-display); margin: 0;
}
h1.display, .display-xl {
  font-size: var(--t-display-xl); font-weight: var(--w-regular);
  line-height: var(--lh-tight); letter-spacing: var(--tr-display);
}
h2, .h2 {
  font-size: var(--t-display-md); font-weight: var(--w-regular);
  line-height: var(--lh-snug); letter-spacing: var(--tr-display); margin: 0;
}
h3, .h3 {
  font-size: var(--t-title); font-weight: var(--w-medium);
  line-height: var(--lh-snug); margin: 0;
}

.eyebrow {
  font-size: var(--t-eyebrow); font-weight: var(--w-medium);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--fg-muted);
}

p, .body { font-size: var(--t-body); line-height: var(--lh-base); margin: 0; }
.body-lg { font-size: var(--t-body-lg); line-height: var(--lh-base); }
.muted, .meta { font-size: var(--t-meta); color: var(--fg-muted); line-height: var(--lh-base); }

.hero-num {
  font-size: var(--t-hero-num); font-weight: var(--w-regular);
  line-height: 1; letter-spacing: var(--tr-display);
  font-variant-numeric: tabular-nums; color: var(--fg);
}
.hero-num--accent { color: var(--accent); }
.hero-num__rule {
  display: block; width: 64px; height: 1px;
  background: var(--accent); margin-top: var(--s-4);
}

code, .mono { font-family: var(--font-mono); font-size: var(--t-mono); }
pre {
  background: var(--bg-step); border: var(--bd-hair); border-radius: var(--r-md);
  padding: var(--s-5); overflow-x: auto;
  font-size: var(--t-mono); line-height: var(--lh-base);
}

/* Links — typographic CTA */
a {
  color: var(--fg); text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%; background-repeat: no-repeat;
  background-size: 100% 1px;
  transition: background-size var(--dur-fast) var(--ease);
}
a:hover { background-size: 100% 2px; }
a.cta { color: var(--accent); }

hr { border: 0; border-top: var(--bd-hair); margin: var(--s-7) 0; }
hr.accent { border-top: 1px solid var(--accent); }

/* Buttons — white on near-black, 4px radius. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 44px; padding: 0 var(--s-5);
  font-family: inherit; font-size: var(--t-body); font-weight: var(--w-medium); line-height: 1;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bg); border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover  { background: var(--btn-bg-hover);  border-color: var(--btn-bg-hover); }
.btn:active { background: var(--btn-bg-press); border-color: var(--btn-bg-press); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn--ghost {
  background: transparent; color: var(--fg); border-color: var(--fg);
}
.btn--ghost:hover  { background: var(--bg-step); }
.btn--ghost:active { background: var(--bg-step-2); }

.input {
  height: 44px; padding: 0 var(--s-4); font: inherit;
  color: var(--fg); background: var(--bg);
  border: var(--bd-hair); border-radius: var(--r-sm); width: 100%;
  transition: border-color var(--dur-fast) var(--ease);
}
.input:hover { border-color: var(--fg-muted); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

.card {
  background: var(--bg); border: var(--bd-hair);
  border-radius: var(--r-md); padding: var(--s-6);
}
.card--hover { transition: background var(--dur-fast) var(--ease); }
.card--hover:hover  { background: var(--bg-step); }
.card--hover:active { background: var(--bg-step-2); }

.stat { display: flex; flex-direction: column; gap: var(--s-2); }
.stat__num {
  font-size: var(--t-display-xl); font-weight: var(--w-regular);
  line-height: 1; letter-spacing: var(--tr-display);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--t-meta); color: var(--fg-muted); }

.container {
  max-width: var(--max-content); margin: 0 auto; padding: 0 var(--margin-x);
}
@media (max-width: 900px) { .container { padding: 0 var(--s-5); } }

.regline { font-size: var(--t-meta); color: var(--fg-muted); letter-spacing: 0.01em; }