/* ═══════════════════════════════════════════════════════════
   AI THEME — Futuristic site-wide polish (loads last)
   ═══════════════════════════════════════════════════════════ */

:root {
  --ai-cyan: #00e5ff;
  --ai-teal: #3db8bf;
  --ai-violet: #8b5cf6;
  --ai-magenta: #c084fc;
  --ai-gold: #dfc07a;
  --glow-cyan: rgba(0, 229, 255, 0.35);
  --glow-teal: rgba(61, 184, 191, 0.4);
  --glow-violet: rgba(139, 92, 246, 0.3);
  --glass: rgba(8, 14, 26, 0.78);
  --glass-border: rgba(61, 184, 191, 0.14);
  --glass-highlight: rgba(255, 255, 255, 0.05);
  --grid-line: rgba(61, 184, 191, 0.04);
}

/* ─── Re-enable decor (overrides pro-fix) ─── */
.site-ambient {
  display: block !important;
}

.section-shine {
  display: block !important;
}

#future-canvas {
  opacity: 0.32 !important;
}

.cta-banner-inner::before,
.cta-banner-glow,
.site-footer::before {
  display: block !important;
}

/* ─── Global atmosphere ─── */
body {
  background:
    radial-gradient(ellipse 90% 60% at 50% -15%, rgba(61, 184, 191, 0.14), transparent 55%),
    radial-gradient(ellipse 55% 45% at 100% 40%, rgba(139, 92, 246, 0.09), transparent 50%),
    radial-gradient(ellipse 45% 40% at 0% 75%, rgba(201, 169, 98, 0.07), transparent 50%),
    var(--bg-deep) !important;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 35%, black 20%, transparent 75%);
  opacity: 0.85;
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Ambient orbs — brighter AI palette */
.ambient-orb--teal {
  background: radial-gradient(circle, rgba(0, 229, 255, 0.2), transparent 70%) !important;
  opacity: 0.65 !important;
}

.ambient-orb--gold {
  background: radial-gradient(circle, rgba(201, 169, 98, 0.16), transparent 70%) !important;
}

.ambient-orb--violet {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.18), transparent 70%) !important;
  opacity: 0.6 !important;
}

/* Section tints */
.section-tint-teal {
  background:
    linear-gradient(180deg, rgba(61, 184, 191, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 15% 25%, rgba(0, 229, 255, 0.06), transparent) !important;
}

.section-tint-warm {
  background:
    linear-gradient(180deg, rgba(201, 169, 98, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 85% 20%, rgba(245, 158, 66, 0.05), transparent) !important;
}

.section-tint-purple {
  background:
    linear-gradient(180deg, rgba(139, 92, 246, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 35% at 50% 0%, rgba(192, 132, 252, 0.06), transparent) !important;
}

main > section {
  border-top-color: rgba(61, 184, 191, 0.06) !important;
}

.section-shine {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 229, 255, 0.45),
    rgba(139, 92, 246, 0.35),
    rgba(201, 169, 98, 0.3),
    transparent
  ) !important;
  box-shadow: 0 0 20px rgba(61, 184, 191, 0.15);
}

/* ─── Header ─── */
.site-header {
  background: rgba(5, 10, 18, 0.82) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important;
}

.site-header.scrolled {
  background: rgba(4, 8, 14, 0.94) !important;
  border-bottom-color: rgba(61, 184, 191, 0.2) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), 0 0 1px rgba(61, 184, 191, 0.3) !important;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ai-cyan) !important;
  text-shadow: 0 0 24px rgba(0, 229, 255, 0.25);
}

.nav-cta {
  background: linear-gradient(135deg, rgba(61, 184, 191, 0.25), rgba(45, 158, 163, 0.35)) !important;
  border: 1px solid rgba(61, 184, 191, 0.45) !important;
  box-shadow: 0 0 20px rgba(61, 184, 191, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.nav-cta:hover {
  box-shadow: 0 0 28px rgba(61, 184, 191, 0.4) !important;
}

/* ─── Typography & labels ─── */
.eyebrow,
.eyebrow--teal {
  color: var(--ai-cyan) !important;
  letter-spacing: 0.2em !important;
}

.eyebrow::before {
  background: linear-gradient(90deg, var(--ai-cyan), var(--ai-violet), transparent) !important;
  box-shadow: 0 0 12px var(--glow-cyan);
}

.text-gradient {
  background: linear-gradient(120deg, #fff 0%, var(--ai-cyan) 35%, var(--ai-gold) 70%, var(--ai-violet) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.section-header--center .eyebrow {
  background: rgba(61, 184, 191, 0.1) !important;
  border: 1px solid rgba(61, 184, 191, 0.22) !important;
  box-shadow: 0 0 30px rgba(61, 184, 191, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  border-radius: 100px !important;
}

.section-header--center h2::after {
  background: linear-gradient(90deg, var(--ai-cyan), var(--ai-violet), var(--ai-gold)) !important;
  box-shadow: 0 0 16px rgba(61, 184, 191, 0.4);
}

/* ─── Buttons ─── */
.btn-primary {
  background: linear-gradient(135deg, #3db8bf 0%, #1a8a90 50%, #2d6a6e 100%) !important;
  border: 1px solid rgba(0, 229, 255, 0.35) !important;
  color: #fff !important;
  box-shadow:
    0 4px 20px rgba(61, 184, 191, 0.35),
    0 0 40px rgba(61, 184, 191, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.btn-primary:hover {
  box-shadow:
    0 8px 32px rgba(61, 184, 191, 0.5),
    0 0 50px rgba(0, 229, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) !important;
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(61, 184, 191, 0.25) !important;
  backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  background: rgba(61, 184, 191, 0.1) !important;
  border-color: var(--ai-cyan) !important;
  color: var(--ai-cyan) !important;
  box-shadow: 0 0 24px rgba(0, 229, 255, 0.12) !important;
}

/* ─── Glass cards (site-wide) ─── */
.stat-card,
.pain-card,
.how-step,
.outcome-card,
.testimonial-card,
.service-card,
.service-detail,
.work-item,
.value-card,
.bento-item,
.faq-item,
.faq-preview-item,
.blog-card,
.award-card,
.ai-cap,
.intro-feature,
.contact-form-wrap,
.tech-matcher,
.matcher-result,
.quote-option {
  background: linear-gradient(
    155deg,
    rgba(21, 34, 56, 0.88) 0%,
    rgba(12, 20, 36, 0.92) 100%
  ) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(10px);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 var(--glass-highlight) !important;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s,
    box-shadow 0.35s !important;
}

.stat-card:hover,
.pain-card:hover,
.how-step:hover,
.outcome-card:hover,
.service-card:hover,
.service-detail:hover,
.value-card:hover,
.bento-item:hover,
.faq-item:hover,
.blog-card:hover,
.ai-cap:hover,
.intro-feature:hover {
  border-color: rgba(61, 184, 191, 0.38) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(61, 184, 191, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.stat-card::before,
.outcome-card::before,
.pain-card::before {
  box-shadow: 0 0 12px var(--stat-accent, var(--ai-teal));
}

.stat-card-icon,
.pain-card-icon,
.how-step-num {
  border-color: rgba(61, 184, 191, 0.2) !important;
  box-shadow: 0 0 16px rgba(61, 184, 191, 0.08);
}

/* Service cards — holographic edge */
.service-card,
.bento-item {
  position: relative;
  overflow: hidden;
}

.service-card::after,
.bento-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.2), transparent 40%, rgba(139, 92, 246, 0.15));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
}

.service-card:hover::after,
.bento-item:hover::after {
  opacity: 1;
}

/* ─── Inner page heroes ─── */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 45% at 85% 35%, rgba(0, 229, 255, 0.1), transparent 55%),
    radial-gradient(ellipse 40% 40% at 10% 75%, rgba(139, 92, 246, 0.08), transparent 50%);
}

.page-hero-overlay {
  background:
    linear-gradient(105deg, rgba(4, 8, 14, 0.88) 0%, rgba(4, 8, 14, 0.65) 45%, rgba(4, 8, 14, 0.4) 70%, rgba(4, 8, 14, 0.85) 100%),
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(0, 229, 255, 0.12), transparent 55%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(139, 92, 246, 0.08), transparent) !important;
}

.page-hero-content::after {
  display: block !important;
  background: linear-gradient(90deg, var(--ai-cyan), var(--ai-violet)) !important;
  box-shadow: 0 0 12px var(--glow-cyan);
}

/* ─── Homepage sections ─── */
.page-home .pain-section,
.page-home .intro,
.page-home .services-preview,
.page-home .featured-work,
.page-home .testimonials,
.page-home .how-section,
.page-home .faq-preview-section,
.page-home .ai-lab,
.page-home .tech-matcher-section {
  background:
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(139, 92, 246, 0.05), transparent),
    var(--bg-primary) !important;
}

.page-home .compare-section,
.page-home .outcomes-strip,
.page-home .ba-section {
  background:
    radial-gradient(ellipse 60% 50% at 10% 50%, rgba(61, 184, 191, 0.06), transparent),
    var(--bg-surface) !important;
}

/* AI Lab block */
.ai-lab,
.ai-demo,
.ai-core-wrap {
  border-color: rgba(61, 184, 191, 0.2) !important;
}

.ai-core-pulse {
  border-color: rgba(0, 229, 255, 0.25) !important;
  box-shadow: 0 0 40px rgba(61, 184, 191, 0.15) !important;
}

.ai-cap-icon {
  color: var(--ai-cyan) !important;
  text-shadow: 0 0 20px var(--glow-cyan);
}

/* ─── CTA blocks ─── */
.cta-strip {
  background: transparent !important;
}

.cta-strip-inner {
  background: linear-gradient(135deg, rgba(15, 26, 44, 0.95), rgba(21, 34, 56, 0.9)) !important;
  border: 1px solid rgba(61, 184, 191, 0.22) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), 0 0 60px rgba(61, 184, 191, 0.06) !important;
}

.cta-banner-inner {
  background: linear-gradient(160deg, rgba(21, 34, 56, 0.95), rgba(10, 18, 32, 0.98)) !important;
  border: 1px solid rgba(61, 184, 191, 0.2) !important;
  box-shadow: 0 0 80px rgba(61, 184, 191, 0.08) !important;
}

.cta-banner-glow {
  opacity: 0.6 !important;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(0, 229, 255, 0.15), transparent 70%) !important;
}

/* ─── Footer ─── */
.site-footer {
  background: linear-gradient(180deg, var(--bg-primary), var(--bg-deep)) !important;
  border-top: 1px solid rgba(61, 184, 191, 0.15) !important;
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(500px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ai-cyan), var(--ai-violet), transparent);
  box-shadow: 0 0 20px var(--glow-cyan);
  opacity: 0.7;
}

.footer-col h4 {
  color: var(--ai-cyan) !important;
}

.footer-col a:hover {
  color: var(--ai-cyan) !important;
}

/* ─── Forms ─── */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--ai-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12), 0 0 20px rgba(61, 184, 191, 0.15) !important;
}

/* ─── Testimonials ─── */
.testimonial-card {
  border-left: 2px solid rgba(61, 184, 191, 0.35) !important;
}

.testimonial-quote::before {
  color: var(--ai-cyan) !important;
  opacity: 0.4;
}

/* ─── Marquee / chips ─── */
.marquee-chip,
.logos-track .logo-item {
  border-color: rgba(61, 184, 191, 0.15) !important;
  background: rgba(61, 184, 191, 0.05) !important;
}

/* ─── Chat & float widgets ─── */
.chat-launcher,
.whatsapp-float {
  box-shadow: 0 4px 24px rgba(61, 184, 191, 0.35), 0 0 40px rgba(0, 229, 255, 0.1) !important;
}

.chat-panel {
  border: 1px solid rgba(61, 184, 191, 0.2) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(61, 184, 191, 0.08) !important;
}

.scroll-top {
  border: 1px solid rgba(61, 184, 191, 0.3) !important;
  box-shadow: 0 0 20px rgba(61, 184, 191, 0.2) !important;
}

/* ─── Compare / tech ─── */
.compare-table th {
  color: var(--ai-cyan) !important;
}

.tech-matcher {
  border-color: rgba(139, 92, 246, 0.2) !important;
}

.matcher-result {
  border-color: rgba(0, 229, 255, 0.2) !important;
  box-shadow: 0 0 30px rgba(61, 184, 191, 0.08) !important;
}

/* ─── FAQ ─── */
.faq-item.open {
  border-color: rgba(61, 184, 191, 0.35) !important;
  box-shadow: 0 0 24px rgba(61, 184, 191, 0.08) !important;
}

.faq-question {
  color: var(--text-primary) !important;
}

/* ─── Preloader ─── */
.preloader-progress {
  background: linear-gradient(90deg, var(--ai-cyan), var(--ai-violet), var(--ai-gold)) !important;
  box-shadow: 0 0 12px var(--glow-cyan);
}

@media (prefers-reduced-motion: reduce) {
  body::after,
  .ambient-orb,
  #future-canvas {
    display: none !important;
  }

  .site-ambient {
    display: none !important;
  }
}