/* ── RESET ── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ── DESIGN TOKENS ── */
:root {
    --color-meteor: #D27012;
    --color-nev-orange: #E36D16;
    --color-thunderbird: #BC3217;
    --color-heavy-metal: #1E1E1C;
    --color-nobel: #B3B2B2;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-sub-header: #B3B2B2;

    --gradient-brand: linear-gradient(90deg, #E36D16 0%, #BC3217 100%);

    --hero-padding-y: 40px;
    --hero-padding-x: 90px;
    --gap-nav: 50px;
    --gap-stats: 48px;

    --radius-cta: 8px;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;

}

body {
    font-family: "Kanit", sans-serif;
    background: var(--color-black);
    color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    width: 100%;
}

@media (max-width: 1200px) {
    :root {
        --hero-padding-x: 40px;
        --gap-nav: 24px;
    }
}

@media (max-width: 768px) {
    :root {
        --hero-padding-x: 24px;
        --hero-padding-y: 24px;
    }
}
/* --- MOBILE TWEAKS --- */
@media (max-width: 1200px) {
    :root {
        --hero-padding-x: 40px;
        --gap-nav: 24px;
    }
}
@media (max-width: 768px) {
    :root {
        --hero-padding-x: 24px;
        --hero-padding-y: 24px;
    }
}