:root {
    --bg-0: #0B0C10;   
    --bg-1: #111418;   
    --bg-2: #161B22;   
    --bg-3: #1C2129;

    --bg-card: #15253a;

    --accent-color: #bf9853;
    --accent-hover: #b08d1f;
    --accent-light: #e8c86b;

    --title-color: #ffffff;
    --text-color: #e0e0e0;
    --text-muted: #94a3b8;
    --text-dark: #0f1620;

    --border-color: rgba(255,255,255,0.08);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.25);

    --white: #ffffff;
    --black: #000000;
}

/* -------------------- RESET ------------------------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 18px;
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-1);
}

h1, h2, h3, h4, .tagline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--title-color);
}

p { margin: 10px 0; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container {
    max-width: 70%;
    margin: 0 auto;
    padding: 0 20px;
}

.margin-top {
    margin-top: 25px;
}

.section { padding: 80px 0; }
.bg-2 { background-color: var(--bg-2); }
.bg-3 { background-color: var(--bg-3); }

/* MOBILE SHARED */
@media (max-width: 900px) {
    html {
        font-size: 10px;
    }
    .container {
        max-width: 95%;
    }
    .section {
        padding: 20px 0;
    }
}