/* ===========================================================
 * Theme: Neo Glass
 * Style: Frosted glass cards, indigo→cyan gradient, soft glows
 * Modes: dark (default) + light (.gl-light on .gl-wrapper)
 * Scope: every rule is scoped under #golden-landing.gl-wrapper
 *        so it only affects the landing page.
 * =========================================================== */

/* ---------- DARK (default) ---------- */
#golden-landing.gl-wrapper {
    --gl-primary: #6366f1;            /* indigo-500 */
    --gl-primary-dark: #4f46e5;
    --gl-primary-light: #818cf8;
    --gl-primary-rgb: 99,102,241;
    --gl-secondary: #06b6d4;          /* cyan-500 */
    --gl-accent: #22d3ee;
    --gl-gradient: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
    --gl-gradient-subtle: linear-gradient(135deg, rgba(99,102,241,0.10) 0%, rgba(6,182,212,0.06) 100%);
    --gl-bg: #06081a;
    --gl-bg-2: #0c1024;
    --gl-bg-card: rgba(255,255,255,0.04);
    --gl-bg-card-hover: rgba(255,255,255,0.08);
    --gl-text: #e6e9f5;
    --gl-text-muted: #94a3b8;
    --gl-text-dim: #64748b;
    --gl-border: rgba(255,255,255,0.08);
    --gl-border-light: rgba(255,255,255,0.18);
    --gl-radius: 18px;
    --gl-radius-sm: 12px;
    --gl-shadow: 0 25px 50px -12px rgba(0,0,0,0.6);
    --gl-shadow-glow: 0 0 80px rgba(99,102,241,0.25);

    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,0.18), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(6,182,212,0.14), transparent 60%),
        var(--gl-bg);
}

/* Frosted glass surfaces */
#golden-landing.gl-wrapper .gl-nav,
#golden-landing.gl-wrapper .gl-feature-card,
#golden-landing.gl-wrapper .gl-plan-card,
#golden-landing.gl-wrapper .gl-faq-item,
#golden-landing.gl-wrapper .gl-site-card,
#golden-landing.gl-wrapper .gl-stat-card {
    background: var(--gl-bg-card) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid var(--gl-border) !important;
    border-radius: var(--gl-radius);
    transition: all .35s ease;
}

#golden-landing.gl-wrapper .gl-feature-card:hover,
#golden-landing.gl-wrapper .gl-plan-card:hover,
#golden-landing.gl-wrapper .gl-site-card:hover {
    background: var(--gl-bg-card-hover) !important;
    border-color: var(--gl-border-light) !important;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px rgba(99,102,241,0.25);
}

/* Buttons — gradient + glow */
#golden-landing.gl-wrapper .gl-btn-primary {
    background: var(--gl-gradient) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 24px -8px rgba(99,102,241,0.55);
}
#golden-landing.gl-wrapper .gl-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -10px rgba(99,102,241,0.7);
}
#golden-landing.gl-wrapper .gl-btn-outline {
    background: rgba(255,255,255,0.04) !important;
    color: var(--gl-primary-light) !important;
    border: 1px solid var(--gl-border-light) !important;
    backdrop-filter: blur(10px);
}
#golden-landing.gl-wrapper .gl-btn-outline:hover {
    background: rgba(99,102,241,0.15) !important;
    border-color: var(--gl-primary) !important;
    color: #fff !important;
}

/* Hero glows recolor */
#golden-landing.gl-wrapper .gl-hero-glow.gl-glow-1 {
    background: radial-gradient(circle, rgba(99,102,241,0.45), transparent 70%);
}
#golden-landing.gl-wrapper .gl-hero-glow.gl-glow-2 {
    background: radial-gradient(circle, rgba(6,182,212,0.40), transparent 70%);
}

/* Gradient text */
#golden-landing.gl-wrapper .gl-gradient-text {
    background: var(--gl-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Footer */
#golden-landing.gl-wrapper .gl-footer {
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
    border-top: 1px solid var(--gl-border);
}

/* ---------- LIGHT MODE ---------- */
#golden-landing.gl-wrapper.gl-light {
    --gl-bg: #f5f7fb;
    --gl-bg-2: #ffffff;
    --gl-bg-card: rgba(255,255,255,0.75);
    --gl-bg-card-hover: rgba(255,255,255,0.95);
    --gl-text: #0f172a;
    --gl-text-muted: #475569;
    --gl-text-dim: #64748b;
    --gl-border: rgba(15,23,42,0.08);
    --gl-border-light: rgba(15,23,42,0.18);
    --gl-shadow: 0 25px 50px -12px rgba(15,23,42,0.12);
    --gl-shadow-glow: 0 0 80px rgba(99,102,241,0.18);

    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,0.14), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(6,182,212,0.12), transparent 60%),
        var(--gl-bg) !important;
    color: var(--gl-text) !important;
}

#golden-landing.gl-wrapper.gl-light .gl-nav,
#golden-landing.gl-wrapper.gl-light .gl-feature-card,
#golden-landing.gl-wrapper.gl-light .gl-plan-card,
#golden-landing.gl-wrapper.gl-light .gl-faq-item,
#golden-landing.gl-wrapper.gl-light .gl-site-card,
#golden-landing.gl-wrapper.gl-light .gl-stat-card {
    background: var(--gl-bg-card) !important;
    border-color: var(--gl-border) !important;
    box-shadow: 0 8px 24px -12px rgba(15,23,42,0.10);
}

#golden-landing.gl-wrapper.gl-light .gl-btn-outline {
    background: rgba(255,255,255,0.7) !important;
    color: var(--gl-primary-dark) !important;
}
#golden-landing.gl-wrapper.gl-light .gl-btn-outline:hover {
    background: var(--gl-primary) !important;
    color: #fff !important;
}

#golden-landing.gl-wrapper.gl-light .gl-footer {
    background: rgba(255,255,255,0.6);
    color: var(--gl-text);
}

/* Section titles in light mode */
#golden-landing.gl-wrapper.gl-light .gl-section-title,
#golden-landing.gl-wrapper.gl-light .gl-hero-title,
#golden-landing.gl-wrapper.gl-light .gl-cta h2 {
    color: var(--gl-text) !important;
}
#golden-landing.gl-wrapper.gl-light .gl-section-subtitle,
#golden-landing.gl-wrapper.gl-light .gl-hero-subtitle {
    color: var(--gl-text-muted) !important;
}