:root{

    --bg:#071018;
    --bg2:#0b141e;

    --panel:#101923;
    --panel2:#16222d;

    --text:#eef5fb;
    --muted:#9db0c1;

    --cyan:#39c7ff;
    --cyanHover:#6fd8ff;

    --line:rgba(57,199,255,.15);

    --radius:18px;

    --shadow:
        0 20px 60px rgba(0,0,0,.45),
        0 0 30px rgba(57,199,255,.08);

}

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

    font-family:Inter,sans-serif;

    line-height:1.7;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;

    text-decoration:none;

    transition:.25s;

}

.container{

    width:min(1320px,92%);

    margin:auto;

}



/*************************************************

NAVBAR

*************************************************/

header{

    position:relative;

    z-index:100;

    background:#071018;

    border-bottom:1px solid rgba(57,199,255,.08);

}

.nav{

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    font-size:25px;

    font-weight:800;

    letter-spacing:.08em;

}

.logo span{

    color:var(--cyan);

}

nav{

    display:flex;

    gap:44px;

}

nav a{

    color:#c0ceda;

    font-weight:500;

}

nav a:hover{

    color:var(--cyan);

}

.downloadButton{

    padding:14px 24px;

    border-radius:14px;

    background:rgba(57,199,255,.10);

    border:1px solid rgba(57,199,255,.30);

    color:var(--cyan);

    font-weight:600;

}

.downloadButton:hover{

    background:var(--cyan);

    color:#071018;

}



/*************************************************

HERO

*************************************************/

.hero{

    position:relative;

    overflow:hidden;

    height:calc(100svh - 82px);

    min-height:740px;

}

.heroImage{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:right top;

}

.heroOverlay{

    position:relative;

    z-index:2;

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

}

.heroOverlay::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            rgba(7,16,24,.90) 0%,

            rgba(7,16,24,.72) 28%,

            rgba(7,16,24,.20) 60%,

            rgba(7,16,24,0) 100%

        );

}

.heroContent{

    position:relative;

    z-index:2;

    max-width:640px;

    padding-top:80px;

}

.eyebrow{

    color:var(--cyan);

    font-size:13px;

    letter-spacing:.40em;

    margin-bottom:26px;

}

.hero h1{

    font-size:clamp(56px,5vw,86px);

    line-height:.92;

    font-weight:800;

    margin-bottom:34px;

}

.hero p{

    color:var(--muted);

    font-size:22px;

    max-width:480px;

    margin-bottom:46px;

}

.buttons{

    display:flex;

    gap:18px;

}

.primaryButton{

    padding:18px 34px;

    border-radius:15px;

    background:var(--cyan);

    color:#071018;

    font-weight:700;

    box-shadow:0 10px 35px rgba(57,199,255,.28);

}

.primaryButton:hover{

    transform:translateY(-2px);

    background:var(--cyanHover);

}

.secondaryButton{

    padding:18px 34px;

    border-radius:15px;

    border:1px solid rgba(255,255,255,.15);

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

    backdrop-filter:blur(10px);

}

.secondaryButton:hover{

    border-color:var(--cyan);

}



/*************************************************

SECTIONS

*************************************************/

.products,
.why{

    padding:130px 0;

}

.products{

    background:#081018;

}

.why{

    background:#0c1520;

}

.products h2,
.why h2{

    font-size:54px;

    margin-bottom:55px;

}



/*************************************************

CARDS

*************************************************/

.cards{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:36px;

}

.card{

    background:

        linear-gradient(

            180deg,

            var(--panel),

            var(--panel2)

        );

    border:1px solid rgba(57,199,255,.12);

    border-radius:24px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.card:hover{

    transform:translateY(-10px);

    border-color:rgba(57,199,255,.35);

}

.card img{

    padding:40px;

}

.card h3{

    font-size:34px;

    padding:0 36px;

}

.card p{

    padding:20px 36px;

    color:var(--muted);

}

.cardLink{

    padding:0 36px 36px;

    color:var(--cyan);

    font-weight:700;

}

.status{

    display:inline-block;

    margin:0 0 22px 36px;

    padding:8px 16px;

    border-radius:999px;

    font-size:12px;

    letter-spacing:.12em;

    font-weight:700;

}

.available{

    background:rgba(57,199,255,.12);

    color:var(--cyan);

}

.coming{

    background:rgba(255,200,0,.12);

    color:#ffd768;

}



/*************************************************

FEATURES

*************************************************/

.features{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.features div{

    background:

        linear-gradient(

            var(--panel),

            var(--panel2)

        );

    border:1px solid rgba(57,199,255,.10);

    border-radius:22px;

    padding:36px;

}

.features h3{

    font-size:30px;

    margin-bottom:18px;

}

.features p{

    color:var(--muted);

}



/*************************************************

FOOTER

*************************************************/

footer{

    background:#071018;

    border-top:1px solid rgba(57,199,255,.08);

    padding:70px 0;

    text-align:center;

    color:#7f93a6;

}

.section-intro{

    max-width:700px;

    margin:-20px auto 50px;

    text-align:center;

    color:var(--muted);

    font-size:20px;

}

.downloads{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:32px;

}

.download-box{

    background:

        linear-gradient(

            180deg,

            var(--panel),

            var(--panel2)

        );

    border:1px solid rgba(57,199,255,.12);

    border-radius:24px;

    padding:40px;

    box-shadow:var(--shadow);

}

.download-box h3{

    font-size:34px;

    color:var(--cyan);

    margin-bottom:10px;

}

.platform{

    color:var(--muted);

    margin-bottom:26px;

}

.download-link{

    display:block;

    padding:22px;

    border-radius:16px;

    border:1px solid rgba(57,199,255,.15);

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

    transition:.25s;

}

.download-link strong{

    display:block;

    font-size:20px;

    margin-bottom:6px;

    color:white;

}

.download-link:hover{

    border-color:var(--cyan);

    background:rgba(57,199,255,.08);

    transform:translateY(-3px);

    box-shadow:

        0 0 30px rgba(57,199,255,.18);

}

@media(max-width:900px){

    .downloads{

        grid-template-columns:1fr;

    }

}

/*************************************************

TABLET

*************************************************/

@media (max-width:1100px){

    .container{

        width:min(94%,1200px);

    }

    nav{

        gap:28px;

    }

    .hero{

        min-height:760px;

    }

    .heroImage{

        object-position:72% top;

    }

    .heroContent{

        max-width:540px;

    }

    .hero h1{

        font-size:64px;

    }

    .hero p{

        font-size:20px;

    }

}


/*************************************************

MOBILE

*************************************************/

@media (max-width:900px){

    header{

        backdrop-filter:blur(14px);

    }

    .nav{

        height:74px;

    }

    nav{

        display:none;

    }

    .downloadButton{

        display:none;

    }

    .hero{

        min-height:700px;

        height:700px;

    }

    .heroImage{

        object-position:74% top;

    }

    .heroOverlay::before{

        background:

        linear-gradient(

            180deg,

            rgba(7,16,24,.88) 0%,

            rgba(7,16,24,.70) 35%,

            rgba(7,16,24,.30) 70%,

            rgba(7,16,24,.15) 100%

        );

    }

    .heroContent{

        max-width:100%;

        padding-top:90px;

    }

    .hero h1{

        font-size:54px;

    }

    .hero p{

        font-size:19px;

        max-width:420px;

    }

    .buttons{

        flex-wrap:wrap;

    }

    .products,
    .why{

        padding:90px 0;

    }

    .products h2,
    .why h2{

        font-size:42px;

    }

    .cards{

        grid-template-columns:1fr;

    }

    .features{

        grid-template-columns:1fr;

    }

}


/*************************************************

PHONE

*************************************************/

@media (max-width:640px){

    .container{

        width:92%;

    }

    .hero{

        min-height:640px;

        height:640px;

    }

    .heroImage{

        object-position:76% top;

    }

    .heroContent{

        padding-top:70px;

    }

    .eyebrow{

        font-size:11px;

        letter-spacing:.28em;

    }

    .hero h1{

        font-size:42px;

        line-height:.95;

    }

    .hero p{

        font-size:17px;

        margin-bottom:34px;

    }

    .buttons{

        flex-direction:column;

        align-items:flex-start;

        width:100%;

    }

    .primaryButton,
    .secondaryButton{

        width:100%;

        text-align:center;

    }

    .card img{

        padding:24px;

    }

    .card h3{

        padding:0 24px;

        font-size:28px;

    }

    .card p{

        padding:16px 24px;

    }

    .cardLink{

        padding:0 24px 24px;

    }

    .status{

        margin-left:24px;

    }

    .products h2,
    .why h2{

        font-size:34px;

    }

    .features div{

        padding:26px;

    }

    .features h3{

        font-size:24px;

    }

    footer{

        padding:50px 0;

        font-size:14px;

    }

}