/* ===================================================
   WEBPOT
   Global Styles
   File: style.css
=================================================== */

/* ==========================
   GOOGLE FONTS (SANS-SERIF SUITE)
========================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@400;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Poppins:wght@400;500;600;700;800&family=Sora:wght@300;400;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;600;700;800&display=swap');

/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    /* scroll-behavior handled by Lenis smooth scroll engine */
}

body{
    font-family:'DM Sans', 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    line-height:1.6;
}

/* ==========================
   TYPOGRAPHY (SANS-SERIF DEFAULT)
========================== */

h1,h2,h3,h4,h5,h6{
    font-family:'DM Sans', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-weight:800;
    line-height:1.1;
}

h1{
    font-size:clamp(3rem,7vw,6rem);
}

h2{
    font-size:clamp(2.2rem,5vw,4rem);
}

h3{
    font-size:1.8rem;
}

p{
    color:var(--text-light);
    font-size:1rem;
}

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

ul{
    list-style:none;
}

img{
    max-width:100%;
    display:block;
}

video{
    width:100%;
    display:block;
}

/* ==========================
   LAYOUT
========================== */

.container{
    width:min(90%, var(--container-width));
    margin:auto;
}

section{
    position:relative;
    padding:var(--section-padding) 0;
}

/* ==========================
   BUTTONS
========================== */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;

    padding:14px 28px;

    border:none;
    border-radius:var(--radius-xl);

    cursor:pointer;

    transition:var(--transition);

    font-weight:600;
}

.btn-primary{

    background:#111;

    color:#fff;

    border-radius:999px;

}

.btn-primary:hover{

    background:#000;

    transform:translateY(-3px);

}

.btn-glass{

    background:white;

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

    color:#111;

}

.btn-glass:hover{

    border-color:#111;

}

/* ==========================
   CUSTOM SCROLLBAR
========================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#eef2f7;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(
        #38BDF8,
        #A855F7
    );
    border-radius:20px;
}

/* ==========================
   TEXT SELECTION
========================== */

::selection{
    background:#4F46E5;
    color:#fff;
}

/* ==========================
   UTILITIES
========================== */

.text-center{
    text-align:center;
}

.flex{
    display:flex;
}

.grid{
    display:grid;
}

.hidden{
    display:none;
}

/* ==========================
   BACKGROUND BLOBS
========================== */

body::before,
body::after{
    content:"";
    position:fixed;
    border-radius:50%;
    filter:blur(80px);
    z-index:-1;
    opacity:.35;
    pointer-events:none;
}

body::before{
    width:320px;
    height:320px;

    background:#38BDF8;

    top:-60px;
    left:-60px;
}

body::after{
    width:350px;
    height:350px;

    background:#A855F7;

    bottom:-60px;
    right:-60px;
}