:root {
  --background: 268 72% 5%;
  --foreground: 0 0% 98%;
  --primary: 315 100% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 188 100% 52%;
  --secondary-foreground: 260 100% 6%;
  --accent: 48 100% 58%;
  --accent-foreground: 260 100% 6%;
  --cyan: 178 100% 55%;
  --muted: 268 24% 20%;
  --muted-foreground: 270 22% 78%;
  --destructive: 0 86% 58%;
  --border: 286 34% 28%;
  --card: 268 44% 12%;
  --shadow-sm: 0 8px 24px hsl(315 100% 58% / 0.18);
  --shadow-md: 0 18px 48px hsl(188 100% 52% / 0.22), 0 10px 30px hsl(315 100% 58% / 0.18);
  --shadow-lg: 0 28px 80px hsl(315 100% 58% / 0.3), 0 18px 60px hsl(188 100% 52% / 0.2);
  --transition-fast: 160ms ease;
  --transition-smooth: 420ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.85rem;
  --radius-md: 1.25rem;
  --radius-lg: 1.75rem;
}

.dark {
  --background: 268 72% 5%;
  --foreground: 0 0% 98%;
  --card: 268 44% 12%;
  --border: 286 34% 28%;
  --muted: 268 24% 20%;
  --muted-foreground: 270 22% 78%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, a { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-size: max(16px, 1rem); }

.neon-bg {
  background:
    radial-gradient(circle at 18% 12%, hsl(var(--primary) / 0.34), transparent 28%),
    radial-gradient(circle at 85% 18%, hsl(var(--secondary) / 0.26), transparent 30%),
    radial-gradient(circle at 45% 88%, hsl(var(--accent) / 0.16), transparent 34%),
    linear-gradient(135deg, hsl(268 72% 5%), hsl(282 80% 8%) 48%, hsl(250 72% 6%));
}
.grain { opacity: .14; background-image: linear-gradient(115deg, transparent 0 48%, hsl(var(--foreground) / .08) 49% 50%, transparent 51% 100%); background-size: 18px 18px; }
.glass-panel { border: 1px solid hsl(var(--border) / .65); background: linear-gradient(145deg, hsl(var(--card) / .78), hsl(var(--card) / .38)); box-shadow: var(--shadow-md); backdrop-filter: blur(22px); }
.gradient-text { background: linear-gradient(90deg, hsl(var(--cyan)), hsl(var(--primary)), hsl(var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glitch { position: relative; display: inline-block; animation: glitchShift 2.8s infinite; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: .6; pointer-events: none; }
.glitch::before { color: hsl(var(--secondary)); transform: translate(2px,-1px); clip-path: inset(0 0 58% 0); }
.glitch::after { color: hsl(var(--primary)); transform: translate(-2px,1px); clip-path: inset(52% 0 0 0); }
@keyframes glitchShift { 0%, 88%, 100% { transform: translate(0); } 90% { transform: translate(2px,-1px); } 92% { transform: translate(-2px,1px); } 94% { transform: translate(1px,2px); } }
.typing { overflow: hidden; white-space: nowrap; border-right: 2px solid hsl(var(--cyan)); animation: typing 3.2s steps(28) infinite alternate, caret .7s infinite; }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes caret { 50% { border-color: transparent; } }
.rainbow-btn { position: relative; overflow: hidden; background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--accent)), hsl(var(--primary))); background-size: 260% 100%; box-shadow: var(--shadow-md); animation: rainbow 4s linear infinite; }
@keyframes rainbow { to { background-position: 260% 0; } }
.pulse-cta { animation: pulseGlow 1.9s ease-in-out infinite; }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 hsl(var(--primary) / .42), var(--shadow-sm); } 50% { box-shadow: 0 0 0 10px hsl(var(--primary) / 0), var(--shadow-md); } }
.sticker { border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--card) / .65); padding: .55rem .75rem; animation: floaty 4s ease-in-out infinite; }
.sticker:nth-child(2) { animation-delay: .4s; } .sticker:nth-child(3) { animation-delay: .8s; } .sticker:nth-child(4) { animation-delay: 1.2s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hero-phone { animation: phoneFloat 5s ease-in-out infinite; }
@keyframes phoneFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.lens-flare { position: absolute; right: 18px; top: 28px; width: 110px; height: 110px; border-radius: 999px; background: radial-gradient(circle, hsl(var(--accent) / .65), hsl(var(--primary) / .25) 35%, transparent 68%); filter: blur(4px); mix-blend-mode: screen; animation: flare 3s ease-in-out infinite; }
@keyframes flare { 50% { transform: scale(1.15); opacity: .65; } }
.app-card { transition: transform var(--transition-smooth), border-color var(--transition-fast), box-shadow var(--transition-smooth); }
.app-card:active, .magnetic:active { transform: scale(.98); }
@media (hover:hover) and (pointer:fine) { .magnetic:hover { transform: translateY(-5px) scale(1.015); } .app-card:hover { border-color: hsl(var(--secondary) / .75); box-shadow: var(--shadow-lg); } }
.glossy-icon { position: relative; overflow: hidden; }
.glossy-icon::after { content: ''; position: absolute; inset: 8px 10px auto 10px; height: 24px; border-radius: 999px; background: linear-gradient(180deg, rgb(255 255 255 / .55), transparent); }
.gallery-tile { background: linear-gradient(145deg, hsl(var(--primary) / .92), hsl(var(--secondary) / .72) 52%, hsl(var(--accent) / .84)); color: white; box-shadow: var(--shadow-md); overflow: hidden; position: relative; }
.gallery-tile::after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 999px; right: -40px; top: -40px; background: rgb(255 255 255 / .18); }
.creator-banner { background: linear-gradient(100deg, hsl(var(--primary)), hsl(var(--secondary)), hsl(var(--accent))); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.reveal-in { opacity: 1; transform: translateY(0); }