/* ======================================================
   AggFynder SaaS Landing Page
   Base Styles
====================================================== */

:root {

    /* Brand */

    --primary: #2563EB;
    --primary-light: #3B82F6;

    --secondary: #38BDF8;

    --success: #10B981;

    --danger: #EF4444;

    --warning: #F59E0B;

    /* Backgrounds */

    --bg: #020617;
    --bg-light: #0F172A;
    --bg-card: rgba(15,23,42,.72);

    /* Text */

    --text: #FFFFFF;
    --text-light: #CBD5E1;
    --text-muted: #94A3B8;

    /* Borders */

    --border: rgba(255,255,255,.08);

    /* Radius */

    --radius-sm:8px;
    --radius-md:16px;
    --radius-lg:24px;

    /* Shadow */

    --shadow:

        0 12px 40px rgba(0,0,0,.35);

}

/* ====================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    line-height:1.6;

}

/* ====================================================== */

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

/* ====================================================== */

.container{

    width:min(1200px,92%);

    margin:auto;

}

/* ====================================================== */

section{

    padding:110px 0;

}

/* ====================================================== */

h1{

    font-size:68px;

    line-height:1.05;

    font-weight:900;

    letter-spacing:-2px;

}

h2{

    font-size:44px;

    font-weight:800;

}

h3{

    font-size:28px;

    font-weight:700;

}

p{

    color:var(--text-light);

    font-size:18px;

}

/* ====================================================== */

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 30px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:white;

    font-weight:700;

    transition:.35s;

    box-shadow:

        0 10px 30px rgba(37,99,235,.35);

}

.primary-btn:hover{

    transform:translateY(-3px);

    box-shadow:

        0 18px 40px rgba(37,99,235,.45);

}

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 30px;

    border-radius:14px;

    border:1px solid var(--border);

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    transition:.35s;

}

.secondary-btn:hover{

    background:rgba(255,255,255,.09);

}

.large{

    min-width:180px;

}

/* ====================================================== */

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:100px;

    background:rgba(37,99,235,.12);

    border:1px solid rgba(37,99,235,.25);

    color:#93C5FD;

    margin-bottom:28px;

    font-size:15px;

    font-weight:600;

}

/* ====================================================== */

.glass{

    background:var(--bg-card);

    backdrop-filter:blur(20px);

    border:1px solid var(--border);

    border-radius:24px;

}

/* ====================================================== */

.green{

    color:#22C55E;

}

.red{

    color:#EF4444;

}

.blue{

    color:#38BDF8;

}

/* ====================================================== */

.next-section{

    text-align:center;

    background:#08111F;

    border-top:1px solid var(--border);

}

/* ====================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#020617;

}

::-webkit-scrollbar-thumb{

    background:#2563EB;

    border-radius:20px;

}

/* ====================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade-up.active{

    opacity:1;

    transform:translateY(0);

}

/* ====================================================== */

@media(max-width:992px){

    h1{

        font-size:52px;

    }

    h2{

        font-size:36px;

    }

}

@media(max-width:768px){

    section{

        padding:80px 0;

    }

    h1{

        font-size:40px;

        line-height:1.15;

    }

    h2{

        font-size:30px;

    }

    p{

        font-size:16px;

    }

}

@media(max-width:480px){

    .container{

        width:92%;

    }

    h1{

        font-size:34px;

    }

}