/* Homepage dark theme. Loaded after styles.css by index.html only — other pages stay light. */
:root {
    --dk-bg: #0B1416;
    --dk-bg-2: #0E1A1D;
    --dk-surface: #132024;
    --dk-surface-2: #182A2E;
    --dk-border: rgba(255, 255, 255, 0.08);
    --dk-text: #E8F0EF;
    --dk-muted: rgba(232, 240, 239, 0.68);
    --dk-faint: rgba(232, 240, 239, 0.5);
}

body { background-color: var(--dk-bg); color: var(--dk-text); }

/* Nav */
.nav { background: rgba(11, 20, 22, 0.8); border-bottom: 1px solid var(--dk-border); }
.nav-links a:not(.btn-nav) { color: var(--dk-text); }

/* Headings */
.hero-title, .section-title, .feature-card h3, .feature-highlight-content h3,
.why-card h3, .about-feature h4, .pricing-header h3, .metric-value,
.preview-card h4 { color: var(--dk-text); }

/* Body copy */
.hero-description, .section-description, .feature-card p, .feature-highlight-content p,
.highlight-list li, .why-card p, .about-description, .about-feature p,
.pricing-features li, .disclaimer-card p, .preview-card p { color: var(--dk-muted); }
.stat-label, .metric-label, .price .period, .price-annual, .pricing-note p { color: var(--dk-faint); }

/* Sections: let the page background through */
.hero, .features, .why-section, .pricing, .about, .disclaimer { background: transparent; }
.why-section, .about { background: var(--dk-bg-2); }

/* Cards */
.hero-stats, .feature-card, .about-feature, .pricing-card, .glass-card, .btn-secondary {
    background: var(--dk-surface);
    border-color: var(--dk-border);
    color: var(--dk-text);
}
.feature-card:hover { background: var(--dk-surface-2); }
.why-card {
    background: linear-gradient(135deg, rgba(46, 196, 182, 0.08) 0%, rgba(162, 123, 254, 0.08) 100%);
    border-color: var(--dk-border);
}
.pricing-card.featured { background: var(--dk-surface-2); }
.pricing-header { border-bottom-color: var(--dk-border); }
.metric-bar { background: rgba(255, 255, 255, 0.08); }
.disclaimer-card { background: rgba(255, 149, 0, 0.08); }

/* Spotlights: soft brand glow behind each phone */
.feature-highlight {
    background:
        radial-gradient(420px circle at 75% 50%, rgba(46, 196, 182, 0.14), transparent 65%),
        radial-gradient(420px circle at 25% 50%, rgba(162, 123, 254, 0.12), transparent 65%),
        var(--dk-surface);
    border: 1px solid var(--dk-border);
}
.screenshot-image { filter: drop-shadow(0 0 48px rgba(46, 196, 182, 0.22)) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5)); }
.hero-image { position: relative; }
.hero-image::before {
    content: ""; position: absolute; inset: 10% 5%;
    background: radial-gradient(closest-side, rgba(46, 196, 182, 0.28), rgba(162, 123, 254, 0.14) 60%, transparent);
    filter: blur(20px); z-index: -1;
}

/* Footer sits a shade darker than the page */
.footer { background: #070D0F; }

/* Fixed background layer: swap the light gradient for dark brand glows */
.gradient-bg {
    background: linear-gradient(135deg, rgba(46, 196, 182, 0.10) 0%, var(--dk-bg) 45%, var(--dk-bg) 60%, rgba(162, 123, 254, 0.10) 100%);
}

/* Small fixes */
.why-number { opacity: 1; background: linear-gradient(135deg, #C4A8FF 0%, #A27BFE 100%); -webkit-background-clip: text; background-clip: text; }
.why-card strong, .feature-highlight-content strong, .hero-description strong, .about-description strong { color: var(--dk-text); }