:root {
    --noir-primary: #2563eb;
    --noir-rgb: 37, 99, 235;
    --noir-light: #60a5fa;
}

body {
    font-family: 'Nunito Sans', sans-serif;
    background-color: #050505;
    background-image:
        radial-gradient(ellipse at 50% -20%, rgba(var(--noir-rgb), 0.03) 0%, transparent 70%),
        radial-gradient(ellipse at 50% 0%, rgba(var(--noir-rgb), 0.01) 0%, transparent 50%);
    background-attachment: fixed;
    color: #f8fafc;
    overflow-x: hidden;
    min-height: 100vh;
    letter-spacing: -0.015em;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
}

.font-tech {
    font-family: 'Space Grotesk', sans-serif;
}

/* PIXEL-PERFECT HERO TYPOGRAPHY: SYNCED TO SCREENSHOT */
.text-hero-main {
    font-size: clamp(3.5rem, 9vw, 8rem);
    line-height: 1;
    overflow: visible !important;
}

.text-hero-sub {
    font-size: clamp(1.2rem, 3vw, 2.5rem);
    line-height: 1.2;
    overflow: visible !important;
    letter-spacing: 0.2em;
}

.glass {
    background: rgba(10, 10, 11, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-premium {
    background: rgba(8, 8, 10, 0.92);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(var(--noir-rgb), 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

.primary-text-gradient {
    background: linear-gradient(to bottom, var(--noir-primary), var(--noir-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Optimized Animations */
@keyframes float {

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

    50% {
        transform: translateY(-15px) rotate(1deg);
    }
}

@keyframes orbit {
    from {
        transform: rotate(0deg) translateX(30px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(30px) rotate(-360deg);
    }
}

@keyframes pulseGlow {

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

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

.animate-float {
    animation: float 10s ease-in-out infinite;
}

.animate-orbit {
    animation: orbit 15s linear infinite;
}

.animate-pulse-glow {
    animation: pulseGlow 8s ease-in-out infinite;
}

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

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

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

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

.animate-marquee-left {
    display: flex;
    width: max-content;
    animation: marquee-left 30s linear infinite;
}

.animate-marquee-left:hover {
    animation-play-state: paused;
}

.container-elite {
    width: 100%;
    max-width: 1512px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 768px) {
    .container-elite {
        padding-left: 48px;
        padding-right: 48px;
    }
}

@media (min-width: 1024px) {
    .container-elite {
        padding-left: 80px;
        padding-right: 80px;
    }
}

.section-header-elite {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 64px;
    width: 100%;
}

.header-badge-elite {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(var(--noir-rgb), 0.15);
    padding: 8px 16px;
    border-radius: 9999px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: var(--noir-primary);
    margin-bottom: 24px;
}

.header-title-elite {
    font-size: clamp(2.5rem, 8vw, 6.5rem);
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    line-height: 0.85;
    margin-bottom: 24px;
    overflow: visible !important;
    padding-right: 0.1em;
}

.header-title-elite .muted {
    color: #94a3b8;
}

.header-title-elite .accent {
    display: inline-block;
    color: white;
    background: linear-gradient(to bottom, var(--noir-primary), var(--noir-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(var(--noir-rgb), 0.2));
    padding-right: 0.2em;
}

.italic-fix {
    display: inline-block;
    padding-right: 0.4em;
    margin-right: 0;
}

.cursor-copy {
    cursor: copy;
}

.topo-bg {
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 400C100 350 200 450 300 400C400 350 500 450 600 400C700 350 800 450 800 400M0 200C100 150 200 250 300 200C400 150 500 250 600 200C700 150 800 250 800 200M0 600C100 550 200 650 300 600C400 550 500 650 600 600C700 550 800 650 800 600' stroke='%23a855f704' fill='none' stroke-width='1'/%3E%3C/svg%3E");
    background-size: 800px 800px;
}

/* TACTICAL HUD GRID */
.hud-grid {
    background-image: radial-gradient(rgba(var(--noir-rgb), 0.1) 1.5px, transparent 1.5px);
    background-size: 40px 40px;
}

/* SCROLL HUD INDICATOR */
.scroll-hud-wrap {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    height: 160px;
    width: 2px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 99px;
    z-index: 100;
    display: none;
}

@media (min-width: 1024px) {
    .scroll-hud-wrap {
        display: block;
    }
}

.scroll-hud-bar {
    width: 100%;
    background: var(--noir-primary);
    border-radius: 99px;
    box-shadow: 0 0 15px rgba(var(--noir-rgb), 0.5);
    transition: height 0.1s ease-out;
}

.scroll-hud-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 8px;
    font-weight: 900;
    color: var(--noir-primary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    white-space: nowrap;
}

/* TACTICAL CATEGORY CARDS */

.card-tactical {
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.card-tactical::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--noir-rgb), 0.3), transparent);
    transform: translateX(-100%);
    transition: transform 0.8s ease;
}

.card-tactical:hover {
    background: rgba(var(--noir-rgb), 0.03);
    border-color: rgba(var(--noir-rgb), 0.2);
    transform: translateY(-8px);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8), 0 0 20px rgba(var(--noir-rgb), 0.05);
}

.card-tactical:hover::before {
    transform: translateX(100%);
}

.glow-text-primary {
    text-shadow: 0 0 15px rgba(var(--noir-rgb), 0.5);
}