:root{
    --bg:#0b1020;
    --surface:#12192b;
    --surface2:#18223a;
    --text:#eef2ff;
    --muted:#9aa6c5;
    --border:#273552;
    --primary:#8b5cf6;
    --secondary:#fb7185;
    --accent:#22d3ee;
    --good:#22c55e;
    --radius:18px;
    --shadow:0 18px 50px rgba(0,0,0,.2);
}

[data-theme="light"]{
    --bg:#f7f8fc;
    --surface:#ffffff;
    --surface2:#eef2ff;
    --text:#111827;
    --muted:#64748b;
    --border:#dde3ef;
    --shadow:0 16px 42px rgba(30,41,59,.08);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background:
        radial-gradient(circle at 20% 0%,rgba(139,92,246,.12),transparent 28%),
        radial-gradient(circle at 80% 10%,rgba(251,113,133,.10),transparent 28%),
        var(--bg);
    color:var(--text);
    line-height:1.65;
}

a{
    color:inherit;
    text-decoration:none;
}

.site-header{
    position:sticky;
    top:0;
    z-index:20;
    backdrop-filter:blur(18px);
    background:color-mix(in srgb,var(--bg) 86%,transparent);
    border-bottom:1px solid var(--border);
}

.header-inner{
    max-width:1180px;
    margin:auto;
    min-height:72px;
    padding:0 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.brand{
    font-weight:900;
    font-size:21px;
    letter-spacing:-.03em;
}

.brand span{
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
}

.nav{
    display:flex;
    gap:20px;
    align-items:center;
    color:var(--muted);
    font-size:14px;
    font-weight:700;
}

.header-actions{
    display:flex;
    gap:10px;
    align-items:center;
}

.btn,
.icon-btn{
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    border-radius:12px;
    padding:10px 15px;
    font-weight:800;
    cursor:pointer;
}

.btn-primary{
    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );
    border-color:transparent;
    color:#fff;
}

.hero{
    max-width:1180px;
    margin:auto;
    padding:90px 20px 52px;
    text-align:center;
}

.eyebrow{
    display:inline-flex;
    padding:7px 12px;
    border:1px solid var(--border);
    border-radius:999px;
    color:var(--accent);
    background:var(--surface);
    font-size:13px;
    font-weight:900;
    margin-bottom:20px;
}

.hero h1{
    margin:0 auto;
    max-width:900px;
    font-size:clamp(42px,7vw,76px);
    line-height:1.02;
    letter-spacing:-.055em;
}

.gradient-text{
    background:
        linear-gradient(
            90deg,
            #a78bfa,
            #fb7185,
            #22d3ee
        );
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
}

.hero p{
    max-width:720px;
    margin:22px auto 0;
    color:var(--muted);
    font-size:19px;
}

.hero-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px;
}

.section{
    max-width:1180px;
    margin:auto;
    padding:55px 20px;
}

.section-head{
    margin-bottom:26px;
}

.section-head h2,
.section-head h1{
    margin:0;
    font-size:clamp(30px,5vw,46px);
    letter-spacing:-.04em;
}

.section-head p{
    color:var(--muted);
    max-width:720px;
}

.grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:18px;
}

.card{
    padding:22px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:var(--shadow);
}

.card h3{
    margin:0 0 8px;
}

.card p{
    margin:0;
    color:var(--muted);
}

.tool-card{
    transition:
        transform .2s ease,
        border-color .2s ease;
}

.tool-card:hover{
    transform:translateY(-4px);
    border-color:
        color-mix(
            in srgb,
            var(--primary) 55%,
            var(--border)
        );
}

.flagship{
    max-width:930px;
    margin:0 auto;
    padding:28px;
    border-radius:26px;
    border:1px solid var(--border);
    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--surface) 92%,
                var(--primary)
            ),
            var(--surface)
        );
    box-shadow:var(--shadow);
}

.flagship-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:22px;
    align-items:center;
}

.stat-grid{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:14px;
}

.stat{
    text-align:center;
    padding:18px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
}

.stat strong{
    display:block;
    font-size:27px;
}

.stat span{
    color:var(--muted);
    font-size:13px;
}

.category-link{
    display:inline-flex;
    margin-top:14px;
    color:var(--accent);
    font-weight:800;
}

.private-shell{
    max-width:850px;
    margin:80px auto;
    padding:0 20px;
}

.notice{
    padding:18px;
    border:1px solid var(--border);
    background:var(--surface);
    border-radius:16px;
    color:var(--muted);
}

.footer{
    margin-top:50px;
    border-top:1px solid var(--border);
}

.footer-inner{
    max-width:1180px;
    margin:auto;
    padding:36px 20px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:20px;
    color:var(--muted);
}

.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
}

@media(max-width:900px){
    .nav{
        display:none;
    }

    .grid{
        grid-template-columns:1fr 1fr;
    }

    .flagship-grid{
        grid-template-columns:1fr;
    }

    .stat-grid{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:560px){
    .hero{
        padding-top:64px;
    }

    .grid{
        grid-template-columns:1fr;
    }

    .stat-grid{
        grid-template-columns:1fr 1fr;
    }

    .header-inner{
        min-height:64px;
    }

    .brand{
        font-size:18px;
    }

    .hero p{
        font-size:17px;
    }
}

/* Creator Deal Intelligence */

.calculator-shell{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
    gap:22px;
    align-items:start;
}

.form-card,
.result-card{
    border:1px solid var(--border);
    background:var(--surface);
    border-radius:22px;
    padding:24px;
    box-shadow:var(--shadow);
}

.field-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.field{
    margin-bottom:16px;
}

.field label{
    display:block;
    font-weight:800;
    margin-bottom:6px;
}

.field small{
    display:block;
    color:var(--muted);
    margin-top:5px;
}

.input,
.select{
    width:100%;
    min-height:46px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--bg);
    color:var(--text);
    padding:10px 12px;
    font:inherit;
}

.check-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 0;
    border-bottom:1px solid var(--border);
}

.quote-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:18px 0;
}

.quote-box{
    border:1px solid var(--border);
    background:var(--surface2);
    border-radius:16px;
    padding:16px;
}

.quote-box strong{
    display:block;
    font-size:26px;
}

.quote-box span{
    color:var(--muted);
    font-size:13px;
}

.breakdown{
    width:100%;
    border-collapse:collapse;
}

.breakdown th,
.breakdown td{
    border-bottom:1px solid var(--border);
    padding:10px 4px;
    text-align:left;
}

.breakdown td:last-child{
    text-align:right;
    font-weight:800;
}

.score-list{
    display:grid;
    gap:12px;
    margin-top:16px;
}

.score-row{
    display:grid;
    grid-template-columns:160px 1fr 50px;
    gap:10px;
    align-items:center;
}

.score-track{
    height:8px;
    background:var(--surface2);
    border-radius:999px;
    overflow:hidden;
}

.score-fill{
    height:100%;
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
}

.methodology{
    margin-top:28px;
    color:var(--muted);
}

.ai-note{
    padding:14px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--surface2);
    color:var(--muted);
    font-size:14px;
}

@media(max-width:900px){
    .calculator-shell{
        grid-template-columns:1fr;
    }
}

@media(max-width:620px){
    .field-grid,
    .quote-grid{
        grid-template-columns:1fr;
    }

    .score-row{
        grid-template-columns:125px 1fr 42px;
    }
}

/* Sponsor CRM */

textarea.input{
    min-height:100px;
    resize:vertical;
}

.pipeline-stage{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface2);
    font-size:12px;
    font-weight:800;
    text-transform:capitalize;
}

.workspace-toolbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
}

@media(max-width:700px){
    .workspace-toolbar{
        align-items:stretch;
        flex-direction:column;
    }
}