/* ========================================
   GlowScope — Data Science Design System
   Blue-Violet Gradient Identity
   ======================================== */

/* ---- Manrope Variable Font ---- */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
  font-style: normal;
}

/* ---- Brand carousel animation ---- */
@keyframes brandScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.brand-carousel-track {
  animation: brandScroll 25s linear infinite;
}

.brand-carousel-track:hover {
  animation-play-state: paused;
}

/* ---- Top banner animation ---- */
@keyframes bannerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

#topBanner {
  transition: transform 0.3s ease;
}

.top-banner-track {
  display: flex;
  width: max-content;
}

/* ---- Base ---- */
html {
  scroll-behavior: smooth;
  font-size: 17px;
  scroll-padding-top: 100px;
}

body {
  line-height: 1.7;
  letter-spacing: 0.01em;
  background: #ffffff;
}

/* ---- Readability overrides ---- */
.text-\[9px\]  { font-size: 11px !important; line-height: 1.5; }
.text-\[10px\] { font-size: 12px !important; line-height: 1.5; }
.text-\[11px\] { font-size: 13px !important; line-height: 1.5; }

.text-xs   { font-size: 0.85rem !important; }
.text-sm   { font-size: 0.95rem !important; }
.text-base { font-size: 1.06rem !important; }
.text-lg   { font-size: 1.2rem !important; }

table .text-xs { font-size: 0.9rem !important; }
table th { font-size: 0.8rem !important; padding-top: 1rem; padding-bottom: 1rem; }
table td { padding-top: 0.85rem; padding-bottom: 0.85rem; }

/* ---- Progress bars ---- */
.rounded-full[class*="bg-mist"],
.rounded-full[class*="bg-cream"],
.rounded-full[class*="bg-red-1"],
.rounded-full[class*="bg-amber-1"],
.rounded-full[class*="bg-green-1"] {
  min-height: 10px;
  height: auto;
}
.rounded-full[class*="bg-mist"] > .rounded-full,
.rounded-full[class*="bg-cream"] > .rounded-full,
.rounded-full[class*="bg-red-1"] > .rounded-full,
.rounded-full[class*="bg-amber-1"] > .rounded-full,
.rounded-full[class*="bg-green-1"] > .rounded-full {
  min-height: 10px;
}

/* ---- Tags & badges ---- */
.rounded-full[class*="px-1"],
.rounded-full[class*="px-2"],
.rounded-lg[class*="px-2"] {
  padding: 4px 10px;
  font-size: 12px;
}

/* ---- Selection ---- */
::selection {
  background-color: rgba(139, 92, 246, 0.25);
  color: #0f172a;
}

/* ---- Global ---- */
section { scroll-margin-top: 100px; }
p { line-height: 1.75; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button, a[class*="bg-"], a[class*="border-2"] { min-height: 44px; }

/* ========================================
   GLASSMORPHISM SYSTEM
   ======================================== */

/* Glass card — standard */
.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 8px 32px rgba(79, 70, 229, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Glass card — stronger */
.glass-card-strong {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 8px 32px rgba(79, 70, 229, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Glass card — subtle */
.glass-card-subtle {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Glass nav */
.glass-nav {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 24px rgba(79, 70, 229, 0.06);
}

/* Dark nav — blue-violet */
.nav-dark {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(139, 92, 246, 0.25);
  box-shadow: 0 4px 30px rgba(79, 70, 229, 0.15);
}

/* ========================================
   BACKGROUND BLOBS — Blue/Violet/Pink
   ======================================== */

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.blob-indigo {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, rgba(99, 102, 241, 0) 70%);
}

.blob-violet {
  background: radial-gradient(circle, rgba(167, 139, 250, 0.3) 0%, rgba(167, 139, 250, 0) 70%);
}

.blob-pink {
  background: radial-gradient(circle, rgba(244, 114, 182, 0.25) 0%, rgba(244, 114, 182, 0) 70%);
}

.blob-cyan {
  background: radial-gradient(circle, rgba(34, 211, 238, 0.2) 0%, rgba(34, 211, 238, 0) 70%);
}

.blob-fuchsia {
  background: radial-gradient(circle, rgba(217, 70, 239, 0.2) 0%, rgba(217, 70, 239, 0) 70%);
}

/* ========================================
   DARK GRADIENT SECTIONS
   ======================================== */

.dark-section {
  background: #ffffff;
}

.dark-section-reverse {
  background: #ffffff;
}

/* ========================================
   DATA BOTTLE ANIMATION
   ======================================== */

@keyframes floatParticle {
  0%, 100% { transform: translate(0, 0); opacity: 0.7; }
  25% { transform: translate(2px, -3px); opacity: 1; }
  50% { transform: translate(-1px, -6px); opacity: 0.8; }
  75% { transform: translate(3px, -2px); opacity: 0.9; }
}

@keyframes pulseGlow {
  0%, 100% { filter: blur(0px); opacity: 0.8; }
  50% { filter: blur(1px); opacity: 1; }
}

.data-particle {
  animation: floatParticle 4s ease-in-out infinite;
}

.data-particle:nth-child(odd) {
  animation-duration: 5s;
  animation-delay: -1s;
}

.data-particle:nth-child(3n) {
  animation-duration: 6s;
  animation-delay: -2s;
}

.data-bottle-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ========================================
   HERO CARD FLOATING ANIMATIONS
   ======================================== */

@keyframes float1 {
  0%, 100% { transform: translate(-50%, 0px); }
  50% { transform: translate(-50%, -12px); }
}
@keyframes float2 {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50% { transform: translateY(-16px) rotate(0deg); }
}
@keyframes float3 {
  0%, 100% { transform: translateY(0px) rotate(1deg); }
  50% { transform: translateY(-10px) rotate(-1deg); }
}
@keyframes float4 {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-14px); }
}
@keyframes float5 {
  0%, 100% { transform: translateY(0px) rotate(1deg); }
  50% { transform: translateY(-8px) rotate(-1deg); }
}

.hero-card-1 { animation: float1 6s ease-in-out infinite; }
.hero-card-2 { animation: float2 7s ease-in-out infinite 0.5s; }
.hero-card-3 { animation: float3 5.5s ease-in-out infinite 1s; }
.hero-card-4 { animation: float4 6.5s ease-in-out infinite 1.5s; }
.hero-card-5 { animation: float5 7.5s ease-in-out infinite 0.8s; }

/* ---- Bounce slow ---- */
@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-bounce-slow { animation: bounce-slow 2s ease-in-out infinite; }

/* ---- Live response fade in ---- */
@keyframes slideInResponse {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.survey-response-new { animation: slideInResponse 0.5s ease-out; }

/* ---- Counter number transitions ---- */
.counter-value {
  transition: all 0.3s ease;
  font-variant-numeric: tabular-nums;
}

/* ---- Scroll reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Progress bar grow ---- */
@keyframes progressGrow { from { width: 0; } }
.animate-progress { animation: progressGrow 1.5s ease-out; }

/* ---- Nav scroll effect ---- */
#nav.scrolled .glass-nav {
  box-shadow: 0 8px 32px rgba(79, 70, 229, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.6);
}
#nav.scrolled .nav-dark {
  box-shadow: 0 8px 32px rgba(30, 27, 75, 0.3);
  border-color: rgba(139, 92, 246, 0.35);
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.96) 0%, rgba(49, 46, 129, 0.95) 50%, rgba(79, 70, 229, 0.93) 100%);
}

/* ---- Dot-matrix logo ---- */
#dotLogo svg {
  display: block;
}
#dotLogo .dot-particle {
  animation: floatParticle 5s ease-in-out infinite;
}
#dotLogo .dot-particle:nth-child(3n) {
  animation-duration: 6s;
  animation-delay: -1.5s;
}
#dotLogo .dot-particle:nth-child(5n) {
  animation-duration: 4s;
  animation-delay: -2.5s;
}

/* ---- Subtle grain texture ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.008;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ========================================
   GRADIENT TEXT UTILITY
   ======================================== */

.text-gradient {
  background: linear-gradient(135deg, #4f46e5, #8b5cf6, #d946ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-subtle {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-light {
  background: linear-gradient(135deg, #c4b5fd, #f9a8d4, #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   HERO BACKGROUND — Blue-Violet
   ======================================== */
.hero-bg {
  background: #ffffff;
}

/* Hero drop video — seamless on matching bg with feathered edges */
.hero-drop-video {
  pointer-events: none;
  --mask-edge: 12%;
  -webkit-mask-image:
    linear-gradient(to right, transparent, black var(--mask-edge), black calc(100% - var(--mask-edge)), transparent);
  mask-image:
    linear-gradient(to right, transparent, black var(--mask-edge), black calc(100% - var(--mask-edge)), transparent);
}
.hero-drop-video-wrap::before,
.hero-drop-video-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-drop-video-wrap::before {
  top: 0;
  height: 15%;
  background: linear-gradient(to bottom, #ffffff, transparent);
}
.hero-drop-video-wrap::after {
  bottom: 0;
  height: 15%;
  background: linear-gradient(to top, #ffffff, transparent);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .hero-card-2, .hero-card-5 { display: none; }
  .hero-card-1 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    animation: none;
    margin: 0 auto;
  }
  .hero-card-3 {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin: 12px auto 0;
    animation: none;
  }
  .hero-card-4 {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    margin: 12px auto 0;
    animation: none;
  }
  #heroCards {
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .blob { display: none; }
  .data-bottle-container { display: none; }
}

/* ---- Floating mini-cards animations ---- */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
@keyframes floatMedium {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(0.5deg); }
}
.animate-float-slow { animation: floatSlow 5s ease-in-out infinite; }
.animate-float-medium { animation: floatMedium 4s ease-in-out infinite; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-card-1, .hero-card-2, .hero-card-3, .hero-card-4, .hero-card-5 { animation: none !important; }
  .animate-bounce-slow { animation: none !important; }
  .animate-pulse { animation: none !important; }
  .animate-float-slow, .animate-float-medium { animation: none !important; }
  .data-particle { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .carousel-card { animation: none !important; }
}

/* ========================================
   PRODUCT VERDICT CAROUSEL — 3-CARD STACK
   ======================================== */

.carousel-stage {
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ghost cards (side cards — real card feel) */
.carousel-ghost {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,0.92), rgba(248,246,255,0.85));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  overflow: hidden;
}

/* Fake card content inside ghosts */
.carousel-ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 55%;
  background: linear-gradient(135deg, #f3f0ff 0%, #ebe5ff 100%);
  border-radius: 28px 28px 0 0;
}

.carousel-ghost::after {
  content: '';
  position: absolute;
  bottom: 18%;
  left: 12%;
  right: 12%;
  height: 24%;
  background: linear-gradient(180deg, rgba(0,0,0,0.025) 0%, rgba(0,0,0,0.015) 100%);
  border-radius: 12px;
}

.carousel-ghost.ghost-left {
  transform: translateX(-80px) scale(0.88);
  opacity: 0.7;
  z-index: 1;
}

.carousel-ghost.ghost-right {
  transform: translateX(80px) scale(0.88);
  opacity: 0.7;
  z-index: 1;
}

/* Main card — glassmorphism */
.carousel-card {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255,255,255,0.95), rgba(255,255,255,0.82));
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.10),
    0 8px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  opacity: 0;
  transform: translateX(120px) scale(0.92);
  transition: none;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

/* Shimmer */
.carousel-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  z-index: 2;
}

/* ---- Image: big square top ---- */
.carousel-card .product-img-area {
  width: 100%;
  aspect-ratio: 1 / 0.85;
  background: linear-gradient(135deg, #f8f6ff 0%, #eee9ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.carousel-card .product-img-area img,
.carousel-card .product-img-area svg {
  width: 85%;
  height: 85%;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.10));
}

/* ---- Card body ---- */
.carousel-card .card-body {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 18px 16px;
}

.carousel-card .product-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #0d1117;
  text-align: center;
  line-height: 1.25;
  margin-bottom: 2px;
}

.carousel-card .product-brand {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: #0d1117;
  opacity: 0.4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

/* Score row */
.carousel-card .score-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}

.carousel-card .score-badge {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
}

.carousel-card .score-suffix {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 15px;
  opacity: 0.35;
}

.carousel-card .score-label-tag {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(79, 70, 229, 0.08);
  color: #4f46e5;
}

/* ---- KPI Grid 2×2 ---- */
.carousel-card .kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  width: 100%;
}

.carousel-card .kpi-cell {
  background: rgba(0, 0, 0, 0.025);
  border-radius: 10px;
  padding: 7px 9px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.carousel-card .kpi-header {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0d1117;
  opacity: 0.45;
}

.carousel-card .kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.carousel-card .kpi-main-value {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #0d1117;
  line-height: 1;
}

.carousel-card .kpi-score-badge {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.3;
}

.carousel-card .kpi-bar-bg {
  width: 100%;
  height: 3.5px;
  border-radius: 2px;
  background: rgba(0,0,0,0.06);
  overflow: hidden;
  margin-top: 1px;
}

.carousel-card .kpi-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  width: 0%;
}

/* Verdict stamp */
.carousel-card .verdict-stamp {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2.5) rotate(-12deg);
  opacity: 0;
  pointer-events: none;
  transition: none;
  z-index: 10;
}

.verdict-stamp.stamp-reject { width: 160px; height: 160px; }
.verdict-stamp.stamp-winner { width: 160px; height: 160px; }

/* Animations */
@keyframes cardEnter {
  0% { opacity: 0; transform: translateX(100px) scale(0.9); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes cardExitLeft {
  0% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-120px) scale(0.88); }
}

@keyframes stampIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.5) rotate(-12deg); }
  50% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.05) rotate(-8deg); }
  100% { opacity: 0.92; transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
}

@keyframes scoreCountUp {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Tablet carousel */
@media (max-width: 1023px) {
  #productCarousel {
    min-height: 540px !important;
    margin-top: 32px;
  }
  .carousel-stage {
    width: 360px !important;
    height: 530px !important;
  }
  .carousel-ghost.ghost-left { transform: translateX(-65px) scale(0.88); opacity: 0.65; }
  .carousel-ghost.ghost-right { transform: translateX(65px) scale(0.88); opacity: 0.65; }
  .carousel-card .score-badge { font-size: 28px; }
  .carousel-card .kpi-main-value { font-size: 12px; }
}

/* Mobile carousel */
@media (max-width: 640px) {
  #productCarousel {
    min-height: 500px !important;
  }
  .carousel-stage {
    width: 320px !important;
    height: 480px !important;
  }
  .carousel-ghost.ghost-left { transform: translateX(-45px) scale(0.86); opacity: 0.55; }
  .carousel-ghost.ghost-right { transform: translateX(45px) scale(0.86); opacity: 0.55; }
  .carousel-card .card-body { padding: 10px 14px 12px; }
  .carousel-card .kpi-grid { gap: 4px; }
  .carousel-card .kpi-cell { padding: 6px 8px 5px; }
}

/* ========================================
   LOGO SLIDER
   ======================================== */

.logo-slider-track {
  display: flex;
  gap: 3rem;
  animation: logoSlide 30s linear infinite;
  width: max-content;
}

@keyframes logoSlide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.logo-slider-track:hover {
  animation-play-state: paused;
}

/* ========================================
   PRICING CARD HOVER
   ======================================== */

.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(79, 70, 229, 0.12);
}

/* ========================================
   CONTAINER SCROLL ANIMATION
   ======================================== */

.scroll-container {
  min-height: 60rem;
}

@media (min-width: 768px) {
  .scroll-container {
    min-height: 80rem;
  }
}

#scrollCard {
  transform-origin: top center;
  will-change: transform;
  margin-left: auto;
  margin-right: auto;
  max-width: 56rem;
  box-shadow:
    0 0 0 1px rgba(139, 92, 246, 0.08),
    0 12px 40px rgba(139, 92, 246, 0.15),
    0 40px 80px rgba(139, 92, 246, 0.10),
    0 80px 120px rgba(99, 102, 241, 0.08);
}

#scrollHeader {
  will-change: transform;
}

/* ========================================
   BETA BADGE — Glossy violet
   ======================================== */

.beta-badge {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a78bfa 100%);
  box-shadow:
    0 1px 3px rgba(99, 102, 241, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
}

.beta-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: betaShine 3s ease-in-out infinite;
}

@keyframes betaShine {
  0% { left: -100%; }
  50% { left: 150%; }
  100% { left: 150%; }
}

/* ========================================
   AWARD BADGE
   ======================================== */

.award-badge {
  animation: awardFloat 4s ease-in-out infinite;
}

@keyframes awardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ========================================
   SHINE BORDER — Animated gradient border
   ======================================== */

@keyframes shineSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.shine-border-wrapper {
  box-shadow:
    0 20px 60px rgba(99, 102, 241, 0.12),
    0 8px 24px rgba(139, 92, 246, 0.08);
}

.shine-border-spin {
  background: conic-gradient(
    from 0deg,
    #6366f1,
    #8b5cf6,
    #ec4899,
    #f97316,
    #22d3ee,
    #6366f1
  );
  animation: shineSpin 4s linear infinite;
  filter: blur(2px);
}

.pricing-card-side {
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.pricing-card-side:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .shine-border-spin { animation: none !important; }
}

/* ========================================
   FAQ ACCORDION
   ======================================== */

details summary {
  cursor: pointer;
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] summary .faq-chevron {
  transform: rotate(180deg);
}

.faq-chevron {
  transition: transform 0.2s ease;
}

/* ---- Falling Pattern (CTA section) ---- */
.falling-pattern-wrapper {
  overflow: hidden;
}

.falling-pattern-layer {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(8px 140px at 0px 235px, #7c3aed, transparent),
    radial-gradient(8px 140px at 300px 235px, #7c3aed, transparent),
    radial-gradient(3px 3px at 150px 117.5px, #7c3aed 100%, transparent 150%),
    radial-gradient(8px 140px at 0px 252px, #8b5cf6, transparent),
    radial-gradient(8px 140px at 300px 252px, #8b5cf6, transparent),
    radial-gradient(3px 3px at 150px 126px, #8b5cf6 100%, transparent 150%),
    radial-gradient(8px 140px at 0px 150px, #7c3aed, transparent),
    radial-gradient(8px 140px at 300px 150px, #7c3aed, transparent),
    radial-gradient(3px 3px at 150px 75px, #7c3aed 100%, transparent 150%),
    radial-gradient(8px 140px at 0px 253px, #8b5cf6, transparent),
    radial-gradient(8px 140px at 300px 253px, #8b5cf6, transparent),
    radial-gradient(3px 3px at 150px 126.5px, #8b5cf6 100%, transparent 150%),
    radial-gradient(8px 140px at 0px 204px, #7c3aed, transparent),
    radial-gradient(8px 140px at 300px 204px, #7c3aed, transparent),
    radial-gradient(3px 3px at 150px 102px, #7c3aed 100%, transparent 150%),
    radial-gradient(8px 140px at 0px 134px, #8b5cf6, transparent),
    radial-gradient(8px 140px at 300px 134px, #8b5cf6, transparent),
    radial-gradient(3px 3px at 150px 67px, #8b5cf6 100%, transparent 150%),
    radial-gradient(8px 140px at 0px 179px, #7c3aed, transparent),
    radial-gradient(8px 140px at 300px 179px, #7c3aed, transparent),
    radial-gradient(3px 3px at 150px 89.5px, #7c3aed 100%, transparent 150%),
    radial-gradient(8px 140px at 0px 299px, #8b5cf6, transparent),
    radial-gradient(8px 140px at 300px 299px, #8b5cf6, transparent),
    radial-gradient(3px 3px at 150px 149.5px, #8b5cf6 100%, transparent 150%),
    radial-gradient(8px 140px at 0px 215px, #7c3aed, transparent),
    radial-gradient(8px 140px at 300px 215px, #7c3aed, transparent),
    radial-gradient(3px 3px at 150px 107.5px, #7c3aed 100%, transparent 150%),
    radial-gradient(8px 140px at 0px 281px, #8b5cf6, transparent),
    radial-gradient(8px 140px at 300px 281px, #8b5cf6, transparent),
    radial-gradient(3px 3px at 150px 140.5px, #8b5cf6 100%, transparent 150%),
    radial-gradient(8px 140px at 0px 158px, #7c3aed, transparent),
    radial-gradient(8px 140px at 300px 158px, #7c3aed, transparent),
    radial-gradient(3px 3px at 150px 79px, #7c3aed 100%, transparent 150%),
    radial-gradient(8px 140px at 0px 210px, #8b5cf6, transparent),
    radial-gradient(8px 140px at 300px 210px, #8b5cf6, transparent);
  background-size:
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px;
  animation: fallingPattern 150s linear infinite;
}

@keyframes fallingPattern {
  0% {
    background-position:
      0px 220px, 3px 220px, 151.5px 337.5px,
      25px 24px, 28px 24px, 176.5px 150px,
      50px 16px, 53px 16px, 201.5px 91px,
      75px 224px, 78px 224px, 226.5px 230.5px,
      100px 19px, 103px 19px, 251.5px 121px,
      125px 120px, 128px 120px, 276.5px 187px,
      150px 31px, 153px 31px, 301.5px 120.5px,
      175px 235px, 178px 235px, 326.5px 384.5px,
      200px 121px, 203px 121px, 351.5px 228.5px,
      225px 224px, 228px 224px, 376.5px 364.5px,
      250px 26px, 253px 26px, 401.5px 105px,
      275px 75px, 278px 75px;
  }
  100% {
    background-position:
      0px 6800px, 3px 6800px, 151.5px 6917.5px,
      25px 13632px, 28px 13632px, 176.5px 13758px,
      50px 5416px, 53px 5416px, 201.5px 5491px,
      75px 17175px, 78px 17175px, 226.5px 17301.5px,
      100px 5119px, 103px 5119px, 251.5px 5221px,
      125px 8428px, 128px 8428px, 276.5px 8495px,
      150px 9876px, 153px 9876px, 301.5px 9965.5px,
      175px 13391px, 178px 13391px, 326.5px 13540.5px,
      200px 14741px, 203px 14741px, 351.5px 14848.5px,
      225px 18770px, 228px 18770px, 376.5px 18910.5px,
      250px 5082px, 253px 5082px, 401.5px 5161px,
      275px 6375px, 278px 6375px;
  }
}

.falling-pattern-blur {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(0.4em);
  background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 2px, white 2px);
  background-size: 8px 8px;
}