/* -------------------
   CUSTOM FONTS
------------------- */


@font-face {

    font-family: "Monogram";

    src:
        url("monogram-extended.ttf")
        format("truetype");

    font-weight:
        normal;

    font-style:
        normal;

    font-display:
        swap;

}

:root {

    --bg: #171923;
    --bg-soft: #202431;
    --card: #292D3A;

    --text: #FFF4DD;
    --text-muted: #B8B7B0;

    --gold: #EFC15F;
    --orange: #D88E4F;

    --border:
        rgba(239,193,95,0.18);


    --pixel-shadow:
        4px 4px 0 rgba(0,0,0,0.35);

}



* {
    box-sizing:border-box;
}



html {

    scroll-behavior:smooth;

}

body::before {

    content:"";

    position:fixed;

    inset:0;


    pointer-events:none;


    opacity:.04;


    background-image:

        linear-gradient(
            45deg,
            #fff 25%,
            transparent 25%
        );


    background-size:

        4px 4px;

}

body {

    margin:0;


    background:
        linear-gradient(
            180deg,
            #171923,
            #1B1D26
        );


    color:var(--text);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height:1.6;

}



h1,
h2,
h3,
.logo {

    font-family:
        "Monogram",
        monospace;


    font-weight:
        normal;


    letter-spacing:
        .05em;

}



.container {
    width: min(1120px, 90%);
    margin: auto;
}



.narrow {
    max-width: 760px;
}



/* -------------------
   HEADER
------------------- */


header {

    position: sticky;
    top: 0;

    z-index: 10;

    backdrop-filter: blur(12px);

    background:
        rgba(27,29,38,0.85);

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


.nav-container {

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}



.logo {

    display:flex;

    align-items:center;

    gap:14px;


    color:var(--text);

    text-decoration:none;


    font-size:2rem;


    image-rendering:pixelated;

}



.logo-image {

    width:48px;

    height:48px;


    image-rendering:pixelated;

}


nav {

    display: flex;

    align-items: center;

    gap: 28px;

}



nav a {

    color: var(--text-muted);

    text-decoration: none;

    transition: color .2s ease;

}


nav a:hover {

    color: var(--text);

}



/* -------------------
   BUTTONS
------------------- */


.play-button,
.cta {


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:

        12px 24px;


    background:

        var(--gold);


    color:#251A0C;


    text-decoration:none;


    font-family:
        "Jersey 10",
        monospace;


    font-size:
        1.3rem;


    border:

        3px solid #21190C;


    box-shadow:

        4px 4px 0 #21190C;


    transition:
        background-color .15s ease,
        color .15s ease;

}


/* pixel click effect */

.play-button:hover,
.cta:hover {
    box-shadow:

        2px 2px 0 #21190C;


    background:

        var(--orange);

}



/* -------------------
   HERO
------------------- */


.hero {

    padding:
        100px 0 120px;

}



.hero-content {


    display: grid;

    grid-template-columns:
        1.2fr
        .8fr;


    gap: 70px;

    align-items: center;

}



.tag {


    display:inline-block;


    padding:

        6px 14px;


    background:

        rgba(239,193,95,.12);


    color:

        var(--gold);


    border:

        2px solid var(--gold);


    font-family:

        "Jersey 10",
        monospace;


    font-size:

        1.1rem;

}



h1 {

    font-size:
        clamp(2.5rem,5vw,4rem);

    line-height:
        1.15;

    letter-spacing:
        .08em;

    margin:
        0 0 24px;
}



.hero-text p {


    color:
        var(--text-muted);


    font-size:
        1.15rem;


    max-width:
        580px;


}



.hero-buttons {

    margin-top:
        36px;

}



.hero-card {


    background:

        var(--card);


    padding:

        34px;


    border:

        3px solid var(--border);


    box-shadow:

        6px 6px 0 rgba(0,0,0,.35);


}



.hero-card h3 {

    margin-top:
        0;

}



.hero-card ul {


    padding:
        0;


    margin:
        25px 0 0;


    list-style:
        none;

}



.hero-card li {

    padding:
        12px 0;

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

    color:
        var(--text-muted);

}




/* -------------------
   SECTIONS
------------------- */


.section {

    padding:
        100px 0;

}



.section h2 {


    font-size:
        clamp(2rem,4vw,3rem);


    line-height:
        1.2;


    letter-spacing:
        -.04em;


}



.section p {

    color:
        var(--text-muted);

    font-size:
        1.1rem;

}



.section strong {

    color:
        var(--gold);

}



.alt {

    background:
        var(--bg-soft);

}




/* -------------------
   CARDS
------------------- */


.cards {


    margin-top:
        50px;


    display:
        grid;


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


    gap:
        24px;

}



.card {
    background:

        var(--card);


    padding:

        28px;


    border:

        3px solid var(--border);


    box-shadow:

        var(--pixel-shadow);


    border-radius:

        0;

}



.card:hover {

    border-color:

        var(--gold);
}



.icon {

    font-size:
        2rem;

    margin-bottom:
        20px;

}



.card h3 {

    margin:
        0 0 12px;

}



.card p {

    font-size:
        .95rem;

}



/* -------------------
   QUOTE
------------------- */


.quote {


    padding:
        120px 0;


    text-align:
        center;

}



blockquote {


    margin:
        0;


    font-size:
        clamp(1.8rem,4vw,2.8rem);


    line-height:
        1.25;


    letter-spacing:
        -.04em;


    color:
        var(--text);

}



.quote p {

    margin:
        35px auto;


    color:
        var(--text-muted);


}



.cta.large {

    margin-top:
        15px;

}



/* -------------------
   FOOTER
------------------- */


footer {


    background:
        #151720;


    padding:
        70px 0;


    text-align:
        center;


}



footer h3 {


    font-size:
        2rem;


    margin:
        0 0 10px;

}



footer p {


    color:
        var(--text-muted);


    max-width:
        550px;


    margin:
        0 auto 30px;

}

/* -------------------
   FOOTER BUTTONS
------------------- */

footer .footer-button,
footer .footer-discord {

    display: inline-flex;

    align-items: center;

    justify-content: center;


    padding:
        9px 18px;


    margin:
        6px;


    border-radius:0;
    border:2px solid var(--border);
    box-shadow:3px 3px 0 rgba(0,0,0,.3);


    font-size:
        0.9rem;


    font-weight:
        600;


    text-decoration:
        none;


    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;

}


/* Main footer action */

footer .footer-button {

    background:
        var(--gold);


    color:
        #211A10;


    border:
        1px solid transparent;

}


footer .footer-button:hover {

    background:
        var(--orange);


    color:
        #fff6e6;

}


/* Secondary footer action */

footer .footer-discord {

    background:
        transparent;


    color:
        var(--text-muted);


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

}


footer .footer-discord:hover {

    color:
        var(--text);


    border-color:
        rgba(239,193,95,0.4);

}




/* -------------------
   MOBILE
------------------- */


@media(max-width:900px) {


    .nav-container {

        padding:
            0 18px;

    }


    .logo {

        gap:
            10px;

        padding-right:
            12px;

    }


    .logo-image {

        width:
            36px;

        height:
            36px;

    }


    nav {

        gap:
            12px;

    }


    nav a:not(.play-button) {

        display:
            none;

    }


    .play-button {

        padding:
            9px 16px;

        border-radius:
            10px;

        font-size:
            0.9rem;

        white-space:
            nowrap;

    }


    .hero-content {

        grid-template-columns:
            1fr;

    }


    .cards {

        grid-template-columns:
            1fr 1fr;

    }

}



@media(max-width:600px) {


    .nav-container {

        height:
            70px;

        padding:
            0 20px;

    }


    .logo {

        font-family:
        "Monogram",
        monospace;

        font-size:
            2.2rem;


        letter-spacing:
            .08em;

        padding-right:
            8px;

    }


    nav {

        margin-left:
            auto;

    }


    .play-button {

        padding:
            8px 14px;

        font-size:
            0.85rem;

    }


    .cards {

        grid-template-columns:
            1fr;

    }


    .hero {

        padding:
            70px 0;

    }


    .hero-card {

        padding:
            24px;

    }


    h1 {

        font-size:
            2.7rem;

    }

}