:root {
  --bg-dark: #0a0e17;
  --bg-darker: #05070a;
  --bg-panel: #111827;
  --bg-glass: rgba(17, 24, 39, 0.75);
  --accent: #00e5ff;
  --accent-soft: rgba(0, 229, 255, 0.1);
  --accent-glow: rgba(0, 229, 255, 0.5);
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --font-main: 'Outfit', sans-serif;
  --border-glass: rgba(255, 255, 255, 0.08);
}

/* Reset and Global Setup */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-main);
  background-color: var(--bg-dark);
  color: var(--text-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Utilities */
.text-accent { color: var(--accent) !important; }
.bg-accent { background-color: var(--accent) !important; color: #000; }
.bg-accent-soft { background-color: var(--accent-soft) !important; }
.bg-panel { background-color: var(--bg-panel) !important; }
.bg-darker { background-color: var(--bg-darker) !important; }
.shadow-accent { box-shadow: 0 0 20px var(--accent-glow) !important; transition: box-shadow 0.3s ease; }
.shadow-accent:hover { box-shadow: 0 0 30px var(--accent-glow) !important; }
.border-glass { border: 1px solid var(--border-glass) !important; }

/* Navbar */
.glass-nav {
  background: var(--bg-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-glass);
}
.hover-white:hover { color: #fff !important; }
.navbar-brand span { animation: pulse 2s infinite; }

/* Hero Section */
.hero-section {
  position: relative;
  overflow: hidden;
}
.glow-bg {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 60%);
  filter: blur(100px);
  z-index: 0;
  pointer-events: none;
}

/* 3D Animation Effects */
.scene-3d {
  perspective: 1500px;
  width: 100%;
  max-width: 500px;
}
.card-3d {
  transform-style: preserve-3d;
  animation: float3d 6s ease-in-out infinite, rotate3d 10s linear infinite;
  transform: rotateX(10deg) rotateY(-15deg);
}
@keyframes float3d {
  0%, 100% { transform: translateY(0) rotateX(10deg) rotateY(-15deg); }
  50% { transform: translateY(-20px) rotateX(15deg) rotateY(-10deg); }
}

/* Code block pseudo coloring */
.text-orange { color: #ff9800; }
.text-yellow { color: #ffeb3b; }
.text-green { color: #4caf50; }
.circle { width: 12px; height: 12px; border-radius: 50%; }

/* Buttons & Micro-interactions */
.btn-accent { border: none; }
.btn-accent:hover {
  background-color: #fff !important;
  color: #000 !important;
  transform: translateY(-2px);
}
.transition-hover { transition: all 0.3s ease; }
.feature-card:hover { transform: translateY(-10px); border-color: rgba(0,229,255,0.3) !important; }

/* Video Play Button */
.play-btn-bounce {
  transition: transform 0.3s ease;
}
.play-btn-bounce:hover {
  transform: translate(-50%, -50%) scale(1.1) !important;
}

/* Custom Accordion */
.custom-accordion .accordion-button:not(.collapsed) {
  background-color: var(--accent-soft) !important;
  color: var(--text-main) !important;
  box-shadow: none;
}
.custom-accordion .accordion-button:focus { box-shadow: none; }
.custom-accordion .accordion-button::after { filter: invert(1); }

/* Pricing */
.pricing-card { position: relative; }
.pricing-card:hover { transform: translateY(-5px); transition: 0.3s; }
.rounded-bl-3 { border-bottom-left-radius: 10px; }

/* Form Elements */
.form-control { border-width: 1px; }
.form-control:focus {
  background-color: var(--bg-dark);
  color: white;
  border-color: var(--accent);
  box-shadow: 0 0 0 .25rem var(--accent-soft);
}

/* A/B Demo Toggle */
.ab-btn {
  border-radius: 0 8px 8px 0;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.ab-btn:hover { opacity: 1; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Production Tweaks & Transitions --- */
.hero-section {
  transition: opacity 0.4s ease-in-out;
}
.fade-out {
  opacity: 0 !important;
  pointer-events: none;
}
.fade-in {
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .glow-bg {
    filter: blur(50px) !important;
    opacity: 0.5 !important;
  }
}