:root {
    --bg: #010304;

    --teal-dark: #054c61;
    --teal-mid: #298e92;
    --teal: #45c1b7;
    --teal-hot: #6ffff2;

    --orange: #fd511c;
    --orange-hot: #ff7a35;
    --red: #f6181b;

    --white: #ffffff;

    --text-primary: rgba(255, 255, 255, 0.94);
    --text-secondary: rgba(255, 255, 255, 0.62);
    --text-muted: rgba(255, 255, 255, 0.38);

    --border-soft: rgba(255, 255, 255, 0.10);
    --border-medium: rgba(255, 255, 255, 0.16);

    --glass-dark: rgba(3, 8, 9, 0.86);

    --ease: cubic-bezier(.22, 1, .36, 1);

    --page-padding-desktop: 4.5vw;
    --page-padding-tablet: 28px;
    --page-padding-mobile: 20px;
}


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

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


html {
    width: 100%;
    min-height: 100%;

    scroll-behavior: smooth;
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}


body {
    width: 100%;
    min-height: 100%;

    overflow-x: hidden;

    background: var(--bg);

    color: var(--white);

    font-family:
        "Inter",
        Arial,
        Helvetica,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}


/* =========================================================
   BODY LOADING STATE
========================================================= */

body.is-loading {
    overflow: hidden;
}


body.loaded {
    overflow-x: hidden;
    overflow-y: auto;
}


/* =========================================================
   BASE ELEMENTS
========================================================= */

img,
svg,
video,
canvas {
    display: block;

    max-width: 100%;
}


img,
svg {
    height: auto;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    color: inherit;

    border: 0;

    background: none;
}


a {
    color: inherit;

    text-decoration: none;
}


ul,
ol {
    list-style: none;
}


/* =========================================================
   INTERACTION
========================================================= */

button,
a,
input[type="range"] {
    -webkit-tap-highlight-color: transparent;
}


button,
a {
    touch-action: manipulation;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

:focus-visible {
    outline:
        1px solid
        var(--teal-hot);

    outline-offset: 4px;
}


@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }
}


/* =========================================================
   GLOBAL PAGE STRUCTURE
========================================================= */

#site {
    position: relative;

    width: 100%;

    min-height: 100vh;
}


.page-section {
    position: relative;

    width: 100%;
}


/* =========================================================
   GENERIC TYPOGRAPHY HELPERS
========================================================= */

.text-primary {
    color: var(--text-primary);
}


.text-secondary {
    color: var(--text-secondary);
}


.text-muted {
    color: var(--text-muted);
}


/* =========================================================
   GENERIC GLASS SURFACE
========================================================= */

.glass-panel {
    border:
        1px solid
        var(--border-soft);

    background:
        rgba(4, 8, 9, 0.56);

    -webkit-backdrop-filter:
        blur(24px);

    backdrop-filter:
        blur(24px);
}


/* =========================================================
   GENERIC GRADIENT TEXT
========================================================= */

.brand-gradient-text {
    background:
        linear-gradient(
            90deg,
            var(--teal),
            var(--orange),
            var(--red)
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* =========================================================
   GENERIC SECTION CONTAINER
========================================================= */

.section-inner {
    width:
        min(
            1440px,
            calc(
                100% -
                (
                    var(--page-padding-desktop) *
                    2
                )
            )
        );

    margin-inline: auto;
}


/* =========================================================
   HIDDEN UTILITY
========================================================= */

.hidden {
    display: none !important;
}


/* =========================================================
   VISUALLY HIDDEN
========================================================= */

.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}