/* ─────────────────────────────────────────────────────────────
   Laika Ventures — Design tokens
   Foundational color, type and spacing variables.
   Import this at the root of every HTML artifact.
   ───────────────────────────────────────────────────────────── */

/* ── Fonts ──────────────────────────────────────────────────── */
/* Saans TRIAL — primary brand family (user-uploaded).
   Note: no Light (300) weight in Saans TRIAL; display headlines
   use Regular (400) with tighter tracking instead.
   Geist Mono is still loaded for numeric/mono needs — Saans has
   no monospaced sibling. */
@font-face {
  font-family: "Saans TRIAL";
  src: url("fonts/SaansTRIAL-Regular.woff2") format("woff2"),
       url("fonts/SaansTRIAL-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saans TRIAL";
  src: url("fonts/SaansTRIAL-RegularItalic.woff2") format("woff2"),
       url("fonts/SaansTRIAL-RegularItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Saans TRIAL";
  src: url("fonts/SaansTRIAL-Medium.woff2") format("woff2"),
       url("fonts/SaansTRIAL-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saans TRIAL";
  src: url("fonts/SaansTRIAL-MediumItalic.woff2") format("woff2"),
       url("fonts/SaansTRIAL-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Saans TRIAL";
  src: url("fonts/SaansTRIAL-Bold.woff2") format("woff2"),
       url("fonts/SaansTRIAL-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Saans TRIAL";
  src: url("fonts/SaansTRIAL-BoldItalic.woff2") format("woff2"),
       url("fonts/SaansTRIAL-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
/* Variable sibling — available for fine weight control if needed */
@font-face {
  font-family: "Saans TRIAL VF";
  src: url("fonts/SaansTRIALVF.woff2") format("woff2-variations"),
       url("fonts/SaansTRIALVF.woff") format("woff-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Geist Mono — monospaced sibling (no Saans Mono exists) */
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ── Core palette ───────────────────────────────────────────
     Anchored on the Figma's deep blue-black (#010214) and
     pulled into a cool-grey monochrome scale. Single accent. */

  /* ── Brand core (Figma "Brand Colors") ──
     Shade Black and White Star are the surface anchors.
     Galaxy and Milky Way are the two signature gradients. */
  --shade-black: #020214;   /* Signature near-black (Figma: Shade Black) */
  --white-star:  #FFFFFF;   /* Pure white (Figma: White Star) */

  /* Galaxy — purple gradient, deep-space energy */
  --galaxy-900: #4F16B8;    /* deep violet */
  --galaxy-500: #884AFA;    /* core purple */
  --galaxy-200: #FABDFB;    /* soft lilac highlight */

  /* Milky Way — blue gradient, infrastructure */
  --milkyway-900: #0003C7;  /* deep blue */
  --milkyway-500: #1454EB;  /* signature blue */
  --milkyway-200: #46E4F6;  /* cyan highlight */

  /* Ink — dark surface scale anchored on Shade Black (#020214). */
  --ink-1000: #020214;   /* page bg, primary surface — Shade Black */
  --ink-900:  #0A0B1E;   /* card bg on dark */
  --ink-800:  #161830;   /* elevated dark, hover dark */
  --ink-700:  #242648;   /* subtle divider on dark */
  --ink-600:  #33355F;   /* border on dark */

  /* Paper — pure white anchor (Figma: White Star), scale toward cool-grey. */
  --paper-0:   #FFFFFF;  /* White Star */
  --paper-50:  #FAFAFA;  /* page bg, primary light surface */
  --paper-100: #F2F2F3;  /* hover light, subtle panel */
  --paper-200: #E6E6E9;  /* border light */
  --paper-300: #D3D3D8;  /* stronger border */

  /* Grey — cool, for secondary text and dividers. */
  --grey-400: #B6B6BC;   /* muted text on dark */
  --grey-500: #86868D;   /* secondary text */
  --grey-600: #5C5C63;   /* tertiary, captions */
  --grey-700: #38383E;   /* body text on light */

  /* Accent — Milky Way 500 is the primary CTA color.
     Galaxy 500 is reserved for brand moments (covers, hero washes). */
  --accent-500: #1454EB;   /* = milkyway-500 */
  --accent-600: #0F45C8;   /* hover */
  --accent-700: #0003C7;   /* pressed (= milkyway-900) */
  --accent-50:  #EEF2FE;   /* accent tint on light */
  --accent-950: #0A1940;   /* accent tint on dark */

  /* Semantic (used sparingly — status only) */
  --success: #1F7A4C;
  --warning: #B4791D;
  --danger:  #B83A2E;

  /* ── Semantic surfaces ──────────────────────────────────── */
  --bg:          var(--paper-50);
  --bg-elevated: var(--paper-0);
  --bg-subtle:   var(--paper-100);
  --border:      var(--paper-200);
  --border-strong: var(--paper-300);

  --fg:     var(--ink-1000);
  --fg-1:   var(--grey-700);   /* body */
  --fg-2:   var(--grey-600);   /* secondary */
  --fg-3:   var(--grey-500);   /* tertiary */
  --fg-invert: var(--paper-50);

  --accent: var(--accent-500);
  --accent-hover: var(--accent-600);
  --accent-fg: var(--paper-0);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:    "Saans TRIAL", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Saans TRIAL", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — Figma-derived (H1 70 / H2 48 / H3 32 / H4 24 / H6 20 / P 16 / S 14) */
  --fs-display:  80px;   /* hero, marketing only */
  --fs-h1:       70px;
  --fs-h2:       48px;
  --fs-h3:       32px;
  --fs-h4:       24px;
  --fs-h5:       20px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-mono:     13px;
  --fs-micro:    12px;

  --lh-tight:  1.00;    /* Figma default for headlines */
  --lh-snug:   1.15;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* Figma tracks headings at -0.02em universally */
  --tracking-display: -0.028em;
  --tracking-heading: -0.02em;
  --tracking-body:    -0.005em;
  --tracking-mono:    0;
  --tracking-caps:    0.06em;

  /* Weights — Saans TRIAL ships Regular 400 / Medium 500 / Bold 700.
     There is NO Light (300). Large display uses Regular with tighter tracking. */
  --fw-light:    400;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 700;
  --fw-bold:     700;

  /* ── Spacing (4px base) ─────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ── Radii ──────────────────────────────────────────────── */
  --r-0:   0px;
  --r-2:   2px;
  --r-4:   4px;
  --r-6:   6px;      /* default — inputs, cards */
  --r-10:  10px;     /* larger cards (from Figma) */
  --r-30:  30px;     /* hero/feature cards (from Figma) */
  --r-pill: 999px;

  /* ── Borders ────────────────────────────────────────────── */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ── Shadows — extremely restrained. Infrastructure, not consumer. */
  /* Figma uses shadows decoratively in V3 (rejected). These are functional only. */
  --shadow-sm: 0 1px 0 rgba(1, 2, 20, 0.04);
  --shadow-md: 0 1px 2px rgba(1, 2, 20, 0.06), 0 0 0 1px rgba(1, 2, 20, 0.04);
  --shadow-lg: 0 8px 24px rgba(1, 2, 20, 0.08), 0 0 0 1px rgba(1, 2, 20, 0.05);
  --shadow-focus: 0 0 0 3px rgba(20, 84, 235, 0.24);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
}

/* ── Dark mode — first-class ────────────────────────────────── */
[data-theme="dark"], .theme-dark {
  --bg:          var(--ink-1000);
  --bg-elevated: var(--ink-900);
  --bg-subtle:   var(--ink-800);
  --border:      var(--ink-700);
  --border-strong: var(--ink-600);

  --fg:     var(--paper-50);
  --fg-1:   #E3E3E1;
  --fg-2:   var(--grey-400);
  --fg-3:   var(--grey-500);
  --fg-invert: var(--ink-1000);

  --accent: #3B72F0;
  --accent-hover: #5A8AF5;
  --accent-fg: var(--paper-0);

  --shadow-sm: 0 0 0 1px rgba(255,255,255,0.04);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-focus: 0 0 0 3px rgba(59, 114, 240, 0.32);
}

/* ── Base element styles ────────────────────────────────────── */
html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-body);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv01", "cv11";  /* Geist stylistic sets */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-regular); }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-regular); }
h5, .h5 { font-size: var(--fs-h5); font-weight: var(--fw-regular); }

.display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-regular); letter-spacing: var(--tracking-display); line-height: var(--lh-tight); }

p, .p { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-1); margin: 0; text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 17px; color: var(--fg-2); }
.caption { font-size: var(--fs-micro); line-height: 1.4; color: var(--fg-3); }

/* Eyebrow: ALL CAPS, mono, used above headlines — pulled from infra-software conventions */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Mono / data / numeric — tabular figures always (per brief). */
code, kbd, pre, .mono, .num, [data-mono], td.num, th.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--tracking-mono);
}
.num, .mono-sm { font-size: var(--fs-mono); }
.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Links — underline on hover, accent for emphasis */
a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
a.accent { color: var(--accent); }
a.accent:hover { color: var(--accent-hover); }

/* Focus — a single, quiet ring */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-4);
}

hr, .rule { border: 0; border-top: 1px solid var(--border); margin: var(--s-8) 0; }

/* ---------- Site nav: on phones the links move into a full-screen "space" menu behind a burger ----------
   <details class="lv-menu"> inside the nav; nav.js closes it after a tap, on Escape or outside taps. */
.lv-menu { display: none; }
.lv-menu > summary { list-style: none; cursor: pointer; position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); }
.lv-menu > summary::-webkit-details-marker { display: none; }
.lv-burger { position: relative; width: 16px; height: 10px; }
.lv-burger i { position: absolute; left: 0; width: 16px; height: 1.5px; border-radius: 2px; background: var(--paper-50); transition: transform 0.35s cubic-bezier(.2,.8,.2,1), top 0.35s cubic-bezier(.2,.8,.2,1); }
.lv-burger i:first-child { top: 0; }
.lv-burger i:last-child { top: 8.5px; }
.lv-menu[open] .lv-burger i:first-child { top: 4.25px; transform: rotate(45deg); }
.lv-menu[open] .lv-burger i:last-child { top: 4.25px; transform: rotate(-45deg); }

.lv-menu-panel {
  position: fixed; inset: 0; z-index: -1; overflow: hidden auto;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: 104px 28px calc(36px + env(safe-area-inset-bottom)); box-sizing: border-box;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 34%, #FABDFB 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 46%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 52%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 64%, #46E4F6 50%, transparent 51%),
    radial-gradient(1px 1px at 46% 72%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 82%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(ellipse 80% 50% at 85% 0%, rgba(136,74,250,0.28), rgba(2,2,20,0) 70%),
    #020214;
  animation: lv-menu-in 0.35s cubic-bezier(.2,.8,.2,1) both;
}
/* The planet horizon from the "Take the leap" section, rising at the bottom of the menu */
.lv-menu-panel::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: calc(-170vw + 120px); width: 200vw; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(79,22,184,0.28) 0 66%, rgba(79,22,184,0.9) 69.8%, #FABDFB 70.3%, rgba(136,74,250,0.35) 70.8%, rgba(2,2,20,0) 72.5%);
  animation: lv-menu-rise 0.9s cubic-bezier(.2,.8,.2,1) both;
}
.lv-menu-links { display: flex; flex-direction: column; }
.lv-menu-links a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; color: var(--paper-50); animation: lv-menu-item 0.5s cubic-bezier(.2,.8,.2,1) both; }
.lv-menu-links a span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--galaxy-200); transform: translateY(-14px); }
.lv-menu-links a:hover { text-decoration: none; color: var(--galaxy-200); }
.lv-menu-links a:nth-child(2) { animation-delay: 40ms; } .lv-menu-links a:nth-child(3) { animation-delay: 80ms; } .lv-menu-links a:nth-child(4) { animation-delay: 120ms; }
.lv-menu-links a:nth-child(5) { animation-delay: 160ms; } .lv-menu-links a:nth-child(6) { animation-delay: 200ms; } .lv-menu-links a:nth-child(7) { animation-delay: 240ms; }
.lv-menu-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; animation: lv-menu-item 0.5s 0.28s cubic-bezier(.2,.8,.2,1) both; }
.lv-menu-cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: var(--accent-500); color: #fff; font-size: 16px; font-weight: 500; }
.lv-menu-cta:hover { text-decoration: none; background: var(--accent-600); }
.lv-menu-social { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--grey-400); }
@keyframes lv-menu-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lv-menu-item { from { opacity: 0; transform: translateY(18px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lv-menu-rise { from { transform: translate(-50%, 18%); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .lv-menu-panel, .lv-menu-panel::after, .lv-menu-links a, .lv-menu-foot { animation: none; }
}
@media (max-width: 760px) {
  /* No transform/backdrop on the nav, so the fixed menu covers the viewport rather than the nav box */
  .lv-nav { top: 12px !important; left: 12px !important; right: 12px !important; width: auto !important; transform: none !important; height: 56px !important; padding: 0 7px 0 18px !important; gap: 12px !important; }
  .lv-nav:has(.lv-menu[open]) { background: transparent !important; border-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html:has(.lv-menu[open]) { overflow: hidden; }
  .lv-nav img { height: 17px !important; }
  .lv-nav-links { gap: 8px !important; }
  .lv-nav-links > a:not(.lv-nav-cta) { display: none; }
  .lv-nav-cta { padding: 9px 14px !important; white-space: nowrap; font-size: 13px; }
  .lv-menu { display: block; }
}
@media (max-width: 380px) {
  .lv-nav { padding: 0 6px 0 14px !important; }
  .lv-nav img { height: 15px !important; }
  .lv-nav-cta { padding: 8px 11px !important; }
  .lv-menu-links a { font-size: 30px; }
}

/* ---------- Footer on phones: one column — links, then social and logos, then the wordmark ---------- */
@media (max-width: 760px) {
  .lv-footer > div { grid-template-columns: 1fr !important; gap: 44px !important; padding: 8px 20px 28px !important; }
  .lv-footer > div > div:first-child { display: contents !important; }
  .lv-footer > div > div:first-child > div:first-child { order: 1; grid-template-columns: 1fr 1fr !important; gap: 36px 20px !important; }
  .lv-footer > div > div:first-child > div:first-child > div:nth-child(3) { grid-column: 1 / -1; }
  .lv-footer > div > div:last-child { order: 2; }
  .lv-footer > div > div:last-child img { max-width: 300px !important; }
  .lv-footer > div > div:first-child > div:last-child { order: 3; font-size: 14.6vw !important; margin: 4px 0 0 !important; }
}