/* =========================================
   DEVORBIT — GLOBAL
========================================= */

:root {
    --bg: #08090b;
    --surface: #101216;
    --surface-2: #15171c;

    --text: #f5f5f7;
    --text-secondary: #9b9da5;
    --text-muted: #62656d;

    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);

    --brand-blue: #285cff;
    --brand-purple: #7347e8;

    --container: 1400px;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);

    --transition-fast: 220ms var(--ease);
    --transition: 500ms var(--ease);
}


/* =========================================
   LIGHT THEME
========================================= */

body.light-theme {
    --bg: #f6f6f4;
    --surface: #ffffff;
    --surface-2: #eeeeeb;

    --text: #111216;
    --text-secondary: #686a70;
    --text-muted: #999ba0;

    --border: rgba(0, 0, 0, 0.09);
    --border-strong: rgba(0, 0, 0, 0.16);

    --brand-blue: #285cff;
    --brand-purple: #7347e8;
}


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

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


html {
    scroll-behavior: smooth;

    background:
        var(--bg);

    transition:
        background-color 500ms ease;
}


body {
    min-height: 100vh;

    background:
        var(--bg);

    color:
        var(--text);

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

    line-height: 1.5;

    overflow-x: hidden;

    transition:
        background-color 500ms ease,
        color 500ms ease;
}


body.menu-open {
    overflow: hidden;
}


/* =========================================
   THEME TRANSITION HELPERS
========================================= */

/*
   These elements use CSS variables for their
   colors, so the theme can change smoothly.
*/

.site-header,
.navbar,
.mobile-menu,
.site-footer,
.section-container,
.footer-container {
    transition:
        background-color 500ms ease,
        color 500ms ease,
        border-color 500ms ease;
}


/* =========================================
   SELECTION
========================================= */

::selection {
    background:
        var(--text);

    color:
        var(--bg);
}


/* =========================================
   FORM ELEMENTS
========================================= */

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


button {
    border: 0;

    background:
        none;

    color:
        inherit;

    cursor:
        pointer;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


img {
    display:
        block;

    max-width:
        100%;
}


ul,
ol {
    list-style:
        none;
}


/* =========================================
   CONTAINERS
========================================= */

.section-container,
.footer-container {
    width:
        min(
            calc(100% - 80px),
            var(--container)
        );

    margin-inline:
        auto;
}


/* =========================================
   BUTTONS
========================================= */

.button {
    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    min-height:
        54px;

    padding:
        0 25px;

    border-radius:
        999px;

    font-size:
        13px;

    font-weight:
        600;

    white-space:
        nowrap;

    overflow:
        hidden;

    transition:
        transform 500ms var(--ease),
        background-color 400ms ease,
        border-color 400ms ease,
        color 400ms ease;
}


.button:hover {
    transform:
        translateY(-4px);
}


.button-primary {
    background:
        var(--text);

    color:
        var(--bg);
}


.button-primary:hover {
    background:
        var(--text-secondary);

    color:
        var(--bg);
}


.button-secondary {
    border:
        1px solid
        var(--border-strong);

    color:
        var(--text);
}


.button-secondary:hover {
    background:
        var(--surface);

    border-color:
        var(--border-strong);
}


.button-icon {
    font-size:
        16px;

    transition:
        transform 500ms var(--ease);
}


.button:hover .button-icon {
    transform:
        translate(3px, -3px);
}


.button-large {
    min-height:
        60px;

    padding-inline:
        30px;

    font-size:
        14px;
}


/* =========================================
   SECTION LABEL
========================================= */

.section-label {
    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    color:
        var(--text-secondary);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.section-label span:first-child {
    color:
        var(--text-muted);
}


.section-caption {
    color:
        var(--text-muted);

    font-size:
        12px;
}


/* =========================================
   TEXT LINK
========================================= */

.text-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        28px;

    padding-bottom:
        7px;

    border-bottom:
        1px solid
        var(--border-strong);

    font-size:
        13px;

    font-weight:
        600;

    transition:
        gap var(--transition),
        border-color var(--transition);
}


.text-link:hover {
    gap:
        16px;

    border-color:
        var(--text);
}


/* =========================================
   CUSTOM CURSOR
========================================= */

.custom-cursor {
    position:
        fixed;

    left:
        0;

    top:
        0;

    width:
        12px;

    height:
        12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.8);

    border-radius:
        50%;

    pointer-events:
        none;

    z-index:
        10000;

    opacity:
        0;

    transform:
        translate(-50%, -50%)
        scale(1);

    mix-blend-mode:
        difference;

    transition:
        width 300ms var(--ease),
        height 300ms var(--ease),
        opacity 300ms ease,
        background-color 300ms ease;
}


.custom-cursor.active {
    opacity:
        1;
}


.custom-cursor.hover {
    width:
        52px;

    height:
        52px;

    background:
        rgba(255, 255, 255, 0.08);
}


.custom-cursor::after {
    content:
        "";

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        white;

    transform:
        translate(-50%, -50%);
}


/* =========================================
   REDUCED MOTION
========================================= */

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

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

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}