/* ════════════════════════════════════════════════════════════════
   nova-omni.css — Omni-inspired visual transformation
   Loaded last. NovaOps brand/theme/content preserved throughout.
   Key changes: light hero, editorial layout, grid texture, strong
   typographic contrast, minimal chrome, intentional rhythm.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. LIGHT HERO ─────────────────────────────────────────────── */
.solar-hero {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(128,0,128,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 50%, rgba(255,120,0,0.04) 0%, transparent 60%),
    #FAFAFA !important;
  overflow: hidden !important;
}

/* Subtle dot-grid texture on light */
.solar-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, black 30%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Solar canvas — higher opacity so planets are bold on light bg */
#solar-canvas {
  opacity: 0.90 !important;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 12%, rgba(0,0,0,1) 28%, rgba(0,0,0,1) 75%, transparent 100%) !important;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 12%, rgba(0,0,0,1) 28%, rgba(0,0,0,1) 75%, transparent 100%) !important;
}

/* ── 2. HERO TEXT & ELEMENTS — DARK ON LIGHT ─────────────────── */
.hero-title {
  color: rgba(10,10,20,0.92) !important;
}
.title-accent {
  color: #800080 !important;
}
.hero-subtitle {
  color: rgba(10,10,20,0.55) !important;
}
.hero-badge {
  background: rgba(128,0,128,0.06) !important;
  border-color: rgba(128,0,128,0.20) !important;
  color: rgba(10,10,20,0.60) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
.badge-dot {
  background: #800080 !important;
  box-shadow: 0 0 8px rgba(128,0,128,0.40) !important;
}

/* ── 3. HERO TRUST STRIP ─────────────────────────────────────── */
.trust-item {
  color: rgba(10,10,20,0.45) !important;
}
.trust-item svg path {
  stroke: rgba(10,10,20,0.35) !important;
}
.trust-sep {
  color: rgba(10,10,20,0.18) !important;
}

/* ── 4. HERO STATS ───────────────────────────────────────────── */
.stat-value {
  color: rgba(10,10,20,0.88) !important;
}
.stat-label {
  color: rgba(10,10,20,0.42) !important;
}
.stat-divider {
  background: rgba(0,0,0,0.10) !important;
}

/* ── 5. HERO CTA GROUP ───────────────────────────────────────── */
.hero-cta-group .btn-primary {
  box-shadow:
    0 0 0 1px rgba(128,0,128,0.25),
    0 4px 20px rgba(128,0,128,0.22),
    0 1px 3px rgba(0,0,0,0.10) !important;
}
.hero-cta-group .btn-primary:hover {
  box-shadow:
    0 0 0 1px rgba(128,0,128,0.38),
    0 8px 32px rgba(128,0,128,0.30),
    0 2px 6px rgba(0,0,0,0.12) !important;
}
/* Ghost button — dark on light */
.hero-cta-group .btn-ghost {
  color: rgba(10,10,20,0.72) !important;
  border-color: rgba(0,0,0,0.16) !important;
  background: rgba(0,0,0,0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.hero-cta-group .btn-ghost:hover {
  color: rgba(10,10,20,0.92) !important;
  border-color: rgba(0,0,0,0.28) !important;
  background: rgba(0,0,0,0.07) !important;
}

/* ── 6. SCROLL INDICATOR ─────────────────────────────────────── */
.scroll-text {
  color: rgba(10,10,20,0.28) !important;
}
.scroll-line {
  background: linear-gradient(to bottom, rgba(0,0,0,0.14), transparent) !important;
}

/* ── 7. NAVIGATION — TRANSPARENT ON LIGHT HERO ──────────────── */
.nova-nav:not(.scrolled) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nova-nav:not(.scrolled) .logo-text {
  color: rgba(10,10,20,0.88) !important;
}
.nova-nav:not(.scrolled) .logo-icon {
  color: #800080 !important;
}
.nova-nav:not(.scrolled) .logo-accent {
  color: #800080 !important;
}
.nova-nav:not(.scrolled) .nav-link {
  color: rgba(10,10,20,0.55) !important;
}
.nova-nav:not(.scrolled) .nav-link:hover {
  color: rgba(10,10,20,0.92) !important;
  background: rgba(0,0,0,0.05) !important;
}
.nova-nav:not(.scrolled) .nav-dropdown-trigger {
  color: rgba(10,10,20,0.55) !important;
}
.nova-nav:not(.scrolled) .nav-dropdown-trigger:hover {
  color: rgba(10,10,20,0.92) !important;
  background: rgba(0,0,0,0.05) !important;
}
.nova-nav:not(.scrolled) .nav-sign-in {
  color: rgba(10,10,20,0.55) !important;
}
.nova-nav:not(.scrolled) .nav-sign-in:hover {
  color: rgba(10,10,20,0.92) !important;
  background: rgba(0,0,0,0.05) !important;
}
.nova-nav:not(.scrolled) .nav-mobile-toggle span {
  background: rgba(10,10,20,0.55) !important;
}
/* Frosted white on scroll */
.nova-nav.scrolled {
  background: rgba(255,255,255,0.94) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* ── 8. HERO RIGHT — ORBITAL VISUALIZATION ───────────────────── */
/* The canvas shines through the transparent right column */
.hero-right {
  /* Subtle radial glow behind orbital rings */
  background: radial-gradient(ellipse 70% 60% at 55% 50%, rgba(128,0,128,0.08) 0%, transparent 70%) !important;
}

.h-orbital-ring {
  border-color: rgba(128,0,128,0.25) !important;
}
.h-ring-2 { border-color: rgba(128,0,128,0.16) !important; }
.h-ring-3 { border-color: rgba(128,0,128,0.09) !important; }

/* Float cards on dark hero */
.h-float-card {
  background: rgba(9,9,14,0.55) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.20) !important;
}

/* ── 9. MARQUEE TICKER ───────────────────────────────────────── */
.section-marquee {
  background: #F5F5F8 !important;
}
.mq-item:hover {
  color: rgba(10,10,20,0.80) !important;
}

/* ── 10. SECTION BACKGROUNDS — INTENTIONAL RHYTHM ───────────── */
.section-platform {
  background: #FFFFFF !important;
}
/* Fix marquee fade-edge gradient to match section-platform white background */
.tools-marquee-wrap::before {
  background: linear-gradient(to right, #FFFFFF 0%, transparent 100%) !important;
}
.tools-marquee-wrap::after {
  background: linear-gradient(to left, #FFFFFF 0%, transparent 100%) !important;
}
.section-integrations {
  background: #F7F7FA !important;
}
.section-what {
  background: linear-gradient(to bottom, #FFFFFF, #F8F8FB) !important;
}
.section-loop {
  background: linear-gradient(180deg, #F8F8FB 0%, #FFFFFF 100%) !important;
}
.section-how {
  background: #FFFFFF !important;
}
.section-pricing {
  background: linear-gradient(to bottom, #F7F7FA, #FFFFFF) !important;
}
.section-faq {
  background: #FFFFFF !important;
}
.section-results {
  background: linear-gradient(to bottom, #F7F7FA, #FFFFFF) !important;
}

/* Dark sections — deeper, more polished */
.compare-table-wrap {
  background: #0C0C14 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.20),
    0 24px 80px rgba(0,0,0,0.20) !important;
}
.cta-card {
  background: #0C0C14 !important;
  border-color: rgba(128,0,128,0.18) !important;
  box-shadow: 0 8px 64px rgba(0,0,0,0.28), 0 2px 0 rgba(128,0,128,0.12) inset !important;
}
.cta-card::before {
  background: radial-gradient(ellipse, rgba(128,0,128,0.16) 0%, transparent 65%) !important;
}
.loop-stat {
  background: #0C0C14 !important;
  border-color: rgba(128,0,128,0.18) !important;
}

/* ── 11. CARDS — ELEVATED MINIMAL ───────────────────────────── */
/* Omni card aesthetic: very clean, near-flat, sharp on hover */
.bento-card,
.step-card,
.mode-card,
.testimonial-card {
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.03),
    0 4px 12px rgba(0,0,0,0.04),
    0 12px 28px rgba(0,0,0,0.03) !important;
}
.bento-card:hover,
.step-card:hover {
  border-color: rgba(128,0,128,0.22) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.07),
    0 24px 48px rgba(0,0,0,0.05) !important;
}
.testimonial-card:hover {
  border-color: rgba(128,0,128,0.20) !important;
}

/* ── 12. SECTION HEADING REFINEMENT ──────────────────────────── */
/* Omni: very tight tracking, near-black, confident */
.section-heading {
  color: #0A0A0F !important;
  font-size: clamp(36px, 5.5vw, 64px) !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
}
.section-heading em {
  color: #800080 !important;
  font-style: normal !important;
}

/* ── 13. SECTION SUBTITLE ────────────────────────────────────── */
.section-subtitle {
  font-size: 18px !important;
  color: rgba(10,10,20,0.52) !important;
  line-height: 1.78 !important;
}

/* ── 14. PLATFORM DASHBOARD ──────────────────────────────────── */
.platform-dash-card {
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.05),
    0 16px 48px rgba(0,0,0,0.08),
    0 40px 80px rgba(0,0,0,0.05) !important;
}

/* ── 15. PRICING FEATURED CARD ───────────────────────────────── */
.pricing-card.featured {
  background: linear-gradient(160deg, rgba(128,0,128,0.05) 0%, #FFFFFF 50%) !important;
  border-color: rgba(128,0,128,0.35) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.04),
    0 12px 32px rgba(128,0,128,0.10),
    0 32px 64px rgba(128,0,128,0.07) !important;
  transform: scale(1.025) !important;
}
.pricing-card.featured:hover {
  transform: scale(1.025) translateY(-4px) !important;
}

/* ── 16. STATS BAR ───────────────────────────────────────────── */
.stats-bar {
  background: rgba(0,0,0,0.055) !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  border-radius: 18px !important;
  gap: 1px !important;
}
.stats-bar-item {
  background: #FFFFFF !important;
}
.stats-bar-item:hover {
  background: #FAFAFA !important;
}
.stats-bar-value {
  color: #0A0A0F !important;
  font-size: 40px !important;
  letter-spacing: -0.055em !important;
}
.stats-bar-label {
  color: rgba(10,10,20,0.48) !important;
}

/* ── 17. TOOL CHIPS / MARQUEE ────────────────────────────────── */
.tool-chip {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
.tool-chip:hover {
  border-color: rgba(128,0,128,0.28) !important;
  box-shadow: 0 4px 14px rgba(128,0,128,0.09) !important;
}

/* ── 18. FAQ SECTION ─────────────────────────────────────────── */
.faq-item {
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: none !important;
}
.faq-item.open {
  border-color: rgba(128,0,128,0.25) !important;
}
.faq-question-text {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
}

/* ── 19. FOOTER ──────────────────────────────────────────────── */
.nova-footer {
  background: #FAFAFA !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
}
.footer-bottom {
  border-top-color: rgba(0,0,0,0.07) !important;
}

/* ── 20. INTEGRATION CARDS ───────────────────────────────────── */
.int-card {
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: none !important;
}
.int-card:hover {
  border-color: rgba(128,0,128,0.30) !important;
  box-shadow: 0 4px 16px rgba(128,0,128,0.08) !important;
  transform: translateY(-2px) !important;
}
.int-card-icon {
  background: #F4F4F7 !important;
}

/* ── 21. MODE CARDS (Two modes section) ──────────────────────── */
.mode-build { border-top: 3px solid #0070F3 !important; }
.mode-operate { border-top: 3px solid #800080 !important; }
.mode-card {
  border: 1px solid rgba(0,0,0,0.07) !important;
}
.mode-card:hover {
  border-color: rgba(0,0,0,0.12) !important;
}

/* ── 22. LOOP SECTION ────────────────────────────────────────── */
.loop-step {
  border-radius: 12px !important;
}
.loop-step-warn {
  background: rgba(239,68,68,0.03) !important;
  border-color: rgba(239,68,68,0.14) !important;
}
.loop-step-good {
  background: rgba(34,197,94,0.03) !important;
  border-color: rgba(34,197,94,0.16) !important;
}

/* ── 23. SHOWCASE CARDS ──────────────────────────────────────── */
.showcase-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow:
    0 4px 16px rgba(0,0,0,0.06),
    0 20px 60px rgba(0,0,0,0.08) !important;
}
.showcase-card:hover {
  box-shadow:
    0 6px 24px rgba(0,0,0,0.08),
    0 32px 80px rgba(0,0,0,0.11) !important;
}
/* Showcase visual must allow floating badges to overflow the card edges */
.showcase-visual {
  overflow: visible !important;
}
/* Ensure showcase-card overflow hidden doesn't clip the sibling badges */
.showcase-card {
  overflow: hidden !important;
}
/* section-services overflow:hidden clips floating badges — remove it */
.section-services {
  overflow: visible !important;
}

/* ── 24. SHOWCASE FLOATING BADGES ───────────────────────────── */
.showcase-badge {
  box-shadow: 0 4px 20px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06) !important;
  border-color: rgba(0,0,0,0.07) !important;
}

/* ── 25. PF CARDS (platform feature) ────────────────────────── */
.pf-card {
  border: 1px solid rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04) !important;
}
.pf-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.07) !important;
  transform: translateY(-4px) !important;
}

/* ── 26. HERO CONTENT Z-INDEX FIX ───────────────────────────── */
/* Ensure text renders above the dot-grid pseudo-element */
.hero-content,
.hero-browser,
.scroll-indicator {
  position: relative;
  z-index: 2;
}

/* ── 27. SECTION BADGE REFINEMENT ───────────────────────────── */
.section-badge {
  background: rgba(128,0,128,0.07) !important;
  border-color: rgba(128,0,128,0.16) !important;
  color: #C94400 !important;
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  border-radius: 7px !important;
  padding: 5px 12px !important;
}

/* ── 28. STEP CARD NUMBER ────────────────────────────────────── */
.step-number {
  background: rgba(128,0,128,0.07) !important;
  border-color: rgba(128,0,128,0.18) !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  color: #C94400 !important;
}

/* ── 29. TESTIMONIAL QUOTE TEXT ──────────────────────────────── */
.testimonial-quote {
  color: rgba(10,10,20,0.60) !important;
  font-style: italic !important;
  line-height: 1.75 !important;
}
.testimonial-name {
  color: rgba(10,10,20,0.88) !important;
}
.testimonial-role {
  color: rgba(10,10,20,0.42) !important;
}

/* ── 30. COMPARISON TABLE HEADER ─────────────────────────────── */
.compare-with-badge {
  background: #800080 !important;
  padding: 7px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.compare-feature {
  color: rgba(255,255,255,0.58) !important;
  font-weight: 500 !important;
}
.compare-with {
  color: rgba(255,255,255,0.82) !important;
}
.compare-without {
  color: rgba(255,255,255,0.28) !important;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nova-nav:not(.scrolled) {
    background: rgba(9,9,14,0.80) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
  }
  .section-trust-bar { padding: 32px 0 !important; }
  .stats-bar-value { font-size: 32px !important; }
}

/* ── Button hover — lighter purple ──────────────────────────── */
.btn-primary:hover {
  background: linear-gradient(135deg, #9B00B8 0%, #BF3FD0 100%) !important;
  filter: none !important;
  box-shadow: 0 8px 32px rgba(128,0,128,0.35), 0 2px 8px rgba(128,0,128,0.20) !important;
}