html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

::selection { background: #FF5500; color: #000; }

.font-display { font-family: "Anton", Impact, sans-serif; letter-spacing: 0.01em; }
.font-body { font-family: "Archivo", sans-serif; }
.font-mono { font-family: "JetBrains Mono", monospace; }

.bg-obsidian { background-color: #070709; }
.bg-card { background-color: #0F1015; }
.text-flame { color: #FF5500; }
.bg-flame { background-color: #FF5500; }
.text-gold { color: #FFC700; }

.text-outline { color: transparent; -webkit-text-stroke: 1.5px #fff; }
.text-outline-flame { color: transparent; -webkit-text-stroke: 1.5px #FF5500; }

.btn-flame, .btn-ghost, .btn-dark, .btn-dark-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.6rem; font-family: "JetBrains Mono", monospace; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .18em;
  transition: background-color .3s, color .3s, transform .3s, box-shadow .3s, border-color .3s;
}
.btn-flame { background: #FF5500; color: #000; font-weight: 700; }
.btn-flame:hover { transform: translateY(-2px); box-shadow: 0 12px 40px -10px rgba(255,85,0,.7); }
.btn-ghost { border: 1px solid rgba(255,255,255,.2); color: #fff; }
.btn-ghost:hover { border-color: #FF5500; color: #FF5500; transform: translateY(-2px); }
.btn-dark { background: #070709; color: #fff; font-weight: 700; padding: 1.2rem 2rem; }
.btn-dark:hover { transform: translateY(-3px); box-shadow: 0 14px 40px -12px rgba(0,0,0,.6); }
.btn-dark-outline { border: 1.5px solid #070709; color: #070709; font-weight: 700; padding: 1.2rem 2rem; }
.btn-dark-outline:hover { background: #070709; color: #FF5500; }

.nav-link { position: relative; transition: color .3s; }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%; background: #FF5500; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.hero-glow { background: radial-gradient(60% 50% at 75% 40%, rgba(255,85,0,.18), transparent 70%); }
.ghost-word { font-family: "Anton", sans-serif; font-size: 34vw; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.06); }
.hero-frame { clip-path: polygon(0 0, 100% 0, 100% 88%, 86% 100%, 0 100%); transform-style: preserve-3d; box-shadow: 0 40px 120px -30px rgba(255,85,0,.45); }
.spotlight { background: radial-gradient(70% 55% at 50% 35%, transparent 40%, rgba(7,7,9,.55) 100%); }
.product-clip { clip-path: polygon(0 0, 100% 0, 100% 92%, 90% 100%, 0 100%); }

.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.marquee-track { animation: marquee 60s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
