@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'
);


:root {

    --bg: #07090d;

    --panel: #10141c;

    --panel2: #151b25;

    --text: #f7f8fa;

    --muted: #9ba6b7;

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

    --accent: #b8ff42;

    --accent2: #7ee31b;

    --danger: #ff5b6e;

    --max: 1180px;

    --radius: 24px;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    background:

        radial-gradient(circle at 85% 10%,
            rgba(184, 255, 66, .08),
            transparent 30%),

        var(--bg);

    color: var(--text);

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

}


a {

    color: inherit;

    text-decoration: none;

}


.container {

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

    margin: auto;

}


/* NAV */

.nav {

    height: 78px;

    display: flex;

    align-items: center;

    justify-content:
        space-between;

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

}


.logo {

    font-weight: 900;

    letter-spacing:
        -.04em;

    font-size: 22px;

}


.logo span {

    color:
        var(--accent);

}


.navlinks {

    display: flex;

    gap: 24px;

    color: #c8ced8;

    font-size: 14px;

}


.navlinks a:hover {

    color:
        var(--accent);

}


.cart-pill {

    display: flex;

    gap: 9px;

    align-items: center;

    padding:
        11px 15px;

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

    border-radius:
        999px;

    background:
        #0c1017;

}


.badge {

    min-width: 22px;

    height: 22px;

    padding:
        0 6px;

    border-radius:
        99px;

    background:
        var(--accent);

    color:
        #0a0d0b;

    display: grid;

    place-items: center;

    font-size: 11px;

    font-weight: 900;

}


/* HERO */

.hero {

    min-height:
        650px;

    display: grid;

    grid-template-columns:
        1.05fr .95fr;

    align-items:
        center;

    gap: 50px;

    padding:
        70px 0;

}


.eyebrow {

    color:
        var(--accent);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;

}


h1 {

    font-size:
        clamp(48px,
            7vw,
            86px);

    line-height:
        .94;

    letter-spacing:
        -.065em;

    margin:
        18px 0;

}


h2 {

    font-size:
        clamp(32px,
            5vw,
            50px);

    line-height:
        1;

    letter-spacing:
        -.045em;

    margin:
        0 0 14px;

}


p {

    color:
        var(--muted);

    line-height:
        1.7;

}


.hero p {

    max-width:
        580px;

    font-size:
        17px;

}


.price {

    font-size:
        30px;

    font-weight:
        900;

    margin:
        25px 0;

}


/* BUTTON */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 10px;

    border: 0;

    border-radius:
        14px;

    padding:
        15px 21px;

    font-weight:
        900;

    cursor:
        pointer;

    font-size:
        14px;

    transition:
        .2s;

}


.btn-primary {

    background:
        var(--accent);

    color:
        #0a0d0b;

}


.btn-primary:hover {

    background:
        #d0ff85;

    transform:
        translateY(-1px);

}


.btn-dark {

    background:
        #171d27;

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

    color:
        white;

}


/* PRODUCT */

.product-stage {

    min-height:
        490px;

    border-radius:
        36px;

    background:
        linear-gradient(145deg,
            #151b25,
            #0d1118);

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

    display:
        grid;

    place-items:
        center;

    position:
        relative;

    overflow:
        hidden;

}


.product-stage:before {

    content: '';

    position:
        absolute;

    width:
        380px;

    height:
        380px;

    border-radius:
        50%;

    background:
        rgba(184, 255, 66, .10);

    filter:
        blur(10px);

}


.product-stage img {

    width:
        min(430px,
            85%);

    position:
        relative;

    filter:
        drop-shadow(0 30px 35px rgba(0, 0, 0, .55));

}


/* STATS */

.stats {

    display:
        grid;

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

    gap:
        14px;

    margin-top:
        35px;

}


.stat {

    padding:
        18px;

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

    border-radius:
        18px;

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

}


.stat b {

    font-size:
        18px;

}


.stat span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        12px;

    margin-top:
        5px;

}


/* SECTIONS */

.section {

    padding:
        90px 0;

}


.section-head {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        30px;

    align-items:
        end;

    margin-bottom:
        35px;

}


.section-head p {

    max-width:
        560px;

}


/* CARDS */

.grid3 {

    display:
        grid;

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

    gap:
        16px;

}


.card {

    background:
        var(--panel);

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

    border-radius:
        var(--radius);

    padding:
        28px;

}


.icon {

    width:
        46px;

    height:
        46px;

    border-radius:
        14px;

    display:
        grid;

    place-items:
        center;

    background:
        rgba(184, 255, 66, .1);

    color:
        var(--accent);

    font-size:
        20px;

    margin-bottom:
        22px;

}


.card h3 {

    margin:
        0 0 10px;

}


.card p {

    margin:
        0;

    font-size:
        14px;

}


/* FAQ */

.faq {

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

}


details {

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

    padding:
        22px 0;

}


summary {

    cursor:
        pointer;

    font-weight:
        800;

    list-style:
        none;

    display:
        flex;

    justify-content:
        space-between;

}


summary:after {

    content:
        '+';

    color:
        var(--accent);

    font-size:
        22px;

}


details[open] summary:after {

    content:
        '–';

}


details p {

    max-width:
        800px;

    margin:
        14px 0 0;

}


/* FOOTER */

.footer {

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

    padding:
        35px 0;

    color:
        var(--muted);

    font-size:
        13px;

}


.footer-row {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

}


/* PAGES */

.page {

    padding:
        55px 0 100px;

    min-height:
        75vh;

}


.page-title {

    margin-bottom:
        35px;

}


/* CHECKOUT */

.checkout-grid {

    display:
        grid;

    grid-template-columns:
        1fr 390px;

    gap:
        25px;

}


.panel {

    background:
        var(--panel);

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

    border-radius:
        var(--radius);

    padding:
        28px;

}


label {

    display:
        block;

    font-size:
        13px;

    font-weight:
        800;

    margin:
        0 0 8px;

}


input,
textarea {

    width:
        100%;

    padding:
        15px;

    border-radius:
        13px;

    background:
        #0b0f15;

    color:
        white;

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

    outline:
        0;

    font:
        inherit;

    margin-bottom:
        18px;

}


input:focus,
textarea:focus {

    border-color:
        var(--accent);

}


textarea {

    min-height:
        120px;

    resize:
        vertical;

}


/* CART */

.item {

    display:
        flex;

    gap:
        16px;

    align-items:
        center;

    padding:
        17px 0;

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

}


.thumb {

    width:
        75px;

    height:
        75px;

    border-radius:
        15px;

    background:
        #151b25;

    display:
        grid;

    place-items:
        center;

}


.thumb img {

    max-width:
        65px;

    max-height:
        65px;

}


.item-main {

    flex:
        1;

}


.item-main b {

    display:
        block;

}


.item-main small {

    color:
        var(--muted);

}


.qty {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


.qty button {

    width:
        34px;

    height:
        34px;

    border-radius:
        10px;

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

    background:
        #151b25;

    color:
        white;

    cursor:
        pointer;

}


.qty span {

    min-width:
        22px;

    text-align:
        center;

}


/* SUMMARY */

.summary-row {

    display:
        flex;

    justify-content:
        space-between;

    padding:
        10px 0;

    color:
        #cbd1da;

}


.summary-total {

    font-size:
        22px;

    font-weight:
        900;

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

    margin-top:
        12px;

    padding-top:
        18px;

}


/* NOTICE */

.notice {

    padding:
        14px 16px;

    border-radius:
        14px;

    background:
        rgba(184, 255, 66, .08);

    border:
        1px solid rgba(184, 255, 66, .18);

    color:
        #dfffb5;

    font-size:
        13px;

    margin-bottom:
        20px;

}


.alert {

    padding:
        14px;

    border-radius:
        14px;

    background:
        rgba(255, 91, 110, .08);

    border:
        1px solid rgba(255, 91, 110, .2);

    color:
        #ffb4be;

}


/* SUCCESS */

.center {

    max-width:
        760px;

    margin:
        60px auto;

    text-align:
        center;

}


.success {

    font-size:
        64px;

    margin-bottom:
        10px;

}


/* TRACKING */

.tracking {

    display:
        grid;

    gap:
        0;

    margin:
        30px 0;

}


.track-step {

    display:
        grid;

    grid-template-columns:
        30px 1fr;

    gap:
        15px;

    position:
        relative;

    padding-bottom:
        28px;

    text-align:
        left;

}


.track-step:not(:last-child):before {

    content:
        '';

    position:
        absolute;

    left:
        14px;

    top:
        30px;

    width:
        2px;

    height:
        calc(100% - 10px);

    background:
        var(--line);

}


.track-dot {

    width:
        30px;

    height:
        30px;

    border-radius:
        50%;

    background:
        #1c2430;

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

    z-index:
        1;

}


.track-step.active .track-dot {

    background:
        var(--accent);

    border-color:
        var(--accent);

}


.track-step h4 {

    margin:
        3px 0 4px;

}


.track-step p {

    margin:
        0;

    font-size:
        13px;

}


/* MOBILE */

@media (max-width:800px) {

    .navlinks {
        display:
            none;
    }


    .hero {

        grid-template-columns:
            1fr;

        padding:
            45px 0;

    }


    .product-stage {

        min-height:
            380px;

    }


    .grid3 {

        grid-template-columns:
            1fr;

    }


    .stats {

        grid-template-columns:
            1fr;

    }


    .checkout-grid {

        grid-template-columns:
            1fr;

    }


    .section {

        padding:
            65px 0;

    }


    .footer-row {

        flex-direction:
            column;

    }


    .item {

        flex-wrap:
            wrap;

    }

}