/* ═══════════════════════════════════════════
   DARK MODE — Homepage v2.0
   ═══════════════════════════════════════════ */

[data-theme="dark"] {
    --dark: #F1F5F9;
    --dark-light: #E2E8F0;
    --gray: #64748B;
    --gray-light: #64748B;
    --white: #0F172A;
    --bg-light: #1E293B;

    --primary: #FF8989;
    --primary-dark: #FF6B6B;
    --secondary: #5DD9D1;
    --accent: #FFE66D;
    --success: #51CF66;
    --purple: #A78BFA;
    --pink: #F472B6;
}

[data-theme="dark"] body {
    background: #0F172A !important;
    color: #F1F5F9 !important;
}

/* ── Navbar ── */
[data-theme="dark"] .navbar {
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .navbar.scrolled {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .logo {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .nav-link {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .nav-link:hover {
    color: #FF8989 !important;
}

[data-theme="dark"] .nav-link::after {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}

[data-theme="dark"] .nav-link.school-link {
    background: linear-gradient(135deg, #FF6B6B 0%, #FFE66D 100%) !important;
    color: #0F172A !important;
}

[data-theme="dark"] .nav-cta {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3) !important;
}

[data-theme="dark"] .nav-cta:hover {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5) !important;
}

[data-theme="dark"] .mobile-toggle {
    background: #1E293B !important;
}

[data-theme="dark"] .mobile-toggle span {
    background: #F1F5F9 !important;
}

@media (max-width: 768px) {
    [data-theme="dark"] .nav-links {
        background: #0F172A !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    }
}

/* ── Hero ── */
[data-theme="dark"] .hero {
    background: linear-gradient(135deg, #4338ca 0%, #581c87 50%, #7c3aed 100%) !important;
}

[data-theme="dark"] .hero::before {
    opacity: 0.5;
}

[data-theme="dark"] .hero-badge {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

[data-theme="dark"] .hero-badge span {
    color: #fff !important;
}

[data-theme="dark"] .hero-title {
    color: #fff !important;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .hero-title span {
    color: #fff !important;
}

[data-theme="dark"] .hero-subtitle {
    color: rgba(255, 255, 255, 0.88) !important;
}

[data-theme="dark"] .hero-buttons a {
    opacity: 1 !important;
    visibility: visible !important;
}

[data-theme="dark"] .btn-primary {
    background: #FFFFFF !important;
    color: #1a1a2e !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .btn-primary:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .btn-primary span {
    color: #1a1a2e !important;
}

[data-theme="dark"] .btn-secondary {
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.5) !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background: #fff !important;
    color: #0F172A !important;
}

[data-theme="dark"] .btn-demo {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

[data-theme="dark"] .btn-demo span {
    color: #fff !important;
}

[data-theme="dark"] .chat-mockup {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* ── Trust Strip ── */
[data-theme="dark"] .trust-strip {
    background: #1E293B !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .trust-badge {
    color: #CBD5E1 !important;
}

/* ── How it Works ── */
[data-theme="dark"] .how-it-works {
    background: #0F172A !important;
}

[data-theme="dark"] .step-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .step-desc {
    color: #64748B !important;
}

[data-theme="dark"] .steps-grid::before {
    background: repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 8px, transparent 8px, transparent 16px) !important;
}

/* ── Features ── */
[data-theme="dark"] .features {
    background: #1E293B !important;
}

[data-theme="dark"] .section-badge {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #fff !important;
}

[data-theme="dark"] .section-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .section-subtitle {
    color: #64748B !important;
}

[data-theme="dark"] .feature-card {
    background: #0F172A !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .feature-card::before {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}

[data-theme="dark"] .feature-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(99, 102, 241, 0.25) !important;
}

[data-theme="dark"] .feature-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .feature-description {
    color: #64748B !important;
}

/* ── Comparison ── */
[data-theme="dark"] .comparison {
    background: #0F172A !important;
}

[data-theme="dark"] .comparison-table {
    background: #1E293B !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .compare-header {
    background: #0F172A !important;
}

[data-theme="dark"] .compare-row {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .compare-row:hover {
    background: rgba(99, 102, 241, 0.05) !important;
}

[data-theme="dark"] .compare-row > div:first-child {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .compare-text {
    color: #64748B !important;
}

/* ── Stats ── */
[data-theme="dark"] .stats {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
}

[data-theme="dark"] .stats .section-title {
    color: #fff !important;
}

[data-theme="dark"] .stats .section-subtitle {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .stat-item {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .stat-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(99, 102, 241, 0.25) !important;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1) !important;
}

[data-theme="dark"] .stat-number {
    background: linear-gradient(135deg, #6366f1 0%, #a78bfa 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

[data-theme="dark"] .stat-label {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* ── Testimonials ── */
[data-theme="dark"] .testimonials {
    background: #1E293B !important;
}

[data-theme="dark"] .testimonial-card {
    background: #0F172A !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .testimonial-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(99, 102, 241, 0.15) !important;
}

[data-theme="dark"] .testimonial-text {
    color: #CBD5E1 !important;
}

[data-theme="dark"] .testimonial-name {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .testimonial-role {
    color: #64748B !important;
}

/* ── Audience ── */
[data-theme="dark"] .audience {
    background: #0F172A !important;
}

[data-theme="dark"] .audience-card {
    background: #1E293B !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .audience-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .audience-card-title {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .audience-card-desc {
    color: #64748B !important;
}

[data-theme="dark"] .audience-link {
    color: #a78bfa !important;
}

/* ── Ecosystem ── */
[data-theme="dark"] .ecosystem {
    background: #0F172A !important;
}

[data-theme="dark"] .eco-card {
    background: #1E293B !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="dark"] .eco-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .eco-card h3 {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .eco-card p {
    color: #94A3B8 !important;
}

/* ── CTA ── */
[data-theme="dark"] .cta {
    background: linear-gradient(135deg, #4338ca 0%, #7c3aed 100%) !important;
}

[data-theme="dark"] .cta::before {
    opacity: 0.4;
}

[data-theme="dark"] .cta-title {
    color: #fff !important;
}

[data-theme="dark"] .cta-subtitle {
    color: rgba(255, 255, 255, 0.88) !important;
}

[data-theme="dark"] .cta-note {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .btn-white {
    background: #fff !important;
    color: #1a1a2e !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .btn-white:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .btn-white span {
    color: #1a1a2e !important;
}

/* ── Footer ── */
[data-theme="dark"] .footer {
    background: #0F172A !important;
    color: #F1F5F9 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .footer-section h4 {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .footer-links a {
    color: #64748B !important;
}

[data-theme="dark"] .footer-links a:hover {
    color: #F1F5F9 !important;
}

[data-theme="dark"] .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #64748B !important;
}

[data-theme="dark"] .footer-bottom a {
    color: #5DD9D1 !important;
}

[data-theme="dark"] .footer-bottom a:hover {
    color: #6EE7D7 !important;
}

/* ── Early access banner ── */
[data-theme="dark"] .early-access-banner {
    background: linear-gradient(90deg, #c9472f, #d4721a, #c9472f);
    background-size: 200% 100%;
}