/* ═══════════════════════════════════════════════
   SIBERALEM - Global Styles & Theme System
   Full React Parity Version
   ═══════════════════════════════════════════════ */

/* ── Theme Variables (RGB) - Matching React index.html exactly ── */
:root {
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'Fira Code', 'JetBrains Mono', monospace;
}

/* Alpine.js cloak — hide elements until Alpine initializes */
[x-cloak] {
    display: none !important;
}

/* Social Interaction Bar */
.social-bar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.2s ease;
}

.social-btn:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.social-btn.active {
    color: rgb(var(--color-primary-400));
    background: rgba(var(--color-primary-500), 0.1);
    border-color: rgba(var(--color-primary-500), 0.2);
}

.social-btn.active-red {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

.social-btn svg {
    width: 1rem;
    height: 1rem;
}

/* 1. CYBER (Default Green) */
.theme-cyber {
    --font-main: 'Inter';
    --color-primary-50: 240, 253, 244;
    --color-primary-100: 220, 252, 231;
    --color-primary-300: 134, 239, 172;
    --color-primary-400: 74, 222, 128;
    --color-primary-500: 34, 197, 94;
    --color-primary-600: 22, 163, 74;
    --color-primary-900: 20, 83, 45;
    --color-bg-base: 2, 6, 23;
    --color-bg-card: 30, 41, 59;
    --color-bg-surface: 15, 23, 42;
    --color-bg-sidebar: 15, 23, 42;
}

/* 2. NETRUNNER (Orange/Amber) */
.theme-netrunner {
    --font-main: 'Rajdhani';
    --color-primary-50: 255, 251, 235;
    --color-primary-100: 254, 243, 199;
    --color-primary-300: 252, 211, 77;
    --color-primary-400: 251, 191, 36;
    --color-primary-500: 245, 158, 11;
    --color-primary-600: 217, 119, 6;
    --color-primary-900: 120, 53, 15;
    --color-bg-base: 12, 10, 9;
    --color-bg-card: 41, 37, 36;
    --color-bg-surface: 28, 25, 23;
    --color-bg-sidebar: 28, 25, 23;
}

/* 3. SYNTHWAVE (Pink/Purple) */
.theme-synthwave {
    --font-main: 'Orbitron';
    --color-primary-50: 253, 242, 248;
    --color-primary-100: 252, 231, 243;
    --color-primary-300: 249, 168, 212;
    --color-primary-400: 244, 114, 182;
    --color-primary-500: 236, 72, 153;
    --color-primary-600: 219, 39, 119;
    --color-primary-900: 131, 24, 67;
    --color-bg-base: 15, 0, 30;
    --color-bg-card: 55, 10, 60;
    --color-bg-surface: 35, 5, 40;
    --color-bg-sidebar: 35, 5, 40;
}

/* 4. ICE (Cyan/Blue) */
.theme-ice {
    --font-main: 'Exo 2';
    --color-primary-50: 236, 254, 255;
    --color-primary-100: 207, 250, 254;
    --color-primary-300: 103, 232, 249;
    --color-primary-400: 34, 211, 238;
    --color-primary-500: 6, 182, 212;
    --color-primary-600: 8, 145, 178;
    --color-primary-900: 22, 78, 99;
    --color-bg-base: 2, 6, 23;
    --color-bg-card: 22, 35, 60;
    --color-bg-surface: 8, 18, 40;
    --color-bg-sidebar: 8, 18, 40;
}

/* 5. OPERATOR (Red) */
.theme-operator {
    --font-main: 'JetBrains Mono';
    --color-primary-50: 254, 242, 242;
    --color-primary-100: 254, 226, 226;
    --color-primary-300: 252, 165, 165;
    --color-primary-400: 248, 113, 113;
    --color-primary-500: 239, 68, 68;
    --color-primary-600: 220, 38, 38;
    --color-primary-900: 127, 29, 29;
    --color-bg-base: 0, 0, 0;
    --color-bg-card: 24, 24, 27;
    --color-bg-surface: 10, 10, 10;
    --color-bg-sidebar: 10, 10, 10;
}

/* ── Base Styles ── */
/* Base reset compatible with Tailwind */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main, 'Inter'), var(--font-sans);
    background-color: rgba(var(--color-bg-base), 1);
    color: #cbd5e1;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* ── Text Selection (React: selection:bg-primary-500 selection:text-black) ── */
::selection {
    background: rgba(var(--color-primary-500), 0.8);
    color: #000;
}

/* ── Scrollbar (React: 8px, card track, primary-900 border thumb) ── */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(var(--color-bg-base), 1);
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--color-bg-card), 1);
    border: 1px solid rgba(var(--color-primary-900), 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--color-primary-500), 1);
}

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

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

/* ── Body Scanline Effect (React: body::after, z-10000) ── */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background-image: linear-gradient(rgba(var(--color-bg-base), 0) 50%,
            rgba(0, 0, 0, 0.15) 50%);
    background-size: 100% 4px;
    opacity: 0.03;
    z-index: 10000;
    pointer-events: none;
    animation: scanline-move 10s linear infinite;
}

@keyframes scanline-move {
    0% {
        transform: translateY(-50%);
    }

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

/* ── Ambient Blob Backgrounds (React: 800px blur blobs) ── */
.ambient-blobs {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ambient-blobs .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    mix-blend-mode: screen;
    animation: blob 7s infinite;
}

.ambient-blobs .blob-1 {
    top: -10%;
    left: -10%;
    width: 800px;
    height: 800px;
    background: rgba(var(--color-primary-500), 0.08);
}

.ambient-blobs .blob-2 {
    bottom: -10%;
    right: -10%;
    width: 800px;
    height: 800px;
    background: rgba(var(--color-primary-900), 0.08);
    animation-delay: 2s;
}

.ambient-blobs .blob-3 {
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: rgba(var(--color-primary-600), 0.04);
    animation-delay: 4s;
}

/* Noise Texture Overlay */
.noise-overlay {
    position: fixed;
    inset: 0;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

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

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

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

/* ── Cyber Grid Background ── */
.cyber-grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--color-primary-500), 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--color-primary-500), 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
}

/* ── Utility colors from theme ── */
.text-primary-300 {
    color: rgb(var(--color-primary-300));
}

.text-primary-400 {
    color: rgb(var(--color-primary-400));
}

.text-primary-500 {
    color: rgb(var(--color-primary-500));
}

.text-primary-600 {
    color: rgb(var(--color-primary-600));
}

.bg-primary-500 {
    background-color: rgb(var(--color-primary-500));
}

.bg-primary-600 {
    background-color: rgb(var(--color-primary-600));
}

.bg-bg-base {
    background-color: rgb(var(--color-bg-base));
}

.bg-bg-card {
    background-color: rgb(var(--color-bg-card));
}

.bg-bg-surface {
    background-color: rgb(var(--color-bg-surface));
}

.border-primary-500 {
    border-color: rgb(var(--color-primary-500));
}

.bg-primary-500\/5 {
    background-color: rgba(var(--color-primary-500), 0.05);
}

.bg-primary-500\/10 {
    background-color: rgba(var(--color-primary-500), 0.1);
}

.bg-primary-500\/20 {
    background-color: rgba(var(--color-primary-500), 0.2);
}

.border-primary-500\/20 {
    border-color: rgba(var(--color-primary-500), 0.2);
}

.border-primary-500\/30 {
    border-color: rgba(var(--color-primary-500), 0.3);
}

.border-primary-500\/50 {
    border-color: rgba(var(--color-primary-500), 0.5);
}

.shadow-primary {
    box-shadow: 0 0 20px rgba(var(--color-primary-500), 0.2);
}

/* ═══════════════════════════════════════════════
   HEADER - Matches React Header.tsx
   ═══════════════════════════════════════════════ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    transition: all 0.3s;
    width: 100%;
    background: transparent;
    padding: 1.25rem 0;
}

.site-header.scrolled {
    background: rgba(var(--color-bg-base), 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(var(--color-primary-500), 0.1);
    padding: 0.75rem 0;
    box-shadow: 0 4px 20px rgba(var(--color-primary-900), 0.1);
}

.header-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.025em;
    font-family: var(--font-mono);
}

.header-logo .logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, rgba(var(--color-primary-500), 1), rgba(var(--color-primary-900), 1));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(var(--color-primary-500), 0.3);
}

.header-logo .logo-icon svg {
    width: 18px;
    height: 18px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
}

/* ── Theme Switcher (React: colored dot + name + chevron) ── */
.theme-switcher {
    position: relative;
}

.theme-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(var(--color-bg-surface), 1);
    cursor: pointer;
    transition: all 0.3s;
    color: #94a3b8;
}

.theme-btn:hover {
    border-color: rgba(var(--color-primary-500), 0.5);
}

.theme-btn .theme-dot-active {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}

.theme-btn .theme-name {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: #cbd5e1;
}

.theme-btn .chevron {
    width: 16px;
    height: 16px;
    color: #64748b;
}

.theme-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: rgba(var(--color-bg-card), 1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.5rem;
    display: none;
    min-width: 140px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    z-index: 50;
}

.theme-menu.open {
    display: block;
    animation: dropdownIn 0.2s ease;
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: none;
    color: #94a3b8;
    width: 100%;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-mono);
}

.theme-option:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
}

.theme-option.active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

.theme-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 5px currentColor;
}

/* Login Button (React: bg-primary-600, shadow, font-mono, scale hover) */
.login-btn {
    padding: 0.5rem 1.25rem;
    background: rgba(var(--color-primary-600), 1);
    border: 1px solid rgba(var(--color-primary-500), 0.5);
    color: white;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.875rem;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(var(--color-primary-500), 0.2);
}

.login-btn:hover {
    background: rgba(var(--color-primary-500), 1);
    box-shadow: 0 4px 20px rgba(var(--color-primary-500), 0.4);
    transform: scale(1.05);
}

.login-btn:active {
    transform: scale(0.95);
}

/* ═══════════════════════════════════════════════
   SIDEBAR - Matches React Sidebar.tsx
   ═══════════════════════════════════════════════ */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4rem;
    background: rgba(var(--color-bg-card), 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 60;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
}

.sidebar:hover {
    width: 16rem;
}

/* Sidebar Logo Area */
.sidebar-logo {
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    padding: 0 0.75rem;
}

.sidebar-logo .logo-shield {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    background: rgba(var(--color-primary-500), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-primary-400));
}

.sidebar-logo .logo-shield svg {
    width: 24px;
    height: 24px;
}

.sidebar-logo .logo-text {
    position: absolute;
    left: 4rem;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 1.125rem;
    color: white;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.2s ease;
}

.sidebar:hover .sidebar-logo .logo-text {
    opacity: 1;
    transform: translateX(0);
}

.sidebar-logo .logo-text .accent {
    color: rgb(var(--color-primary-400));
}

/* Sidebar Navigation */
.sidebar-nav {
    flex: 1;
    padding: 1.5rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow-y: auto;
    scrollbar-width: none;
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
}

.sidebar-item {
    position: relative;
    display: flex;
    align-items: center;
    height: 3rem;
    padding: 0 0.75rem;
    border-radius: 8px;
    color: #94a3b8;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s;
    border: 1px solid transparent;
}

.sidebar-item:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-item.active {
    color: rgb(var(--color-primary-400));
    background: rgba(var(--color-primary-500), 0.1);
    border-color: rgba(var(--color-primary-500), 0.3);
    box-shadow: 0 0 15px rgba(var(--color-primary-500), 0.15);
}

/* Active Indicator Bar */
.sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 2rem;
    background: rgb(var(--color-primary-500));
    border-radius: 0 4px 4px 0;
}

.sidebar-item .icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sidebar-item .icon svg {
    width: 24px;
    height: 24px;
}

.sidebar-item .label {
    margin-left: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.2s ease;
}

.sidebar:hover .sidebar-item .label {
    opacity: 1;
    transform: translateX(0);
}

/* Sidebar Bottom User */
.sidebar-user {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.sidebar-user .avatar-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #334155;
}

.sidebar-user .avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.sidebar-user:hover .avatar-wrapper img {
    opacity: 1;
}

.sidebar-user .avatar-online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #22c55e;
    border: 2px solid rgb(var(--color-bg-card));
    border-radius: 50%;
}

.sidebar-user .user-info {
    margin-left: 0.75rem;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.2s;
}

.sidebar:hover .sidebar-user .user-info {
    opacity: 1;
}

.sidebar-user .user-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
}

.sidebar-user .user-rank {
    font-size: 0.75rem;
    color: rgb(var(--color-primary-400));
    font-family: var(--font-mono);
}

/* Sidebar hover glow effect */
.sidebar-item:not(.active) .hover-glow {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(var(--color-primary-500), 0);
    transition: background 0.3s;
}

.sidebar-item:not(.active):hover .hover-glow {
    background: rgba(var(--color-primary-500), 0.05);
}

/* ── Mobile Bottom Nav ── */
.mobile-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(var(--color-bg-card), 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 50;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }

    .mobile-nav {
        display: flex;
    }

    main {
        margin-left: 0 !important;
    }
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: #64748b;
    text-decoration: none;
    font-size: 0.625rem;
    padding: 0.5rem;
    border-radius: 8px;
    transition: color 0.2s;
}

.mobile-nav-item.active {
    color: rgb(var(--color-primary-400));
}

.mobile-nav-item svg {
    width: 24px;
    height: 24px;
}

.mobile-nav-item.active .mobile-dot {
    width: 4px;
    height: 4px;
    background: rgb(var(--color-primary-500));
    border-radius: 50%;
    margin-top: 2px;
}

.mobile-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: #64748b;
    padding: 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
}

.mobile-menu-btn svg {
    width: 24px;
    height: 24px;
}

/* ═══════════════════════════════════════════════
   FOOTER - Matches React Footer.tsx
   ═══════════════════════════════════════════════ */
.site-footer {
    border-top: 1px solid #262626;
    background: #171717;
    padding: 4rem 1rem 2rem;
    margin-left: 4rem;
}

@media (max-width: 768px) {
    .site-footer {
        margin-left: 0;
        margin-bottom: 60px;
    }
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .footer-top {
        flex-direction: row;
        justify-content: space-between;
    }
}

.footer-brand h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    letter-spacing: -0.025em;
}

.footer-brand h3 .accent {
    color: #22c55e;
}

.footer-brand p {
    color: #94a3b8;
    max-width: 24rem;
    font-size: 0.9375rem;
}

/* Social icons - React: motion.a with float + glow */
.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #262626;
    border: 1px solid #404040;
    color: #64748b;
    transition: all 0.3s;
    text-decoration: none;
    animation: socialFloat 2s ease-in-out infinite;
}

.footer-social a:nth-child(2) {
    animation-delay: 0.3s;
}

.footer-social a:nth-child(3) {
    animation-delay: 0.6s;
}

.footer-social a:hover {
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.5);
    transform: translateY(-5px);
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.5);
}

@keyframes socialFloat {

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

    50% {
        transform: scale(1.08);
    }
}

.footer-bottom {
    border-top: 1px solid #262626;
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    color: #64748b;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
    }
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

.footer-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #4ade80;
}

/* ═══════════════════════════════════════════════
   GLITCH TEXT - React: hover-only pink/cyan offset
   ═══════════════════════════════════════════════ */
.glitch-text {
    position: relative;
    display: inline-block;
    color: rgb(var(--color-primary-400));
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.1s;
}

.glitch-text::before {
    color: #ec4899;
    z-index: -1;
}

.glitch-text::after {
    color: #06b6d4;
    z-index: -1;
}

/* Only animate on hover (like React's whileHover) */
.glitch-text:hover::before {
    opacity: 0.7;
    animation: glitch-1 0.2s infinite linear alternate-reverse;
}

.glitch-text:hover::after {
    opacity: 0.7;
    animation: glitch-2 0.3s 0.05s infinite linear alternate-reverse;
}

@keyframes glitch-1 {
    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(-2px, 1px);
    }

    50% {
        transform: translate(2px, -1px);
    }

    75% {
        transform: translate(-1px, 0);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes glitch-2 {
    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(2px, -1px);
    }

    50% {
        transform: translate(-2px, 1px);
    }

    75% {
        transform: translate(1px, 0);
    }

    100% {
        transform: translate(0);
    }
}

/* ═══════════════════════════════════════════════
   MARQUEE (with gradient fade masks)
   ═══════════════════════════════════════════════ */
.marquee-container {
    overflow: hidden;
    position: relative;
}

/* Gradient fade masks on both sides */
.marquee-container::before,
.marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8rem;
    z-index: 10;
    pointer-events: none;
}

.marquee-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(var(--color-bg-base), 1), transparent);
}

.marquee-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(var(--color-bg-base), 1), transparent);
}

.marquee-content {
    display: flex;
    gap: 4rem;
    animation: marquee 30s linear infinite;
    white-space: nowrap;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ═══════════════════════════════════════════════
   TILT CARD - Enhanced with spring physics feel
   ═══════════════════════════════════════════════ */
.tilt-card {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
    position: relative;
}

.tilt-card .tilt-content {
    transform: translateZ(20px);
    transform-style: preserve-3d;
    position: relative;
    z-index: 10;
}

/* Radial hover glow */
.tilt-card .tilt-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(var(--color-primary-500), 0.03) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s;
    border-radius: inherit;
}

.tilt-card:hover .tilt-glow {
    opacity: 1;
}

/* Glass Sheen */
.tilt-card .tilt-sheen {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    border-radius: inherit;
}

.tilt-card:hover .tilt-sheen {
    opacity: 1;
}

/* Shadow/Glow behind card */
.tilt-card .tilt-shadow {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(var(--color-primary-500), 0);
    filter: blur(20px);
    transition: background 0.5s;
    border-radius: inherit;
    transform: translateY(8px);
}

.tilt-card:hover .tilt-shadow {
    background: rgba(var(--color-primary-500), 0.05);
}

/* ═══════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════ */

/* Fade In */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-delay-1 {
    animation-delay: 0.1s;
}

.fade-in-delay-2 {
    animation-delay: 0.2s;
}

.fade-in-delay-3 {
    animation-delay: 0.3s;
}

.fade-in-delay-4 {
    animation-delay: 0.4s;
}

.fade-in-delay-5 {
    animation-delay: 0.5s;
}

/* Scroll-triggered animations - JS adds .scroll-hidden, then .visible triggers */
.animate-on-scroll {
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.scroll-hidden {
    opacity: 0;
    transform: translateY(30px);
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Page fade in */
.page-fade-in {
    animation: pageFadeIn 0.5s ease;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tab transition */
.tab-panel {
    animation: tabFadeIn 0.2s ease;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse slow (React: 4s cubic-bezier) */
.animate-pulse-slow {
    animation: pulseSlow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseSlow {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Border pulse */
.animate-border-pulse {
    animation: borderPulse 2s ease-out infinite;
}

@keyframes borderPulse {
    0% {
        border-color: rgba(var(--color-primary-500), 0.3);
    }

    50% {
        border-color: rgba(var(--color-primary-500), 0.7);
    }

    100% {
        border-color: rgba(var(--color-primary-500), 0.3);
    }
}

/* ═══════════════════════════════════════════════
   CARD HOVER
   ═══════════════════════════════════════════════ */
.card-hover {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.card-hover:hover {
    border-color: rgba(var(--color-primary-500), 0.3);
    transform: translateY(-4px);
    box-shadow: 0 10px 40px rgba(var(--color-primary-500), 0.1);
}

/* Glass Card (React NewsCard style) */
.glass-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(var(--color-bg-card), 1);
    border-radius: 12px;
    transition: all 0.3s;
}

.glass-card:hover {
    border-color: rgba(var(--color-primary-500), 0.3);
}

.glass-card .glass-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--color-primary-500), 0.1);
    opacity: 0;
    transition: opacity 0.3s;
    mix-blend-mode: overlay;
    z-index: 10;
    pointer-events: none;
}

.glass-card:hover .glass-overlay {
    opacity: 1;
}

.glass-card .glass-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
    z-index: 11;
}

.glass-card:hover .glass-sheen {
    opacity: 1;
}

.glass-card .glass-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(var(--color-primary-500), 0);
    filter: blur(20px);
    transition: background 0.5s;
    border-radius: inherit;
}

.glass-card:hover .glass-glow {
    background: rgba(var(--color-primary-500), 0.1);
}

/* ═══════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════ */
.progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, rgb(var(--color-primary-500)), rgb(var(--color-primary-400)));
    border-radius: 3px;
    transition: width 1s ease;
}

/* ═══════════════════════════════════════════════
   BADGE
   ═══════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0.25rem;
    border: 1px solid;
    letter-spacing: 0.05em;
}

.badge-critical {
    color: #f87171;
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

.badge-high {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
}

.badge-medium {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}

.badge-low {
    color: #34d399;
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

/* ═══════════════════════════════════════════════
   TAB SYSTEM
   ═══════════════════════════════════════════════ */
.tab-btn {
    position: relative;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var(--font-mono);
    border-radius: 0.5rem;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s;
    white-space: nowrap;
}

.tab-btn:hover {
    color: #e2e8f0;
}

.tab-btn.active {
    color: rgb(var(--color-primary-400));
}

/* Animated underline for active tab */
.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: rgb(var(--color-primary-500));
    animation: tabSlide 0.2s ease;
}

@keyframes tabSlide {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

/* ═══════════════════════════════════════════════
   PULSE DOT
   ═══════════════════════════════════════════════ */
.pulse-dot {
    width: 8px;
    height: 8px;
    background: rgb(var(--color-primary-500));
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

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

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

/* ═══════════════════════════════════════════════
   TOOLTIP (React: AnimatePresence popup)
   ═══════════════════════════════════════════════ */
.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-content {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    padding: 0.75rem;
    background: rgba(var(--color-bg-card), 1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 100;
    margin-bottom: 0.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.tooltip-container:hover .tooltip-content {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* User info tooltip (bigger, with avatar) */
.user-tooltip {
    width: 14rem;
    white-space: normal;
}

.user-tooltip .tooltip-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(var(--color-primary-500), 0.5);
}

/* ═══════════════════════════════════════════════
   SCORE CIRCLE
   ═══════════════════════════════════════════════ */
.score-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.score-critical {
    background: #ef4444;
    color: #000;
}

.score-high {
    background: #f59e0b;
    color: #000;
}

/* ═══════════════════════════════════════════════
   INTERACTIVE 3D ICON (CSS equivalent)
   ═══════════════════════════════════════════════ */
.icon-3d {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 600px;
    animation: iconFloat 6s ease-in-out infinite;
}

.icon-3d-inner {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    position: relative;
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0) rotateX(5deg) rotateY(-5deg);
    }

    50% {
        transform: translateY(-15px) rotateX(-5deg) rotateY(5deg);
    }
}

/* ═══════════════════════════════════════════════
   WAR ROOM GLOBE (Enhanced CSS 3D)
   ═══════════════════════════════════════════════ */
.globe-container {
    perspective: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.globe {
    width: 16rem;
    height: 16rem;
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d;
    animation: globeSpin 40s linear infinite;
}

@keyframes globeSpin {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

.globe-atmosphere {
    position: absolute;
    inset: -20%;
    border-radius: 50%;
    opacity: 0.3;
    filter: blur(24px);
    background: radial-gradient(circle at center, rgba(34, 197, 94, 0.4) 0%, transparent 70%);
    transform: translateZ(-50px);
}

.globe-body {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(34, 197, 94, 0.2);
    background: radial-gradient(circle at 30% 30%, rgba(34, 197, 94, 0.1), rgba(0, 0, 0, 0.9));
    box-shadow: inset 0 0 40px rgba(34, 197, 94, 0.3), 0 0 20px rgba(34, 197, 94, 0.1);
}

.globe-grid {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(34, 197, 94, 0.1);
    border-radius: 50%;
}

.globe-ring-1 {
    position: absolute;
    inset: -15%;
    border: 1px dashed rgba(34, 197, 94, 0.3);
    border-radius: 50%;
    animation: ringRotate1 30s linear infinite;
}

@keyframes ringRotate1 {
    from {
        transform: rotateZ(0deg) rotateX(60deg);
    }

    to {
        transform: rotateZ(-360deg) rotateX(60deg);
    }
}

.globe-ring-2 {
    position: absolute;
    inset: -30%;
    border: 1px dotted rgba(34, 197, 94, 0.2);
    border-radius: 50%;
    transform: rotateX(75deg);
    animation: ringRotate2 50s linear infinite;
}

@keyframes ringRotate2 {
    from {
        transform: rotateX(75deg) rotateZ(0deg);
    }

    to {
        transform: rotateX(75deg) rotateZ(360deg);
    }
}

.globe-hotspot {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    backface-visibility: hidden;
    animation: hotspotPulse 3s ease-in-out infinite;
}

.globe-hotspot.threat {
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
}

.globe-hotspot.defense {
    background: #3b82f6;
    box-shadow: 0 0 8px #3b82f6;
}

@keyframes hotspotPulse {

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

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

.globe-radar {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent 0%, rgba(34, 197, 94, 0.1) 50%, transparent 100%);
    animation: radarSpin 4s linear infinite;
}

@keyframes radarSpin {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

.globe-radar-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(34, 197, 94, 0.3);
    box-shadow: 0 0 15px #22c55e;
}

/* ═══════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════ */
.hero-section {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
    background: rgba(var(--color-bg-base), 0.95);
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--color-primary-500), 0.1);
    transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.hero-section.dismissed {
    max-height: 0;
    min-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-bottom: 0;
    padding: 0;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════
   CANVAS BACKGROUNDS
   ═══════════════════════════════════════════════ */
#cyberGridCanvas,
#plexusCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#cyberGridCanvas {
    z-index: -1;
    opacity: 0.25;
}

#plexusCanvas {
    z-index: -2;
    opacity: 0.25;
}

/* ═══════════════════════════════════════════════
   CUSTOM SCROLLBAR FOR SMALL AREAS
   ═══════════════════════════════════════════════ */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}