:root {
  --bg: #060609;
  --bg-2: #0b0b10;
  --panel: #111118;
  --panel-2: #17171f;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --ink: #f3eee7;
  --ink-2: #c9c3bb;
  --muted: #8a8690;
  --accent: #ff3b5c;
  --accent-2: #ff7a59;
  --accent-soft: rgba(255, 59, 92, 0.12);
  --gold: #d8b46a;
  --gold-soft: rgba(216, 180, 106, 0.12);
  --cyan: #52d6c8;
  --cyan-soft: rgba(82, 214, 200, 0.12);
  --violet: #9a7bff;
  --green: #5fd38a;
  --radius: 14px;
  --radius-lg: 22px;
  --display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --font: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: #fff; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0; }
[data-lucide] { width: 18px; height: 18px; stroke-width: 1.6; }

.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }

/* film grain over everything */
.grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-5%, 3%); } 40% { transform: translate(3%, -6%); }
  60% { transform: translate(-7%, 2%); } 80% { transform: translate(4%, 5%); } 100% { transform: translate(0, 0); }
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04);
  color: var(--ink); font: 500 14px/1 var(--font); letter-spacing: .01em; cursor: pointer; white-space: nowrap;
  backdrop-filter: blur(10px); transition: transform .35s var(--ease), background .3s, border-color .3s, box-shadow .3s;
}
.btn:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .3); }
.btn.primary {
  border: 0; color: #fff;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 40px -10px rgba(255, 59, 92, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn.primary:hover { box-shadow: 0 16px 50px -10px rgba(255, 59, 92, .9), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn.sm { height: 38px; padding: 0 16px; font-size: 13px; }
.btn.lg { height: 54px; padding: 0 28px; font-size: 15px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .03);
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }

.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.mono { font-family: var(--mono); }
.serif { font-family: var(--display); font-style: italic; font-weight: 400; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; } .reveal.d3 { transition-delay: .3s; } .reveal.d4 { transition-delay: .4s; }

/* custom cursor (desktop only) */
.cursor, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 100; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor { width: 6px; height: 6px; background: var(--accent); }
.cursor-ring { width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, .35); transition: width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s; }
.cursor-ring.hover { width: 74px; height: 74px; background: rgba(255, 59, 92, .12); border-color: var(--accent); }
.cursor-ring.play::after { content: 'PLAY'; position: absolute; inset: 0; display: grid; place-items: center; font: 600 10px var(--mono); letter-spacing: .2em; color: #fff; }
@media (hover: none), (max-width: 900px) { .cursor, .cursor-ring { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}