:root {
            --orange: #10c8d3;
            --coral: #2aa9b5;
            --magenta: #258fa6;
            --purple: #16798c;
            --purple-light: #35d995;

            --black: #050b0d;
            --dark: #0a1518;
            --white: #ffffff;
            --muted: #a5b7ba;

            --line: rgba(255,255,255,.12);

            --gradient: linear-gradient(
                90deg,
                #07545f 0%,
                #087986 18%,
                #179fb0 38%,
                #13c5d0 55%,
                #27d6ae 75%,
                #32dc8c 100%
            );
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            background: var(--black);
            color: var(--white);

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

            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        button,
        a {
            font: inherit;
        }

        button {
            cursor: pointer;
        }

        a {
            color: inherit;
            text-decoration: none;
        }


        /* =====================================================
           TOP GRADIENT BAR
        ===================================================== */

        .top-bar {
            position: relative;
            z-index: 1001;

            width: 100%;
            min-height: 54px;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 12px 20px;

            background: var(--gradient);

            color: white;

            text-align: center;

            font-size: 19px;
            font-weight: 800;
            letter-spacing: -.02em;
        }


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

        .navbar {
            position: absolute;
            z-index: 1000;

            top: 72px;
            left: 50%;

            transform: translateX(-50%);

            width: min(94%, 1380px);

            border: 1px solid rgba(255,255,255,.14);
            border-radius: 20px;

            background: rgba(10,10,10,.62);

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

            box-shadow:
                0 20px 70px rgba(0,0,0,.3);
        }

        .nav-inner {
            min-height: 72px;

            padding: 0 25px;

            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            flex-direction: column;

            font-size: 1.05rem;
            font-weight: 900;

            letter-spacing: -.06em;
            line-height: .9;
        }

        .logo span {
            margin-top: 6px;

            color: #aaa;

            font-size: .48rem;
            font-weight: 600;

            letter-spacing: .22em;
        }

        .nav-links {
            display: flex;
            gap: 34px;
        }

        .nav-links a {
            color: #b7b7bb;

            font-size: .72rem;
            font-weight: 650;

            transition: color .25s ease;
        }

        .nav-links a:hover {
            color: white;
        }

        .nav-actions {
            display: flex;
            gap: 9px;
        }

        .nav-btn {
            border: 1px solid rgba(255,255,255,.14);
            border-radius: 10px;

            padding: 10px 16px;

            background: rgba(255,255,255,.05);

            color: white;

            font-size: .69rem;
            font-weight: 750;

            transition: .25s ease;
        }

        .nav-btn:hover {
            transform: translateY(-2px);
            background: rgba(255,255,255,.11);
        }

        .nav-btn.gradient {
            border: 0;
            background: var(--gradient);
        }


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

        .hero {
            min-height: 100vh;

            position: relative;

            display: flex;
            align-items: center;

            padding:
                190px
                7vw
                100px;

            overflow: hidden;

            background:
                radial-gradient(
                    circle at 75% 45%,
                    rgba(17,104,121,.28),
                    transparent 30%
                ),
                radial-gradient(
                    circle at 10% 85%,
                    rgba(255,133,0,.08),
                    transparent 25%
                ),
                #080808;
        }

        .hero::before {
            content: "";

            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    110deg,
                    transparent 25%,
                    rgba(255,255,255,.025),
                    transparent 75%
                );

            pointer-events: none;
        }

        .hero-grid {
            position: absolute;
            inset: 0;

            opacity: .055;

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

            background-size: 90px 90px;

            mask-image:
                linear-gradient(
                    to bottom,
                    black,
                    transparent 85%
                );
        }

        .hero-content {
            position: relative;
            z-index: 3;

            max-width: 1000px;
        }

        .eyebrow {
            margin-bottom: 22px;

            color: #27d7a1;

            font-size: .67rem;
            font-weight: 800;

            letter-spacing: .2em;
            text-transform: uppercase;
        }

        .hero h1 {
            font-size:
                clamp(4.5rem, 10vw, 10.5rem);

            font-weight: 900;

            letter-spacing: -.095em;
            line-height: .77;
        }

        .gradient-text {
            background: var(--gradient);

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

            color: transparent;
        }

        .hero-description {
            max-width: 470px;

            margin-top: 40px;

            color: var(--muted);

            font-size: 1rem;
            line-height: 1.7;
        }

        .hero-actions {
            display: flex;
            gap: 11px;

            margin-top: 34px;
        }

        .btn {
            border-radius: 12px;

            padding: 15px 23px;

            font-size: .73rem;
            font-weight: 800;

            transition:
                transform .25s ease,
                box-shadow .25s ease;
        }

        .btn:hover {
            transform: translateY(-3px);
        }

        .btn-gradient {
            border: 0;

            background: var(--gradient);
            color: white;

            box-shadow:
                0 15px 45px rgba(17,104,121,.2);
        }

        .btn-outline {
            border: 1px solid var(--line);

            background: rgba(255,255,255,.045);

            color: white;
        }

        .hero-orb {
            position: absolute;

            width: 520px;
            height: 520px;

            right: 6%;
            top: 24%;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle at 30% 25%,
                    #28dca0,
                    #2aa9b5 25%,
                    #258fa6 55%,
                    #116879 75%,
                    transparent 76%
                );

            opacity: .72;

            filter: blur(4px);

            box-shadow:
                0 0 150px rgba(17,104,121,.42);
        }

        .hero-orb::after {
            content: "";

            position: absolute;
            inset: 55px;

            border: 1px solid rgba(255,255,255,.18);
            border-radius: 50%;
        }


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

        .section {
            max-width: 1500px;
            margin: auto;

            padding: 130px 7vw;
        }

        .section-heading {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;

            gap: 50px;

            margin-bottom: 65px;
        }

        .section-heading h2 {
            font-size:
                clamp(3rem, 6vw, 6.5rem);

            font-weight: 900;

            letter-spacing: -.085em;
            line-height: .82;
        }

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

            color: var(--muted);

            font-size: .9rem;
            line-height: 1.7;
        }


        /* =====================================================
           SPORTS
        ===================================================== */

        .sports-grid {
            display: grid;

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

            gap: 13px;
        }

        .sport {
            min-height: 275px;

            position: relative;

            border: 1px solid var(--line);
            border-radius: 21px;

            padding: 25px;

            background:
                linear-gradient(
                    145deg,
                    rgba(255,255,255,.065),
                    rgba(255,255,255,.018)
                );

            color: white;

            text-align: left;

            overflow: hidden;

            transition:
                transform .35s cubic-bezier(.2,1,.3,1),
                border-color .3s,
                background .3s;
        }

        .sport:hover {
            transform: translateY(-8px);

            border-color:
                rgba(155,92,255,.55);

            background:
                linear-gradient(
                    145deg,
                    rgba(255,255,255,.09),
                    rgba(17,104,121,.055)
                );
        }

        .sport::after {
            content: "";

            position: absolute;

            width: 180px;
            height: 180px;

            right: -80px;
            bottom: -80px;

            border-radius: 50%;

            background: var(--gradient);

            filter: blur(55px);

            opacity: 0;

            transition: .4s;
        }

        .sport:hover::after {
            opacity: .4;
        }

        .sport-number {
            color: #666;

            font-size: .64rem;
            font-weight: 700;
        }

        .sport-content {
            position: absolute;

            left: 25px;
            bottom: 25px;
        }

        .sport-content small {
            color: #85858a;

            font-size: .58rem;
            font-weight: 750;

            letter-spacing: .15em;
        }

        .sport-content h3 {
            margin-top: 8px;

            font-size: 2rem;
            font-weight: 850;

            letter-spacing: -.06em;
        }

        .sport-arrow {
            position: absolute;

            right: 25px;
            bottom: 25px;

            color: #888;

            font-size: 1.2rem;
        }


        /* =====================================================
           FEATURE PANEL
        ===================================================== */

        .feature {
            position: relative;

            overflow: hidden;

            padding: 80px;

            border-radius: 30px;

            background: var(--gradient);
        }

        .feature::before {
            content: "V";

            position: absolute;

            right: -20px;
            top: -110px;

            font-size: 31rem;
            font-weight: 900;

            line-height: 1;

            color: rgba(255,255,255,.075);
        }

        .feature-content {
            position: relative;
            z-index: 2;
        }

        .feature .eyebrow {
            color: rgba(255,255,255,.72);
        }

        .feature h2 {
            max-width: 850px;

            font-size:
                clamp(3rem, 6vw, 6.5rem);

            font-weight: 900;

            letter-spacing: -.085em;
            line-height: .82;
        }

        .feature p {
            max-width: 500px;

            margin-top: 28px;

            color: rgba(255,255,255,.75);

            line-height: 1.7;
        }

        .feature-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;

            margin-top: 30px;
        }

        .feature .btn-gradient {
            background: white;
            color: #0d6575;
        }


        /* =====================================================
           EVENTS
        ===================================================== */

        .events {
            border-top: 1px solid var(--line);
        }

        .event {
            width: 100%;

            display: grid;

            grid-template-columns:
                100px 1fr 50px;

            align-items: center;

            gap: 25px;

            padding: 28px 5px;

            border: 0;
            border-bottom: 1px solid var(--line);

            background: transparent;

            color: white;

            text-align: left;

            transition: .25s ease;
        }

        .event:hover {
            padding-left: 18px;

            background:
                rgba(17,104,121,.045);
        }

        .event-date strong {
            display: block;

            font-size: 2.3rem;
            letter-spacing: -.08em;
        }

        .event-date span {
            color: #777;

            font-size: .6rem;
            font-weight: 800;

            letter-spacing: .15em;
        }

        .event-info small {
            color: #35d995;

            font-size: .6rem;
            font-weight: 800;

            letter-spacing: .15em;
        }

        .event-info h3 {
            margin-top: 7px;

            font-size: 1.5rem;
            letter-spacing: -.045em;
        }

        .event-info p {
            margin-top: 7px;

            color: #777;

            font-size: .72rem;
        }

        .event-arrow {
            color: #888;
        }


        /* =====================================================
           STATS
        ===================================================== */

        .stats {
            max-width: 1500px;
            margin: auto;

            padding: 80px 7vw;

            display: grid;

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

            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .stat {
            padding: 20px 30px;

            border-left: 1px solid var(--line);
        }

        .stat:first-child {
            border-left: 0;
        }

        .stat strong {
            display: block;

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

            font-weight: 900;

            letter-spacing: -.09em;
            line-height: .9;

            background: var(--gradient);

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

            color: transparent;
        }

        .stat span {
            display: block;

            margin-top: 14px;

            color: #777;

            font-size: .6rem;
            font-weight: 800;

            letter-spacing: .16em;
        }


        /* =====================================================
           ABOUT
        ===================================================== */

        .about-block {
            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 80px;

            align-items: center;
        }

        .about-block h2 {
            font-size:
                clamp(3rem,6vw,6.5rem);

            font-weight: 900;

            letter-spacing: -.085em;
            line-height: .82;
        }

        .about-block p {
            max-width: 450px;

            color: var(--muted);

            font-size: 1rem;
            line-height: 1.8;
        }


        /* =====================================================
           CTA
        ===================================================== */

        .cta {
            min-height: 75vh;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 120px 7vw;

            text-align: center;

            background:
                radial-gradient(
                    circle at 25% 50%,
                    rgba(255,133,0,.14),
                    transparent 25%
                ),
                radial-gradient(
                    circle at 75% 50%,
                    rgba(17,104,121,.28),
                    transparent 35%
                ),
                #071316;
        }

        .cta h2 {
            font-size:
                clamp(4rem,10vw,10rem);

            font-weight: 900;

            letter-spacing: -.095em;
            line-height: .77;
        }

        .cta p {
            max-width: 440px;

            margin: 35px auto;

            color: var(--muted);

            line-height: 1.7;
        }


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

        footer {
            padding: 70px 7vw 30px;

            border-top: 1px solid var(--line);
        }

        .footer-top {
            display: flex;
            justify-content: space-between;

            gap: 60px;
        }

        .footer-note {
            margin-top: 18px;

            color: #777;

            font-size: .75rem;
        }

        .footer-links {
            display: flex;
            gap: 80px;
        }

        .footer-column {
            display: flex;
            flex-direction: column;

            gap: 12px;
        }

        .footer-column strong {
            margin-bottom: 4px;

            color: #666;

            font-size: .6rem;
            letter-spacing: .15em;
        }

        .footer-column button {
            border: 0;

            background: transparent;

            color: #999;

            font-size: .72rem;

            text-align: left;
        }

        .footer-column button:hover {
            color: #35d995;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;

            margin-top: 75px;
            padding-top: 20px;

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

            color: #555;

            font-size: .6rem;
            letter-spacing: .08em;
        }


        /* =====================================================
           TOAST
        ===================================================== */

        .toast {
            position: fixed;

            left: 50%;
            bottom: 30px;

            z-index: 3000;

            padding: 15px 21px;

            border: 1px solid rgba(255,255,255,.14);
            border-radius: 13px;

            background:
                rgba(25,12,35,.88);

            backdrop-filter: blur(20px);

            color: white;

            font-size: .74rem;
            font-weight: 700;

            opacity: 0;

            pointer-events: none;

            transform:
                translate(-50%,20px);

            transition: .3s ease;
        }

        .toast.show {
            opacity: 1;

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


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

        @media (max-width: 950px) {

            .top-bar {
                font-size: 15px;
            }

            .navbar {
                top: 65px;
            }

            .nav-links {
                display: none;
            }

            .hero {
                padding:
                    180px
                    24px
                    80px;
            }

            .hero-orb {
                width: 330px;
                height: 330px;

                right: -80px;
                top: 38%;

                opacity: .5;
            }

            .section {
                padding: 90px 24px;
            }

            .section-heading {
                display: block;
            }

            .section-description {
                margin-top: 25px;
            }

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

            .feature {
                padding: 55px 30px;
            }

            .about-block {
                grid-template-columns: 1fr;
                gap: 35px;
            }

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

                padding: 60px 24px;
            }

            .stat:nth-child(3) {
                border-left: 0;
                border-top: 1px solid var(--line);
            }

            .stat:nth-child(4) {
                border-top: 1px solid var(--line);
            }

            .footer-top {
                flex-direction: column;
            }
        }


        @media (max-width: 560px) {

            .top-bar {
                min-height: 48px;
                padding: 10px 14px;

                font-size: 12px;
            }

            .navbar {
                top: 58px;
            }

            .nav-inner {
                min-height: 62px;
                padding: 0 15px;
            }

            .nav-btn:first-child {
                display: none;
            }

            .hero {
                padding-top: 155px;
            }

            .hero h1 {
                font-size: 4.35rem;
            }

            .hero-actions {
                flex-direction: column;
            }

            .hero-orb {
                width: 250px;
                height: 250px;

                right: -100px;
            }

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

            .sport {
                min-height: 225px;
            }

            .feature {
                padding: 42px 24px;
                border-radius: 22px;
            }

            .feature-actions {
                flex-direction: column;
            }

            .event {
                grid-template-columns:
                    65px 1fr 25px;

                gap: 15px;
            }

            .event-info h3 {
                font-size: 1.1rem;
            }

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

            .stat {
                padding: 20px 12px;
            }

            .footer-links {
                gap: 35px;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 10px;
            }
        }

/* =========================================================
   LOGIN PAGE
========================================================= */

.login-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(255, 133, 0, 0.14),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 50%,
            rgba(108, 16, 188, 0.22),
            transparent 32%
        ),
        var(--black);

    overflow: hidden;
}


/* =========================================================
   LOGIN SHELL
========================================================= */

.login-shell {
    min-height: 100vh;

    display: grid;
    grid-template-columns: 1.1fr .9fr;
}


/* =========================================================
   LEFT VISUAL PANEL
========================================================= */

.login-visual {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    padding: 70px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 35%,
            rgba(108, 16, 188, .45),
            transparent 35%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(255, 133, 0, .22),
            transparent 32%
        ),
        #071316;
}


/* Gradient glow */

.login-visual::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -250px;
    bottom: -230px;

    border-radius: 50%;

    background: var(--gradient);

    filter: blur(100px);

    opacity: .35;
}


/* Large background V */

.login-visual::after {
    content: "V";

    position: absolute;

    right: -70px;
    bottom: -130px;

    font-size: 30rem;
    font-weight: 900;

    line-height: 1;

    color: rgba(255,255,255,.035);

    pointer-events: none;
}


/* Overlay */

.login-visual-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.025),
            transparent 50%
        );

    pointer-events: none;
}


/* Content */

.login-visual-content {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


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

.brand {
    width: fit-content;

    display: flex;
    flex-direction: column;

    font-size: 1.15rem;
    font-weight: 900;

    letter-spacing: -.06em;
    line-height: .9;
}

.brand span {
    margin-top: 7px;

    color: rgba(255,255,255,.5);

    font-size: .48rem;
    font-weight: 600;

    letter-spacing: .22em;
}


/* =========================================================
   VISUAL COPY
========================================================= */

.login-visual-copy {
    margin-top: auto;
    margin-bottom: 5vh;
}

.login-visual-copy .eyebrow {
    color: #25d8b0;
}

.login-visual-copy h1 {
    font-size: clamp(4rem, 7vw, 8rem);

    font-weight: 900;

    letter-spacing: -.09em;
    line-height: .78;
}

.login-visual-copy h1::first-line {
    color: white;
}

.login-visual-copy > p:last-child {
    max-width: 420px;

    margin-top: 30px;

    color: rgba(255,255,255,.55);

    font-size: .9rem;
    line-height: 1.7;
}


/* =========================================================
   LOGIN PANEL
========================================================= */

.login-panel {
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px;

    background:
        rgba(255,255,255,.015);
}


/* =========================================================
   LOGIN CARD
========================================================= */

.login-card {
    width: min(100%, 450px);

    padding: 48px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );

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

    box-shadow:
        0 30px 100px rgba(0,0,0,.4);
}


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

.login-header {
    margin-bottom: 38px;
}

.login-header .eyebrow {
    color: #35d995;

    margin-bottom: 17px;
}

.login-header h2 {
    font-size: clamp(2.6rem, 4vw, 4rem);

    font-weight: 900;

    letter-spacing: -.075em;
    line-height: .9;
}

.login-header > p:last-child {
    margin-top: 16px;

    color: var(--muted);

    font-size: .82rem;
    line-height: 1.6;
}


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

#loginForm {
    width: 100%;
}

.field {
    margin-bottom: 23px;
}

.field label {
    display: block;

    margin-bottom: 9px;

    color: #d0d0d4;

    font-size: .68rem;
    font-weight: 750;

    letter-spacing: .03em;
}

.field__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 9px;
}

.field__label-row label {
    margin-bottom: 0;
}


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

.field input {
    width: 100%;

    height: 53px;

    padding: 0 16px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 12px;

    outline: none;

    background:
        rgba(255,255,255,.045);

    color: white;

    font-size: .82rem;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}

.field input::placeholder {
    color: #66666c;
}

.field input:hover {
    background:
        rgba(255,255,255,.06);
}

.field input:focus {
    border-color: #35d995;

    background:
        rgba(53,217,149,.055);

    box-shadow:
        0 0 0 3px rgba(53,217,149,.1);
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.password-toggle {
    border: 0;

    padding: 0;

    background: transparent;

    color: #35d995;

    font-size: .65rem;
    font-weight: 750;

    cursor: pointer;
}

.password-toggle:hover {
    color: #5ee8ae;
}


/* =========================================================
   FIELD ERRORS
========================================================= */

.field__error {
    display: block;

    min-height: 0;

    margin-top: 6px;

    color: #ff7070;

    font-size: .65rem;
}


/* =========================================================
   LOGIN MESSAGE
========================================================= */

.login-note {
    margin: -4px 0 18px;

    padding: 11px 13px;

    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;

    background:
        rgba(255,255,255,.035);

    color: #bbb;

    font-size: .68rem;
    line-height: 1.5;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.login-submit {
    width: 100%;

    min-height: 54px;

    border: 0;
    border-radius: 12px;

    background: var(--gradient);

    color: white;

    font-size: .75rem;
    font-weight: 850;

    box-shadow:
        0 14px 35px rgba(17,104,121,.2);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        opacity .25s ease;
}

.login-submit:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 45px rgba(17,104,121,.3);
}

.login-submit:active {
    transform: translateY(0);
}

.login-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
}


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

.login-footer {
    margin-top: 27px;

    padding-top: 22px;

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

    text-align: center;
}

.login-footer a {
    color: #777;

    font-size: .68rem;
    font-weight: 650;

    transition: color .25s ease;
}

.login-footer a:hover {
    color: #35d995;
}


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

@media (max-width: 900px) {

    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-visual {
        display: none;
    }

    .login-panel {
        min-height: 100vh;

        padding: 30px 20px;

        background:
            radial-gradient(
                circle at 50% 10%,
                rgba(17,104,121,.2),
                transparent 35%
            ),
            var(--black);
    }

    .login-card {
        padding: 38px 28px;
    }
}


@media (max-width: 480px) {

    .login-panel {
        padding: 20px 15px;
    }

    .login-card {
        padding: 32px 22px;

        border-radius: 21px;
    }

    .login-header h2 {
        font-size: 2.7rem;
    }

    .login-header {
        margin-bottom: 30px;
    }
}

.logo {
    display: flex;
    align-items: center;
    gap: 18px;

    color: white;
    text-decoration: none;

    width: fit-content;
}

.logo img {
    width: 72px;
    height: 72px;

    object-fit: contain;
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    line-height: 1;
}

.logo-text strong {
    display: block;

    color: #ffffff;

    font-size: 1.65rem;
    font-weight: 900;

    letter-spacing: -0.055em;
    line-height: 1;
}

.logo-text span {
    display: block;

    margin-top: 9px;

    color: #a5b7ba;

    font-size: 0.72rem;
    font-weight: 650;

    letter-spacing: 0.28em;
    line-height: 1;
}


/* FINAL NAV LOGO OVERRIDE */

.navbar .logo {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
}

.navbar .logo img {
    width: 52px !important;
    height: 52px !important;

    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.navbar .logo .logo-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;

    line-height: 1 !important;
}

.navbar .logo .logo-text strong {
    display: block !important;
    margin: 0 !important;

    color: #fff !important;

    font-size: 1.15rem !important;
    font-weight: 900 !important;

    letter-spacing: -0.055em !important;
    line-height: 1 !important;
}

.navbar .logo .logo-text span {
    display: block !important;
    margin-top: 6px !important;

    color: #a5b7ba !important;

    font-size: 0.55rem !important;
    font-weight: 650 !important;

    letter-spacing: 0.24em !important;
    line-height: 1 !important;
}