* { box-sizing: border-box; }
        body { font-family: 'DM Sans', sans-serif; background: var(--bg-900); color: #e2f0ec; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        h1,h2,h3,h4,h5,h6,.font-display { font-family: 'Syne', sans-serif; letter-spacing: -0.02em; }
        h1 { letter-spacing: -0.03em; }
        .font-800 { font-weight: 800; }

        /* Backgrounds */
        .section-bg-alt { background: var(--bg-800); }
        .section-bg     { background: var(--bg-900); }

        /* Hero background */
        .hero-bg {
            background:
                radial-gradient(ellipse 80% 60% at 50% -10%, color-mix(in srgb, var(--brand-500) 25%, transparent) 0%, transparent 60%),
                radial-gradient(ellipse 60% 50% at 80% 80%,  color-mix(in srgb, var(--brand-600) 15%, transparent) 0%, transparent 60%),
                radial-gradient(ellipse 50% 40% at 10% 60%,  color-mix(in srgb, var(--gold-400)  8%,  transparent) 0%, transparent 50%),
                var(--bg-900);
        }
        .grid-overlay {
            background-image:
                linear-gradient(color-mix(in srgb, var(--brand-500) 4%, transparent) 1px, transparent 1px),
                linear-gradient(90deg, color-mix(in srgb, var(--brand-500) 4%, transparent) 1px, transparent 1px);
            background-size: 60px 60px;
        }

        /* Plan cards */
        .plan-card { background:linear-gradient(145deg,rgba(7,30,46,0.9),rgba(4,21,32,0.95)); border:1px solid color-mix(in srgb, var(--brand-500) 20%, transparent); transition:transform 0.3s ease,border-color 0.3s ease; }
        .plan-card:hover { transform:translateY(-6px); border-color:color-mix(in srgb, var(--brand-500) 50%, transparent); }
        .plan-card.featured { background:linear-gradient(145deg, color-mix(in srgb, var(--brand-500) 15%, transparent), color-mix(in srgb, var(--brand-600) 10%, transparent)); border-color:color-mix(in srgb, var(--brand-500) 50%, transparent); }

        /* Dividers */
        .divider  { height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-500) 30%, transparent), transparent); }
        .hr-brand { height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-500) 30%, transparent), transparent); border:none; }

        /* Glows */
        .glow-teal { box-shadow: 0 0 40px color-mix(in srgb, var(--brand-500) 20%, transparent), 0 0 80px color-mix(in srgb, var(--brand-500) 8%, transparent); }
        .glow-gold { box-shadow: 0 0 30px color-mix(in srgb, var(--gold-400) 20%, transparent); }
        .text-glow { text-shadow: 0 0 40px color-mix(in srgb, var(--brand-500) 50%, transparent); }

        /* Glass card */
        .glass-card { background:rgba(7,30,46,0.7); backdrop-filter:blur(12px); border:1px solid color-mix(in srgb, var(--brand-500) 15%, transparent); }
        .glass-card:hover { border-color:color-mix(in srgb, var(--brand-500) 35%, transparent); transition:border-color 0.3s ease; }

        /* Gradient text */
        .gradient-text {
            background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-300) 50%, var(--gold-400) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Buttons */
        .btn-primary-onyx { background:linear-gradient(135deg, var(--brand-500), var(--brand-600)); border:1px solid color-mix(in srgb, var(--brand-300) 30%, transparent); color:#fff; transition:all 0.3s ease; }
        .btn-primary-onyx:hover { background:linear-gradient(135deg, var(--brand-600), var(--brand-700)); box-shadow:0 0 30px color-mix(in srgb, var(--brand-500) 40%, transparent); transform:translateY(-1px); }
        .btn-outline-onyx { border:1px solid color-mix(in srgb, var(--brand-500) 50%, transparent); color:var(--brand-500); transition:all 0.3s ease; }
        .btn-outline-onyx:hover { background:color-mix(in srgb, var(--brand-500) 10%, transparent); border-color:var(--brand-500); }

        /* Nav */
        .nav-scrolled { background:color-mix(in srgb, var(--bg-900) 97%, transparent) !important; backdrop-filter:blur(20px); box-shadow:0 1px 0 color-mix(in srgb, var(--brand-500) 10%, transparent); }

        /* Scroll reveal */
        .reveal { opacity:0; transform:translateY(24px); transition:opacity 0.65s ease,transform 0.65s ease; }
        .reveal.visible { opacity:1; transform:translateY(0); }

        /* Form inputs */
        .form-input { background:rgba(7,30,46,0.8); border:1px solid color-mix(in srgb, var(--brand-500) 20%, transparent); color:#e2f0ec; padding:0.75rem 1rem; border-radius:0.75rem; width:100%; transition:border-color 0.3s; }
        .form-input:focus { outline:none; border-color:color-mix(in srgb, var(--brand-500) 60%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-500) 8%, transparent); }
        .form-input::placeholder { color:rgba(226,240,236,0.35); }
        .form-input option { background:var(--bg-800); }
        input:not(.form-input), textarea, select { background:rgba(7,30,46,0.8); border:1px solid color-mix(in srgb, var(--brand-500) 20%, transparent); color:#e2f0ec; transition:border-color 0.3s; }
        input:not(.form-input):focus, textarea:focus, select:focus { outline:none; border-color:color-mix(in srgb, var(--brand-500) 60%, transparent); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand-500) 8%, transparent); }
        input::placeholder, textarea::placeholder { color:rgba(226,240,236,0.35); }
        select option { background:var(--bg-800); }

        /* Stat card */
        .stat-card { background:linear-gradient(145deg,rgba(7,30,46,0.8),rgba(4,21,32,0.9)); border:1px solid color-mix(in srgb, var(--brand-500) 12%, transparent); }

        /* Step number */
        .step-num { background:linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 20%, transparent), color-mix(in srgb, var(--brand-600) 10%, transparent)); border:1px solid color-mix(in srgb, var(--brand-500) 40%, transparent); font-family:'Syne',sans-serif; }

        /* Ticker */
        @keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
        .ticker-inner { display:flex; width:max-content; animation:ticker 30s linear infinite; }

        /* Float */
        @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
        .float-anim { animation:float 5s ease-in-out infinite; }

        /* Bar fill */
        @keyframes fillBar { from{width:0} to{width:var(--w)} }
        .bar-fill { animation:fillBar 1.5s ease forwards; }

        /* Pulse ring */
        @keyframes pulseRing { 0%{transform:scale(1);opacity:0.6} 100%{transform:scale(1.8);opacity:0} }
        .pulse-ring::before { content:''; position:absolute; inset:-8px; border-radius:50%; border:2px solid color-mix(in srgb, var(--brand-500) 50%, transparent); animation:pulseRing 2s ease-out infinite; }

        /* Partner logos */
        .partner-logo { filter:brightness(0.4) grayscale(1); transition:filter 0.3s; }
        .partner-logo:hover { filter:brightness(1) grayscale(0); }

        /* FAQ accordion */
        .faq-answer { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
        .faq-answer.open { max-height:300px; }

        /* Spinner */
        #spinner-container { position:fixed; top:0; left:0; width:100%; height:100%; background:color-mix(in srgb, var(--bg-900) 95%, transparent); display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity 0.5s; }
        #spinner-container.hidden { opacity:0; pointer-events:none; }
        .spinner { width:40px; height:40px; border:3px solid color-mix(in srgb, var(--brand-500) 20%, transparent); border-top-color:var(--brand-500); border-radius:50%; animation:spin 0.8s linear infinite; }
        @keyframes spin { to{transform:rotate(360deg)} }

        * {
        box-sizing: border-box;
    }

    body {
        font-family: 'DM Sans', sans-serif;
        background: var(--bg-900);
        color: #e2f0ec;
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .font-display {
        font-family: 'Syne', sans-serif;
        letter-spacing: -0.02em;
    }

    .font-800 {
        font-weight: 800;
    }

    /* Mesh background */
    body {
        background:
            radial-gradient(ellipse 70% 50% at 20% 20%, color-mix(in srgb, var(--brand-500) 12%, transparent) 0%, transparent 60%),
            radial-gradient(ellipse 60% 50% at 80% 80%, color-mix(in srgb, var(--brand-600) 10%, transparent) 0%, transparent 60%),
            var(--bg-900);
    }

    /* Nav */
    .auth-nav {
        background: color-mix(in srgb, var(--bg-900) 85%, transparent);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid color-mix(in srgb, var(--brand-500) 10%, transparent);
    }

    /* Auth card */
    .auth-card {
        background: rgba(7, 30, 46, 0.7);
        backdrop-filter: blur(16px);
        border: 1px solid color-mix(in srgb, var(--brand-500) 15%, transparent);
        border-radius: 1.25rem;
    }

    /* Form inputs */
    .form-input {
        background: rgba(2, 11, 18, 0.6);
        border: 1px solid color-mix(in srgb, var(--brand-500) 20%, transparent);
        color: #e2f0ec;
        padding: 0.75rem 1rem;
        border-radius: 0.75rem;
        width: 100%;
        transition: border-color 0.3s;
        font-family: 'DM Sans', sans-serif;
    }

    .form-input:focus {
        outline: none;
        border-color: color-mix(in srgb, var(--brand-500) 60%, transparent);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 8%, transparent);
    }

    .form-input::placeholder {
        color: rgba(226, 240, 236, 0.3);
    }

    /* Buttons */
    .btn-primary-onyx {
        background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
        border: 1px solid color-mix(in srgb, var(--brand-300) 30%, transparent);
        color: #fff;
        transition: all 0.3s ease;
    }

    .btn-primary-onyx:hover {
        background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
        box-shadow: 0 0 24px color-mix(in srgb, var(--brand-500) 35%, transparent);
    }

    .btn-outline-onyx {
        border: 1px solid color-mix(in srgb, var(--brand-500) 40%, transparent);
        color: var(--brand-500);
        transition: all 0.3s;
    }

    .btn-outline-onyx:hover {
        background: color-mix(in srgb, var(--brand-500) 8%, transparent);
    }

    /* Google button */
    .google-btn {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #e2f0ec;
        border-radius: 0.75rem;
        padding: 0.875rem 1.5rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        transition: all 0.3s;
        text-decoration: none;
        width: 100%;
        cursor: pointer;
        font-family: 'DM Sans', sans-serif;
    }

    .google-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    /* Or divider */
    .or-divider {
        display: flex;
        align-items: center;
        gap: 1rem;
        color: rgba(226, 240, 236, 0.3);
        font-size: 0.85rem;
        margin: 1.5rem 0;
    }

    .or-divider::before,
    .or-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255, 255, 255, 0.1);
    }

    /* Gradient text */
    .gradient-text {
        background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-300) 50%, var(--gold-400) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* HR */
    .hr-brand {
        height: 1px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand-500) 30%, transparent), transparent);
        border: none;
    }

    /* Password eye toggle */
    .pw-wrap {
        position: relative;
    }

    .pw-toggle {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: rgba(226, 240, 236, 0.4);
    }

    .pw-toggle:hover {
        color: var(--brand-500);
    }

    /* Spinner */
    #spinner-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(2, 11, 18, 0.95);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        transition: opacity 0.5s;
    }

    #spinner-container.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .spinner {
        width: 40px;
        height: 40px;
        border: 3px solid color-mix(in srgb, var(--brand-500) 20%, transparent);
        border-top-color: var(--brand-500);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .my-indicator {
        display: none;
    }

    .htmx-request .my-indicator {
        display: flex;
    }

    .htmx-request .btn-text {
        display: none;
    }

    .spinners {
        width: 20px;
        height: 20px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }