/**
 * Afripay Sales Funnel — dark + neon green (Launch frontend only).
 * Scoped to body.al-funnel-public and body.afripay-launch-pay.
 */
:root {
    --aft-bg: #0a0a0a;
    --aft-bg-elevated: #111111;
    --aft-surface: #161616;
    --aft-surface-2: #1c1c1c;
    --aft-border: rgba(255, 255, 255, 0.08);
    --aft-border-accent: rgba(74, 222, 128, 0.35);
    --aft-text: #f8fafc;
    --aft-muted: #94a3b8;
    --aft-accent: #4ade80;
    --aft-accent-strong: #22c55e;
    --aft-accent-dim: rgba(34, 197, 94, 0.12);
    --aft-glow: rgba(74, 222, 128, 0.22);
    --aft-radius: 12px;
    --aft-radius-lg: 16px;
    --aft-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

body.al-funnel-public {
    background: var(--aft-bg) !important;
    color: var(--aft-text) !important;
}

body.al-funnel-public::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(900px 480px at 50% -5%, var(--aft-glow), transparent 58%),
        radial-gradient(600px 320px at 88% 18%, rgba(34, 197, 94, 0.08), transparent 55%);
}

body.al-funnel-public > * {
    position: relative;
    z-index: 1;
}

body.al-funnel-public.afh-premium > header.topnav {
    position: sticky;
    z-index: 100;
}

body.al-funnel-public.afh-premium > .noise {
    position: fixed;
    z-index: 0;
}

/* —— African launch funnel —— */
body.al-funnel-public {
    --bg: var(--aft-bg);
    --panel: var(--aft-surface);
    --line: var(--aft-border);
    --text: var(--aft-text);
    --muted: var(--aft-muted);
    --primary: var(--aft-accent-strong);
    --primary-dark: #16a34a;
    --primary-glow: var(--aft-glow);
}

body.al-funnel-public .btn-primary,
body.al-funnel-public .cta,
body.al-funnel-public .btn-pay.btn-flw {
    background: linear-gradient(135deg, var(--aft-accent-strong), var(--aft-accent)) !important;
    color: #052e16 !important;
    border: none !important;
}

body.al-funnel-public .btn-ghost,
body.al-funnel-public .btn-outline {
    border-color: var(--aft-border-accent) !important;
    color: var(--aft-accent) !important;
    background: transparent !important;
}

body.al-funnel-public .glass,
body.al-funnel-public .oto-card,
body.al-funnel-public .offer-card,
body.al-funnel-public .step-card,
body.al-funnel-public .feature-card,
body.al-funnel-public .pricing-card {
    background: var(--aft-surface) !important;
    border: 1px solid var(--aft-border) !important;
    box-shadow: var(--aft-shadow) !important;
}

body.al-funnel-public .topnav {
    background: rgba(10, 10, 10, 0.9) !important;
    border-bottom: 1px solid var(--aft-border) !important;
    backdrop-filter: blur(12px);
}

body.al-funnel-public h1,
body.al-funnel-public h2,
body.al-funnel-public h3 {
    color: #fff;
}

body.al-funnel-public .hero h1 span,
body.al-funnel-public .accent,
body.al-funnel-public .highlight {
    color: var(--aft-accent) !important;
}

body.al-funnel-public .footer {
    border-top: 1px solid var(--aft-border);
    color: var(--aft-muted);
}

body.al-funnel-public.oto-body,
body.al-funnel-public.al-login-body {
    background: var(--aft-bg) !important;
    color: var(--aft-text) !important;
}

body.al-funnel-public .al-login-card,
body.al-funnel-public .login-card {
    background: var(--aft-surface) !important;
    border: 1px solid var(--aft-border) !important;
}

/* Launch pay checkout page */
body.al-funnel-public.afripay-launch-pay {
    background: var(--aft-bg) !important;
    color: #e2e8f0 !important;
}

body.al-funnel-public.afripay-launch-pay .btn-flw {
    background: linear-gradient(135deg, var(--aft-accent-strong), var(--aft-accent)) !important;
    color: #052e16 !important;
}

body.al-funnel-public.afripay-launch-pay .btn-bank {
    border-color: var(--aft-border-accent) !important;
    color: var(--aft-accent) !important;
}

body.al-funnel-public.afripay-launch-pay input,
body.al-funnel-public.afripay-launch-pay textarea {
    background: var(--aft-surface) !important;
    border-color: var(--aft-border) !important;
    color: #fff !important;
}

body.al-funnel-public.afripay-launch-pay .box {
    background: var(--aft-surface) !important;
    border-color: var(--aft-border) !important;
}