/* ===================================================================
   CrazyVerse — New Site Theme (2026 refresh)
   Shared design system for the site-wide mockup. Load AFTER the
   Tailwind CDN script and the existing css/style.css on every page.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500&display=swap');

:root {
  --bg: #08090d;
  --bg-raised: #0e1015;
  --border: rgba(255,255,255,0.07);
  --border-hover: rgba(255,255,255,0.16);
  --cyan: #22d3ee;
  --cyan-soft: rgba(34,211,238,0.5);
  --lime: #a3e635;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg) !important;
}

.mono { font-family: 'JetBrains Mono', monospace; }

/* ---------- Background textures (apply to hero / feature sections) ---------- */
.bg-noise {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(34,211,238,0.10), transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(163,230,53,0.08), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(34,211,238,0.06), transparent 45%);
}
.grid-overlay {
  background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 30% 30%, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 30%, black 40%, transparent 90%);
}

/* ---------- Header / Nav ---------- */
.site-header {
  background: rgba(8,9,13,0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.nav-link {
  padding: .5rem 1rem;
  border-radius: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: #94a3b8;
  transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.nav-link.active { color: #fff; background: rgba(255,255,255,0.06); }
.nav-dropdown-panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: .75rem;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.6);
}
.nav-dropdown-panel a { color: #94a3b8; font-weight: 600; transition: color .15s ease, background-color .15s ease; }
.nav-dropdown-panel a:hover { color: var(--lime); background: rgba(255,255,255,0.04); }

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .75rem;
  background: var(--cyan);
  color: #06131a;
  font-weight: 700;
  padding: .8rem 1.6rem;
  transition: all .15s ease;
  box-shadow: 0 0 0 1px rgba(34,211,238,0.4), 0 8px 30px -8px rgba(34,211,238,0.55);
}
.btn-primary:hover {
  background: #67e3f5;
  box-shadow: 0 0 0 1px rgba(34,211,238,0.7), 0 12px 40px -6px rgba(34,211,238,0.75);
  transform: translateY(-1px);
}
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .75rem;
  border: 1px solid var(--border-hover);
  color: #fff;
  font-weight: 600;
  padding: .8rem 1.6rem;
  transition: all .15s ease;
}
.btn-secondary:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.3); }

/* ---------- Cards / surfaces ---------- */
.surface-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 1rem;
  transition: border-color .2s ease, transform .2s ease;
}
.surface-card:hover { border-color: var(--border-hover); }

.section-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .375rem .875rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  font-size: .75rem; font-weight: 600; color: #cbd5e1;
}

.stat-block .stat-value { font-size: 1.5rem; font-weight: 800; color: #fff; font-family: 'JetBrains Mono', monospace; }
.stat-block .stat-label { font-size: .75rem; color: #64748b; font-weight: 500; margin-top: .125rem; }

/* ---------- Dynamic pricing-page CTA buttons ----------
   js/main.js injects the actual <button> markup into
   .dynamic-btn-container at runtime (see initDynamicButtons()),
   so it can't carry a .btn-primary class directly. This overrides
   its Tailwind classes purely visually, matching .btn-primary,
   without touching the injected onclick wiring. */
.dynamic-btn-container button[onclick^="buyNow"] {
  background: var(--cyan) !important;
  color: #06131a !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 1px rgba(34,211,238,0.4), 0 8px 30px -8px rgba(34,211,238,0.55) !important;
  transition: all .15s ease !important;
}
.dynamic-btn-container button[onclick^="buyNow"]:hover {
  background: #67e3f5 !important;
  transform: translateY(-1px);
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
}

/* ---------- Section heading ---------- */
.section-title {
  font-weight: 800; letter-spacing: -0.02em; color: #fff;
}
.section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--cyan);
}

/* ---------- Fade-in utility (reuse existing animate-fade-in-up keyframes already defined per-page) ---------- */
.fu { opacity: 0; transform: translateY(16px); animation: newThemeFadeUp .8s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes newThemeFadeUp { to { opacity: 1; transform: translateY(0); } }
.fu-1 { animation-delay: .05s; } .fu-2 { animation-delay: .15s; } .fu-3 { animation-delay: .25s; } .fu-4 { animation-delay: .35s; }

/* ---------- Mobile menu panel ---------- */
#mobile-menu-panel {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
}
#mobile-menu-panel a { color: #cbd5e1; font-weight: 600; }
#mobile-menu-panel a:hover { color: var(--cyan); }

/* ---------- Scrollbar (keeps existing behavior, refreshed color) ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #262a35; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }