/* Hallmark · macrostructure: Marquee Hero (flood) · studied-DNA (tiny.com) — full stamp in tokens.css */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
p { margin: 0 0 var(--space-md); max-width: var(--measure); }

.wrap { padding-inline: var(--page-gutter); max-width: 76rem; margin-inline: auto; }

/* ---------- draft ribbon ---------- */
.draft-ribbon { display: none; }
body.is-draft .draft-ribbon {
  display: flex; gap: var(--space-md); align-items: baseline; flex-wrap: wrap;
  padding: var(--space-xs) var(--page-gutter);
  background: var(--color-chip-ink); color: var(--color-ink);
  font-size: var(--text-xs); letter-spacing: 0.04em;
  position: relative; z-index: 5;
}
.draft-ribbon strong { font-weight: 700; }

/* ---------- nav · N5 floating pill (tinted, Tiny-style contrast chip) ---------- */
.nav-pill {
  position: absolute; top: var(--space-lg); left: 50%; transform: translateX(-50%);
  z-index: 4;
  display: flex; align-items: center; gap: var(--space-xl);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-lg);
  border-radius: var(--radius-pill);
  background: oklch(30% 0.13 287 / 0.75);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: var(--shadow-pill);
  white-space: nowrap;
}
body.is-draft .nav-pill { top: calc(var(--space-lg) + 3.6rem); }
.wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg);
  letter-spacing: -0.01em; text-decoration: none; color: var(--color-ink);
}
.wordmark sup { font-size: 0.5em; font-weight: 600; }
.nav-pill .chip {
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  color: var(--color-ink); background: var(--color-chip-ink);
  padding: 0.6em 1.3em; border-radius: var(--radius-pill);
  transition: transform var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.nav-pill .chip:hover { background: oklch(14% 0.01 300); }
.nav-pill .chip:active { transform: translateY(1px); }

/* ---------- hero · centered statement + proof cloud ---------- */
.hero {
  position: relative;
  min-height: clamp(36rem, 92svh, 56rem);
  display: grid; place-items: center;
  padding: calc(var(--space-3xl) + 2rem) var(--page-gutter) var(--space-3xl);
  overflow: clip;
}
.hero-inner { position: relative; z-index: 2; text-align: center; max-width: 46rem; }
.hero h1 { font-size: var(--text-display); }
.hero .lede {
  color: var(--color-ink-muted);
  font-size: var(--text-lg);
  max-width: 42ch;
  margin: var(--space-xl) auto 0;
}

/* proof cloud — floating chips (DNA idea from tiny.com, content is ours) */
.cloud { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.orb {
  position: absolute;
  display: grid; place-items: center; text-align: center;
  border-radius: 50%;
  width: var(--orb, 7rem); height: var(--orb, 7rem);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-chip);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  color: var(--color-ink);
  animation:
    pop .55s var(--ease-out) var(--pop, 0s) both,
    drift var(--dur, 9s) ease-in-out var(--delay, 0s) infinite alternate;
}
.orb small { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: oklch(45% 0.02 290); }
.orb--img { overflow: clip; }
.orb--img img { width: 100%; height: 100%; object-fit: cover; }
.orb--paper { background: var(--color-paper); color: var(--color-paper-ink); line-height: 1.15; }
.tp-box { display: grid; justify-items: center; gap: 0.3rem; }
.tp-stars { width: 4.1rem; height: auto; display: block; }
.tp-box b { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1; }
.tp-box small { font-family: var(--font-body); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.02em; color: oklch(35% 0.01 300); }
.orb svg { width: 100%; height: 100%; display: block; }
.orb:not(.orb--img):not(.orb--paper) { overflow: clip; padding: 0; }
@keyframes pop { from { scale: 0.4; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes drift {
  from { translate: 0 -0.6rem; }
  to { translate: 0.35rem 0.9rem; }
}
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }

/* orb placement — desktop ring (>68rem) */
.o-mascot { top: 13%; left: 8%; }
.o-tp     { top: 9%;  right: 11%; }
.o-pack   { bottom: 20%; left: 9%; }
.o-fr     { top: 40%; left: 3%; }
.o-uk     { top: 36%; right: 4%; }
.o-de     { bottom: 16%; right: 9%; }
.o-ch     { bottom: 7%; left: 30%; }
.o-nl     { bottom: 9%; right: 28%; }
.o-at     { top: 12%; left: 34%; }

/* scroll cue */
.scroll-cue {
  position: absolute; bottom: var(--space-lg); left: 50%; transform: translateX(-50%);
  z-index: 2;
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-ink-faint); text-decoration: none;
  display: grid; justify-items: center; gap: 2px;
}
.scroll-cue span { animation: nudge 2.2s ease-in-out infinite; }
.scroll-cue:hover { color: var(--color-ink); }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue span { animation: none; } }

/* ---------- fact grid ---------- */
.facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: var(--rule-hairline);
  margin-block: var(--space-2xl) 0;
}
.facts > div {
  min-width: 0;
  padding: var(--space-xl) var(--space-lg);
  border-right: var(--rule-hairline);
  font-variant-numeric: tabular-nums;
}
.facts > div:nth-child(4n) { border-right: none; }
.facts > div:nth-child(-n+4) { border-bottom: var(--rule-hairline); }
.facts b {
  display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 2.2vw, 2.4rem); line-height: 1.05; letter-spacing: -0.02em;
  overflow-wrap: break-word; min-width: 0;
}
.facts span { color: var(--color-ink-muted); font-size: var(--text-sm); }
.facts a { color: inherit; }

/* ---------- section heads ---------- */
.head-hang { padding-block: var(--space-3xl) var(--space-xl); }
.head-hang h2 { font-size: var(--text-2xl); display: inline-block; }
.head-hang h2::after {
  content: ""; display: block; width: 2.5rem; height: 3px;
  background: var(--color-ink); margin-top: var(--space-sm);
}

/* ---------- brand story diptych ---------- */
.dip { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: start; }
.dip figure { margin: 0; }
.dip .media-stack { display: grid; gap: var(--space-xl); }
.dip .body-text { position: sticky; top: var(--space-xl); }
.dip figure img { border-radius: var(--radius-card); }
.dip figcaption { font-size: var(--text-xs); color: var(--color-ink-faint); margin-top: var(--space-xs); }
.crystals-tile .legend { margin: var(--space-sm) 0 var(--space-xs); }
.crystals-tile .note { display: block; }
.dip .body-text p:first-child { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.35; }
.note {
  font-size: var(--text-sm); color: var(--color-ink-muted);
  padding-top: var(--space-sm); border-top: var(--rule-hairline);
  max-width: var(--measure);
}
.legend { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-muted); }
.legend li { display: flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.legend i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--dot); flex: none; }

/* product pillars inside the brand story */
.pillars { display: grid; gap: var(--space-xl); margin-top: var(--space-xl); }
.pillars > div { border-top: 2px solid var(--color-ink); padding-top: var(--space-md); min-width: 0; }
.pillars h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 600; margin-bottom: var(--space-xs); }
.pillars p { font-size: var(--text-sm); color: var(--color-ink-muted); margin: 0 0 var(--space-sm); }
.crystals-tile { margin: var(--space-md) 0 var(--space-sm); }
.crystals-tile img { border-radius: var(--radius-card); }

/* ---------- ticker ---------- */
.ticker { border-block: var(--rule-hairline); padding-block: var(--space-md); overflow: clip; margin-top: var(--space-3xl); }
.ticker-track {
  display: flex; gap: var(--space-xl); width: max-content;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  color: var(--color-ink); white-space: nowrap;
  animation: ticker 36s linear infinite;
}
.ticker-track span::after { content: "·"; margin-left: var(--space-xl); color: var(--color-ink-faint); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- markets · tiles ---------- */
.market-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.market-card {
  display: block; text-decoration: none;
  background: var(--color-surface-2);
  border-radius: var(--radius-card);
  padding: var(--space-xl) var(--space-lg);
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out);
}
a.market-card:hover { transform: translateY(-2px); background: var(--color-paper); }
a.market-card:hover h3 { color: var(--color-paper-ink); }
a.market-card:hover .domain { color: var(--color-accent); }
a.market-card:hover .meta { color: oklch(45% 0.02 290); }
.market-card h3, .market-card .domain, .market-card .meta { transition: color var(--dur-short) var(--ease-out); }
a.market-card:active { transform: translateY(0); }
.market-card h3 { font-size: var(--text-xl); font-weight: 700; }
.market-card .domain { color: var(--color-ink-muted); font-size: var(--text-sm); font-weight: 600; display: inline-block; margin-top: var(--space-sm); }
a.market-card:hover .domain { text-decoration: underline; }
.market-card .meta { color: var(--color-ink-faint); font-size: var(--text-xs); display: block; margin-top: var(--space-2xs); }

/* ---------- operating system · deep band ---------- */
.os-band { margin-top: var(--space-3xl); padding-block: var(--space-md) var(--space-2xl); background: var(--color-surface-deep); }
.os-band .head-hang { padding-top: var(--space-2xl); }
.os-band + .wrap .head-hang { padding-top: var(--space-2xl); }
.os-lead { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); line-height: 1.4; max-width: 34ch; }
.os-proof { color: var(--color-ink-muted); max-width: var(--measure); }
.os-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-2xl); margin-top: var(--space-2xl); }
.os-grid > div { border-top: 2px solid var(--color-ink); padding-top: var(--space-md); min-width: 0; }
.os-grid h3 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 600; }
.os-grid p { font-size: var(--text-sm); color: var(--color-ink-muted); margin: var(--space-2xs) 0 0; }

/* ---------- timeline ---------- */
.steps { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.steps li {
  position: relative;
  padding: 0 0 var(--space-xl) calc(var(--space-xl) + 1rem);
  border-left: 2px solid var(--color-hairline);
  margin-left: 0.4rem;
}
.steps li:last-child { padding-bottom: var(--space-xs); }
.steps li::before {
  content: ""; position: absolute; left: -0.42rem; top: 0.45em;
  width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--color-ink);
}
.steps .stage {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  color: var(--color-ink-muted); letter-spacing: 0.02em;
  display: block; margin-bottom: var(--space-2xs);
  font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: var(--text-lg); font-weight: 600; font-family: var(--font-body); }

/* ---------- founder ---------- */
.founder-line { border-top: var(--rule-hairline); padding-top: var(--space-lg); margin-top: var(--space-xl); max-width: var(--measure); }
.founder-line b { font-weight: 600; }

/* ---------- contact · deep band, CTA close ---------- */
.contact-band { margin-top: var(--space-3xl); padding-block: var(--space-3xl); background: var(--color-surface-deep); }
.contact-band h2 { font-size: var(--text-3xl); max-width: 16ch; }
.contact-band .email {
  display: inline-block; margin-top: var(--space-xl);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl);
  color: var(--color-ink); text-decoration: none;
  border-bottom: 3px solid var(--color-hairline);
  transition: border-color var(--dur-short) var(--ease-out);
  overflow-wrap: anywhere;
}
.contact-band .email:hover { border-color: var(--color-ink); }
.contact-band .privacy-note { color: var(--color-ink-faint); font-size: var(--text-xs); margin-top: var(--space-lg); }
.contact-band .privacy-note a { color: inherit; }
.contact-band .press-link { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--color-hairline); }
.contact-band .press-link:hover { border-color: var(--color-ink); }

/* ---------- footer ---------- */
.foot-statement { padding: var(--space-2xl) var(--page-gutter) var(--space-xl); }
.foot-statement .statement {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-2xl); letter-spacing: -0.01em; line-height: 1.15;
  max-width: 20ch; margin: 0 0 var(--space-xl);
}
.foot-statement .meta {
  border-top: var(--rule-hairline); padding-top: var(--space-md);
  font-size: var(--text-xs); color: var(--color-ink-faint);
  display: flex; flex-wrap: wrap; gap: var(--space-lg);
}
.foot-statement .meta a { color: var(--color-ink-muted); }

/* ---------- scroll reveals ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise-in both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
    @keyframes rise-in {
      from { opacity: 0; transform: translateY(1.25rem); }
      to { opacity: 1; transform: translateY(0); }
    }
  }
}

/* ---------- annex pages (legal / privacy / press — stay light) ---------- */
body.annex { background: var(--color-paper); color: var(--color-paper-ink); }
body.annex .draft-ribbon { background: var(--color-chip-ink); color: var(--color-paper); }
.nav-edge { display: flex; justify-content: space-between; align-items: center; padding: var(--space-lg) var(--page-gutter); }
body.annex .wordmark { color: var(--color-accent); }
.nav-edge .link { color: var(--color-accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.doc { padding-block: var(--space-xl) var(--space-3xl); }
.doc h1 { font-size: var(--text-2xl); margin-bottom: var(--space-xl); font-weight: 700; }
.doc h2 { font-size: var(--text-lg); margin: var(--space-xl) 0 var(--space-sm); font-weight: 700; }
.doc p, .doc li { max-width: var(--measure); }
.doc .lang { color: oklch(45% 0.02 290); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.doc a.link { color: var(--color-accent); }
.foot-line { border-top: 1px solid oklch(86% 0.014 95); padding: var(--space-lg) var(--page-gutter); margin-top: var(--space-2xl); }
.foot-line p { max-width: none; margin: 0; font-size: var(--text-xs); color: oklch(45% 0.02 290); }
.foot-line a { color: oklch(45% 0.02 290); }

/* ---------- responsive ---------- */
@media (max-width: 68rem) {
  .o-fr, .o-uk, .o-at { display: none; }
  .o-mascot { top: 10%; left: 4%; }
  .o-tp { top: 8%; right: 5%; }
  .o-pack { bottom: 14%; left: 5%; }
  .o-de { bottom: 12%; right: 6%; }
  .o-ch { bottom: 4%; left: 38%; }
  .o-nl { display: none; }
}
@media (max-width: 60rem) {
  .hero { min-height: clamp(32rem, 88svh, 46rem); }
  .orb { font-size: var(--text-xs); }
  .dip { grid-template-columns: 1fr; gap: var(--space-xl); }
  .dip .media-stack { order: 1; }
  .dip .body-text { position: static; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div { border-right: none; border-bottom: var(--rule-hairline); }
  .facts > div:nth-child(odd) { border-right: var(--rule-hairline); }
  .facts > div:nth-last-child(-n+2) { border-bottom: none; }
  .facts b { font-size: clamp(1.4rem, 4.5vw, 2rem); }
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .os-grid { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .nav-pill { gap: var(--space-md); left: var(--page-gutter); right: var(--page-gutter); transform: none; justify-content: space-between; }
  .hero { min-height: clamp(34rem, 92svh, 46rem); padding-bottom: 11rem; }
  .orb { display: none; }
  .o-mascot, .o-tp { display: grid; top: auto; }
  .o-mascot { --orb: 5.25rem; bottom: 2.5%; left: 6%; }
  .o-tp { --orb: 4.75rem; bottom: 4%; right: 6%; }
  .scroll-cue { display: none; }
  .market-grid { grid-template-columns: 1fr; }
  .facts > div { padding: var(--space-lg) var(--space-md); }
  .facts b { font-size: var(--text-2xl); }
}