/* ═══════════════════════════════════════════════════════════════
   Growth Stack — Light Futuristic Indigo & Aqua Design System v4.0
   Premium Light Theme · Indigo Typography · Aqua Accents
   ═══════════════════════════════════════════════════════════════ */

/* --- Typography: Plus Jakarta Sans (Headings) + Inter (Body) --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

/* ─── Root Design Tokens (Light Indigo & Aqua Palette) ─── */
:root {
  /* Backgrounds — Pure light canvas */
  --bg-deep:      #FFFFFF;
  --bg-primary:   #FFFFFF;
  --bg-secondary: #F8FAFC;
  --bg-tertiary:  #F1F5F9;
  --bg-elevated:  #E2E8F0;
  --bg-surface:   rgba(6, 182, 212, 0.04);

  /* Text — Deep Indigo authority */
  --text-primary:   #1E1B4B;
  --text-strong:    #312E81;
  --text-secondary: #3730A3;
  --text-muted:     #64748B;
  --text-dim:       #94A3B8;

  /* Primary Accent — Electric Aqua / Cyan */
  --accent-start: #06B6D4;
  --accent-mid:   #0EA5E9;
  --accent-end:   #0284C7;
  --accent-hover: #0891B2;
  --accent-glow:  rgba(6, 182, 212, 0.22);
  --accent-subtle:rgba(6, 182, 212, 0.06);

  /* Secondary Accent — Deep Indigo */
  --indigo-start: #4F46E5;
  --indigo-mid:   #4338CA;
  --indigo-end:   #312E81;
  --indigo-glow:  rgba(79, 70, 229, 0.18);
  --indigo-subtle:rgba(79, 70, 229, 0.06);

  /* Green Accent */
  --green-accent: #10B981;
  --green-glow:   rgba(16, 185, 129, 0.18);

  /* Borders & Glass */
  --border-color:  rgba(6, 182, 212, 0.18);
  --border-subtle: rgba(30, 27, 75, 0.07);
  --border-indigo: rgba(79, 70, 229, 0.14);
  --glass-bg:      rgba(255, 255, 255, 0.80);
  --glass-border:  rgba(6, 182, 212, 0.16);
  --glass-shine:   rgba(255, 255, 255, 0.90);

  /* Shadows — soft indigo-tinted */
  --shadow-sm:   0 2px 8px  rgba(30, 27, 75, 0.06);
  --shadow-md:   0 8px 24px rgba(30, 27, 75, 0.10);
  --shadow-lg:   0 16px 48px rgba(30, 27, 75, 0.13);
  --shadow-glow: 0 0 30px var(--accent-glow);

  /* Buttons */
  --btn-gradient: linear-gradient(135deg, #4F46E5 0%, #06B6D4 100%);
  --btn-gradient-hover: linear-gradient(135deg, #4338CA 0%, #0891B2 100%);
  --btn-shadow:   0 6px 24px rgba(79, 70, 229, 0.28);
  --btn-shadow-hover: 0 10px 36px rgba(6, 182, 212, 0.35);

  /* Radii */
  --radius-btn: 5px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full:9999px;

  /* Timing */
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* Legacy compatibility aliases */
  --accent-color: var(--accent-start);
  --bg-color:     var(--bg-primary);
}


/* ─── Base Resets & Body ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Lenis smooth scroll integration */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100%;
  line-height: 1.65;
  font-size: 16px;
  font-weight: 400;
}


/* ─── Fixed Background Layer ─── */
.body-background-color {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 50%, #F0F9FF 100%);
  z-index: -3;
  pointer-events: none;
}

/* Animated Aurora Mesh — ultra-light aqua/indigo on white */
.body-background-color::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background:
    radial-gradient(ellipse at 15% 25%, rgba(6, 182, 212, 0.07)   0%, transparent 50%),
    radial-gradient(ellipse at 80% 15%, rgba(79, 70, 229, 0.05)   0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(14, 165, 233, 0.06)  0%, transparent 40%),
    radial-gradient(ellipse at 85% 65%, rgba(6, 182, 212, 0.04)   0%, transparent 45%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
  animation: auroraDrift 30s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
  0%   { transform: translate(0, 0)     scale(1)    rotate(0deg);   opacity: 1;    }
  33%  { transform: translate(-4%, 3%)  scale(1.03) rotate(2deg);   opacity: 0.85; }
  66%  { transform: translate(3%, -2%)  scale(0.97) rotate(-1deg);  opacity: 0.95; }
  100% { transform: translate(1%, 1%)   scale(1.01) rotate(1deg);   opacity: 1;    }
}



/* ─── Tech Grid Overlay — light indigo micro-grid ─── */
.tech-grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image:
    linear-gradient(to right, rgba(79, 70, 229, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 70, 229, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}

#tech-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
  background: transparent;
}


/* ═══════════════════════════════════════
   TYPOGRAPHY SYSTEM
   ═══════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

h4 {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
}

/* Premium Gradient Text — Indigo → Aqua */
.text-gradient-premium {
  background: linear-gradient(135deg, var(--indigo-start) 0%, var(--accent-start) 60%, var(--accent-mid) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient {
  background: linear-gradient(135deg, var(--indigo-start) 0%, var(--accent-start) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Section Label */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-start);
  margin-bottom: 0.75rem;
}

.section-label::before {
  content: '';
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--indigo-start), var(--accent-start));
  border-radius: 1px;
}

.section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-primary);
}


/* ═══════════════════════════════════════
   COMPONENT LIBRARY
   ═══════════════════════════════════════ */

/* ─── Premium Card (Light Glassmorphic) ─── */
.card-premium {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
  transition: all var(--duration-base) var(--ease-premium);
  overflow: hidden;
}

.card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-start), var(--indigo-start), transparent);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-premium);
}

.card-premium:hover {
  border-color: rgba(6, 182, 212, 0.35);
  box-shadow:
    var(--shadow-md),
    0 0 40px rgba(6, 182, 212, 0.08),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-4px);
}

.card-premium:hover::before {
  opacity: 1;
}


/* ─── Cyber Card (compatibility alias) ─── */
.cyber-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow:
    var(--shadow-sm),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
  transition: all var(--duration-base) var(--ease-premium);
  overflow: hidden;
}

.cyber-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-start), transparent);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-premium);
}

.cyber-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.2), transparent);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-premium);
}

.cyber-card:hover {
  border-color: rgba(6, 182, 212, 0.3);
  box-shadow:
    var(--shadow-md),
    0 0 40px rgba(6, 182, 212, 0.07),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.95);
  transform: translateY(-4px);
}

.cyber-card:hover::before,
.cyber-card:hover::after {
  opacity: 1;
}


/* ─── Glass Panel ─── */
.glass-panel {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9);
  transition: all var(--duration-base) var(--ease-premium);
}

.glass-panel:hover {
  border-color: rgba(6, 182, 212, 0.3);
  box-shadow:
    var(--shadow-lg),
    0 0 40px rgba(6, 182, 212, 0.08),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.95);
}

.glass-disabled {
  background: var(--bg-secondary) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border-subtle) !important;
}


/* ═══════════════════════════════════════
   BUTTON SYSTEM
   Rectangular · Indigo→Aqua gradient
   Uppercase · Crisp 12–14px text
   ═══════════════════════════════════════ */

/* Primary CTA Button */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 0.8125rem;    /* 13px */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FFFFFF !important;
  background: var(--btn-gradient);
  border: none;
  border-radius: var(--radius-btn);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-premium),
              box-shadow var(--duration-base) var(--ease-premium);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--btn-gradient-hover);
  opacity: 0;
  transition: opacity var(--duration-base) ease;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s var(--ease-premium), height 0.6s var(--ease-premium);
}

.btn-primary:hover {
  transform: scale(1.03) translateY(-1px);
  box-shadow: var(--btn-shadow-hover);
  color: #FFFFFF !important;
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-primary:hover::after {
  width: 300px;
  height: 300px;
}

.btn-primary:active {
  transform: scale(0.99) translateY(0);
  box-shadow: var(--btn-shadow);
}


/* Premium button (legacy compatibility) */
.btn-premium {
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-premium),
              box-shadow var(--duration-base) var(--ease-premium);
  background: var(--btn-gradient);
  color: #ffffff !important;
  border: none;
  border-radius: var(--radius-btn);
  box-shadow: var(--btn-shadow);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.btn-premium::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background: rgba(255, 255, 255, 0.14);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  transition: transform 0.6s var(--ease-premium);
}

.btn-premium:hover {
  transform: scale(1.03) translateY(-1px);
  box-shadow: var(--btn-shadow-hover);
}

.btn-premium:hover::after {
  transform: translate(-50%, -50%) scale(1.3);
}


/* Outline/Ghost Button */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--indigo-start);
  background: transparent;
  border: 1.5px solid var(--indigo-start);
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-premium);
  text-decoration: none;
}

.btn-outline:hover {
  color: #ffffff;
  background: var(--indigo-start);
  border-color: var(--indigo-start);
  box-shadow: 0 6px 24px var(--indigo-glow);
  transform: scale(1.03) translateY(-1px);
}


/* ═══════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════ */

header nav a {
  position: relative;
  transition: color var(--duration-base) var(--ease-premium);
  padding: 0.25rem 0;
  color: var(--text-muted);
}

header nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--indigo-start), var(--accent-start));
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width var(--duration-base) var(--ease-premium);
}

header nav a:hover {
  color: var(--accent-start) !important;
}

header nav a:hover::after {
  width: 100%;
}

header nav a.text-themeAccent::after,
header nav a.nav-active::after {
  width: 100%;
}


/* ═══════════════════════════════════════
   ANIMATIONS & KEYFRAMES
   ═══════════════════════════════════════ */

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

.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fadeUp 0.7s var(--ease-premium) forwards;
  opacity: 0;
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.animate-scale-in {
  animation: scaleIn 0.5s var(--ease-premium) forwards;
  opacity: 0;
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px var(--accent-glow); }
  50%       { box-shadow: 0 0 40px var(--accent-glow), 0 0 60px rgba(6, 182, 212, 0.1); }
}

.animate-glow {
  animation: glowPulse 3s ease-in-out infinite;
}

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

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinSlow 20s linear infinite;
}

/* Shimmer — for skeleton loaders / premium cards */
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}


/* ═══════════════════════════════════════
   MARQUEE (Trust Strip)
   ═══════════════════════════════════════ */

.marquee-container {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 2rem;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
  display: flex;
  gap: 2rem;
  flex-shrink: 0;
  animation: marquee 25s linear infinite;
}

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


/* ═══════════════════════════════════════
   PAGE TRANSITIONS
   ═══════════════════════════════════════ */

.page-container-3d {
  transform-style: preserve-3d;
  perspective: 1200px;
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0);
  transition: transform 0.6s var(--ease-premium), opacity 0.6s ease;
}

.page-container-3d.page-entering {
  opacity: 0;
  transform: translateY(30px) scale(0.97) rotateX(3deg);
}

.page-container-3d.page-exiting {
  opacity: 0;
  transform: translateY(-30px) scale(0.97) rotateX(-3deg);
}

/* Light Indigo curtain */
.transition-curtain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, #4F46E5 0%, #312E81 60%, #06B6D4 100%);
  z-index: 9999;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s cubic-bezier(0.85, 0, 0.15, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.transition-curtain.active {
  transform: scaleY(1);
  transform-origin: top;
}

.transition-logo {
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 6px;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: all 0.4s ease;
  text-shadow: 0 0 30px rgba(6, 182, 212, 0.5);
}

.transition-curtain.active .transition-logo {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.2s;
}


/* ─── Section Perspective ─── */
.section-tilt-3d {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.6s var(--ease-premium), opacity 0.6s ease;
}


/* ═══════════════════════════════════════
   CUSTOM SCROLLBAR — Aqua on light
   ═══════════════════════════════════════ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.35);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-start);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(6, 182, 212, 0.35) var(--bg-secondary);
}


/* ═══════════════════════════════════════
   CHATBOT BUBBLES — Light theme
   ═══════════════════════════════════════ */

.chat-bubble-user {
  background: var(--btn-gradient);
  color: #ffffff;
  border-radius: 14px 14px 0 14px;
  box-shadow: 0 4px 12px var(--indigo-glow);
}

.chat-bubble-bot {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 14px 14px 14px 0;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}


/* ═══════════════════════════════════════
   SWIPER CUSTOMIZATION
   ═══════════════════════════════════════ */

.swiper-pagination-bullet-active {
  background: var(--accent-start) !important;
  opacity: 1 !important;
  width: 28px !important;
  border-radius: 4px !important;
  box-shadow: 0 0 10px var(--accent-glow);
  transition: all var(--duration-base) var(--ease-premium) !important;
}

.swiper-pagination-bullet {
  background: var(--text-dim);
  opacity: 0.35;
  transition: all var(--duration-base) var(--ease-premium);
}

.swiper-pagination-bullet:hover {
  opacity: 0.7;
  background: var(--accent-start);
}

.swiper-button-next,
.swiper-button-prev {
  color: var(--accent-start) !important;
  transition: all var(--duration-base) ease;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 1.1rem !important;
  font-weight: 900;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 8px var(--accent-glow));
}


/* ═══════════════════════════════════════
   FAQ ACCORDION
   ═══════════════════════════════════════ */

.faq-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  transition: all var(--duration-base) var(--ease-premium);
}

.faq-item:hover {
  border-color: rgba(6, 182, 212, 0.25);
  box-shadow: var(--shadow-sm);
}

.faq-item.active {
  border-color: rgba(6, 182, 212, 0.3);
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.06);
}

.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-fast) ease;
}

.faq-trigger:hover {
  color: var(--accent-start);
}

.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--duration-base) var(--ease-premium);
}

.faq-item.active .faq-icon {
  background: var(--btn-gradient);
  transform: rotate(45deg);
}

.faq-icon i {
  font-size: 0.7rem;
  color: var(--accent-start);
  transition: color var(--duration-base) ease;
}

.faq-item.active .faq-icon i {
  color: #ffffff;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-premium),
              padding var(--duration-slow) var(--ease-premium);
}

.faq-item.active .faq-answer {
  max-height: 400px;
}

.faq-answer-inner {
  padding: 0 24px 20px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.7;
  border-top: 1px solid var(--border-subtle);
  padding-top: 16px;
}


/* ═══════════════════════════════════════
   AURORA BLOBS
   ═══════════════════════════════════════ */

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.08;
  z-index: -1;
  pointer-events: none;
}


/* ═══════════════════════════════════════
   3D HERO CANVAS
   ═══════════════════════════════════════ */

#hero-3d-canvas {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 768px) {
  #hero-3d-canvas {
    width: 100%;
    height: 50%;
    top: auto;
    bottom: 0;
    opacity: 0.5;
  }
}


/* ═══════════════════════════════════════
   RESPONSIVE UTILITIES
   ═══════════════════════════════════════ */

@media (max-width: 768px) {
  .tech-grid-overlay {
    background-size: 40px 40px;
    opacity: 0.3;
  }

  .body-background-color::before {
    filter: blur(60px);
  }
}

@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }

  .btn-primary,
  .btn-outline,
  .btn-premium {
    padding: 11px 20px;
    font-size: 0.75rem;
  }
}


/* ═══════════════════════════════════════
   BOOTSTRAP ACCORDION OVERRIDES
   ═══════════════════════════════════════ */

.accordion-button {
  background: transparent !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.accordion-button:not(.collapsed) {
  background: transparent !important;
  color: var(--accent-start) !important;
}

.accordion-button::after {
  display: none;
}

.accordion-button:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

.accordion-collapse,
.accordion-body {
  background: transparent;
}


/* ═══════════════════════════════════════
   SELECTION & HIGHLIGHTS
   ═══════════════════════════════════════ */

::selection {
  background: rgba(6, 182, 212, 0.2);
  color: var(--text-primary);
}

::-moz-selection {
  background: rgba(6, 182, 212, 0.2);
  color: var(--text-primary);
}


/* ═══════════════════════════════════════
   UTILITY HELPERS
   ═══════════════════════════════════════ */

.no-scrollbar::-webkit-scrollbar { display: none; }

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Indigo badge / chip */
.badge-indigo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--indigo-subtle);
  border: 1px solid var(--border-indigo);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--indigo-start);
  text-transform: uppercase;
}

/* Aqua badge / chip */
.badge-aqua {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--accent-subtle);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--accent-start);
  text-transform: uppercase;
}

/* Stat number highlight */
.stat-number {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  background: var(--btn-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Input fields — light theme */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-start) !important;
  box-shadow: 0 0 0 3px var(--accent-subtle) !important;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-dim) !important;
}


/* ═══════════════════════════════════════
   WHY CHOOSE US — Action Flow Cards
   ═══════════════════════════════════════ */

/* Stat Cards */
.why-stat-card {
  border: 1px solid rgba(6, 182, 212, 0.1);
  transition: all 0.4s var(--ease-premium);
  box-shadow: 0 2px 12px rgba(30, 27, 75, 0.04);
}

.why-stat-card:hover {
  border-color: rgba(6, 182, 212, 0.25);
  box-shadow: 0 8px 32px rgba(79, 70, 229, 0.1);
  transform: translateY(-6px);
}

.why-stat-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: whyShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

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

/* Why Cards */
.why-card {
  transition: all 0.4s var(--ease-premium);
  box-shadow: 0 2px 12px rgba(30, 27, 75, 0.04), inset 0 1px 0 0 rgba(255,255,255,0.9);
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(30, 27, 75, 0.1), inset 0 1px 0 0 rgba(255,255,255,0.95);
  border-color: rgba(6, 182, 212, 0.25) !important;
}

.why-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--card-color), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.why-card:hover .why-card-accent {
  opacity: 1;
}

.why-bullet-dot {
  transition: transform 0.3s var(--ease-bounce);
}

.why-card:hover .why-bullet-dot {
  transform: scale(1.6);
}


/* ═══════════════════════════════════════
   HOW WE WORK — Creative Animated Timeline
   ═══════════════════════════════════════ */

/* Floating orbital decorations */
.hww-orbital {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(6, 182, 212, 0.08);
  pointer-events: none;
  z-index: 0;
}

.hww-orbital-1 {
  width: 600px;
  height: 600px;
  top: -100px;
  right: -200px;
  animation: hwwOrbit 35s linear infinite;
}

.hww-orbital-2 {
  width: 400px;
  height: 400px;
  bottom: -80px;
  left: -150px;
  border-color: rgba(79, 70, 229, 0.06);
  animation: hwwOrbit 25s linear infinite reverse;
}

.hww-orbital-3 {
  width: 200px;
  height: 200px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-color: rgba(6, 182, 212, 0.05);
  animation: hwwOrbit 18s linear infinite;
}

@keyframes hwwOrbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Central vertical connector line (desktop) */
.hww-connector-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  z-index: 1;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(79, 70, 229, 0.15) 10%,
    rgba(6, 182, 212, 0.2) 30%,
    rgba(139, 92, 246, 0.2) 50%,
    rgba(16, 185, 129, 0.2) 70%,
    rgba(245, 158, 11, 0.15) 90%,
    transparent 100%
  );
}

/* Animated flowing light on connector */
.hww-connector-line::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 60px;
  border-radius: 4px;
  background: linear-gradient(180deg, transparent, var(--accent-start), transparent);
  animation: hwwFlowDown 4s ease-in-out infinite;
  filter: blur(1px);
}

@keyframes hwwFlowDown {
  0%   { top: -10%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Timeline card */
.hww-card {
  transition: all 0.5s var(--ease-premium);
  box-shadow: 0 4px 20px rgba(30, 27, 75, 0.06);
}

.hww-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(30, 27, 75, 0.12);
}

.hww-card-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, var(--step-color, #06B6D4), transparent 70%);
  mix-blend-mode: overlay;
}

.hww-card:hover .hww-card-glow {
  opacity: 0.08;
}

/* Expand details on card hover */
.hww-card:hover .hww-details {
  max-height: 120px !important;
  opacity: 1 !important;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(6, 182, 212, 0.1);
}

/* Timeline node */
.hww-node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pulse rings around nodes */
.hww-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 2px solid var(--node-color, #4F46E5);
  opacity: 0;
  z-index: 0;
  animation: hwwPulse 3s ease-out infinite;
}

.hww-pulse-ring-2 {
  animation-delay: 1.5s;
}

@keyframes hwwPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; }
}

/* Orbiting step number */
.hww-orbit-number {
  position: absolute;
  top: -8px;
  right: -10px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--node-color, #4F46E5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: hwwOrbitBob 3s ease-in-out infinite;
}

@keyframes hwwOrbitBob {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(3px, -3px); }
}

/* Mobile timeline line */
.hww-mobile-line {
  background: linear-gradient(180deg,
    rgba(79, 70, 229, 0.2) 0%,
    rgba(6, 182, 212, 0.2) 25%,
    rgba(139, 92, 246, 0.2) 50%,
    rgba(16, 185, 129, 0.2) 75%,
    rgba(245, 158, 11, 0.2) 100%
  );
}

/* Mobile: hide orbitals */
@media (max-width: 1023px) {
  .hww-orbital {
    display: none;
  }
}

/* Team Showcase Section Overhaul (strictly no glassmorphism or blurred backgrounds) */
.team-member-card {
  background: var(--themeSec, #ffffff) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 2px solid var(--themeBorder, rgba(15, 23, 42, 0.08)) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease, box-shadow 0.4s ease !important;
}
.team-member-card:hover {
  transform: translateY(-8px) !important;
  border-color: var(--themeAccent, #7C5CFF) !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}
.team-social-link {
  background: rgba(15, 23, 42, 0.06) !important;
  color: var(--themeText, #0f172a) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
}
.team-social-link:hover {
  color: #ffffff !important;
  transform: scale(1.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Policy & Legal Pages Prose Formatting */
.prose h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-size: 1.125rem !important; /* 18px */
  font-weight: 800 !important;
  color: var(--themeText, #0f172a) !important;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.4 !important;
}
.prose p {
  font-size: 0.8125rem !important; /* 13px */
  color: var(--themeText, #334155) !important;
  line-height: 1.7 !important;
  margin-bottom: 1.25rem !important;
}
.prose ul {
  list-style-type: disc !important;
  padding-left: 1.5rem !important;
  margin-bottom: 1.25rem !important;
}
.prose li {
  font-size: 0.8125rem !important;
  color: var(--themeText, #334155) !important;
  line-height: 1.7 !important;
  margin-bottom: 0.5rem !important;
}
.prose strong {
  color: var(--themeText, #0f172a) !important;
  font-weight: 700 !important;
}