/* ================================================================
   JEMIXO — pages.css
   Cross-page fixes, polished inner-page components
   Covers: products, contact, FAQ, beta, product-detail, services
   ================================================================ */

/* ── Missing CSS variable aliases (dark-mode compat) ── */
:root {
  /* Aliases so dark-mode-written code doesn't break */
  --neon-cyan-visible: var(--teal-mid);      /* was #DDA0DD plum */
  --shadow-neon: 0 8px 30px rgba(73, 15, 70, 0.15), 0 2px 8px rgba(73, 15, 70, 0.08);
  --shadow-neon-hover: 0 16px 48px rgba(73, 15, 70, 0.22), 0 4px 16px rgba(73, 15, 70, 0.12);
  --navy-card2: var(--navy-mid);
}

/* ================================================================
   PAGE HERO — polish for all inner pages
   ================================================================ */
.page-hero {
  background: linear-gradient(145deg, var(--navy) 0%, var(--navy-mid) 100%);
  padding: 80px 0 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(73,15,70,.07) 0%, transparent 65%);
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(122,34,118,.05) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 1; }
.page-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(73,15,70,.07); border: 1px solid rgba(73,15,70,.15);
  border-radius: 100px; padding: 6px 16px; font-size: .78rem;
  color: var(--teal-mid); font-weight: 700; margin-bottom: 18px; letter-spacing: .06em;
}
.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800;
  color: var(--text-dark); margin-bottom: 14px; letter-spacing: -.03em;
}
.page-hero p {
  font-size: 1.05rem; color: var(--text-mid); max-width: 540px;
  margin: 0 auto; line-height: 1.7;
}
.page-title {
  font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800;
  color: var(--text-dark); margin-bottom: 14px; letter-spacing: -.03em;
}
.page-sub {
  font-size: 1.05rem; color: var(--text-mid); max-width: 600px;
  margin: 0 auto 0; line-height: 1.7;
}
.breadcrumb {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-top: 22px; font-size: .82rem; color: var(--text-muted);
}
.breadcrumb a { color: var(--text-mid); transition: color .2s; }
.breadcrumb a:hover { color: var(--teal-mid); }
.breadcrumb span { color: var(--border-dark); }

/* ================================================================
   PRODUCT CARDS — fix dark-mode leftover issues
   ================================================================ */
.prod-tagline { color: var(--teal-mid) !important; }
.prod-card:hover { 
  border-color: rgba(73,15,70,.35) !important; 
  box-shadow: var(--shadow-neon-hover) !important; 
}
.prod-card::before {
  background: radial-gradient(circle closest-side, rgba(73,15,70,.08), transparent) !important;
}
.prod-card:hover::before { opacity: 1; }
.prod-card:hover .prod-icon-wrap {
  background: var(--teal-pale) !important;
  color: var(--teal-mid) !important;
  box-shadow: 0 0 20px rgba(73,15,70,.2) !important;
  border-color: rgba(73,15,70,.25) !important;
}
.prod-card-footer {
  background: var(--navy) !important;
  border-top: 1px solid var(--border) !important;
}
.prod-card-link {
  background: var(--teal) !important;
  color: #fff !important;
}
.prod-card-link:hover { background: var(--teal-dark) !important; }

/* Filter buttons */
.filter-btn.active {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
  box-shadow: var(--shadow-teal) !important;
}
.filter-btn:hover {
  border-color: rgba(73,15,70,.4) !important;
  color: var(--teal-mid) !important;
  background: var(--teal-pale) !important;
}

/* Compare table */
.jemixo-col th { color: var(--teal-mid) !important; background: var(--teal-pale) !important; }
.td-yes { color: var(--teal-dark) !important; }
.compare-section { background: var(--navy) !important; }
.compare-table th { background: var(--navy-mid) !important; }
.compare-table tr:hover td { background: var(--teal-pale) !important; }

/* ================================================================
   CONTACT PAGE — polish
   ================================================================ */
.contact-info-card {
  background: var(--navy-card) !important;
  border: 1px solid var(--border) !important;
}
.ci-icon {
  background: var(--teal-pale) !important;
  border: 1px solid rgba(73,15,70,.15) !important;
  color: var(--teal-mid) !important;
  font-size: 1.1rem !important;
}
.spill.active, .spill:hover {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #fff !important;
}

/* ================================================================
   FAQ PAGE — polish
   ================================================================ */
.faq-question:hover { background: var(--teal-pale) !important; }
.faq-item.open .faq-question { background: var(--teal-pale) !important; color: var(--teal-dark) !important; }
.faq-cat-title { color: var(--teal-mid) !important; border-bottom-color: rgba(73,15,70,.15) !important; }

/* ================================================================
   PRODUCT DETAIL PAGE — fix issues
   ================================================================ */
.feature-block:hover {
  box-shadow: var(--shadow-neon-hover) !important;
  border-color: rgba(73,15,70,.3) !important;
}
.feature-block:hover .fb-icon {
  background: var(--teal-pale) !important;
  color: var(--teal-mid) !important;
  box-shadow: 0 0 20px rgba(73,15,70,.2) !important;
  border-color: rgba(73,15,70,.25) !important;
  transform: scale(1.1) !important;
}
.fb-icon {
  background: var(--teal-pale) !important;
  border: 1px solid rgba(73,15,70,.12) !important;
}
.fb-content h4 { color: var(--text-dark) !important; }
.related-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-neon) !important;
  border-color: rgba(73,15,70,.3) !important;
}
.related-card a { color: var(--teal-mid) !important; }
.section-divider { background: var(--border) !important; }
.ph-features-list li { color: var(--text-dark) !important; }
.ph-tagline { color: var(--teal-mid) !important; }

/* Product detail CTA section — dark bg fix */
section[style*="linear-gradient(135deg,var(--teal-dark"],
section[style*="linear-gradient(135deg, var(--teal-dark"] {
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal-mid) 100%) !important;
}
section[style*="linear-gradient(135deg,var(--teal-dark"] h2,
section[style*="linear-gradient(135deg, var(--teal-dark"] h2,
section[style*="linear-gradient(135deg,var(--teal-dark"] p,
section[style*="linear-gradient(135deg, var(--teal-dark"] p {
  color: #fff !important;
}

/* btn-white for dark gradient bg sections */
.btn-white {
  background: #fff !important;
  color: var(--teal-dark) !important;
  border: none !important;
  font-weight: 700 !important;
}
.btn-white:hover {
  background: rgba(255,255,255,.9) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.2) !important;
}

/* btn-outline-light on DARK bg (gradient CTA sections) */
section[style*="linear-gradient"] .btn-outline-light {
  color: rgba(255,255,255,.9) !important;
  border-color: rgba(255,255,255,.4) !important;
}
section[style*="linear-gradient"] .btn-outline-light:hover {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.7) !important;
  color: #fff !important;
  transform: translateY(-3px) !important;
}

/* ================================================================
   BETA PAGE — fixes
   ================================================================ */
.beta-hero {
  min-height: auto !important;
  padding: 80px 0 80px !important;
}
.beta-card {
  background: var(--navy-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-xl) !important;
}
.bf-input, .bf-select {
  background: var(--navy) !important;
  border-color: var(--border) !important;
  color: var(--text-dark) !important;
}
.bf-input::placeholder { color: var(--text-muted) !important; }
.bf-input:focus, .bf-select:focus {
  border-color: var(--teal-mid) !important;
  background: var(--teal-pale) !important;
  box-shadow: 0 0 0 4px rgba(73,15,70,.1) !important;
}
.bf-select option { background: var(--navy-card) !important; color: var(--text-dark) !important; }
.bf-label { color: var(--text-mid) !important; }
.perk-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--shadow-neon-hover) !important;
  border-color: rgba(73,15,70,.3) !important;
}
/* spots bar */
.sp-bar { background: var(--navy-mid) !important; }
.sp-fill { background: linear-gradient(90deg, var(--teal), var(--teal-mid)) !important; }
.live-dot { background: var(--gold) !important; }
/* beta spots text */
.beta-hero p { color: var(--text-mid) !important; }

/* ================================================================
   SERVICES PAGES — polish
   ================================================================ */
.page-hero .section-tag {
  display: inline-block;
  margin-bottom: 14px;
}
/* mobile stack tech badges */
.badge {
  display: inline-flex; align-items: center;
  padding: 8px 16px; border-radius: 100px;
  font-size: .82rem; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--navy-card);
  color: var(--text-dark);
  transition: all .25s var(--ease);
}
.badge:hover {
  background: var(--teal-pale);
  border-color: rgba(73,15,70,.25);
  color: var(--teal-mid);
}

/* ================================================================
   BENTO CARD HOVER — fix dark-mode neon-cyan reference
   ================================================================ */
.bento-card:hover {
  border-color: rgba(73,15,70,.3) !important;
  box-shadow: var(--shadow-neon) !important;
}

/* ================================================================
   GENERAL IMPROVEMENTS
   ================================================================ */
/* Form elements */
.form-input, .form-select, .form-textarea {
  transition: border-color .25s, box-shadow .25s;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--teal-mid);
  box-shadow: 0 0 0 3px rgba(73,15,70,.1);
  outline: none;
}

/* Pricing card in product-detail */
.pricing-card {
  background: var(--navy-card) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1.5px solid var(--border) !important;
}

/* Section dividers */
.section-divider {
  height: 1px;
  background: var(--border) !important;
  margin: 64px 0;
}

/* Reveal animation fix for inner pages */
.reveal:not(.visible) {
  opacity: 0;
  transform: translateY(24px);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-left:not(.visible) { opacity: 0; transform: translateX(-30px); }
.reveal-left.visible { opacity: 1; transform: none; }
.reveal-right:not(.visible) { opacity: 0; transform: translateX(30px); }
.reveal-right.visible { opacity: 1; transform: none; }

/* ================================================================
   GLOBAL UTILITY
   ================================================================ */
.text-teal { color: var(--teal-mid); }
.text-gradient {
  background: linear-gradient(135deg, var(--teal), var(--teal-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bg-teal-gradient {
  background: linear-gradient(135deg, var(--teal-dark), var(--teal-mid));
}

/* CTA sections with dark gradient — ensure text contrast */
.cta-dark-section h2 { color: #fff; }
.cta-dark-section p { color: rgba(255,255,255,.85); }