/* ============================================================
   RIPPLE — Design System Tokens
   Single source of truth. Sections MUST use these variables.
   ============================================================ */

:root {
  /* ---------- Color: raw ramps ---------- */
  --ink-950: #07070c;
  --ink-900: #0d0d16;
  --ink-800: #16162a;
  --ink-700: #23233d;
  --ink-600: #383857;
  --ink-500: #56567a;
  --ink-400: #7c7c9d;
  --ink-300: #a8a8c2;
  --ink-200: #cdcddd;
  --ink-100: #e6e6ef;
  --ink-050: #f3f3f8;

  --sand-050: #fdfcfa;
  --sand-100: #f8f6f1;
  --sand-200: #efece3;

  --violet-700: #3a25d8;
  --violet-600: #4c34ff;
  --violet-500: #6250ff;
  --violet-400: #8578ff;
  --violet-300: #aca3ff;
  --violet-100: #e6e3ff;
  --violet-050: #f2f0ff;

  --coral-600: #f43f5e;
  --coral-500: #ff5c74;
  --coral-400: #ff8296;
  --coral-100: #ffe4e9;

  --mint-500: #10b981;
  --mint-100: #d3f5e7;

  --amber-500: #f5a524;
  --amber-100: #fdefd4;

  /* ---------- Color: semantic ---------- */
  --bg: var(--sand-050);
  --bg-alt: var(--sand-100);
  --bg-deep: var(--ink-950);
  --surface: #ffffff;
  --surface-2: var(--ink-050);
  --border: rgba(13, 13, 22, 0.09);
  --border-strong: rgba(13, 13, 22, 0.16);
  --border-on-dark: rgba(255, 255, 255, 0.12);

  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-subtle: var(--ink-400);
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.62);

  --accent: var(--violet-600);
  --accent-hover: var(--violet-700);
  --accent-soft: var(--violet-050);
  --accent-contrast: #ffffff;
  --accent-2: var(--coral-500);

  /* ---------- Brand gradients ---------- */
  --grad-brand: linear-gradient(103deg, #4c34ff 0%, #7b5cff 42%, #ff5c74 100%);
  --grad-brand-soft: linear-gradient(103deg, #f2f0ff 0%, #fff1f4 100%);
  --grad-ink: linear-gradient(180deg, #16162a 0%, #07070c 100%);
  --grad-sheen: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);

  /* ---------- Typography ---------- */
  --font-sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Fluid type scale — clamp(min, fluid, max) */
  --fs-display: clamp(2.9rem, 1.35rem + 6.2vw, 6.25rem);
  --fs-h1: clamp(2.4rem, 1.5rem + 3.6vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --fs-h3: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight: 1.02;
  --lh-snug: 1.14;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-display: -0.035em;
  --tracking-tight: -0.022em;
  --tracking-normal: -0.011em;
  --tracking-eyebrow: 0.13em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---------- Space (4px base) ---------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-14: 3.5rem;  --s-16: 4rem;    --s-20: 5rem;
  --s-24: 6rem;    --s-32: 8rem;    --s-40: 10rem;

  --section-y: clamp(4.5rem, 3rem + 6.5vw, 9rem);
  --gutter: clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem);
  --maxw: 1200px;
  --maxw-wide: 1360px;
  --maxw-prose: 46ch;

  /* ---------- Radius ---------- */
  --r-xs: 6px;  --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --sh-xs: 0 1px 2px rgba(13,13,22,.06);
  --sh-sm: 0 1px 2px rgba(13,13,22,.05), 0 2px 6px rgba(13,13,22,.05);
  --sh-md: 0 2px 4px rgba(13,13,22,.04), 0 8px 20px -6px rgba(13,13,22,.10);
  --sh-lg: 0 4px 8px rgba(13,13,22,.04), 0 20px 44px -12px rgba(13,13,22,.16);
  --sh-xl: 0 8px 16px rgba(13,13,22,.05), 0 40px 80px -20px rgba(13,13,22,.22);
  --sh-accent: 0 8px 24px -6px rgba(76,52,255,.42);
  --sh-inset-hair: inset 0 1px 0 rgba(255,255,255,.7);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 480ms;
  --dur-slower: 820ms;

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--violet-600);

  --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-overlay: 300; --z-modal: 400;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tracking-normal);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:where(h1,h2,h3,h4) { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--violet-600); color: #fff; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }

/* ============================================================
   Layout primitives
   ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--maxw-wide); }
.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--bg-deep); color: var(--text-on-dark); }

.stack > * + * { margin-top: var(--flow, var(--s-4)); }

.skip-link {
  position: absolute; left: var(--s-4); top: var(--s-4);
  transform: translateY(-200%);
  background: var(--ink-900); color: #fff;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-sm);
  z-index: var(--z-modal); font-weight: var(--fw-semibold);
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   Shared components
   ============================================================ */

/* Eyebrow label */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px; background: currentColor; opacity: .5;
}
.section--dark .eyebrow { color: var(--violet-300); }

/* Section heading block */
.section-head { max-width: 720px; margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); margin-top: var(--s-4); }
.section-head p { font-size: var(--fs-lead); color: var(--text-muted); margin-top: var(--s-5); }
.section--dark .section-head p { color: var(--text-on-dark-muted); }

/* Buttons */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-contrast);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0.9375rem var(--s-6);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: -0.005em; line-height: 1;
  border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  white-space: nowrap;
  isolation: isolate; overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.btn--primary { box-shadow: var(--sh-accent); }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-sheen); transform: translateX(-120%);
  transition: transform var(--dur-slower) var(--ease-out);
  opacity: .5;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary:hover { background: var(--accent-hover); box-shadow: 0 12px 30px -6px rgba(76,52,255,.5); }
.btn--primary:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.985); }

.btn--secondary {
  --btn-bg: var(--surface); --btn-fg: var(--text);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--sh-sm);
}
.btn--secondary:hover { box-shadow: inset 0 0 0 1px var(--ink-900), var(--sh-md); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); }
.btn--ghost:hover { background: var(--surface-2); }

.btn--on-dark { --btn-bg: #fff; --btn-fg: var(--ink-900); box-shadow: 0 8px 30px -8px rgba(0,0,0,.6); }
.btn--on-dark-ghost {
  --btn-bg: transparent; --btn-fg: #fff;
  box-shadow: inset 0 0 0 1px var(--border-on-dark);
}
.btn--on-dark-ghost:hover { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }

.btn--lg { padding: 1.125rem var(--s-8); font-size: var(--fs-body); }
.btn--sm { padding: 0.625rem var(--s-4); font-size: var(--fs-xs); }

/* Pills / chips */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: var(--accent-soft); color: var(--accent);
}

/* Card */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--border), var(--sh-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px var(--border-strong), var(--sh-lg);
}

/* Emphasised inline word — solid accent, underlaid with a soft brand wash */
.mark {
  position: relative;
  color: var(--accent);
  white-space: nowrap;
}
.mark::after {
  content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .04em;
  height: .30em; border-radius: var(--r-xs);
  background: var(--grad-brand); opacity: .16; z-index: -1;
}
/* On the dark sections the wash reads as a bright slab — invert it to a thin
   underline that sits on the baseline instead of behind the letterforms. */
.section--dark .mark { color: var(--violet-300); }
.section--dark .mark::after {
  left: 0; right: 0; bottom: -.06em;
  height: .07em; border-radius: var(--r-pill);
  opacity: .85;
}

/* Hairline divider */
.rule { height: 1px; background: var(--border); border: 0; }

/* ============================================================
   Scroll reveal (progressive enhancement — js adds .is-in)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal], html:not(.js) [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* Noise / grain overlay utility */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}