/* =========================================
   1. Setup & Variables - Observatory Theme
   ========================================= */
   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Courier+Prime:wght@400;700&family=Source+Code+Pro:wght@300;400;500;600;700&display=swap');

   :root {
       /* Solar Flare Color Palette */
       --flare-orange: #FF6B35;
       --flare-red: #E63946;
       --flare-yellow: #FFB20F;
       --solar-corona: #FFA500;
       
       /* Deep Space Colors */
       --space-black: #0a0e27;
       --space-navy: #1a1f3a;
       --space-blue: #2d3561;
       --nebula-purple: #6a4c93;
       
       /* Observatory Interface */
       --panel-bg: rgba(26, 31, 58, 0.95);
       --panel-border: rgba(255, 107, 53, 0.3);
       --panel-glow: rgba(255, 107, 53, 0.15);
       
       /* Text Colors */
       --primary-text: #e8edf4;
       --secondary-text: #a8b2c8;
       --accent-text: #FF6B35;
       --data-green: #4ecca3;
   }
   
/* =========================================
     2. Reset & Base Styles - Deep Space
     ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
       font-family: 'Source Code Pro', 'Courier New', monospace;
       line-height: 1.7;
       color: var(--primary-text);
       
       /* Deep Space Background with Solar Flares */
       background-color: var(--space-black);
       background-image: 
           radial-gradient(2px 2px at 20% 30%, white, transparent),
           radial-gradient(2px 2px at 60% 70%, white, transparent),
           radial-gradient(1px 1px at 50% 50%, white, transparent),
           radial-gradient(1px 1px at 80% 10%, white, transparent),
           radial-gradient(2px 2px at 90% 60%, white, transparent),
           radial-gradient(1px 1px at 33% 80%, white, transparent),
           radial-gradient(2px 2px at 15% 90%, white, transparent),
           radial-gradient(ellipse at 10% 20%, rgba(255, 107, 53, 0.15), transparent 40%),
           radial-gradient(ellipse at 90% 80%, rgba(230, 57, 70, 0.1), transparent 50%),
           linear-gradient(180deg, var(--space-black) 0%, var(--space-navy) 100%);
       background-size: 
           200% 200%,
           200% 200%,
           200% 200%,
           200% 200%,
           200% 200%,
           200% 200%,
           200% 200%,
           100% 100%,
           100% 100%,
           100% 100%;
       background-attachment: fixed;
       min-height: 100vh;
       position: relative;
   }
   
   /* Animated scan-line effect */
   body::before {
       content: "";
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: repeating-linear-gradient(
           0deg,
           rgba(255, 255, 255, 0.01) 0px,
           rgba(255, 255, 255, 0.01) 1px,
           transparent 1px,
           transparent 2px
       );
       pointer-events: none;
       z-index: 1;
       opacity: 0.3;
   }
   
/* =========================================
     3. Navigation - Observatory Control Panel
     ========================================= */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
       background: linear-gradient(180deg, rgba(10, 14, 39, 0.98) 0%, rgba(26, 31, 58, 0.95) 100%);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border-bottom: 2px solid var(--panel-border);
       box-shadow: 0 4px 30px rgba(255, 107, 53, 0.1), 0 0 40px rgba(255, 107, 53, 0.05);
    z-index: 1000;
    padding: 1rem 0;
       transition: all 0.3s ease;
}

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

.logo {
       font-family: 'JetBrains Mono', monospace;
    font-size: 1.5rem;
       font-weight: 800;
       color: var(--flare-orange);
       letter-spacing: 2px;
       text-transform: uppercase;
       text-shadow: 0 0 20px rgba(255, 107, 53, 0.5), 0 0 40px rgba(255, 107, 53, 0.2);
       position: relative;
   }
   
   .logo::before {
       content: "▸ ";
       color: var(--data-green);
       animation: blink 2s infinite;
   }
   
   @keyframes blink {
       0%, 49% { opacity: 1; }
       50%, 100% { opacity: 0.3; }
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
       color: var(--secondary-text);
       font-weight: 600;
       font-family: 'JetBrains Mono', monospace;
       position: relative;
       font-size: 0.9rem;
       text-transform: uppercase;
       letter-spacing: 1px;
       transition: all 0.3s ease;
       padding: 0.5rem 0;
   }
   
   /* Data terminal underline */
   .nav-link::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 0;
       height: 2px;
       background: linear-gradient(90deg, var(--flare-orange), var(--flare-red));
       box-shadow: 0 0 10px var(--flare-orange);
       transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .nav-link::before {
       content: "[";
       color: var(--panel-border);
       margin-right: 0.3rem;
       opacity: 0;
       transition: opacity 0.3s ease;
}

.nav-link:hover {
       color: var(--flare-orange);
       text-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
   }
   
   .nav-link:hover::after {
       width: 100%;
   }
   
   .nav-link:hover::before {
       opacity: 1;
   }
   
   /* =========================================
      4. Hero Section
      ========================================= */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
       /* Dark mesh background for contrast with light body */
       background: 
           radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
           radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
           radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
       background-color: #0f172a;
    color: white;
    text-align: center;
    padding: 2rem;
       position: relative;
       overflow: hidden;
   }
   
   /* Glowing orb effect */
   .hero::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 600px;
       height: 600px;
       background: var(--primary-gradient);
       filter: blur(100px);
       opacity: 0.2;
       border-radius: 50%;
       z-index: 0;
}

.hero-content {
    max-width: 800px;
       position: relative;
       z-index: 1;
}

.hero-title {
       font-size: 4rem;
       font-weight: 800;
    margin-bottom: 1rem;
       background: var(--primary-gradient);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
    animation: fadeInUp 1s ease;
       letter-spacing: -1px;
}

.hero-subtitle {
    font-size: 1.5rem;
       margin-bottom: 2.5rem;
    opacity: 0.9;
       color: #e2e8f0;
    animation: fadeInUp 1s ease 0.2s backwards;
}

   /* Observatory Command Button */
   .cta-button, .cv-button, .contact-button, .refresh-button {
    display: inline-block;
    padding: 1rem 2.5rem;
       background: linear-gradient(135deg, var(--flare-orange), var(--flare-red));
       color: white;
    text-decoration: none;
       border: 2px solid var(--flare-orange);
       border-radius: 4px;
       font-family: 'JetBrains Mono', monospace;
       font-weight: 700;
       font-size: 0.9rem;
       letter-spacing: 2px;
       text-transform: uppercase;
       box-shadow: 
           0 0 20px rgba(255, 107, 53, 0.4),
           inset 0 1px 0 rgba(255, 255, 255, 0.2);
       cursor: pointer;
       transition: all 0.3s ease;
    animation: fadeInUp 1s ease 0.4s backwards;
       position: relative;
       overflow: hidden;
   }
   
   .cta-button::before, .cv-button::before, .contact-button::before, .refresh-button::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       transform: translate(-50%, -50%);
       transition: width 0.6s, height 0.6s;
   }
   
   .cta-button:hover::before, .cv-button:hover::before, .contact-button:hover::before, .refresh-button:hover::before {
       width: 300px;
       height: 300px;
   }
   
   .cta-button:hover, .cv-button:hover, .contact-button:hover, .refresh-button:hover {
       transform: translateY(-2px);
       box-shadow: 
           0 0 40px rgba(255, 107, 53, 0.6),
           0 10px 30px rgba(255, 107, 53, 0.3),
           inset 0 1px 0 rgba(255, 255, 255, 0.3);
       border-color: var(--flare-yellow);
   }
   
   /* =========================================
      5. General Layout & Sections
      ========================================= */
.section {
       padding: 6rem 2rem;
       position: relative; /* For z-index stacking */
   }
   
   .papers-section {
       padding-top: 8rem; /* Extra padding for first section */
       /* Removed background-color to let body gradient show through */
}

.container {
    max-width: 1600px;
    margin: 0 auto;
}

.section-title {
       font-family: 'Courier Prime', 'Courier New', monospace;
       font-size: 2.8rem;
       font-weight: 700;
       margin-bottom: 3rem;
    text-align: center;
       color: var(--flare-orange);
       letter-spacing: 4px;
       text-transform: uppercase;
       text-shadow: 0 0 20px rgba(255, 107, 53, 0.4);
       position: relative;
       display: inline-block;
       width: 100%;
   }
   
   .section-title::before {
       content: "// ";
       color: var(--secondary-text);
       opacity: 0.5;
   }
   
   .section-title::after {
       content: '';
       display: block;
       width: 100px;
       height: 3px;
       background: linear-gradient(90deg, transparent, var(--flare-orange), transparent);
       margin: 1rem auto 0;
       box-shadow: 0 0 10px var(--flare-orange);
   }
   
/* =========================================
     6. Observatory Panel Styles
     ========================================= */
   .project-card, .paper-card, .spaceweather-card, .stats-card {
       background: var(--panel-bg);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border-radius: 8px;
       border: 2px solid var(--panel-border);
       box-shadow: 
           0 0 20px var(--panel-glow),
           inset 0 1px 0 rgba(255, 107, 53, 0.1);
       padding: 2rem;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
       display: flex;
       flex-direction: column;
   }
   
   /* Solar flare glow effect on hover */
   .project-card::before, .paper-card::before, .spaceweather-card::before {
       content: "";
       position: absolute;
       inset: -2px;
       border-radius: 8px;
       padding: 2px;
       background: linear-gradient(135deg, var(--flare-orange), var(--flare-red), var(--solar-corona));
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       mask-composite: exclude;
       opacity: 0;
       transition: opacity 0.4s ease;
       pointer-events: none;
   }
   
   .project-card:hover, .paper-card:hover, .spaceweather-card:hover {
       transform: translateY(-4px);
       box-shadow: 
           0 0 40px var(--flare-orange),
           0 20px 40px rgba(255, 107, 53, 0.2),
           inset 0 1px 0 rgba(255, 107, 53, 0.2);
       border-color: var(--flare-orange);
   }
   
   .project-card:hover::before, .paper-card:hover::before, .spaceweather-card:hover::before {
       opacity: 1;
   }
   
   .project-card h3, .paper-card h3, .spaceweather-card h3 {
       font-family: 'JetBrains Mono', monospace;
       font-size: 1.1rem;
       margin-bottom: 1rem;
       color: var(--flare-orange);
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       line-height: 1.4;
       word-wrap: break-word;
       overflow-wrap: break-word;
   }
   
   .project-card h3::before, .paper-card h3::before, .spaceweather-card h3::before {
       content: "[ ";
       color: var(--data-green);
       white-space: nowrap;
   }
   
   .project-card h3::after, .paper-card h3::after, .spaceweather-card h3::after {
       content: " ]";
       color: var(--data-green);
       white-space: nowrap;
   }
   
   .project-card p, .paper-card p {
       color: var(--secondary-text);
       margin-bottom: 1.5rem;
       line-height: 1.7;
       font-size: 0.95rem;
   }
   
   /* =========================================
      7. GitHub Stats & Badges
      ========================================= */
   .github-stats {
       margin: 2rem 0 3rem 0;
   }
   
   .stats-card {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
       gap: 2rem;
    text-align: center;
}

   .stat-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }
   
   .stat-value {
       font-family: 'JetBrains Mono', monospace;
       font-size: 3rem;
       font-weight: 800;
       margin-bottom: 0.5rem;
       color: var(--flare-orange);
       text-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
       animation: pulse-glow 2s ease-in-out infinite;
   }
   
   .stat-label {
       font-family: 'Source Code Pro', monospace;
       font-size: 0.85rem;
       color: var(--secondary-text);
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 2px;
   }
   
   .stat-label::before {
       content: "> ";
       color: var(--data-green);
   }
   
   .stat-item.languages {
       grid-column: 1 / -1;
   }
   
   .language-badges {
       display: flex;
       flex-wrap: wrap;
       gap: 0.75rem;
       justify-content: center;
       margin-top: 1rem;
   }
   
   .language-badge, .repo-language {
       padding: 0.5em 1.2em;
       border-radius: 4px;
       color: var(--primary-text);
       background: rgba(255, 107, 53, 0.1);
       border: 1px solid rgba(255, 107, 53, 0.3);
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.75rem;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 1px;
       box-shadow: 0 0 10px rgba(255, 107, 53, 0.1);
       transition: all 0.3s ease;
   }
   
   .language-badge:hover, .repo-language:hover {
       background: rgba(255, 107, 53, 0.2);
       border-color: var(--flare-orange);
       box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
       transform: translateY(-2px);
   }
   
   /* =========================================
      8. Projects Grid & Meta
      ========================================= */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

   .repo-meta {
       display: flex;
       justify-content: space-between;
       align-items: center;
       margin-bottom: 1.5rem;
       margin-top: auto;
   }
   
   .repo-stats {
       display: flex;
       gap: 1rem;
       font-size: 0.875rem;
       color: var(--light-text);
       font-weight: 500;
}

.project-link {
       color: #6366f1;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
       display: inline-flex;
       align-items: center;
}

.project-link:hover {
       color: #d946ef;
   }
   
   /* =========================================
      9. Papers Section
      ========================================= */
   .papers-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 2rem;
       margin-top: 3rem;
   }
   
   .paper-authors {
       font-family: 'Source Code Pro', monospace;
       color: var(--secondary-text);
       font-style: italic;
       margin-bottom: 0.5rem;
       font-size: 0.9rem;
       letter-spacing: 0.3px;
   }
   
   .paper-authors::before {
       content: "AUTHORS: ";
       font-style: normal;
       color: var(--data-green);
       font-weight: 700;
       letter-spacing: 1px;
   }
   
   .paper-publication {
       font-family: 'JetBrains Mono', monospace;
       color: var(--flare-orange);
       font-size: 0.85rem;
       margin-bottom: 1rem;
       font-weight: 600;
       letter-spacing: 1px;
       text-transform: uppercase;
   }
   
   .paper-publication::before {
       content: "[";
       color: var(--data-green);
   }
   
   .paper-publication::after {
       content: "]";
       color: var(--data-green);
   }
   
   .paper-abstract {
       font-family: 'Source Code Pro', monospace;
       color: var(--primary-text);
       font-size: 0.9rem;
       line-height: 1.8;
       margin-bottom: 1.5rem;
       padding: 1.5rem;
       background: rgba(10, 14, 39, 0.6);
       border-radius: 6px;
       border: 1px solid rgba(255, 107, 53, 0.2);
       letter-spacing: 0.3px;
   }
   
   .paper-abstract strong {
       color: var(--data-green);
       display: block;
       margin-bottom: 0.7rem;
       font-family: 'JetBrains Mono', monospace;
       letter-spacing: 1px;
       text-transform: uppercase;
   }
   
   .paper-abstract strong::before {
       content: "// ";
       opacity: 0.7;
   }
   
   .abstract-toggle {
       background: rgba(255, 107, 53, 0.1);
       border: 1px solid rgba(255, 107, 53, 0.3);
       border-radius: 4px;
       color: var(--flare-orange);
       cursor: pointer;
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.75rem;
       font-weight: 700;
       padding: 0.4em 0.8em;
       margin-left: 0.5rem;
       text-transform: uppercase;
       letter-spacing: 1px;
       transition: all 0.3s ease;
   }
   
   .abstract-toggle:hover {
       background: rgba(255, 107, 53, 0.2);
       border-color: var(--flare-orange);
       box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
   }
   
   .paper-links {
       display: flex;
       gap: 1rem;
       margin-top: auto;
   }
   
   .paper-link {
       font-family: 'JetBrains Mono', monospace;
       color: var(--data-green);
       text-decoration: none;
       font-weight: 600;
       transition: all 0.3s ease;
       font-size: 0.85rem;
       letter-spacing: 1px;
       text-transform: uppercase;
       border: 1px solid rgba(78, 204, 163, 0.3);
       padding: 0.5em 1em;
       border-radius: 4px;
       background: rgba(78, 204, 163, 0.1);
   }
   
   .paper-link:hover {
       color: var(--flare-orange);
       border-color: var(--flare-orange);
       background: rgba(255, 107, 53, 0.1);
       box-shadow: 0 0 15px rgba(255, 107, 53, 0.2);
   }
   
   /* =========================================
      10. Space Weather Section
      ========================================= */
   .spaceweather-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 1.5rem;
       margin-bottom: 2rem;
   }
   
   .spaceweather-card {
       text-align: center;
   }
   
   .spaceweather-info {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 1rem;
       width: 100%; /* Ensure container takes full width */
   }
   
   /* FIXED: Image squishing prevention */
   .sdo-image-container {
       width: 100%;
   }
   
   .sdo-image, .sxr-overview-image {
       width: 100%;
       height: auto; /* Maintain aspect ratio */
       object-fit: contain; /* Prevent squishing */
       border-radius: 12px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease;
       display: block; /* Removes bottom whitespace */
   }
   
   .sdo-image:hover {
       transform: scale(1.03);
   }
   
   .spaceweather-value {
       display: flex;
       align-items: baseline;
       gap: 0.5rem;
       margin: 1rem 0;
   }
   
   .value-large {
       font-size: 3rem;
       font-weight: 800;
       background: var(--primary-gradient);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
   }
   
   /* Observatory Alert Badges for Flare Classes */
   .flare-class-x { 
       background: rgba(230, 57, 70, 0.2); 
       color: #ff4d4d; 
       border: 2px solid rgba(230, 57, 70, 0.5); 
       border-radius: 4px; 
       padding: 0.3em 1em; 
       font-family: 'JetBrains Mono', monospace;
       font-weight: 700;
       letter-spacing: 2px;
       box-shadow: 0 0 20px rgba(230, 57, 70, 0.4);
       animation: pulse-glow 2s ease-in-out infinite;
   }
   .flare-class-m { 
       background: rgba(255, 178, 15, 0.2); 
       color: #ffb20f; 
       border: 2px solid rgba(255, 178, 15, 0.5); 
       border-radius: 4px; 
       padding: 0.3em 1em; 
       font-family: 'JetBrains Mono', monospace;
       font-weight: 700;
       letter-spacing: 2px;
       box-shadow: 0 0 15px rgba(255, 178, 15, 0.3);
   }
   .flare-class-c { 
       background: rgba(255, 107, 53, 0.2); 
       color: #ff6b35; 
       border: 2px solid rgba(255, 107, 53, 0.5); 
       border-radius: 4px; 
       padding: 0.3em 1em; 
       font-family: 'JetBrains Mono', monospace;
       font-weight: 700;
       letter-spacing: 2px;
       box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
   }
   .flare-class-b { 
       background: rgba(78, 204, 163, 0.2); 
       color: #4ecca3; 
       border: 2px solid rgba(78, 204, 163, 0.5); 
       border-radius: 4px; 
       padding: 0.3em 1em; 
       font-family: 'JetBrains Mono', monospace;
       font-weight: 700;
       letter-spacing: 2px;
   }
   .flare-class-a { 
       background: rgba(168, 178, 200, 0.2); 
       color: #a8b2c8; 
       border: 2px solid rgba(168, 178, 200, 0.5); 
       border-radius: 4px; 
       padding: 0.3em 1em; 
       font-family: 'JetBrains Mono', monospace;
       font-weight: 700;
       letter-spacing: 2px;
   }
   
   .spaceweather-class {
       font-family: 'Source Code Pro', monospace;
       font-size: 1.05rem;
       color: var(--primary-text);
       letter-spacing: 0.5px;
   }
   
   .spaceweather-class strong {
       color: var(--flare-orange);
       text-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
   }
   
   .spaceweather-time {
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.8rem;
       color: var(--secondary-text);
       letter-spacing: 1px;
   }
   
   .spaceweather-time::before {
       content: "[";
       color: var(--data-green);
       margin-right: 0.2em;
   }
   
   .spaceweather-time::after {
       content: "]";
       color: var(--data-green);
       margin-left: 0.2em;
   }
   
   .spaceweather-controls {
       text-align: center;
       margin-top: 3rem;
   }
   
   .auto-refresh-note {
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.8rem;
       color: var(--secondary-text);
       margin-top: 1rem;
       letter-spacing: 1px;
   }
   
   .auto-refresh-note::before {
       content: "[ ";
       color: var(--data-green);
   }
   
   .auto-refresh-note::after {
       content: " ]";
       color: var(--data-green);
   }
   
   .sdo-image-note {
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.75rem;
       color: var(--secondary-text);
       margin-top: 0.5rem;
       letter-spacing: 1px;
       text-transform: uppercase;
   }
   
   /* =========================================
      SOL.SWx App Section
      ========================================= */
   .solswx-content {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 4rem;
       align-items: center;
   }

   .solswx-tagline {
       font-family: 'JetBrains Mono', monospace;
       font-size: 1rem;
       color: var(--data-green);
       margin-bottom: 1.2rem;
       letter-spacing: 1px;
       text-transform: uppercase;
   }

   .solswx-text {
       font-family: 'Source Code Pro', monospace;
       font-size: 0.95rem;
       color: var(--secondary-text);
       line-height: 1.8;
       margin-bottom: 2rem;
   }

   .solswx-features {
       display: flex;
       flex-wrap: wrap;
       gap: 0.6rem;
       margin-bottom: 2rem;
   }

   .solswx-feature {
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.75rem;
       font-weight: 600;
       letter-spacing: 1px;
       text-transform: uppercase;
       padding: 0.4em 0.9em;
       border-radius: 4px;
       background: rgba(255, 107, 53, 0.1);
       border: 1px solid rgba(255, 107, 53, 0.3);
       color: var(--flare-orange);
   }

   .solswx-links {
       display: flex;
       gap: 1rem;
       flex-wrap: wrap;
   }

   .solswx-gh-button {
       background: linear-gradient(135deg, var(--space-blue), var(--nebula-purple)) !important;
       border-color: var(--nebula-purple) !important;
       box-shadow: 0 0 20px rgba(106, 76, 147, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
   }

   .solswx-gh-button:hover {
       box-shadow: 0 0 40px rgba(106, 76, 147, 0.6), 0 10px 30px rgba(106, 76, 147, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
       border-color: #a78bfa !important;
   }

   .solswx-screenshots {
       overflow: visible;
   }

   .screenshot-carousel {
       display: flex;
       align-items: center;
       gap: 1rem;
   }

   .carousel-window {
       position: relative;
       flex: 1;
       display: flex;
       justify-content: center;
   }

   .app-screenshot {
       width: 100%;
       max-width: 380px;
       border-radius: 20px;
       border: 2px solid var(--panel-border);
       box-shadow: 0 0 30px var(--panel-glow);
       display: none;
   }

   .app-screenshot.active {
       display: block;
       animation: fadeIn 0.4s ease;
   }

   .carousel-btn {
       background: rgba(255, 107, 53, 0.1);
       border: 2px solid var(--panel-border);
       border-radius: 4px;
       color: var(--flare-orange);
       font-size: 2.5rem;
       line-height: 1;
       padding: 0.3rem 0.7rem;
       cursor: pointer;
       transition: all 0.3s ease;
       flex-shrink: 0;
   }

   .carousel-btn:hover {
       background: rgba(255, 107, 53, 0.2);
       border-color: var(--flare-orange);
       box-shadow: 0 0 15px rgba(255, 107, 53, 0.3);
   }

   .carousel-dots {
       display: flex;
       justify-content: center;
       gap: 0.5rem;
       margin-top: 1rem;
   }

   .carousel-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: var(--panel-border);
       cursor: pointer;
       transition: all 0.3s ease;
   }

   .carousel-dot.active {
       background: var(--flare-orange);
       box-shadow: 0 0 8px rgba(255, 107, 53, 0.6);
   }

   @media (max-width: 768px) {
       .solswx-content {
           grid-template-columns: 1fr;
           gap: 2rem;
       }
   }

   /* =========================================
      13. Research Profiles Section
      ========================================= */
   .research-profiles-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 2rem;
       margin-bottom: 2rem;
   }
   
   .research-profile-card {
       background: var(--panel-bg);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border-radius: 8px;
       border: 2px solid var(--panel-border);
       box-shadow: 
           0 0 20px var(--panel-glow),
           inset 0 1px 0 rgba(255, 107, 53, 0.1);
       padding: 2rem;
       transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       display: flex;
       flex-direction: column;
   }
   
   .research-profile-card:hover {
       transform: translateY(-4px);
       box-shadow: 
           0 0 40px var(--flare-orange),
           0 20px 40px rgba(255, 107, 53, 0.2),
           inset 0 1px 0 rgba(255, 107, 53, 0.2);
       border-color: var(--flare-orange);
   }
   
   .profile-header {
       display: flex;
       align-items: center;
       gap: 1rem;
       margin-bottom: 1.5rem;
       padding-bottom: 1rem;
       border-bottom: 1px solid var(--panel-border);
   }
   
   .profile-icon {
       font-size: 2.5rem;
       filter: drop-shadow(0 0 10px var(--flare-orange));
   }
   
   .profile-header h3 {
       font-family: 'JetBrains Mono', monospace;
       font-size: 1.3rem;
       color: var(--flare-orange);
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 1px;
       margin: 0;
   }
   
   .profile-stats {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
       gap: 1.5rem;
       margin-bottom: 1.5rem;
   }
   
   .profile-stat {
       text-align: center;
   }
   
   .profile-stat .stat-value {
       font-family: 'JetBrains Mono', monospace;
       font-size: 1.8rem;
       font-weight: 800;
       color: var(--data-green);
       text-shadow: 0 0 15px rgba(78, 204, 163, 0.5);
       margin-bottom: 0.3rem;
   }
   
   .profile-stat .stat-label {
       font-family: 'Source Code Pro', monospace;
       font-size: 0.75rem;
       color: var(--secondary-text);
       text-transform: uppercase;
       letter-spacing: 1px;
   }
   
   .profile-stat .stat-label::before {
       content: none;
   }
   
   .stat-note {
       font-family: 'Source Code Pro', monospace;
       font-size: 0.7rem;
       color: var(--secondary-text);
       margin-top: 0.3rem;
       opacity: 0.7;
       font-style: italic;
   }
   
   .profile-link {
       font-family: 'JetBrains Mono', monospace;
       color: var(--data-green);
       text-decoration: none;
       font-weight: 600;
       font-size: 0.9rem;
       letter-spacing: 1px;
       text-transform: uppercase;
       border: 1px solid rgba(78, 204, 163, 0.3);
       padding: 0.8em 1.5em;
       border-radius: 4px;
       background: rgba(78, 204, 163, 0.1);
       text-align: center;
       margin-top: auto;
       transition: all 0.3s ease;
       display: inline-block;
   }
   
   .profile-link:hover {
       color: var(--flare-orange);
       border-color: var(--flare-orange);
       background: rgba(255, 107, 53, 0.1);
       box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
       transform: translateX(5px);
   }
   
   .research-note {
       background: rgba(78, 204, 163, 0.1);
       border: 1px solid rgba(78, 204, 163, 0.3);
       border-radius: 8px;
       padding: 1.5rem;
       text-align: center;
       font-family: 'Source Code Pro', monospace;
       font-size: 0.9rem;
       color: var(--secondary-text);
   }
   
   .research-note strong {
       color: var(--data-green);
   }
   
   /* Enhanced GitHub Stats */
   .enhanced-stats {
       background: var(--panel-bg);
       border: 2px solid var(--panel-border);
       box-shadow: 
           0 0 20px var(--panel-glow),
           inset 0 1px 0 rgba(255, 107, 53, 0.1);
   }
   
   .featured-repo {
       grid-column: span 2;
       background: rgba(255, 107, 53, 0.05);
       border-radius: 8px;
       padding: 1rem;
   }
   
   .featured-repo .stat-value {
       font-size: 2rem;
   }
   
   .github-profile-link {
       text-align: center;
       margin-top: 1.5rem;
   }
   
   .stats-error {
       text-align: center;
       padding: 2rem;
       color: var(--secondary-text);
       font-family: 'Source Code Pro', monospace;
   }
   
   .stats-error a {
       color: var(--flare-orange);
       text-decoration: none;
       font-weight: 600;
   }
   
   .stats-error a:hover {
       text-decoration: underline;
   }
   
   /* =========================================
      11. CV Section
      ========================================= */
   .cv-content {
       max-width: 900px;
       margin: 0 auto;
       text-align: center;
   }
   
   .cv-text {
       font-family: 'Source Code Pro', monospace;
       font-size: 1.05rem;
       color: var(--secondary-text);
       margin-bottom: 2rem;
       letter-spacing: 0.5px;
   }
   
   .cv-text::before {
       content: ">> ";
       color: var(--data-green);
   }
   
   .cv-links {
       display: flex;
       gap: 1.5rem;
       justify-content: center;
       flex-wrap: wrap;
       margin-bottom: 3rem;
   }
   
   .cv-preview {
       width: 100%;
       height: 800px;
       border: 2px solid var(--panel-border);
       border-radius: 8px;
       box-shadow: 
           0 0 30px var(--panel-glow),
           inset 0 1px 0 rgba(255, 107, 53, 0.1);
       background: rgba(26, 31, 58, 0.5);
   }
   
   /* =========================================
      12. Contact & Footer
      ========================================= */
.contact-section {
       background: linear-gradient(180deg, transparent 0%, rgba(26, 31, 58, 0.5) 100%);
       backdrop-filter: blur(10px);
    text-align: center;
}

.contact-text {
       font-family: 'Source Code Pro', monospace;
       font-size: 1.1rem;
       color: var(--secondary-text);
       margin-bottom: 2.5rem;
       letter-spacing: 0.5px;
   }
   
   .contact-text::before {
       content: ">> ";
       color: var(--data-green);
}

.contact-links {
    display: flex;
       gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

   /* =========================================
      15. Modern Extras & Scrollbar
      ========================================= */
   /* Custom Scrollbar - Observatory Console */
   ::-webkit-scrollbar {
       width: 12px;
   }

   ::-webkit-scrollbar-track {
       background: var(--space-black);
       border-left: 1px solid var(--panel-border);
   }

   ::-webkit-scrollbar-thumb {
       background: linear-gradient(to bottom, var(--flare-orange), var(--flare-red));
       border-radius: 2px;
       border: 2px solid var(--space-black);
       box-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
   }

   ::-webkit-scrollbar-thumb:hover {
       background: linear-gradient(to bottom, var(--flare-yellow), var(--solar-corona));
       box-shadow: 0 0 20px rgba(255, 107, 53, 0.7);
   }

   /* Pulsing effect for live data */
   @keyframes pulse-glow {
       0% { text-shadow: 0 0 5px rgba(99, 102, 241, 0.2); }
       50% { text-shadow: 0 0 20px rgba(99, 102, 241, 0.6); }
       100% { text-shadow: 0 0 5px rgba(99, 102, 241, 0.2); }
   }

   .value-large {
       animation: pulse-glow 3s infinite ease-in-out;
   }

   /* Footer Enhancements */
.footer {
       background: var(--panel-bg);
       backdrop-filter: blur(20px);
       border-top: 2px solid var(--panel-border);
       position: relative;
       color: var(--secondary-text);
    text-align: center;
       padding: 3rem 2rem;
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.85rem;
       letter-spacing: 1px;
   }

   .footer::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 2px;
       background: linear-gradient(90deg, transparent, var(--flare-orange), transparent);
       box-shadow: 0 0 10px var(--flare-orange);
   }
   
   .footer p::before {
       content: "// ";
       color: var(--data-green);
       opacity: 0.7;
   }
   
   /* =========================================
      13. Modals & Extras
      ========================================= */
   /* SXR Modal Styles */
   .sxr-modal-overlay {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(10, 14, 39, 0.95);
       backdrop-filter: blur(20px);
       display: flex;
       justify-content: center;
       align-items: center;
       z-index: 10000;
       animation: fadeIn 0.3s ease;
   }
   
   .sxr-modal-content {
       position: relative;
       max-width: 95%;
       max-height: 95%;
       border: 2px solid var(--panel-border);
       border-radius: 8px;
       padding: 1rem;
       background: var(--panel-bg);
       box-shadow: 
           0 0 60px var(--flare-orange),
           0 25px 50px -12px rgba(255, 107, 53, 0.4);
   }
   
   .sxr-modal-image {
       border-radius: 6px;
       max-width: 100%;
       max-height: 85vh;
       object-fit: contain;
   }
   
   .sxr-modal-close {
       position: absolute;
       top: -50px;
       right: 0;
       color: var(--flare-orange);
       font-family: 'JetBrains Mono', monospace;
       font-size: 2rem;
       font-weight: 700;
       cursor: pointer;
       transition: all 0.3s ease;
       line-height: 1;
       padding: 0.5rem;
       background: var(--panel-bg);
       border: 2px solid var(--panel-border);
       border-radius: 4px;
   }
   
   .sxr-modal-close:hover {
       color: var(--flare-red);
       box-shadow: 0 0 20px var(--flare-orange);
       transform: scale(1.1);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
           transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

   @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
   }
   
   /* =========================================
      14. Responsive Design
      ========================================= */
   @media (max-width: 1024px) {
       .spaceweather-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }
   
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

       .nav-menu {
           gap: 1rem;
           font-size: 0.9rem;
    }

       .projects-grid, .papers-grid {
           grid-template-columns: 1fr;
    }

       .stats-card {
           grid-template-columns: repeat(2, 1fr);
    }

       .cv-preview {
           height: 500px;
    }
}

@media (max-width: 480px) {
    .nav-container {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-menu {
           width: 100%;
           justify-content: space-around;
       }
       
       .spaceweather-grid {
           grid-template-columns: 1fr;
       }
       
       .stats-card {
           grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 2rem;
    }
}