/* ==========================================================================
   UWOSKI HOST — Dark Blue Neon 3D Global Theme
   ========================================================================== */

/* ── 1. GLOBAL COLOR TOKEN OVERRIDES ── */
:root {
    --neon:        #00c8ff;
    --neon-dim:    rgba(0, 200, 255, 0.18);
    --neon-glow:   0 0 8px #00c8ff, 0 0 20px rgba(0, 200, 255, 0.5);
    --neon-glow-lg:0 0 12px #00c8ff, 0 0 35px rgba(0, 200, 255, 0.6);
    --bg-base:     #03050f;
    --bg-panel:    #080d1e;
    --bg-card:     #0b1228;
    --bg-card2:    #0e1630;
    --border-neon: 1px solid rgba(0, 200, 255, 0.18);
    --text-main:   #d4e8ff;
    --text-muted-n:rgba(180, 210, 255, 0.6);
    --heading: 210 100% 88%;
    --body:    210 60%  72%;
    --light-h: 218; --light-s: 30%; --light-l: 10%;
    --dark:    218 60% 5%;
    --border:  218 40% 18%;
}

/* ── 2. BODY & BACKGROUND ── */
body {
    background: radial-gradient(ellipse at 20% 10%, #03081a 0%, #010308 100%) !important;
    color: var(--text-main) !important;
    min-height: 100vh;
}

/* Animated star-field particle grid */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 10% 15%, rgba(0,200,255,0.25) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 60%, rgba(0,200,255,0.15) 0%, transparent 100%),
        radial-gradient(1px 1px at 55% 25%, rgba(0,180,255,0.2)  0%, transparent 100%),
        radial-gradient(1px 1px at 75% 80%, rgba(0,200,255,0.18) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 40%, rgba(0,200,255,0.12) 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    animation: starDrift 30s linear infinite alternate;
}
@keyframes starDrift {
    0%   { background-position: 0 0; }
    100% { background-position: 80px 60px; }
}

/* Scanline overlay */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 200, 255, 0.012) 3px,
        rgba(0, 200, 255, 0.012) 4px
    );
    pointer-events: none;
    z-index: 0;
}

/* ── 3. PRELOADER ── */
.preloader {
    background: #010308 !important;
}
.preloader .spinner {
    border-color: rgba(0,200,255,0.15) !important;
    border-top-color: var(--neon) !important;
    box-shadow: var(--neon-glow) !important;
}

/* ── 4. HEADER / NAVBAR ── */
.header, .header.bg--dark {
    background: linear-gradient(180deg, rgba(3,8,25,0.98) 0%, rgba(5,12,32,0.95) 100%) !important;
    border-bottom: 1px solid rgba(0,200,255,0.14) !important;
    box-shadow: 0 2px 30px rgba(0,200,255,0.08) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    z-index: 1000;
}

/* Nav links */
.menu li a {
    color: rgba(190, 225, 255, 0.85) !important;
    font-weight: 500;
    letter-spacing: 0.3px;
    position: relative;
    transition: color 0.25s, text-shadow 0.25s !important;
}
.menu li a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0; right: 0;
    height: 2px;
    background: var(--neon);
    box-shadow: var(--neon-glow);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
}
.menu li a:hover, .menu li a.active {
    color: var(--neon) !important;
    text-shadow: var(--neon-glow);
}
.menu li a:hover::after, .menu li a.active::after {
    transform: scaleX(1);
}

/* Dropdown submenu */
.menu .sub-menu {
    background: rgba(5,12,32,0.98) !important;
    border: var(--border-neon) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 15px rgba(0,200,255,0.1) !important;
    border-radius: 8px !important;
}
.menu .sub-menu li a {
    color: rgba(180,215,255,0.75) !important;
    border-bottom: 1px solid rgba(0,200,255,0.06) !important;
}
.menu .sub-menu li a:hover {
    color: var(--neon) !important;
    background: rgba(0,200,255,0.05) !important;
}

/* ── 5. BUTTONS — Neon Glow ── */
.btn--base, .cmn--btn {
    background: linear-gradient(135deg, #004c8a 0%, #0066bb 50%, #0083e8 100%) !important;
    border: 1px solid var(--neon) !important;
    color: #fff !important;
    box-shadow: 0 0 10px rgba(0,200,255,0.35), inset 0 1px 0 rgba(255,255,255,0.08) !important;
    border-radius: 6px !important;
    text-shadow: 0 0 6px rgba(0,200,255,0.5);
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}
.btn--base::before, .cmn--btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,200,255,0.15), transparent);
    transition: left 0.4s ease;
}
.btn--base:hover::before, .cmn--btn:hover::before { left: 100%; }
.btn--base:hover, .cmn--btn:hover {
    background: linear-gradient(135deg, #0066bb 0%, #0083e8 50%, #00aaff 100%) !important;
    box-shadow: var(--neon-glow-lg), 0 4px 20px rgba(0,100,200,0.4) !important;
    transform: translateY(-2px);
    color: #fff !important;
}

.btn--base-outline {
    border: 1px solid var(--neon) !important;
    color: var(--neon) !important;
    background: transparent !important;
    box-shadow: inset 0 0 8px rgba(0,200,255,0.06), 0 0 8px rgba(0,200,255,0.12) !important;
}
.btn--base-outline:hover {
    background: rgba(0,200,255,0.1) !important;
    box-shadow: var(--neon-glow) !important;
    color: var(--neon) !important;
}

/* Generic dark btn */
.btn--dark {
    background: rgba(8,15,35,0.9) !important;
    border: var(--border-neon) !important;
    color: var(--text-main) !important;
}
.btn--dark:hover {
    background: rgba(0,200,255,0.08) !important;
    border-color: var(--neon) !important;
    color: var(--neon) !important;
}

/* ── 6. CARDS ── */
.card {
    background: var(--bg-card) !important;
    border: var(--border-neon) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,200,255,0.04) !important;
    border-radius: 12px !important;
    color: var(--text-main) !important;
    transition: transform 0.35s cubic-bezier(0.165,0.84,0.44,1), box-shadow 0.35s ease !important;
}
.card:hover {
    transform: translateY(-6px) rotateX(2deg) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,0.6), 0 0 20px rgba(0,200,255,0.15) !important;
    border-color: rgba(0,200,255,0.35) !important;
}
.card-header {
    background: rgba(0,200,255,0.04) !important;
    border-bottom: var(--border-neon) !important;
    color: var(--neon) !important;
    font-weight: 600;
}
.card-footer {
    background: rgba(0,0,30,0.5) !important;
    border-top: var(--border-neon) !important;
}
.card-body {
    color: var(--text-main) !important;
}

/* Dashboard info card */
.bg-dark-two, .bg--dark-two {
    background: linear-gradient(135deg, #081228, #040a1a) !important;
    color: var(--neon) !important;
    border-bottom: var(--border-neon) !important;
}

/* ── 7. CUSTOM FEATURE CARDS ── */
.custom-feature-card {
    background: var(--bg-card) !important;
    border: var(--border-neon) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.45) !important;
    border-radius: 14px !important;
    transition: transform 0.4s cubic-bezier(0.165,0.84,0.44,1), box-shadow 0.4s ease !important;
    transform-style: preserve-3d;
}
.custom-feature-card:hover {
    transform: translateY(-10px) rotateX(4deg) rotateY(-2deg) translateZ(8px) !important;
    box-shadow: 0 20px 45px rgba(0,0,0,0.6), 0 0 25px rgba(0,200,255,0.22) !important;
    border-color: var(--neon) !important;
}

/* ── 8. FORMS & INPUTS ── */
.form-control, .form--control, .select2-container--default .select2-selection--single,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], textarea, select {
    background: rgba(5, 12, 32, 0.8) !important;
    border: 1px solid rgba(0,200,255,0.2) !important;
    color: var(--text-main) !important;
    border-radius: 8px !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}
.form-control:focus, .form--control:focus,
input[type="text"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="number"]:focus,
input[type="tel"]:focus, textarea:focus, select:focus {
    border-color: var(--neon) !important;
    box-shadow: 0 0 0 3px rgba(0,200,255,0.12), var(--neon-glow) !important;
    background: rgba(0,20,50,0.9) !important;
    outline: none !important;
}
.form-control::placeholder, .form--control::placeholder { color: rgba(160,200,255,0.35) !important; }
label { color: rgba(160,210,255,0.7) !important; }
.form-group label.required::after { color: #ff4d6d; }

/* Select2 */
.select2-dropdown {
    background: var(--bg-panel) !important;
    border: var(--border-neon) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important;
}
.select2-container--default .select2-results__option {
    color: var(--text-main) !important;
    background: transparent !important;
}
.select2-container--default .select2-results__option--highlighted {
    background: rgba(0,200,255,0.1) !important;
    color: var(--neon) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-main) !important;
}

/* ── 9. TABLES ── */
.table {
    background: var(--bg-card) !important;
    border: var(--border-neon) !important;
    border-radius: 12px;
    overflow: hidden;
    color: var(--text-main) !important;
}
.table thead tr {
    background: linear-gradient(90deg, #030e28, #071535) !important;
}
.table thead tr th {
    color: var(--neon) !important;
    border-bottom: 1px solid rgba(0,200,255,0.2) !important;
    text-shadow: 0 0 8px rgba(0,200,255,0.4);
    font-size: 13px;
    letter-spacing: 0.5px;
}
.table tbody tr {
    border-bottom: 1px solid rgba(0,200,255,0.06) !important;
    transition: background 0.2s;
}
.table tbody tr:hover {
    background: rgba(0,200,255,0.04) !important;
}
.table tbody tr td {
    color: var(--text-main) !important;
    border-color: rgba(0,200,255,0.07) !important;
}
.table tbody tr td::before { color: rgba(160,210,255,0.6) !important; }

/* Domain result rows */
.domain-row {
    background: var(--bg-card) !important;
    border-bottom: 1px solid rgba(0,200,255,0.08) !important;
    color: var(--text-main) !important;
}
.domain-row:hover { background: rgba(0,200,255,0.04) !important; }

/* ── 10. BREADCRUMB ── */
.breadcrumb-section, .breadcrumb-area {
    background: linear-gradient(135deg, #030d22 0%, #05152e 100%) !important;
    border-bottom: 1px solid rgba(0,200,255,0.12) !important;
    position: relative;
    overflow: hidden;
}
.breadcrumb-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(0,200,255,0.05) 0%, transparent 70%);
    pointer-events: none;
}
.breadcrumb-item, .breadcrumb-item a { color: rgba(160,210,255,0.7) !important; }
.breadcrumb-item.active, .page-title { color: var(--neon) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(0,200,255,0.4) !important; }

/* ── 11. SERVICE CATEGORY PAGE ── */
.service-category, .bg--light {
    background: radial-gradient(ellipse at 15% 40%, #04091c 0%, #010308 100%) !important;
}

/* Pricing / Service cards */
.service-card .card, .pricing-card, .package-card {
    background: var(--bg-card) !important;
    border: var(--border-neon) !important;
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.165,0.84,0.44,1), box-shadow 0.4s ease !important;
}
.service-card .card:hover, .pricing-card:hover, .package-card:hover {
    transform: translateY(-10px) rotateX(4deg) rotateY(-2deg) translateZ(10px) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(0,200,255,0.2) !important;
    border-color: var(--neon) !important;
}

/* Feature icon circles */
.feature-icon, .icon-box, .service-icon {
    background: rgba(0,200,255,0.05) !important;
    border: 1px solid rgba(0,200,255,0.22) !important;
    box-shadow: 0 0 14px rgba(0,200,255,0.14) !important;
    border-radius: 50% !important;
}
.feature-icon i, .icon-box i, .service-icon i {
    color: var(--neon) !important;
    text-shadow: var(--neon-glow);
}

/* Spec blocks */
.spec-block {
    background: var(--bg-card2) !important;
    border: var(--border-neon) !important;
    border-radius: 10px !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.spec-block:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 30px rgba(0,200,255,0.15) !important;
    border-color: var(--neon) !important;
}
.spec-block h5, .spec-block .title { color: var(--neon) !important; }
.spec-block i.text-success { color: var(--neon) !important; }

/* ── 12. USER DASHBOARD SIDEBAR ── */
.collapable-sidebar .card,
.collapable-sidebar .card-header {
    background: var(--bg-card) !important;
    border: var(--border-neon) !important;
    color: var(--neon) !important;
}
.list-group-item {
    background: transparent !important;
    border-color: rgba(0,200,255,0.1) !important;
    color: var(--text-main) !important;
    transition: background 0.2s, color 0.2s;
}
.list-group-item:hover, .list-group-item.active {
    background: rgba(0,200,255,0.07) !important;
    color: var(--neon) !important;
    border-left: 3px solid var(--neon) !important;
}
.list-group-item-action:hover { color: var(--neon) !important; }

/* Sidebar mobile toggle bar */
.show-sidebar-bar, .dashboard-bar {
    background: var(--bg-card) !important;
    border: var(--border-neon) !important;
    color: var(--neon) !important;
    border-radius: 8px !important;
}

/* ── 13. AUTH PAGES (Login / Register) ── */
.account-section {
    background: radial-gradient(ellipse at 30% 20%, #030c22 0%, #020510 100%) !important;
    min-height: 100vh;
    position: relative;
}
.account-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 80%, rgba(0,150,255,0.07) 0%, transparent 50%),
        radial-gradient(circle at 20% 30%, rgba(0,200,255,0.05) 0%, transparent 50%);
    pointer-events: none;
}
.account-section .card {
    background: rgba(8,15,35,0.9) !important;
    border: 1px solid rgba(0,200,255,0.22) !important;
    box-shadow: 0 0 40px rgba(0,200,255,0.12), 0 20px 60px rgba(0,0,0,0.7) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(16px);
}
.account-section .card-header {
    background: linear-gradient(135deg, rgba(0,200,255,0.07) 0%, transparent 100%) !important;
    border-bottom: 1px solid rgba(0,200,255,0.18) !important;
}

/* ── 14. FOOTER ── */
.footer, .footer.bg-dark-two {
    background: linear-gradient(180deg, #030a1e 0%, #010308 100%) !important;
    border-top: 1px solid rgba(0,200,255,0.14) !important;
    color: rgba(160,210,255,0.65) !important;
}
.footer-text { color: rgba(160,210,255,0.55) !important; }
.footer-links a {
    color: rgba(160,210,255,0.65) !important;
    transition: color 0.2s, text-shadow 0.2s;
}
.footer-links a:hover {
    color: var(--neon) !important;
    text-shadow: var(--neon-glow);
}

/* ── 15. TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 { color: hsl(var(--heading)) !important; }
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
    color: hsl(var(--heading)) !important;
}
h1 > a:hover, h2 > a:hover, h3 > a:hover {
    color: var(--neon) !important;
    text-shadow: var(--neon-glow);
}
p, span:not(.badge):not([class*="text--"]), li { color: var(--text-main) !important; }

.text--base { color: var(--neon) !important; text-shadow: 0 0 8px rgba(0,200,255,0.35); }
a { color: var(--neon) !important; }
a:hover { color: #60d8ff !important; text-shadow: var(--neon-glow); }
a.text-white { color: rgba(210,235,255,0.9) !important; }
a.text-white:hover { color: var(--neon) !important; }

/* Section title underline neon */
.section-title::after, .section--title::after {
    background: var(--neon) !important;
    box-shadow: var(--neon-glow);
}

/* ── 16. BADGE OVERRIDES ── */
.badge--base   { background: rgba(0,200,255,0.1)  !important; border-color: var(--neon) !important; color: var(--neon) !important; }
.badge--success{ background: rgba(0,255,160,0.08) !important; border-color: #00ffa0 !important; color: #00ffa0 !important; }
.badge--danger { background: rgba(255,60,100,0.1) !important; border-color: #ff3c64 !important; color: #ff3c64 !important; }
.badge--warning{ background: rgba(255,180,0,0.1)  !important; border-color: #ffb800 !important; color: #ffb800 !important; }
.badge--info   { background: rgba(0,200,255,0.08) !important; border-color: #29d9ff !important; color: #29d9ff !important; }

/* Status dot colors */
.text-success { color: #00ffa0 !important; }
.text-danger  { color: #ff4d6d !important; }
.text-warning { color: #ffb800 !important; }
.text-info    { color: var(--neon) !important; }
.text-muted   { color: rgba(130,180,255,0.5) !important; }

/* ── 17. ALERTS ── */
.alert {
    border-radius: 10px !important;
    border-left: 3px solid currentColor !important;
    backdrop-filter: blur(6px);
}
.alert-success { background: rgba(0,255,160,0.06) !important; border-color: #00ffa0 !important; color: #00ffa0 !important; }
.alert-danger  { background: rgba(255,60,100,0.06) !important; border-color: #ff4d6d !important; color: #ff4d6d !important; }
.alert-warning { background: rgba(255,180,0,0.06)  !important; border-color: #ffb800 !important; color: #ffb800 !important; }
.alert-info    { background: rgba(0,200,255,0.06)   !important; border-color: var(--neon) !important; color: var(--neon) !important; }

/* ── 18. PAGINATION ── */
.pagination .page-item .page-link {
    background: var(--bg-card) !important;
    border: var(--border-neon) !important;
    color: var(--text-main) !important;
    transition: all 0.2s;
}
.pagination .page-item .page-link:hover {
    background: rgba(0,200,255,0.1) !important;
    color: var(--neon) !important;
    box-shadow: var(--neon-glow);
}
.pagination .page-item.active .page-link {
    background: rgba(0,200,255,0.15) !important;
    border-color: var(--neon) !important;
    color: var(--neon) !important;
    box-shadow: var(--neon-glow);
}

/* ── 19. FAQ ACCORDION ── */
.faq-item {
    background: var(--bg-card) !important;
    border: var(--border-neon) !important;
    border-radius: 10px !important;
    margin-bottom: 10px;
    overflow: hidden;
}
.faq-item__title {
    color: var(--text-main) !important;
    transition: color 0.2s;
}
.faq-item__title:hover, .faq-item.open .faq-item__title {
    color: var(--neon) !important;
    text-shadow: 0 0 6px rgba(0,200,255,0.3);
}
.faq-item__content { color: rgba(160,210,255,0.7) !important; }
.faq-item__title::before { color: var(--neon) !important; }

/* ── 20. TABS ── */
.nav-tabs {
    border-bottom: 1px solid rgba(0,200,255,0.15) !important;
}
.nav-tabs .nav-link {
    color: rgba(160,210,255,0.65) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.2s, border-color 0.2s;
}
.nav-tabs .nav-link:hover {
    color: var(--neon) !important;
    border-bottom-color: rgba(0,200,255,0.4) !important;
}
.nav-tabs .nav-link.active {
    background: transparent !important;
    color: var(--neon) !important;
    border-bottom: 2px solid var(--neon) !important;
    text-shadow: var(--neon-glow);
}
.tab-content { color: var(--text-main) !important; }

/* ── 21. MODALS ── */
.modal-content {
    background: var(--bg-panel) !important;
    border: 1px solid rgba(0,200,255,0.22) !important;
    box-shadow: 0 0 50px rgba(0,200,255,0.12), 0 25px 70px rgba(0,0,0,0.8) !important;
    border-radius: 14px !important;
    color: var(--text-main) !important;
}
.modal-header {
    background: rgba(0,200,255,0.04) !important;
    border-bottom: 1px solid rgba(0,200,255,0.15) !important;
}
.modal-title { color: var(--neon) !important; text-shadow: var(--neon-glow); }
.modal-footer { border-top: 1px solid rgba(0,200,255,0.12) !important; }
.btn-close { filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg) !important; }
.modal-backdrop { background: rgba(0,5,20,0.85) !important; }

/* ── 22. IZITOAST NOTIFICATIONS ── */
.iziToast {
    background: var(--bg-panel) !important;
    border-left: 3px solid var(--neon) !important;
    box-shadow: 0 0 20px rgba(0,200,255,0.15) !important;
    color: var(--text-main) !important;
    border-radius: 8px !important;
}
.iziToast-body p { color: var(--text-main) !important; }

/* ── 23. SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #010308; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0,200,255,0.5), rgba(0,80,200,0.4));
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,200,255,0.7); }

/* ── 24. OVERLAY ── */
.overlay { background-color: rgba(0,5,20,0.92) !important; }

/* ── 25. TEXT SELECTION ── */
::selection { background-color: rgba(0,200,255,0.3); color: #fff; }

/* ── 26. HERO SECTION 3D NEON ENHANCEMENT ── */
.hero-3d-section {
    background: radial-gradient(circle at 25% 25%, #04102b 0%, #010308 70%) !important;
}
.hero-3d-card {
    background: rgba(5, 12, 32, 0.75) !important;
    border: 1px solid rgba(0,200,255,0.2) !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5), 0 0 30px rgba(0,200,255,0.08) !important;
}

/* Section general neon heading strip */
.section-header, .section--header {
    position: relative;
    padding-bottom: 12px;
}
.section-header::after, .section--header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 60px; height: 3px;
    background: linear-gradient(90deg, var(--neon), transparent);
    box-shadow: var(--neon-glow);
    border-radius: 3px;
}

/* ── 27. ABOUT / INFO PANELS ── */
.about-panel-3d {
    background: linear-gradient(135deg, rgba(5,12,32,0.95), rgba(8,18,45,0.85)) !important;
    border: 1px solid rgba(0,200,255,0.18) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 20px rgba(0,200,255,0.08) !important;
}

/* ── 28. FLOATING NEON ORBS (Ambient) ── */
.floating-orb-1 {
    background: radial-gradient(circle, rgba(0,200,255,0.5), rgba(0,50,200,0.15)) !important;
    filter: blur(70px) !important;
    opacity: 0.1 !important;
}
.floating-orb-2 {
    background: radial-gradient(circle, rgba(0,80,255,0.5), rgba(0,200,255,0.1)) !important;
    filter: blur(70px) !important;
    opacity: 0.08 !important;
}

/* ── 29. TLD BADGES ── */
.tld-badge {
    background: rgba(0,200,255,0.06) !important;
    border: 1px solid rgba(0,200,255,0.25) !important;
    color: var(--neon) !important;
}
.tld-badge:hover {
    background: rgba(0,200,255,0.14) !important;
    box-shadow: var(--neon-glow) !important;
    color: #fff !important;
}

/* ── 30. SERVER 3D RACK NEON ENHANCEMENT ── */
.server-rack {
    background: linear-gradient(135deg, #0a1830, #050e22) !important;
    border: 1px solid rgba(0,200,255,0.35) !important;
    box-shadow: 0 0 18px rgba(0,200,255,0.15), inset 0 0 10px rgba(0,200,255,0.04) !important;
}
.hdd-led {
    background-color: var(--neon) !important;
    box-shadow: 0 0 10px var(--neon), 0 0 20px rgba(0,200,255,0.5) !important;
}
.connection-ray {
    background: linear-gradient(to bottom, transparent, var(--neon), transparent) !important;
    opacity: 0.6 !important;
}

/* ── 31. COLLAPABLE SIDEBAR NEON NAV ── */
#actionMenu.sidebar {
    background: var(--bg-card) !important;
    border: var(--border-neon) !important;
}

/* ── 32. MISCELLANEOUS DARK BG SECTIONS ── */
.bg--dark { background-color: #030a1c !important; }
.bg--light { background-color: #050d20 !important; }
.bg--secondary { background-color: #07112b !important; }

/* Light text fix for any white bg remnants */
.text-dark, .text--dark { color: #c8e0ff !important; }
.text-body { color: var(--text-main) !important; }

/* Bootstrap form-check */
.form-check-input {
    background-color: rgba(5,12,32,0.9) !important;
    border-color: rgba(0,200,255,0.3) !important;
}
.form-check-input:checked {
    background-color: rgba(0,200,255,0.3) !important;
    border-color: var(--neon) !important;
    box-shadow: var(--neon-glow) !important;
}

/* Horizontal rule */
hr { border-color: rgba(0,200,255,0.1) !important; }

/* List items inside info boxes */
.list.list-style-one li::before,
.list.list-style-two li::before { color: var(--neon) !important; }

/* ── 33. NEON PULSE ANIMATION on Section Headings ── */
@keyframes neonPulse {
    0%, 100% { text-shadow: 0 0 6px rgba(0,200,255,0.4), 0 0 14px rgba(0,200,255,0.2); }
    50%       { text-shadow: 0 0 12px rgba(0,200,255,0.8), 0 0 28px rgba(0,200,255,0.45); }
}
.section-title, .section--title {
    animation: neonPulse 4s ease-in-out infinite;
    color: hsl(var(--heading)) !important;
}

/* ── 34. NEON CARD SHINE SWEEP ── */
@keyframes cardShine {
    0%   { transform: translateX(-100%) rotate(-20deg); }
    100% { transform: translateX(300%)  rotate(-20deg); }
}
.card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,200,255,0.04), transparent);
    transform: translateX(-100%) rotate(-20deg);
    pointer-events: none;
    border-radius: inherit;
}
.card:hover::after {
    animation: cardShine 0.6s ease forwards;
}

/* ── 35. MOBILE MENU DARK ── */
.header-trigger .header-trigger__icon i { color: var(--neon) !important; }
@media (max-width: 1199px) {
    .menu {
        background: rgba(3,8,25,0.98) !important;
        border: var(--border-neon) !important;
        box-shadow: 0 10px 40px rgba(0,0,0,0.8) !important;
    }
}

/* ── 36. COOKIES CARD ── */
.cookies-card {
    background: var(--bg-panel) !important;
    border: var(--border-neon) !important;
    color: var(--text-main) !important;
    box-shadow: 0 0 30px rgba(0,200,255,0.12) !important;
}
.cookies-card__icon {
    background-color: rgba(0,200,255,0.1) !important;
    border: 1px solid rgba(0,200,255,0.3) !important;
    color: var(--neon) !important;
}