/* ---- Base ---- */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; color: #e4e4f0; }
::selection { background: rgba(139,108,239,0.3); color: #fff; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #050510; }
::-webkit-scrollbar-thumb { background: #1e1e3a; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2e2e5a; }

/* ---- FAQ ---- */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }

/* ---- Nebula background (static, no animation for perf) ---- */
.nebula {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(88,28,135,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(30,58,138,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 85%, rgba(21,94,117,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(109,40,217,0.04) 0%, transparent 40%);
}

/* ---- Nav blur (only one element gets backdrop-filter) ---- */
.nav-blur {
  background: rgba(5,5,16,0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  will-change: backdrop-filter;
}

/* ---- Glass surfaces (NO backdrop-filter, uses semi-opaque bg instead) ---- */
.glass {
  background: rgba(10,10,26,0.6);
  border: 1px solid rgba(255,255,255,0.06);
}
.glass-hover {
  transition: background 0.2s, border-color 0.2s;
}
.glass-hover:hover {
  background: rgba(15,15,35,0.7);
  border-color: rgba(255,255,255,0.10);
}
.glass-strong {
  background: rgba(10,10,26,0.75);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ---- Gradient text (cosmic) ---- */
.gradient-text {
  background: linear-gradient(135deg, #c4b5fd, #67e8f9, #f0abfc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: cosmicText 8s ease-in-out infinite;
  will-change: background-position;
}
@keyframes cosmicText {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---- Logo shimmer ---- */
.logo-text {
  background: linear-gradient(135deg, #c4b5fd, #67e8f9, #f0abfc, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 300% 300%;
  animation: logoShimmer 5s ease-in-out infinite;
  will-change: background-position;
}
@keyframes logoShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---- Buttons ---- */
.btn-primary {
  background: linear-gradient(135deg, #8b6cef 0%, #a78bfa 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 99px;
  padding: 12px 32px;
  box-shadow: 0 4px 20px rgba(139,108,239,0.25);
  transition: box-shadow 0.2s, transform 0.2s;
}
.btn-primary:hover {
  box-shadow: 0 8px 32px rgba(139,108,239,0.35);
  transform: translateY(-1px);
}
.btn-outline {
  border: 1px solid rgba(255,255,255,0.12);
  color: #e4e4f0;
  font-weight: 600;
  border-radius: 99px;
  padding: 12px 32px;
  transition: border-color 0.2s, background 0.2s;
}
.btn-outline:hover {
  border-color: rgba(139,108,239,0.4);
  background: rgba(139,108,239,0.08);
}

/* ---- Accent glow ---- */
.accent-glow {
  box-shadow: 0 0 40px rgba(139,108,239,0.10);
}

/* ---- Image loading ---- */
img {
  content-visibility: auto;
}

/* ---- Reduce motion for accessibility ---- */
@media (prefers-reduced-motion: reduce) {
  .gradient-text, .logo-text { animation: none; }
  .nebula { animation: none; }
  #starfield { display: none; }
}