/* ═══════════════════════════════════════════════════════════
   CALM — Simple, professional, conversion-focused (loads last)
   ═══════════════════════════════════════════════════════════ */

/* ─── Turn down visual noise site-wide ─── */
.site-ambient,
.section-shine,
.hero-orbs,
.cta-banner-glow,
.cta-banner-inner::before,
.site-footer::before {
  display: none !important;
}

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

body::after {
  display: none !important;
}

body {
  background: var(--bg-deep) !important;
}

/* Subtle section backgrounds only */
.section-tint-teal,
.section-tint-warm,
.section-tint-purple {
  background: var(--bg-primary) !important;
}

main > section {
  border-top-color: rgba(255, 255, 255, 0.04) !important;
}

/* ─── Header: clean bar ─── */
.site-header {
  background: rgba(5, 10, 18, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.nav-links a:hover,
.nav-links a.active {
  color: #3db8bf !important;
  text-shadow: none !important;
}

.nav-cta {
  background: #2d9ea3 !important;
  border: none !important;
  box-shadow: none !important;
  color: #fff !important;
}

.nav-cta:hover {
  background: #3db8bf !important;
  box-shadow: none !important;
}

/* ─── Typography: clear, no tricks ─── */
.eyebrow,
.eyebrow--teal {
  color: #3db8bf !important;
  letter-spacing: 0.16em !important;
}

.eyebrow::before {
  box-shadow: none !important;
  background: linear-gradient(90deg, #3db8bf, transparent) !important;
}

.text-gradient {
  background: linear-gradient(135deg, #fff 0%, #c9d4e0 50%, #3db8bf 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.section-header--center .eyebrow {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.section-header--center h2::after {
  width: 36px !important;
  height: 2px !important;
  background: #3db8bf !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* ─── Buttons: solid, trustworthy ─── */
.btn {
  border-radius: 6px !important;
  letter-spacing: 0.04em !important;
}

.btn-primary {
  background: #2d9ea3 !important;
  border: none !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  background: #3db8bf !important;
  box-shadow: 0 4px 16px rgba(45, 158, 163, 0.3) !important;
  transform: translateY(-1px) !important;
}

.btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: none !important;
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ─── Cards: flat professional ─── */
.stat-card,
.pain-card,
.how-step,
.outcome-card,
.testimonial-card,
.service-card,
.service-detail,
.work-item,
.value-card,
.bento-item,
.faq-item,
.blog-card,
.ai-cap,
.intro-feature,
.contact-form-wrap,
.tech-matcher,
.matcher-result {
  background: var(--bg-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.stat-card::after,
.service-card::after,
.bento-item::after {
  display: none !important;
}

.stat-card:hover,
.pain-card:hover,
.service-card:hover,
.bento-item:hover,
.outcome-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(61, 184, 191, 0.25) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

.stat-card::before,
.outcome-card::before {
  box-shadow: none !important;
  height: 2px !important;
}

/* ─── Heroes ─── */
.page-hero-overlay,
.hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(5, 10, 18, 0.75) 0%,
    rgba(5, 10, 18, 0.9) 100%
  ) !important;
}

.page-hero::before {
  display: none !important;
}

.hero-3d-wrap,
.hero-orbit-ring,
.hero-particles {
  display: none !important;
}

.hero-particles {
  opacity: 0 !important;
}

.page-hero-content::after {
  display: none !important;
}

/* ─── CTA blocks ─── */
.cta-strip-inner,
.cta-banner-inner {
  background: var(--bg-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

/* ─── Footer ─── */
.site-footer {
  background: var(--bg-primary) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.footer-col h4 {
  color: #3db8bf !important;
}

/* ─── Forms ─── */
.form-group input:focus,
.form-group textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #3db8bf !important;
  box-shadow: 0 0 0 2px rgba(61, 184, 191, 0.15) !important;
}

/* ─── Widgets ─── */
.chat-launcher,
.whatsapp-float,
.scroll-top {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
}

/* ═══ HOMEPAGE ═══ */
.page-home .hero {
  min-height: clamp(480px, 72vh, 640px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.page-home .hero-content h1 {
  font-size: clamp(2.25rem, 5vw, 3.5rem) !important;
  line-height: 1.08 !important;
}

.page-home .hero-trust {
  margin-top: 1.75rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  gap: 0.5rem 1.5rem !important;
}

.page-home .hero-trust-item {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 0.82rem !important;
  color: #a8bdd0 !important;
}

.page-home .stats-strip {
  margin-top: 0 !important;
  padding: 2.5rem 0 !important;
}

.page-home .stat-card:hover {
  transform: none !important;
}

.page-home main > section:not(.hero):not(.stats-strip) {
  padding-top: clamp(48px, 7vw, 80px) !important;
  padding-bottom: clamp(48px, 7vw, 80px) !important;
}

.page-home .section-header {
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem) !important;
}

.page-home .section-header h2 {
  font-size: clamp(1.85rem, 3.5vw, 2.75rem) !important;
}

.page-home .marquee-wrap::before,
.page-home .marquee-wrap::after {
  display: none;
}

.page-home .logo-item {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.page-home .logo-item:hover {
  box-shadow: none !important;
  border-color: rgba(61, 184, 191, 0.3) !important;
}

.page-home .service-card {
  min-height: 300px !important;
}

.page-home .bento-item:hover {
  transform: none !important;
}

.page-home .compare-highlight {
  color: #3db8bf !important;
  text-shadow: none !important;
}

.page-home .how-step-num {
  text-shadow: none !important;
  color: #3db8bf !important;
}

.page-home #ai-matrix-canvas {
  display: none !important;
}

.page-home .ai-core-wrap,
.page-home .ai-demo {
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.page-home .ai-demo-dot {
  animation: none !important;
  background: #34d399 !important;
  box-shadow: none !important;
}

.page-home .cta-banner-content h2 {
  font-size: clamp(1.85rem, 3.5vw, 2.75rem) !important;
}

@media (max-width: 768px) {
  .page-home .hero {
    min-height: auto !important;
    padding: 2rem 0 2.5rem !important;
  }

  .page-home .stats-strip {
    padding: 2rem 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stat-card:hover,
  .btn-primary:hover {
    transform: none !important;
  }
}