/*
  KuberHunt — desktop landing, foundation layer.

  The page's organising idea is the RECORD: every recommendation on KuberHunt is
  published with a signed timestamp and cannot be edited afterwards. So the
  layout is built from ruled ledger rows rather than card grids, machine-set
  facts are typeset in mono, and the argument fold is drenched in the brand gold
  the way a stamp is.

  Palette and families are the app's own (lib/theme/presets/kuberhunt_dark.dart,
  assets/fonts) — this page is the same product, not a lookalike.
*/

/* ---- Families -------------------------------------------------------------
   Two roles, one contrast axis: a geometric grotesque for voice, a monospace
   for anything a machine wrote (timestamps, prices, ids, signatures). Mono is
   never decoration here; if it isn't machine-set, it isn't mono. */
@font-face {
  font-family: 'Google Sans Flex';
  src: url('/fonts/GoogleSansFlex-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('/fonts/GoogleSansFlex-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('/fonts/GoogleSansFlex-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Flex';
  src: url('/fonts/GoogleSansFlex-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* Brand — #FCD535 is the app's "Kuber Gold". Do not invent a second one. */
  --gold: #fcd535;
  --gold-lift: #ffe45c;
  --gold-deep: #e0b400;

  /* Ground. Darker than the app shell so the gold folds hit harder. */
  --ink: #08080b;
  --ink-raised: #0d0e12;
  --ink-inset: #121319;

  --text: #ffffff;
  --text-2: #bcc1c9; /* 11.5:1 on --ink */
  --text-3: #8d939c; /*  6.1:1 on --ink — the floor for small copy */

  --line: rgba(255, 255, 255, 0.11);
  --line-strong: rgba(255, 255, 255, 0.2);
  --line-gold: rgba(252, 213, 53, 0.28);

  --focus: #22e3ee;

  /* On the gold folds. Black ink on #FCD535 is 13.4:1. */
  --on-gold: #0a0a0c;
  --on-gold-2: rgba(10, 10, 12, 0.72);
  --on-gold-line: rgba(10, 10, 12, 0.22);

  --sell: #ff5a7c;
  --buy: #17ae79;

  /* Measure. The page is a desktop surface; the column is generous. */
  --col: 1240px;
  --gutter: clamp(32px, 4vw, 72px);

  /* Fluid rhythm — sections breathe differently on purpose. */
  --gap-fold: clamp(72px, 7vw, 108px);
  --gap-block: clamp(44px, 4.4vw, 72px);

  --radius: 14px;
  --radius-lg: 22px;

  /* Semantic stacking order. */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 200;

  /* Exponential ease-out. No bounce anywhere on this page. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---- Reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text-2);
  font-family: 'Google Sans Flex', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  /* Light type on dark ground reads lighter; it gets the extra leading. */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
summary::-webkit-details-marker { display: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--gold); color: var(--on-gold); }

.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;
}

/* ---- Layout primitives --------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: calc(var(--col) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.fold { padding-block: var(--gap-fold); }
.fold--tight { padding-block: var(--gap-block); }

/* Anchor targets clear the sticky header. */
[id] { scroll-margin-top: 96px; }

/* ---- Typography ---------------------------------------------------------- */
.display {
  /* Ceiling is set by the longest line the hero has to hold on one row
     ("without knowing") inside the hero's left column, not by ambition. */
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

.h2 {
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

.h3 {
  font-size: clamp(22px, 1.8vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.018em;
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

.lede {
  font-size: clamp(19px, 1.4vw, 21px);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 62ch;
  text-wrap: pretty;
}

.prose { max-width: 68ch; text-wrap: pretty; }
.fine { font-size: 15px; line-height: 1.6; color: var(--text-3); }
.gold { color: var(--gold); }

/* Machine-set facts: timestamps, prices, ids, signatures. */
.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.num { font-variant-numeric: tabular-nums; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    box-shadow 0.24s var(--ease),
    transform 0.24s var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.06s; }

.btn--gold {
  background: var(--gold);
  color: var(--on-gold);
}
.btn--gold:hover {
  background: var(--gold-lift);
  box-shadow: 0 14px 40px -12px rgba(252, 213, 53, 0.7);
}

.btn--line {
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn--line:hover { border-color: var(--gold); color: var(--gold); }

.btn--ink {
  background: var(--on-gold);
  color: var(--gold);
}
.btn--ink:hover { box-shadow: 0 14px 40px -14px rgba(10, 10, 12, 0.9); }

.btn--inkLine {
  border: 1px solid var(--on-gold-line);
  color: var(--on-gold);
}
.btn--inkLine:hover { border-color: var(--on-gold); background: rgba(10, 10, 12, 0.06); }

.btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }

/* A link that behaves like a destination, not a button. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--gold);
  padding-block: 6px;
}
.link::after {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.24s var(--ease);
}
.link:hover::after { width: 30px; }

/* ---- Ledger row: the page's main structural unit -------------------------
   Replaces the card grid. A label column, a value column, one hairline. */
.ledger { border-top: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: baseline;
  padding-block: clamp(22px, 2.2vw, 30px);
  border-bottom: 1px solid var(--line);
}

.row__key {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.row__val { color: var(--text-2); }

/* ---- Motion ---------------------------------------------------------------
   Content is visible by default. `.js-motion` is set synchronously in <head>
   only when JS runs and motion is allowed, so a headless render, a background
   tab, or a reduced-motion visitor always ships the finished page. */
.js-motion .lift {
  opacity: 0;
  transform: translateY(20px);
}
.js-motion .lift.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

/* The hero is exempt. It is on screen at load, so its "entrance" fires the
   instant the observer is created — there is nothing to enter FROM — and until
   deferred JS ran, the whole first screen (headline, lede, buttons and the shot
   the page is measured on) sat at opacity 0. That was close to a second of
   blank hero on a throttled phone, and it made the hero image's paint wait on a
   script rather than on its own bytes. Below the fold the effect is real and
   stays. */
.js-motion .hero .lift {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}