/* Homegrown AI — tokens from design-dna.json ("Test Lab Glossy"). Everything below uses tokens only. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&family=JetBrains+Mono:wght@500;700&family=Playfair+Display:ital,wght@1,700&display=swap");

:root {
  --ground: #f4f4fb;
  --glow: #e2e1ff;
  --card: #ffffff;
  --hair: #e6e6f5;
  --muted: #5d5e70;
  --ink-2: #494048;
  --ink: #151426;
  --blue: #3d55fa;
  --orange: #f7561d;
  --green: #1f9d61;

  --shadow-low: 0 2px 8px rgba(21, 20, 38, 0.06);
  --shadow-mid: 0 22px 48px rgba(61, 85, 250, 0.14), 0 3px 8px rgba(21, 20, 38, 0.06);
  --shadow-high: 0 40px 90px rgba(61, 85, 250, 0.22), 0 8px 20px rgba(21, 20, 38, 0.08);

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;

  --f-head: "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --f-accent: "Playfair Display", Georgia, serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --margin: clamp(16px, 4vw, 48px);
  --max: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ground);
  color: var(--ink);
  font: 400 18px/1.6 var(--f-body);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html { overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--blue); color: #fff; }

/* The lavender glow that sits behind the top of every page and drifts slowly. */
.glow {
  position: absolute;
  inset: 0 0 auto 0;
  height: 900px;
  background: radial-gradient(60% 70% at 50% 0%, var(--glow) 0%, rgba(244, 244, 251, 0) 70%);
  z-index: -1;
  animation: drift 40s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes drift { to { background-position: 40px 0; opacity: 0.8; } }

.wrap { width: min(var(--max), 100% - 2 * var(--margin)); margin-inline: auto; }
.prose { max-width: 680px; }

/* Navigation: mono wordmark left, a few links right, translucent bar once scrolled. */
.nav {
  position: sticky; top: 0; z-index: 50;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.nav.is-scrolled { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-low); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.mark { display: flex; align-items: center; gap: 10px; font: 700 15px/1 var(--f-mono); text-decoration: none; }
.mark i { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); }
.nav ul { display: flex; gap: clamp(14px, 3vw, 32px); list-style: none; font: 500 14px/1 var(--f-mono); }
.nav ul a { text-decoration: none; color: var(--ink-2); }
.nav ul a:hover { color: var(--blue); }

/* Type */
.display { font: 800 clamp(38px, 8.4vw, 128px)/0.95 var(--f-head); letter-spacing: -0.055em; }
.h1 { font: 800 clamp(40px, 6vw, 80px)/1 var(--f-head); letter-spacing: -0.04em; }
.h2 { font: 700 clamp(28px, 3.4vw, 44px)/1.08 var(--f-head); letter-spacing: -0.03em; }
.h3 { font: 700 22px/1.2 var(--f-head); letter-spacing: -0.015em; }
em { font-family: var(--f-accent); font-style: italic; font-weight: 700; color: var(--blue); letter-spacing: -0.02em; }
.lede { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.code { font: 700 13px/1 var(--f-mono); letter-spacing: 0.04em; color: var(--muted); }
.small { font-size: 15px; color: var(--ink-2); }

/* Buttons: pill, decided once. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 16px/1 var(--f-body); text-decoration: none;
  background: var(--ink); color: #fff;
  transition: transform 0.16s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-mid); }
.btn:active { transform: scale(0.97); }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: var(--shadow-low); }
.btn.buy { background: var(--orange); color: var(--ink); box-shadow: 0 12px 32px rgba(247, 86, 29, 0.32); }
.btn.buy:hover { box-shadow: 0 18px 44px rgba(247, 86, 29, 0.42); }

.card { background: var(--card); border-radius: var(--r-l); box-shadow: var(--shadow-mid); }

/* Readout: the reels' hook number as a card. */
.readout { padding: 26px 30px 24px; }
.readout .code { color: var(--muted); }
.readout b { display: block; margin: 8px 0 6px; font: 700 clamp(44px, 5vw, 72px)/0.95 var(--f-mono); letter-spacing: -0.06em; color: var(--orange); }

/* The verdict stamp. */
.stamp {
  display: inline-block; padding: 6px 22px 10px; border: 7px solid var(--orange); border-radius: 14px;
  font: 800 clamp(40px, 5vw, 64px)/1 var(--f-head); letter-spacing: -0.03em; color: var(--orange);
  transform: rotate(-6deg); background: rgba(255, 255, 255, 0.9);
}
.stamp.yes { border-color: var(--green); color: var(--green); }
.stamp.no { border-color: #d6332c; color: #d6332c; }

/* Entrance: parts of a section rise in, staggered. Content is visible without script. */
.js .rise { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .rise.in { opacity: 1; transform: none; }

.spark { position: absolute; color: var(--blue); opacity: 0.5; font-size: 28px; animation: breathe 3.6s ease-in-out infinite; pointer-events: none; }
@keyframes breathe { 50% { opacity: 0.15; transform: scale(0.8); } }

.foot { padding: 120px 0 40px; }
.foot .name { font: 800 clamp(52px, 12.5vw, 180px)/0.85 var(--f-head); letter-spacing: -0.06em; margin-bottom: 32px; }
.foot .row { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; font-size: 15px; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rise { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}