:root{
  --radius:.875rem;
  --background:#050505;--foreground:#FFFFFF;--ink:#000000;--surface:#0F0F0F;
  --card:#0F0F0F;--card-foreground:#FFFFFF;--popover:#0F0F0F;--popover-foreground:#FFFFFF;
  --primary:#A855F7;--primary-foreground:#FFFFFF;
  --secondary:#121212;--secondary-foreground:#FFFFFF;
  --muted:#121212;--muted-foreground:#9A9A9A;
  --accent:#A855F7;--accent-foreground:#FFFFFF;
  --gold:#A855F7;--gold-soft:#C084FC;
  --destructive:#dc2626;--destructive-foreground:#FFFFFF;
  --border:rgba(168,85,247,0.14);--input:rgba(168,85,247,0.14);--ring:#A855F7;
  --gradient-gold:linear-gradient(135deg,#C084FC 0%,#A855F7 50%,#7C3AED 100%);
  --gradient-gold-text:linear-gradient(135deg,#D8B4FE 0%,#A855F7 50%,#6D28D9 100%);
  --gradient-ink:linear-gradient(180deg,#0F0F0F 0%,#050505 100%);
  --gradient-radial-gold:radial-gradient(ellipse at top,rgba(168,85,247,0.18),transparent 60%);
  --shadow-gold:0 20px 60px -20px rgba(168,85,247,0.45);
  --shadow-gold-sm:0 8px 24px -10px rgba(168,85,247,0.35);
  --shadow-elegant:0 30px 80px -30px rgba(0,0,0,0.9);
}
*{border-color:var(--border)}
html{scroll-behavior:smooth}
body{
  background-color:var(--background);color:var(--foreground);
  font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 60% 50% at 50% -10%,rgba(168,85,247,0.12),transparent 60%),
    radial-gradient(ellipse 40% 30% at 90% 10%,rgba(168,85,247,0.06),transparent 60%);
  background-attachment:fixed;
}
h1,h2,h3,h4,.font-display{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-0.03em;font-weight:700}
.font-serif{font-family:'Instrument Serif',serif;letter-spacing:-0.02em}

.bg-background{background-color:var(--background)}
.text-foreground{color:var(--foreground)}
.bg-card{background-color:var(--card)}
.bg-surface{background-color:var(--surface)}
.bg-ink{background-color:var(--ink)}
.bg-primary{background-color:var(--primary)}
.text-primary-foreground{color:var(--primary-foreground)}
.text-gold{color:var(--gold)}
.border-gold{border-color:var(--gold)}
.border-border{border-color:var(--border)}

.bg-gradient-gold{background-image:var(--gradient-gold)}
.bg-gradient-ink{background-image:var(--gradient-ink)}
.bg-radial-gold{background-image:var(--gradient-radial-gold)}
.shadow-gold{box-shadow:var(--shadow-gold)}
.shadow-gold-sm{box-shadow:var(--shadow-gold-sm)}
.shadow-elegant{box-shadow:var(--shadow-elegant)}

.text-gradient-gold{background-image:var(--gradient-gold-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.gold-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(168,85,247,0.5),transparent)}
.glass-card{background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border:1px solid rgba(168,85,247,0.14);backdrop-filter:blur(12px)}
.glass-card-hover{transition:all .4s cubic-bezier(.16,1,.3,1)}
.glass-card-hover:hover{border-color:rgba(168,85,247,0.4);transform:translateY(-4px);box-shadow:0 30px 60px -20px rgba(168,85,247,0.2)}
.gold-ring{box-shadow:inset 0 0 0 1px rgba(168,85,247,0.25),0 0 0 1px rgba(168,85,247,0.05)}

@keyframes float-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.animate-float-up{animation:float-up .9s cubic-bezier(.16,1,.3,1) both}
@keyframes pulse-gold{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}50%{box-shadow:0 0 0 10px rgba(34,197,94,0)}}
.animate-pulse-gold{animation:pulse-gold 2s ease-out infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.animate-marquee{animation:marquee 30s linear infinite}

/* color alpha helpers used in classes like bg-gold/10, text-foreground/75 — Tailwind v3 Play CDN handles arbitrary opacity via /xx only if color is a Tailwind palette color. We register custom colors below via tailwind.config script. */