:root {
  --violet: #8b5cf6;
  --indigo: #6366f1;
  --blue: #3b82f6;
  --cyan: #22d3ee;
  --bg: #05050b;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(120% 80% at 80% -10%, rgba(124,58,237,0.22) 0%, transparent 55%),
    radial-gradient(100% 70% at 0% 10%, rgba(59,130,246,0.16) 0%, transparent 50%);
  background-attachment: fixed;
}
h1,h2,h3,.font-display { font-family: "Space Grotesk","Inter",sans-serif; letter-spacing: -0.025em; }

::selection { background: rgba(139,92,246,0.35); }

/* ---------- Backgrounds ---------- */
.grid-fade {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 20%, transparent 72%);
}
.orb { position: absolute; border-radius: 9999px; filter: blur(80px); pointer-events: none; }
.noise::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .25; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Text ---------- */
.text-gradient {
  background: linear-gradient(100deg,#c4b5fd 0%,#a78bfa 35%,#60a5fa 75%,#38bdf8 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-glow { text-shadow: 0 0 40px rgba(139,92,246,0.45); }

/* ---------- Glass ---------- */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.glass-strong {
  background: linear-gradient(180deg, rgba(20,16,40,0.6), rgba(10,8,22,0.5));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}

/* Product card with animated border glow */
.pcard { position: relative; border-radius: 1.25rem; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.pcard::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .35s; opacity: .8;
}
.pcard::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; opacity: 0; transition: opacity .35s;
  background: radial-gradient(120% 120% at 50% 0%, rgba(139,92,246,0.28), transparent 60%);
  z-index: -1;
}
.pcard:hover { transform: translateY(-6px); }
.pcard:hover::after { opacity: 1; }
.pcard:hover::before {
  background: linear-gradient(140deg, rgba(167,139,250,0.7), rgba(96,165,250,0.35) 50%, transparent 80%);
  opacity: 1;
}

/* 3D icon: screen-blend removes its black background */
.icon3d { mix-blend-mode: screen; filter: saturate(1.15) contrast(1.05); }
.icon-wrap { position: relative; }
.icon-wrap::before {
  content: ""; position: absolute; inset: 8% 8% 14% 8%; border-radius: 9999px;
  background: radial-gradient(circle, rgba(139,92,246,0.40), transparent 65%);
  filter: blur(14px); z-index: 0;
}

/* ---------- Buttons ---------- */
.btn-primary {
  position: relative; background: linear-gradient(100deg,#7c3aed,#6366f1 55%,#3b82f6);
  box-shadow: 0 10px 34px -10px rgba(124,58,237,0.75), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform .22s, box-shadow .22s, filter .22s;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 16px 44px -10px rgba(124,58,237,0.9), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-ghost {
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04);
  transition: border-color .22s, background .22s, transform .22s;
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: rgba(167,139,250,0.6); background: rgba(139,92,246,0.1); transform: translateY(-2px); }

/* ---------- Logo / hero ---------- */
.logo-hero { filter: drop-shadow(0 0 50px rgba(139,92,246,0.6)) drop-shadow(0 0 90px rgba(59,130,246,0.35)); }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.floaty { animation: floaty 6s ease-in-out infinite; }
.floaty-2 { animation: floaty 7.5s ease-in-out infinite; }
.floaty-3 { animation: floaty 9s ease-in-out infinite; }

@keyframes spinSlow { to { transform: rotate(360deg); } }
.ring-spin { animation: spinSlow 40s linear infinite; }
.ring-spin-rev { animation: spinSlow 55s linear infinite reverse; }

@keyframes pulseGlow { 0%,100%{opacity:.6} 50%{opacity:1} }
.pulse-glow { animation: pulseGlow 4s ease-in-out infinite; }

.pill { border: 1px solid rgba(139,92,246,0.35); background: rgba(139,92,246,0.1); backdrop-filter: blur(8px); }

.count-box {
  background: linear-gradient(180deg, rgba(139,92,246,0.12), rgba(10,8,22,0.4));
  border: 1px solid rgba(139,92,246,0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ---------- Reveal ---------- */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
.reveal { opacity: 0; }
.reveal.in { animation: fadeUp .7s cubic-bezier(.21,.6,.35,1) forwards; }

@media (prefers-reduced-motion: reduce) {
  .reveal,.reveal.in{animation:none;opacity:1}
  .floaty,.floaty-2,.floaty-3,.ring-spin,.ring-spin-rev,.pulse-glow{animation:none}
  html{scroll-behavior:auto}
}