@charset "UTF-8";
/* ========================================
   KEVLAR 3D SUPREMACY - ELITE CSS
   RGB Glow Effects & Ultra Premium Styling
   Futuristic Hexagon Background
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Premium Cosmic Palette - Easy on the eyes */
    --gold: #e8c547;
    --gold-dark: #c9a227;
    --gold-light: #f5d76e;
    --cyan: #64d2ff;
    --cyan-dark: #3a9ec7;
    --cosmic-purple: #7b68ee;
    --cosmic-blue: #0d1a2d;
    --cosmic-deep: #050a12;
    --nebula-pink: #9d7cbf;
    --star-white: #e8e6f2;
    --black: #030508;
    --gray-900: #0a0f1a;
    --gray-800: #151c2c;
    --gray-700: #1f2940;
    --gray-600: #2d3a54;
    --gray-500: #5a6785;
    --gray-400: #8892a8;
    --gray-300: #b8c0d2;
}

body {
    font-family: 'Rajdhani', sans-serif;
    background: var(--cosmic-deep);
    color: var(--star-white);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}



/* ========================================
   SPIDER WEB PURPLE BACKGROUND
   ======================================== */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 50% 50%,
            rgba(120, 40, 200, 0.18) 0%,
            rgba(80, 20, 140, 0.12) 30%,
            rgba(40, 10, 80, 0.08) 60%,
            transparent 80%),
        radial-gradient(ellipse at center,
            #0a0414 0%,
            #06020e 100%);
    z-index: -3;
    pointer-events: none;
}

/* Animated purple orbs */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 20% 60% at 8% 50%, rgba(160, 60, 255, 0.10) 0%, transparent 60%),
        radial-gradient(ellipse 20% 60% at 92% 50%, rgba(100, 30, 200, 0.08) 0%, transparent 60%),
        radial-gradient(ellipse 30% 30% at 25% 20%, rgba(180, 80, 255, 0.07) 0%, transparent 50%),
        radial-gradient(ellipse 30% 30% at 75% 80%, rgba(140, 50, 220, 0.07) 0%, transparent 50%),
        linear-gradient(to bottom, rgba(6, 2, 14, 0.9) 0%, transparent 12%, transparent 88%, rgba(6, 2, 14, 0.9) 100%);
    z-index: -2;
    pointer-events: none;
    animation: ambientPulse 10s ease-in-out infinite;
}

@keyframes ambientPulse {

    0%,
    100% {
        opacity: 1;
        filter: brightness(1);
    }

    50% {
        opacity: 0.85;
        filter: brightness(1.1);
    }
}

/* Spider Web Pattern Overlay */
.spider-web-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.08;
    background-image:
        /* Radial web lines */
        repeating-conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(255, 255, 255, 0.1) 0.5deg,
            transparent 1deg,
            transparent 22.5deg),
        /* Concentric circles */
        repeating-radial-gradient(circle at 50% 50%,
            transparent 0px,
            transparent 80px,
            rgba(255, 255, 255, 0.05) 81px,
            rgba(255, 255, 255, 0.05) 82px,
            transparent 83px);
}

/* Elite Badge (replacement for nasa-badge) */
.elite-badge {
    display: inline-block;
    padding: 0.5rem 2rem;
    background: linear-gradient(90deg, rgba(232, 197, 71, 0.15), rgba(100, 210, 255, 0.15), rgba(232, 197, 71, 0.15));
    background-size: 200% 100%;
    border: 1px solid;
    border-image: linear-gradient(90deg, var(--gold), var(--cyan), var(--gold)) 1;
    margin-bottom: 1rem;
    animation: eliteBorderShift 4s ease-in-out infinite, borderPulse 2s infinite;
    position: relative;
}

.elite-badge::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, rgba(232, 197, 71, 0.3), rgba(100, 210, 255, 0.3), rgba(232, 197, 71, 0.3));
    background-size: 200% 100%;
    filter: blur(8px);
    z-index: -1;
    animation: eliteBorderShift 4s ease-in-out infinite;
}

.elite-badge span {
    font-size: 0.8rem;
    background: linear-gradient(90deg, var(--gold), var(--cyan), var(--gold));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: eliteBorderShift 4s ease-in-out infinite;
}

@keyframes eliteBorderShift {

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

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

/* Floating Light Orbs Animation */
@keyframes floatOrb {

    0%,
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0.6;
    }

    25% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-10px) translateX(-10px);
        opacity: 0.5;
    }

    75% {
        transform: translateY(-30px) translateX(5px);
        opacity: 0.7;
    }
}

/* Tech Grid Lines Overlay */
.tech-grid-overlay {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(100, 210, 255, 0.02) 1px, transparent 1px),
        linear-gradient(rgba(100, 210, 255, 0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
}

/* ========================================
   ANIMATED GLOW BOXES - Colored Light Effects
   4 variants: Blue, Red, Orange, RGB
   ======================================== */

/* Base glow box style */
.glow-box {
    position: relative;
    background: rgba(10, 15, 25, 0.95);
    border-radius: 8px;
    overflow: visible;
}

.glow-box::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 11px;
    z-index: -1;

}

/* ===== BLUE/CYAN GLOW BOX ===== */
.glow-box-blue::before {
    background: linear-gradient(90deg,
            #00ffff, #0088ff, #00ffff, #0088ff, #00ffff);
    background-size: 400% 100%;
    animation: blueGlowMove 3s linear infinite, glowBoxPulse 2s ease-in-out infinite;

}

.glow-box-blue::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;

    pointer-events: none;
}

@keyframes blueGlowMove {
    0% {
        background-position: 0% 50%;
    }

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

/* ===== RED GLOW BOX ===== */
.glow-box-red::before {
    background: linear-gradient(90deg,
            #ff0040, #ff4444, #ff0066, #ff2222, #ff0040);
    background-size: 400% 100%;
    animation: redGlowMove 2.5s linear infinite, glowBoxPulse 2s ease-in-out infinite;

}

.glow-box-red::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;

    pointer-events: none;
}

@keyframes redGlowMove {
    0% {
        background-position: 0% 50%;
    }

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

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

/* ===== ORANGE/GOLD GLOW BOX ===== */
.glow-box-orange::before {
    background: linear-gradient(90deg,
            #ff8800, #ffaa00, #ff6600, #ffcc00, #ff8800);
    background-size: 400% 100%;
    animation: orangeGlowMove 3.5s linear infinite, glowBoxPulse 2.5s ease-in-out infinite;

}

.glow-box-orange::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;

    pointer-events: none;
}

@keyframes orangeGlowMove {
    0% {
        background-position: 0% 50%;
    }

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

/* ===== RGB CYCLING GLOW BOX ===== */
.glow-box-rgb::before {
    background: linear-gradient(90deg,
            #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0088ff, #8800ff, #ff00ff, #ff0000);
    background-size: 800% 100%;
    animation: rgbGlowMove 4s linear infinite;

}

.glow-box-rgb::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(135deg,
            rgba(255, 0, 0, 0.03),
            rgba(0, 255, 0, 0.03),
            rgba(0, 0, 255, 0.03));
    animation: rgbInnerGlow 6s linear infinite;
    pointer-events: none;
}

@keyframes rgbGlowMove {
    0% {
        background-position: 0% 50%;
    }

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

@keyframes rgbInnerGlow {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Pulse animation for all glow boxes */
@keyframes glowBoxPulse {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.3);
    }
}

/* ===== APPLY GLOW TO EXISTING CARDS ===== */

/* Stat cards - alternating colors */
.stat-card:nth-child(1) {
    position: relative;
}

.stat-card:nth-child(1)::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 6px;
    z-index: -1;
    background: linear-gradient(90deg, #00ffff, #0088ff, #00ffff);
    background-size: 300% 100%;
    animation: blueGlowMove 3s linear infinite;

}

.stat-card:nth-child(2)::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 6px;
    z-index: -1;
    background: linear-gradient(90deg, #ff0040, #ff4444, #ff0040);
    background-size: 300% 100%;
    animation: redGlowMove 2.5s linear infinite;

}

.stat-card:nth-child(3)::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 6px;
    z-index: -1;
    background: linear-gradient(90deg, #ff8800, #ffaa00, #ff8800);
    background-size: 300% 100%;
    animation: orangeGlowMove 3.5s linear infinite;

}

.stat-card:nth-child(4)::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 6px;
    z-index: -1;
    background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0088ff, #8800ff, #ff00ff, #ff0000);
    background-size: 800% 100%;
    animation: rgbGlowMove 4s linear infinite;

}

/* Module cards - alternating colors */
.module-card:nth-child(1)::before {
    background: linear-gradient(90deg, #ff8800, #ffcc00, #ff8800) !important;
    background-size: 300% 100% !important;
    animation: orangeGlowMove 3s linear infinite, borderPulse 2s infinite !important;

}

.module-card:nth-child(2)::before {
    background: linear-gradient(90deg, #00ffff, #0088ff, #00ffcc, #00ffff) !important;
    background-size: 400% 100% !important;
    animation: blueGlowMove 2.5s linear infinite, borderPulse 2s infinite !important;

}

.module-card:nth-child(3)::before {
    background: linear-gradient(90deg, #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #8800ff, #ff00ff, #ff0000) !important;
    background-size: 800% 100% !important;
    animation: rgbGlowMove 5s linear infinite !important;

}

/* Spec category cards */
.spec-category:nth-child(1)::before {
    background: linear-gradient(90deg, #00ffff, #0088ff, #00ffff) !important;
    animation: blueGlowMove 3s linear infinite, borderPulse 2s infinite !important;
}

.spec-category:nth-child(2)::before {
    background: linear-gradient(90deg, #ff0040, #ff6666, #ff0040) !important;
    animation: redGlowMove 2.5s linear infinite, borderPulse 2s infinite !important;
}

.spec-category:nth-child(3)::before {
    background: linear-gradient(90deg, #ff8800, #ffcc00, #ff8800) !important;
    animation: orangeGlowMove 3s linear infinite, borderPulse 2s infinite !important;
}

/* ========================================
   RGB Text Animation
   ======================================== */
.rgb-text {
    background: linear-gradient(90deg,
            var(--gold), var(--cosmic-purple), var(--cyan),
            var(--nebula-pink), var(--gold));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: cosmicShift 8s ease-in-out infinite;
}

@keyframes cosmicShift {
    0% {
        background-position: 0% 50%;
    }

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

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

/* ========================================
   Typography
   ======================================== */
.military-text {
    font-family: 'Orbitron', 'Rajdhani', 'Arial Unicode MS', Arial, sans-serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.data-stream {
    font-family: 'Share Tech Mono', monospace;
    color: rgba(0, 255, 200, 0.6);
    font-size: 10px;
    animation: dataFlow 3s linear infinite;
}

.gold-glow {
    color: var(--gold);

}

.cyber-glow {
    color: var(--cyan);

}

.gold {
    color: var(--gold);
}

.cyan {
    color: var(--cyan);
}

.text-yellow {
    color: var(--gold);
}

.text-cyan {
    color: var(--cyan);
}

/* ========================================
   Animations
   ======================================== */
@keyframes dataFlow {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

@keyframes floatAnim {

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

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

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

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

@keyframes borderPulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

@keyframes scanMove {
    0% {
        transform: translateY(0);
    }

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

@keyframes loadingAnim {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes statsFill {
    from {
        width: 0%;
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

@keyframes glitchAnim {

    0%,
    90%,
    100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }

    92% {
        transform: translate(-3px, 3px);
        filter: hue-rotate(90deg);
    }

    94% {
        transform: translate(3px, -3px);
        filter: hue-rotate(-90deg);
    }
}

@keyframes rgbBorderRotate {
    0% {
        --angle: 0deg;
    }

    100% {
        --angle: 360deg;
    }
}

@keyframes spiderWebExpand {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        transform: scale(3) rotate(180deg);
        opacity: 0;
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }

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

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
}

@keyframes scannerLine {
    0% {
        top: 0%;
    }

    100% {
        top: 100%;
    }
}

@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(0.9);
    }

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

@keyframes statusPulse {

    0%,
    100% {}

    50% {}
}

.glitch {
    animation: glitchAnim 4s infinite;
}

.float-anim {
    animation: floatAnim 3s ease-in-out infinite;
}

.float-anim.delay-1 {
    animation-delay: 0.3s;
}

.float-anim.delay-2 {
    animation-delay: 0.6s;
}

/* ========================================
   Scan Overlay
   ======================================== */
.scan-overlay {
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 3px,
            rgba(100, 210, 255, 0.015) 3px,
            rgba(100, 210, 255, 0.015) 6px);
    pointer-events: none;
    z-index: 1000;
    animation: scanMove 12s linear infinite;
}

/* ========================================
   Spider Web Click Effect
   ======================================== */
#spider-effect-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
}

.spider-web-effect {
    position: absolute;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    animation: spiderWebExpand 0.8s ease-out forwards;
}

.spider-web-effect svg {
    width: 100%;
    height: 100%;
}

.spider-web-effect .web-line {
    stroke: url(#rgbGradient);
    stroke-width: 2;
    fill: none;
}

/* ========================================
   Loading Screen
   ======================================== */
.loading-screen {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, #0a0214 0%, #06020e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: opacity 0.8s ease-out, visibility 0.8s;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    text-align: center;
}

.loading-title {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.loading-subtitle {
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    color: var(--cyan);
    margin-bottom: 2rem;
    letter-spacing: 0.3em;
}

.loading-bar {
    width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: visible;
    margin: 0 auto 1rem;
}

.loading-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--cosmic-purple), var(--gold), var(--cyan), var(--nebula-pink));
    animation: loadingAnim 2s ease-in-out;

}

.loading-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--gold);
}

.loading-data {
    margin-top: 1rem;
}

/* ========================================
   NASA-GRADE 3D CYBER BUTTONS
   Real 3D Depth + Holographic Glow + Press Effects
   ======================================== */

/* Core Button Animations */
@keyframes cyberGlowPulse {

    0%,
    100% {
        filter: brightness(1) drop-shadow(0 0 15px currentColor);
    }

    50% {
        filter: brightness(1.3) drop-shadow(0 0 30px currentColor);
    }
}

@keyframes borderScan {
    0% {
        background-position: 0% 50%;
    }

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

@keyframes hologramFlicker {

    0%,
    100% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    93% {
        opacity: 0.8;
    }

    94% {
        opacity: 1;
    }

    96% {
        opacity: 0.9;
    }

    97% {
        opacity: 1;
    }
}

@keyframes innerGlow {

    0%,
    100% {}

    50% {}
}

@keyframes cornerFlash {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

@keyframes dataStream {
    0% {
        transform: translateX(-100%);
    }

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

@keyframes buttonFloat {

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

    50% {
        transform: translateY(-3px) translateZ(10px);
    }
}

@keyframes pressShock {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

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

/* Main Button Container */
.rgb-glow-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.2rem 2.5rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    color: white;
    z-index: 1;

    /* 3D Transform Setup */
    transform-style: preserve-3d;
    perspective: 1000px;
    transform: translateZ(0);

    /* Glassmorphism Base */
    background:
        linear-gradient(135deg,
            rgba(20, 30, 50, 0.95) 0%,
            rgba(10, 20, 40, 0.98) 50%,
            rgba(5, 15, 35, 0.99) 100%);
    backdrop-filter: blur(10px);

    /* 3D Depth */
    border-radius: 8px;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: visible;
}

/* Outer Glow Frame */


/* Inner Holographic Shine */






/* Scan Line Effect */




/* ========== PRIMARY BUTTON - RED/MAGENTA ========== */
.rgb-glow-btn.primary-btn {
    background:
        linear-gradient(135deg,
            rgba(80, 10, 30, 0.95) 0%,
            rgba(120, 20, 50, 0.9) 50%,
            rgba(60, 5, 25, 0.98) 100%);
    border: 1px solid rgba(255, 50, 100, 0.5);


}





/* ========== ACCENT BUTTON - CYAN/TEAL ========== */
.rgb-glow-btn.accent-btn {
    background:
        linear-gradient(135deg,
            rgba(5, 40, 50, 0.95) 0%,
            rgba(10, 80, 90, 0.9) 50%,
            rgba(3, 30, 40, 0.98) 100%);
    border: 1px solid rgba(0, 255, 220, 0.5);

}





/* ========== SECONDARY BUTTON - PURPLE/BLUE ========== */
.rgb-glow-btn.secondary-btn {
    background:
        linear-gradient(135deg,
            rgba(30, 10, 60, 0.95) 0%,
            rgba(60, 30, 100, 0.9) 50%,
            rgba(20, 5, 50, 0.98) 100%);
    border: 1px solid rgba(150, 100, 255, 0.5);

}





/* Large Button Variant */
.rgb-glow-btn.large {
    padding: 1.5rem 3rem;
    font-size: 0.95rem;
}

/* Button Text */
.rgb-glow-btn .btn-text {
    position: relative;
    z-index: 15;

    letter-spacing: 0.25em;
}

/* Button Icon */
.rgb-glow-btn .btn-icon {
    position: relative;
    z-index: 15;
    display: flex;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: cyberGlowPulse 2s ease-in-out infinite;
}

/* ========== HOVER EFFECTS ========== */












/* ========== ACTIVE/PRESS EFFECTS ========== */




/* Active State (Toggled On) */
.rgb-glow-btn.active {
    background:
        linear-gradient(135deg,
            rgba(0, 80, 50, 0.98) 0%,
            rgba(0, 150, 90, 0.95) 50%,
            rgba(0, 60, 40, 0.98) 100%);
    border-color: rgba(0, 255, 150, 0.8);

}



.rgb-glow-btn.active .btn-text {
    color: #00ff88;

}



/* ========================================
   Tactical Border
   ======================================== */
.tactical-border {
    position: relative;
    overflow: visible;
    border: 1px solid rgba(232, 197, 71, 0.25) !important;
    box-shadow: 0 0 15px rgba(232, 197, 71, 0.08), inset 0 0 15px rgba(232, 197, 71, 0.03);
}

.tactical-border::before {
    display: none !important;
    content: none !important;
}

/* ========================================
   Glow Card Effect
   ======================================== */
.glow-card {
    transition: all 0.4s ease;
}

.glow-card:hover {}

/* ========================================
   Canvas
   ======================================== */
#main-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100vh;
}

/* ========================================
   Security Panel
   ======================================== */
.security-panel {
    position: fixed;
    inset: 0;
    background: rgba(3, 1, 8, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    backdrop-filter: blur(20px);
    transition: opacity 0.5s, visibility 0.5s;
}

.security-panel.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.security-content {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.98), rgba(20, 20, 20, 0.98));
    padding: 3rem;
    text-align: center;
    max-width: 400px;
    width: 90%;
    position: relative;
    overflow: visible;
    animation: bounceIn 0.6s ease-out;
}

.security-header {
    margin-bottom: 2rem;
}

.security-icon {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
}

.lock-icon {
    color: var(--gold);

}

.security-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.security-subtitle {
    color: var(--gray-400);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
}

.password-container {
    position: relative;
    margin-bottom: 1.5rem;
}

.password-input {
    width: 100%;
    padding: 1rem 1.5rem;
    background: rgba(4, 1, 10, 0.75);
    border: 2px solid var(--gray-700);
    color: var(--gold);
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    text-align: center;
    outline: none;
    transition: all 0.3s ease;
}

.password-input:focus {
    border-color: var(--gold);

}

.password-input::placeholder {
    color: var(--gray-600);
    letter-spacing: 0.1em;
    font-size: 0.9rem;
}

.password-decoration {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--gold);
    animation: pulseRing 2s infinite;
}

.password-decoration.left {
    left: -20px;
}

.password-decoration.right {
    right: -20px;
}

.unlock-button {
    width: 100%;
    margin-bottom: 1rem;
}

.security-error {
    color: #ff4444;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    animation: shake 0.5s;
    margin-bottom: 1rem;
}

.security-error.hidden {
    display: none;
}

.security-scanner {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    animation: scannerLine 2s linear infinite;
}

/* ========================================
   Dynamics Panel
   ======================================== */
.dynamics-panel {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(3, 1, 8, 0.96);
    border: 1px solid var(--gold);
    padding: 1rem;
    z-index: 500;
    min-width: 220px;
    backdrop-filter: blur(10px);
    animation: slideIn 0.5s ease-out;
}

.dynamics-panel.hidden {
    display: none;
}

.dynamics-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-700);
}

.dynamics-status {
    color: #00ff00;
    font-size: 0.8rem;
    animation: statusPulse 2s infinite;
}

.camera-model-canvas {
    width: 100%;
    height: 80px;
    background: rgba(4, 1, 12, 0.5);
    margin-bottom: 0.5rem;
    border: 1px solid var(--gray-700);
}

.dynamic-value {
    display: flex;
    justify-content: space-between;
    padding: 0.2rem 0;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
}

.dynamic-label {
    color: var(--gray-400);
}

.dynamic-data {
    font-weight: bold;
}

.dynamic-data.gold {
    color: var(--gold);
}

.dynamic-data.cyan {
    color: var(--cyan);
}

/* ========================================
   Gesture Notification
   ======================================== */
.gesture-notification {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(10, 22, 40, 0.98);
    border: 2px solid;
    border-image: linear-gradient(135deg, var(--cosmic-purple), var(--gold), var(--cyan)) 1;
    padding: 2rem 3rem;
    z-index: 600;
    text-align: center;
    animation: bounceIn 0.5s ease-out;

}

.gesture-notification.hidden {
    display: none;
}

.gesture-icon-3d {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
}

.gesture-icon-3d canvas {
    width: 100%;
    height: 100%;
}

.notification-content span {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.notification-content p {
    color: var(--gray-400);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.gesture-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.control-hint {
    background: rgba(255, 215, 0, 0.1);
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    border: 1px solid var(--gray-700);
}

/* ========================================
   Content Wrapper
   ======================================== */
.content-wrapper {
    position: relative;
    z-index: 10;
}

.content-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.section-content {
    max-width: 1400px;
    width: 100%;
    text-align: center;
}

.section-title {
    font-size: clamp(2rem, 6vw, 4rem);
    margin-bottom: 1rem;
}

.section-subtitle {
    color: var(--gray-400);
    margin-bottom: 3rem;
    font-size: 1.25rem;
}

/* ========================================
   Hero Section
   ======================================== */
.hero-section {
    min-height: 100vh;
}

.hero-content {
    max-width: 1200px;
    text-align: center;
}

.nasa-badge {
    display: inline-block;
    padding: 0.5rem 2rem;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(0, 255, 204, 0.2));
    border: 1px solid var(--gold);
    margin-bottom: 1rem;
    animation: borderPulse 2s infinite;
}

.nasa-badge span {
    font-size: 0.8rem;
    color: var(--gold);
}

.hero-title {
    font-size: clamp(3rem, 12vw, 9rem);
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    font-size: clamp(2.5rem, 8vw, 7rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
}

.hero-description {
    font-size: clamp(1.35rem, 3vw, 2.1rem);
    color: #ffffff;
    margin-bottom: 0.5rem;
    font-weight: 600;
    text-shadow: 0 0 30px rgba(180, 80, 255, 0.9), 0 2px 12px rgba(0, 0, 0, 0.95), 0 0 60px rgba(255, 255, 255, 0.15);
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #fff 0%, #e8c8ff 40%, #c8a0ff 70%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(200, 100, 255, 0.8));
}

.hero-subdesc {
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 0 20px rgba(150, 50, 255, 0.7), 0 1px 8px rgba(0, 0, 0, 0.9);
    font-weight: 400;
    line-height: 1.6;
}

/* ========================================
   Stats Grid
   ======================================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.stat-card {
    padding: 1.5rem;
    background: rgba(4, 1, 10, 0.75);
    text-align: center;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: bold;
    display: inline;
}

.stat-suffix {
    font-size: 1.5rem;
    color: var(--gray-400);
    display: inline;
}

.stat-label {
    font-size: 0.7rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
}

.stat-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    margin-top: 1rem;
    overflow: visible;
    border-radius: 2px;
}

.stat-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--cyan));
    width: var(--fill);
    animation: statsFill 2s ease-out;
}

/* ========================================
   Button Group
   ======================================== */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.camera-data {
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* ========================================
   NASA Section
   ======================================== */
.nasa-section {
    background: linear-gradient(to bottom, transparent, rgba(0, 20, 40, 0.3), transparent);
}

.nasa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.nasa-card {
    background: rgba(10, 10, 10, 0.9);
    padding: 2rem;
    text-align: left;
    transition: all 0.4s ease;
}

.nasa-card:hover {
    transform: translateY(-10px);

}

.nasa-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.nasa-card h3 {
    font-size: 1rem;
    color: var(--gold);
    margin-bottom: 1rem;
}

.nasa-card p {
    color: var(--gray-400);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.nasa-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-number {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
}

.stat-desc {
    font-size: 0.7rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ========================================
   Comparison Section
   ======================================== */
.comparison-section {
    background: linear-gradient(to bottom, transparent, rgba(4, 1, 10, 0.6), transparent);
}

.comparison-section.hidden {
    display: none;
}

.comparison-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
}

.comparison-panel {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    background: rgba(10, 10, 10, 0.95);
    padding: 1.5rem;
}

.comparison-canvas {
    width: 100%;
    height: 250px;
    background: rgba(0, 0, 0, 0.5);
    margin-bottom: 1rem;
}

.panel-label {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.kevlar-panel .panel-label {
    color: var(--gold);
}

.steel-panel .panel-label {
    color: var(--gray-400);
}

.panel-stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.panel-stat {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.stat-name {
    color: var(--gray-500);
}

.stat-val {
    font-weight: bold;
}

.stat-val.gold {
    color: var(--gold);
}

.vs-indicator {
    position: relative;
    padding: 1.5rem;
}

.vs-indicator span {
    font-size: 2rem;
}

.vs-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    animation: pulseRing 2s infinite;
}

.comparison-result {
    background: rgba(10, 10, 10, 0.95);
    padding: 2rem;
    max-width: 900px;
    margin: 0 auto 2rem;
}

.result-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.result-value {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.result-label {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* ========================================
   Architecture Section
   ======================================== */
.architecture-section {
    background: linear-gradient(to bottom, transparent, rgba(20, 20, 20, 0.5), transparent);
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.module-card {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.95), rgba(20, 20, 20, 0.95));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 215, 0, 0.2);
    padding: 2.5rem;
    text-align: left;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.module-card:hover {
    border-color: rgba(255, 215, 0, 0.8);
    transform: translateY(-15px) scale(1.02);
}

.module-icon {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.pulse-ring-container {
    position: relative;
}

.pulse-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid;
    animation: pulseRing 2s infinite;
    opacity: 0.5;
}

.pulse-ring.gold {
    border-color: var(--gold);
}

.pulse-ring.cyan {
    border-color: var(--cyan);
}

.module-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.module-title.gold {
    color: var(--gold);
}

.module-title.cyan {
    color: var(--cyan);
}

.module-desc {
    color: var(--gray-400);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.module-desc strong {
    color: white;
}

.stats-bar {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    overflow: visible;
    border-radius: 3px;
    margin-bottom: 1.5rem;
}

.stats-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--cyan));
    animation: statsFill 2s ease-out forwards;

    border-radius: 3px;
}

.module-features {
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-800);
}

.feature-title {
    font-size: 0.7rem;
    margin-bottom: 0.75rem;
}

.module-features ul {
    list-style: none;
    font-size: 0.85rem;
    color: white;
}

.module-features li {
    padding: 0.25rem 0 0.25rem 1rem;
    position: relative;
}

.module-features li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--cyan);
}

/* ========================================
   SPECS SECTION — ULTRA NVIDIA CEO LEVEL
   ======================================== */
.specs-section {
    background: linear-gradient(to bottom, transparent, rgba(10, 2, 20, 0.7), transparent);
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.spec-category {
    position: relative;
    background: rgba(8, 4, 18, 0.92);
    padding: 2rem;
    overflow: visible;
    border: 1px solid rgba(123, 104, 238, 0.3);
    transition: transform 0.1s ease, box-shadow 0.3s ease;
}

/* Animated border beam */
.spec-category::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 2px;
    padding: 1.5px;
    background: linear-gradient(var(--spec-angle, 0deg),
            transparent 40%,
            rgba(192, 132, 252, 0.9) 50%,
            rgba(123, 104, 238, 0.9) 55%,
            transparent 65%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: specBorderSpin 3s linear infinite;
    pointer-events: none;
}

/* Holographic shimmer overlay */
.spec-category::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            transparent 40%,
            rgba(192, 132, 252, 0.04) 45%,
            rgba(255, 255, 255, 0.06) 50%,
            rgba(192, 132, 252, 0.04) 55%,
            transparent 60%);
    background-size: 200% 200%;
    animation: holoShimmer 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes specBorderSpin {
    0% {
        --spec-angle: 0deg;
    }

    100% {
        --spec-angle: 360deg;
    }
}

@property --spec-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes holoShimmer {

    0%,
    100% {
        background-position: -100% 0;
        opacity: 0.5;
    }

    50% {
        background-position: 200% 0;
        opacity: 1;
    }
}

/* Scan line effect */
.spec-scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.6), rgba(123, 104, 238, 0.8), rgba(192, 132, 252, 0.6), transparent);
    animation: scanMove 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;

}

@keyframes scanMove {
    0% {
        top: -2px;
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    95% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

/* Corner HUD brackets */
.spec-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 5;
    animation: cornerPulse 2s ease-in-out infinite;
}

.spec-corner.tl {
    top: 6px;
    left: 6px;
    border-top: 2px solid #c084fc;
    border-left: 2px solid #c084fc;
}

.spec-corner.tr {
    top: 6px;
    right: 6px;
    border-top: 2px solid #c084fc;
    border-right: 2px solid #c084fc;
}

.spec-corner.bl {
    bottom: 6px;
    left: 6px;
    border-bottom: 2px solid #c084fc;
    border-left: 2px solid #c084fc;
}

.spec-corner.br {
    bottom: 6px;
    right: 6px;
    border-bottom: 2px solid #c084fc;
    border-right: 2px solid #c084fc;
}

@keyframes cornerPulse {

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

    50% {
        opacity: 1;
        transform: scale(1.15);

    }
}

/* Category title */
.category-title {
    font-size: 0.85rem;
    color: #c084fc;
    margin-bottom: 1.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(123, 104, 238, 0.3);
    letter-spacing: 0.15em;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.category-title::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #c084fc;
    border-radius: 50%;
    flex-shrink: 0;

    animation: dotBlink 1.5s ease-in-out infinite;
}

@keyframes dotBlink {

    0%,
    100% {
        opacity: 1;

    }

    50% {
        opacity: 0.3;

    }
}

.spec-items {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    z-index: 3;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: visible;
    transition: background 0.3s;
}

.spec-item:hover {
    background: rgba(192, 132, 252, 0.05);
}

/* Hover scan line per item */
.spec-item::after {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    bottom: 0;
    width: 60%;
    background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.12), transparent);
    transition: left 0.4s ease;
}

.spec-item:hover::after {
    left: 150%;
}

.spec-name {
    color: rgba(200, 185, 230, 0.7);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

/* Bar container under value */
.spec-val-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.spec-value {
    font-weight: bold;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.95rem;
    letter-spacing: 0.04em;

    transition: text-shadow 0.3s;
}

.spec-value:hover {}

.spec-value.gold {
    color: var(--gold);
}

.spec-value.cyan {
    color: var(--cyan);
}

.spec-value.glitch-active {
    animation: specGlitch 0.05s ease;
    color: #ff00ff !important;
}

@keyframes specGlitch {

    0%,
    100% {
        transform: none;
    }

    33% {
        transform: translateX(2px) skewX(2deg);
        filter: hue-rotate(90deg);
    }

    66% {
        transform: translateX(-2px) skewX(-2deg);
        filter: hue-rotate(180deg);
    }
}

/* Mini progress bar under each value */
.spec-minibar {
    width: 60px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
    overflow: visible;
    position: relative;
}

.spec-minibar-fill {
    height: 100%;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--gold), #c084fc);
    transform-origin: left;
    animation: miniFill 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform: scaleX(0);

}

@keyframes miniFill {
    to {
        transform: scaleX(1);
    }
}

/* Particle canvas on each card */
.spec-particle-canvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

/* Data stream at bottom */
.spec-data-stream {
    position: absolute;
    bottom: 8px;
    left: 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    color: rgba(192, 132, 252, 0.35);
    letter-spacing: 0.1em;
    pointer-events: none;
    z-index: 4;
    animation: dataStreamScroll 4s linear infinite;
    white-space: nowrap;
    overflow: visible;
    width: 80%;
}

@keyframes dataStreamScroll {
    0% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 0.2;
    }
}

/* ========================================
   Performance Section
   ======================================== */
.performance-section {
    background: linear-gradient(to bottom, transparent, rgba(0, 20, 40, 0.3), transparent);
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.perf-card {
    background: rgba(10, 10, 10, 0.9);
    padding: 1.5rem;
    text-align: center;
}

.perf-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.perf-value {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.perf-label {
    font-size: 0.7rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.perf-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: visible;
    border-radius: 2px;
}

.perf-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--cyan));
    width: var(--fill);
    animation: statsFill 2s ease-out;
}

/* ========================================
   CTA Section
   ======================================== */
.cta-section {
    padding: 6rem 2rem;
}

.cta-title {
    font-size: clamp(2rem, 6vw, 4rem);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.cta-description {
    font-size: 1.25rem;
    color: var(--gray-300);
    margin-bottom: 3rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-description strong {
    color: white;
}

.system-status {
    background: rgba(3, 1, 8, 0.88);
    padding: 2rem;
    max-width: 800px;
    margin: 3rem auto 0;
}

.status-title {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.status-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.status-item {
    text-align: center;
}

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
    animation: statusPulse 2s infinite;
}

.status-indicator.online {
    background: #00ff00;
    color: #00ff00;
}

.status-value {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.status-value.gold {
    color: var(--gold);
}

.status-value.cyan {
    color: var(--cyan);
}

.status-label {
    font-size: 0.7rem;
    color: var(--gray-500);
}

/* ========================================
   Footer
   ======================================== */
.site-footer {
    border-top: 1px solid var(--gray-900);
    padding: 3rem 2rem;
    background: rgba(3, 1, 8, 0.88);
    text-align: center;
}

.footer-logo {
    margin-bottom: 1rem;
}

.footer-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.footer-badge {
    display: inline-block;
    padding: 0.25rem 1rem;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.2), rgba(0, 255, 204, 0.2));
    border: 1px solid var(--gold);
    font-size: 0.7rem;
    color: var(--gold);
    font-family: 'Orbitron', sans-serif;
}

.footer-subtitle {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.footer-tech {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.tech-badge {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--gray-700);
    font-size: 0.7rem;
    color: var(--gray-400);
    font-family: 'Share Tech Mono', monospace;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    font-size: 0.75rem;
    color: var(--gray-700);
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .button-group {
        flex-direction: column;
        align-items: center;
    }

    .rgb-glow-btn {
        width: 100%;
        max-width: 320px;
    }

    .comparison-container {
        flex-direction: column;
    }

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

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

    .dynamics-panel {
        top: 10px;
        right: 10px;
        min-width: 180px;
    }

    .gesture-notification {
        padding: 1.5rem;
    }
}

/* ========================================
   Timeline Section
   ======================================== */
.timeline-section {
    background: linear-gradient(to bottom, transparent, rgba(20, 10, 0, 0.4), transparent);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        max-height 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        padding 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        min-height 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        margin 0.8s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    max-height: 15000px;
    /* arbitrary large value to fit entire timeline */
    opacity: 1;
    transform: translateY(0) scaleY(1);
    transform-origin: top center;
    overflow: hidden;
    /* must remain hidden for the max-height collapse to actually hide content */
}

.timeline-section.timeline-collapsed {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    transform: translateY(-20px) scaleY(0.98);
    pointer-events: none;
    border: none;
}

.timeline-3d-container {
    position: relative;
    width: 100%;
    height: 300px;
    background: rgba(4, 1, 10, 0.75);
    margin-bottom: 4rem;
    overflow: visible;
}

.timeline-3d-container canvas {
    width: 100%;
    height: 100%;
}

.timeline-hud {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.timeline-year-display {
    font-family: 'Orbitron', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    color: var(--gold);

}

.timeline-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: var(--cyan);
    letter-spacing: 0.2em;
}

/* Timeline Wrapper */
.timeline-wrapper {
    position: relative;
    padding: 2rem 0;
    max-width: 1000px;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--gold), var(--cyan), var(--gold));
    transform: translateX(-50%);

}

.timeline-node {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.timeline-node:nth-child(odd) {
    flex-direction: row;
    padding-right: calc(50% + 40px);
}

.timeline-node:nth-child(even) {
    flex-direction: row-reverse;
    padding-left: calc(50% + 40px);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.timeline-node:nth-child(1) {
    animation-delay: 0.1s;
}

.timeline-node:nth-child(2) {
    animation-delay: 0.2s;
}

.timeline-node:nth-child(3) {
    animation-delay: 0.3s;
}

.timeline-node:nth-child(4) {
    animation-delay: 0.4s;
}

.timeline-node:nth-child(5) {
    animation-delay: 0.5s;
}

.timeline-node:nth-child(6) {
    animation-delay: 0.6s;
}

.timeline-year-badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.25rem;
    padding: 0.5rem 1rem;
    background: rgba(3, 1, 8, 0.96);
    border: 2px solid var(--gold);
    z-index: 10;
}

.timeline-content {
    flex: 1;
    background: rgba(10, 10, 10, 0.95);
    padding: 1.5rem;
    text-align: left;
}

.timeline-content h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.timeline-content p {
    color: var(--gray-400);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.timeline-content p strong {
    color: white;
}

.timeline-stats {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.stat-badge {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-family: 'Share Tech Mono', monospace;
    border: 1px solid currentColor;
    background: rgba(0, 0, 0, 0.5);
}

.stat-badge.gold {
    color: var(--gold);
    border-color: var(--gold);
}

.stat-badge.cyan {
    color: var(--cyan);
    border-color: var(--cyan);
}

/* Tech Documentation Grid */
.tech-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.tech-doc-card {
    background: rgba(8, 12, 22, 0.98);
    padding: 1.5rem;
    text-align: left;
    transition: all 0.4s ease;
    border-radius: 12px;
    z-index: 0;
    isolation: isolate;
}

.tech-doc-card:hover {
    transform: translateY(-8px);

}

.doc-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.tech-doc-card h4 {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.tech-doc-card p {
    color: var(--gray-400);
    font-size: 0.85rem;
    line-height: 1.6;
}

.tech-doc-card p strong {
    color: white;
}

/* Spider Silk Comparison */
.silk-comparison-section {
    margin-top: 3rem;
}

.myth-buster {
    background: rgba(20, 10, 0, 0.8);
    padding: 2rem;
    margin-bottom: 2rem;
    border-left: 4px solid var(--gold);
}

.myth-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.myth-icon {
    font-size: 2.5rem;
}

.myth-header h4 {
    font-size: 1.25rem;
}

.myth-text {
    color: var(--gray-300);
    font-size: 1rem;
    line-height: 1.7;
}

.myth-text strong {
    color: #ff6b6b;
}

.silk-compare-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.compare-column {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    background: rgba(10, 10, 10, 0.95);
    padding: 1.5rem;
}

.compare-column h4 {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.compare-column ul {
    list-style: none;
}

.compare-column li {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--gray-800);
}

.compare-column li:last-child {
    border-bottom: none;
}

.compare-column .prop {
    color: var(--gray-500);
}

.compare-column .val {
    font-weight: bold;
    color: white;
}

.compare-vs {
    font-size: 2rem;
    padding: 1rem;
}

.similarity-note {
    background: rgba(0, 20, 40, 0.6);
    padding: 1.5rem;
    text-align: center;
    border-left: 4px solid var(--cyan);
}

.similarity-note p {
    color: var(--gray-300);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Biography Section */
.bio-section {
    margin-top: 3rem;
}

.bio-card {
    background: linear-gradient(135deg, rgba(30, 20, 0, 0.9), rgba(10, 10, 10, 0.95));
    padding: 2.5rem;
    max-width: 800px;
    margin: 2rem auto 0;
}

.bio-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--gray-800);
}

.bio-avatar {
    font-size: 4rem;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 215, 0, 0.1);
    border: 2px solid var(--gold);
    border-radius: 50%;
}

.bio-info h3 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.bio-subtitle {
    color: var(--gray-400);
    font-size: 0.9rem;
}

.bio-content p {
    color: var(--gray-300);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.bio-content p strong {
    color: white;
}

.bio-quote {
    font-style: italic;
    color: var(--cyan) !important;
    padding: 1rem;
    border-left: 3px solid var(--gold);
    background: rgba(0, 255, 204, 0.05);
    margin: 1.5rem 0 !important;
}

.bio-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-800);
}

.bio-stat {
    text-align: center;
}

.bio-stat-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 2rem;
    font-weight: bold;
    display: block;
}

.bio-stat-label {
    font-size: 0.75rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Timeline Responsive */
@media (max-width: 768px) {
    .timeline-line {
        left: 20px;
    }

    .timeline-node:nth-child(odd),
    .timeline-node:nth-child(even) {
        flex-direction: row;
        padding-right: 0;
        padding-left: 50px;
    }

    .timeline-year-badge {
        left: 20px;
        transform: translateX(-50%);
        font-size: 0.9rem;
        padding: 0.35rem 0.5rem;
    }

    .silk-compare-grid {
        flex-direction: column;
    }

    .compare-column {
        max-width: 100%;
    }

    .bio-header {
        flex-direction: column;
        text-align: center;
    }

    .bio-stats {
        flex-direction: column;
        gap: 1.5rem;
    }
}

/* ========================================
   Hidden Utility
   ======================================== */
.hidden {
    display: none !important;
}

/* ========================================
   DECONSTRUCTED ORIGIN SECTION
   Spider Silk vs Kevlar Comparison
   ======================================== */
.origin-section {
    background:
        linear-gradient(135deg, rgba(5, 15, 35, 0.98) 0%, rgba(10, 25, 50, 0.95) 100%),
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="%23ffffff10"/></svg>');
    background-size: cover, 20px 20px;
}

.origin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(90deg, rgba(0, 80, 100, 0.4), rgba(0, 40, 60, 0.6));
    border: 1px solid rgba(0, 255, 255, 0.3);
    margin-bottom: 2rem;
}

.origin-title-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.origin-icon {
    font-size: 2rem;

}

.origin-header .section-title {
    margin: 0;
    font-size: 1.5rem;
    color: white;

}

.origin-controls {
    display: flex;
    gap: 0.5rem;
}

.control-dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 200, 100, 0.8);
    border-radius: 50%;

}

.origin-text {
    margin-bottom: 2.5rem;
    padding: 0 1rem;
}

.origin-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

.origin-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: stretch;
}

.origin-panel {
    padding: 1.5rem;
    background: rgba(10, 25, 45, 0.8);
    position: relative;
    overflow: visible;
}

.origin-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at center, rgba(100, 150, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.spider-panel {
    border-color: rgba(0, 180, 255, 0.5);

}

.kevlar-panel {
    border-color: rgba(255, 100, 100, 0.5);

}

.panel-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-icon {
    font-size: 1.8rem;
}

.panel-header h3 {
    font-size: 1.2rem;
    letter-spacing: 0.15em;
}

.panel-properties {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.prop-row {
    display: flex;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.prop-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.prop-value {
    font-weight: 600;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
}

.origin-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.origin-vs-circle {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(255, 50, 100, 0.3) 0%, transparent 60%),
        rgba(20, 10, 30, 0.8);
    border: 2px solid rgba(255, 50, 100, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    animation: pulseBorder 3s ease-in-out infinite;
}

@keyframes pulseBorder {

    0%,
    100% {}

    50% {}
}

.origin-vs-circle .military-text {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.1em;
}

.vs-divider {
    width: 60%;
    height: 1px;
    background: rgba(255, 50, 100, 0.5);
    margin: 0.5rem 0;
}

.vs-letter {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    color: rgba(255, 50, 100, 0.8);

}

.origin-helix {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 1px solid rgba(255, 50, 100, 0.2);
    animation: rotateHelix 10s linear infinite;
}

@keyframes rotateHelix {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .origin-comparison {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .origin-center {
        order: -1;
    }

    .origin-vs-circle {
        width: 100px;
        height: 100px;
    }
}

/* ========================================
   TIMELINE SECTION - Animated 3D Background
   RGB Edge Glow Cards (borders only)
   ======================================== */

/* Timeline Section - Epic Animated Background */
.timeline-section {
    position: relative;
    overflow: visible;
}

.timeline-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Central portal glow */
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255, 100, 50, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 60% 80% at 70% 70%, rgba(0, 255, 255, 0.15) 0%, transparent 40%),
        radial-gradient(ellipse 60% 80% at 30% 60%, rgba(123, 104, 238, 0.15) 0%, transparent 40%),
        /* Grid pattern */
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        /* Deep dark base */
        linear-gradient(135deg, #030508 0%, #0a1628 50%, #030508 100%);
    background-size: 100%, 100%, 100%, 40px 40px, 40px 40px, 100%;
    z-index: -1;
    animation: timelineBgPulse 8s ease-in-out infinite;
}

@keyframes timelineBgPulse {

    0%,
    100% {
        opacity: 1;
        filter: brightness(1) hue-rotate(0deg);
    }

    50% {
        opacity: 0.9;
        filter: brightness(1.2) hue-rotate(10deg);
    }
}

/* Timeline 3D Container - Animated Border */
.timeline-3d-container {
    position: relative;
    background: rgba(5, 10, 20, 0.95);
    border-radius: 12px;
    overflow: visible;
    margin: 2rem 0;
}

.timeline-3d-container::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: linear-gradient(90deg,
            #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0088ff, #8800ff, #ff00ff, #ff0000);
    background-size: 800% 100%;
    z-index: -1;
    animation: rgbGlowMove 5s linear infinite;

}

/* Timeline Nodes - RGB Edge Glow ONLY (not interior) */
.timeline-content {
    position: relative;
    background: rgba(8, 12, 22, 0.98) !important;
    border: none !important;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0;
}

/* Timeline Card 1 - BLUE/CYAN edge glow */
.timeline-node:nth-child(1) .timeline-content::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(90deg, #00ffff, #0088ff, #00ffcc, #00ffff);
    background-size: 400% 100%;
    z-index: -1;
    animation: blueGlowMove 3s linear infinite;

}

/* Timeline Card 2 - RED edge glow */
.timeline-node:nth-child(2) .timeline-content::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(90deg, #ff0040, #ff4444, #ff0066, #ff2222, #ff0040);
    background-size: 400% 100%;
    z-index: -1;
    animation: redGlowMove 2.5s linear infinite;

}

/* Timeline Card 3 - ORANGE/GOLD edge glow */
.timeline-node:nth-child(3) .timeline-content::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(90deg, #ff8800, #ffaa00, #ff6600, #ffcc00, #ff8800);
    background-size: 400% 100%;
    z-index: -1;
    animation: orangeGlowMove 3.5s linear infinite;

}

/* Timeline Card 4 - RGB CYCLING edge glow */
.timeline-node:nth-child(4) .timeline-content::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(90deg,
            #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0088ff, #8800ff, #ff00ff, #ff0000);
    background-size: 800% 100%;
    z-index: -1;
    animation: rgbGlowMove 4s linear infinite;

}

/* Timeline Card 5 - PURPLE/VIOLET edge glow */
.timeline-node:nth-child(5) .timeline-content::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(90deg, #8800ff, #aa44ff, #7b68ee, #cc88ff, #8800ff);
    background-size: 400% 100%;
    z-index: -1;
    animation: purpleGlowMove 3s linear infinite;

}

@keyframes purpleGlowMove {
    0% {
        background-position: 0% 50%;
    }

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

/* Timeline Year Badges - Glowing 3D Effect */
.timeline-year-badge {
    position: relative;
    padding: 0.5rem 1rem;
    background: rgba(5, 10, 20, 0.95);
    border-radius: 20px;
    font-weight: bold;
    z-index: 1;
}

.timeline-year-badge::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 23px;
    z-index: -1;
    animation: yearBadgePulse 2s ease-in-out infinite;
}

.timeline-year-badge.gold-glow::before {
    background: linear-gradient(90deg, #ffcc00, #ff8800, #ffcc00);
    background-size: 300% 100%;
    animation: orangeGlowMove 2s linear infinite, yearBadgePulse 2s ease-in-out infinite;

}

.timeline-year-badge.cyber-glow::before {
    background: linear-gradient(90deg, #00ffff, #0088ff, #00ffff);
    background-size: 300% 100%;
    animation: blueGlowMove 2s linear infinite, yearBadgePulse 2s ease-in-out infinite;

}

@keyframes yearBadgePulse {

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

    50% {
        filter: brightness(1.3);
        transform: scale(1.05);
    }
}

/* Tech Doc Cards - RGB Edge Glow */
.tech-doc-card {
    position: relative;
    background: rgba(8, 12, 22, 0.98) !important;
    border: none !important;
    border-radius: 12px;
    padding: 1.5rem;
    z-index: 0;
    isolation: isolate;
}

.tech-doc-card:nth-child(1)::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(90deg, #ff8800, #ffcc00, #ff8800);
    background-size: 300% 100%;
    z-index: -1;
    animation: orangeGlowMove 3s linear infinite;

}

.tech-doc-card:nth-child(2)::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(90deg, #00ffff, #0088ff, #00ffff);
    background-size: 300% 100%;
    z-index: -1;
    animation: blueGlowMove 3s linear infinite;

}

.tech-doc-card:nth-child(3)::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(90deg,
            #ff0000, #ff8800, #ffff00, #00ff00, #00ffff, #0088ff, #8800ff, #ff00ff, #ff0000);
    background-size: 800% 100%;
    z-index: -1;
    animation: rgbGlowMove 5s linear infinite;

}

/* Timeline Wrapper - Glowing Line */
.timeline-wrapper {
    position: relative;
    padding: 2rem 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
            rgba(255, 136, 0, 0.8),
            rgba(0, 255, 255, 0.8),
            rgba(123, 104, 238, 0.8),
            rgba(255, 0, 64, 0.8),
            rgba(255, 136, 0, 0.8));

    animation: timelineLinePulse 3s ease-in-out infinite;
    transform: translateX(-50%);
}

@keyframes timelineLinePulse {

    0%,
    100% {}

    50% {}
}

/* Timeline Stats Badges */
.stat-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    margin: 0.25rem;
}

.stat-badge.gold {
    background: linear-gradient(90deg, rgba(255, 136, 0, 0.2), rgba(255, 200, 0, 0.2));
    border: 1px solid rgba(255, 200, 0, 0.5);
    color: #ffcc00;

}

.stat-badge.cyan {
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.2), rgba(0, 136, 255, 0.2));
    border: 1px solid rgba(0, 255, 255, 0.5);
    color: #00ffff;

}

/* Timeline Node Layout - FIXED positioning */
.timeline-node {
    display: flex;
    align-items: flex-start;
    margin-bottom: 3rem;
    position: relative;
    width: 100%;
}

/* Odd cards (1st, 3rd, 5th) - positioned on LEFT side */
.timeline-node:nth-child(odd) {
    justify-content: flex-start;
    padding-right: 55%;
}

/* Even cards (2nd, 4th) - positioned on RIGHT side */
.timeline-node:nth-child(even) {
    justify-content: flex-end;
    padding-left: 55%;
}

/* Year badge positioning */
.timeline-node .timeline-year-badge {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 10;
}

/* Timeline content card */
.timeline-node .timeline-content {
    max-width: 100%;
    margin-top: 2rem;
}

.timeline-stats {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* ========================================
   TRIPLE COMPARISON - Aluminum Panel
   ======================================== */
.comparison-container.triple-compare {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    flex-wrap: wrap;
}

.aluminum-panel {
    position: relative;
    background: linear-gradient(135deg, rgba(15, 25, 40, 0.95), rgba(30, 50, 70, 0.9));
}

.aluminum-panel::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 12px;
    background: linear-gradient(90deg, #00ffff, #0088ff, #00ccff, #00ffff);
    background-size: 400% 100%;
    z-index: -1;
    animation: blueGlowMove 3s linear infinite;

}

.aluminum-visual {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.aluminum-cube {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8, #a0a0a0);
    border-radius: 8px;

    animation: rotateCube 4s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes rotateCube {

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

    50% {
        transform: rotateY(180deg) rotateX(15deg);
    }
}

/* ========================================
   SPIDER SILK MYTH SECTION - SPECTACULAR UNIQUE DESIGN
   ======================================== */
/* Outer glow wrapper — sits outside the clipped box */
.silk-comparison-section {
    position: relative;
    padding: 3.5rem;
    margin: 3rem 1rem;
    overflow: visible;
    border-radius: 20px;
    /* Neon border: cyan top-left, purple bottom-right */
    border: 1px solid rgba(123, 104, 238, 0.5);

    background: linear-gradient(135deg, #0a0515 0%, #150a25 50%, #0a0515 100%);
}

/* Glowing accent line on the top edge */
.silk-comparison-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 255, 200, 0.9) 25%,
            rgba(180, 100, 255, 1) 50%,
            rgba(0, 255, 200, 0.9) 75%,
            transparent 100%);

    pointer-events: none;
    z-index: 3;
}

/* Spider Web Pattern overlay */
.silk-comparison-section::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background:
        /* Radial web pattern */
        repeating-conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(123, 104, 238, 0.1) 0.5deg,
            transparent 1deg,
            transparent 15deg),
        /* Concentric rings */
        repeating-radial-gradient(circle at 50% 50%,
            transparent 0px,
            transparent 50px,
            rgba(123, 104, 238, 0.08) 51px,
            transparent 52px),
        /* Base gradient */
        radial-gradient(ellipse at center, rgba(123, 104, 238, 0.12) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

/* MIT DEMONTAT Box - Spectacular Design */
.myth-buster {
    position: relative;
    background: rgba(10, 5, 20, 0.95) !important;
    border: none !important;
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem 0;
    overflow: visible;
}

.myth-buster::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 20px;
    background: linear-gradient(90deg,
            #8800ff, #ff00ff, #00ffff, #ff00ff, #8800ff);
    background-size: 600% 100%;
    z-index: -1;
    animation: mythBorderGlow 4s linear infinite;

}

.myth-buster::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    animation: holographicSweep 3s ease-in-out infinite;
}

@keyframes mythBorderGlow {

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

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

@keyframes holographicSweep {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.myth-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.myth-icon {
    font-size: 3rem;
    animation: spiderBounce 2s ease-in-out infinite;

}

@keyframes spiderBounce {

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

    50% {
        transform: translateY(-10px) scale(1.1);
    }
}

.myth-header h4 {
    font-size: 1.8rem;
    background: linear-gradient(90deg, #ff00ff, #00ffff, #ff00ff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mythTextShift 3s linear infinite;
}

@keyframes mythTextShift {

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

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

.myth-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--star-white);
    position: relative;
    z-index: 1;
}

/* Silk Compare Grid - Unique Style */
.silk-compare-grid {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.compare-column {
    position: relative;
    background: rgba(10, 5, 20, 0.95);
    border-radius: 12px;
    padding: 1.5rem;
    min-width: 280px;
    flex: 1;
}

.compare-column:first-child::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(90deg, #8800ff, #aa44ff, #8800ff);
    background-size: 300% 100%;
    z-index: -1;
    animation: purpleGlowMove 3s linear infinite;

}

.compare-column:last-child::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(90deg, #e8c547, #ffcc00, #e8c547);
    background-size: 300% 100%;
    z-index: -1;
    animation: orangeGlowMove 3s linear infinite;

}

.compare-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    animation: vsPulse 2s ease-in-out infinite;
}

@keyframes vsPulse {

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

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

.similarity-note {
    position: relative;
    background: rgba(10, 5, 20, 0.95);
    border: none !important;
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.similarity-note::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 15px;
    background: linear-gradient(90deg, #00ffff, #0088ff, #00ffff);
    background-size: 300% 100%;
    z-index: -1;
    animation: blueGlowMove 3s linear infinite;

}

/* ========================================
   STEPHANIE KWOLEK BIO - SPECTACULAR UNIQUE DESIGN
   ======================================== */
.bio-section {
    position: relative;
    padding: 3rem 0;
}

.bio-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Golden particles effect */
        radial-gradient(2px 2px at 20% 30%, rgba(232, 197, 71, 0.4), transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(232, 197, 71, 0.3), transparent),
        radial-gradient(2px 2px at 60% 40%, rgba(232, 197, 71, 0.5), transparent),
        radial-gradient(2px 2px at 80% 60%, rgba(232, 197, 71, 0.4), transparent),
        radial-gradient(2px 2px at 10% 80%, rgba(232, 197, 71, 0.3), transparent),
        radial-gradient(2px 2px at 90% 20%, rgba(232, 197, 71, 0.5), transparent),
        /* Base gradient */
        linear-gradient(135deg, #0a0a05 0%, #1a1a10 50%, #0a0a05 100%);
    z-index: -1;
    animation: particlesFloat 10s ease-in-out infinite;
}

@keyframes particlesFloat {

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

    50% {
        background-position: 20px 20px;
    }
}

.bio-card {
    position: relative;
    background: rgba(15, 15, 10, 0.98) !important;
    border: none !important;
    border-radius: 20px;
    padding: 2.5rem;
    overflow: visible;
}

.bio-card::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 24px;
    background: linear-gradient(135deg,
            #e8c547, #ffd700, #ffcc00, #e8c547, #c9a227, #e8c547);
    background-size: 400% 400%;
    z-index: -1;
    animation: goldenBorderFlow 6s ease-in-out infinite;

}

.bio-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(232, 197, 71, 0.1), transparent);
    animation: goldenSpin 8s linear infinite;
    pointer-events: none;
}

@keyframes goldenBorderFlow {

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

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

@keyframes goldenSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.bio-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.bio-avatar {
    font-size: 4rem;
    background: radial-gradient(circle, rgba(232, 197, 71, 0.3), transparent);
    border-radius: 50%;
    padding: 1rem;
    animation: avatarGlow 3s ease-in-out infinite;

}

@keyframes avatarGlow {

    0%,
    100% {}

    50% {}
}

.bio-info h3 {
    font-size: 2rem;
    background: linear-gradient(90deg, #e8c547, #ffd700, #e8c547);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldenTextShift 4s linear infinite;
}

@keyframes goldenTextShift {

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

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

.bio-subtitle {
    color: var(--gray-400);
    font-size: 1rem;
}

.bio-content {
    position: relative;
    z-index: 1;
}

.bio-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.bio-quote {
    font-style: italic;
    font-size: 1.2rem;
    color: var(--gold);
    border-left: 4px solid var(--gold);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    position: relative;
}

.bio-quote::before {
    content: '"';
    position: absolute;
    left: -10px;
    top: -20px;
    font-size: 4rem;
    color: rgba(232, 197, 71, 0.3);
}

.bio-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.bio-stat {
    text-align: center;
    position: relative;
}

.bio-stat::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: statUnderline 2s ease-in-out infinite;
}

@keyframes statUnderline {

    0%,
    100% {
        opacity: 0.5;
        width: 60%;
    }

    50% {
        opacity: 1;
        width: 80%;
    }
}

.bio-stat-value {
    font-size: 2.5rem;
    font-weight: bold;
    display: block;
}

.bio-stat-label {
    font-size: 0.8rem;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ========================================
   COMPARISON PANELS - UNIQUE DESIGNS
   ======================================== */

/* Kevlar Panel - GOLDEN PREMIUM */
.kevlar-panel {
    position: relative;
    background: linear-gradient(135deg, rgba(20, 15, 5, 0.98), rgba(40, 30, 10, 0.95)) !important;
}

.kevlar-panel::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 12px;
    background: linear-gradient(90deg, #e8c547, #ffd700, #ffcc00, #e8c547);
    background-size: 400% 100%;
    z-index: -1;
    animation: goldenPanelGlow 3s linear infinite;

}

@keyframes goldenPanelGlow {

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

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

/* Steel Panel - INDUSTRIAL RED/GRAY */
.steel-panel {
    position: relative;
    background: linear-gradient(135deg, rgba(25, 20, 20, 0.98), rgba(50, 40, 40, 0.95)) !important;
}

.steel-panel::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 12px;
    background: linear-gradient(90deg, #ff4444, #aa2222, #884444, #ff4444);
    background-size: 400% 100%;
    z-index: -1;
    animation: steelPanelGlow 4s linear infinite;

}

@keyframes steelPanelGlow {

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

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

/* Aluminum Panel - CYAN TECH */
.aluminum-panel {
    position: relative;
    background: linear-gradient(135deg, rgba(10, 20, 30, 0.98), rgba(20, 40, 60, 0.95)) !important;
}

.aluminum-panel::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 12px;
    background: linear-gradient(90deg, #00ffff, #0088ff, #00ccff, #00ffff);
    background-size: 400% 100%;
    z-index: -1;
    animation: aluminumPanelGlow 3.5s linear infinite;

}

@keyframes aluminumPanelGlow {

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

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

/* ========================================
   DETAILED COMPARISON RESULTS
   ======================================== */
.comparison-result-detailed {
    background: rgba(5, 10, 20, 0.95);
    border-radius: 16px;
    padding: 2rem;
    margin-top: 3rem;
    position: relative;
}

.comparison-result-detailed::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 20px;
    background: linear-gradient(90deg,
            #e8c547, #00ffff, #ff4444, #e8c547);
    background-size: 600% 100%;
    z-index: -1;
    animation: resultsBorderGlow 5s linear infinite;

}

@keyframes resultsBorderGlow {

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

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

/* Performance Comparison Bars */
.performance-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.perf-category {
    background: rgba(10, 15, 25, 0.8);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.perf-label {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--star-white);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.perf-bars {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.perf-bar-item {
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    align-items: center;
    gap: 0.5rem;
}

.bar-label {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.bar-container {
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: visible;
}

.bar-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease-out;
}

.bar-fill.gold-fill {
    background: linear-gradient(90deg, #e8c547, #ffd700);

}

.bar-fill.steel-fill {
    background: linear-gradient(90deg, #888, #aaa);
}

.bar-fill.cyan-fill {
    background: linear-gradient(90deg, #00ccff, #00ffff);

}

.bar-value {
    font-size: 0.85rem;
    font-weight: bold;
    text-align: right;
}

/* Winner Stats Grid */
.winner-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.winner-stat {
    text-align: center;
    padding: 1.5rem;
    background: rgba(10, 15, 25, 0.8);
    border-radius: 12px;
    position: relative;
    overflow: visible;
}

.winner-stat.gold-stat {
    border: 2px solid rgba(232, 197, 71, 0.5);
}

.winner-stat.cyan-stat {
    border: 2px solid rgba(0, 255, 255, 0.5);
}

.winner-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {

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

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

.winner-value {
    font-size: 2.5rem;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 0.5rem;
}

.winner-label {
    font-size: 0.75rem;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Detailed Analysis Box */
.detailed-analysis-box {
    background: rgba(10, 15, 25, 0.9);
    border: 1px solid rgba(232, 197, 71, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.detailed-analysis-box h4 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.analysis-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
}

.analysis-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.analysis-content {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--gray-300);
}

/* Final Verdict */
.final-verdict {
    background: linear-gradient(135deg, rgba(232, 197, 71, 0.1), rgba(0, 255, 255, 0.1));
    border: 2px solid rgba(232, 197, 71, 0.5);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: visible;
}

.final-verdict::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(232, 197, 71, 0.1), transparent);
    animation: verdictSpin 10s linear infinite;
    pointer-events: none;
}

@keyframes verdictSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.verdict-crown {
    font-size: 4rem;
    animation: crownFloat 3s ease-in-out infinite;

}

@keyframes crownFloat {

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

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

.verdict-title {
    font-size: 1.5rem;
    background: linear-gradient(90deg, #e8c547, #ffd700, #00ffff, #e8c547);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: verdictTextGlow 4s linear infinite;
    margin: 1rem 0;
    position: relative;
    z-index: 1;
}

@keyframes verdictTextGlow {

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

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

.verdict-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--gray-300);
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

/* ========================================
   KEVLAR AAA BACKGROUND ENGINE
   ======================================== */
#cvs {
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
}

.kv-scan {
    position: fixed;
    inset: 0;
    z-index: -9;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, transparent 0, transparent 3px, rgba(0, 0, 0, .02) 3px, rgba(0, 0, 0, .02) 4px);
}

.kv-vig {
    position: fixed;
    inset: 0;
    z-index: -8;
    pointer-events: none;
    background: radial-gradient(ellipse 95% 95% at 50% 50%, transparent 30%, rgba(3, 1, 10, .72) 100%);
}

/* Override old body background */
body {
    background: #06020e !important;
}

body::before,
body::after {
    display: none !important;
}

.spider-web-bg,
.tech-grid-overlay,
.scan-overlay,
#main-canvas {
    display: none !important;
}

/* FPS Badge */
#fps-badge {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 20;
    pointer-events: none;
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: rgba(0, 255, 200, .55);
    letter-spacing: 2px;
}

#fps-badge span {
    color: #00ffcc;

}

/* Tactical Button */
#tbtn {
    position: fixed;
    bottom: 34px;
    right: 34px;
    width: 88px;
    height: 88px;
    z-index: 110;
    cursor: pointer;
}

/* Outer hex glow ring */
.r1 {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    background: conic-gradient(from 0deg, #ff0080, #ff8000, #ffff00, #00ff80, #0080ff, #8000ff, #ff0080) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: rspin 4s linear infinite;
}

.r2 {
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    border: 1.5px dashed rgba(0, 255, 200, .35);
    animation: rspin 9s linear infinite reverse;
}

.r3 {
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    border: 1px solid rgba(200, 100, 255, .3);
    animation: rspin 6s linear infinite;
}

@keyframes rspin {
    to {
        transform: rotate(360deg);
    }
}

/* 4 pulsing corner diamonds */
.rc {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #00ffcc;
    transform: rotate(45deg);
    animation: rcPulse 2s ease-in-out infinite;
}

.rc.a {
    top: 3px;
    left: 50%;
    margin-left: -3px;
    animation-delay: 0s;
}

.rc.b {
    right: 3px;
    top: 50%;
    margin-top: -3px;
    animation-delay: 0.5s;
}

.rc.c {
    bottom: 3px;
    left: 50%;
    margin-left: -3px;
    animation-delay: 1s;
}

.rc.d {
    left: 3px;
    top: 50%;
    margin-top: -3px;
    animation-delay: 1.5s;
}

@keyframes rcPulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 6px #00ffcc;
        transform: rotate(45deg) scale(1);
    }

    50% {
        opacity: 0.3;
        box-shadow: 0 0 2px #00ffcc;
        transform: rotate(45deg) scale(0.6);
    }
}

/* Blinking radar dot */
.rd {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff0066;
    box-shadow: 0 0 8px #ff0066;
    animation: bd 1s ease-in-out infinite;
}

@keyframes bd {

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

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

/* Core button */
.rcore {
    position: absolute;
    inset: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, rgba(0, 40, 30, 1), rgba(1, 4, 18, 1));
    border: 1.5px solid rgba(0, 255, 200, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow .3s, border-color .3s;
    box-shadow: 0 0 15px rgba(0, 255, 200, 0.15), inset 0 0 10px rgba(0, 255, 200, 0.05);
}

/* Spinning radar sweep inside core */
.rcore::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(0, 255, 200, 0.35) 0deg, transparent 60deg, transparent 360deg);
    animation: radarSweep 2.5s linear infinite;
}

@keyframes radarSweep {
    from {
        transform: rotate(0deg);
    }

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

/* HUD label below */
.rcore::after {
    content: 'HUD';
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 3px;
    color: rgba(0, 255, 200, 0.6);
    white-space: nowrap;
}

#tbtn:hover .rcore {
    border-color: rgba(0, 255, 200, .75);
    box-shadow: 0 0 25px rgba(0, 255, 200, 0.4), inset 0 0 15px rgba(0, 255, 200, 0.1);
}

#tbtn:active .rcore {
    transform: scale(.93);
}

/* HUD Panel */
#hud {
    position: fixed;
    bottom: 30px;
    right: 118px;
    width: 340px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 255, 200, .2) transparent;
    z-index: 110;
    background: rgba(2, 8, 6, .97);
    border: 1px solid rgba(0, 255, 200, .14);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transform-origin: bottom right;
    transform: scale(.5) translate(30px, 30px);
    opacity: 0;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .3s;
    pointer-events: none;
}

#hud.on {
    transform: scale(1) translate(0, 0);
    opacity: 1;
    pointer-events: all;
}

.hb {
    height: 2px;
    background: linear-gradient(90deg, #00ffcc, #00aaff, #aa00ff, #ff0066, #ff6600, #00ffcc);
    background-size: 400% 100%;
    animation: hbs 3s linear infinite;
}

@keyframes hbs {
    0% {
        background-position: 400% 0;
    }

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

.hi {
    padding: 14px;
    position: relative;
}

.ht {
    font-family: 'Orbitron', sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: rgba(0, 255, 200, .55);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.htd {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00ffcc;

    animation: bd 2s infinite;
    flex-shrink: 0;
}

.hcl {
    position: absolute;
    top: 14px;
    right: 12px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 255, 200, .12);
    color: rgba(0, 255, 200, .38);
    font-size: 11px;
    transition: all .2s;
    line-height: 1;
}

.hcl:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
}

.hrow {
    display: flex;
    border-bottom: 1px solid rgba(0, 255, 200, .06);
}

.hrow:last-child {
    border-bottom: none;
}

.hcell {
    flex: 1;
    padding: 9px 10px;
    border-right: 1px solid rgba(0, 255, 200, .06);
}

.hcell:last-child {
    border-right: none;
}

.hcell.full {
    flex: none;
    width: 100%;
}

.hl {
    font-size: 6.5px;
    letter-spacing: 1.5px;
    color: rgba(0, 255, 200, .3);
    margin-bottom: 4px;
    white-space: nowrap;
}

.hv {
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .5px;
    line-height: 1;
}

.cc {
    color: #00e0ff;

}

.cg {
    color: #00ffcc;

}

.co {
    color: #ffb020;

}

.htag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    margin-top: 4px;
    border: 1px solid rgba(0, 255, 200, .2);
    border-radius: 2px;
    font-size: 6.5px;
    letter-spacing: 1.5px;
    color: #00ffcc;
}

.htag::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #00ffcc;

    flex-shrink: 0;
}

.hbw {
    height: 3px;
    background: rgba(255, 255, 255, .05);
    border-radius: 2px;
    margin-top: 8px;
    overflow: visible;
}

.hbf {
    height: 100%;
    background: linear-gradient(90deg, #00ffcc, #00aaff);
    transition: width .6s ease;
    border-radius: 2px;
}

.fps-big {
    font-size: 22px !important;
}

.hft {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 255, 200, .07);
    font-size: 6.5px;
    letter-spacing: .8px;
    color: rgba(0, 255, 200, .18);
    display: flex;
    justify-content: space-between;
}

/* ========================================
   EPIC 3D HOLOGRAPHIC SPECIFICATIONS
   ======================================== */

/* Section container — holographic grid backdrop */
.specs-section {
    position: relative;
    overflow: visible;
    padding: 5rem 0 !important;
}

.specs-section::before {
    content: '';
    position: absolute;
    inset: -100px;
    background:
        linear-gradient(90deg, rgba(0, 255, 200, .035) 1px, transparent 1px),
        linear-gradient(0deg, rgba(0, 255, 200, .035) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: holoGridScroll 18s linear infinite;
    pointer-events: none;
    z-index: 0;
}

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

    100% {
        transform: translateX(48px) translateY(48px);
    }
}

/* Ambient depth rays */
.specs-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 50%, rgba(0, 255, 200, .04) 0%, transparent 70%),
        radial-gradient(ellipse 30% 60% at 20% 30%, rgba(0, 100, 255, .05) 0%, transparent 60%),
        radial-gradient(ellipse 30% 60% at 80% 70%, rgba(255, 50, 100, .04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: specsAmbient 6s ease-in-out infinite;
}

@keyframes specsAmbient {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.specs-grid {
    perspective: 1400px !important;
    perspective-origin: 50% 0% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2.5rem !important;
    margin-top: 3rem !important;
    position: relative;
    z-index: 1;
}

/* ─── HOLOGRAPHIC SPEC CARD ─── */
.spec-category {
    position: relative !important;
    background: rgba(1, 3, 10, 0.97) !important;
    padding: 0 !important;
    border: none !important;
    transform-style: preserve-3d;
    transition: transform 0.15s ease, box-shadow 0.3s ease !important;
    cursor: crosshair;
    overflow: visible;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    isolation: isolate;
}

/* Scan beam */
.spec-category::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 6;
    pointer-events: none;
    border-radius: 0;
}

.spec-category:nth-child(1) {}

.spec-category:nth-child(1)::after {
    background: linear-gradient(90deg, transparent, rgba(0, 255, 200, .9), rgba(0, 255, 200, 1), rgba(0, 255, 200, .9), transparent);

    animation: scanBeamCyan 3.8s linear infinite;
}

.spec-category:nth-child(2) {}

.spec-category:nth-child(2)::after {
    background: linear-gradient(90deg, transparent, rgba(255, 50, 100, .9), rgba(255, 50, 100, 1), rgba(255, 50, 100, .9), transparent);

    animation: scanBeamRed 5s linear infinite 0.8s;
}

.spec-category:nth-child(3) {}

.spec-category:nth-child(3)::after {
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, .9), rgba(255, 215, 0, 1), rgba(255, 215, 0, .9), transparent);

    animation: scanBeamGold 4.5s linear infinite 1.8s;
}

@keyframes scanBeamCyan {
    0% {
        top: -4px;
    }

    100% {
        top: calc(100% + 4px);
    }
}

@keyframes scanBeamRed {
    0% {
        top: -4px;
    }

    100% {
        top: calc(100% + 4px);
    }
}

@keyframes scanBeamGold {
    0% {
        top: -4px;
    }

    100% {
        top: calc(100% + 4px);
    }
}

/* Holographic inner shimmer overlay */
.spec-category .holo-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(0, 255, 200, .03) 0%, rgba(0, 100, 255, .04) 33%,
            rgba(255, 0, 180, .03) 66%, rgba(0, 255, 200, .03) 100%);
    background-size: 300% 300%;
    animation: holoShimmerCard 5s linear infinite;
    pointer-events: none;
    z-index: 2;
}

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

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

/* Card inner padding container */
.spec-category-inner {
    padding: 0;
    position: relative;
    z-index: 3;
}

/* ─── CATEGORY TITLE ─── */
.category-title {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    padding: 1.1rem 1.5rem !important;
    position: relative;
    border-bottom: none !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: titleFlicker 7s ease-in-out infinite;
}

.category-title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    animation: dotBlink 1.5s ease-in-out infinite;
}

.spec-category:nth-child(1) .category-title {
    background: linear-gradient(135deg, rgba(0, 255, 200, .12) 0%, rgba(0, 255, 200, .04) 100%) !important;
    color: #00ffcc !important;

    border-bottom: 1px solid rgba(0, 255, 200, .2) !important;
}

.spec-category:nth-child(1) .category-title::before {
    background: #00ffcc;

}

.spec-category:nth-child(2) .category-title {
    background: linear-gradient(135deg, rgba(255, 50, 100, .12) 0%, rgba(255, 50, 100, .04) 100%) !important;
    color: #ff3264 !important;

    border-bottom: 1px solid rgba(255, 50, 100, .2) !important;
}

.spec-category:nth-child(2) .category-title::before {
    background: #ff3264;

}

.spec-category:nth-child(3) .category-title {
    background: linear-gradient(135deg, rgba(255, 215, 0, .12) 0%, rgba(255, 215, 0, .04) 100%) !important;
    color: #ffd700 !important;

    border-bottom: 1px solid rgba(255, 215, 0, .2) !important;
}

.spec-category:nth-child(3) .category-title::before {
    background: #ffd700;

}

@keyframes dotBlink {

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

    50% {
        opacity: .4;
        transform: scale(0.7);
    }
}

@keyframes titleFlicker {

    0%,
    93%,
    100% {
        opacity: 1;
    }

    94% {
        opacity: .7;
    }

    95% {
        opacity: 1;
    }

    97% {
        opacity: .5;
    }

    98% {
        opacity: 1;
    }
}

/* ─── SPEC ITEMS ─── */
.spec-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0.5rem 0 0.75rem !important;
}

.spec-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.88rem !important;
    padding: 0.6rem 1.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, .03) !important;
    position: relative;
    transition: background 0.2s, transform 0.15s !important;
    opacity: 0;
    transform: translateX(-16px);
    animation: specItemReveal 0.4s ease forwards;
}

.spec-item:nth-child(1) {
    animation-delay: 0.05s;
}

.spec-item:nth-child(2) {
    animation-delay: 0.12s;
}

.spec-item:nth-child(3) {
    animation-delay: 0.19s;
}

.spec-item:nth-child(4) {
    animation-delay: 0.26s;
}

.spec-item:nth-child(5) {
    animation-delay: 0.33s;
}

@keyframes specItemReveal {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.spec-item:last-child {
    border-bottom: none !important;
}

.spec-item:hover {
    background: rgba(0, 255, 200, .04) !important;
    transform: translateX(4px) !important;
}

/* Accent bar on the left */
.spec-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    opacity: 0;
    transition: opacity 0.2s;
}

.spec-item:hover::before {
    opacity: 1;
}

.spec-category:nth-child(1) .spec-item::before {
    background: rgba(0, 255, 200, .7);
}

.spec-category:nth-child(2) .spec-item::before {
    background: rgba(255, 50, 100, .7);
}

.spec-category:nth-child(3) .spec-item::before {
    background: rgba(255, 215, 0, .7);
}

/* Spec Name */
.spec-name {
    color: rgba(160, 185, 210, .65) !important;
    font-size: 0.78rem !important;
    font-family: 'Share Tech Mono', monospace !important;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.spec-name::before {
    content: '//';
    color: rgba(0, 255, 200, .22);
    font-size: 0.65rem;
    flex-shrink: 0;
}

/* ─── SPEC VALUES — NEON DISPLAY ─── */
.spec-value {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    min-width: 110px;
    text-align: right;
    position: relative;
}

.spec-value.gold {
    color: #ffd700 !important;

    animation: goldNeon 2.5s ease-in-out infinite !important;
}

.spec-value.cyan {
    color: #00ffcc !important;

    animation: cyanNeon 2s ease-in-out infinite !important;
}

@keyframes goldNeon {

    0%,
    100% {}

    50% {}
}

@keyframes cyanNeon {

    0%,
    100% {}

    50% {}
}

/* ─── CORNER HUD BRACKETS ─── */
.spec-hud-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: rgba(0, 255, 200, .5);
    border-style: solid;
    z-index: 10;
    pointer-events: none;
}

.spec-hud-corner.tl {
    top: 4px;
    left: 4px;
    border-width: 2px 0 0 2px;
}

.spec-hud-corner.tr {
    top: 4px;
    right: 4px;
    border-width: 2px 2px 0 0;
}

.spec-hud-corner.bl {
    bottom: 4px;
    left: 4px;
    border-width: 0 0 2px 2px;
}

.spec-hud-corner.br {
    bottom: 4px;
    right: 4px;
    border-width: 0 2px 2px 0;
}

.spec-category:nth-child(2) .spec-hud-corner {
    border-color: rgba(255, 50, 100, .5);
}

.spec-category:nth-child(3) .spec-hud-corner {
    border-color: rgba(255, 215, 0, .5);
}

/* ─── SECTION TITLE UPGRADE ─── */
.specs-section .section-title {
    font-size: 3.5rem !important;
    letter-spacing: 0.2em !important;
    position: relative;
    z-index: 1;
}

/* Data stream for specs */
.specs-section .data-stream {
    position: relative;
    z-index: 1;
}

/* Hover glow state */
.spec-category:hover {}

.spec-category:nth-child(2):hover {}

.spec-category:nth-child(3):hover {}

/* ─── VALUE FLICKER ANIMATION ─── */
@keyframes valueGlitch {

    0%,
    89%,
    100% {
        opacity: 1;
        transform: none;
    }

    90% {
        opacity: .6;
        transform: skewX(-2deg) translateX(2px);
        filter: hue-rotate(40deg);
    }

    92% {
        opacity: 1;
        transform: none;
        filter: none;
    }

    95% {
        opacity: .8;
        transform: skewX(1deg);
        filter: hue-rotate(-20deg);
    }

    97% {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

.spec-value.glitch-active {
    animation: valueGlitch 0.3s ease forwards, goldNeon 2.5s ease-in-out infinite 0.3s !important;
}

.spec-value.cyan.glitch-active {
    animation: valueGlitch 0.3s ease forwards, cyanNeon 2s ease-in-out infinite 0.3s !important;
}


/* ========================================
   SHOCKWAVE CLICK EFFECT KEYFRAMES
   ======================================== */
@keyframes shockwaveRing {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }

    60% {
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(3.5);
        opacity: 0;
    }
}

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

    50% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0.6;
    }

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

@keyframes sparkFly {
    0% {
        transform: translate(-50%, -100%) rotate(var(--ang, 0rad)) scaleY(1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -100%) rotate(var(--ang, 0rad)) scaleY(0) translateY(-40px);
        opacity: 0;
    }
}

/* ========================================
   BALLISTIC SIMULATION INTERACTIVE
   ======================================== */

.ballistic-sim-wrapper {
    margin: 3rem 0;
    padding: 2rem 1.5rem 1.5rem;
    background: rgba(0, 5, 15, 0.6);
    border: 1px solid rgba(0, 255, 180, 0.12);
    position: relative;
    overflow: visible;
}

.ballistic-sim-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 40% at 50% 50%,
            rgba(255, 200, 0, 0.03) 0%,
            transparent 70%);
    pointer-events: none;
}

.ballistic-sim-title {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 0.4rem;
    letter-spacing: 4px;
}

.ballistic-sim-subtitle {
    text-align: center;
    color: var(--gray-400);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    margin-bottom: 2rem;
}

.ballistic-panels {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
}

@media (max-width: 820px) {
    .ballistic-panels {
        grid-template-columns: 1fr;
        justify-items: center;
    }
}

/* ─── Material Panel ─── */
.ballistic-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}

.ballistic-mat-label {
    font-size: 0.85rem;
    letter-spacing: 3px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.gold-dot {
    background: #ffd700;

}

.steel-dot {
    background: #888;

}

/* ─── Canvas wrapper ─── */
.ballistic-canvas-wrapper {
    position: relative;
    display: inline-block;
}

.ballistic-canvas {
    display: block;
    width: 260px;
    height: 260px;
    background: #000;
}

/* HUD corner brackets */
.bcan-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: rgba(0, 255, 180, 0.5);
    border-style: solid;
}

.bcan-corner.tl {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
}

.bcan-corner.tr {
    top: 0;
    right: 0;
    border-width: 2px 2px 0 0;
}

.bcan-corner.bl {
    bottom: 0;
    left: 0;
    border-width: 0 0 2px 2px;
}

.bcan-corner.br {
    bottom: 0;
    right: 0;
    border-width: 0 2px 2px 0;
}

/* ─── Result badges ─── */
.ballistic-result {
    min-height: 38px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
    text-align: center;
    letter-spacing: 0.5px;
    word-spacing: 1px;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.4s ease;
    transform: translateY(4px);
    padding: 0.45rem 0.8rem;
    border: 1px solid transparent;
    max-width: 260px;
    line-height: 1.4;
}

.ballistic-result.show-kevlar {
    opacity: 1;
    transform: translateY(0);
    color: #00ffcc;
    border-color: rgba(0, 255, 200, 0.35);
    background: rgba(0, 255, 200, 0.08);

}

.ballistic-result.show-steel {
    opacity: 1;
    transform: translateY(0);
    color: #ff5555;
    border-color: rgba(255, 68, 68, 0.35);
    background: rgba(255, 68, 68, 0.08);

}

.ballistic-data-row {
    display: flex;
    gap: 0.4rem;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    align-items: center;
}

.bdata-sep {
    color: #333;
}

/* ─── Center column ─── */
.ballistic-center-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    min-width: 160px;
}

.bullet-info-box {
    padding: 0.75rem 1rem;
    text-align: center;
    background: #081220 !important;
    border: 1px solid #1a3a50 !important;
    width: 100%;
    position: relative;
    z-index: 2;
}

.bullet-icon {
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
}

.ballistic-fire-btn {
    padding: 0.75rem 1.5rem !important;
    width: 100%;
    letter-spacing: 2px;
}

/* ─── Kinetic energy meter ─── */
.kinetic-meter {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.km-label {
    font-size: 0.6rem;
    color: #666;
    letter-spacing: 2px;
}

.km-bar-outer {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: visible;
}

.km-bar-inner {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #00ffcc, #ffd700, #ff6600);
    transition: width 0.1s linear;

}

.km-value {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.85rem;
}

/* ─── Phase label ─── */
.impact-phase-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #444;
    text-align: center;
    transition: color 0.3s;
}

.impact-phase-label.active {
    color: #ffd700;
}

.impact-phase-label.impact {
    color: #ff6600;
    animation: phaseFlash 0.2s 3;
}

.impact-phase-label.done {
    color: #00ffcc;
}

@keyframes phaseFlash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* ═══════════════════════════════════════════
   BREAK THE KEVLAR — MINI GAME
   ═══════════════════════════════════════════ */
.break-section {
    background: linear-gradient(to bottom, transparent, rgba(40, 0, 0, 0.3), transparent);
}

.break-game-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
    padding: 2rem;
    background: rgba(5, 0, 0, 0.9);
    border-radius: 16px;
}

@media(max-width:768px) {
    .break-game-container {
        grid-template-columns: 1fr;
    }
}

.break-canvas-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(2, 0, 5, 0.95);
    min-height: 300px;
}

#break-canvas {
    width: 100%;
    height: 300px;
    display: block;
}

.break-status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: #00ffcc;
    text-shadow: 0 0 20px #00ffcc;
    letter-spacing: 3px;
    text-align: center;
    pointer-events: none;
    transition: all 0.5s;
}

.break-status.danger {
    color: #ff4444;
    text-shadow: 0 0 20px #ff4444;
    animation: breakFlicker 0.3s infinite;
}

.break-status.broken {
    color: #ff0000;
    text-shadow: 0 0 40px #ff0000;
    font-size: 1.4rem;
}

@keyframes breakFlicker {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.5
    }
}

.break-integrity-bar {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.break-integrity-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #00ff88, #00ffcc);
    border-radius: 4px;
    transition: width 0.3s, background 0.3s;
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.7);
}

.break-integrity-label {
    position: absolute;
    right: 0;
    top: -22px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    color: #00ffcc;
}

.break-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.break-control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.break-label-text {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
}

.break-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.break-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px rgba(232, 197, 71, 0.8);
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.force-slider::-webkit-slider-thumb {
    background: #ff6644;
    box-shadow: 0 0 10px rgba(255, 100, 68, 0.8);
}

.temp-slider::-webkit-slider-thumb {
    background: #ff4400;
    box-shadow: 0 0 10px rgba(255, 68, 0, 0.8);
}

.ph-slider::-webkit-slider-thumb {
    background: #44aaff;
    box-shadow: 0 0 10px rgba(68, 170, 255, 0.8);
}

.uv-slider::-webkit-slider-thumb {
    background: #cc66ff;
    box-shadow: 0 0 10px rgba(204, 102, 255, 0.8);
}

.break-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    color: var(--gold);
    text-align: right;
}

.break-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 0.5rem;
}

.break-stat-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px;
    border-radius: 8px;
    text-align: center;
}

.bsc-label {
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 4px;
    font-family: 'Share Tech Mono', monospace;
}

.bsc-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: #00ffcc;
}

/* ═══════════════════════════════════════════
   BALLISTIC CALCULATOR
   ═══════════════════════════════════════════ */
.calc-section {
    background: linear-gradient(to bottom, transparent, rgba(0, 10, 30, 0.4), transparent);
}

.calc-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

@media(max-width:768px) {
    .calc-container {
        grid-template-columns: 1fr;
    }
}

.calc-inputs,
.calc-results {
    background: rgba(5, 8, 20, 0.95);
    padding: 2rem;
    border-radius: 12px;
}

.calc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 1.2rem;
}

.calc-field label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
}

.calc-field small {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
}

.calc-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    padding: 10px 14px;
    border-radius: 6px;
    color: var(--gold);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.calc-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 15px rgba(232, 197, 71, 0.2);
}

.calc-result-main {
    text-align: center;
    padding: 1.5rem;
    background: rgba(0, 255, 200, 0.03);
    border: 1px solid rgba(0, 255, 200, 0.1);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.crm-label {
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 0.5rem;
    font-family: 'Share Tech Mono', monospace;
}

.crm-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--cyan);
    text-shadow: 0 0 20px rgba(100, 210, 255, 0.5);
}

.calc-result-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 1rem;
}

.crb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.crb-track {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.crb-fill {
    height: 100%;
    width: var(--w, 0%);
    border-radius: 2px;
    background: linear-gradient(90deg, #ff4444, #ff8800);
    box-shadow: 0 0 6px rgba(255, 100, 0, 0.5);
    transition: width 1s ease;
}

.crb-fill.cyan {
    background: linear-gradient(90deg, #00aaff, #00ffcc);
    box-shadow: 0 0 6px rgba(0, 200, 255, 0.5);
}

.crb-fill.gold {
    background: linear-gradient(90deg, #cc9900, #ffd700);
    box-shadow: 0 0 6px rgba(255, 200, 0, 0.5);
}

.crb-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: var(--gold);
    min-width: 60px;
    text-align: right;
}

.calc-verdict {
    padding: 1rem;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    transition: all 0.5s;
}

.calc-verdict.safe {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: #00ff88;
}

.calc-verdict.warning {
    background: rgba(255, 165, 0, 0.1);
    border: 1px solid rgba(255, 165, 0, 0.3);
    color: #ffaa00;
}

.calc-verdict.danger {
    background: rgba(255, 50, 50, 0.1);
    border: 1px solid rgba(255, 50, 50, 0.3);
    color: #ff4444;
}

.calc-formula {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 1rem;
    border-radius: 8px;
}

.cf-title {
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 8px;
    font-family: 'Share Tech Mono', monospace;
}

.cf-eq {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: rgba(100, 210, 255, 0.8);
    line-height: 1.6;
}

/* ═══════════════════════════════════════════
   RESEARCH SECTION
   ═══════════════════════════════════════════ */
.research-section {
    background: linear-gradient(to bottom, transparent, rgba(0, 5, 15, 0.5), transparent);
}

.research-reaction {
    background: rgba(3, 6, 18, 0.97);
    padding: 2rem;
    border-radius: 16px;
}

.reaction-scheme {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.rs-molecule {
    text-align: center;
}

.rs-struct {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(100, 210, 255, 0.2);
    padding: 1rem 1.5rem;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    transition: all 0.3s;
}

.rs-struct:hover {
    border-color: rgba(100, 210, 255, 0.6);
    box-shadow: 0 0 20px rgba(100, 210, 255, 0.15);
}

.rs-struct.product {
    border-color: rgba(0, 255, 136, 0.4);
    background: rgba(0, 255, 136, 0.05);
}

.rs-ring {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.9rem;
    color: var(--cyan);
    margin-bottom: 6px;
}

.rs-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.rs-label small {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
}

.rs-plus {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem;
    color: var(--gold);
}

.rs-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.rs-arrow-line {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--cyan));
    position: relative;
}

.rs-arrow-line::after {
    content: '▶';
    position: absolute;
    right: -8px;
    top: -8px;
    color: var(--cyan);
}

.rs-conditions {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}

.reaction-equation {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(232, 197, 71, 0.2);
    padding: 1rem;
    border-radius: 8px;
}

.req-label {
    font-size: 0.65rem;
    letter-spacing: 2px;
    color: rgba(255, 215, 0, 0.5);
    margin-bottom: 8px;
    font-family: 'Share Tech Mono', monospace;
}

.req-eq {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: rgba(255, 215, 0, 0.9);
    line-height: 1.6;
    overflow-x: auto;
}

.research-formulas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.rf-card {
    background: rgba(5, 8, 20, 0.95);
    padding: 1.5rem;
    border-radius: 12px;
    isolation: isolate;
}

.rf-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.rf-formula {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.3rem;
    color: var(--gold);
    text-shadow: 0 0 15px rgba(232, 197, 71, 0.5);
    margin: 0.75rem 0;
    text-align: center;
}

.rf-desc {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.82rem;
    line-height: 1.5;
    margin-top: 0.5rem;
}

.papers-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.paper-card {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    background: rgba(5, 8, 20, 0.95);
    padding: 1.5rem;
    border-radius: 12px;
    isolation: isolate;
    transition: transform 0.3s;
}

.paper-card:hover {
    transform: translateX(6px);
}

.paper-year {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--gold);
    min-width: 50px;
    text-align: center;
    opacity: 0.8;
}

.paper-content {
    flex: 1;
}

.paper-title {
    font-size: 0.9rem;
    color: white;
    font-weight: 600;
    margin-bottom: 4px;
}

.paper-authors {
    font-size: 0.75rem;
    color: var(--cyan);
    margin-bottom: 4px;
    font-family: 'Share Tech Mono', monospace;
}

.paper-journal {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 8px;
}

.paper-abstract {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.4;
}

.paper-tag {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
    align-self: flex-start;
}

.paper-tag.gold {
    background: rgba(232, 197, 71, 0.1);
    border: 1px solid rgba(232, 197, 71, 0.4);
    color: var(--gold);
}

.paper-tag.cyan {
    background: rgba(100, 210, 255, 0.1);
    border: 1px solid rgba(100, 210, 255, 0.4);
    color: var(--cyan);
}

/* ═══════════════════════════════════════════
   VIRTUAL LAB
   ═══════════════════════════════════════════ */
.lab-section {
    background: linear-gradient(to bottom, transparent, rgba(0, 15, 5, 0.4), transparent);
}

.lab-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2rem;
    margin-top: 2rem;
}

@media(max-width:900px) {
    .lab-container {
        grid-template-columns: 1fr;
    }
}

.lab-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lab-step {
    background: rgba(5, 10, 5, 0.97);
    border: 1px solid rgba(0, 255, 136, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    transition: all 0.4s;
    position: relative;
    overflow: hidden;
}

.lab-step::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(0, 255, 136, 0.5), rgba(0, 200, 100, 0.5));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s;
}

.lab-step.active::before {
    opacity: 1;
}

.lab-step.locked {
    opacity: 0.4;
}

.lab-step.completed {
    border-color: rgba(0, 255, 136, 0.5);
    opacity: 1;
}

.lab-step.completed::before {
    opacity: 0.3;
}

.step-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: rgba(0, 255, 136, 0.3);
    min-width: 50px;
    transition: color 0.4s;
}

.lab-step.active .step-num {
    color: rgba(0, 255, 136, 0.9);
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
}

.lab-step.completed .step-num {
    color: rgba(0, 255, 136, 0.7);
}

.step-content h4 {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.step-content p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.lab-btn {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    color: #00ff88;
    padding: 8px 16px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 1px;
}

.lab-btn:hover:not(:disabled) {
    background: rgba(0, 255, 136, 0.2);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.lab-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.lab-btn.running {
    animation: labBtnPulse 0.8s ease-in-out infinite;
}

@keyframes labBtnPulse {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(0, 255, 136, 0.3)
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 255, 136, 0.8)
    }
}

.step-progress {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    margin-top: 0.75rem;
    overflow: hidden;
}

.sp-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00aa66, #00ff88);
    border-radius: 2px;
    transition: width 0.1s linear;
}

.lab-display {
    position: relative;
    background: rgba(2, 8, 4, 0.97);
    border: 1px solid rgba(0, 255, 136, 0.1);
    border-radius: 16px;
    overflow: hidden;
    min-height: 400px;
}

#lab-canvas {
    width: 100%;
    height: 300px;
    display: block;
}

.lab-readout {
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(0, 255, 136, 0.1);
}

.lr-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: rgba(0, 255, 136, 0.5);
    margin-bottom: 8px;
}

.lr-line {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
}

.lab-result {
    padding: 1rem 1.5rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 2px;
    display: none;
}

.lab-result.success {
    display: block;
    color: #00ff88;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.7);
}

.lab-result.fail {
    display: block;
    color: #ff4444;
}

/* ═══════════════════════════════════════════════════════
   HUD DOC CARDS — NUCLEAR FIX
   ═══════════════════════════════════════════════════════ */

/* Kill ALL old card border pseudo-elements */
.tech-doc-card::before,
.tech-doc-card::after,
.tech-ultra-card::before,
.tech-ultra-card::after,
.rf-card::before,
.rf-card::after,
.paper-card::before,
.paper-card::after {
    display: none !important;
}

.hud-doc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (max-width: 1100px) {
    .hud-doc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .hud-doc-grid {
        grid-template-columns: 1fr;
    }
}

.hud-doc-card {
    position: relative;
    background: #050912;
    border-radius: 12px;
    padding: 1.5rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hud-doc-card[data-color="gold"] {
    border: 1px solid rgba(232, 197, 71, 0.3);
    box-shadow: 0 0 20px rgba(232, 197, 71, 0.06), inset 0 0 30px rgba(232, 197, 71, 0.02);
}

.hud-doc-card[data-color="cyan"] {
    border: 1px solid rgba(100, 210, 255, 0.3);
    box-shadow: 0 0 20px rgba(100, 210, 255, 0.06), inset 0 0 30px rgba(100, 210, 255, 0.02);
}

.hud-doc-card:hover {
    transform: translateY(-6px) scale(1.01);
}

.hud-doc-card[data-color="gold"]:hover {
    border-color: rgba(232, 197, 71, 0.7);
    box-shadow: 0 0 40px rgba(232, 197, 71, 0.2), 0 20px 40px rgba(0, 0, 0, 0.5);
}

.hud-doc-card[data-color="cyan"]:hover {
    border-color: rgba(100, 210, 255, 0.7);
    box-shadow: 0 0 40px rgba(100, 210, 255, 0.2), 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Animated scanline */
.hdc-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 197, 71, 0.6), transparent);
    animation: hdcScan 4s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.hud-doc-card[data-color="cyan"] .hdc-scan {
    background: linear-gradient(90deg, transparent, rgba(100, 210, 255, 0.6), transparent);
}

@keyframes hdcScan {
    0% {
        top: -2px
    }

    100% {
        top: 100%
    }
}

/* Corner brackets */
.hdc-corner {
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: 2;
}

.hdc-corner::before,
.hdc-corner::after {
    content: '';
    position: absolute;
    background: rgba(232, 197, 71, 0.7);
}

.hud-doc-card[data-color="cyan"] .hdc-corner::before,
.hud-doc-card[data-color="cyan"] .hdc-corner::after {
    background: rgba(100, 210, 255, 0.7);
}

.hdc-corner.tl {
    top: 6px;
    left: 6px;
}

.hdc-corner.tl::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
}

.hdc-corner.tl::after {
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
}

.hdc-corner.tr {
    top: 6px;
    right: 6px;
}

.hdc-corner.tr::before {
    top: 0;
    right: 0;
    width: 100%;
    height: 1px;
}

.hdc-corner.tr::after {
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
}

.hdc-corner.bl {
    bottom: 6px;
    left: 6px;
}

.hdc-corner.bl::before {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
}

.hdc-corner.bl::after {
    bottom: 0;
    left: 0;
    width: 1px;
    height: 100%;
}

.hdc-corner.br {
    bottom: 6px;
    right: 6px;
}

.hdc-corner.br::before {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 1px;
}

.hdc-corner.br::after {
    bottom: 0;
    right: 0;
    width: 1px;
    height: 100%;
}

/* Header */
.hdc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.hdc-icon-wrap {
    width: 44px;
    height: 44px;
    background: rgba(232, 197, 71, 0.08);
    border: 1px solid rgba(232, 197, 71, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hdc-icon-wrap.cyan-icon {
    background: rgba(100, 210, 255, 0.08);
    border-color: rgba(100, 210, 255, 0.2);
}

.hdc-icon-wrap.warn-icon {
    background: rgba(255, 170, 0, 0.08);
    border-color: rgba(255, 170, 0, 0.2);
}

.hdc-icon {
    font-size: 1.4rem;
}

.hdc-meta {
    flex: 1;
}

.hdc-tag {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1.5px;
    margin-bottom: 3px;
}

.hdc-status {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    color: #e8c547;
}

.cyan-status {
    color: #64d2ff;
}

.warn-status {
    color: #ffaa00;
}

/* Title & text */
.hdc-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 0.75rem;
}

.hdc-title.gold {
    color: #e8c547;
    text-shadow: 0 0 15px rgba(232, 197, 71, 0.4);
}

.hdc-title.cyan {
    color: #64d2ff;
    text-shadow: 0 0 15px rgba(100, 210, 255, 0.4);
}

.hdc-text {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Stats row */
.hdc-stats-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.hdc-stat {
    flex: 1;
}

.hds-val {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
}

.hds-val.gold {
    color: #e8c547;
}

.hds-val.cyan {
    color: #64d2ff;
}

.hds-lbl {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 1px;
}

/* Progress bar */
.hdc-bar-wrap {
    height: 3px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.hdc-bar {
    height: 100%;
    width: 0%;
    border-radius: 2px;
    background: linear-gradient(90deg, #c9a227, #e8c547);
    box-shadow: 0 0 8px rgba(232, 197, 71, 0.5);
    animation: hdcBarIn 1.5s cubic-bezier(.25, .46, .45, .94) forwards 0.5s;
}

.hdc-bar.gold-bar {
    background: linear-gradient(90deg, #c9a227, #f5d76e);
}

.hdc-bar.cyan-bar {
    background: linear-gradient(90deg, #00aaff, #64d2ff);
    box-shadow: 0 0 8px rgba(100, 210, 255, 0.5);
}

@keyframes hdcBarIn {
    to {
        width: var(--bw, 70%)
    }
}

/* ═══════════════════════════════════════════════════════
   RESEARCH — REACTION LAB PANEL
   ═══════════════════════════════════════════════════════ */
.reaction-lab-panel {
    background: #030810;
    border: 1px solid rgba(100, 210, 255, 0.15);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: 0 0 40px rgba(100, 210, 255, 0.05), inset 0 0 60px rgba(0, 0, 20, 0.5);
}

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

.rlp-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    color: #64d2ff;
    letter-spacing: 2px;
}

.rlp-live {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    color: #00ff88;
    display: flex;
    align-items: center;
    gap: 6px;
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px #00ff88;
    animation: livePulse 1s ease-in-out infinite;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.4
    }
}

#reaction-canvas {
    width: 100%;
    height: 200px;
    display: block;
}

.reaction-eq-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.req-mono {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    color: rgba(100, 210, 255, 0.9);
}

.req-mono.product {
    color: rgba(0, 255, 136, 0.9);
}

.req-mono.byproduct {
    color: rgba(255, 100, 100, 0.7);
}

.req-op {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    color: rgba(255, 215, 0, 0.7);
}

.req-arrow {
    font-size: 1.2rem;
    color: rgba(255, 215, 0, 0.9);
}

.reaction-stats-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.2);
}

.rsr-item {
    text-align: center;
}

.rsr-val {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #e8c547;
}

.rsr-lbl {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    font-family: 'Share Tech Mono', monospace;
}

.rsr-btn-wrap {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.rsr-btn {
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 1px;
    background: rgba(100, 210, 255, 0.1);
    border: 1px solid rgba(100, 210, 255, 0.3);
    color: #64d2ff;
    transition: all 0.3s;
}

.rsr-btn:hover {
    background: rgba(100, 210, 255, 0.2);
    box-shadow: 0 0 15px rgba(100, 210, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════
   FORMULA HOLOSCREENS
   ═══════════════════════════════════════════════════════ */
.formula-holoscreen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.fholo-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #040a0a;
    min-height: 260px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.fholo-card:nth-child(1) {
    border: 1px solid rgba(232, 197, 71, 0.25);
}

.fholo-card:nth-child(2) {
    border: 1px solid rgba(100, 210, 255, 0.25);
}

.fholo-card:nth-child(3) {
    border: 1px solid rgba(232, 197, 71, 0.25);
}

.fholo-card:nth-child(4) {
    border: 1px solid rgba(100, 210, 255, 0.25);
}

.fholo-card:hover {
    transform: translateY(-8px) scale(1.02);
}

.fholo-card:nth-child(1):hover,
.fholo-card:nth-child(3):hover {
    box-shadow: 0 20px 50px rgba(232, 197, 71, 0.15), 0 0 30px rgba(232, 197, 71, 0.1);
}

.fholo-card:nth-child(2):hover,
.fholo-card:nth-child(4):hover {
    box-shadow: 0 20px 50px rgba(100, 210, 255, 0.15), 0 0 30px rgba(100, 210, 255, 0.1);
}

.fholo-bg-anim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, rgba(232, 197, 71, 0.06) 0%, transparent 70%);
    animation: fholoShimmer 4s ease-in-out infinite;
}

.fholo-card:nth-child(2) .fholo-bg-anim,
.fholo-card:nth-child(4) .fholo-bg-anim {
    background: radial-gradient(ellipse at 50% 0%, rgba(100, 210, 255, 0.06) 0%, transparent 70%);
}

@keyframes fholoShimmer {

    0%,
    100% {
        opacity: 0.5
    }

    50% {
        opacity: 1
    }
}

.fholo-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.4;
}

.fholo-content {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
}

.fholo-id {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 4px;
}

.fholo-category {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 0.5rem;
}

.fholo-category.gold {
    color: #e8c547;
}

.fholo-category.cyan {
    color: #64d2ff;
}

.fholo-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
}

.fholo-eq {
    font-family: 'Share Tech Mono', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    color: #e8c547;
    text-shadow: 0 0 20px rgba(232, 197, 71, 0.6);
    margin-bottom: 1rem;
    text-align: center;
    animation: eqPulse 3s ease-in-out infinite;
}

.fholo-card:nth-child(2) .fholo-eq,
.fholo-card:nth-child(4) .fholo-eq {
    color: #64d2ff;
    text-shadow: 0 0 20px rgba(100, 210, 255, 0.6);
}

@keyframes eqPulse {

    0%,
    100% {
        text-shadow: 0 0 20px rgba(232, 197, 71, 0.4)
    }

    50% {
        text-shadow: 0 0 35px rgba(232, 197, 71, 0.9)
    }
}

.fholo-vars {
    margin-bottom: 0.75rem;
}

.fv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.78rem;
}

.fv-sym {
    color: rgba(255, 255, 255, 0.5);
    min-width: 70px;
    font-family: 'Share Tech Mono', monospace;
}

.fv-eq {
    color: rgba(255, 255, 255, 0.3);
}

.fv-val {
    color: rgba(255, 255, 255, 0.8);
}

.fv-val.gold {
    color: #e8c547;
}

.fv-val.cyan {
    color: #64d2ff;
}

.fholo-verdict {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ═══════════════════════════════════════════════════════
   CLASSIFIED PAPERS
   ═══════════════════════════════════════════════════════ */
.classified-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0 1.5rem;
}

.ch-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 197, 71, 0.4), transparent);
}

.ch-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.75rem;
    color: #e8c547;
    letter-spacing: 3px;
    white-space: nowrap;
}

.classified-papers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-file {
    position: relative;
    overflow: hidden;
    background: #04080f;
    border: 1px solid rgba(232, 197, 71, 0.12);
    border-left: 3px solid #e8c547;
    border-radius: 0 10px 10px 0;
    padding: 1.2rem 1.5rem 1.2rem 1.5rem;
    transition: all 0.3s;
}

.cp-file:hover {
    background: #060c18;
    border-left-color: #64d2ff;
    box-shadow: 0 0 30px rgba(232, 197, 71, 0.08), -4px 0 0 rgba(100, 210, 255, 0.3);
    transform: translateX(4px);
}

.cp-file-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cp-stamp {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    font-weight: 900;
    padding: 2px 8px;
    border: 1px solid rgba(232, 197, 71, 0.5);
    color: #e8c547;
    letter-spacing: 2px;
    background: rgba(232, 197, 71, 0.05);
}

.cp-stamp.cyan-stamp {
    border-color: rgba(100, 210, 255, 0.5);
    color: #64d2ff;
    background: rgba(100, 210, 255, 0.05);
}

.cp-year-badge {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    font-weight: 900;
    color: rgba(232, 197, 71, 0.6);
    min-width: 55px;
}

.cp-year-badge.cyan-year {
    color: rgba(100, 210, 255, 0.6);
}

.cp-clearance {
    margin-left: auto;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    color: rgba(0, 255, 136, 0.7);
    letter-spacing: 2px;
}

.cp-clearance.cyan-cl {
    color: rgba(100, 210, 255, 0.7);
}

.cp-title {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 3px;
}

.cp-author {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.72rem;
    color: #64d2ff;
    margin-bottom: 3px;
}

.cp-journal {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 8px;
}

.cp-abstract {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin-bottom: 8px;
}

.cp-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.cpt {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.55rem;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 1px;
}

.cpt.gold {
    background: rgba(232, 197, 71, 0.08);
    border: 1px solid rgba(232, 197, 71, 0.25);
    color: #e8c547;
}

.cpt.cyan {
    background: rgba(100, 210, 255, 0.08);
    border: 1px solid rgba(100, 210, 255, 0.25);
    color: #64d2ff;
}

.cp-scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 197, 71, 0.4), transparent);
    animation: hdcScan 6s linear infinite;
    pointer-events: none;
}

.cp-file:hover .cp-scanline {
    background: linear-gradient(90deg, transparent, rgba(100, 210, 255, 0.6), transparent);
}

/* ═══════════════════════════════════════════════════════
   MEGA LAB — VIRTUAL LAB REDESIGN
   ═══════════════════════════════════════════════════════ */
.mega-lab {
    display: grid;
    grid-template-columns: 280px 1fr 220px;
    gap: 1.5rem;
    margin-top: 2rem;
    min-height: 600px;
}

@media(max-width:1100px) {
    .mega-lab {
        grid-template-columns: 1fr;
    }
}

/* Left control panel */
.lab-control-panel {
    background: #030810;
    border: 1px solid rgba(0, 255, 136, 0.12);
    border-radius: 14px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 0 30px rgba(0, 255, 136, 0.04);
}

.lcp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lcp-title {
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.4);
}

.lcp-power {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    color: #00ff88;
    animation: livePulse 2s ease-in-out infinite;
}

/* Gauges */
.lab-gauges-row {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.lab-gauge {
    text-align: center;
    flex: 1;
}

.gauge-canvas {
    width: 90px;
    height: 90px;
    display: block;
    margin: 0 auto;
}

.gauge-label {
    font-size: 0.55rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 2px;
    font-family: 'Share Tech Mono', monospace;
}

.gauge-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: #00ff88;
}

/* Step buttons compact */
.lab-steps-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lsc-step {
    background: rgba(0, 255, 136, 0.03);
    border: 1px solid rgba(0, 255, 136, 0.1);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.lsc-step.locked {
    opacity: 0.35;
}

.lsc-step.active {
    border-color: rgba(0, 255, 136, 0.5);
    background: rgba(0, 255, 136, 0.07);
}

.lsc-step.completed {
    border-color: rgba(0, 255, 136, 0.35);
    background: rgba(0, 255, 136, 0.04);
}

.lsc-num {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    font-weight: 900;
    color: rgba(0, 255, 136, 0.25);
    min-width: 22px;
}

.lsc-step.active .lsc-num,
.lsc-step.completed .lsc-num {
    color: rgba(0, 255, 136, 0.8);
}

.lsc-info {
    flex: 1;
    min-width: 0;
}

.lsc-title {
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    margin-bottom: 2px;
}

.lsc-desc {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lsc-btn {
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.25);
    color: #00ff88;
    padding: 5px 10px;
    border-radius: 5px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.lsc-btn:hover:not(:disabled) {
    background: rgba(0, 255, 136, 0.25);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
}

.lsc-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.lsc-progress {
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1px;
    margin-top: 6px;
    overflow: hidden;
    grid-column: 1/-1;
}

.lscp-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00aa66, #00ff88);
    border-radius: 1px;
    transition: width 0.1s;
}

.lscp-fill.cyan {
    background: linear-gradient(90deg, #0088cc, #64d2ff);
}

/* View mode buttons */
.lab-view-modes {}

.lvm-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.lvm-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    padding: 6px;
    border-radius: 6px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 0.5px;
}

.lvm-btn:hover,
.lvm-btn.active {
    background: rgba(0, 255, 136, 0.1);
    border-color: rgba(0, 255, 136, 0.3);
    color: #00ff88;
}

/* Terminal */
.lab-terminal {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 136, 0.1);
    border-radius: 8px;
    padding: 10px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    max-height: 100px;
    overflow-y: auto;
    flex: 1;
}

.lt-header {
    color: rgba(0, 255, 136, 0.4);
    margin-bottom: 6px;
    letter-spacing: 2px;
}

.lt-lines {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lt-line {
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}

.lt-t {
    color: rgba(0, 255, 136, 0.5);
    margin-right: 6px;
}

/* Center main display */
.lab-main-display {
    background: #020509;
    border: 1px solid rgba(0, 255, 136, 0.15);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0, 255, 136, 0.04);
}

.lmd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(0, 255, 136, 0.04);
    border-bottom: 1px solid rgba(0, 255, 136, 0.08);
}

.lmd-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.7rem;
    color: #00ff88;
    letter-spacing: 2px;
}

.lmd-fps {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
}

#lab-main-canvas {
    flex: 1;
    display: block;
    min-height: 450px;
    width: 100%;
}

.lmd-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

.lmd-step-info {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    color: rgba(0, 255, 136, 0.6);
    letter-spacing: 2px;
}

.lmd-progress-ring svg {
    filter: drop-shadow(0 0 8px rgba(232, 197, 71, 0.5));
}

#lab-ring-progress {
    transition: stroke-dashoffset 0.5s ease;
}

/* Right data panel */
.lab-data-panel {
    background: #030810;
    border: 1px solid rgba(100, 210, 255, 0.12);
    border-radius: 14px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ldp-header {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.65rem;
    color: rgba(100, 210, 255, 0.5);
    letter-spacing: 3px;
}

.ldp-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ldp-stat {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    padding: 8px;
}

.ldps-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.ldps-val {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
}

.ldps-val.gold {
    color: #e8c547;
}

.ldps-val.cyan {
    color: #64d2ff;
}

.ldp-chart-wrap {}

.ldpc-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.25);
    margin-bottom: 4px;
}

#lab-chart {
    width: 100%;
    display: block;
    border-radius: 4px;
}

.ldp-molecule-info {
    background: rgba(100, 210, 255, 0.04);
    border: 1px solid rgba(100, 210, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    flex: 1;
}

.ldpmi-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 0.6rem;
    color: #64d2ff;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.ldpmi-content {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
}

.lab-reset-btn {
    background: rgba(255, 50, 50, 0.08);
    border: 1px solid rgba(255, 50, 50, 0.25);
    color: #ff6644;
    padding: 10px;
    border-radius: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 1px;
}

.lab-reset-btn:hover {
    background: rgba(255, 50, 50, 0.18);
    box-shadow: 0 0 15px rgba(255, 50, 50, 0.2);
}

/* ================================================================
   ULTRA STAT CARDS — matching screenshot 2 exactly
   ================================================================ */
.ultra-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    margin-bottom: 2.5rem;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .ultra-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ultra-stats-grid {
        grid-template-columns: 1fr;
    }
}

.ultra-stat-card {
    position: relative;
    border-radius: 8px;
    padding: 3px;
    overflow: hidden;
}

/* Animated border glow */
.ultra-stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    z-index: 0;
    background-size: 300% 100%;
    animation: uscBorderMove 2.5s linear infinite;
}

.usc-teal::before {
    background: linear-gradient(90deg, #00ffff, #0088ff, #00ffcc, #00ffff);
    animation-duration: 3s;
}

.usc-red::before {
    background: linear-gradient(90deg, #ff0040, #ff4444, #cc0020, #ff0040);
    animation-duration: 2.5s;
}

.usc-orange::before {
    background: linear-gradient(90deg, #ff8800, #ffaa00, #e87700, #ff8800);
    animation-duration: 3.5s;
}

.usc-green::before {
    background: linear-gradient(90deg, #00ff88, #00cc55, #00ff44, #00ff88);
    animation-duration: 2.8s;
}

@keyframes uscBorderMove {
    0% {
        background-position: 0% 50%;
    }

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

.usc-inner {
    position: relative;
    z-index: 1;
    background: rgba(4, 1, 14, 0.88);
    border-radius: 6px;
    padding: 1.4rem 1rem 1rem;
    text-align: center;
    height: 100%;
    box-sizing: border-box;
}

.usc-number-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.usc-value {
    font-size: 2.8rem;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1;
}

.usc-teal .usc-value {
    color: #64d2ff;
    text-shadow: 0 0 20px rgba(100, 210, 255, 0.6);
}

.usc-red .usc-value {
    color: #64d2ff;
    text-shadow: 0 0 20px rgba(100, 210, 255, 0.6);
}

.usc-orange .usc-value {
    color: #e8c547;
    text-shadow: 0 0 20px rgba(232, 197, 71, 0.6);
}

.usc-green .usc-value {
    color: #00ff88;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.6);
}

.usc-unit {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Share Tech Mono', monospace;
}

.usc-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

.usc-bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 2px;
    overflow: hidden;
}

.usc-fill {
    height: 100%;
    border-radius: 2px;
    animation: uscFill 2.5s cubic-bezier(.4, 0, .2, 1) forwards;
}

.usc-teal .usc-fill {
    background: linear-gradient(90deg, #00ccff, #64d2ff);
}

.usc-red .usc-fill {
    background: linear-gradient(90deg, #cc0020, #ff4444);
}

.usc-orange .usc-fill {
    background: linear-gradient(90deg, #e87700, #ffaa00);
}

.usc-green .usc-fill {
    background: linear-gradient(90deg, #00aa55, #00ff88);
}

@keyframes uscFill {
    from {
        width: 0 !important;
    }
}

/* ================================================================
   RGB CADRAN NAV — matching screenshot 4
   ================================================================ */
.rgb-cadran-nav {
    position: relative;
    width: 100%;
    max-width: 820px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: rgba(6, 2, 20, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#cadran-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    pointer-events: none;
    opacity: 0.4;
}

.rcn-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.rcn-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.9rem 1.8rem;
    border-radius: 10px;
    font-size: 0.88rem;
    letter-spacing: 2.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    border: 1.5px solid;
    background: transparent;
    min-width: 175px;
    justify-content: center;
    font-weight: 700;
    height: 50px;
    box-sizing: border-box;
}

.rcn-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.2s;
    background: inherit;
    filter: blur(8px);
}

.rcn-btn:hover::before {
    opacity: 0.5;
}

.rcn-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
}

.rcn-btn-teal {
    border-color: #00ddbb;
    color: #00ddbb;
    background: rgba(0, 220, 180, 0.06);
}

.rcn-btn-red {
    border-color: #ff4422;
    color: #ff6644;
    background: rgba(255, 50, 30, 0.07);
}

.rcn-btn-green {
    border-color: #00ff88;
    color: #00ff88;
    background: rgba(0, 255, 136, 0.06);
}

.rcn-btn-cyan {
    border-color: #64d2ff;
    color: #64d2ff;
    background: rgba(100, 210, 255, 0.06);
}

.rcn-btn-purple {
    border-color: #c084fc;
    color: #c084fc;
    background: rgba(192, 132, 252, 0.06);
}

/* Active / selected state — big crimson rounded */
.rcn-btn-active {
    border-color: #cc2233;
    color: #fff;
    background: rgba(140, 10, 25, 0.35);
    border-radius: 14px;
    padding: 1rem 2.6rem;
    min-width: 240px;
    font-size: 0.92rem;
    letter-spacing: 3px;
    box-shadow: 0 0 20px rgba(180, 20, 40, 0.35), inset 0 0 12px rgba(180, 20, 40, 0.15);
}

.rcn-btn-active:hover {
    background: rgba(180, 20, 40, 0.5);
    box-shadow: 0 0 30px rgba(200, 30, 50, 0.5);
}

.rcn-spark {
    color: #ff6644;
    font-size: 1rem;
}

.rcn-label {
    font-family: 'Share Tech Mono', 'Noto Sans Mono', 'Courier New', monospace;
    letter-spacing: 2.5px;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
}

/* ================================================================
   TIMELINE YEAR CADRAN — RGB spinning ring around year
   ================================================================ */
.timeline-hud {
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}

.timeline-year-cadran {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cadran-ring-canvas {
    position: absolute;
    inset: 0;
}

.tyc-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    pointer-events: none;
}

.timeline-year-display {
    display: block;
    font-size: 2.4rem !important;
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1;
    background: linear-gradient(135deg, #ff0080, #ff8000, #ffff00, #00ff80, #0080ff, #8000ff);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rgbTextShift 3s linear infinite;
}

@keyframes rgbTextShift {
    0% {
        background-position: 0% 50%;
    }

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

.timeline-label {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 4px;
    text-transform: uppercase;
}

/* ================================================================
   PPTA Mw vs Conversion animated chart
   ================================================================ */
.ppta-chart-wrap {
    position: relative;
    width: 100%;
    height: 340px;
    background: #0d1117;
    border-radius: 8px;
    overflow: hidden;
    margin: 0.8rem 0;
}

#ppta-mw-chart {
    width: 100%;
    height: 100%;
    display: block;
}

.pcc-title {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    pointer-events: none;
}

.pcc-overlay {
    position: absolute;
    top: 30px;
    left: 70px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.pcc-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1px;
}

.pcc-pill::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
}

.pcc-green::before {
    background: #00ffcc;
    box-shadow: 0 0 4px #00ffcc;
}

.pcc-orange::before {
    background: #e8c547;
    box-shadow: 0 0 4px #e8c547;
    border: none;
    height: 0;
    border-top: 2px dashed #e8c547;
}

.pcc-axis-x {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    pointer-events: none;
}

.pcc-axis-y {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
    pointer-events: none;
    white-space: nowrap;
}

/* ================================================================
   GAUGE FIX — contain circles inside cadran
   ================================================================ */
.lab-gauges-row {
    overflow: hidden;
}

.lab-gauge {
    overflow: hidden;
    padding: 2px;
}

.gauge-canvas {
    width: 80px !important;
    height: 80px !important;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* ================================================================
   FORMULA FRACTION FIX — proper ½ display, no cramping
   ================================================================ */
.frac-half {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    font-size: 0.65em;
    line-height: 1;
    margin: 0 3px;
    position: relative;
    top: -2px;
}

.frac-half sup {
    font-size: 1.1em;
    line-height: 1;
    vertical-align: super;
    font-weight: 700;
}

.frac-div {
    display: block;
    width: 100%;
    height: 1px;
    background: currentColor;
    margin: 1px 0;
    opacity: 0.7;
}

.frac-half sub {
    font-size: 1.1em;
    line-height: 1;
    vertical-align: sub;
    font-weight: 700;
}

/* ================================================================
   TBTN CANVAS-BASED RGB PARTICLE RING (extra animation layer)
   ================================================================ */
#tbtn-canvas {
    position: absolute;
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    pointer-events: none;
    border-radius: 50%;
    z-index: -1;
}

/* ================================================================
   HUD DASHBOARD — NEW SECTIONS
   ================================================================ */
.hud-section-mt {
    margin-top: 10px;
}

/* Key-value grid inside HUD */
.hud-kv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    margin-top: 5px;
}

.hkv {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    padding: 4px 6px;
}

.hkv-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 6.5px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
}

.hkv-val {
    font-family: 'Orbitron', monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Mini bar inside HUD sections */
.hud-mini-bar-wrap {
    margin-top: 5px;
}

.hud-mini-bar-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 7px;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hud-mini-bar-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.hud-mini-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
    position: relative;
}

.bfd-fill {
    background: linear-gradient(90deg, #00ff88, #ff9900);
    box-shadow: 0 0 6px rgba(255, 150, 0, 0.5);
}

.thermal-fill {
    background: linear-gradient(90deg, #00aaff, #ff4444);
    box-shadow: 0 0 6px rgba(255, 80, 0, 0.5);
}

.uv-fill {
    background: linear-gradient(90deg, #c084fc, #7c3aed);
    box-shadow: 0 0 6px rgba(180, 80, 255, 0.5);
}

.hud-mini-bar-limit {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Share Tech Mono', monospace;
    font-size: 5.5px;
    color: rgba(255, 200, 0, 0.5);
    letter-spacing: 0.5px;
    pointer-events: none;
}
/* ================================================================
   MOBILE FIX — SPECS TITLE + HUD PANEL
   ================================================================ */

html { overflow-x: hidden !important; }
body { overflow-x: hidden !important; max-width: 100vw !important; }

@media (max-width: 768px) {

    /* ── SPECS TITLE: reduce + wrap instead of clipping ── */
    .specs-section .section-title {
        font-size: clamp(1.6rem, 8vw, 2.8rem) !important;
        letter-spacing: 0.05em !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        line-height: 1.2 !important;
    }

    .section-title {
        font-size: clamp(1.5rem, 7vw, 2.5rem) !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* ── HUD PANEL: keep inside screen ── */
    #hud {
        right: 4px !important;
        left: 4px !important;
        width: auto !important;
        max-width: calc(100vw - 8px) !important;
        bottom: 10px !important;
        box-sizing: border-box !important;
    }

    /* ── TIMELINE NODES ── */
    .timeline-node:nth-child(odd),
    .timeline-node:nth-child(even) {
        padding-right: 8px !important;
        padding-left: 44px !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .timeline-year-badge,
    .timeline-node .timeline-year-badge {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        display: inline-block !important;
        margin-bottom: 0.5rem !important;
        margin-left: -30px !important;
        font-size: 0.8rem !important;
        padding: 0.2rem 0.6rem !important;
        white-space: nowrap !important;
    }

    .timeline-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
    }

    .timeline-line {
        left: 18px !important;
        transform: none !important;
    }

    .timeline-3d-container {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* ── SPECS SECTION ── */
    .specs-section { overflow: hidden !important; }
    .specs-section::before { inset: 0 !important; }
    .specs-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .spec-category { clip-path: none !important; }

    /* ── COMPARE SECTION ── */
    .compare-column {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .silk-compare-grid { flex-direction: column !important; }
    .silk-comparison-section {
        padding: 1.5rem 1rem !important;
        margin: 1.5rem 0 !important;
    }

    .content-section { padding: 3rem 1rem !important; }

    .ultra-card {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .uc-apps-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.35rem !important;
    }
}

@media (max-width: 480px) {
    .specs-section .section-title {
        font-size: clamp(1.4rem, 9vw, 2rem) !important;
        letter-spacing: 0.02em !important;
    }
    .uc-apps-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .content-section { padding: 2.5rem 0.75rem !important; }
    .silk-comparison-section { padding: 1rem 0.75rem !important; margin: 1rem 0 !important; }
}