/* =========================================================
   PILOTYT
   GLOBAL DESIGN SYSTEM
   BLACK / RED
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

    --bg:
        #050505;

    --bg-soft:
        #080808;

    --surface:
        #0b0b0b;

    --surface-light:
        #111111;

    --surface-hover:
        #151515;

    --border:
        #242424;

    --border-light:
        #303030;


    --red:
        #ff1f3d;

    --red-bright:
        #ff334f;

    --red-dark:
        #8f0f22;

    --red-deep:
        #3d0710;


    --white:
        #ffffff;

    --text:
        #f5f5f5;

    --text-secondary:
        #b7b7b7;

    --text-muted:
        #777777;


    --success:
        #35d07f;

    --warning:
        #ffb020;

    --danger:
        #ff4d5f;


    --max-width:
        1440px;

    --content-width:
        1240px;


    --radius-sm:
        10px;

    --radius-md:
        16px;

    --radius-lg:
        24px;

    --radius-xl:
        32px;


    --shadow:
        0 20px 70px rgba(0, 0, 0, 0.45);

    --red-glow:
        0 0 80px rgba(255, 31, 61, 0.14);


    --transition:
        220ms cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


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

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

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


html {

    scroll-behavior:
        smooth;

    background:
        var(--bg);

}


body {

    min-height:
        100vh;

    background:
        var(--bg);

    color:
        var(--text);

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

    font-size:
        18px;

    line-height:
        1.6;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

}


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

::selection {

    background:
        var(--red);

    color:
        var(--white);

}


/* =========================================================
   LINKS
   ========================================================= */

a {

    color:
        inherit;

    text-decoration:
        none;

}


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

button,
input,
textarea,
select {

    font:
        inherit;

}


button {

    border:
        0;

    cursor:
        pointer;

}


/* =========================================================
   IMAGES
   ========================================================= */

img {

    display:
        block;

    max-width:
        100%;

}


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

.container {

    width:
        min(
            calc(100% - 48px),
            var(--content-width)
        );

    margin:
        0 auto;

}


.container-wide {

    width:
        min(
            calc(100% - 48px),
            var(--max-width)
        );

    margin:
        0 auto;

}


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

.display-xl {

    font-size:
        clamp(
            64px,
            8vw,
            120px
        );

    line-height:
        0.94;

    letter-spacing:
        -0.065em;

    font-weight:
        800;

}


.display-lg {

    font-size:
        clamp(
            52px,
            6vw,
            88px
        );

    line-height:
        0.98;

    letter-spacing:
        -0.055em;

    font-weight:
        800;

}


.display-md {

    font-size:
        clamp(
            42px,
            5vw,
            68px
        );

    line-height:
        1;

    letter-spacing:
        -0.045em;

    font-weight:
        800;

}


.heading-xl {

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height:
        1.05;

    letter-spacing:
        -0.035em;

    font-weight:
        750;

}


.heading-lg {

    font-size:
        clamp(
            28px,
            3vw,
            40px
        );

    line-height:
        1.1;

    letter-spacing:
        -0.025em;

    font-weight:
        750;

}


.heading-md {

    font-size:
        24px;

    line-height:
        1.2;

    font-weight:
        700;

}


.body-lg {

    font-size:
        20px;

    line-height:
        1.65;

    color:
        var(--text-secondary);

}


.body-md {

    font-size:
        18px;

    line-height:
        1.6;

    color:
        var(--text-secondary);

}


.text-muted {

    color:
        var(--text-muted);

}


.text-secondary {

    color:
        var(--text-secondary);

}


.text-red {

    color:
        var(--red);

}


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

.gradient-text {

    background:
        linear-gradient(
            110deg,
            #ffffff 10%,
            #ff6a7b 55%,
            #ff1f3d 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


/* =========================================================
   RED GLOW
   ========================================================= */

.red-glow {

    box-shadow:
        var(--red-glow);

}


/* =========================================================
   BUTTON SYSTEM
   ========================================================= */

.btn {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        54px;

    padding:
        0 24px;

    border-radius:
        14px;

    font-size:
        16px;

    font-weight:
        700;

    letter-spacing:
        -0.01em;

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


.btn:hover {

    transform:
        translateY(-2px);

}


.btn:active {

    transform:
        translateY(0);

}


/* Primary */

.btn-primary {

    background:
        var(--red);

    color:
        var(--white);

    box-shadow:
        0 10px 35px
        rgba(
            255,
            31,
            61,
            0.22
        );

}


.btn-primary:hover {

    background:
        var(--red-bright);

    box-shadow:
        0 14px 45px
        rgba(
            255,
            31,
            61,
            0.32
        );

}


/* Secondary */

.btn-secondary {

    background:
        var(--surface-light);

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

    color:
        var(--white);

}


.btn-secondary:hover {

    background:
        var(--surface-hover);

    border-color:
        var(--border-light);

}


/* Ghost */

.btn-ghost {

    background:
        transparent;

    color:
        var(--text-secondary);

}


.btn-ghost:hover {

    color:
        var(--white);

}


/* Large */

.btn-lg {

    min-height:
        62px;

    padding:
        0 30px;

    border-radius:
        16px;

    font-size:
        17px;

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {

    position:
        relative;

    z-index:
        100;

    width:
        100%;

}


.navbar {

    width:
        min(
            calc(100% - 48px),
            var(--content-width)
        );

    height:
        82px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.logo {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    font-size:
        22px;

    font-weight:
        800;

    letter-spacing:
        -0.045em;

}


.logo-mark {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        var(--red);

    color:
        var(--white);

    font-size:
        17px;

    font-weight:
        900;

    box-shadow:
        0 8px 30px
        rgba(
            255,
            31,
            61,
            0.22
        );

}


.nav-links {

    display:
        flex;

    align-items:
        center;

    gap:
        34px;

}


.nav-link {

    position:
        relative;

    color:
        var(--text-secondary);

    font-size:
        15px;

    font-weight:
        600;

    transition:
        color var(--transition);

}


.nav-link:hover {

    color:
        var(--white);

}


.nav-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


/* =========================================================
   BADGES
   ========================================================= */

.badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    min-height:
        34px;

    padding:
        0 13px;

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

    border-radius:
        999px;

    background:
        rgba(
            255,
            255,
            255,
            0.025
        );

    color:
        var(--text-secondary);

    font-size:
        13px;

    font-weight:
        700;

}


.badge-red {

    border-color:
        rgba(
            255,
            31,
            61,
            0.3
        );

    background:
        rgba(
            255,
            31,
            61,
            0.08
        );

    color:
        #ff6a7b;

}


.badge-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--red);

    box-shadow:
        0 0 12px
        var(--red);

}


/* =========================================================
   CARDS
   ========================================================= */

.card {

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

}


.card-hover {

    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


.card-hover:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--border-light);

    box-shadow:
        var(--shadow);

}


/* =========================================================
   INPUTS
   ========================================================= */

.input {

    width:
        100%;

    min-height:
        58px;

    padding:
        0 18px;

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

    border-radius:
        13px;

    outline:
        none;

    background:
        var(--surface-light);

    color:
        var(--white);

    font-size:
        17px;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);

}


.input::placeholder {

    color:
        #5f5f5f;

}


.input:hover {

    border-color:
        #333333;

}


.input:focus {

    border-color:
        var(--red);

    background:
        #0e0e0e;

    box-shadow:
        0 0 0 4px
        rgba(
            255,
            31,
            61,
            0.08
        );

}


textarea.input {

    min-height:
        130px;

    padding:
        16px 18px;

    resize:
        vertical;

}


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

.section {

    position:
        relative;

    padding:
        120px 0;

}


.section-sm {

    padding:
        80px 0;

}


.section-header {

    max-width:
        800px;

    margin-bottom:
        60px;

}


.section-label {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        20px;

    color:
        var(--red);

    font-size:
        14px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        0.14em;

}


/* =========================================================
   DIVIDERS
   ========================================================= */

.divider {

    width:
        100%;

    height:
        1px;

    background:
        var(--border);

}


/* =========================================================
   BACKGROUND EFFECTS
   ========================================================= */

.grid-background {

    background-image:
        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.025
            ) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.025
            ) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

}


.red-orb {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(
                255,
                31,
                61,
                0.14
            ) 0%,
            rgba(
                255,
                31,
                61,
                0
            ) 70%
        );

    pointer-events:
        none;

    filter:
        blur(10px);

}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        opacity 800ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ),
        transform 800ms
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pulse-red {

    0%,
    100% {

        opacity:
            0.65;

        transform:
            scale(1);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.08);

    }

}


@keyframes float {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-10px);

    }

}


@keyframes shimmer {

    0% {

        background-position:
            -200% 0;

    }

    100% {

        background-position:
            200% 0;

    }

}


.pulse-red {

    animation:
        pulse-red 3s
        ease-in-out
        infinite;

}


.float {

    animation:
        float 5s
        ease-in-out
        infinite;

}


/* =========================================================
   LOADING
   ========================================================= */

.skeleton {

    background:
        linear-gradient(
            90deg,
            #0d0d0d,
            #181818,
            #0d0d0d
        );

    background-size:
        200% 100%;

    animation:
        shimmer 1.5s
        infinite;

}


/* =========================================================
   FOCUS
   ========================================================= */

:focus-visible {

    outline:
        2px solid var(--red);

    outline-offset:
        3px;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (
    max-width: 900px
) {

    .nav-links {

        display:
            none;

    }


    .navbar {

        width:
            min(
                calc(100% - 32px),
                var(--content-width)
            );

    }


    .container,
    .container-wide {

        width:
            min(
                calc(100% - 32px),
                var(--content-width)
            );

    }


    .section {

        padding:
            90px 0;

    }


    .section-sm {

        padding:
            60px 0;

    }

}


@media (
    max-width: 600px
) {

    body {

        font-size:
            17px;

    }


    .navbar {

        height:
            72px;

    }


    .logo {

        font-size:
            20px;

    }


    .logo-mark {

        width:
            31px;

        height:
            31px;

    }


    .nav-actions .btn {

        min-height:
            44px;

        padding:
            0 14px;

        font-size:
            14px;

    }


    .section {

        padding:
            72px 0;

    }


    .section-header {

        margin-bottom:
            42px;

    }


    .btn-lg {

        width:
            100%;

    }

}