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

html {
    scroll-behavior: smooth;
}

body,
button,
input,
textarea,
select {
    font-family: "Manrope", Arial, sans-serif;
}

img {
    display: block;
    max-width: 100%;
}

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

button {
    border: 0;
    cursor: pointer;
}

/* =========================================================
   VARIABLES
========================================================= */

:root {
    --bg: #ffffff;
    --surface: #f5f7f8;
    --surface-dark: #17242b;

    --ink: #1b2327;
    --ink-soft: #5d6a70;
    --muted: #7d898e;

    --accent: #3985b3;
    --accent-dark: #286d98;
    --accent-light: #e7f2f8;

    --line: #dfe5e8;

    --radius-small: 8px;
    --radius: 14px;
    --radius-large: 22px;

    --container: 1180px;
}

/* =========================================================
   GLOBAL CONTAINER
========================================================= */

.section-container {
    width: min(var(--container), calc(100% - 48px));
    margin: 0 auto;
}

.section-header {
    width: min(760px, calc(100% - 40px));
    margin: 0 auto 42px;
    text-align: center;
}

.section-title {
    font-size: 38px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: 2px;
}

.section-header p {
    margin-top: 12px;
    color: var(--ink-soft);
    font-size: 15px;
}

/* =========================================================
   FINAL DARK / SKY BACKGROUND SYSTEM
========================================================= */

html,
body {
    background: #0b0b0b;
    color: #ffffff;
}

body {
    background-image: none;
}

.section-title,
.about-text,
.section-header p,
.hero h1,
.hero p,
.stats,
.stats .section-title,
.stats .section-header p {
    color: #ffffff;
}