:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 8%;
  --border: 0 0% 88%;
  --input: 0 0% 82%;
  --ring: 0 75% 48%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 8%;
  --card-border: 0 0% 88%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 8%;
  --popover-border: 0 0% 88%;
  --primary: 0 75% 48%;
  --primary-foreground: 0 0% 100%;
  --secondary: 44 100% 50%;
  --secondary-foreground: 0 0% 8%;
  --muted: 0 0% 95%;
  --muted-foreground: 0 0% 42%;
  --accent: 0 0% 20%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 75% 48%;
  --destructive-foreground: 0 0% 100%;
  --app-font-sans: 'DM Sans', sans-serif;
  --app-font-mono: 'Space Grotesk', monospace;
  --radius: 0.2rem;
  --sidebar: 0 0% 8%;
  --sidebar-foreground: 0 0% 100%;
  --shadow-sm: 0 2px 8px hsl(0 0% 0% / .08);
  --shadow-lg: 0 12px 30px hsl(0 0% 0% / .12);
}

.dark {
  --background: 18 31% 11%;
  --foreground: 40 67% 96%;
  --border: 18 22% 24%;
  --input: 18 22% 28%;
  --card: 18 26% 15%;
  --card-foreground: 40 67% 96%;
  --popover: 18 26% 15%;
  --popover-foreground: 40 67% 96%;
  --primary: 12 78% 54%;
  --primary-foreground: 40 67% 98%;
  --muted: 18 20% 23%;
  --muted-foreground: 36 18% 70%;
}

@layer base {
  * { @apply border-border; }
  body { @apply font-sans antialiased bg-background text-foreground; }
  button, a, input, select { -webkit-tap-highlight-color: transparent; }
}

@keyframes reveal-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes float-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.reveal-up { animation: reveal-up .55s cubic-bezier(.2,.8,.2,1) both; }
.float-in { animation: float-in .5s cubic-bezier(.2,.8,.2,1) both; }
.delay-1 { animation-delay: .06s; } .delay-2 { animation-delay: .12s; } .delay-3 { animation-delay: .18s; } .delay-4 { animation-delay: .24s; }
.marquee-track { animation: marquee 28s linear infinite; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }
.noise::after { display: none; }
.font-display { font-family: var(--app-font-mono); }
.shell-max { max-width: 1320px; margin-inline: auto; padding-inline: 1.1rem; }
.soft-card { box-shadow: var(--shadow-sm); }
.hero-grid { background-image: linear-gradient(hsl(18 31% 16% / .06) 1px, transparent 1px), linear-gradient(90deg, hsl(18 31% 16% / .06) 1px, transparent 1px); background-size: 24px 24px; }
@media (min-width: 768px) { .shell-max { padding-inline: 2rem; } }