/* Custom CSS Variables & Utilities from DESIGN.md */
:root {
  --bg-base: #08070E;
  --bg-surface-1: rgba(15, 14, 26, 0.75);
  --bg-surface-2: #16152B;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(168, 85, 247, 0.4);
}

body {
  background-color: var(--bg-base);
  color: #F8FAFC;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

/* Animated Discord-Style Background Glow */
@keyframes pulseGlow1 {

  0%,
  100% {
    transform: translate(0px, 0px) scale(1);
    opacity: 0.35;
  }

  50% {
    transform: translate(80px, 40px) scale(1.2);
    opacity: 0.55;
  }
}

@keyframes pulseGlow2 {

  0%,
  100% {
    transform: translate(0px, 0px) scale(1);
    opacity: 0.3;
  }

  50% {
    transform: translate(-60px, -50px) scale(1.15);
    opacity: 0.5;
  }
}

@keyframes pulseGlow3 {

  0%,
  100% {
    transform: translate(0px, 0px) scale(1);
    opacity: 0.25;
  }

  50% {
    transform: translate(50px, -60px) scale(1.25);
    opacity: 0.45;
  }
}

.discord-bg-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  background-color: var(--bg-base);
}

.discord-glow-1 {
  position: absolute;
  top: -15%;
  left: 15%;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, rgba(88, 101, 242, 0.15) 50%, transparent 70%);
  filter: blur(90px);
  animation: pulseGlow1 14s ease-in-out infinite;
}

.discord-glow-2 {
  position: absolute;
  top: 30%;
  right: 10%;
  width: 550px;
  height: 550px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.25) 0%, rgba(168, 85, 247, 0.15) 50%, transparent 70%);
  filter: blur(100px);
  animation: pulseGlow2 18s ease-in-out infinite;
}

.discord-glow-3 {
  position: absolute;
  bottom: -10%;
  left: 25%;
  width: 750px;
  height: 750px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2) 0%, rgba(88, 101, 242, 0.15) 50%, transparent 70%);
  filter: blur(110px);
  animation: pulseGlow3 22s ease-in-out infinite;
}

.discord-grid-overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* Primary Hero Text Gradient */
.hero-gradient-text {
  background: linear-gradient(270deg, #A855F7 0%, #EC4899 25%, #3B82F6 50%, #EC4899 75%, #A855F7 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroGradientMove 6s ease-in-out infinite;
}

@keyframes heroGradientMove {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.quick-install-btn {
  background-size: 200% 200%;
  animation: heroGradientMove 6s ease-in-out infinite;
}

/* 4.1 Pill Badge Top Indicator */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #C084FC;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(8px);
}

/* 4.2 Frosted Glass Feature Card */
.glass-card {
  background: linear-gradient(180deg, rgba(22, 21, 43, 0.7) 0%, rgba(15, 14, 26, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  backdrop-filter: blur(16px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 12px 32px -8px rgba(168, 85, 247, 0.25);
  transform: translateY(-2px);
}

/* 4.4 Keyboard Shortcut Badge (<kbd>) */
.kbd-badge {
  background: #1E1B3A;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #E2E8F0;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #08070E;
}

::-webkit-scrollbar-thumb {
  background: #1E1B3A;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #A855F7;
}

/* Smooth Auto-Switch Transition for Hero Card */
.hero-card-content {
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card-content.transitioning {
  opacity: 0;
  transform: translateY(4px) scale(0.98);
}

/* FAQ Accordion Smooth Open/Close Transition */
details.faq-item {
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

details.faq-item[open] {
  border-color: rgba(168, 85, 247, 0.4);
  box-shadow: 0 12px 32px -8px rgba(168, 85, 247, 0.25);
}

details.faq-item .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

details.faq-item[open] .faq-answer {
  grid-template-rows: 1fr;
  opacity: 1;
}

details.faq-item .faq-answer>div {
  overflow: hidden;
  min-height: 0;
}

/* ================= LIGHT MODE THEME ================= */
html {
  color-scheme: dark;
}

html.light {
  color-scheme: light;
  --bg-base: #F8FAFC;
  --bg-surface-1: rgba(241, 245, 249, 0.75);
  --bg-surface-2: #EEF2F7;
  --border-subtle: rgba(15, 23, 42, 0.1);
}

/* Background glows & grid softened for light mode */
html.light .discord-glow-1 {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.16) 0%, rgba(88, 101, 242, 0.08) 50%, transparent 70%);
}

html.light .discord-glow-2 {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.12) 0%, rgba(168, 85, 247, 0.08) 50%, transparent 70%);
}

html.light .discord-glow-3 {
  background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, rgba(88, 101, 242, 0.08) 50%, transparent 70%);
}

html.light .discord-grid-overlay {
  background-image: linear-gradient(to right, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.05) 1px, transparent 1px);
}

/* Global text colors */
html.light .text-white {
  color: #1E293B;
}

html.light .from-accentViolet.text-white,
html.light .bg-accentViolet.text-white {
  color: #FFFFFF;
}

html.light .hover\:text-white:hover {
  color: #1E293B;
}

html.light .group:hover .group-hover\:text-white {
  color: #1E293B;
}

html.light .text-textSecondary {
  color: #475569;
}

html.light .text-slate-200 {
  color: #334155;
}

html.light .text-slate-300 {
  color: #475569;
}

html.light .text-accentLight,
html.light .hover\:text-accentLight:hover {
  color: #7C3AED;
}

html.light .text-accentViolet {
  color: #7C3AED;
}

html.light .text-accentCyan {
  color: #0284C7;
}

html.light .text-accentPink {
  color: #DB2777;
}

html.light .text-emerald-400 {
  color: #059669;
}

/* Surfaces */
html.light .bg-bgBase\/80 {
  background-color: rgba(248, 250, 252, 0.8);
}

html.light .bg-bgSurface1\/90 {
  background-color: rgba(241, 245, 249, 0.9);
}

html.light .bg-bgSurface2 {
  background-color: #EEF2F7;
}

html.light .bg-bgSurface2\/80 {
  background-color: rgba(226, 232, 240, 0.8);
}

html.light .bg-white\/5 {
  background-color: rgba(15, 23, 42, 0.05);
}

html.light .bg-white\/10 {
  background-color: rgba(15, 23, 42, 0.08);
}

html.light .bg-white\/20 {
  background-color: rgba(15, 23, 42, 0.12);
}

html.light .bg-white\/\[0\.02\] {
  background-color: rgba(15, 23, 42, 0.03);
}

html.light .bg-white\/\[0\.03\] {
  background-color: rgba(15, 23, 42, 0.04);
}

html.light .bg-black\/40 {
  background-color: rgba(15, 23, 42, 0.06);
}

html.light .hover\:bg-white\/5:hover {
  background-color: rgba(15, 23, 42, 0.08);
}

html.light .hover\:bg-white\/10:hover {
  background-color: rgba(15, 23, 42, 0.12);
}

html.light .hover\:bg-white\/20:hover {
  background-color: rgba(15, 23, 42, 0.16);
}

html.light .hover\:bg-white\/\[0\.02\]:hover {
  background-color: rgba(15, 23, 42, 0.05);
}

html.light .hover\:bg-white\/\[0\.03\]:hover {
  background-color: rgba(15, 23, 42, 0.06);
}

html.light .bg-slate-800 {
  background-color: #E2E8F0;
}

html.light .hover\:bg-slate-700:hover {
  background-color: #CBD5E1;
}

/* Borders */
html.light .border-white\/5 {
  border-color: rgba(15, 23, 42, 0.08);
}

html.light .border-white\/10 {
  border-color: rgba(15, 23, 42, 0.1);
}

html.light .border-white\/15 {
  border-color: rgba(15, 23, 42, 0.15);
}

html.light .border-white\/20 {
  border-color: rgba(15, 23, 42, 0.2);
}

html.light .border-white\/25 {
  border-color: rgba(15, 23, 42, 0.25);
}

html.light .divide-white\/5> :not([hidden])~:not([hidden]) {
  border-color: rgba(15, 23, 42, 0.08);
}

/* Hero Rich Presence preview (Discord-style card) */
html.light .bg-\[\#0F0E1A\]\/90 {
  background-color: rgba(255, 255, 255, 0.9);
}

html.light .bg-\[\#1E1F22\] {
  background-color: #F2F3F5;
}

html.light .text-\[\#F2F3F5\] {
  color: #1E293B;
}

html.light .text-\[\#949BA4\] {
  color: #64748B;
}

html.light .text-\[\#DBDEE1\] {
  color: #334155;
}

html.light .from-\[\#2B2D31\] {
  --tw-gradient-from: #E3E5E8;
}

html.light .to-\[\#111214\] {
  --tw-gradient-to: #C7CBD1;
}

html.light .border-\[\#1E1F22\] {
  border-color: #FFFFFF;
}

/* Terminal */
html.light .bg-\[\#1E1B3A\] {
  background-color: #EAE6F6;
}

html.light .bg-\[\#0B0A16\] {
  background-color: #FFFFFF;
}

/* Footer */
html.light .bg-\[\#050409\] {
  background-color: #FFFFFF;
}

/* Glass cards */
html.light .glass-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(241, 245, 249, 0.7) 100%);
  border-color: rgba(15, 23, 42, 0.1);
}

/* Badge pill */
html.light .badge-pill {
  color: #7C3AED;
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.3);
}

/* Keyboard badges */
html.light .kbd-badge {
  background: #F1F5F9;
  border-color: rgba(15, 23, 42, 0.15);
  color: #334155;
}

/* Scrollbar */
html.light::-webkit-scrollbar-track {
  background: #EEF2F7;
}

html.light::-webkit-scrollbar-thumb {
  background: #CBD5E1;
}

/* GitHub icons: inverted for dark bg, keep original on light bg */
html.light .invert {
  filter: none;
}