/* ═══════════════════════════════════════════════════
   DARK MODE FIXES — Glassmorphism Cards & Contrast
   Covers both style.css and style.v9.css
   ═══════════════════════════════════════════════════ */

/* ── Features Section (style.css) — Dark ── */
.features-section {
  background: radial-gradient(circle at 20% 80%, rgba(37,99,235,.06) 0, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(99,102,241,.04) 0, transparent 50%),
    var(--navy) !important;
}

.features-section .section-label {
  color: var(--blue-light) !important;
  border-color: rgba(37,99,235,.25) !important;
  background: rgba(37,99,235,.1) !important;
}

.features-section .section-title {
  background: linear-gradient(135deg, #60a5fa, #a78bfa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.features-section .section-subtitle {
  color: var(--text-secondary) !important;
}

/* ── Feature Cards — Dark Glassmorphism (style.css grid version) ── */
.features-grid .feature-card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.1) !important;
}

.features-grid .feature-card::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent) !important;
}

.features-grid .feature-card:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(37,99,235,.25) !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.35), 0 0 60px rgba(37,99,235,.08) !important;
}

.features-grid .feature-card h3 {
  color: #f0f4ff !important;
}

.features-grid .feature-card p {
  color: #94a3c8 !important;
}

/* ── Feature Cards — Dark Glassmorphism (style.v9.css scroll version) ── */
.feature-card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.1) !important;
}

.feature-card::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent) !important;
}

.feature-card:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(37,99,235,.25) !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.35), 0 0 60px rgba(37,99,235,.08) !important;
}

.feature-card .badge {
  color: rgba(96,165,250,.35) !important;
}

.feature-card h3 {
  color: #f0f4ff !important;
}

.feature-card p {
  color: #94a3c8 !important;
}

.feature-card .feature-cta {
  color: var(--blue-light) !important;
}

/* ── Fix broken arrow on ALL feature-cta variants ── */
.feature-cta::after,
.feature-card .feature-cta::after {
  content: '\2192' !important;
}

/* ── Pricing Section — Dark ── */
.pricing-section {
  background: radial-gradient(circle at 80% 20%, rgba(37,99,235,.06) 0, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(99,102,241,.04) 0, transparent 50%),
    var(--navy) !important;
}

.pricing-section .section-label {
  color: var(--blue-light) !important;
  border-color: rgba(37,99,235,.25) !important;
  background: rgba(37,99,235,.1) !important;
}

.pricing-section .section-title {
  background: linear-gradient(135deg, #60a5fa, #a78bfa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.pricing-section .section-subtitle {
  color: var(--text-secondary) !important;
}

.pricing-section .pricing-card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.1) !important;
}

.pricing-section .pricing-card::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent) !important;
}

.pricing-section .pricing-card:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(37,99,235,.25) !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.35), 0 0 60px rgba(37,99,235,.08) !important;
}

.pricing-section .pricing-card.popular {
  background: rgba(37,99,235,.08) !important;
  border-color: rgba(37,99,235,.35) !important;
  box-shadow: 0 0 40px rgba(37,99,235,.1), 0 8px 32px rgba(0,0,0,.2) !important;
}

.pricing-section .pricing-card.popular:hover {
  border-color: rgba(37,99,235,.5) !important;
  box-shadow: 0 24px 72px rgba(37,99,235,.15), 0 0 80px rgba(37,99,235,.08) !important;
}

.pricing-section .pricing-name {
  color: var(--blue-light) !important;
}

.pricing-section .pricing-price {
  color: #f0f4ff !important;
}

.pricing-section .pricing-price span {
  color: var(--text-muted) !important;
}

.pricing-section .pricing-features li {
  color: var(--text-secondary) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}

.pricing-section .pricing-features li::before {
  color: #fff !important;
}

.pricing-section .btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--indigo)) !important;
  color: #fff !important;
  box-shadow: 0 4px 25px rgba(37,99,235,.3) !important;
}

.pricing-section .btn-outline {
  background: rgba(37,99,235,.1) !important;
  border-color: rgba(37,99,235,.25) !important;
  color: var(--blue-light) !important;
}

.pricing-section .btn-outline:hover {
  background: rgba(37,99,235,.18) !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 30px rgba(37,99,235,.15) !important;
}

/* ── Devices Section — Dark (all breakpoints) ── */
.devices-section {
  background: var(--navy) !important;
}

.devices-section .section-label {
  color: var(--blue-light) !important;
  border-color: rgba(37,99,235,.25) !important;
  background: rgba(37,99,235,.1) !important;
}

.devices-section .section-title {
  background: linear-gradient(135deg, #60a5fa, #a78bfa) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.devices-section .section-subtitle {
  color: var(--text-secondary) !important;
}

.devices-section .app-card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.1) !important;
}

.devices-section .app-card::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent) !important;
}

.devices-section .app-card:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(37,99,235,.25) !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.35), 0 0 60px rgba(37,99,235,.08) !important;
}

.devices-section .app-card-icon {
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(139,92,246,.15)) !important;
  border: 1px solid rgba(99,102,241,.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 16px rgba(99,102,241,.12) !important;
}

.devices-section .app-card-info h4,
.devices-section .app-card h4 {
  color: #f0f4ff !important;
}

.devices-section .app-card-info p,
.devices-section .app-card p {
  color: #94a3c8 !important;
}

/* ── Fix broken arrow on ALL app-cta variants ── */
.app-cta::after,
.devices-section .app-cta::after {
  content: '\2192' !important;
}

.devices-section .app-cta {
  color: var(--blue-light) !important;
}

/* ── Mobile dark override for devices section ── */
@media (max-width: 640px) {
  .devices-section {
    background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 30%, #172554 60%, #0f172a 100%) !important;
  }

  .devices-bg-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 600px 400px at 70% 30%, rgba(99,102,241,.15), transparent 60%),
      radial-gradient(ellipse 400px 400px at 20% 80%, rgba(37,99,235,.1), transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
}

/* ── Fix section subheaders globally ── */
.section-subtitle {
  color: var(--text-secondary) !important;
}

/* ── Fix original price strikethrough ── */
.original-price {
  opacity: .5;
  text-decoration: line-through;
}

/* ── Fix discount badge ── */
.discount-badge {
  background: rgba(37,99,235,.12);
  border: 1px solid rgba(37,99,235,.2);
  color: var(--blue-light);
}

/* ── Blog cards ── */
.blog-card {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.blog-card:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(37,99,235,.25) !important;
}

.blog-card h3 {
  color: #f0f4ff !important;
}

.blog-card p {
  color: var(--text-secondary) !important;
}

/* ── Pricing section overflow for badge ── */
.pricing-section {
  overflow: visible !important;
}

.pricing-section .pricing-grid {
  overflow: visible;
  position: relative;
  z-index: 1;
}

.pricing-section .pricing-card {
  overflow: visible;
}

.pricing-section .pricing-card.popular {
  position: relative;
  z-index: 2;
  margin-top: 22px;
}

.pricing-section .pricing-badge-wrap {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-width: 120px;
  height: auto;
  overflow: visible;
  pointer-events: none;
  z-index: 10;
}

.pricing-section .pricing-badge {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  z-index: 10;
}

/* ── CTA sections ── */
.cta-section {
  background: linear-gradient(135deg, rgba(20,27,51,.8), rgba(8,12,24,.9)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.cta-section h2 {
  color: #f0f4ff !important;
  -webkit-text-fill-color: #f0f4ff !important;
}

/* ── Channel cards ── */
.channel-cat {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.channel-cat:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(37,99,235,.25) !important;
}

/* ── Setup steps ── */
.setup-step {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.setup-step:hover {
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.2) !important;
}

/* ── Contact methods ── */
.contact-method {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

.contact-method:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(37,99,235,.25) !important;
}

/* ── About page inline stats card ── */
.about-grid > div:last-child {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* ── Inline stat boxes on about page ── */
.about-grid [style*="rgba(37,99,235,.06)"] {
  background: rgba(37,99,235,.12) !important;
  border: 1px solid rgba(37,99,235,.25) !important;
}

.about-grid [style*="color:var(--text-muted)"] {
  color: var(--text-secondary) !important;
}