/* ============================================================
   SERVEBEES
   PUBLIC / HOME BASE DESIGN SYSTEM

   Theme:
   Blue Bee + Cyan Energy + White Glass

   Used by:
   - Public website
   - Home
   - Login
   - Register
   - About
   - Safety
   - Help
   ============================================================ */


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

:root {

    /* ========================================================
       Core Brand — Blue Bee
       ======================================================== */

    --sb-blue-50: #f3f8ff;
    --sb-blue-100: #e5f0ff;
    --sb-blue-200: #c7dcff;
    --sb-blue-300: #9fc2ff;
    --sb-blue-400: #6b9fff;
    --sb-blue-500: #3979f6;
    --sb-blue-600: #1f5fe0;
    --sb-blue-700: #184cc0;
    --sb-blue-800: #183f99;
    --sb-blue-900: #183776;
    --sb-blue-950: #0d1f45;


    /* ========================================================
       Futuristic Energy Accent
       ======================================================== */

    --sb-cyan: #00dff7;
    --sb-cyan-bright: #62f4ff;
    --sb-cyan-soft: #dffcff;


    /* ========================================================
       Public Theme
       ======================================================== */

    --public-primary: var(--sb-blue-600);
    --public-primary-hover: var(--sb-blue-700);
    --public-primary-active: var(--sb-blue-800);

    --public-accent: var(--sb-cyan);
    --public-accent-bright: var(--sb-cyan-bright);
    --public-accent-soft: var(--sb-cyan-soft);

    --public-background: #f7faff;
    --public-background-alt: #edf6ff;

    --public-surface:
        rgba(255, 255, 255, 0.76);

    --public-surface-strong:
        rgba(255, 255, 255, 0.92);

    --public-surface-solid:
        #ffffff;

    --public-border:
        rgba(31, 95, 224, 0.14);

    --public-border-strong:
        rgba(0, 223, 247, 0.28);

    --public-text:
        #10213d;

    --public-text-muted:
        #63728a;

    --public-text-soft:
        #8996a8;


    /* ========================================================
       Gradients
       ======================================================== */

    --public-gradient:
        linear-gradient(
            135deg,
            var(--sb-blue-600) 0%,
            #168bea 44%,
            var(--sb-cyan) 100%
        );

    --public-gradient-horizontal:
        linear-gradient(
            90deg,
            var(--sb-blue-600),
            var(--sb-cyan)
        );

    --public-gradient-soft:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(229, 240, 255, 0.78)
        );

    --public-gradient-deep:
        linear-gradient(
            145deg,
            var(--sb-blue-950),
            var(--sb-blue-900) 52%,
            var(--sb-blue-800)
        );


    /* ========================================================
       Glow / Shadow
       ======================================================== */

    --public-glow:
        0 0 32px rgba(0, 223, 247, 0.16);

    --public-glow-blue:
        0 0 34px rgba(57, 121, 246, 0.18);

    --public-shadow:
        0 24px 70px rgba(24, 76, 192, 0.13);

    --public-shadow-soft:
        0 12px 42px rgba(24, 76, 192, 0.09);

    --public-shadow-strong:
        0 30px 85px rgba(24, 76, 192, 0.18);

    --public-focus:
        0 0 0 4px rgba(0, 223, 247, 0.14);


    /* ========================================================
       Semantic Status
       ======================================================== */

    --success:
        #10b981;

    --success-dark:
        #087249;

    --error:
        #dc2626;

    --error-dark:
        #b42318;

    --warning:
        #f59e0b;


    /* ========================================================
       Layout
       ======================================================== */

    --container-width:
        1320px;

    --header-height:
        76px;


    /* ========================================================
       Radius
       ======================================================== */

    --radius-sm:
        0.65rem;

    --radius-md:
        0.9rem;

    --radius-lg:
        1.35rem;

    --radius-xl:
        1.75rem;

    --radius-pill:
        999px;


    /* ========================================================
       Motion
       ======================================================== */

    --transition-fast:
        160ms cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

    --transition-normal:
        280ms cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );

    --transition-slow:
        480ms cubic-bezier(
            0.2,
            0.8,
            0.2,
            1
        );
}


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

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


html {
    scroll-behavior:
        smooth;
}


body {
    margin:
        0;

    min-height:
        100vh;

    color:
        var(--public-text);

    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(57, 121, 246, 0.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 8%,
            rgba(0, 223, 247, 0.11),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--public-background) 42%,
            var(--public-background-alt) 100%
        );

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

    line-height:
        1.5;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


img,
svg,
video {
    display:
        block;

    max-width:
        100%;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


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


button {
    cursor:
        pointer;
}


h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top:
        0;
}


/* ============================================================
   GLOBAL AMBIENT GRID
   ============================================================ */

body::before {
    content:
        "";

    position:
        fixed;

    inset:
        0;

    z-index:
        -3;

    pointer-events:
        none;

    opacity:
        0.72;

    background-image:
        linear-gradient(
            rgba(31, 95, 224, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(31, 95, 224, 0.035) 1px,
            transparent 1px
        );

    background-size:
        64px
        64px;
}


/* ============================================================
   GLOBAL AMBIENT LIGHT
   ============================================================ */

body::after {
    content:
        "";

    position:
        fixed;

    width:
        42rem;

    height:
        42rem;

    top:
        6rem;

    right:
        -16rem;

    z-index:
        -2;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,
            rgba(0, 223, 247, 0.12),
            rgba(57, 121, 246, 0.05) 42%,
            transparent 68%
        );

    filter:
        blur(20px);
}


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

::selection {
    color:
        var(--sb-blue-950);

    background:
        rgba(0, 223, 247, 0.34);
}


a,
button {
    -webkit-tap-highlight-color:
        transparent;
}


a:focus-visible,
button:focus-visible {
    outline:
        3px solid
        rgba(0, 223, 247, 0.34);

    outline-offset:
        4px;
}


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

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

    margin-inline:
        auto;
}


/* ============================================================
   SKIP LINK
   ============================================================ */

.skip-link {
    position:
        fixed;

    top:
        -100px;

    left:
        1rem;

    z-index:
        9999;

    padding:
        0.72rem
        1rem;

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

    color:
        #ffffff;

    background:
        var(--public-gradient);

    box-shadow:
        0 10px 30px
        rgba(31, 95, 224, 0.25),
        0 0 24px
        rgba(0, 223, 247, 0.12);

    font-size:
        0.84rem;

    font-weight:
        700;

    transition:
        top var(--transition-fast);
}


.skip-link:focus {
    top:
        1rem;
}


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

.site-header {
    position:
        sticky;

    top:
        10px;

    z-index:
        1000;

    width:
        min(
            calc(100% - 24px),
            1420px
        );

    margin-inline:
        auto;

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

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

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

    box-shadow:
        0 12px 44px
        rgba(24, 76, 192, 0.09),
        0 0 30px
        rgba(0, 223, 247, 0.04),
        inset 0 1px 0
        rgba(255, 255, 255, 0.94);

    backdrop-filter:
        blur(24px)
        saturate(155%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(155%);
}


/* ============================================================
   NAVBAR
   ============================================================ */

.navbar-container {
    min-height:
        var(--header-height);

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1.75rem;
}


/* ============================================================
   BRAND
   ============================================================ */

.brand {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.72rem;

    flex-shrink:
        0;
}


.brand-mark {
    position:
        relative;

    width:
        2.65rem;

    height:
        2.65rem;

    display:
        grid;

    place-items:
        center;

    flex:
        0 0 auto;

    border-radius:
        0.9rem;

    color:
        #ffffff;

    font-size:
        1.05rem;

    font-weight:
        850;

    line-height:
        1;

    background:
        var(--public-gradient);

    box-shadow:
        0 0 0 1px
        rgba(255, 255, 255, 0.88),
        0 8px 26px
        rgba(31, 95, 224, 0.28),
        0 0 24px
        rgba(0, 223, 247, 0.12);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}


.brand-mark::after {
    content:
        "";

    position:
        absolute;

    inset:
        3px;

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

    border-radius:
        0.7rem;

    pointer-events:
        none;
}


.brand:hover
.brand-mark {
    transform:
        translateY(-2px)
        rotate(-3deg)
        scale(1.03);

    box-shadow:
        0 0 0 1px
        rgba(255, 255, 255, 1),
        0 13px 34px
        rgba(31, 95, 224, 0.31),
        0 0 32px
        rgba(0, 223, 247, 0.22);
}


.brand-name {
    color:
        var(--public-text);

    font-size:
        1.2rem;

    font-weight:
        800;

    letter-spacing:
        -0.035em;
}


/* ============================================================
   DESKTOP NAVIGATION
   ============================================================ */

.desktop-nav {
    display:
        flex;

    align-items:
        center;

    gap:
        0.25rem;

    margin-left:
        auto;
}


.desktop-nav a {
    position:
        relative;

    padding:
        0.65rem
        0.85rem;

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

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

    font-size:
        0.9rem;

    font-weight:
        600;

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


.desktop-nav a:hover {
    color:
        var(--public-primary);

    background:
        rgba(57, 121, 246, 0.07);

    transform:
        translateY(-1px);

    box-shadow:
        inset 0 0 0 1px
        rgba(0, 223, 247, 0.05);
}


/* ============================================================
   NAVBAR ACTIONS
   ============================================================ */

.navbar-actions {
    display:
        flex;

    align-items:
        center;

    gap:
        0.6rem;
}


/* ============================================================
   GLOBAL BUTTON
   ============================================================ */

.btn {
    position:
        relative;

    min-height:
        2.75rem;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.5rem;

    padding:
        0
        1.2rem;

    overflow:
        hidden;

    border:
        1px solid
        transparent;

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

    font-size:
        0.9rem;

    font-weight:
        680;

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


.btn:active {
    transform:
        scale(0.98);
}


/* ============================================================
   GHOST BUTTON
   ============================================================ */

.btn-ghost {
    color:
        var(--public-text);

    border-color:
        rgba(31, 95, 224, 0.11);

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

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.7);
}


.btn-ghost:hover {
    color:
        var(--public-primary);

    border-color:
        rgba(0, 223, 247, 0.22);

    background:
        rgba(243, 248, 255, 0.84);

    box-shadow:
        0 7px 22px
        rgba(31, 95, 224, 0.08);
}


/* ============================================================
   PRIMARY BUTTON
   ============================================================ */

.btn-primary {
    color:
        #ffffff;

    background:
        var(--public-gradient);

    box-shadow:
        0 10px 28px
        rgba(31, 95, 224, 0.25),
        0 0 20px
        rgba(0, 223, 247, 0.08);
}


.btn-primary::before {
    content:
        "";

    position:
        absolute;

    top:
        -30%;

    left:
        -120px;

    width:
        90px;

    height:
        160%;

    transform:
        rotate(20deg);

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.46),
            transparent
        );

    transition:
        left 600ms ease;
}


.btn-primary:hover::before {
    left:
        130%;
}


.btn-primary:hover {
    transform:
        translateY(-2px);

    filter:
        saturate(1.08);

    box-shadow:
        0 15px 38px
        rgba(31, 95, 224, 0.3),
        0 0 28px
        rgba(0, 223, 247, 0.14);
}


/* ============================================================
   MOBILE MENU BUTTON
   ============================================================ */

.mobile-menu-button {
    width:
        2.75rem;

    height:
        2.75rem;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        4px;

    padding:
        0;

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

    border-radius:
        50%;

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

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.84);

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


.mobile-menu-button:hover {
    border-color:
        rgba(0, 223, 247, 0.25);

    background:
        rgba(243, 248, 255, 0.88);

    box-shadow:
        0 0 20px
        rgba(0, 223, 247, 0.08);
}


.mobile-menu-button span {
    width:
        18px;

    height:
        2px;

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

    background:
        var(--public-text);

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);
}


/* ============================================================
   MOBILE MENU OPEN STATE
   ============================================================ */

.mobile-menu-button[aria-expanded="true"]
span:nth-child(1) {
    transform:
        translateY(6px)
        rotate(45deg);
}


.mobile-menu-button[aria-expanded="true"]
span:nth-child(2) {
    opacity:
        0;
}


.mobile-menu-button[aria-expanded="true"]
span:nth-child(3) {
    transform:
        translateY(-6px)
        rotate(-45deg);
}


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

.mobile-nav {
    margin:
        0
        12px;

    border:
        1px solid
        rgba(31, 95, 224, 0.12);

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

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

    box-shadow:
        0 20px 52px
        rgba(24, 76, 192, 0.11),
        0 0 28px
        rgba(0, 223, 247, 0.05);

    backdrop-filter:
        blur(22px)
        saturate(150%);

    -webkit-backdrop-filter:
        blur(22px)
        saturate(150%);
}


.mobile-nav[hidden] {
    display:
        none;
}


@media (min-width: 1051px) {
    .mobile-nav {
        display:
            none !important;
    }
}


.mobile-nav-inner {
    display:
        flex;

    flex-direction:
        column;

    padding:
        1rem
        0.25rem
        1.25rem;
}


.mobile-nav a {
    padding:
        0.8rem
        0.8rem;

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

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

    font-size:
        0.9rem;

    font-weight:
        600;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}


.mobile-nav a:hover {
    color:
        var(--public-primary);

    background:
        rgba(57, 121, 246, 0.065);

    transform:
        translateX(3px);
}


.mobile-nav-divider {
    height:
        1px;

    margin:
        0.75rem
        0;

    background:
        var(--public-border);
}


.mobile-primary-action {
    color:
        var(--public-primary) !important;

    font-weight:
        720 !important;
}


/* ============================================================
   MAIN
   ============================================================ */

.site-main {
    position:
        relative;

    min-height:
        60vh;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
    position:
        relative;

    min-height:
        650px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    padding:
        130px
        0
        110px;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(0, 223, 247, 0.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 78% 35%,
            rgba(57, 121, 246, 0.1),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.8),
            rgba(247, 250, 255, 0.92)
        );
}


.hero::before {
    content:
        "";

    position:
        absolute;

    width:
        46rem;

    height:
        46rem;

    right:
        -15rem;

    top:
        -12rem;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,
            rgba(0, 223, 247, 0.18),
            rgba(57, 121, 246, 0.07) 40%,
            transparent 70%
        );

    filter:
        blur(6px);
}


.hero::after {
    content:
        "";

    position:
        absolute;

    width:
        28rem;

    height:
        28rem;

    right:
        7%;

    top:
        21%;

    border:
        1px solid
        rgba(0, 223, 247, 0.13);

    border-radius:
        50%;

    pointer-events:
        none;

    box-shadow:
        inset 0 0 80px
        rgba(57, 121, 246, 0.045),
        0 0 50px
        rgba(0, 223, 247, 0.035);
}


.hero
.container {
    position:
        relative;

    z-index:
        2;
}


.hero h1 {
    max-width:
        880px;

    margin-bottom:
        1.5rem;

    color:
        var(--public-text);

    font-size:
        clamp(
            3rem,
            7vw,
            6.4rem
        );

    font-weight:
        820;

    line-height:
        0.95;

    letter-spacing:
        -0.065em;
}


.hero p {
    max-width:
        660px;

    margin-bottom:
        0;

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

    font-size:
        clamp(
            1.08rem,
            2vw,
            1.35rem
        );

    line-height:
        1.7;
}


/* ============================================================
   SECTIONS
   ============================================================ */

.section {
    position:
        relative;

    padding:
        100px
        0;
}


.section-soft {
    border-top:
        1px solid
        rgba(31, 95, 224, 0.06);

    border-bottom:
        1px solid
        rgba(31, 95, 224, 0.06);

    background:
        linear-gradient(
            180deg,
            rgba(229, 240, 255, 0.52),
            rgba(255, 255, 255, 0.88)
        );
}


.section-title {
    margin-bottom:
        1rem;

    color:
        var(--public-text);

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.8rem
        );

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        -0.05em;
}


.section-description {
    max-width:
        720px;

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

    font-size:
        1.08rem;

    line-height:
        1.75;
}


/* ============================================================
   GENERIC CARD
   ============================================================ */

.card {
    position:
        relative;

    padding:
        1.6rem;

    overflow:
        hidden;

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

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

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

    box-shadow:
        0 12px 42px
        rgba(24, 76, 192, 0.08);

    backdrop-filter:
        blur(18px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(140%);

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


.card::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    border:
        1px solid
        rgba(0, 223, 247, 0.14);

    border-radius:
        inherit;

    pointer-events:
        none;
}


.card::after {
    content:
        "";

    position:
        absolute;

    width:
        11rem;

    height:
        11rem;

    top:
        -5rem;

    right:
        -5rem;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,
            rgba(0, 223, 247, 0.12),
            transparent 70%
        );
}


.card:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(0, 223, 247, 0.24);

    box-shadow:
        0 22px 62px
        rgba(24, 76, 192, 0.14),
        0 0 30px
        rgba(0, 223, 247, 0.08);
}


/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
    position:
        relative;

    overflow:
        hidden;

    margin-top:
        120px;

    padding:
        84px
        0
        32px;

    color:
        rgba(255, 255, 255, 0.9);

    background:
        var(--public-gradient-deep);
}


.site-footer::before {
    content:
        "";

    position:
        absolute;

    width:
        38rem;

    height:
        38rem;

    top:
        -21rem;

    right:
        -9rem;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,
            rgba(0, 223, 247, 0.2),
            rgba(57, 121, 246, 0.06) 42%,
            transparent 70%
        );
}


.site-footer::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        0.48;

    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:
        72px
        72px;
}


.site-footer
.container {
    position:
        relative;

    z-index:
        2;
}


/* ============================================================
   FOOTER GRID
   ============================================================ */

.footer-grid {
    display:
        grid;

    grid-template-columns:
        1.5fr
        repeat(5, 1fr);

    gap:
        44px;
}


/* ============================================================
   FOOTER BRAND
   ============================================================ */

.footer-logo {
    display:
        inline-block;

    margin-bottom:
        0.75rem;

    color:
        #ffffff;

    font-size:
        1.42rem;

    font-weight:
        800;

    letter-spacing:
        -0.035em;

    text-shadow:
        0 0 24px
        rgba(0, 223, 247, 0.12);
}


.footer-brand p {
    max-width:
        230px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        0.9rem;

    line-height:
        1.7;
}


/* ============================================================
   FOOTER COLUMNS
   ============================================================ */

.footer-column {
    display:
        flex;

    flex-direction:
        column;

    gap:
        0.65rem;
}


.footer-column h2 {
    margin:
        0
        0
        0.5rem;

    color:
        #ffffff;

    font-size:
        0.84rem;

    font-weight:
        720;
}


.footer-column a {
    color:
        rgba(255, 255, 255, 0.58);

    font-size:
        0.87rem;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast),
        text-shadow var(--transition-fast);
}


.footer-column a:hover {
    color:
        var(--sb-cyan-bright);

    transform:
        translateX(3px);

    text-shadow:
        0 0 16px
        rgba(0, 223, 247, 0.22);
}


/* ============================================================
   FOOTER BOTTOM
   ============================================================ */

.footer-bottom {
    margin-top:
        70px;

    padding-top:
        26px;

    display:
        flex;

    align-items:
        center;

    gap:
        24px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.1);

    color:
        rgba(255, 255, 255, 0.48);

    font-size:
        0.82rem;
}


.footer-copyright {
    white-space:
        nowrap;
}


.footer-legal {
    display:
        flex;

    gap:
        1.25rem;
}


.footer-legal a {
    transition:
        color var(--transition-fast),
        text-shadow var(--transition-fast);
}


.footer-legal a:hover {
    color:
        var(--sb-cyan-bright);

    text-shadow:
        0 0 14px
        rgba(0, 223, 247, 0.18);
}


/* ============================================================
   FOOTER SETTINGS
   ============================================================ */

.footer-settings {
    margin-left:
        auto;

    display:
        flex;

    gap:
        0.5rem;
}


.footer-setting {
    padding:
        0.45rem
        0.65rem;

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

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

    color:
        rgba(255, 255, 255, 0.64);

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

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


.footer-setting:hover {
    color:
        #ffffff;

    border-color:
        rgba(0, 223, 247, 0.26);

    background:
        rgba(0, 223, 247, 0.07);

    box-shadow:
        0 0 18px
        rgba(0, 223, 247, 0.08);
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1050px) {

    .desktop-nav {
        display:
            none;
    }


    .mobile-menu-button {
        display:
            flex;
    }


    .footer-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .hero::after {
        opacity:
            0.48;
    }

}


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

@media (max-width: 700px) {

    :root {
        --header-height:
            66px;
    }


    .container {
        width:
            min(
                calc(100% - 28px),
                var(--container-width)
            );
    }


    .site-header {
        top:
            6px;

        width:
            calc(100% - 12px);
    }


    .brand-mark {
        width:
            2.35rem;

        height:
            2.35rem;
    }


    .brand-name {
        font-size:
            1.08rem;
    }


    .navbar-actions
    .btn {
        display:
            none;
    }


    .hero {
        min-height:
            auto;

        padding:
            94px
            0
            78px;
    }


    .hero h1 {
        font-size:
            clamp(
                2.7rem,
                14vw,
                4.4rem
            );

        line-height:
            0.98;
    }


    .hero p {
        font-size:
            1rem;
    }


    .hero::after {
        width:
            18rem;

        height:
            18rem;

        right:
            -10rem;

        top:
            12%;
    }


    .section {
        padding:
            72px
            0;
    }


    .footer-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            38px
            24px;
    }


    .footer-brand {
        grid-column:
            1 / -1;
    }


    .footer-bottom {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            18px;
    }


    .footer-legal {
        flex-wrap:
            wrap;

        gap:
            12px
            18px;
    }


    .footer-settings {
        margin-left:
            0;
    }

}


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

@media (max-width: 450px) {

    .footer-grid {
        grid-template-columns:
            1fr;
    }


    .footer-brand {
        grid-column:
            auto;
    }


    .hero {
        padding-top:
            78px;
    }

}


/* ============================================================
   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;
    }

}