@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700&display=swap');

        :root {
            --accent-red: #9F1239;
            --accent-gold: #D4AF37;
        }

        * { scroll-behavior: smooth; }

        body {
            font-family: 'Inter', system-ui, sans-serif;
        }

        .heading-serif {
            font-family: 'Playfair Display', Georgia, serif;
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .section-header {
            font-size: 2.75rem;
            line-height: 3rem;
            font-weight: 700;
            letter-spacing: -0.045em;
        }

        @media (max-width: 768px) {
            .section-header { font-size: 2rem; line-height: 2.25rem; }
        }

        .dashboard-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .dashboard-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
        }

        .glass {
            background: rgba(15, 23, 42, 0.75);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(148, 163, 184, 0.1);
        }

        .project-card {
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        border-color 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .project-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);
            border-color: #9F1239;
        }
        .project-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(to right, #9F1239, #D4AF37);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .project-card:hover::before { opacity: 1; }

        .nav-link {
            transition: all 0.2s ease;
            position: relative;
        }
        .nav-link:hover { color: #D4AF37; }
        .nav-link.active { color: #D4AF37; font-weight: 500; }

        .metric-value { font-variant-numeric: tabular-nums; }

        .timeline-item { transition: all 0.3s ease; }
        .timeline-item:hover { transform: translateX(4px); }

        .modal { animation: modalEnter 0.2s ease forwards; }
        @keyframes modalEnter {
            from { opacity: 0; transform: translateY(20px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .stat-number { font-variant-numeric: tabular-nums; }

        .cosmic-bg {
            background: radial-gradient(circle at 50% 30%, #1e2937 0%, #0f172a 50%, #020617 100%);
        }

        .gold-gradient {
            background: linear-gradient(135deg, #D4AF37, #F59E0B);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .russian-red { color: #9F1239; }

        .custom-svg {
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
        }
        .project-card:hover .custom-svg { transform: scale(1.03); }

        .plasma-glow { animation: plasma-pulse 3s ease-in-out infinite; }
        @keyframes plasma-pulse {
            0%, 100% { opacity: 0.85; filter: blur(0px); }
            50% { opacity: 1; filter: blur(2px); }
        }

        .ice-wave { animation: ice-break 2.5s ease-in-out infinite; }
        @keyframes ice-break {
            0%, 100% { opacity: 0.5; transform: translateX(0); }
            50% { opacity: 0.8; transform: translateX(3px); }
        }

        .satellite-signal { animation: signal-pulse 2s ease-out infinite; }
        @keyframes signal-pulse {
            0% { opacity: 0.6; }
            50% { opacity: 0.2; }
            100% { opacity: 0.6; }
        }

        .filter-chip { transition: all 0.2s ease; }
        .filter-chip.active {
            background-color: #9F1239;
            color: white;
            border-color: #9F1239;
        }

        .data-table th {
            cursor: pointer;
            user-select: none;
            transition: color 0.2s ease;
        }
        .data-table th:hover { color: #D4AF37; }

        .section-divider {
            background: linear-gradient(to right, transparent, #334155, transparent);
        }

        .content-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }
        .content-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 40px -10px rgb(0 0 0 / 0.3);
            border-color: rgba(159, 18, 57, 0.5);
        }

        .topic-icon {
            width: 56px; height: 56px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 16px;
            font-size: 1.5rem;
        }

        /* Mobile hamburger */
        .mobile-menu { display: none; }
        .mobile-menu.open { display: flex; }

        /* Back to top button */
        #backToTop {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        /* Skip to content for accessibility */
        .skip-link {
            position: absolute;
            top: -100%;
            left: 50%;
            transform: translateX(-50%);
            background: #9F1239;
            color: white;
            padding: 8px 16px;
            border-radius: 0 0 8px 8px;
            z-index: 999;
            font-size: 14px;
        }
        .skip-link:focus { top: 0; }

        /* Chart.js Canvas Size Constraints - Fix for infinite expansion */
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 100%;
        }

        .chart-container canvas {
            max-height: 400px !important;
        }

        #benefitChart {
            max-height: 300px !important;
        }

        #domainChart {
            max-height: 350px !important;
        }