/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {

    /* Colors */

    --color-background: #0B0D10;
    --color-surface: #141922;
    --color-surface-light: #1B2230;

    --color-primary: #5FA8FF;
    --color-primary-hover: #7AB8FF;

    --color-text: #F5F7FA;
    --color-text-muted: #A7B0BE;

    --color-border: rgba(255,255,255,.08);

    /* Typography */

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

    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Layout */

    --container-width: 1280px;

    --section-spacing: 140px;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;

    --transition: .25s ease;

}

/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

html {

    scroll-behavior: smooth;

}

body {

    background: var(--color-background);

    color: var(--color-text);

    font-family: var(--font-family);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

}

img {

    display: block;

    max-width: 100%;

}

a {

    color: inherit;

    text-decoration: none;

}

button {

    font: inherit;

    border: none;

    background: none;

    cursor: pointer;

}

ul {

    list-style: none;

}

/* ==========================================================================
   GLOBAL TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    line-height: 1.1;

    font-weight: var(--font-bold);

}

p {

    color: var(--color-text-muted);

}

/* ===========================================================
   GLOBAL SECTION SPACING
=========================================================== */

section{

    position:relative;

    padding:7rem 0;

}

.section-header{

    max-width:760px;

    margin:0 auto 4.5rem;

    text-align:center;

}

.section-label{

    display:inline-block;

    margin-bottom:1rem;

}

.section-title{

    margin-bottom:1.5rem;

}

.section-subtitle{

    max-width:720px;

    margin:0 auto;

    line-height:1.8;

    opacity:.78;

}
body.menu-open{

    overflow:hidden;

}