:root {

    --bg: #0b0d12;

    --surface:
        rgba(255,255,255,.055);

    --text:
        #f7f8fa;

    --muted:
        rgba(247,248,250,.64);

    --accent:
        #b9f56d;

    --line:
        rgba(255,255,255,.12);

    --max-width:
        760px;
}


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

* {

    box-sizing:
        border-box;

}


html,
body {

    margin:
        0;

    min-height:
        100%;

}


body {

    min-height:
        100vh;

    font-family:
        "DM Sans",
        system-ui,
        sans-serif;

    color:
        var(--text);

    background:
        var(--bg);

    -webkit-font-smoothing:
        antialiased;

}


/*
====================================================
PAGE
====================================================
*/

.page {

    position:
        relative;

    min-height:
        100svh;

    overflow:
        hidden;

    isolation:
        isolate;

}


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

.background {

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    background:

        linear-gradient(
            180deg,
            rgba(11,13,18,.30),
            rgba(11,13,18,.88)
        ),

        url("../assets/background.svg")

        center /
        cover
        no-repeat;

    transform:
        scale(1.01);

}


/*
====================================================
NOISE
====================================================
*/

.noise {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    pointer-events:
        none;

    opacity:
        .035;

    background-image:
        url("../assets/noise.svg");

    background-size:
        180px 180px;

}


/*
====================================================
HERO
====================================================
*/

.hero {

    min-height:
        100svh;

    display:
        grid;

    place-items:
        center;

    padding:
        28px 20px 22px;

    text-align:
        center;

}


/*
====================================================
CONTENT
====================================================
*/

.content {

    width:
        min(
            100%,
            var(--max-width)
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}


/*
====================================================
BRAND
====================================================
*/

.brand {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    color:
        var(--text);

    text-decoration:
        none;

    font-size:
        .76rem;

    font-weight:
        700;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

    margin-bottom:
        clamp(
            52px,
            10vh,
            96px
        );

}


.brand img {

    width:
        38px;

    height:
        38px;

    object-fit:
        contain;

}


/*
====================================================
EYEBROW
====================================================
*/

.eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--accent);

    font-size:
        .72rem;

    font-weight:
        700;

    letter-spacing:
        .20em;

    text-transform:
        uppercase;

    margin-bottom:
        17px;

}


.dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--accent);

    box-shadow:
        0 0 18px
        rgba(185,245,109,.65);

    animation:
        pulse 2s infinite;

}


/*
====================================================
HEADLINE
====================================================
*/

h1 {

    margin:
        0;

    font-family:
        Manrope,
        system-ui,
        sans-serif;

    font-size:
        clamp(
            2.65rem,
            12vw,
            6.2rem
        );

    line-height:
        .98;

    letter-spacing:
        -.065em;

    font-weight:
        800;

}


h1 em {

    color:
        var(--accent);

    font-style:
        normal;

}


/*
====================================================
MESSAGE
====================================================
*/

#message {

    width:
        min(
            100%,
            590px
        );

    margin:
        24px auto 0;

    color:
        var(--muted);

    font-size:
        clamp(
            .96rem,
            2.7vw,
            1.12rem
        );

    line-height:
        1.7;

}


/*
====================================================
COUNTDOWN
====================================================
*/

.countdown-wrap {

    margin-top:
        clamp(
            38px,
            7vh,
            64px
        );

}


.countdown {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        clamp(
            8px,
            2.2vw,
            22px
        );

}


.time {

    min-width:
        clamp(
            62px,
            16vw,
            106px
        );

}


.time strong {

    display:
        block;

    font-family:
        Manrope,
        system-ui,
        sans-serif;

    font-size:
        clamp(
            1.75rem,
            7vw,
            3rem
        );

    line-height:
        1;

    letter-spacing:
        -.045em;

    font-variant-numeric:
        tabular-nums;

}


.time span {

    display:
        block;

    margin-top:
        8px;

    color:
        rgba(
            247,
            248,
            250,
            .46
        );

    font-size:
        .62rem;

    font-weight:
        600;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.separator {

    color:
        rgba(
            247,
            248,
            250,
            .20
        );

    font-size:
        clamp(
            1.4rem,
            5vw,
            2.4rem
        );

    line-height:
        1;

    transform:
        translateY(-7px);

}


.launch-label {

    margin:
        18px 0 0;

    color:
        rgba(
            247,
            248,
            250,
            .35
        );

    font-size:
        .68rem;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}


/*
====================================================
FOOTER
====================================================
*/

.footer {

    margin-top:
        clamp(
            52px,
            10vh,
            90px
        );

    color:
        rgba(
            247,
            248,
            250,
            .34
        );

    font-size:
        .7rem;

}


/*
====================================================
ANIMATION
====================================================
*/

@keyframes pulse {

    0%,
    100% {

        opacity:
            1;

        transform:
            scale(1);

    }

    50% {

        opacity:
            .45;

        transform:
            scale(.78);

    }

}


/*
====================================================
TABLET / DESKTOP
====================================================
*/

@media (min-width: 700px) {

    .hero {

        padding:
            40px;

    }

    .brand {

        margin-bottom:
            84px;

    }

}


/*
====================================================
SMALL MOBILE
====================================================
*/

@media (max-width: 390px) {

    .hero {

        padding-left:
            14px;

        padding-right:
            14px;

    }

    .countdown {

        gap:
            4px;

    }

    .time {

        min-width:
            57px;

    }

    .separator {

        font-size:
            1.2rem;

    }

}


/*
====================================================
ACCESSIBILITY
====================================================
*/

@media (prefers-reduced-motion: reduce) {

    .dot {

        animation:
            none;

    }

}