/* ============================================
   HYPERCORTEX — Ultra Futuristic Theme
   Hypnotic Neural Engine Aesthetics
   ============================================ */

/* Override color palette for HyperCortex identity */
:root {
    --hc-neon-cyan: #00f5ff;
    --hc-electric-purple: #a855f7;
    --hc-plasma-pink: #ff2d95;
    --hc-neural-green: #22ff88;
    --hc-deep-void: #020408;
    --hc-glass: rgba(10, 15, 30, 0.7);
    --hc-glow-primary: rgba(0, 245, 255, 0.4);
    --hc-glow-secondary: rgba(168, 85, 247, 0.4);
}

/* === ULTRA FUTURISTIC GRADIENT TEXT === */
.gradient-text {
    background: linear-gradient(135deg,
            #00f5ff 0%,
            #a855f7 30%,
            #ff2d95 60%,
            #00f5ff 100%) !important;
    background-size: 300% 300% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: hypercortexShimmer 4s ease infinite !important;
    filter: drop-shadow(0 0 30px rgba(0, 245, 255, 0.5));
}

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

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

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

/* === HERO SECTION ULTRA === */
#hero {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(0, 245, 255, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 0%, rgba(255, 45, 149, 0.08) 0%, transparent 40%),
        var(--hc-deep-void) !important;
}

/* Hero title larger and more impactful */
.hero-title {
    font-size: clamp(3rem, 8vw, 6rem) !important;
    font-weight: 900 !important;
    letter-spacing: -2px !important;
    line-height: 1.05 !important;
    text-shadow: 0 0 80px rgba(0, 245, 255, 0.3);
}

/* === LOGO HEXAGON === */
.logo-icon {
    font-size: 1.6rem !important;
    background: linear-gradient(135deg, #00f5ff, #a855f7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.6));
    animation: logoRotate 8s linear infinite;
}

@keyframes logoRotate {

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

    50% {
        transform: rotate(180deg);
    }
}

.logo-text {
    font-weight: 800 !important;
    letter-spacing: 3px !important;
    background: linear-gradient(90deg, #00f5ff, #a855f7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* === NAVBAR ULTRA GLASS === */
#navbar {
    background: rgba(2, 4, 8, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(0, 245, 255, 0.1) !important;
}

#navbar .nav-links a {
    position: relative;
    transition: all 0.3s ease;
}

#navbar .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #00f5ff, #a855f7);
    transition: width 0.3s ease;
}

#navbar .nav-links a:hover::after {
    width: 100%;
}

#navbar .nav-links a:hover {
    color: #00f5ff !important;
    text-shadow: 0 0 20px rgba(0, 245, 255, 0.5);
}

/* === HERO BADGE LIVE INDICATOR === */
.hero-badge {
    background: rgba(0, 245, 255, 0.1) !important;
    border: 1px solid rgba(0, 245, 255, 0.3) !important;
    animation: badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat {

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

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

.badge-pulse {
    background: #00f5ff !important;
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.8) !important;
}

/* === PERFORMANCE BADGES === */
.perf-badge {
    background: rgba(10, 15, 30, 0.6) !important;
    border: 1px solid rgba(0, 245, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.perf-badge:hover {
    border-color: rgba(0, 245, 255, 0.6) !important;
    box-shadow: 0 0 30px rgba(0, 245, 255, 0.2);
    transform: translateY(-3px);
}

/* === STATS COUNTER GLOW === */
.stat-number {
    color: #00f5ff !important;
    text-shadow: 0 0 30px rgba(0, 245, 255, 0.6);
    font-weight: 900 !important;
}

/* === SECTION HEADERS ULTRA === */
.section-tag {
    background: linear-gradient(90deg, rgba(0, 245, 255, 0.15), rgba(168, 85, 247, 0.15)) !important;
    border: 1px solid rgba(0, 245, 255, 0.3) !important;
    color: #00f5ff !important;
    letter-spacing: 3px !important;
}

.section h2 {
    background: linear-gradient(135deg, #ffffff 0%, rgba(0, 245, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === CARDS ULTRA GLASS === */
.philosophy-card,
.tech-card,
.mode-panel,
.paradigm-stage {
    background: rgba(10, 15, 30, 0.6) !important;
    border: 1px solid rgba(0, 245, 255, 0.12) !important;
    backdrop-filter: blur(16px) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.philosophy-card:hover,
.tech-card:hover {
    border-color: rgba(0, 245, 255, 0.4) !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(0, 245, 255, 0.15),
        inset 0 1px 0 rgba(0, 245, 255, 0.1) !important;
    transform: translateY(-8px) !important;
}

/* === PRIMARY BUTTON === */
.btn-primary {
    background: linear-gradient(135deg, #00f5ff, #a855f7) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border: none !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 245, 255, 0.4);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: btnShine 3s ease-in-out infinite;
}

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

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

.btn-primary:hover {
    box-shadow: 0 0 50px rgba(0, 245, 255, 0.6), 0 10px 40px rgba(168, 85, 247, 0.3) !important;
    transform: translateY(-3px) scale(1.02);
}

/* === SECONDARY BUTTON === */
.btn-secondary {
    border: 2px solid rgba(0, 245, 255, 0.4) !important;
    color: #00f5ff !important;
}

.btn-secondary:hover {
    background: rgba(0, 245, 255, 0.1) !important;
    border-color: #00f5ff !important;
    box-shadow: 0 0 30px rgba(0, 245, 255, 0.3);
}

/* === TECH TAGS === */
.tech-tag {
    background: linear-gradient(90deg, rgba(0, 245, 255, 0.15), rgba(168, 85, 247, 0.15)) !important;
    border: 1px solid rgba(0, 245, 255, 0.2) !important;
    color: #00f5ff !important;
}

/* === STAGE STATUS BADGES === */
.stage-status.completed {
    background: rgba(34, 255, 136, 0.15) !important;
    color: #22ff88 !important;
    border: 1px solid rgba(34, 255, 136, 0.3) !important;
    box-shadow: 0 0 15px rgba(34, 255, 136, 0.2);
}

.stage-status.active {
    background: rgba(0, 245, 255, 0.15) !important;
    color: #00f5ff !important;
    border: 1px solid rgba(0, 245, 255, 0.3) !important;
    animation: activeGlow 2s ease-in-out infinite;
}

@keyframes activeGlow {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(0, 245, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(0, 245, 255, 0.6);
    }
}

.stage-status.planned {
    background: rgba(168, 85, 247, 0.15) !important;
    color: #a855f7 !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

/* === STAGE NUMBERS === */
.stage-number {
    background: linear-gradient(135deg, #00f5ff, #a855f7) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 3.5rem !important;
    font-weight: 900 !important;
    filter: drop-shadow(0 0 20px rgba(0, 245, 255, 0.4));
}

/* === SYMBOL PILLS === */
.stage-symbols span {
    background: rgba(0, 245, 255, 0.12) !important;
    border: 1px solid rgba(0, 245, 255, 0.25) !important;
    color: #00f5ff !important;
}

/* === CASCADE DOTS === */
.cascade-dot {
    background: linear-gradient(135deg, #00f5ff, #a855f7) !important;
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.6) !important;
}

.cascade-tf {
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.2), rgba(168, 85, 247, 0.2)) !important;
    border: 1px solid rgba(0, 245, 255, 0.3) !important;
    color: #00f5ff !important;
    font-weight: 800 !important;
}

/* === MODE TABS === */
.mode-tab.active {
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.2), rgba(168, 85, 247, 0.15)) !important;
    border-color: rgba(0, 245, 255, 0.4) !important;
    color: #00f5ff !important;
}

.mode-code {
    color: #a855f7 !important;
}

/* === ROADMAP BADGES === */
.roadmap-badge.completed {
    background: #22ff88 !important;
    box-shadow: 0 0 20px rgba(34, 255, 136, 0.6);
}

.roadmap-badge.active {
    background: #00f5ff !important;
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.6);
    animation: roadmapPulse 2s ease-in-out infinite;
}

@keyframes roadmapPulse {

    0%,
    100% {
        box-shadow: 0 0 15px rgba(0, 245, 255, 0.5);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 35px rgba(0, 245, 255, 0.9);
        transform: scale(1.15);
    }
}

.roadmap-badge.planned {
    border: 2px solid rgba(168, 85, 247, 0.5) !important;
    color: #a855f7 !important;
}

/* === FOOTER === */
#footer {
    border-top: 1px solid rgba(0, 245, 255, 0.1) !important;
    background: rgba(2, 4, 8, 0.95) !important;
}

.footer-divider {
    background: linear-gradient(90deg, transparent, #00f5ff, #a855f7, transparent) !important;
    height: 1px !important;
}

/* === SCROLL INDICATOR === */
.hero-scroll-indicator .scroll-line {
    background: linear-gradient(180deg, #00f5ff, transparent) !important;
    box-shadow: 0 0 15px rgba(0, 245, 255, 0.5);
}

/* === SCARCITY BANNER === */
.hero-scarcity {
    background: rgba(255, 45, 149, 0.1) !important;
    border: 1px solid rgba(255, 45, 149, 0.3) !important;
    color: #ff2d95 !important;
}

/* === FEATURE LIST BULLETS === */
.feature-list li::before {
    color: #00f5ff !important;
}

/* === SPEC VALUES === */
.spec-value {
    color: #00f5ff !important;
}

/* === TRANSITION ON ALL INTERACTIVE ELEMENTS === */
a,
button,
.btn,
.tech-card,
.philosophy-card,
.mode-tab,
.paradigm-stage,
.roadmap-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* === GLOBAL SMOOTH SCROLL === */
html {
    scroll-behavior: smooth;
}

/* === SELECTION COLOR === */
::selection {
    background: rgba(0, 245, 255, 0.3);
    color: #fff;
}