/* ============================================================================
   EVOLUTION CHAT NETWORK — CUSTOM WEBSITE THEME
   ----------------------------------------------------------------------------
   Built from the modern Sparkpea/SPCN website setup and recolored to preserve
   the identity of the original Evolution Chat website.

   Original Evolution palette carried forward:
   - Black/charcoal masthead: #2C2C2C -> #000000
   - Bright green navigation: #81C164 -> #267C3D
   - Dark green hover: #266C34
   - Mid green accent: #74A235
   - Deep green accent: #5B8129
   - Light page surface: #F5F5F5
   - Body text: #4B4B4B
   - Silver identity accent: #A8ADB3

   This file is loaded after Site.css and main.css.
   No Razor, HTML, JavaScript, or image assets are changed by this first pass.
   ============================================================================ */

/* ============================================================================
   1. EVOLUTION DESIGN TOKENS
   ============================================================================ */
:root {
    /* Original Evolution colors */
    --evo-black: #000000;
    --evo-charcoal: #2c2c2c;
    --evo-charcoal-soft: #3b3b3b;
    --evo-green-light: #81c164;
    --evo-green: #267c3d;
    --evo-green-dark: #266c34;
    --evo-green-mid: #74a235;
    --evo-green-deep: #5b8129;
    --evo-green-bright: #68bd4f;
    --evo-silver: #a8adb3;
    --evo-silver-light: #d8dadd;
    --evo-page: #f5f5f5;
    --evo-page-2: #ecefeb;
    --evo-white: #ffffff;
    --evo-text: #303532;
    --evo-muted: #667069;

    /* Network customization system */
    --network-page-bg-1: #f7f8f6;
    --network-page-bg-2: #edf1ed;
    --network-page-bg-3: #f5f5f5;

    --network-card-top: rgba(255,255,255,.98);
    --network-card-bottom: rgba(250,252,250,.94);
    --network-card-solid: #ffffff;
    --network-header-bg: #000000;
    --network-footer-bg: #267c3d;

    --network-text: var(--evo-text);
    --network-muted: var(--evo-muted);
    --network-line: rgba(38,124,61,.14);
    --network-line-strong: rgba(38,124,61,.24);
    --network-soft: #eef6ec;

    --network-radius: 18px;
    --network-radius-medium: 14px;
    --network-radius-small: 9px;
    --network-button-radius: 8px;

    --network-shadow-small: 0 8px 22px rgba(24,54,29,.08);
    --network-shadow: 0 18px 46px rgba(18,45,23,.14);
    --network-shadow-large: 0 28px 70px rgba(0,0,0,.20);

    --network-body-font: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --network-heading-font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

    --network-site-width: 1320px;
    --network-logo-width: 220px;
    --network-logo-max-height: 64px;
}

/* Map network values into the modern website token system. */
:root {
    --site-bg: var(--network-page-bg-2);
    --site-surface: var(--network-card-bottom);
    --site-surface-solid: var(--network-card-solid);
    --site-border: var(--network-line);
    --site-border-strong: var(--network-line-strong);
    --site-text: var(--network-text);
    --site-muted: var(--network-muted);
    --site-shadow: var(--network-shadow);
    --site-radius: var(--network-radius-medium);
    --site-radius-sm: var(--network-radius-small);

    --wx-bg-1: var(--network-page-bg-1);
    --wx-bg-2: var(--network-page-bg-2);
    --wx-card: var(--network-card-bottom);
    --wx-card-solid: var(--network-card-solid);
    --wx-text: var(--network-text);
    --wx-muted: var(--network-muted);
    --wx-soft: var(--network-soft);
    --wx-line: var(--network-line);
    --wx-line-strong: var(--network-line-strong);
    --wx-shadow-sm: var(--network-shadow-small);
    --wx-shadow: var(--network-shadow);
    --wx-shadow-lg: var(--network-shadow-large);
    --wx-radius: var(--network-radius);
    --wx-radius-md: var(--network-radius-medium);
    --wx-radius-sm: var(--network-radius-small);
}

/* Lock every visitor accent choice to the official Evolution palette. */
html[data-wx-accent] {
    --site-primary: #267c3d;
    --site-primary-2: #5b8129;
    --site-primary-rgb: 38,124,61;
    --site-primary-2-rgb: 91,129,41;

    --wx-accent: #267c3d;
    --wx-accent-2: #5b8129;
    --wx-accent-3: #81c164;
    --wx-accent-rgb: 38,124,61;
    --wx-accent-2-rgb: 91,129,41;
    --wx-accent-3-rgb: 129,193,100;
    --wx-accent-shadow: rgba(38,124,61,.26);
}

/* Evolution has a fixed network identity rather than visitor color variants. */
.site-accent-menu {
    display: none !important;
}

/* ============================================================================
   2. GLOBAL PAGE, TYPOGRAPHY, AND SURFACES
   ============================================================================ */
html,
body {
    color: var(--evo-text);
    background:
        radial-gradient(circle at 10% 0%, rgba(129,193,100,.15), transparent 30rem),
        radial-gradient(circle at 92% 6%, rgba(44,44,44,.09), transparent 30rem),
        linear-gradient(180deg, #f8faf7, #edf1ed 58%, #f5f5f5);
}

body {
    font-family: var(--network-body-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
#headerlogo,
.sidebar-card__title {
    font-family: var(--network-heading-font);
}

body::before {
    background-image:
        radial-gradient(circle, rgba(38,124,61,.11) 1px, transparent 1.4px),
        linear-gradient(135deg, rgba(168,173,179,.035) 25%, transparent 25%);
    background-size: 34px 34px, 68px 68px;
    opacity: .62;
}

.site-shell {
    width: min(var(--network-site-width), calc(100% - 2rem));
}

.sidebar-card,
.home-hero-card,
.home-info-card,
.page-heading-card,
.page-panel,
.bgfade,
.table-responsive,
.modal-content {
    border: 1px solid rgba(38,124,61,.14);
    border-radius: var(--network-radius);
    background: linear-gradient(180deg, var(--network-card-top), var(--network-card-bottom));
    box-shadow: var(--network-shadow-small);
    backdrop-filter: blur(12px);
}

.page-heading-card,
.page-panel,
.bgfade,
.table-responsive,
.modal-content {
    border-radius: var(--network-radius-medium);
}

.page-heading-card {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--evo-green);
}

.page-heading-card::before {
    background:
        radial-gradient(circle at 78% 50%, rgba(129,193,100,.16), transparent 7rem),
        conic-gradient(
            from 30deg at 88% 50%,
            transparent 0 10%,
            rgba(38,124,61,.10) 10% 18%,
            transparent 18% 31%,
            rgba(168,173,179,.10) 31% 39%,
            transparent 39% 100%
        );
}

.form-control,
.form-select,
.regform_input,
.regform_select,
.regform_textarea,
input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
textarea,
select {
    border-radius: var(--network-radius-small);
    border-color: rgba(38,124,61,.20);
}

.form-control:focus,
.form-select:focus,
.regform_input:focus,
.regform_select:focus,
.regform_textarea:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='search']:focus,
textarea:focus,
select:focus {
    border-color: var(--evo-green);
    box-shadow: 0 0 0 .2rem rgba(38,124,61,.14);
}

a {
    color: var(--evo-green);
}

a:hover,
a:focus {
    color: var(--evo-green-deep);
}

/* ============================================================================
   3. EVOLUTION TWO-TIER HEADER
   Black/charcoal masthead above the original green navigation band.
   ============================================================================ */
.site-header {
    position: relative;
    min-height: 122px;
    border: 0;
    background: linear-gradient(
        180deg,
        var(--evo-charcoal) 0,
        var(--evo-black) 78px,
        var(--evo-green-light) 78px,
        var(--evo-green) 122px
    );
    box-shadow: 0 3px 12px rgba(0,0,0,.28);
    backdrop-filter: none;
}

.site-header::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 78px;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(129,193,100,.85);
}

.site-header::after {
    display: none;
}

.site-navbar,
.site-navbar-shell {
    position: relative;
    z-index: 1;
}

.site-brand,
.site-brand:hover,
.site-brand:focus {
    color: #ffffff;
}

.site-brand-copy {
    display: none;
}

.site-brand-mark {
    width: var(--network-logo-width);
    height: var(--network-logo-max-height);
    flex: 0 0 var(--network-logo-width);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: visible;
}

.site-brand-logo {
    display: block;
    width: var(--network-logo-width);
    height: auto;
    max-height: var(--network-logo-max-height);
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.62));
}

@media (min-width: 992px) {
    .site-navbar {
        width: 100%;
        height: 122px;
        min-height: 122px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .site-navbar::before,
    .site-navbar::after,
    .site-nav-collapse::before,
    .site-nav-collapse::after {
        display: none !important;
        content: none !important;
    }

    .site-navbar-shell {
        display: grid !important;
        grid-template-columns: minmax(0,1fr);
        grid-template-rows: 78px 44px;
        width: min(var(--network-site-width), calc(100% - 2rem));
        height: 122px;
        min-height: 122px;
        margin: 0 auto;
        padding: 0 !important;
        gap: 0 !important;
        align-items: stretch;
    }

    .site-brand {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        justify-self: start;
        display: flex;
        align-items: center;
        width: auto;
        height: 78px;
        min-height: 78px;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        line-height: 1;
    }

    .site-nav-collapse,
    .site-nav-collapse.collapse {
        grid-column: 1;
        grid-row: 2;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 44px !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0;
        background: transparent;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .site-main-nav,
    .site-user-nav {
        display: flex !important;
        align-items: stretch !important;
        height: 44px;
        min-height: 44px;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        float: none !important;
        gap: 0 !important;
    }

    .site-main-nav {
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    .site-user-nav {
        margin-right: 0 !important;
        margin-left: auto !important;
    }

    .site-main-nav > li,
    .site-user-nav > li {
        display: flex !important;
        align-items: stretch !important;
        height: 44px;
        min-height: 44px;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    .site-navbar .nav-link,
    .site-user-nav .nav-link {
        position: relative;
        display: flex !important;
        align-items: center !important;
        justify-content: center;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 1rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        color: #ffffff !important;
        background: transparent !important;
        font-size: .9rem;
        font-weight: 650;
        line-height: 1 !important;
        white-space: nowrap;
        text-shadow: 0 1px 1px rgba(0,0,0,.42);
        box-shadow: none !important;
        transform: none !important;
    }

    .site-navbar .nav-link::after,
    .site-user-nav .nav-link::after {
        content: "";
        position: absolute;
        right: 1rem;
        bottom: 4px;
        left: 1rem;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--evo-silver), #ffffff, var(--evo-green-light));
        opacity: 0;
        transform: scaleX(.4);
        transition: opacity .18s ease, transform .18s ease;
    }

    .site-navbar .nav-link:hover,
    .site-navbar .nav-link:focus,
    .site-user-nav .nav-link:hover,
    .site-user-nav .nav-link:focus {
        color: #ffffff !important;
        background: var(--evo-green-dark) !important;
    }

    .site-navbar .nav-link:hover::after,
    .site-navbar .nav-link:focus::after,
    .site-user-nav .nav-link:hover::after,
    .site-user-nav .nav-link:focus::after {
        opacity: 1;
        transform: scaleX(1);
    }

    .site-main-nav .nav-item:first-child .nav-link {
        padding-left: 0 !important;
        padding-right: 1.1rem !important;
    }

    .site-user-nav .nav-item:last-child .nav-link {
        padding-right: 0 !important;
        padding-left: 1.1rem !important;
    }
}

@media (max-width: 991.98px) {
    :root {
        --network-logo-width: 176px;
        --network-logo-max-height: 56px;
    }

    .site-header {
        min-height: 72px;
        background: linear-gradient(180deg, var(--evo-charcoal), var(--evo-black));
    }

    .site-header::before {
        display: none;
    }

    .site-navbar,
    .site-navbar-shell {
        min-height: 72px;
    }

    .site-navbar-shell {
        display: flex !important;
        flex-wrap: wrap;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .site-brand {
        min-width: 0;
        max-width: calc(100% - 58px);
        padding: 0;
    }

    .site-brand-mark {
        width: min(var(--network-logo-width), 166px);
        height: 54px;
        flex-basis: min(var(--network-logo-width), 166px);
    }

    .site-brand-logo {
        width: min(var(--network-logo-width), 166px);
        max-height: 54px;
    }

    .site-nav-toggle {
        border: 1px solid rgba(129,193,100,.55) !important;
        background: rgba(38,124,61,.72) !important;
        box-shadow: none !important;
    }

    .site-nav-toggle .navbar-toggler-icon {
        filter: invert(1) brightness(2);
    }

    .site-nav-collapse {
        flex-basis: calc(100% + 1rem);
        width: calc(100% + 1rem);
        margin: .5rem -.5rem -.5rem;
        padding: .55rem;
        border: 0;
        border-top: 1px solid rgba(129,193,100,.72);
        border-radius: 0;
        background: linear-gradient(180deg, var(--evo-green-light), var(--evo-green));
        box-shadow: none;
    }

    .site-navbar .nav-link,
    .site-user-nav .nav-link {
        border: 0 !important;
        border-radius: 5px !important;
        color: #ffffff !important;
        background: transparent !important;
        font-weight: 700;
        box-shadow: none !important;
        transform: none !important;
    }

    .site-navbar .nav-link:hover,
    .site-navbar .nav-link:focus,
    .site-user-nav .nav-link:hover,
    .site-user-nav .nav-link:focus {
        color: #ffffff !important;
        background: var(--evo-green-dark) !important;
    }
}

/* ============================================================================
   4. HOME HERO AND ONLINE PANEL
   ============================================================================ */
.home-hero-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(38,124,61,.18);
    border-left: 5px solid var(--evo-green);
    border-radius: var(--network-radius);
    box-shadow: var(--network-shadow);
}

.home-hero-card::before {
    background:
        linear-gradient(
            90deg,
            var(--evo-green-light) 0 42%,
            var(--evo-silver) 42% 72%,
            var(--evo-charcoal) 72% 100%
        ) top / 100% 4px no-repeat,
        radial-gradient(circle at 82% 48%, rgba(129,193,100,.18), transparent 8rem),
        radial-gradient(circle at 88% 50%, transparent 0 3.2rem, rgba(38,124,61,.11) 3.25rem 4.15rem, transparent 4.2rem 5.1rem, rgba(44,44,44,.07) 5.15rem 6rem, transparent 6.05rem),
        linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,248,244,.84));
}

.home-hero-card h1 {
    color: #1f2421;
    text-shadow: 0 1px 0 #ffffff;
}

.home-hero-card__lead {
    color: #4b554e;
}

.site-eyebrow,
.eyebrow {
    color: var(--evo-green-dark);
    border: 1px solid rgba(38,124,61,.12);
    background: linear-gradient(135deg, rgba(129,193,100,.17), rgba(168,173,179,.10));
}

.site-eyebrow::before {
    background: var(--evo-green-bright);
    box-shadow: 0 0 0 4px rgba(104,189,79,.15), 0 0 12px rgba(104,189,79,.30);
}

.home-network-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(129,193,100,.45);
    border-radius: var(--network-radius-medium);
    background:
        radial-gradient(circle at 90% 8%, rgba(129,193,100,.24), transparent 42%),
        linear-gradient(145deg, #313131, #111111 72%);
    box-shadow: 0 20px 42px rgba(0,0,0,.27);
}

.home-network-card::before {
    content: "";
    position: absolute;
    top: .9rem;
    right: .9rem;
    width: .58rem;
    height: .58rem;
    border-radius: 50%;
    background: var(--evo-green-light);
    box-shadow: 0 0 0 5px rgba(129,193,100,.13), 0 0 15px rgba(129,193,100,.68);
}

.home-network-card > * {
    position: relative;
    z-index: 1;
}

.home-network-card__label {
    color: #e4f3df;
}

.home-network-card__stats > div {
    border-radius: 10px;
    border-color: rgba(129,193,100,.26);
    background: linear-gradient(135deg, rgba(129,193,100,.17), rgba(255,255,255,.07));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.home-network-card strong {
    color: #ffffff;
    text-shadow: 0 2px 7px rgba(0,0,0,.38);
}

.home-network-card span {
    color: #d8e7d3;
}

/* ============================================================================
   5. BUTTONS AND LINKS
   ============================================================================ */
.btn,
a.btn,
.site-navbar .nav-link {
    border-radius: var(--network-button-radius);
}

.btn-primary,
a.btn-primary,
.sidebar-link--primary {
    color: #ffffff !important;
    border-color: rgba(0,0,0,.28) !important;
    background: linear-gradient(135deg, var(--evo-green-light), var(--evo-green)) !important;
    box-shadow:
        inset 0 -3px 0 rgba(0,0,0,.22),
        0 10px 22px rgba(38,124,61,.22) !important;
}

.btn-primary:hover,
.btn-primary:focus,
a.btn-primary:hover,
a.btn-primary:focus,
.sidebar-link--primary:hover,
.sidebar-link--primary:focus {
    color: #ffffff !important;
    background: linear-gradient(135deg, #91ce76, var(--evo-green-dark)) !important;
    box-shadow:
        inset 0 -3px 0 rgba(0,0,0,.28),
        0 13px 26px rgba(38,124,61,.27) !important;
    transform: translateY(-1px);
}

.btn-soft,
a.btn-soft {
    color: var(--evo-green-dark) !important;
    border-color: rgba(38,124,61,.21);
    background: linear-gradient(180deg, #f5faf3, #e7f1e3);
}

.btn-soft:hover,
.btn-soft:focus,
a.btn-soft:hover,
a.btn-soft:focus {
    color: #ffffff !important;
    border-color: var(--evo-green);
    background: var(--evo-green);
}

/* ============================================================================
   6. SIDEBAR
   ============================================================================ */
.sidebar-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(38,124,61,.15);
    border-left: 4px solid var(--evo-green);
    border-radius: var(--network-radius-medium);
    background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,249,246,.95));
}

.sidebar-card::after {
    content: "";
    position: absolute;
    top: -26px;
    right: -22px;
    width: 86px;
    height: 86px;
    border: 12px solid rgba(129,193,100,.09);
    border-radius: 50%;
    box-shadow:
        0 0 0 11px rgba(38,124,61,.055),
        0 0 0 22px rgba(44,44,44,.025);
    pointer-events: none;
}

.sidebar-card__header,
.chatcats-modern {
    position: relative;
    z-index: 1;
}

.sidebar-card__title {
    color: #303532;
}

.sidebar-card__title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    margin-top: .34rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--evo-green-light), var(--evo-green), var(--evo-silver));
}

.sidebar-card__badge {
    color: var(--evo-green-dark);
    border: 1px solid rgba(38,124,61,.14);
    background: rgba(129,193,100,.15);
}

.sidebar-link {
    border-radius: var(--network-radius-small);
    color: #313a34 !important;
}

.sidebar-link__icon {
    color: var(--evo-green-dark);
    border-radius: 7px;
    background: rgba(129,193,100,.17);
}

.sidebar-link:hover,
.sidebar-link:focus {
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--evo-green), var(--evo-green-dark));
    box-shadow: 0 8px 18px rgba(38,124,61,.18);
}

.sidebar-link:hover .sidebar-link__icon,
.sidebar-link:focus .sidebar-link__icon {
    color: #ffffff;
    background: rgba(0,0,0,.20);
    box-shadow: none;
}

.sidebar-link--primary,
.sidebar-link--primary:visited,
.sidebar-link--primary .sidebar-link__label,
.sidebar-link--primary .sidebar-link__text {
    color: #ffffff !important;
}

.sidebar-link--primary .sidebar-link__icon {
    color: #ffffff !important;
    background: rgba(255,255,255,.18);
}

/* ============================================================================
   7. HOME INFORMATION CARDS
   ============================================================================ */
.home-info-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--network-radius-medium);
    border-color: rgba(38,124,61,.13);
    border-top: 4px solid var(--evo-green);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.home-info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(24,67,31,.13);
}

.home-info-grid > .home-info-card:nth-child(2) {
    border-top-color: var(--evo-silver);
}

.home-info-grid > .home-info-card:nth-child(3) {
    border-top-color: var(--evo-green-light);
}

.home-info-card__icon {
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--evo-green-light), var(--evo-green-dark));
    box-shadow: 0 9px 19px rgba(38,124,61,.18);
}

.home-info-grid > .home-info-card:nth-child(2) .home-info-card__icon {
    color: #ffffff;
    background: linear-gradient(135deg, #aeb3b8, #555b60);
    box-shadow: 0 9px 19px rgba(44,44,44,.18);
}

.home-info-grid > .home-info-card:nth-child(3) .home-info-card__icon {
    background: linear-gradient(135deg, #91ce76, var(--evo-green));
}

.home-info-card .mainheaders {
    color: #252a27;
}

.home-text-link {
    color: var(--evo-green) !important;
}

.home-text-link:hover,
.home-text-link:focus {
    color: var(--evo-green-deep) !important;
}

/* ============================================================================
   8. TABLES, ROOM LISTS, AND GENERAL PANELS
   ============================================================================ */
.table thead th,
.roomlistheader {
    color: #ffffff;
    border-color: rgba(129,193,100,.26);
    background: linear-gradient(180deg, var(--evo-green-light), var(--evo-green));
}

.table tbody tr:hover,
.roomlistcol_a:hover,
.roomlistcol_b:hover {
    background: rgba(129,193,100,.09);
}

.table-responsive,
.page-panel,
.bgfade {
    border-top: 3px solid rgba(38,124,61,.65);
}

.badge,
.sidebar-card__badge {
    border-radius: 999px;
}

/* ============================================================================
   9. FOOTER
   ============================================================================ */
.site-footer {
    color: #ffffff;
}

.footer-inner {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    border: 1px solid rgba(129,193,100,.32);
    border-radius: var(--network-radius-medium);
    background:
        radial-gradient(circle at 92% 0%, rgba(129,193,100,.24), transparent 16rem),
        linear-gradient(180deg, #347f45, var(--evo-green));
    box-shadow: 0 14px 30px rgba(38,124,61,.18);
    backdrop-filter: none;
}

.footer-inner::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--evo-silver), #ffffff, var(--evo-green-light));
}

.footer-inner > * {
    position: relative;
    z-index: 1;
}

.footer-inner a {
    color: #ffffff !important;
}

.footer-inner a:hover,
.footer-inner a:focus {
    color: #dff3d7 !important;
}

.footer-credits span + span::before,
.footer-separator {
    color: rgba(255,255,255,.52);
}

/* ============================================================================
   10. RESPONSIVE FINISH
   ============================================================================ */
@media (max-width: 767.98px) {
    .home-hero-card {
        border-left-width: 1px;
        border-top: 5px solid var(--evo-green);
    }

    .home-hero-card::before {
        background:
            linear-gradient(
                90deg,
                var(--evo-green-light) 0 42%,
                var(--evo-silver) 42% 72%,
                var(--evo-charcoal) 72% 100%
            ) top / 100% 4px no-repeat,
            radial-gradient(circle at 8% 15%, rgba(129,193,100,.16), transparent 19rem),
            linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,248,244,.88));
    }

    .footer-inner {
        justify-content: center;
        text-align: center;
    }

    .footer-credits {
        justify-content: center;
    }
}