/* =====================================================================
   DID CINEMATIC OVERRIDE for the product detail pages (/products/*).
   Loaded AFTER each page's styles.css + did-suite-style.css so it wins.
   Re-themes the suite to the main-site cinematic palette (#020A19 + electric
   blue + Space Grotesk) WITHOUT changing any page content/copy.
   ===================================================================== */

:root {
  /* per-product styles.css var names (shared across the suite) */
  --bg-primary: #020A19;
  --bg-secondary: #04101F;
  --accent-blue: #1E6FFF;
  --accent-purple: #6EC1FF;   /* unify purple/gold accents to blue-glow */
  --text-primary: #F4F8FF;
  --text-secondary: #93A7C4;
  --glass-bg: rgba(110, 193, 255, 0.05);
  --glass-border: rgba(110, 193, 255, 0.12);
  /* shared did-suite-style.css var names */
  --did-blue: #1E6FFF;
  --did-blue-deep: #0B3FBF;
  --did-teal: #6EC1FF;
  --did-bg: #020A19;
  --did-panel: rgba(2, 10, 25, 0.84);
  --did-border: rgba(110, 193, 255, 0.12);
  --did-text: #F4F8FF;
  --did-muted: #93A7C4;
}

html { background: #020A19; }
body {
  background: transparent !important;
  color: #F4F8FF;
  -webkit-font-smoothing: antialiased;
}

/* cinematic backdrop layers (injected canvas + vignette) sit BEHIND all content
   via z-index:-1 so we never disturb the page's own positioned/fixed elements */
.did-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.did-vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 38%, transparent 44%, rgba(2,6,16,0.5) 100%); }

/* display type → Space Grotesk */
h1, h2, h3, .section-title, .hero h1, .hero-title, .hero-section h1, .logo-text, .did-suite-product-name {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.01em;
}

/* accent text colors that were hardcoded cyan/purple → blue family */
[style*="color: #00d4ff"], [style*="color:#00d4ff"],
[style*="color: #a855f7"], [style*="color:#a855f7"] { color: #6EC1FF !important; }

/* primary buttons → DID gradient + glow */
.btn-primary, .btn-primary-small, .pricing-btn, button.btn-primary, .btn-cta, .cta-button {
  background: linear-gradient(135deg, #0B3FBF, #1E6FFF) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 36px rgba(11, 63, 191, 0.40) !important;
}
.btn-primary:hover, .btn-primary-small:hover, .pricing-btn:hover, .btn-cta:hover, .cta-button:hover {
  background: linear-gradient(135deg, #1E6FFF, #6EC1FF) !important;
  box-shadow: 0 14px 48px rgba(30, 111, 255, 0.5) !important;
}
.btn-secondary {
  border: 1px solid var(--glass-border) !important;
  color: #F4F8FF !important;
  background: rgba(30, 111, 255, 0.05) !important;
}
.btn-secondary:hover { border-color: #1E6FFF !important; box-shadow: 0 0 16px rgba(30,111,255,0.35) !important; }

/* navbar → translucent dark + blur (matches main site) */
.navbar, .nav, .nav-inner {
  background: rgba(2, 10, 25, 0.7) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--glass-border) !important;
}

/* cards / panels → DID glass + blue glow on hover */
.card, .feature-card, .pricing-card, .glass-panel, .pain-card, .trust-card, .testimonial-card, .stat-item {
  border-color: var(--glass-border) !important;
  background: linear-gradient(180deg, rgba(110,193,255,0.05), rgba(2,10,25,0.45)) !important;
}
.card:hover, .feature-card:hover, .pricing-card:hover, .pain-card:hover, .trust-card:hover, .testimonial-card:hover {
  border-color: rgba(30, 111, 255, 0.45) !important;
  box-shadow: 0 0 28px rgba(30, 111, 255, 0.26) !important;
}
.pricing-card.featured, .pricing-card.popular, .pricing-card.highlighted {
  border-color: rgba(30, 111, 255, 0.6) !important;
  box-shadow: 0 0 44px rgba(30, 111, 255, 0.3) !important;
}

/* accent rules / dividers / gradients that were cyan/purple */
.gradient-text, .text-gradient {
  background: linear-gradient(135deg, #F4F8FF 0%, #6EC1FF 60%, #1E6FFF 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important;
}
a { color: #6EC1FF; }
::selection { background: rgba(30, 111, 255, 0.35); color: #fff; }