@font-face {
    font-family: 'Yekan';
    src: url('../fonts/B_Yekan/Yekan.ttf');
}

@font-face {
    font-family: 'Vazir';
    src: url('../fonts/Vazir/Vazirmatn-Bold.woff2');
}

@font-face {
    font-family: 'Vazir Light';
    src: url('../fonts/Vazir/Vazirmatn-Light.woff2');
}

* {
    box-sizing: border-box;
}

:root {
    --color-primary: #2563EB;
    --color-primary-rgb: 37, 99, 235;
    --color-secondary: #7B61FF;
    --color-secondary-rgb: 123, 97, 255;
    --color-accent: #00D4FF;
    --color-accent-rgb: 0, 212, 255;
    --color-success-rgb: #10B981;
    --color-success: #10B981;
    --color-warning: #FBBF24;
    --color-danger: #EF4444;
    --color-orange: #F97316;
    --color-pink: #EC4899;
    --bg-body: #050C1E;
    --bg-primary: #040A18;
    --bg-secondary: #0A1428;
    --bg-glass: rgba(255, 255, 255, 0.05);
    --bg-glass-hover: rgba(255, 255, 255, 0.08);
    --bg-glass-border: rgba(255, 255, 255, 0.1);
    --bg-glass-border-hover: rgba(255, 255, 255, 0.2);
    --text-main: #FFFFFF;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-placeholder: #6B7280;
    --text-dim: #64748B;
    --text-light-muted: #A1A9C4;
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-accent: linear-gradient(to right, var(--color-primary), var(--color-accent));
    --shadow-primary: 0 0 20px rgba(var(--color-primary-rgb), 0.4);
    --shadow-secondary: 0 0 20px rgba(var(--color-secondary-rgb), 0.4);
    --shadow-accent: 0 0 20px rgba(var(--color-accent-rgb), 0.4);
    --shadow-card: 0 0 30px rgba(0, 0, 0, 0.3);
    --scrollbar-track: rgba(4, 10, 24, 0.6);
    --scrollbar-thumb: var(--color-primary);
    --scrollbar-thumb-hover: #3b82f6;
    --bg-primary-rgb: 4, 10, 24;
    --color-success-rgb: 16, 185, 129;
    --color-warning-rgb: 251, 191, 36;
    --color-danger-rgb: 239, 68, 68;
    --color-orange-rgb: 249, 115, 22;
    --color-pink-rgb: 236, 72, 153;
}

.light-mode {
    --bg-body: #F1F5F9;
    --bg-primary: #FFFFFF;
    --bg-secondary: #E2E8F0;
    --bg-glass: rgba(0, 0, 0, 0.03);
    --bg-glass-hover: rgba(0, 0, 0, 0.06);
    --bg-glass-border: rgba(0, 0, 0, 0.1);
    --bg-glass-border-hover: rgba(0, 0, 0, 0.2);
    --text-main: #0F172A;
    --text-secondary: #334155;
    --text-muted: #64748B;
    --text-placeholder: #94A3B8;
    --color-primary: #1E40AF;
    --color-primary-rgb: 30, 64, 175;
    --color-secondary: #6D28D9;
    --color-secondary-rgb: 109, 40, 217;
    --color-accent: #0891B2;
    --color-accent-rgb: 8, 145, 178;
    --color-success: #059669;
    --color-warning: #D97706;
    --color-danger: #DC2626;
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-accent: linear-gradient(to right, var(--color-primary), var(--color-accent));
    --shadow-primary: 0 0 20px rgba(var(--color-primary-rgb), 0.25);
    --shadow-secondary: 0 0 20px rgba(var(--color-secondary-rgb), 0.25);
    --shadow-accent: 0 0 20px rgba(var(--color-accent-rgb), 0.25);
    --shadow-card: 0 0 15px rgba(0, 0, 0, 0.08);
    --scrollbar-track: rgba(0, 0, 0, 0.05);
    --scrollbar-thumb: var(--color-primary);
    --scrollbar-thumb-hover: #2563EB;
    --bg-primary-rgb: 255, 255, 255;
    --color-success-rgb: 5, 150, 105;
    --color-pink-rgb: 219, 39, 119;
}

.theme-switch-thumb {
    transform: translateX(0);
}

.light-mode .theme-switch-thumb {
    transform: translateX(1.7rem);
    background: linear-gradient(to bottom right, var(--color-warning), #F59E0B);
    box-shadow: 0 0 15px rgba(var(--color-warning-rgb, 251, 191, 36), 0.5);
}

.theme-switch-thumb i {
    transition: transform 0.5s ease;
}

.light-mode .theme-switch-thumb i {
    transform: rotate(360deg);
}

/* ==============================================
   Global Styles
   ============================================== */
body {
    font-family: 'Vazir' !important;
    background-color: var(--bg-body);
    background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 30px 30px;
    color: var(--text-main);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    backdrop-filter: blur(4px);
    border-radius: 10px;
    border: 1px solid var(--bg-glass-border);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary));
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.5);
    transition: all 0.3s ease;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #3b82f6, #8b5cf6);
        box-shadow: 0 0 20px var(--color-primary), 0 0 40px var(--color-secondary);
        border-color: rgba(255, 255, 255, 0.3);
    }

    ::-webkit-scrollbar-thumb:active {
        background: linear-gradient(180deg, #1d4ed8, #6d28d9);
        box-shadow: 0 0 25px var(--color-primary), 0 0 50px var(--color-secondary);
    }

html {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--scrollbar-track);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.light-mode {
    --bg-body: #F1F5F9;
}

    .light-mode body {
        background-image: radial-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px);
        background-size: 30px 30px;
    }

.theme-image-dark {
    display: block;
}

.theme-image-light {
    display: none;
}

.light-mode .theme-image-dark {
    display: none;
}

.light-mode .theme-image-light {
    display: block;
}

/* ========== Navbar ========== */
.navbar-bg {
    background: rgba(var(--bg-primary-rgb, 4, 10, 24), 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid var(--bg-glass-border, rgba(255, 255, 255, 0.1));
}

.nav-link {
    color: var(--text-secondary, #CBD5E1);
    transition: color 0.3s ease;
}

    .nav-link:hover {
        color: var(--text-main, #FFFFFF);
    }

.nav-link-underline {
    background: var(--gradient-primary, linear-gradient(to right, #2563EB, #7B61FF));
}

.nav-logo-icon {
    background: var(--color-primary, #2563EB);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb, 37, 99, 235), 0.4);
}

    .nav-logo-icon:hover {
        background: var(--gradient-primary);
        box-shadow: 0 0 35px rgba(var(--color-primary-rgb), 0.6);
    }

.nav-title-fa {
    color: var(--text-main, #FFFFFF);
}

.nav-title-en {
    color: var(--text-muted, #94A3B8);
}

.nav-btn-login {
    background: var(--bg-glass, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--bg-glass-border, rgba(255, 255, 255, 0.2));
    color: var(--text-secondary, #CBD5E1);
}

    .nav-btn-login:hover {
        background: var(--bg-glass-hover, rgba(255, 255, 255, 0.1));
        border-color: var(--color-primary, #2563EB);
        color: var(--text-main, #FFFFFF);
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.4);
    }

.nav-btn-register {
    background: var(--gradient-primary);
    color: #ffffff;
}

    .nav-btn-register:hover {
        box-shadow: 0 0 25px rgba(var(--color-primary-rgb), 0.5);
    }

.nav-menu-toggle {
    color: var(--text-main, #FFFFFF);
}

    .nav-menu-toggle:hover {
        color: var(--color-primary, #2563EB);
    }

/* ========== Home Section ========== */

.hero-badge-hover:hover {
    background: var(--bg-glass-hover);
    border-color: var(--color-primary);
    color: var(--text-main);
    box-shadow: 0 0 50px rgba(var(--color-accent-rgb), 0.7);
}

.hero-card-hover:hover {
    background: var(--bg-glass-hover);
    border-color: rgba(var(--color-primary-rgb), 0.6);
    box-shadow: 0 0 35px rgba(var(--color-primary-rgb), 0.5);
}

.hero-btn-primary-hover:hover {
    box-shadow: 0 0 50px rgba(var(--color-primary-rgb), 0.8);
}

.hero-btn-secondary-hover:hover {
    background: var(--bg-glass-hover);
    border-color: rgba(var(--color-primary-rgb), 0.6);
    color: var(--text-main);
    box-shadow: 0 0 25px rgba(var(--color-primary-rgb), 0.3);
}

@media screen and (max-width:576px) {
    .home-section-btn {
        font-size: 13px;
    }
}

@keyframes pulseBar {
    0% {
        height: 8px;
        opacity: 0.3;
        box-shadow: none;
    }

    50% {
        height: 45px;
        opacity: 1;
        box-shadow: 0 0 18px rgba(var(--color-accent-rgb), 0.8);
    }

    100% {
        height: 14px;
        opacity: 0.5;
        box-shadow: none;
    }
}

.hero-btn-primary {
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.4);
}

    .hero-btn-primary:hover {
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
    }

.hero-btn-secondary {
    background: var(--bg-glass);
    border: 1px solid var(--bg-glass-border);
    color: var(--text-secondary);
}

    .hero-btn-secondary:hover {
        background: var(--bg-glass-hover);
        border-color: var(--color-primary);
        color: var(--text-main);
        box-shadow: 0 0 25px rgba(var(--color-primary-rgb), 0.3);
    }

.bar-item {
    width: 6px;
    border-radius: 4px;
    background: linear-gradient(to top, var(--color-primary), var(--color-accent));
    animation: pulseBar 1.4s ease-in-out infinite alternate;
}

    .bar-item:nth-child(1) {
        animation-delay: 0.00s;
    }

    .bar-item:nth-child(2) {
        animation-delay: 0.08s;
    }

    .bar-item:nth-child(3) {
        animation-delay: 0.16s;
    }

    .bar-item:nth-child(4) {
        animation-delay: 0.24s;
    }

    .bar-item:nth-child(5) {
        animation-delay: 0.32s;
    }

    .bar-item:nth-child(6) {
        animation-delay: 0.40s;
    }

    .bar-item:nth-child(7) {
        animation-delay: 0.48s;
    }

    .bar-item:nth-child(8) {
        animation-delay: 0.56s;
    }

    .bar-item:nth-child(9) {
        animation-delay: 0.64s;
    }

    .bar-item:nth-child(10) {
        animation-delay: 0.72s;
    }

    .bar-item:nth-child(11) {
        animation-delay: 0.80s;
    }

    .bar-item:nth-child(12) {
        animation-delay: 0.88s;
    }

    .bar-item:nth-child(13) {
        animation-delay: 0.96s;
    }

    .bar-item:nth-child(14) {
        animation-delay: 1.04s;
    }

    .bar-item:nth-child(15) {
        animation-delay: 1.12s;
    }

    .bar-item:nth-child(16) {
        animation-delay: 1.20s;
    }

    .bar-item:nth-child(17) {
        animation-delay: 1.28s;
    }

    .bar-item:nth-child(18) {
        animation-delay: 1.36s;
    }

.hero-feature-card:hover {
    background: var(--bg-glass-hover) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 35px rgba(var(--color-primary-rgb), 0.5) !important;
}

.hero-feature-icon {
    transition: background 0.5s, color 0.5s, box-shadow 0.5s;
}

.hero-feature-card:hover .hero-feature-icon {
    background: var(--color-primary) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.4) !important;
}

.hero-feature-title {
    transition: color 0.5s;
}

.hero-feature-card:hover .hero-feature-title {
    color: var(--color-accent) !important;
}

.light-mode .hero-feature-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}

    .light-mode .hero-feature-card:hover .hero-feature-icon {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    .light-mode .hero-feature-card:hover .hero-feature-title {
        color: var(--color-primary) !important;
    }

@media screen and (max-width:576px) {

    .bar-item:nth-child(18),
    .bar-item:nth-child(17),
    .bar-item:nth-child(16),
    .bar-item:nth-child(15) {
        display: none;
    }
}

.hero-btn-primary {
    background: var(--gradient-primary);
    color: #ffffff;
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.4);
}

    .hero-btn-primary:hover {
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.8);
    }

.hero-btn-secondary {
    background: var(--bg-glass);
    border: 1px solid var(--bg-glass-border);
    color: var(--text-secondary);
}

    .hero-btn-secondary:hover {
        background: var(--bg-glass-hover);
        border-color: var(--color-primary);
        color: var(--text-main);
        box-shadow: 0 0 25px rgba(var(--color-primary-rgb), 0.3);
    }

.light-mode .hero-btn-primary {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    .light-mode .hero-btn-primary:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

.light-mode .hero-btn-secondary:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* ========== Services Section ========== */

.service-card {
    background: var(--bg-glass);
    backdrop-filter: blur(8px);
    border: 1px solid var(--bg-glass-border);
    border-radius: 1rem;
    padding: 1.25rem;
}

    .service-card:hover {
        border-color: rgba(var(--color-primary-rgb), 0.6);
        box-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.2);
        transform: translateY(-4px);
    }

.service-card-btn {
    background: var(--bg-glass);
    border: 1px solid var(--bg-glass-border);
    color: var(--color-accent);
    border-radius: 2rem;
    padding: 0.3rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s;
}

    .service-card-btn:hover {
        background: linear-gradient(to right, var(--color-primary), var(--color-secondary));
        color: #fff;
        border-color: transparent;
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.5);
        transform: scale(1.05);
        gap: 0.75rem;
    }

.card-bottom-fade {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to top, rgba(var(--bg-primary-rgb), 0.2) 0%, rgba(var(--bg-primary-rgb), 0) 50%, transparent 100%);
}

.light-mode #services::before,
.light-mode #services::after {
    opacity: 0.16;
}

.light-mode .service-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.light-mode .service-card-btn:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

#services {
    position: relative;
    overflow: hidden;
}

.bg-decor {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(var(--color-primary-rgb), 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--color-primary-rgb), 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
    pointer-events: none;
}

#services::before,
#services::after {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
    animation: floatOrb 12s infinite alternate ease-in-out;
}

#services::before {
    background: var(--color-primary);
    top: -50px;
    right: -50px;
    animation-delay: 0s;
}

#services::after {
    background: var(--color-secondary);
    bottom: -50px;
    left: -50px;
    animation-delay: -6s;
}

@keyframes floatOrb {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(40px, -40px) scale(1.3);
    }
}


/* ========== Servers Section ========== */
#servers {
    position: relative;
    overflow: hidden;
}

.servers-bg-decor {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.15) 1px, transparent 1px);
    background-size: 28px 28px;
    z-index: 0;
    pointer-events: none;
    animation: dotPulse 6s infinite alternate ease-in-out;
}

@keyframes dotPulse {
    0% {
        background-size: 28px 28px;
        opacity: 0.7;
    }

    100% {
        background-size: 30px 30px;
        opacity: 1;
    }
}

#servers::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 40%, rgba(var(--color-secondary-rgb), 0.08) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
    animation: gentleShift 10s infinite alternate ease-in-out;
}

@keyframes gentleShift {
    0% {
        transform: scale(1) translate(0, 0);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.1) translate(15px, -10px);
        opacity: 0.9;
    }
}

.servers-img {
    max-width: 365px;
}

#servers::before {
    display: none;
}

.minimal-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.15);
    background-image: linear-gradient(to left, var(--color-primary), var(--color-accent));
    background-repeat: no-repeat;
    background-position: right;
    background-size: 0% 100%;
    transition: background-size 0.1s ease;
    border: none;
}

    .minimal-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: transparent;
        border: none;
        cursor: pointer;
        opacity: 0;
    }

    .minimal-slider::-moz-range-thumb {
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        opacity: 0;
    }

.slider-thumb-ring {
    position: absolute;
    top: 50%;
    right: 0%;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--text-main);
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 3px var(--color-primary), 0 0 30px var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    transform: translate(50%, -50%);
    transition: right 0.08s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
    pointer-events: none;
    user-select: none;
    z-index: 10;
}

.minimal-slider:hover ~ .slider-thumb-ring {
    box-shadow: 0 0 5px var(--color-primary), 0 0 20px var(--color-accent);
}

#servers .lg\:col-span-3:first-child a[href] {
    position: relative;
    overflow: hidden;
}

    #servers .lg\:col-span-3:first-child a[href]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s;
    }

    #servers .lg\:col-span-3:first-child a[href]:hover::before {
        left: 100%;
    }

#servers .text-\[\[00D4FF\]\] {
    text-shadow: 0 0 20px var(--color-accent);
}

.slider-value-label {
    position: absolute;
    top: -28px;
    right: 0;
    transform: translateX(50%);
    background: var(--bg-secondary);
    border: 1px solid rgba(var(--color-primary-rgb), 0.5);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: bold;
    color: var(--color-accent);
    white-space: nowrap;
    box-shadow: 0 0 12px rgba(var(--color-accent-rgb), 0.3);
    transition: right 0.08s ease-out;
    pointer-events: none;
    z-index: 20;
}

#servers .lg\:col-span-3:last-child .bg-\[\#040A18\]\/60 {
    transition: all 0.4s ease;
    backdrop-filter: blur(12px);
}

#servers .lg\:col-span-3:last-child ul li {
    transition: all 0.3s ease;
    border-radius: 6px;
    padding: 4px 6px;
}

    #servers .lg\:col-span-3:last-child ul li:hover {
        background: rgba(255, 255, 255, 0.05);
        transform: translateX(-4px);
    }

    #servers .lg\:col-span-3:last-child ul li i {
        transition: transform 0.3s ease, color 0.3s ease;
    }

    #servers .lg\:col-span-3:last-child ul li:hover i {
        transform: scale(1.2);
        color: var(--color-accent);
    }

.light-mode .minimal-slider {
    border: 1px solid lightblue;
}

/* ========== DataCenters Section ========== */
#datacenter {
    background-color: var(--bg-primary);
}

.dc-grid {
    position: relative;
}

.dc-item {
    padding: 2rem 1rem;
    text-align: center;
    transition: all 0.4s ease;
}

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

.dc-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border: 1.5px solid var(--bg-glass-border);
    transition: all 0.4s ease;
    position: relative;
}

.dc-icon-purple {
    color: var(--color-secondary);
}

.dc-icon-blue {
    color: var(--color-primary);
}

.dc-icon-cyan {
    color: var(--color-accent);
}

.dc-icon-yellow {
    color: var(--color-warning);
}

.dc-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.1;
    filter: blur(12px);
    z-index: -1;
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.dc-item:hover .dc-icon {
    background: var(--bg-glass-hover);
    border-color: currentColor;
    box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
    transform: scale(1.08);
}

    .dc-item:hover .dc-icon::after {
        opacity: 0.25;
        filter: blur(20px);
    }

.dc-item:not(:nth-child(6n))::before {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.light-mode .dc-item:not(:nth-child(6n))::before {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1), transparent) !important;
}

@media (max-width: 1023px) {
    .dc-item::before {
        display: none;
    }

    .dc-item:not(:nth-last-child(-n+2))::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20%;
        right: 20%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    }
}

@media (max-width: 767px) {
    .dc-item:not(:nth-last-child(-n+2))::after {
        left: 15%;
        right: 15%;
    }
}

#datacenter {
    position: relative;
    background-color: var(--bg-primary);
    overflow: hidden;
}

    #datacenter::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(45deg, rgba(var(--color-primary-rgb), 0.03) 0px, rgba(var(--color-primary-rgb), 0.03) 1px, transparent 1px, transparent 30px);
        pointer-events: none;
        z-index: 0;
        animation: slowDrift 25s infinite linear;
    }

    #datacenter::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        height: 70%;
        background: radial-gradient(ellipse at center, rgba(var(--color-accent-rgb), 0.04) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
    }

@keyframes slowDrift {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 60px 60px;
    }
}

.contact-img {
    max-width: 575px;
    height: auto;
    width: 100%;
}

/* ========== Light Mode Overrides for Data Center Section ========== */
.light-mode #datacenter {
    background-color: rgba(var(--bg-primary-rgb), 0.99) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

    .light-mode #datacenter .text-white {
        color: var(--text-main) !important;
    }

    .light-mode #datacenter .text-gray-400 {
        color: var(--text-muted) !important;
    }

    .light-mode #datacenter .text-gray-300 {
        color: var(--text-secondary) !important;
    }


    .light-mode #datacenter::before {
        background-image: repeating-linear-gradient(45deg, rgba(var(--color-primary-rgb), 0.05) 0px, rgba(var(--color-primary-rgb), 0.05) 1px, transparent 1px, transparent 30px) !important;
    }

    .light-mode #datacenter::after {
        background: radial-gradient(ellipse at center, rgba(var(--color-accent-rgb), 0.06) 0%, transparent 70%) !important;
    }

/* ========== Glass Card ========== */
.glass-card {
    position: relative;
    overflow: hidden;
    background-color: rgba(4, 10, 24, 0.7);
    backdrop-filter: blur(2px);
    border: 1px solid var(--bg-glass-border);
    border-radius: 1.5rem;
}

    .glass-card::before {
        content: '';
        position: absolute;
        inset: -50px;
        background: radial-gradient(circle 4px, rgba(var(--color-accent-rgb), 0.15) 20%, transparent 20%) 10% 20%, radial-gradient(circle 3px, rgba(var(--color-primary-rgb), 0.12) 20%, transparent 20%) 30% 60%, radial-gradient(circle 6px, rgba(var(--color-secondary-rgb), 0.1) 20%, transparent 20%) 70% 80%, radial-gradient(circle 2px, rgba(var(--color-accent-rgb), 0.18) 20%, transparent 20%) 85% 40%, radial-gradient(circle 5px, rgba(var(--color-primary-rgb), 0.08) 20%, transparent 20%) 50% 15%, radial-gradient(circle 3px, rgba(var(--color-secondary-rgb), 0.14) 20%, transparent 20%) 90% 70%, radial-gradient(circle 4px, rgba(var(--color-accent-rgb), 0.12) 20%, transparent 20%) 20% 85%;
        background-size: 200px 200px;
        animation: waveParticles 20s infinite alternate ease-in-out;
        pointer-events: none;
        z-index: 0;
        filter: blur(0.5px);
    }

    .glass-card::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 40%;
        transform: translate(-50%, -50%);
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.1) 0%, transparent 70%);
        pointer-events: none;
        filter: blur(60px);
        animation: pulseGlow 4s infinite alternate;
        z-index: 0;
    }

@keyframes waveParticles {
    0% {
        background-position: 10% 20%, 30% 60%, 70% 80%, 85% 40%, 50% 15%, 90% 70%, 20% 85%;
        transform: rotate(0deg) scale(1);
    }

    50% {
        background-position: 15% 25%, 25% 55%, 75% 75%, 80% 45%, 55% 20%, 85% 65%, 25% 80%;
        transform: rotate(2deg) scale(1.05);
    }

    100% {
        background-position: 10% 20%, 30% 60%, 70% 80%, 85% 40%, 50% 15%, 90% 70%, 20% 85%;
        transform: rotate(-1deg) scale(0.98);
    }
}

@keyframes pulseGlow {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* ========== Light Mode Overrides for Glass Card Panel ========== */

.light-mode .glass-card {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

    .light-mode .glass-card .text-white {
        color: var(--text-main) !important;
    }

    .light-mode .glass-card .text-gray-400 {
        color: var(--text-muted) !important;
    }

    .light-mode .glass-card .text-gray-300 {
        color: var(--text-secondary) !important;
    }

    .light-mode .glass-card .text-\[\#00D4FF\] {
        color: var(--color-accent) !important;
    }

    .light-mode .glass-card a[class*="bg-white/5"] {
        background-color: rgba(0, 0, 0, 0.03) !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
        color: var(--text-secondary) !important;
    }

        .light-mode .glass-card a[class*="bg-white/5"]:hover {
            background-color: rgba(0, 0, 0, 0.06) !important;
            border-color: var(--color-primary) !important;
            color: var(--text-main) !important;
            box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.15) !important;
        }

    .light-mode .glass-card a[class*="from-\[#2563EB\]"] {
        background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary)) !important;
        color: #ffffff !important;
    }

        .light-mode .glass-card a[class*="from-\[#2563EB\]"]:hover {
            box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.4) !important;
        }

    .light-mode .glass-card::before {
        opacity: 0.4;
    }

    .light-mode .glass-card::after {
        opacity: 0.6;
        background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.08) 0%, transparent 70%);
    }

/* ========== Testimonials ========== */
.testimonial-card {
    position: relative;
    backdrop-filter: blur(8px);
    border: 1px solid var(--bg-glass-border);
    border-radius: 1.5rem;
    padding: 1.8rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

    .testimonial-card:hover {
        background: var(--bg-glass-hover);
        border-color: rgba(var(--color-primary-rgb), 0.5);
        box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5), 0 0 30px rgba(var(--color-primary-rgb), 0.2);
        transform: translateY(-6px);
    }

    .testimonial-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
        border-radius: 3px 3px 0 0;
    }

    .testimonial-card:hover::after {
        transform: scaleX(1);
    }

.testimonial-text {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 1.8rem;
    position: relative;
    z-index: 1;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.author-avatar {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.author-details {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.author-name {
    font-weight: 700;
    color: var(--text-main);
    font-size: 0.95rem;
}

.author-role {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.author-rating {
    display: flex;
    gap: 0.15rem;
    margin-right: auto;
    color: var(--color-warning);
    font-size: 0.8rem;
}

.testimonials-slider .owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
}

    .testimonials-slider .owl-dots .owl-dot span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        transition: all 0.3s ease-in-out;
        display: block;
    }

.testimonials-slider .owl-stage-outer {
    padding-top: 30px;
}

.testimonials-slider .owl-dots .owl-dot.active span {
    background: var(--color-primary);
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.6);
    width: 24px;
    border-radius: 8px;
}

.testimonials-wrapper {
    position: relative;
    background: rgba(4, 10, 24, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2rem;
    padding: 2.5rem 2rem;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.08), inset 0 0 40px rgba(var(--color-accent-rgb), 0.03);
    transition: all 0.5s ease;
}

    .testimonials-wrapper:hover {
        border-color: rgba(var(--color-primary-rgb), 0.3);
        box-shadow: 0 0 60px rgba(var(--color-primary-rgb), 0.15), inset 0 0 60px rgba(var(--color-accent-rgb), 0.05);
    }

    .testimonials-wrapper::before {
        content: '';
        position: absolute;
        inset: -20px;
        background: radial-gradient(circle 3px, rgba(var(--color-accent-rgb), 0.12) 20%, transparent 20%) 15% 10%, radial-gradient(circle 4px, rgba(var(--color-primary-rgb), 0.1) 20%, transparent 20%) 75% 20%, radial-gradient(circle 2px, rgba(var(--color-secondary-rgb), 0.14) 20%, transparent 20%) 40% 70%, radial-gradient(circle 5px, rgba(var(--color-accent-rgb), 0.06) 20%, transparent 20%) 85% 60%, radial-gradient(circle 3px, rgba(var(--color-primary-rgb), 0.1) 20%, transparent 20%) 60% 85%;
        background-size: 250px 250px;
        animation: floatTestimonial 20s infinite alternate ease-in-out;
        pointer-events: none;
        z-index: 0;
    }

    .testimonials-wrapper::after {
        content: '';
        position: absolute;
        top: -50px;
        left: -50px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.12) 0%, transparent 70%);
        pointer-events: none;
        filter: blur(70px);
        animation: cornerGlow 6s infinite alternate;
        z-index: 0;
    }

@keyframes floatTestimonial {
    0% {
        transform: translate(0, 0) rotate(0deg);
        background-position: 15% 10%, 75% 20%, 40% 70%, 85% 60%, 60% 85%;
    }

    50% {
        transform: translate(-10px, 5px) rotate(1deg);
    }

    100% {
        transform: translate(8px, -5px) rotate(-0.5deg);
        background-position: 20% 15%, 70% 25%, 45% 65%, 80% 55%, 55% 80%;
    }
}

@keyframes cornerGlow {
    0% {
        opacity: 0.5;
        transform: translate(0, 0) scale(1);
    }

    100% {
        opacity: 1;
        transform: translate(10px, 10px) scale(1.2);
    }
}

/* ========== Light Mode Overrides for Testimonials Section ========== */
.light-mode .testimonials-wrapper {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.05), inset 0 0 30px rgba(var(--color-primary-rgb), 0.03) !important;
}

    .light-mode .testimonials-wrapper:hover {
        border-color: rgba(var(--color-primary-rgb), 0.3) !important;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.08), inset 0 0 50px rgba(var(--color-primary-rgb), 0.04) !important;
    }

    .light-mode .testimonials-wrapper::before {
        opacity: 0.5;
    }

    .light-mode .testimonials-wrapper::after {
        opacity: 0.4;
        background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.08) 0%, transparent 70%);
    }

.light-mode .testimonial-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.02);
}

    .light-mode .testimonial-card:hover {
        background: #ffffff;
        border-color: rgba(var(--color-primary-rgb), 0.4);
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1), 0 0 20px rgba(var(--color-primary-rgb), 0.1);
    }

.light-mode .testimonial-text {
    color: var(--text-secondary);
}

.light-mode .author-name {
    color: var(--text-main);
}

.light-mode .author-role {
    color: var(--text-muted);
}

.light-mode .author-avatar {
    border-color: rgba(0, 0, 0, 0.1);
}

.light-mode .testimonials-slider .owl-dots .owl-dot span {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.2);
}

.light-mode .testimonials-slider .owl-dots .owl-dot.active span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.5);
}

.light-mode .testimonials-wrapper h2.text-white {
    color: var(--text-main) !important;
}

.light-mode .hover-link-neon,
.light-mode a[class*="text-\[#00D4FF\]"] {
    color: var(--color-accent) !important;
}

    .light-mode .hover-link-neon:hover,
    .light-mode a[class*="text-\[#00D4FF\]"]:hover {
        color: var(--color-primary) !important;
    }

.light-mode .testimonials-wrapper .bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--color-primary), var(--color-accent)) !important;
}

.light-mode .bg-\[\#040A18\]\/80 {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .text-white {
    color: var(--text-main) !important;
}

.light-mode .text-gray-400 {
    color: var(--text-muted) !important;
}

.light-mode .text-gray-300 {
    color: var(--text-secondary) !important;
}

.light-mode input[type="email"] {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text-main) !important;
}

    .light-mode input[type="email"]::placeholder {
        color: var(--text-placeholder) !important;
    }

    .light-mode input[type="email"]:focus {
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.2) !important;
    }

.light-mode button[class*="bg-gradient-to-r"] {
    background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary)) !important;
    color: #ffffff !important;
}

    .light-mode button[class*="bg-gradient-to-r"]:hover {
        box-shadow: 0 0 35px rgba(var(--color-primary-rgb), 0.4) !important;
    }

.light-mode .bg-\[radial-gradient\(circle_at_50\%_50\%\,rgba\(37\,99\,235\,0\.3\)\,transparent_70\%\)\] {
    background: radial-gradient(circle at 50% 50%, rgba(var(--color-primary-rgb), 0.15), transparent 70%) !important;
}

.light-mode .contact-img {
    filter: drop-shadow(0 0 15px rgba(var(--color-primary-rgb), 0.2));
}

/* ========== Footer ========== */
.hover-link-neon {
    position: relative;
    padding-bottom: 4px;
    transition: all 200ms;
}

    .hover-link-neon::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(to left, var(--color-primary), var(--color-accent));
        border-radius: 2px;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

footer > div:first-child {
    position: relative;
    overflow: hidden;
    background: rgba(4, 10, 24, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(var(--color-primary-rgb), 0.05);
    transition: box-shadow 0.5s ease;
}

    footer > div:first-child:hover {
        box-shadow: 0 0 60px rgba(var(--color-primary-rgb), 0.15), inset 0 0 50px rgba(var(--color-accent-rgb), 0.08);
    }

    footer > div:first-child::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle at 30% 20%, rgba(var(--color-primary-rgb), 0.08) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
        animation: footerGlow 8s infinite alternate;
    }

@keyframes footerGlow {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }

    100% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

footer ul li a {
    position: relative;
    display: inline-block;
    padding: 2px 0;
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

    footer ul li a::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 1px;
        background: var(--color-accent);
        transition: width 0.3s ease;
    }

    footer ul li a:hover {
        color: var(--color-accent) !important;
        transform: translateX(3px);
        text-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.5);
    }

        footer ul li a:hover::before {
            width: 100%;
            right: auto;
            left: 0;
        }

#scroll-top-btn {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: pulseBtn 2.5s infinite;
}

@keyframes pulseBtn {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.6);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(var(--color-primary-rgb), 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0);
    }
}

/* ========== Light Mode Overrides for Footer ========== */
.light-mode footer > div:first-child {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.05), inset 0 0 30px rgba(var(--color-primary-rgb), 0.03) !important;
}

    .light-mode footer > div:first-child:hover {
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.08), inset 0 0 50px rgba(var(--color-primary-rgb), 0.04) !important;
    }

.light-mode footer .text-white {
    color: var(--text-main) !important;
}

.light-mode footer .text-gray-400 {
    color: var(--text-muted) !important;
}

.light-mode footer .text-gray-300 {
    color: var(--text-secondary) !important;
}

.light-mode footer .text-gray-500 {
    color: var(--text-placeholder) !important;
}

.light-mode footer .bg-\[\#2563EB\] {
    background-color: var(--color-primary) !important;
}

.light-mode footer .shadow-\[\#2563EB\]\/30 {
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.3) !important;
}

.light-mode footer .bg-\[\#2563EB\]\/20,
.light-mode footer .bg-\[var\(--color-primary\)\]\/20 {
    background-color: rgba(var(--color-primary-rgb), 0.1) !important;
}

.light-mode footer .text-\[\#2563EB\] {
    color: var(--color-primary) !important;
}

.light-mode footer a[class*="hover:bg-gradient-to-br"]:hover {
    background-image: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary)) !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.4) !important;
}

.light-mode footer ul li a.text-gray-400 {
    color: var(--text-muted) !important;
}

.light-mode footer ul li a:hover {
    color: var(--color-accent) !important;
    text-shadow: 0 0 10px rgba(var(--color-accent-rgb), 0.5);
}

.light-mode footer .text-\[\#2563EB\] {
    color: var(--color-primary) !important;
}

.light-mode footer .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode #scroll-top-btn {
    background-color: rgba(var(--color-primary-rgb), 0.1) !important;
    color: var(--color-primary) !important;
}

    .light-mode #scroll-top-btn:hover {
        background-image: linear-gradient(to bottom right, var(--color-primary), var(--color-secondary)) !important;
        color: #ffffff !important;
    }

.light-mode footer > div:first-child::before {
    background: radial-gradient(circle at 30% 20%, rgba(var(--color-primary-rgb), 0.06) 0%, transparent 50%) !important;
}

/* ========== Servers Page Specific ========== */
#servers-hero {
    position: relative;
    overflow: hidden;
}

    #servers-hero::before {
        content: '';
        position: absolute;
        inset: -50px;
        background-image: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.1) 1px, transparent 1px);
        background-size: 30px 30px;
        animation: drift 20s infinite linear;
        pointer-events: none;
        z-index: 0;
    }

@keyframes drift {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(30px, 30px);
    }
}

.floating-server {
    animation: floatServer 6s ease-in-out infinite;
    filter: drop-shadow(0 0 60px rgba(var(--color-primary-rgb), 0.4));
    transition: filter 0.5s ease;
}

    .floating-server:hover {
        filter: drop-shadow(0 0 80px rgba(var(--color-primary-rgb), 0.7)) drop-shadow(0 0 20px var(--color-secondary));
    }

@keyframes floatServer {

    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }
}

.gradient-text {
    background-size: 200% 200%;
    animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {

    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.feature-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

    .feature-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        transition: all 0.4s ease;
        border-radius: 2px;
        transform: translateX(-50%);
    }

    .feature-card:hover::after {
        width: 80%;
    }

    .feature-card:nth-child(1):hover::after {
        background: var(--color-warning);
        box-shadow: 0 0 10px var(--color-warning);
    }

    .feature-card:nth-child(2):hover::after {
        background: var(--color-success);
        box-shadow: 0 0 10px var(--color-success);
    }

    .feature-card:nth-child(3):hover::after {
        background: var(--color-orange);
        box-shadow: 0 0 10px var(--color-orange);
    }

.feature-icon {
    transition: all 0.5s ease;
}

.feature-card:nth-child(1):hover .feature-icon {
    background: var(--color-warning);
    color: #000;
}

.feature-card:nth-child(2):hover .feature-icon {
    background: var(--color-success);
    color: #000;
}

.feature-card:nth-child(3):hover .feature-icon {
    background: var(--color-orange);
    color: #000;
}

/* ========== Light Mode Overrides for Servers Hero ========== */

.light-mode #servers-hero::before {
    background-image: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.06) 1px, transparent 1px);
}

.light-mode #servers-hero .text-white {
    color: var(--text-main) !important;
}

.light-mode #servers-hero .text-gray-400 {
    color: var(--text-muted) !important;
}

.light-mode #servers-hero .feature-card {
    background-color: rgba(var(--bg-primary-rgb), 0.7);
    border-color: rgba(0, 0, 0, 0.1);
}

    .light-mode #servers-hero .feature-card:hover {
        background-color: rgba(var(--bg-primary-rgb), 0.9);
    }

    .light-mode #servers-hero .feature-card .text-white {
        color: var(--text-main) !important;
    }

    .light-mode #servers-hero .feature-card .text-gray-400 {
        color: var(--text-muted) !important;
    }

    .light-mode #servers-hero .feature-card .feature-icon {
        background-color: rgba(var(--color-primary-rgb), 0.1) !important;
        color: var(--color-primary) !important;
    }

    .light-mode #servers-hero .feature-card:nth-child(1):hover .feature-icon {
        background: var(--color-warning) !important;
        color: #000 !important;
    }

    .light-mode #servers-hero .feature-card:nth-child(2):hover .feature-icon {
        background: var(--color-success) !important;
        color: #000 !important;
    }

    .light-mode #servers-hero .feature-card:nth-child(3):hover .feature-icon {
        background: var(--color-orange) !important;
        color: #000 !important;
    }

.light-mode #servers-hero img {
    filter: drop-shadow(0 0 20px rgba(var(--color-primary-rgb), 0.2));
}

/* Tab Section */

.tab-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    border: 1px solid var(--bg-glass-border);
    border-radius: 1rem;
    padding: 0.5rem;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    border-radius: .8rem;
    background: transparent;
    color: var(--text-light-muted);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    white-space: nowrap;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

    .tab-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--gradient-primary);
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: inherit;
        z-index: -1;
    }

    .tab-btn:hover {
        color: var(--text-main);
        border-color: rgba(var(--color-primary-rgb), 0.5);
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
    }

    .tab-btn.active {
        color: var(--text-main);
        background: var(--gradient-primary);
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.4);
    }

        .tab-btn.active:hover {
            box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.6);
        }

.pricing-card {
    position: relative;
    max-width: 350px;
    width: 100%;
    background: rgba(var(--bg-primary-rgb, 4, 10, 24), 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid var(--bg-glass-border);
    border-radius: 1.5rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    overflow: hidden;
}

    .pricing-card:hover {
        border-color: var(--color-primary);
        box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.2);
        transform: translateY(-5px);
    }

    .pricing-card.popular {
        border-color: var(--color-secondary);
        box-shadow: 0 0 20px rgba(var(--color-secondary-rgb), 0.15);
    }

.pricing-slider .owl-stage {
    display: flex;
}

.pricing-slider .owl-item {
    display: flex;
    align-items: stretch;
    margin-top: 10px;
    padding: 0;
}

@media (min-width: 1024px) {
    .pricing-slider .owl-item {
        padding: 0 10px;
    }
}

.pricing-slider .owl-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.pricing-slider .owl-dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.pricing-slider .owl-dot.active span {
    width: 24px;
    border-radius: 4px;
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.7);
}

.card-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 0.7rem;
    padding: 0.2rem 0.8rem;
    border-radius: 2rem;
    border: 1px solid;
}

.card-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1.5rem;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.2), rgba(var(--color-secondary-rgb), 0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-primary);
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
    margin: 1.5rem 0;
}

.price {
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-main);
    margin-top: 0.5rem;
}

    .price span {
        display: block;
        font-size: 0.7rem;
        color: var(--text-muted);
        margin-top: 0.2rem;
    }

.specs {
    width: 100%;
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

    .specs > div {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
    }

        .specs > div span:first-child {
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

            .specs > div span:first-child i {
                color: var(--color-primary);
                width: 1rem;
                text-align: center;
            }

        .specs > div span:last-child {
            color: var(--text-dim);
        }

.order-btn {
    width: 100%;
    margin-top: 1.5rem;
    padding: 0.8rem;
    text-align: center;
    background: var(--gradient-primary);
    color: var(--text-main);
    border-radius: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
}

    .order-btn:hover {
        box-shadow: 0 0 25px rgba(var(--color-primary-rgb), 0.5);
        transform: scale(1.02);
    }

.detail-link {
    margin-top: 1rem;
    color: var(--color-accent);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.3s ease;
}

    .detail-link:hover {
        gap: 0.6rem;
        color: var(--text-main);
        text-shadow: 0 0 10px var(--color-accent);
    }

.filter-sidebar {
    background: rgba(4, 10, 24, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid var(--bg-glass-border);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    position: sticky;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 1.5rem;
}

    .filter-header h4 {
        color: var(--text-main);
        font-weight: bold;
    }

    .filter-header i {
        color: var(--color-accent);
    }

.filter-section {
    margin-bottom: 1.5rem;
}

    .filter-section h5 {
        color: var(--text-muted);
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 0.8rem;
    }

.filter-radio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-radius: 0.8rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

    .filter-radio:hover {
        background: rgba(255, 255, 255, 0.03);
        border-color: var(--bg-glass-border);
    }

    .filter-radio.active {
        background: rgba(var(--color-primary-rgb), 0.15);
        border-color: var(--color-primary);
        color: var(--text-main);
        box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.2);
    }

    .filter-radio input[type="radio"] {
        accent-color: var(--color-primary);
        width: 1rem;
        height: 1rem;
    }

.os-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.os-btn {
    padding: 0.7rem 1rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bg-glass-border);
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .os-btn:hover {
        background: var(--bg-glass-hover);
        border-color: rgba(var(--color-primary-rgb), 0.5);
        color: var(--text-main);
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
    }

    .os-btn.active {
        background: var(--gradient-primary);
        border-color: transparent;
        color: var(--text-main);
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.4);
    }

/* ========== Light Mode Overrides for Pricing Section ========== */

.light-mode .tab-container {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.light-mode .pricing-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);
}

    .light-mode .pricing-card:hover {
        border-color: var(--color-primary);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08), 0 0 20px rgba(var(--color-primary-rgb), 0.15);
        background: #ffffff;
    }

    .light-mode .pricing-card.popular {
        border-color: var(--color-secondary);
        box-shadow: 0 0 20px rgba(var(--color-secondary-rgb), 0.1);
    }

.light-mode .specs {
    border-top-color: rgba(0, 0, 0, 0.08);
}

.light-mode .filter-sidebar {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.08);
}

.light-mode .filter-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.light-mode .filter-radio {
    color: var(--text-secondary);
}

    .light-mode .filter-radio:hover {
        background: rgba(0, 0, 0, 0.03);
        border-color: rgba(0, 0, 0, 0.1);
    }

    .light-mode .filter-radio.active {
        background: rgba(var(--color-primary-rgb), 0.1);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

.light-mode .os-btn {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-secondary);
    transition: all 200ms linear;
}

    .light-mode .os-btn.active {
        background: var(--gradient-primary);
        border-color: rgba(0, 0, 0, 0.08);
        color: #fff;
    }

    .light-mode .os-btn:hover {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(var(--color-primary-rgb), 0.4);
        color: var(--text-main);
    }

.light-mode .pricing-slider .owl-dot span {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.2);
}

.light-mode .pricing-slider .owl-dot.active span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.5);
}

.light-mode .order-btn {
    color: #ffffff;
}

    .light-mode .order-btn:hover {
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.4);
    }

.light-mode .detail-link {
    color: var(--color-accent);
}

    .light-mode .detail-link:hover {
        color: var(--color-primary);
        text-shadow: none;
    }

.light-mode .tab-pane.hidden .text-gray-400 {
    color: var(--text-muted);
}

/* ========== Services Page Specific ========== */
@keyframes pulse-slow {

    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes float {

    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(3deg);
    }
}

.animate-pulse-slow {
    animation: pulse-slow 6s infinite ease-in-out;
}

.animate-float {
    animation: float 8s infinite ease-in-out;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    filter: blur(1px);
    opacity: 0.3;
    animation: particleDrift linear infinite;
}

    .particle:nth-child(1) {
        width: 4px;
        height: 4px;
        top: 20%;
        left: 10%;
        animation-duration: 12s;
    }

    .particle:nth-child(2) {
        width: 6px;
        height: 6px;
        top: 70%;
        left: 80%;
        animation-duration: 18s;
    }

    .particle:nth-child(3) {
        width: 3px;
        height: 3px;
        top: 40%;
        left: 60%;
        animation-duration: 14s;
    }

    .particle:nth-child(4) {
        width: 5px;
        height: 5px;
        top: 85%;
        left: 25%;
        animation-duration: 20s;
    }

@keyframes particleDrift {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.2;
    }

    25% {
        transform: translate(30px, -40px) scale(1.5);
        opacity: 0.5;
    }

    50% {
        transform: translate(60px, 20px) scale(0.8);
        opacity: 0.3;
    }

    75% {
        transform: translate(-20px, -10px) scale(1.2);
        opacity: 0.6;
    }

    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.2;
    }
}

.service-feature-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.2rem;
    padding: 1rem;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    z-index: 1;
}

    .service-feature-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.08) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.4s;
        z-index: 0;
    }

    .service-feature-card:hover::before {
        opacity: 1;
    }

.hover-line {
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--glow-color, var(--color-primary)), transparent);
    transform: scaleX(0);
    transition: transform 0.5s ease;
    opacity: 0.8;
}

.service-feature-card:hover .hover-line {
    transform: scaleX(1);
}

.card-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.05), rgba(var(--color-secondary-rgb), 0.05));
    opacity: 0;
    transition: opacity 0.5s;
}

.service-feature-card:hover .card-bg {
    opacity: 1;
}

.icon-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    z-index: 2;
}

.service-feature-card:hover .icon-box {
    transform: scale(1.2) rotate(-10deg);
    box-shadow: 0 0 25px var(--glow-color, var(--color-primary));
}

.sub-text {
    font-size: 0.65rem;
    color: var(--text-dim);
    margin-top: 0.4rem;
    transition: all 0.4s;
    z-index: 1;
    position: relative;
}

.service-feature-card:hover .sub-text {
    color: var(--text-secondary);
    text-shadow: 0 0 8px var(--glow-color, var(--color-primary));
}

.service-feature-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 30px -5px var(--glow-color, var(--color-primary));
}

.service-feature-card[data-glow="yellow"] {
    --glow-color: var(--color-warning);
}

.service-feature-card[data-glow="green"] {
    --glow-color: var(--color-success);
}

.service-feature-card[data-glow="cyan"] {
    --glow-color: var(--color-accent);
}

.service-feature-card[data-glow="orange"] {
    --glow-color: var(--color-orange);
}

.service-feature-card[data-glow="cyan"]:hover .icon-box {
    box-shadow: 0 0 25px var(--glow-color);
    background: var(--glow-color);
}

.service-feature-card[data-glow="cyan"]:hover {
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 30px -5px var(--glow-color);
}

    .service-feature-card[data-glow="cyan"]:hover .hover-line {
        background: linear-gradient(90deg, transparent, var(--glow-color), transparent) !important;
    }

.badge-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(4, 10, 24, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid var(--bg-glass-border);
    border-radius: 0.8rem;
    padding: 0.5rem 0.7rem;
    transition: all 0.3s;
}

    .badge-item:hover {
        background: var(--bg-glass-hover);
        border-color: var(--glow-color, var(--color-primary));
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
        transform: translateY(-3px);
    }

.badge-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.badge-title {
    font-size: 0.65rem;
    font-weight: bold;
    color: var(--text-main);
    display: block;
}

.badge-desc {
    font-size: 0.55rem;
    color: var(--text-muted);
}

/* ========== Light Mode Overrides for Services Hero ========== */

.light-mode #services-hero .text-white {
    color: var(--text-main) !important;
}

.light-mode #services-hero h1.text-transparent {
    background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary)) !important;
}

.light-mode #services-hero .text-gray-400 {
    color: var(--text-muted) !important;
}

.light-mode #services-hero .bg-\[\#2563EB\] {
    background-color: var(--color-primary) !important;
    box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.3) !important;
}

.light-mode #services-hero .bg-white\/3 {
    background-color: rgba(var(--bg-primary-rgb), 0.7) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.light-mode #services-hero .hover\:bg-white\/10:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 0 20px rgba(var(--color-primary-rgb), 0.3) !important;
}

.light-mode #services-hero .group .text-white {
    color: var(--text-main) !important;
}

.light-mode #services-hero .group .text-gray-400 {
    color: var(--text-muted) !important;
}

.light-mode #services-hero .group .bg-green-500\/20 {
    background-color: rgba(var(--color-success-rgb), 0.15) !important;
}

.light-mode #services-hero .group .bg-purple-500\/20 {
    background-color: rgba(var(--color-secondary-rgb), 0.15) !important;
}

.light-mode #services-hero .group .bg-\[\#ebd125\]\/20 {
    background-color: rgba(var(--color-warning-rgb, 251, 191, 36), 0.15) !important;
}

.light-mode #services-hero .group:hover .group-hover\:bg-\[\#2563EB\] {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.light-mode #services-hero .group:hover .group-hover\:bg-\[\#ebd125\] {
    background-color: var(--color-warning) !important;
    color: #000000 !important;
}

.light-mode #services-hero img {
    filter: drop-shadow(0 0 20px rgba(var(--color-primary-rgb), 0.2));
}

.light-mode .badge-item {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.1);
}

    .light-mode .badge-item:hover {
        background: rgba(255, 255, 255, 0.95);
        border-color: var(--color-primary);
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
    }

.light-mode .badge-title {
    color: var(--text-main);
}

.light-mode .badge-desc {
    color: var(--text-muted);
}

.light-mode .particle {
    opacity: 0.2;
}

#products .glow-left-top {
    position: absolute;
    top: -10%;
    left: -5%;
    width: 400px;
    height: 400px;
    z-index: -1;
    background: radial-gradient(circle, rgba(var(--color-secondary-rgb), 0.10) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.card-neon {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.2rem;
    padding: 1.5rem 1.2rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

    .card-neon::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 80%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--glow-color, var(--color-primary)), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
    }

    .card-neon:hover::after {
        transform: scaleX(1);
    }

    .card-neon:hover {
        transform: translateY(-6px);
        border-color: rgba(255, 255, 255, 0.2);
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.6), 0 0 25px -5px var(--glow-color, var(--color-primary));
    }

.card-media {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.media-inner {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.15), rgba(var(--color-secondary-rgb), 0.15));
    font-size: 1.8rem;
    color: var(--glow-color, var(--color-primary));
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

    .media-inner img {
        width: 70%;
        height: 70%;
        object-fit: contain;
    }

.card-neon:hover .media-inner {
    background: var(--glow-color, var(--color-primary));
    color: var(--text-main);
    box-shadow: 0 0 25px var(--glow-color, var(--color-primary)), 0 0 50px rgba(var(--color-primary-rgb), 0.5);
    transform: scale(1.1) rotate(-5deg);
}

.card-neon h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    margin-bottom: 0.5rem;
}

.card-neon p {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .card-features li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.75rem;
        color: var(--text-secondary);
    }

        .card-features li i {
            color: var(--glow-color, var(--color-success));
            font-size: 0.75rem;
        }

.card-link {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .card-link i {
        font-size: 0.7rem;
        transition: transform 0.3s ease;
    }

.card-neon:hover .card-link {
    color: var(--text-main);
    gap: 0.7rem;
}

    .card-neon:hover .card-link i {
        transform: translateX(-3px);
    }

.services-card-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.7rem;
    border-radius: 2rem;
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.6);
    z-index: 5;
    letter-spacing: 0.5px;
}

.card-neon[data-glow="blue"] {
    --glow-color: var(--color-primary);
}

.card-neon[data-glow="purple"] {
    --glow-color: var(--color-secondary);
}

.card-neon[data-glow="cyan"] {
    --glow-color: var(--color-accent);
}

.card-neon[data-glow="orange"] {
    --glow-color: var(--color-orange);
}

.card-neon[data-glow="green"] {
    --glow-color: var(--color-success);
}

.card-neon[data-glow="pink"] {
    --glow-color: var(--color-pink);
}

/* ==============================================
   Services Slider Dots
   ============================================== */
.services-slider .owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
}

    .services-slider .owl-dots .owl-dot span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.15);
        transition: all 0.3s ease-in-out;
        display: block;
    }

.services-slider .owl-stage-outer {
    padding-top: 30px;
}

.services-slider .owl-dots .owl-dot.active span {
    background: var(--color-primary);
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.6);
    width: 24px;
    border-radius: 8px;
}

/* ========== Light Mode Overrides for Products Cards ========== */

.light-mode .card-neon {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

    .light-mode .card-neon:hover {
        background: rgba(0, 0, 0, 0.04);
        border-color: var(--glow-color, var(--color-primary));
        box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.08), 0 0 20px -5px var(--glow-color, var(--color-primary));
    }

.light-mode .card-features {
    border-top-color: rgba(0, 0, 0, 0.08);
}

.light-mode .services-slider .owl-dots .owl-dot span {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.2);
}

.light-mode .services-slider .owl-dot.active span {
    background: var(--color-primary);
}

/* ==============================================
   Comparison & Features Panels
   ============================================== */
.comparison-panel,
.features-panel {
    background: rgba(var(--bg-primary-rgb, 4, 10, 24), 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    padding: 1.8rem;
    box-shadow: var(--shadow-card);
    transition: all 0.4s ease;
}

    .comparison-panel:hover,
    .features-panel:hover {
        border-color: rgba(var(--color-primary-rgb), 0.3);
        box-shadow: 0 0 35px rgba(var(--color-primary-rgb), 0.1);
    }

    .comparison-panel table th {
        transition: all 0.3s ease;
    }

.comparison-row {
    transition: all 0.25s ease;
}

    .comparison-row:hover {
        background: rgba(255, 255, 255, 0.03);
    }

    .comparison-row td:first-child {
        position: relative;
    }

    .comparison-row:hover td:first-child::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 50%;
        background: var(--color-primary);
        box-shadow: 0 0 6px var(--color-primary);
        border-radius: 1px;
    }

.comparison-panel th[data-column="vps"] {
    background: rgba(var(--color-primary-rgb), 0.2) !important;
}

.comparison-panel th[data-column="dedicated"] {
    background: rgba(var(--color-secondary-rgb), 0.2) !important;
}

.comparison-panel th[data-column="host"] {
    background: rgba(var(--color-accent-rgb), 0.2) !important;
}

.comparison-panel th[data-column="colo"] {
    background: rgba(249, 115, 22, 0.2) !important;
    /* نارنجی ثابت */
}

.comparison-panel th[data-column="cdn"] {
    background: rgba(var(--color-success-rgb, 16, 185, 129), 0.2) !important;
}

.comparison-panel th[data-column="storage"] {
    background: rgba(var(--color-pink-rgb, 236, 72, 153), 0.2) !important;
}

/* ==============================================
   Why Us Cards
   ============================================== */
.why-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.2rem;
    padding: 1.5rem 1rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
    min-height: 190px;
}

    .why-card:hover {
        transform: translateY(-6px);
        border-color: var(--glow-color, var(--color-primary));
    }

    .why-card .hover-line {
        position: absolute;
        bottom: 0;
        left: 20%;
        width: 60%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--glow-color, var(--color-primary)), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
        opacity: 0.8;
    }

    .why-card:hover .hover-line {
        transform: scaleX(1);
    }

.why-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: var(--glow-color, var(--color-primary));
    font-size: 1.6rem;
    margin-bottom: 1rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.2);
}

.why-card:hover .why-icon {
    background: var(--glow-color, var(--color-primary));
    color: var(--text-main);
    box-shadow: 0 0 20px var(--glow-color, var(--color-primary)), 0 0 40px rgba(var(--color-primary-rgb), 0.5);
    transform: scale(1.1) rotate(-5deg);
}

.why-card h4 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.4rem;
}

.why-card p {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.why-card[data-glow="blue"] {
    --glow-color: var(--color-primary);
}

.why-card[data-glow="green"] {
    --glow-color: var(--color-success);
}

.why-card[data-glow="yellow"] {
    --glow-color: var(--color-warning);
}

.why-card[data-glow="cyan"] {
    --glow-color: var(--color-accent);
}

.why-card[data-glow="purple"] {
    --glow-color: var(--color-secondary);
}

/* Why Carousel Dots */
.why-carousel .owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.why-carousel .owl-dot span {
    display: block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.why-carousel .owl-dot:hover span {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.5);
}

.why-carousel .owl-dot.active span {
    width: 1.8rem;
    border-radius: 1rem;
    background: var(--gradient-primary);
    border-color: transparent;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.7), 0 0 30px rgba(var(--color-secondary-rgb), 0.4);
}

@media (min-width: 1024px) {
    .why-carousel .owl-dots {
        display: none;
    }
}

/* ========== Light Mode Overrides for Comparison & Why Us Panels ========== */

.light-mode .comparison-panel,
.light-mode .features-panel {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

    .light-mode .comparison-panel:hover,
    .light-mode .features-panel:hover {
        border-color: rgba(var(--color-primary-rgb), 0.3) !important;
        box-shadow: 0 0 35px rgba(0, 0, 0, 0.05) !important;
    }

    .light-mode .comparison-panel .text-white,
    .light-mode .features-panel .text-white {
        color: var(--text-main) !important;
    }

    .light-mode .comparison-panel .text-gray-300,
    .light-mode .features-panel .text-gray-300 {
        color: var(--text-secondary) !important;
    }

    .light-mode .comparison-panel .text-gray-400,
    .light-mode .features-panel .text-gray-400 {
        color: var(--text-muted) !important;
    }

    .light-mode .comparison-panel .text-gray-600 {
        color: var(--text-placeholder) !important;
    }

    .light-mode .comparison-panel a[class*="bg-white/5"] {
        background: rgba(0, 0, 0, 0.03) !important;
        border-color: rgba(0, 0, 0, 0.1) !important;
        color: var(--text-secondary) !important;
    }

        .light-mode .comparison-panel a[class*="bg-white/5"]:hover {
            background: rgba(0, 0, 0, 0.06) !important;
            border-color: var(--color-primary) !important;
            color: var(--text-main) !important;
        }

    .light-mode .comparison-panel .divide-white\/5 > * {
        border-color: rgba(0, 0, 0, 0.08) !important;
    }

    .light-mode .comparison-panel .border-white\/5 {
        border-color: rgba(0, 0, 0, 0.08) !important;
    }

.light-mode .comparison-row:hover {
    background: rgba(0, 0, 0, 0.03) !important;
}

    .light-mode .comparison-row:hover td:first-child::after {
        background: var(--color-primary) !important;
        box-shadow: 0 0 6px var(--color-primary) !important;
    }

.light-mode .why-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .why-card:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: var(--glow-color, var(--color-primary)) !important;
        box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.08) !important;
    }

.light-mode .why-carousel .owl-dot span {
    background: rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

.light-mode .why-carousel .owl-dot.active span {
    background: var(--gradient-primary) !important;
    border-color: transparent !important;
}

.light-mode .cta-btn-primary {
    background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary)) !important;
    color: #ffffff !important;
}

    .light-mode .cta-btn-primary:hover {
        box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.4) !important;
    }

.light-mode .cta-btn-secondary {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text-secondary) !important;
}

    .light-mode .cta-btn-secondary:hover {
        background-color: rgba(0, 0, 0, 0.06) !important;
        border-color: var(--color-primary) !important;
        color: var(--text-main) !important;
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.15) !important;
    }

/* ==============================================
   Datacenter Panel
   ============================================== */

/* ========== Light Mode Overrides for Datacenter Hero ========== */
.light-mode .dc-top-badge {
    border: 1px solid #aeaec3;
    color: #011fd3;
    transform: all 200ms linear;
}

    .light-mode .dc-top-badge:hover {
        transform: translateY(1.1);
    }

.light-mode .dc-hero-badge {
    background-color: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--color-accent);
}

.light-mode .dc-hero-title {
    color: var(--text-main);
}

.light-mode .dc-hero-subtitle {
    background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary));
}

.light-mode .dc-hero-desc {
    color: var(--text-muted);
}

.light-mode .dc-hero-card {
    background-color: rgba(var(--bg-primary-rgb), 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

    .light-mode .dc-hero-card:hover {
        background-color: rgba(0, 0, 0, 0.04);
        border-color: var(--color-primary);
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
    }

.light-mode .dc-hero-icon-box {
    background-color: rgba(var(--color-primary-rgb), 0.15);
    color: var(--color-primary);
}

.light-mode .dc-hero-card:hover .dc-hero-icon-box {
    background-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.4);
}

.light-mode .dc-hero-card-title {
    color: var(--text-main);
}

.light-mode .dc-hero-card:hover .dc-hero-card-title {
    color: var(--color-accent);
}

.light-mode .dc-hero-card-subtitle {
    color: var(--text-muted);
}

.datacenter-panel {
    background: rgba(4, 10, 24, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: all 0.4s ease;
}

    .datacenter-panel:hover {
        border-color: rgba(var(--color-primary-rgb), 0.3);
        box-shadow: 0 0 35px rgba(var(--color-primary-rgb), 0.1);
    }

.panel-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--text-main);
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.datacenter-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-radius: 1rem;
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

    .datacenter-item::before {
        content: '';
        position: absolute;
        right: 0;
        top: 25%;
        height: 50%;
        width: 3px;
        background: var(--color-primary);
        border-radius: 0 2px 2px 0;
        transform: scaleY(0);
        transition: transform 0.3s ease;
        box-shadow: 0 0 10px var(--color-primary);
    }

    .datacenter-item.active::before {
        transform: scaleY(1);
    }

    .datacenter-item:hover {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(var(--color-primary-rgb), 0.3);
        box-shadow: inset 0 0 20px rgba(var(--color-primary-rgb), 0.05), 0 4px 12px rgba(0, 0, 0, 0.4);
        transform: translateX(-4px);
    }

    .datacenter-item.active {
        background: rgba(var(--color-primary-rgb), 0.1);
        border-color: rgba(var(--color-primary-rgb), 0.5);
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3), inset 0 0 15px rgba(var(--color-primary-rgb), 0.05);
    }

        .datacenter-item.active:hover {
            background: rgba(var(--color-primary-rgb), 0.15);
            border-color: var(--color-primary);
            box-shadow: 0 0 25px rgba(var(--color-primary-rgb), 0.5), inset 0 0 20px rgba(var(--color-primary-rgb), 0.1);
        }

.flag-icon {
    width: 28px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    filter: brightness(0.95);
}

.datacenter-item:hover .flag-icon,
.datacenter-item.active .flag-icon {
    filter: brightness(1.1);
    box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.5);
    transform: scale(1.05);
}

.status-badge {
    font-size: 0.65rem;
    color: var(--color-success);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--color-success);
    animation: pulse-green 2s infinite;
    display: inline-block;
}

@keyframes pulse-green {

    0%, 100% {
        box-shadow: 0 0 5px var(--color-success);
    }

    50% {
        box-shadow: 0 0 12px var(--color-success);
    }
}

.latency {
    font-size: 0.65rem;
    color: var(--text-muted);
    min-width: 30px;
    text-align: right;
}

.map-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--bg-glass);
    border: 1px solid var(--bg-glass-border-hover);
    color: var(--text-secondary);
    padding: 0.7rem;
    border-radius: 0.8rem;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .map-btn:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(var(--color-primary-rgb), 0.5);
        color: var(--text-main);
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
    }

.city-image {
    position: relative;
    width: 100%;
    height: 6rem;
    border-radius: 0.8rem;
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Stat Cards */
.stat-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

    .stat-card:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(var(--color-primary-rgb), 0.4);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
        transform: translateY(-2px);
    }

.stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--text-main);
    line-height: 1.2;
}

    .stat-value small {
        font-size: 0.7rem;
        font-weight: normal;
        color: var(--text-muted);
        margin-left: 0.2rem;
    }

.stat-value {
    font-size: 1.6rem;
}

.stat-chart {
    margin-top: 0.5rem;
    width: 100%;
    height: 2rem;
}

    .stat-chart svg {
        width: 100%;
        height: 100%;
    }

.order-btn {
    width: 100%;
    display: block;
    text-align: center;
    background: var(--gradient-primary);
    color: var(--text-main);
    padding: 0.8rem;
    border-radius: 1rem;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .order-btn:hover {
        box-shadow: 0 0 25px rgba(var(--color-primary-rgb), 0.6);
        transform: scale(1.02);
    }

.datacenter-image {
    position: relative;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
    background: radial-gradient(circle at center, rgba(var(--color-primary-rgb), 0.3), transparent 70%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.spec-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.8rem;
    padding: 0.7rem 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 0.3s ease;
}

    .spec-card:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(var(--color-primary-rgb), 0.5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
        transform: translateY(-3px);
    }

.spec-icon {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
    transition: all 0.3s ease;
}

.spec-title {
    font-size: 0.55rem;
    font-weight: bold;
    color: var(--text-main);
    margin-bottom: 0.2rem;
}

.spec-desc {
    font-size: 0.45rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ========== Light Mode Overrides for Datacenter List ========== */
.light-mode .datacenter-panel {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .panel-title {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .datacenter-item:hover {
    background: rgba(0, 0, 0, 0.03) !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.light-mode .datacenter-item.active {
    background: rgba(var(--color-primary-rgb), 0.08) !important;
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.15), inset 0 0 15px rgba(var(--color-primary-rgb), 0.03) !important;
}

.light-mode .flag-icon {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2) !important;
}

.light-mode .city-image {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.light-mode .stat-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .stat-card:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(var(--color-primary-rgb), 0.4) !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    }

.light-mode .text-\[\#00D4FF\] {
    color: var(--color-accent) !important;
}

.light-mode .order-btn {
    color: #ffffff !important;
}

.light-mode .datacenter-image {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.light-mode .spec-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .spec-card:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
    }

.light-mode .map-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

    .light-mode .map-btn:hover {
        background: rgba(0, 0, 0, 0.06) !important;
        border-color: var(--color-primary) !important;
        color: var(--text-main) !important;
    }

/* ==============================================
   Network Panel
   ============================================== */
.network-panel {
    background: rgba(4, 10, 24, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(var(--color-primary-rgb), 0.05);
    overflow: hidden;
    transition: all 0.4s ease;
}

    .network-panel:hover {
        border-color: rgba(var(--color-primary-rgb), 0.2);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6), 0 0 50px rgba(var(--color-primary-rgb), 0.1);
    }

.network-divider {
    width: 1px;
    background: linear-gradient(180deg, transparent 10%, rgba(255, 255, 255, 0.15) 50%, transparent 90%);
    align-self: stretch;
}

.chart-section {
    flex: 1;
    padding: 1.25rem;
    padding-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.chart-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .chart-title::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color-accent);
        box-shadow: 0 0 10px var(--color-accent);
        animation: pulse-dot 2s infinite;
    }

@keyframes pulse-dot {

    0%, 100% {
        box-shadow: 0 0 5px var(--color-accent);
    }

    50% {
        box-shadow: 0 0 15px var(--color-accent), 0 0 25px rgba(var(--color-accent-rgb), 0.4);
    }
}

.chart-select {
    background: var(--bg-glass);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
    font-size: 0.65rem;
    border-radius: 0.5rem;
    padding: 0.3rem 0.6rem;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left 0.4rem center;
    background-size: 1rem;
    padding-left: 2rem;
}

    .chart-select:hover {
        background: var(--bg-glass-hover);
        border-color: rgba(var(--color-primary-rgb), 0.4);
        color: var(--text-main);
    }

    .chart-select:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
    }

    .chart-select option {
        background: var(--bg-primary);
        color: var(--text-main);
    }

.chart-container {
    width: 100%;
    height: 180px;
    border-radius: 0.75rem;
    position: relative;
}

@media (min-width: 1024px) {
    .chart-container {
        height: 220px;
    }
}

/* Stats Section */
.stats-section {
    flex: 1;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    align-content: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.7rem 0.8rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

    .stat-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 15%;
        width: 70%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
    }

    .stat-item:hover {
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(var(--color-primary-rgb), 0.5);
        box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.6), 0 0 20px -3px rgba(var(--color-primary-rgb), 0.3);
        transform: translateY(-2px);
    }

        .stat-item:hover::after {
            transform: scaleX(1);
        }

.stat-change .text-muted {
    color: var(--text-dim);
    font-size: .85rem;
}

.badge-up {
    background: rgba(var(--color-success-rgb, 16, 185, 129), 0.2);
    color: var(--color-success);
    padding: 0.1rem 0.45rem;
    border-radius: 0.3rem;
    font-weight: 600;
    font-size: .8rem;
}

.text-muted {
    color: var(--text-dim);
}

@media (max-width: 640px) {
    .stats-section {
        padding: 0.8rem;
        gap: 0.5rem;
    }

    .stat-item {
        padding: 0.6rem;
    }

    .stat-value {
        font-size: 1.2rem;
    }
}

.map-section {
    flex: 1;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.map-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(var(--color-primary-rgb), 0.15) 0%, transparent 70%);
    animation: map-pulse 4s ease-in-out infinite;
}

@keyframes map-pulse {

    0%, 100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.map-image {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .map-image img {
        width: 100%;
        height: auto;
        transition: all 0.5s ease;
    }

@keyframes blink-dot {

    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.5);
    }
}

@media (max-width: 1023px) {
    .chart-container {
        height: 200px;
    }

    .stats-section {
        gap: 0.5rem;
    }

    .stat-item {
        padding: 0.4rem 0.5rem;
    }

    .stat-value {
        font-size: 1.1rem;
    }
}

/* ========== Light Mode Overrides for Network Panel ========== */
.light-mode .network-panel {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1), 0 0 40px rgba(var(--color-primary-rgb), 0.03) !important;
}

    .light-mode .network-panel:hover {
        border-color: rgba(var(--color-primary-rgb), 0.2) !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 50px rgba(var(--color-primary-rgb), 0.06) !important;
    }

.light-mode .network-divider {
    background: linear-gradient(180deg, transparent 10%, rgba(0, 0, 0, 0.12) 50%, transparent 90%) !important;
}

.light-mode .stat-item {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .stat-item:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(var(--color-primary-rgb), 0.4) !important;
        box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.08), 0 0 20px -3px rgba(var(--color-primary-rgb), 0.15) !important;
    }

.light-mode .map-glow {
    background: radial-gradient(circle at center, rgba(var(--color-primary-rgb), 0.08) 0%, transparent 70%) !important;
}

.light-mode .chart-select option {
    background: #ffffff !important;
    color: var(--text-main) !important;
}

/* ==============================================
   Blog Page Specific
   ============================================== */
.blog-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-image-glow {
    position: absolute;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.25) 0%, transparent 70%);
    filter: blur(40px);
    z-index: 0;
    animation: pulse-glow 4s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%, 100% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.floating-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 6px 2px rgba(var(--color-primary-rgb), 0.8), 0 0 12px 4px rgba(var(--color-accent-rgb), 0.4);
    animation: float-particle linear infinite;
    opacity: 0;
}

.p1 {
    width: 6px;
    height: 6px;
    top: 15%;
    left: 10%;
    animation-duration: 8s;
    animation-delay: 0s;
    z-index: 100;
}

.p2 {
    width: 4px;
    height: 4px;
    top: 75%;
    left: 20%;
    animation-duration: 10s;
    animation-delay: 1.5s;
    box-shadow: 0 0 6px 2px rgba(var(--color-secondary-rgb), 0.8), 0 0 10px 3px rgba(var(--color-primary-rgb), 0.5);
    z-index: 100;
}

.p3 {
    width: 8px;
    height: 8px;
    top: 30%;
    right: 15%;
    animation-duration: 12s;
    animation-delay: 3s;
    box-shadow: 0 0 8px 3px rgba(var(--color-accent-rgb), 0.9), 0 0 14px 5px rgba(var(--color-primary-rgb), 0.5);
    z-index: 100;
}

.p4 {
    width: 3px;
    height: 3px;
    top: 80%;
    right: 25%;
    animation-duration: 9s;
    animation-delay: 4.5s;
    z-index: 100;
}

.p5 {
    width: 5px;
    height: 5px;
    top: 50%;
    left: 5%;
    animation-duration: 11s;
    animation-delay: 2s;
    box-shadow: 0 0 5px 2px rgba(var(--color-secondary-rgb), 0.7), 0 0 10px 3px rgba(var(--color-accent-rgb), 0.4);
    z-index: 100;
}

.p6 {
    width: 7px;
    height: 7px;
    top: 20%;
    left: 60%;
    animation-duration: 13s;
    animation-delay: 5s;
    box-shadow: 0 0 7px 3px rgba(var(--color-primary-rgb), 0.8), 0 0 12px 4px rgba(var(--color-secondary-rgb), 0.4);
    z-index: 100;
}

.p7 {
    width: 4px;
    height: 4px;
    top: 65%;
    right: 10%;
    animation-duration: 7s;
    animation-delay: 0.5s;
    z-index: 100;
}

.p8 {
    width: 6px;
    height: 6px;
    top: 40%;
    left: 80%;
    animation-duration: 14s;
    animation-delay: 6s;
    box-shadow: 0 0 6px 2px rgba(var(--color-accent-rgb), 0.7), 0 0 10px 3px rgba(var(--color-primary-rgb), 0.4);
    z-index: 100;
}

@keyframes float-particle {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    30% {
        transform: translateY(-25px) translateX(10px) scale(1.4);
        opacity: 0.9;
    }

    60% {
        transform: translateY(-15px) translateX(-8px) scale(0.8);
        opacity: 0.6;
    }

    90% {
        transform: translateY(5px) translateX(5px) scale(1.2);
        opacity: 0.3;
    }

    100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
}

.blog-image-wrapper img {
    position: relative;
    z-index: 2;
}

.blog-title {
    text-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.3);
    transition: text-shadow 0.3s ease;
}

    .blog-title:hover {
        text-shadow: 0 0 50px rgba(var(--color-primary-rgb), 0.5);
    }

.blog-subtitle {
    animation: gradientShift 4s ease-in-out infinite;
    background-size: 200% 200%;
}

@keyframes gradientShift {

    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.blog-search {
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

    .blog-search:hover {
        border-color: rgba(var(--color-primary-rgb), 0.4);
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.15);
        background: rgba(255, 255, 255, 0.08);
    }

    .blog-search:focus-within {
        border-color: var(--color-primary);
        box-shadow: 0 0 25px rgba(var(--color-primary-rgb), 0.3), inset 0 0 10px rgba(var(--color-primary-rgb), 0.05);
        background: rgba(var(--color-primary-rgb), 0.05);
    }

    .blog-search input::placeholder {
        transition: color 0.3s;
    }

    .blog-search:focus-within input::placeholder {
        color: var(--color-accent);
    }

.blog-tag {
    display: inline-flex;
    align-items: center;
    background: rgba(var(--color-primary-rgb), 0.1);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    color: var(--color-accent);
    border-radius: 2rem;
    padding: 0.3rem 1.2rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    backdrop-filter: blur(4px);
    position: relative;
    overflow: hidden;
}

    .blog-tag::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--gradient-primary);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
        border-radius: inherit;
    }

    .blog-tag:hover {
        color: #fff;
        border-color: transparent;
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.5);
        transform: translateY(-2px);
    }

        .blog-tag:hover::before {
            opacity: 1;
        }

.blog-trending {
    transition: color 0.3s ease;
}

    .blog-trending:hover {
        color: var(--text-main);
        text-shadow: 0 0 8px var(--color-secondary);
    }

    .blog-trending i {
        transition: transform 0.3s ease;
    }

    .blog-trending:hover i {
        transform: rotate(20deg) scale(1.2);
    }

.blog-hero-image-placeholder {
    transition: all 0.4s ease;
}

    .blog-hero-image-placeholder:hover {
        border-color: rgba(var(--color-primary-rgb), 0.5) !important;
        background: rgba(255, 255, 255, 0.03) !important;
    }

/* ========== Light Mode Overrides for Blog Hero ========== */

.light-mode #blog-hero .text-white {
    color: var(--text-main) !important;
}

.light-mode #blog-hero .text-gray-400 {
    color: var(--text-muted) !important;
}

.light-mode #blog-hero .text-gray-500 {
    color: var(--text-placeholder) !important;
}

.light-mode .blog-title {
    text-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.15) !important;
}

.light-mode .blog-image-glow {
    background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.12) 0%, transparent 70%);
    opacity: 0.6;
}

.light-mode .particle {
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 6px 2px rgba(var(--color-primary-rgb), 0.4), 0 0 12px 4px rgba(var(--color-accent-rgb), 0.2);
}

.light-mode .blog-search {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

    .light-mode .blog-search input {
        color: var(--text-main) !important;
    }

        .light-mode .blog-search input::placeholder {
            color: var(--text-placeholder) !important;
        }

    .light-mode .blog-search:focus-within {
        background: rgba(var(--color-primary-rgb), 0.03) !important;
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.15) !important;
    }

.light-mode .blog-tag:hover {
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.3);
}

.light-mode #blog-hero .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.light-mode .blog-trending:hover {
    text-shadow: 0 0 8px var(--color-secondary);
}

.blog-tabs-container {
    position: relative;
    background: rgba(4, 10, 24, 0.6);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    padding: 0.75rem;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

    .blog-tabs-container:hover {
        border-color: rgba(var(--color-primary-rgb), 0.2);
        box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.08);
    }

.blog-tab {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    font-weight: 500;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    backdrop-filter: blur(4px);
    overflow: hidden;
    margin: 5px;
}

    .blog-tab i {
        transition: color 0.3s ease, transform 0.3s ease;
    }

    .blog-tab.active {
        background: var(--gradient-primary);
        border-color: transparent;
        color: var(--text-main);
        font-weight: 700;
    }

        .blog-tab.active i {
            color: #fff !important;
        }

    .blog-tab:not(.active):hover {
        background: var(--bg-glass-hover);
        border-color: rgba(var(--color-primary-rgb), 0.4);
        color: var(--text-main);
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
        transform: translateY(-2px);
    }

        .blog-tab:not(.active):hover i {
            transform: scale(1.1);
            color: var(--text-main);
        }

    .blog-tab:not(.active)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 15%;
        width: 70%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
    }

    .blog-tab:not(.active):hover::after {
        transform: scaleX(1);
    }

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.fade-edge-right {
    position: relative;
}

    .fade-edge-right::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 60px;
        height: 100%;
        background: linear-gradient(to left, rgba(var(--bg-primary-rgb), 0.9), transparent);
        pointer-events: none;
        z-index: 10;
        opacity: 0.9;
        border-radius: 0 2rem 2rem 0;
    }

/* ========== Light Mode Overrides for Blog Tabs ========== */

.light-mode .blog-tabs-container {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

    .light-mode .blog-tabs-container:hover {
        border-color: rgba(var(--color-primary-rgb), 0.2) !important;
        box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.05) !important;
    }

.light-mode .blog-tab:not(.active) {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .blog-tab:not(.active):hover {
        background: rgba(0, 0, 0, 0.06) !important;
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.15) !important;
    }

.light-mode .fade-edge-right::after {
    background: linear-gradient(to left, rgba(var(--bg-primary-rgb), 0.9), transparent) !important;
}

.sidebar-card {
    background: rgba(var(--bg-primary-rgb), 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    padding: 1.5rem;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

    .sidebar-card:hover {
        border-color: rgba(var(--color-primary-rgb), 0.2);
        box-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.1);
    }

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sidebar-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.8rem;
    border-radius: 0.8rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    position: relative;
    background: transparent;
}

    .category-item::before {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%) scale(0);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--color-accent);
        box-shadow: 0 0 8px var(--color-accent);
        transition: transform 0.3s ease;
    }

    .category-item.active {
        background: rgba(var(--color-primary-rgb), 0.15);
        color: var(--text-main);
        font-weight: 600;
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
    }

        .category-item.active::before {
            right: -4px;
            transform: translateY(-50%) scale(1);
        }

    .category-item:not(.active):hover {
        background: var(--bg-glass-hover);
        color: var(--text-main);
        transform: translateX(-4px);
    }

        .category-item:not(.active):hover::before {
            right: -4px;
            transform: translateY(-50%) scale(1);
            background: var(--color-secondary);
            box-shadow: 0 0 8px var(--color-secondary);
        }

.category-count {
    background: rgba(var(--color-primary-rgb), 0.2);
    color: var(--color-accent);
    font-size: 0.7rem;
    font-weight: 700;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.category-item.active .category-count {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.5);
}

.category-item:not(.active):hover .category-count {
    background: rgba(var(--color-secondary-rgb), 0.4);
    color: var(--text-main);
}

.popular-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.popular-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem;
    border-radius: 0.8rem;
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
}

    .popular-item:hover {
        background: var(--bg-glass-hover);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transform: translateX(-3px);
    }

.popular-rank {
    position: relative;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.8rem;
    flex-shrink: 0;
    background: rgba(var(--color-primary-rgb), 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

    .popular-rank i {
        font-size: 1.2rem;
        color: var(--color-accent);
        transition: color 0.3s;
    }

.rank-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.6);
}

.rank-1 .rank-badge {
    background: var(--color-warning);
    box-shadow: 0 0 10px var(--color-warning);
}

.rank-2 .rank-badge {
    background: var(--text-muted);
    box-shadow: 0 0 8px var(--text-muted);
}

.rank-3 .rank-badge {
    background: var(--color-orange);
    box-shadow: 0 0 8px var(--color-orange);
}

.rank-4 .rank-badge {
    background: #6B7280;
    box-shadow: 0 0 6px #6B7280;
}

.sidebar-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.7rem 1rem;
    background: var(--bg-glass);
    border: 1px solid var(--bg-glass-border);
    border-radius: 0.8rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .sidebar-view-all:hover {
        background: rgba(var(--color-primary-rgb), 0.15);
        border-color: rgba(var(--color-primary-rgb), 0.5);
        color: var(--text-main);
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.2);
    }

    .sidebar-view-all i {
        transition: transform 0.3s ease;
    }

    .sidebar-view-all:hover i {
        transform: translateX(-3px);
    }

.popular-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.popular-item:hover .popular-text {
    color: var(--text-main);
}

.popular-item:hover .popular-rank i {
    color: var(--text-main);
}

.popular-item:hover .popular-rank {
    background: var(--gradient-primary);
    border-color: transparent;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.4);
}

.blog-card {
    background: rgba(var(--bg-primary-rgb), 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.5rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

    .blog-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 80%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
        opacity: 0.8;
    }

    .blog-card:hover::after {
        transform: scaleX(1);
    }

    .blog-card:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(var(--color-primary-rgb), 0.5);
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6), 0 0 30px -5px rgba(var(--color-primary-rgb), 0.3);
        transform: translateY(-4px);
    }

.blog-card-image {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.15), rgba(var(--color-secondary-rgb), 0.15));
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s ease;
    position: relative;
}

.blog-card:hover .blog-card-image {
    border-color: rgba(var(--color-primary-rgb), 0.5);
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

.blog-card-badge {
    background: rgba(var(--color-primary-rgb), 0.2);
    color: var(--color-accent);
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    transition: all 0.3s ease;
}

.blog-card:hover .blog-card-badge {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.4);
}

.blog-card-title {
    transition: color 0.3s ease;
}

.blog-card:hover .blog-card-title {
    color: var(--color-accent);
}

.blog-card-meta {
    color: var(--text-dim);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.blog-grid-card {
    background: rgba(var(--bg-primary-rgb), 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .blog-grid-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 80%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
        opacity: 0.8;
        z-index: 2;
    }

    .blog-grid-card:hover::after {
        transform: scaleX(1);
    }

    .blog-grid-card:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(var(--color-primary-rgb), 0.5);
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6), 0 0 30px -5px rgba(var(--color-primary-rgb), 0.3);
        transform: translateY(-4px);
    }

    .blog-grid-card .blog-card-badge {
        display: inline-flex;
        background: rgba(var(--color-primary-rgb), 0.2);
        color: var(--color-accent);
        border: 1px solid rgba(var(--color-primary-rgb), 0.3);
        border-radius: 2rem;
        padding: 0.3rem 0.9rem;
        font-size: 0.65rem;
        font-weight: 500;
        margin-bottom: 0.75rem;
        transition: all 0.3s ease;
    }

    .blog-grid-card:hover .blog-card-badge {
        background: var(--gradient-primary);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.4);
    }

.blog-grid-title {
    font-weight: 700;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.blog-grid-card:hover .blog-grid-title {
    color: var(--color-accent);
}

.blog-grid-desc {
    color: var(--text-muted);
    line-height: 1.7;
}

.blog-grid-image {
    height: 10rem;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.15), rgba(var(--color-accent-rgb), 0.15));
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s ease;
    position: relative;
}

.blog-grid-card:hover .blog-grid-image {
    border-color: rgba(var(--color-primary-rgb), 0.5);
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
}

.blog-grid-image i {
    transition: all 0.4s ease;
}

.blog-grid-card:hover .blog-grid-image i {
    opacity: 1;
    color: var(--color-accent);
    transform: scale(1.1);
}

.blog-grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-grid-card:hover .blog-grid-image img {
    transform: scale(1.05);
}

.blog-grid-footer {
    color: var(--text-dim);
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease;
}

.blog-grid-card:hover .blog-grid-footer {
    background: rgba(var(--color-primary-rgb), 0.05);
}

.blog-author-avatar {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    transition: all 0.3s ease;
}

.blog-grid-card:hover .blog-author-avatar {
    background: var(--color-primary);
    color: var(--text-main);
    box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.5);
}

.blog-mini-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.5rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
    overflow: hidden;
}

    .blog-mini-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 80%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
        opacity: 0.8;
    }

    .blog-mini-card:hover::after {
        transform: scaleX(1);
    }

    .blog-mini-card:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(var(--color-primary-rgb), 0.5);
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6), 0 0 30px -5px rgba(var(--color-primary-rgb), 0.3);
        transform: translateY(-4px);
    }

.blog-mini-badge {
    background: rgba(var(--color-primary-rgb), 0.2);
    color: var(--color-accent);
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    border-radius: 2rem;
    padding: 0.2rem 0.9rem;
    font-size: 0.65rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(3px);
}

.blog-mini-card:hover .blog-mini-badge {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.5);
}

.blog-mini-image {
    width: 100%;
    height: 8rem;
    border-radius: 0.8rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.15), rgba(var(--color-accent-rgb), 0.15));
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.4s ease;
    position: relative;
}

.blog-mini-card:hover .blog-mini-image {
    border-color: rgba(var(--color-primary-rgb), 0.5);
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
}

.blog-mini-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-mini-card:hover .blog-mini-image img {
    transform: scale(1.05);
}

.blog-mini-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.5;
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.blog-mini-card:hover .blog-mini-title {
    color: var(--color-accent);
}

.blog-mini-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-dim);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 0.8rem;
}

.blog-mini-link {
    display: inline-flex;
    color: var(--text-dim);
    transition: color 0.3s ease, gap 0.3s ease;
    gap: 0.2rem;
}

.blog-mini-card:hover .blog-mini-link {
    color: var(--color-accent);
    gap: 0.5rem;
}

.blog-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--bg-glass);
    border: 1px solid var(--bg-glass-border);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.6rem 1rem;
    border-radius: 0.8rem;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    text-decoration: none;
}

    .blog-mini-btn i {
        transition: transform 0.3s ease;
    }

.blog-mini-card:hover .blog-mini-btn {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--text-main);
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.5);
}

    .blog-mini-card:hover .blog-mini-btn i {
        transform: translateX(4px);
    }

/* ========== Light Mode Overrides for Blog Content ========== */

.light-mode .sidebar-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05) !important;
}

.light-mode .sidebar-header {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .sidebar-view-all {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

    .light-mode .sidebar-view-all:hover {
        background: rgba(var(--color-primary-rgb), 0.1) !important;
        border-color: var(--color-primary) !important;
        color: var(--color-primary) !important;
        box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.15) !important;
    }

.light-mode .blog-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .blog-card:hover {
        background: #ffffff !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 0 20px rgba(var(--color-primary-rgb), 0.15) !important;
    }

.light-mode .blog-card-image {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .blog-card-meta {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .blog-grid-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .blog-grid-card:hover {
        background: #ffffff !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 0 20px rgba(var(--color-primary-rgb), 0.15) !important;
    }

.light-mode .blog-grid-footer {
    background: rgba(0, 0, 0, 0.02) !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .blog-grid-image {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .blog-mini-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .blog-mini-card:hover {
        background: #ffffff !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 0 20px rgba(var(--color-primary-rgb), 0.15) !important;
    }

.light-mode .blog-mini-image {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .blog-mini-meta {
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .blog-mini-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.light-mode .blog-mini-slider .owl-dot span {
    background: rgba(0, 0, 0, 0.15) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

.light-mode .blog-mini-slider .owl-dot.active span {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.light-mode .blog-content-pane .text-gray-400 {
    color: var(--text-muted) !important;
}

/* About Us Page Styles */
.about-title {
    text-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.3);
}

.about-highlight {
    background-size: 200% 200%;
    animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {

    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.about-stat-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    padding: 1.2rem 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

    .about-stat-card .hover-line {
        position: absolute;
        bottom: 0;
        left: 15%;
        width: 70%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--glow-color, var(--color-primary)), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
        opacity: 0.8;
    }

    .about-stat-card:hover .hover-line {
        transform: scaleX(1);
    }

    .about-stat-card:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(var(--color-primary-rgb), 0.4);
        box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.5), 0 0 20px -5px var(--glow-color, var(--color-primary));
        transform: translateY(-5px);
    }

.about-stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--glow-color, var(--color-primary));
    margin-bottom: 0.5rem;
    transition: all 0.4s ease;
}

.about-stat-card:hover .about-stat-icon {
    background: var(--glow-color, var(--color-primary));
    color: #fff;
    box-shadow: 0 0 20px var(--glow-color, var(--color-primary));
    transform: scale(1.1) rotate(-5deg);
}

.about-stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}

.about-stat-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.about-stat-card[data-glow="blue"] {
    --glow-color: var(--color-primary);
}

.about-stat-card[data-glow="purple"] {
    --glow-color: var(--color-secondary);
}

.about-stat-card[data-glow="cyan"] {
    --glow-color: var(--color-accent);
}

.about-stat-card[data-glow="green"] {
    --glow-color: var(--color-success);
}

.about-image-wrapper {
    position: relative;
}

    .about-image-wrapper img {
        width: 100%;
        height: auto;
        object-fit: contain;
        transition: filter 0.3s ease;
    }

        .about-image-wrapper img:hover {
            filter: drop-shadow(0 0 30px rgba(var(--color-primary-rgb), 0.5));
        }

/* ========== Light Mode Overrides for About Hero ========== */

.light-mode #about .bg-\[\#2563EB\]\/5 {
    background-color: rgba(var(--color-primary-rgb), 0.04) !important;
}

.light-mode #about .text-white {
    color: var(--text-main) !important;
}

.light-mode #about .text-gray-400 {
    color: var(--text-muted) !important;
}

.light-mode #about .text-gray-500 {
    color: var(--text-placeholder) !important;
}

.light-mode #about .text-\[\#00D4FF\] {
    color: var(--color-accent) !important;
}

.light-mode .about-title {
    text-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.15) !important;
}

.light-mode .about-stat-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .about-stat-card:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: var(--glow-color, var(--color-primary)) !important;
        box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.08), 0 0 15px -5px var(--glow-color, var(--color-primary)) !important;
    }

/* ========== Light Mode Overrides for Story Section ========== */

.light-mode .story-main-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .timeline-line {
    background-image: linear-gradient(to right, var(--color-primary), var(--color-secondary), var(--color-accent)) !important;
}

.light-mode .timeline-dot {
    background-color: var(--color-primary) !important;
    box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.3) !important;
}

.light-mode .timeline-year,
.light-mode .timeline-title {
    color: var(--text-main) !important;
}

.light-mode .timeline-desc {
    color: var(--text-muted) !important;
}

.light-mode .story-heading {
    color: var(--text-main) !important;
}

.light-mode .story-heading-dot {
    background-color: var(--color-secondary) !important;
    box-shadow: 0 0 10px rgba(var(--color-secondary-rgb), 0.3) !important;
}

.light-mode .story-text {
    color: var(--text-muted) !important;
}

.value-card {
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.2rem;
    padding: 1.5rem 0.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

    .value-card .hover-line {
        position: absolute;
        bottom: 0;
        left: 15%;
        width: 70%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--glow-color, var(--color-secondary)), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
        opacity: 0.8;
    }

    .value-card:hover {
        transform: translateY(-6px);
        border-color: var(--glow-color, var(--color-secondary));
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.6), 0 0 25px -5px var(--glow-color, var(--color-secondary));
    }

        .value-card:hover .hover-line {
            transform: scaleX(1);
        }

.value-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(var(--color-secondary-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--glow-color, var(--color-secondary));
    margin-bottom: 1rem;
    transition: all 0.4s ease;
}

.value-card:hover .value-icon {
    background: var(--glow-color, var(--color-secondary));
    color: var(--text-main);
    box-shadow: 0 0 25px var(--glow-color, var(--color-secondary));
    transform: scale(1.1) rotate(-5deg);
}

.value-card h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.4rem;
}

.value-card p {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.value-card[data-glow="purple"] {
    --glow-color: var(--color-secondary);
}

.value-card[data-glow="blue"] {
    --glow-color: var(--color-primary);
}

.value-card[data-glow="cyan"] {
    --glow-color: var(--color-accent);
}

.infra-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.8rem 1rem;
    border-radius: 0.8rem;
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

    .infra-item:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(var(--color-success-rgb), 0.4);
        box-shadow: 0 0 15px rgba(var(--color-success-rgb), 0.1);
        transform: translateX(-4px);
    }

    .infra-item i {
        font-size: 1.1rem;
        filter: drop-shadow(0 0 4px rgba(var(--color-success-rgb), 0.6));
    }

    .infra-item span {
        font-size: 0.8rem;
        color: var(--text-secondary);
        font-weight: 500;
    }

.neon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--gradient-primary);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.7rem 1.5rem;
    border-radius: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.3);
}

    .neon-btn:hover {
        box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.6);
        transform: scale(1.03);
    }

    .neon-btn i {
        transition: transform 0.3s ease;
    }

    .neon-btn:hover i {
        transform: translateX(-3px);
    }

/* ========== Light Mode Overrides for Values & Infrastructure ========== */

.light-mode .hex-panel {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .value-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .value-card:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: var(--glow-color, var(--color-secondary)) !important;
        box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.08), 0 0 25px -5px var(--glow-color, var(--color-secondary)) !important;
    }

.light-mode .value-icon {
    background: rgba(var(--color-secondary-rgb), 0.08) !important;
}

.light-mode .infra-item {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .infra-item:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(var(--color-success-rgb), 0.4) !important;
        box-shadow: 0 0 15px rgba(var(--color-success-rgb), 0.08) !important;
    }

    .light-mode .infra-item i {
        filter: drop-shadow(0 0 4px rgba(var(--color-success-rgb), 0.4)) !important;
    }

.light-mode .neon-btn {
    color: #ffffff !important;
}

    .light-mode .neon-btn:hover {
        box-shadow: 0 0 25px rgba(var(--color-primary-rgb), 0.4) !important;
    }

.team-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.2rem;
    padding: 1rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

    .team-card .hover-line {
        position: absolute;
        bottom: 0;
        left: 15%;
        width: 70%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--glow-color, var(--color-primary)), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
        opacity: 0.8;
    }

    .team-card:hover .hover-line {
        transform: scaleX(1);
    }

    .team-card:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--glow-color, var(--color-primary));
        box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.6), 0 0 20px -5px var(--glow-color, var(--color-primary));
        transform: translateY(-4px);
    }

.team-avatar {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

    .team-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

.team-card:hover .team-avatar {
    border-color: var(--glow-color, var(--color-primary));
    box-shadow: 0 0 20px var(--glow-color, var(--color-primary));
}

    .team-card:hover .team-avatar img {
        transform: scale(1.1);
    }

.team-info {
    display: flex;
    flex-direction: column;
    text-align: right;
    flex: 1;
}

.team-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.2rem;
}

.team-role {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.team-socials {
    display: flex;
    gap: 0.5rem;
}

.social-icon {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-primary-rgb), 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--glow-color, var(--color-primary));
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

    .social-icon:hover {
        background: var(--glow-color, var(--color-primary));
        color: var(--text-main);
        border-color: transparent;
        box-shadow: 0 0 12px var(--glow-color, var(--color-primary));
        transform: translateY(-2px);
    }

.team-card[data-glow="blue"] {
    --glow-color: var(--color-primary);
}

.team-card[data-glow="purple"] {
    --glow-color: var(--color-secondary);
}

.team-card[data-glow="cyan"] {
    --glow-color: var(--color-accent);
}

.team-card[data-glow="green"] {
    --glow-color: var(--color-success);
}

.team-card[data-glow="orange"] {
    --glow-color: var(--color-orange);
}

/* ========== Light Mode Overrides for Team Section ========== */

.light-mode .team-main-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .team-heading {
    color: var(--text-main) !important;
}

.light-mode .team-heading-dot {
    background-color: var(--color-secondary) !important;
    box-shadow: 0 0 10px rgba(var(--color-secondary-rgb), 0.3) !important;
}

.light-mode .team-subtitle {
    color: var(--text-muted) !important;
}

.light-mode .team-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .team-card:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: var(--glow-color, var(--color-primary)) !important;
        box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.08), 0 0 15px -5px var(--glow-color, var(--color-primary)) !important;
    }

.light-mode .team-avatar {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.light-mode .team-name {
    color: var(--text-main) !important;
}

.light-mode .team-role {
    color: var(--text-muted) !important;
}

.light-mode .social-icon {
    background: rgba(var(--color-primary-rgb), 0.08) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--color-primary) !important;
}

    .light-mode .social-icon:hover {
        background: var(--color-primary) !important;
        color: #ffffff !important;
        box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.3) !important;
    }

/* Contact Page Styles */
.contact-title {
    text-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.3);
}

.contact-highlight {
    background-size: 200% 200%;
    animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {

    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.contact-feature-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.2rem;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

    .contact-feature-card::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 15%;
        width: 70%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--glow-color, var(--color-secondary)), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
        opacity: 0.8;
    }

    .contact-feature-card:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--glow-color, var(--color-secondary));
        box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.5), 0 0 20px -5px var(--glow-color, var(--color-secondary));
        transform: translateY(-4px);
    }

        .contact-feature-card:hover::after {
            transform: scaleX(1);
        }

.feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    background: rgba(var(--color-secondary-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--glow-color, var(--color-secondary));
    transition: all 0.4s ease;
}

.contact-feature-card:hover .feature-icon {
    background: var(--glow-color, var(--color-secondary));
    color: var(--text-main);
    box-shadow: 0 0 20px var(--glow-color, var(--color-secondary));
    transform: scale(1.1) rotate(-5deg);
}

.contact-feature-card[data-glow="purple"] {
    --glow-color: var(--color-secondary);
}

.contact-feature-card[data-glow="orange"] {
    --glow-color: var(--color-orange);
}

.contact-image-wrapper {
    position: relative;
}

    .contact-image-wrapper img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

/* ========== Light Mode Overrides for Contact Hero ========== */

.light-mode #contact-hero .text-white {
    color: var(--text-main) !important;
}

.light-mode #contact-hero .text-gray-400 {
    color: var(--text-muted) !important;
}

.light-mode #contact-hero .text-gray-500 {
    color: var(--text-placeholder) !important;
}

.light-mode #contact-hero .text-\[\#00D4FF\] {
    color: var(--color-accent) !important;
}

.light-mode .contact-title {
    text-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.15) !important;
}

.light-mode .contact-feature-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .contact-feature-card:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: var(--glow-color, var(--color-secondary)) !important;
        box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.08), 0 0 20px -5px var(--glow-color, var(--color-secondary)) !important;
    }

.light-mode .feature-icon {
    background: rgba(var(--color-secondary-rgb), 0.08) !important;
}

.light-mode .contact-image-wrapper img {
    filter: drop-shadow(0 0 10px rgba(var(--color-primary-rgb), 0.1));
}

.contact-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.5rem;
    padding: 1.8rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

    .contact-card .hover-line {
        position: absolute;
        bottom: 0;
        left: 15%;
        width: 70%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--glow-color, var(--color-primary)), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
    }

    .contact-card:hover .hover-line {
        transform: scaleX(1);
    }

    .contact-card:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: var(--glow-color, var(--color-primary));
        box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.6), 0 0 25px -5px var(--glow-color, var(--color-primary));
        transform: translateY(-5px);
    }

.contact-card-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--glow-color, var(--color-primary));
    font-size: 1.6rem;
    margin-bottom: 1rem;
    transition: all 0.4s ease;
}

.contact-card:hover .contact-card-icon {
    background: var(--glow-color, var(--color-primary));
    color: #fff;
    box-shadow: 0 0 25px var(--glow-color, var(--color-primary));
    transform: scale(1.1) rotate(-5deg);
}

.contact-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.contact-card p {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--bg-glass);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-accent);
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    border-radius: 0.8rem;
    transition: all 0.3s ease;
    text-decoration: none;
    width: 100%;
    margin-top: auto;
}

    .contact-card-btn i {
        font-size: 0.7rem;
        transition: transform 0.3s ease;
    }

.contact-card:hover .contact-card-btn {
    background: var(--gradient-primary);
    border-color: transparent;
    color: var(--text-main);
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.4);
}

    .contact-card:hover .contact-card-btn i {
        transform: translateX(-3px);
    }

.contact-card[data-glow="blue"] {
    --glow-color: var(--color-primary);
}

.contact-card[data-glow="purple"] {
    --glow-color: var(--color-secondary);
}

.contact-card[data-glow="cyan"] {
    --glow-color: var(--color-accent);
}

.contact-card[data-glow="yellow"] {
    --glow-color: var(--color-warning);
}

.contact-card[data-glow="orange"] {
    --glow-color: var(--color-orange);
}

/* ========== Light Mode Overrides for Contact Cards ========== */

.light-mode #contact-info .bg-\[\#040A18\]\/70 {
    background-color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .contact-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .contact-card:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: var(--glow-color, var(--color-primary)) !important;
        box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.08), 0 0 20px -5px var(--glow-color, var(--color-primary)) !important;
    }

.light-mode .contact-card-btn {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--color-accent) !important;
}

.light-mode .contact-card:hover .contact-card-btn {
    background: var(--gradient-primary) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.4) !important;
}

.contact-form-card,
.schedule-card,
.chat-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.5rem;
    padding: 1.8rem;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

    .contact-form-card:hover,
    .schedule-card:hover,
    .chat-card:hover {
        border-color: rgba(var(--color-primary-rgb), 0.4);
        box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.6), 0 0 25px -5px rgba(var(--color-primary-rgb), 0.2);
        background: rgba(255, 255, 255, 0.05);
    }

.form-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    margin-bottom: 0.25rem;
}

.form-subtitle {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 1.5rem;
}

.form-input,
.form-textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.8rem;
    padding: 0.75rem 1rem;
    color: var(--text-main);
    font-size: 0.85rem;
    outline: none;
    transition: all 0.3s ease;
}

    .form-input::placeholder,
    .form-textarea::placeholder {
        color: var(--text-placeholder);
    }

    .form-input:focus,
    .form-textarea:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.25);
        background: rgba(var(--color-primary-rgb), 0.05);
    }

.form-textarea {
    resize: none;
}

.neon-submit-btn {
    margin-top: auto;
    width: 100%;
    background: var(--gradient-primary);
    color: var(--text-main);
    font-weight: 700;
    padding: 0.8rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.3);
}

    .neon-submit-btn:hover {
        box-shadow: 0 0 35px rgba(var(--color-primary-rgb), 0.6);
        transform: scale(1.02) translateY(-2px);
    }

.schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

    .schedule-header h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-main);
    }

.schedule-list {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}

.schedule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

    .schedule-item:last-child {
        border-bottom: none;
    }

.day-name {
    flex: 1;
    font-weight: 500;
}

.time-value {
    min-width: 90px;
    text-align: right;
    margin-right: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
    font-weight: 500;
}

.status-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
    flex-shrink: 0;
}

    .status-dot.green {
        background: var(--color-success);
        color: var(--color-success);
    }

    .status-dot.yellow {
        background: var(--color-warning);
        color: var(--color-warning);
    }

    .status-dot.red {
        background: var(--color-danger);
        color: var(--color-danger);
    }

.ticket-support-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(var(--color-primary-rgb), 0.08);
    border: 1px solid rgba(var(--color-primary-rgb), 0.2);
    border-radius: 0.8rem;
    padding: 0.9rem 1rem;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

    .ticket-support-banner:hover {
        background: rgba(var(--color-primary-rgb), 0.12);
        border-color: rgba(var(--color-primary-rgb), 0.4);
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.15);
    }

    .ticket-support-banner .title {
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 0.15rem;
    }

    .ticket-support-banner .desc {
        font-size: 0.7rem;
        color: var(--text-muted);
    }

    .ticket-support-banner:hover i {
        color: var(--color-accent);
    }

.banner-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(var(--color-primary-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ticket-support-banner:hover .banner-icon {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.5);
}

.chat-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.25rem;
}

.chat-subtitle {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.chat-image-box {
    width: 10rem;
    height: 10rem;
    border-radius: 1.5rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.15), rgba(var(--color-secondary-rgb), 0.15));
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 25px rgba(var(--color-primary-rgb), 0.25);
    transition: all 0.4s ease;
}

    .chat-image-box:hover {
        border-color: var(--color-primary);
        box-shadow: 0 0 40px rgba(var(--color-primary-rgb), 0.5);
        transform: scale(1.03);
    }

.chat-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.chat-image-box:hover .chat-image {
    transform: scale(1.05);
}

.chat-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(var(--color-primary-rgb), 0.3), transparent 70%);
}

.neon-chat-btn {
    width: 100%;
    background: var(--gradient-primary);
    color: var(--text-main);
    font-weight: 700;
    padding: 0.8rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.3);
    margin-top: auto;
}

    .neon-chat-btn:hover {
        box-shadow: 0 0 35px rgba(var(--color-primary-rgb), 0.6);
        transform: scale(1.02) translateY(-2px);
    }

/* ========== Light Mode Overrides for Contact Form ========== */

.light-mode .contact-form-card,
.light-mode .schedule-card,
.light-mode .chat-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .contact-form-card:hover,
    .light-mode .schedule-card:hover,
    .light-mode .chat-card:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(var(--color-primary-rgb), 0.4) !important;
        box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.1), 0 0 20px -5px rgba(var(--color-primary-rgb), 0.15) !important;
    }

.light-mode .form-input,
.light-mode .form-textarea {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text-main) !important;
}

    .light-mode .form-input::placeholder,
    .light-mode .form-textarea::placeholder {
        color: var(--text-placeholder) !important;
    }

    .light-mode .form-input:focus,
    .light-mode .form-textarea:focus {
        background: rgba(var(--color-primary-rgb), 0.03) !important;
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.15) !important;
    }

.light-mode .neon-submit-btn,
.light-mode .neon-chat-btn {
    color: #ffffff !important;
}

    .light-mode .neon-submit-btn:hover,
    .light-mode .neon-chat-btn:hover {
        box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.4) !important;
    }

.light-mode .schedule-list {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

.light-mode .schedule-header {
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .schedule-item {
    border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

.light-mode .ticket-support-banner {
    background: rgba(var(--color-primary-rgb), 0.05) !important;
    border-color: rgba(var(--color-primary-rgb), 0.15) !important;
}

    .light-mode .ticket-support-banner:hover {
        background: rgba(var(--color-primary-rgb), 0.08) !important;
        border-color: rgba(var(--color-primary-rgb), 0.3) !important;
        box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.1) !important;
    }

.light-mode .chat-image-box {
    background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.08), rgba(var(--color-secondary-rgb), 0.08)) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0 25px rgba(var(--color-primary-rgb), 0.1) !important;
}

    .light-mode .chat-image-box:hover {
        box-shadow: 0 0 35px rgba(var(--color-primary-rgb), 0.25) !important;
    }

.office-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1.5rem;
    padding: 1.5rem;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow: hidden;
}

    .office-card .hover-line {
        position: absolute;
        bottom: 0;
        left: 15%;
        width: 70%;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
        transform: scaleX(0);
        transition: transform 0.4s ease;
    }

    .office-card:hover .hover-line {
        transform: scaleX(1);
    }

    .office-card:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(var(--color-primary-rgb), 0.5);
        box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.7), 0 0 25px -5px var(--color-primary);
        transform: translateY(-6px);
    }

.office-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.office-flag {
    width: 32px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.office-card:hover .office-flag {
    box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.6);
    transform: scale(1.1);
}

.office-header h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.3;
}

.office-type {
    font-size: 0.65rem;
    color: var(--color-accent);
    font-weight: 500;
}

.office-address {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1rem;
    flex: 1;
}

.office-phone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.8rem;
    padding: 0.7rem 1rem;
    margin-bottom: 0.8rem;
    transition: all 0.3s ease;
}

    .office-phone span {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
    }

    .office-phone i {
        color: var(--color-primary);
        font-size: 0.9rem;
    }

.office-card:hover .office-phone {
    border-color: rgba(var(--color-primary-rgb), 0.4);
    background: rgba(var(--color-primary-rgb), 0.1);
}

.office-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(var(--color-primary-rgb), 0.15);
    border: 1px solid rgba(var(--color-primary-rgb), 0.3);
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.7rem;
    border-radius: 0.8rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

    .office-btn i {
        transition: transform 0.3s ease;
    }

.office-card:hover .office-btn {
    background: var(--gradient-primary);
    border-color: transparent;
    box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.5);
    color: #fff;
}

    .office-card:hover .office-btn i {
        transform: translateX(-3px);
    }

/* Light Mode Overrides for Office Cards */
.light-mode .office-card {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

    .light-mode .office-card:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        border-color: rgba(var(--color-primary-rgb), 0.5) !important;
        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.1), 0 0 20px -5px var(--color-primary) !important;
    }

.light-mode .office-phone {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.light-mode .office-card:hover .office-phone {
    background: rgba(var(--color-primary-rgb), 0.08) !important;
    border-color: rgba(var(--color-primary-rgb), 0.4) !important;
}



.faq-item {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 1.2rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

    .faq-item:hover {
        border-color: rgba(var(--color-primary-rgb), 0.4);
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.1);
    }

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    transition: background 0.3s ease;
    user-select: none;
}

    .faq-question:hover {
        background: rgba(255, 255, 255, 0.05);
    }

.faq-item.active .faq-question {
    background: rgba(var(--color-primary-rgb), 0.1);
}

.faq-icon {
    font-size: 0.9rem;
    color: var(--color-accent);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.faq-item.active .faq-answer {
    max-height: 300px;
}

.faq-answer p {
    padding: .5rem 1.5rem 1.2rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin: 0;
}

/* ========== Light Mode Overrides for FAQ Section ========== */

.light-mode .faq-item {
    background: rgba(0, 0, 0, 0.02) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}

    .light-mode .faq-item:hover {
        border-color: rgba(var(--color-primary-rgb), 0.4) !important;
        box-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.08) !important;
    }

.light-mode .faq-question:hover {
    background: rgba(0, 0, 0, 0.04) !important;
}

.light-mode .faq-item.active .faq-question {
    background: rgba(var(--color-primary-rgb), 0.08) !important;
}

.light-mode .faq-header-dot {
    background-color: var(--color-secondary) !important;
    box-shadow: 0 0 10px rgba(var(--color-secondary-rgb), 0.3) !important;
}

.light-mode #faq .text-white {
    color: var(--text-main) !important;
}

.light-mode #faq .text-gray-400 {
    color: var(--text-muted) !important;
}

.light-mode #faq .bg-\[\#2563EB\]\/5,
.light-mode #faq .bg-\[\#7B61FF\]\/5 {
    opacity: 0.3;
}

.newsletter-panel {
    background: repeating-linear-gradient(to right, transparent, transparent 30px, rgba(var(--color-primary-rgb), 0.05) 30px, rgba(var(--color-primary-rgb), 0.05) 31px);
}

.hex-panel {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='none' stroke='%232563EB' stroke-opacity='0.08' stroke-width='1' d='M14 0 L28 7.5 L28 22.5 L14 30 L0 22.5 L0 7.5 Z'/%3E%3C/svg%3E");
    background-size: 28px 49px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 0.8rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}

    .dropdown-item:hover {
        background: rgba(var(--color-primary-rgb), 0.2);
        color: var(--text-main);
        box-shadow: 0 0 10px rgba(var(--color-primary-rgb), 0.3);
        transform: translateX(-4px);
    }

.dropdown-parent:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    pointer-events: none;
}

.dropdown-parent:hover .dropdown-menu {
    pointer-events: auto;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    width: 100%;
    height: 12px;
    background: transparent;
}

#reading-progress {
    transition: width 0.1s linear;
}

.prose h2 {
    position: relative;
    padding-bottom: 0.5rem;
}

    .prose h2::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 60px;
        height: 3px;
        background: linear-gradient(to left, var(--color-primary), var(--color-secondary));
        border-radius: 2px;
    }

.popular-thumb-wrapper {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

.popular-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.popular-item:hover .popular-thumb {
    transform: scale(1.1);
}

.popular-item:hover .popular-rank {
    border-color: rgba(var(--color-primary-rgb), 0.6);
    box-shadow: 0 0 15px rgba(var(--color-primary-rgb), 0.4);
}

/* ========== Light Mode Overrides for Blog Single Page ========== */

.light-mode article a.bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--text-secondary) !important;
}

    .light-mode article a.bg-white\/5:hover {
        background-color: rgba(var(--color-primary-rgb), 0.1) !important;
        border-color: var(--color-primary) !important;
        color: var(--color-accent) !important;
        box-shadow: 0 0 12px rgba(var(--color-primary-rgb), 0.3) !important;
    }

.light-mode .server-order-btn {
    color: white !important;
}

.light-mode .customizable-server-btn {
    color: white !important;
}

.contact-img-hero {
    position: relative;
    top: -30px;
}