:root {
    /* Core colors */
    --bg-top: #35360f;
    --bg-mid: #585528;
    --bg-bot: #a19b74;

    --text: #ffffff;
    --text-dim: rgba(255, 255, 255, 0.8);
    --dot: rgba(255, 255, 255, 0.3);
    --dot-active: rgba(255, 255, 255, 0.9);
    --border: rgba(255, 255, 255, 0.25);

    /* Layout and radius */
    --radius: 12px;
    --hero-safe-x: 56px;
    --hero-safe-x-mobile: 20px;
    --hero-safe-y: 56px;

    /* Typography */
    --font-base: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

/* changed */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-base);
    background: #000;
    color: var(--text);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1200px, calc(100% - 64px));
    margin: 0 auto;
}

.text-center {
    text-align: center;
}