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

:root {
    --primary: #6366f1;
    --secondary: #8b5cf6;
    --background: #050816;
    --card: rgba(255, 255, 255, 0.08);
    --border: rgba(255, 255, 255, 0.12);
    --text-muted: rgba(255,255,255,0.65);
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(99,102,241,0.25), transparent 35%),
        radial-gradient(circle at bottom right, rgba(139,92,246,0.25), transparent 35%),
        var(--background);
    color: white;
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;
    overflow-x: hidden;
}


/* Main container */

.container {
    width: min(92%, 1200px);
    margin: 50px auto;
    text-align: center;
}


.container h1 {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 35px;

    background: linear-gradient(
        90deg,
        #ffffff,
        #a5b4fc
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Video card */

video {

    width:100%;
    max-height:650px;

    border-radius:24px;

    background:#000;

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

    box-shadow:
        0 25px 80px rgba(0,0,0,0.5),
        inset 0 0 30px rgba(255,255,255,0.05);

    backdrop-filter:blur(20px);

    transition:0.3s ease;
}


video:hover {

    transform:translateY(-3px);

    box-shadow:
        0 35px 100px rgba(0,0,0,0.65);

}



/* Join overlay */

#overlay {

    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            rgba(5,8,22,0.95),
            rgba(15,23,42,0.95)
        );

    backdrop-filter:blur(15px);

    z-index:999;

}



#join {

    width:380px;

    padding:45px 40px;

    text-align:center;

    border-radius:28px;

    background:var(--card);

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

    box-shadow:
        0 30px 80px rgba(0,0,0,0.5);

    animation:
        popup .5s ease;

}



#join h2 {

    font-size:34px;

    font-weight:800;

    margin-bottom:30px;

    background:
        linear-gradient(
            90deg,
            #fff,
            #c4b5fd
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}



/* SaaS Button */

#joinBtn {

    width:100%;

    padding:16px 25px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    color:white;

    font-size:16px;

    font-weight:700;

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


    box-shadow:
        0 10px 30px rgba(99,102,241,.4);


    transition:.3s ease;

}



#joinBtn:hover {

    transform:translateY(-3px);

    box-shadow:
        0 20px 40px rgba(99,102,241,.55);

}



#joinBtn:active {

    transform:scale(.97);

}



/* Animations */

@keyframes popup {

    from {

        opacity:0;

        transform:
            scale(.9)
            translateY(20px);

    }


    to {

        opacity:1;

        transform:
            scale(1)
            translateY(0);

    }

}



/* Responsive */

@media(max-width:768px){

    .container{
        margin:25px auto;
    }


    .container h1{
        font-size:34px;
    }


    #join {

        width:90%;

        padding:35px 25px;

    }


}

.subtitle{
    color:var(--text-muted);
    margin-top:-20px;
    margin-bottom:35px;
    font-size:18px;
}