/* ==========================================================================
   CSS Design System & Stylesheet - Portfolio Hero Section
   Theme: Futuristic Cyber-HUD (Light Mode / Violet Accent)
   ========================================================================== */

:root {
    --bg-primary: #f6f5fa;
    --bg-white: #ffffff;
    --text-primary: #120e20;
    --text-secondary: #5c5670;
    --accent-purple: #7c3aed;
    --accent-glow: rgba(124, 58, 237, 0.15);
    --border-color: rgba(124, 58, 237, 0.12);
    --font-outfit: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
    --card-shadow: 0 8px 32px rgba(124, 58, 237, 0.06);
    --neon-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
}

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

html, body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-outfit);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Global helper classes */
.mobile-only {
    display: none !important;
}

.mobile-battery-card {
    display: none !important;
}

/* Mobile-only fixed footer: hidden by default on desktop */
.mobile-fixed-footer {
    display: none;
}

/* Hex icon outer chevrons rotation - global (works on desktop AND mobile) */
.outer-chevrons-group {
    transform-origin: 50px 50px;
    animation: spinOuterIcon 15s linear infinite;
}

@keyframes spinOuterIcon {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Show the mobile fixed footer only on small screens */
@media (max-width: 768px) {
    .mobile-fixed-footer {
        display: block;            /* simple block, no flex/grid conflicts */
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 52px;
        z-index: 9999;
        pointer-events: auto;
        /* Same color as desktop footer */
        background: rgba(37, 99, 235, 0.22);
        backdrop-filter: blur(16px) saturate(160%);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        border-top: 2px solid rgba(37, 99, 235, 0.45);
        box-shadow: 0 -4px 30px rgba(37, 99, 235, 0.18);
    }

    /* Button: dead center always */
    .mobile-fixed-footer .footer-center-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        cursor: pointer;
        animation: mobileBtnPulse 3s ease-in-out infinite alternate;
    }

    .mobile-fixed-footer .footer-center-icon:active {
        transform: translate(-50%, -50%) scale(0.92) !important;
    }

    /* TALK pill sizing inside the mobile fixed footer */
    .mobile-fixed-footer .footer-center-icon.talk-btn {
        width: auto !important;
        height: 36px !important;
        padding: 0 20px !important;
    }

    /* Arms: absolutely positioned from edge → toward button */
    .mobile-footer-arm {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        height: 20px;
    }

    /* Left arm: from left edge → stops before the button (gap = 22px + 20px = 42px from center) */
    .arm-left {
        left: 12px;
        right: calc(50% + 42px);
        flex-direction: row;        /* [+] [————→] */
    }

    /* Right arm: starts after the button → goes to right edge */
    .arm-right {
        left: calc(50% + 42px);
        right: 12px;
        flex-direction: row;        /* [←————] [+] */
    }

    /* Line fills all remaining space inside the arm */
    .footer-arm-line {
        flex: 1;
        height: 2px;
        min-width: 0;
    }

    .arm-left .footer-arm-line {
        background: linear-gradient(to right, rgba(37, 99, 235, 0.2), rgba(37, 99, 235, 0.85));
    }

    .arm-right .footer-arm-line {
        background: linear-gradient(to right, rgba(37, 99, 235, 0.85), rgba(37, 99, 235, 0.2));
    }

    /* + icon */
    .footer-arm-plus {
        font-family: var(--font-outfit);
        font-size: 0.82rem;
        font-weight: 700;
        color: rgba(37, 99, 235, 0.8);
        line-height: 1;
        flex-shrink: 0;
        user-select: none;
    }

    .arm-left .footer-arm-plus {
        margin-right: 5px;
    }

    .arm-right .footer-arm-plus {
        margin-left: 5px;
    }

    @keyframes mobileBtnPulse {
        0%   { filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.55)) drop-shadow(0 0 14px rgba(37, 99, 235, 0.25)); }
        100% { filter: drop-shadow(0 0 14px rgba(37, 99, 235, 0.9)) drop-shadow(0 0 28px rgba(59, 130, 246, 0.5)); }
    }
}

/* Background Grid Pattern */
.cyber-grid-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(to right, rgba(124, 58, 237, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(124, 58, 237, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -2;
    pointer-events: none;
}

/* Glow Orbs */
.glow-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
}

.orb-1 {
    top: -10%;
    right: 15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(167, 139, 250, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
}

.orb-2 {
    bottom: -10%;
    left: 5%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
}

/* Header Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    z-index: 10;
}

.nav-left {
    display: flex;
    align-items: center;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 1.1rem;
}

.logo-accent {
    color: var(--accent-purple);
    font-size: 1.4rem;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(124, 58, 237, 0.2);
}

.logo-divider {
    margin: 0 12px;
    opacity: 0.3;
}

.logo-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.nav-center {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--text-secondary);
}

.highlight-purple {
    color: var(--accent-purple);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.scroll-text {
    font-family: var(--font-outfit);
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: var(--text-primary);
    font-weight: 600;
}

.scroll-indicator-graphic {
    display: flex;
    align-items: center;
    position: relative;
    gap: 0;
}

.scroll-start-dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent-purple);
    border-radius: 50%;
    display: inline-block;
}

.scroll-line {
    width: 55px;
    height: 1px;
    background-color: var(--accent-purple);
}

.scroll-concentric-circles {
    width: 36px;
    height: 36px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.scroll-outer-circle {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(124, 58, 237, 0.15); /* Faint left/top/bottom border */
    border-right: 3px solid var(--accent-purple); /* Thick right-side arc */
    box-sizing: border-box;
    animation: spinOuterArc 12s linear infinite;
}

.scroll-inner-circle {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-purple);
    box-sizing: border-box;
}

.scroll-center-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--accent-purple);
    border-radius: 50%;
    animation: pulseCenterDot 2s ease-in-out infinite alternate;
}

@keyframes spinOuterArc {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulseCenterDot {
    0% { transform: scale(0.85); opacity: 0.7; }
    100% { transform: scale(1.15); opacity: 1; }
}

/* Animations */
@keyframes pulseDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

@keyframes pulseRing {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.4); opacity: 0; }
}

/* Shared Battery Status Card Components & Animations */
.text-black {
    color: #120e20 !important;
}

.text-blue {
    color: #2563eb !important;
}

.battery-card-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.battery-info-left {
    display: flex;
    flex-direction: column;
}

.battery-card-title {
    font-family: var(--font-outfit);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px; /* Reduced margin */
    display: block;
}

.battery-percentage-value {
    font-family: var(--font-outfit);
    font-size: 3.5rem;
    font-weight: 800;
    color: #120e20;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 4px; /* Reduced margin */
}

.battery-card-subtitle {
    font-family: var(--font-outfit);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.battery-radar-right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75px; /* Shrunk from 90px */
    height: 75px;
}

.radar-container {
    position: relative;
    width: 70px; /* Shrunk from 80px */
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-outer-ring {
    position: absolute;
    width: 68px; /* Shrunk from 76px */
    height: 68px;
    border-radius: 50%;
    border: 1.2px solid rgba(124, 58, 237, 0.35); /* default purple outer ring matching theme */
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.radar-inner-ring {
    position: absolute;
    width: 48px; /* Shrunk from 56px */
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(18, 14, 32, 0.12); /* Faint dark inner ring for visibility */
    box-sizing: border-box;
}

.radar-sweep {
    position: absolute;
    width: 68px; /* Shrunk from 76px */
    height: 68px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(124, 58, 237, 0.45) 0%, rgba(124, 58, 237, 0) 30%); /* default purple sweep matching theme */
    animation: radarScan 3s linear infinite;
    z-index: 1;
    box-sizing: border-box;
}

.radar-center-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 12px #ffffff, 0 0 20px rgba(124, 58, 237, 0.8); /* default purple glow matching theme */
    z-index: 3;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
}

@keyframes radarScan {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.battery-card-footer {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 14px; /* Reduced from 25px */
    gap: 15px;
}

.footer-status-text {
    font-family: var(--font-outfit);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
    white-space: nowrap;
}

.battery-wave-container {
    flex: 1;
    height: 24px; /* Shrunk from 35px */
    display: flex;
    align-items: center;
    position: relative;
}

.battery-wave-container svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ==========================================================================
   PC / Desktop Viewport Only (width > 768px)
   ========================================================================== */
@media (min-width: 769px) {

/* Hero & Second Section Grid Layout */
.hero-container,
.into-it-container {
    flex: 1;
    display: grid;
    grid-template-columns: 320px 1fr 340px;
    gap: 30px;
    padding: 110px 40px 40px 40px;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    z-index: 5;
    position: relative;
}

/* HUD Panels */
.hud-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    gap: 30px;
    z-index: 5;
}

/* Left HUD elements */
.greeting-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hud-tag {
    font-family: var(--font-outfit);
    font-size: 0.8rem;
    letter-spacing: 2px;
    color: var(--text-secondary); /* Dark gray/charcoal text color */
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.tag-dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent-purple);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-purple);
}

.main-title {
    font-family: 'Allerta Stencil', var(--font-outfit);
    font-size: 4rem;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 2px;
    color: #120e20; /* Explicitly dark charcoal color for name first line */
}

.gradient-text {
    color: var(--accent-purple); /* Solid vibrant purple */
    text-shadow: 0 0 15px rgba(124, 58, 237, 0.15); /* Soft neon violet text glow */
}

.role-badge-container {
    display: flex;
    align-items: center;
    width: fit-content;
}

.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1px solid rgba(124, 58, 237, 0.16);
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    color: var(--text-primary); /* Dark charcoal */
    border-radius: 8px; /* Rounded rectangle matching reference image */
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 2px;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.04);
}

.role-badge-line {
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, rgba(124, 58, 237, 0.3), rgba(124, 58, 237, 0.7));
}

.role-badge-sparkle {
    width: 14px;
    height: 14px;
    color: var(--accent-purple);
    filter: drop-shadow(0 0 4px var(--accent-purple));
    animation: pulseSparkle 2s ease-in-out infinite alternate;
}

@keyframes pulseSparkle {
    0% { transform: scale(0.9); filter: drop-shadow(0 0 2px var(--accent-purple)); }
    100% { transform: scale(1.2); filter: drop-shadow(0 0 6px var(--accent-purple)); }
}

.bio-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.bio-text {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
    border-left: 2px solid var(--accent-purple);
    padding-left: 15px;
}

.btn-explore-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px; /* Slightly larger radius to cover the inner button */
    padding: 1.5px; /* Border thickness */
    overflow: hidden;
    width: fit-content;
    background: transparent;
    box-shadow: 0 10px 30px rgba(124, 58, 237, 0.12), 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.btn-explore-wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, #7c3aed, #a78bfa 25%, transparent 50%);
    animation: rotateBorder 4s linear infinite;
    z-index: 1;
}

@keyframes rotateBorder {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn-explore-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(124, 58, 237, 0.25), 0 5px 15px rgba(124, 58, 237, 0.1);
}

.btn-explore {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 26px;
    background: #ffffff;
    border: none; /* Wrapper's moving gradient acts as the border */
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 8px; /* Rounded rectangle */
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 2px;
    transition: background-color 0.3s ease, color 0.3s ease;
    width: 100%;
}

.btn-arrow {
    width: 18px;
    height: 18px;
    color: var(--text-primary);
    transition: transform 0.3s ease, color 0.3s ease;
    margin-left: 12px;
}

.btn-explore-wrapper:hover .btn-arrow {
    transform: translateX(6px);
    color: var(--accent-purple);
}

.hud-left-spacer {
    height: 71px;
}

/* Section-specific Background Stage */
.section-background-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--bg-white); /* City skyline background has white base */
}

/* Center Column Spacer */
.visual-stage-container {
    height: 100%;
    min-height: 550px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    z-index: 5;
    pointer-events: none;
}

/* Stage Layer Stack */
.stage-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transition: transform 0.1s cubic-bezier(0.25, 1, 0.5, 1);
}

.stage-img {
    max-width: 100%;
    max-height: 100%;
}

.bottom-fog-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 52px; /* Height for navigation elements */
    background: rgba(37, 99, 235, 0.22); /* Enhanced semi-transparent blue glass tint */
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-top: 2px solid rgba(37, 99, 235, 0.45); /* Stronger blue border */
    box-shadow: 0 -4px 30px rgba(37, 99, 235, 0.18); /* Stronger blue neon glow */
    z-index: 99; /* Float on top of everything at the bottom */
    pointer-events: none; /* Let clicks pass through empty spaces */
}

/* Footer Navigation Styles */
.footer-nav-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 1400px; /* Expanded width to cover left-to-right */
    margin: 0 auto;
    padding: 0 90px; /* Spacing inside corner brackets */
    position: relative;
    pointer-events: auto; /* Enable clicks on the menu container */
}

.footer-bracket {
    width: 45px; /* Slightly wider brackets */
    height: 12px;
    opacity: 0.85;
    position: absolute;
    bottom: 15px; /* Locked near the baseline of the text */
}

.bracket-left {
    border-bottom: 2.5px solid #2563eb;
    border-left: 2.5px solid #2563eb;
    left: 40px; /* Shifted left */
}

.bracket-right {
    border-bottom: 2.5px solid #2563eb;
    border-right: 2.5px solid #2563eb;
    right: 40px; /* Shifted right */
}

.footer-nav-group {
    display: flex;
    align-items: center;
    flex: 1; /* Symmetrical spacing distribution */
}

.group-left {
    justify-content: space-between; /* Spans items across the left half */
    padding-right: 40px; /* Safety gap before center icon */
}

.group-right {
    justify-content: space-between; /* Spans items across the right half */
    padding-left: 40px; /* Safety gap after center icon */
}

.footer-nav-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-family: var(--font-outfit); /* Outfit supporting ultra-bold 900 weight */
    font-size: 0.85rem; /* Increased from 0.72rem */
    font-weight: 900 !important; /* Maximum heavy bold */
    letter-spacing: 2px;
    color: #000000 !important; /* Absolute dark black color */
    white-space: nowrap; /* Prevents text from splitting/wrapping into two lines */
    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.footer-nav-item:hover {
    color: #2563eb !important; /* Hover active color is blue */
    transform: translateY(-2px);
    text-shadow: 0 0 8px rgba(37, 99, 235, 0.35);
}

.footer-nav-item.active {
    color: #2563eb !important; /* Active color is blue */
    text-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}

.nav-slash {
    color: #000000 !important; /* Bold black slash by default */
    margin-right: 8px;
    font-weight: 900 !important;
    font-size: 0.95rem; /* Increased from 0.78rem */
    transition: color 0.2s ease;
}

.footer-nav-item:hover .nav-slash,
.footer-nav-item.active .nav-slash {
    color: #2563eb !important; /* Slash turns blue on active/hover */
}

.nav-num {
    color: #000000 !important; /* Bold black number by default */
    margin-right: 8px;
    font-size: 0.78rem; /* Increased from 0.65rem */
    font-weight: 900 !important;
    opacity: 0.95 !important;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-nav-item:hover .nav-num,
.footer-nav-item.active .nav-num {
    color: #2563eb !important; /* Number turns blue on active/hover */
    opacity: 1;
}

.nav-text {
    font-family: var(--font-outfit); /* Outfit supporting 800/900 weight */
    text-transform: uppercase;
}

.footer-center-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0; /* Centered precisely by symmetrical group padding */
    cursor: pointer; /* Change cursor to pointer finger */
    transition: transform 0.2s ease, filter 0.2s ease;
}

.footer-center-icon:hover {
    transform: scale(1.06); /* Subtle grow on hover */
    filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.55)); /* Blue neon glow on hover */
}

.hex-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.outer-chevrons-group {
    transform-origin: 50px 50px;
    animation: spinOuterIcon 15s linear infinite;
}

@keyframes spinOuterIcon {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* TALK button — replaces the rotating hex voice icon (same click behavior) */
.footer-center-icon.talk-btn {
    width: auto;
    height: 38px;
    padding: 0 22px;
    border-radius: 50px;
    border: 1.5px solid rgba(59, 130, 246, 0.7);
    background: linear-gradient(135deg, rgba(9, 0, 136, 0.55) 0%, rgba(29, 78, 216, 0.45) 60%, rgba(59, 130, 246, 0.35) 100%);
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.45), inset 0 0 10px rgba(59, 130, 246, 0.25);
    animation: talkBtnPulse 2.4s ease-in-out infinite;
}

.footer-center-icon.talk-btn:hover {
    transform: scale(1.08);
    filter: none;
    box-shadow: 0 0 22px rgba(59, 130, 246, 0.75), inset 0 0 14px rgba(59, 130, 246, 0.35);
    border-color: #60a5fa;
}

.talk-btn-text {
    font-family: var(--font-outfit);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(59, 130, 246, 0.9);
    user-select: none;
    line-height: 1;
}

@keyframes talkBtnPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(37, 99, 235, 0.35), inset 0 0 8px rgba(59, 130, 246, 0.2); }
    50%      { box-shadow: 0 0 22px rgba(59, 130, 246, 0.7), inset 0 0 14px rgba(59, 130, 246, 0.35); }
}

/* Mobile & Tablet Responsive Footer overrides */
@media (max-width: 900px) {
    .footer-bracket {
        display: none;
    }
    .footer-nav-group {
        gap: 15px;
    }
    .footer-center-icon {
        margin: 0 15px;
        width: 32px;
        height: 32px;
    }
    .footer-center-icon.talk-btn {
        width: auto;
        height: 32px;
        padding: 0 16px;
        margin: 0 15px;
    }
    .talk-btn-text {
        font-size: 0.7rem;
        letter-spacing: 2px;
    }
    .footer-nav-item {
        font-size: 0.65rem;
        letter-spacing: 1px;
    }
}

@media (max-width: 768px) {
    /* Hide the original hero footer on mobile — replaced by #mobile-fixed-footer */
    .bottom-fog-overlay {
        display: none !important;
    }
}

/* Layer Specifics */
/* Layer 1 (bottom): City. Covers the full screen as a background. */
.layer-building {
    z-index: 1;
}

.layer-building .stage-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: bottom center;
}

/* Layer 2 (middle): Moon. Centered, transparent PNG. */
.layer-moon {
    z-index: 2;
}

.layer-moon .stage-img {
    width: auto;
    height: 78vh;
    max-height: 580px;
    object-fit: contain;
    transform: translateY(-2vh);
}

/* Layer 3 (top): Profile. Centered at bottom, transparent PNG with solid opacity. */
.layer-profile {
    z-index: 3;
}

.layer-profile .stage-img {
    width: auto;
    height: 80vh;
    max-height: 650px;
    object-fit: contain;
    object-position: bottom center;
    transform: translateY(20px);
}



/* Right HUD Cards & Analytics */
.hud-card {
    border: 1px solid rgba(124, 58, 237, 0.08);
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.04);
    transition: all 0.3s ease;
}

.hud-card:hover {
    border-color: rgba(124, 58, 237, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(124, 58, 237, 0.06);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(124, 58, 237, 0.06);
    padding-bottom: 10px;
}

.card-title {
    font-family: var(--font-outfit);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
}

.header-dots {
    display: flex;
    gap: 4px;
}

.h-dot {
    width: 4px;
    height: 4px;
    background-color: var(--accent-purple);
    border-radius: 50%;
    opacity: 0.4;
}

.h-dot:first-child {
    opacity: 0.8;
}

/* Focus List Layout */
.focus-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.focus-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-outfit);
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    width: 100%;
    font-weight: 600;
}

/* Status Card styling */
/* Glass Battery Card styling - exact replica of the reference screenshot */
/* Text helper classes for battery card title - defined globally */

/* Glass Battery Card styling - exact replica of the reference screenshot but in transparent white */
.glass-battery-card {
    background: rgba(255, 255, 255, 0.01) !important; /* Almost completely transparent background */
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(37, 99, 235, 0.22) !important; /* Transparent blue border */
    border-radius: 6px !important;
    padding: 16px 20px !important; /* Reduced vertical padding */
    color: #120e20 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative !important;
    left: 20px !important; /* Aligned with quote left offset */
    width: 290px !important; /* Compact size to fit content perfectly */
    transition: left 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-battery-card:hover {
    transform: none !important; /* Disable translateY translation to prevent overlapping quote line */
    border-color: rgba(37, 99, 235, 0.5) !important; /* Brighter blue border on hover */
}

/* Glass Protocol Log Card styling */
.glass-protocol-card {
    background: rgba(255, 255, 255, 0.01) !important; /* Extremely transparent white glass background */
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(37, 99, 235, 0.22) !important; /* Transparent blue border matching battery card */
    border-radius: 6px !important;
    padding: 16px 20px !important;
    color: #120e20 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    gap: 8px !important;
    position: relative !important;
    left: 20px !important; /* Aligned with quote and battery card */
    width: 290px !important; /* Same width */
    margin-top: 15px !important; /* Gap between battery card and protocol log card */
    transition: left 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-protocol-card:hover {
    transform: none !important; /* Disable hover translation */
    border-color: rgba(37, 99, 235, 0.5) !important; /* Brighter blue border on hover */
}

.protocol-card-title {
    font-family: var(--font-outfit);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #120e20;
    text-transform: uppercase;
}

.log-ticker-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 5px;
    width: 100%;
}

.log-line {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text-secondary);
    text-transform: uppercase;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.fixed-online-line {
    color: #2563eb !important;
}

/* Blinking blue color effect for the active changing log line */
.log-line.updating {
    color: #2563eb !important;
    animation: blueBlink 0.4s step-end infinite;
}

@keyframes blueBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Card inner components - defined globally */

.quote-and-battery-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Quote Section styling (Floating, no border) */
.hud-quote-container {
    border-left: none;
    padding-left: 0;
    margin-top: 25px;
    position: relative;
    left: 20px; /* Shifted right on desktop without overflow */
    padding-top: 20px;
    transition: left 0.3s ease;
}

.quote-symbol {
    position: absolute;
    top: -24px;
    left: -4px;
    font-size: 4.2rem;
    color: var(--accent-purple);
    opacity: 1; /* Solid color, matching reference mockup */
    font-family: Georgia, serif;
    font-weight: bold;
    line-height: 1;
    user-select: none;
}

.quote-text {
    font-size: 0.72rem;
    line-height: 1.6;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
}

.quote-text::after {
    content: '';
    display: block;
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-purple) 0%, rgba(124, 58, 237, 0) 100%);
    margin-top: 15px;
    border-radius: 1px;
}

/* Availability Banner (Floating, no border) */
.availability-banner {
    border-top: none;
    padding-top: 0;
    margin-top: 10px;
}

.availability-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    font-family: var(--font-outfit);
    font-size: 0.78rem;
    font-weight: 900; /* Ultra bold matching black typography style */
    color: #000000; /* Bold black color */
    letter-spacing: 1.5px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.availability-link:hover {
    color: var(--accent-purple); /* Hover color turns to purple */
    transform: translateX(5px);
}

.plus-sign {
    font-size: 0.95rem;
    font-weight: 700;
    animation: spinPlus 3s linear infinite;
}

@keyframes spinPlus {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

} /* End of PC / Desktop Viewport Media Query */

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

@media (max-width: 1200px) {
    .hero-container {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 40px;
        padding: 20px;
    }
    
    .visual-stage-container {
        grid-column: 1 / 3;
        grid-row: 1;
        min-height: 450px;
    }
    
    .hud-left {
        grid-column: 1;
        grid-row: 2;
    }
    
    .hud-right {
        grid-column: 2;
        grid-row: 2;
    }
    
    .hud-quote-container,
    .glass-battery-card,
    .glass-protocol-card {
        left: 0 !important;
    }
}

@media (max-width: 768px) {
    #hero {
        position: relative !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .navbar {
        padding: 15px 20px;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    /* Hide tagline on mobile screens to prevent overlapping upper corner widgets */
    .nav-center-floating,
    .nav-center {
        display: none !important;
    }

    /* Left upper corner logo positioning on mobile */
    .logo-container-floating {
        position: absolute !important;
        top: 20px !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        z-index: 20;
        pointer-events: none;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        height: 32px !important; /* Unified height for vertical centering */
    }

    .logo-img-ref {
        position: absolute !important;
        left: 22px !important; /* Shifted right to prevent bracket overlap */
        top: 50% !important;
        transform: translateY(-50%) !important;
        height: 16px !important; /* Compact logo size */
        width: auto !important;
        pointer-events: auto;
    }

    .logo-divider {
        display: inline-block !important;
        position: absolute !important;
        left: 48px !important; /* Shifted right to follow logo image */
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: 0.85rem !important;
        color: transparent !important; /* Hide original "|" text */
        pointer-events: none;
        z-index: 21;
    }
    
    .logo-divider::after {
        content: "//" !important;
        color: var(--accent-purple) !important; /* Theme purple (K logo color) */
        font-weight: 900 !important;
        font-family: var(--font-outfit) !important;
        letter-spacing: 0.5px !important;
        display: inline-block !important;
    }

    .logo-text {
        position: relative !important;
        left: -22px !important; /* Optically centered in the gap between logo and ENTER */
        transform: none !important;
        font-family: var(--font-outfit) !important;
        font-size: 0.78rem !important; /* Scaled down slightly to prevent phone overlaps */
        font-weight: 900 !important; /* Extra bold */
        color: #000000 !important; /* Solid black */
        letter-spacing: 1.5px !important;
        white-space: nowrap !important;
        pointer-events: auto;
    }

    .logo-text::before {
        content: "+" !important;
        position: absolute !important;
        right: calc(100% + 6px) !important; /* Gap before text */
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: var(--accent-purple) !important; /* Theme purple (K logo color) */
        font-weight: 900 !important;
    }

    .logo-text::after {
        content: "" !important;
        position: absolute !important;
        left: calc(100% + 6px) !important; /* Gap after text */
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 25px !important; /* Fading line length */
        height: 1.2px !important;
        background: linear-gradient(90deg, var(--accent-purple), transparent) !important; /* Fades out going right */
    }
    
    /* Show/hide helper classes for desktop/mobile views */
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: inline-block !important;
    }

    /* Left upper corner bracket style - Very Thin, covers logo left edge cleanly */
    .logo-container-floating::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important; /* Match top of container */
        left: 12px !important; /* Positioned clearly to the left of the logo image */
        width: 32px !important;
        height: 32px !important; /* Same height as container */
        border-top: 1px solid var(--accent-purple) !important; /* Thinner border (1px) */
        border-left: 1px solid var(--accent-purple) !important; /* Thinner border (1px) */
        pointer-events: none !important;
    }
    
    /* Right upper corner ENTER positioning on mobile - Horizontal Row */
    .nav-right-floating {
        display: flex !important;
        flex-direction: row !important;
        position: absolute !important;
        top: 20px !important;
        right: 15px !important; /* Anchored closer to the right edge */
        height: 32px !important; /* Same height as logo container */
        margin: 0 !important;
        align-items: center !important;
        gap: 6px !important;
        width: auto !important;
        z-index: 20;
        pointer-events: auto;
    }

    /* Right upper corner bracket style - Very Thin */
    .nav-right-floating::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important; /* Match top of container */
        right: -6px !important;
        width: 32px !important;
        height: 32px !important; /* Same height as container */
        border-top: 1px solid var(--accent-purple) !important; /* Thinner border (1px) */
        border-right: 1px solid var(--accent-purple) !important; /* Thinner border (1px) */
        pointer-events: none !important;
    }

    .scroll-text {
        font-family: var(--font-outfit) !important;
        font-size: 0.75rem !important; /* Scaled down slightly to prevent phone overlaps */
        letter-spacing: 1.5px !important;
        font-weight: 500 !important; /* Less bold weight for ENTER */
        color: var(--accent-purple) !important; /* Theme purple (K logo color) */
        text-align: right !important;
        white-space: nowrap !important;
        order: 2 !important; /* Text on the right */
        line-height: 1 !important;
    }

    .scroll-indicator-graphic {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 4px !important; /* Spacing between dot and line */
        order: 1 !important; /* Dot & Line on the left */
        transform: none !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
    }

    .scroll-start-dot {
        display: inline-block !important;
        width: 5px !important;
        height: 5px !important;
        background-color: var(--accent-purple) !important; /* Theme purple dot */
        border-radius: 50% !important;
        box-shadow: 0 0 6px rgba(124, 58, 237, 0.4) !important;
        margin: 0 !important; /* Reset margin since gap is handled by flex container */
    }

    .scroll-line {
        display: inline-block !important;
        width: 30px !important; /* Compact width to fit screen perfectly */
        height: 1.2px !important;
        background: linear-gradient(90deg, var(--accent-purple), transparent) !important; /* Single fading line segment */
    }

    .scroll-concentric-circles {
        display: none !important; /* Remove rotating concentric circles from phone view */
    }

    @media (max-width: 350px) {
        .scroll-text {
            font-size: 0.65rem !important;
            letter-spacing: 1px !important;
        }
        .scroll-line {
            width: 20px !important;
        }
        .logo-text {
            font-size: 0.7rem !important;
            letter-spacing: 1px !important;
        }
    }
    
    /* Lock the hero background stage to cover the full section, but keep profile and moon contained */
    #hero-stage {
        height: 100% !important;
        position: absolute !important;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1 !important;
        overflow: hidden !important;
    }

    .layer-building {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
    }

    .layer-building .stage-img {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        object-position: right bottom !important;
    }

    .layer-moon {
        display: none !important;
    }

    .layer-profile {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        pointer-events: none !important;
        overflow: hidden !important;
    }

    .layer-profile .stage-img {
        height: 56% !important; /* Decreased by 8% (~2cm) */
        max-height: 400px !important;
        width: auto !important;
        max-width: none !important;
        object-fit: contain !important;
        padding: 0 1cm !important; /* 1cm decrease from left and right both */
        transform: translate(1.5cm, -52px) !important;
    }

    .hero-container {
        position: relative !important;
        z-index: 10 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        align-items: flex-start !important;
        height: 100% !important;
        width: 100% !important;
        padding: 70px 20px 75px 20px !important; /* Top pad to clear logo, bottom to clear voice button */
        box-sizing: border-box !important;
        margin: 0 !important;
        gap: 0 !important;
        pointer-events: none !important;
    }
    
    .visual-stage-container {
        display: none !important;
    }
    
    .hud-left {
        width: auto !important;
        max-width: 320px !important;
        margin: 0 0 15px 15px !important; /* Sit slightly left and above the bottom footer */
        padding: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        pointer-events: auto !important;
        z-index: 10 !important;
    }

    .greeting-container {
        position: absolute !important;
        top: 75px !important;
        left: 22px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        width: auto !important;
        z-index: 10 !important;
    }

    .greeting-container::before {
        content: "+" !important;
        color: var(--accent-purple) !important;
        font-family: var(--font-outfit) !important;
        font-size: 1.6rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        margin-bottom: 6px !important;
        display: block !important;
    }

    .hud-tag {
        display: none !important;
    }

    .role-badge-container {
        margin: 10px 0 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .role-badge-line,
    .role-badge-sparkle {
        display: none !important;
    }

    .role-badge {
        background: transparent !important;
        border: none !important;
        color: var(--text-secondary) !important;
        font-family: var(--font-mono) !important;
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        padding: 0 !important;
        text-transform: uppercase !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .mobile-bio-text {
        display: block !important;
        font-family: var(--font-outfit) !important;
        font-size: 0.76rem !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        letter-spacing: 1px !important;
        color: var(--text-secondary) !important;
        margin-top: 15px !important;
        text-transform: uppercase !important;
        text-align: left !important;
    }

    .bio-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        margin-top: 15px !important;
    }

    .bio-text {
        display: none !important;
    }

    .btn-explore-wrapper {
        display: none !important;
    }

    .mobile-battery-card {
        display: flex !important;
        background: rgba(255, 255, 255, 0.45) !important; /* Semi-transparent white glass */
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(37, 99, 235, 0.22) !important;
        border-radius: 0 !important; /* Sharp corners */
        padding: 6px 8px !important; /* Extremely compact padding */
        color: #120e20 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
        flex-direction: column !important;
        gap: 0 !important;
        position: relative !important;
        left: 0 !important;
        margin-top: 4px !important;
        width: 152px !important; /* Shrunk width by 0.2cm (8px) to fit perfectly */
        pointer-events: auto !important;
        z-index: 15 !important;
    }

    /* Shrunken mobile status card sub-elements */
    .mobile-battery-card .battery-percentage-value {
        font-size: 1.6rem !important; /* Shrunk percentage */
    }
    .mobile-battery-card .battery-card-title {
        font-size: 0.54rem !important; /* Shrunk title */
        margin-bottom: 2px !important;
        letter-spacing: 0.5px !important;
    }
    .mobile-battery-card .battery-card-subtitle {
        font-size: 0.5rem !important;
        letter-spacing: 0.5px !important;
    }
    .mobile-battery-card .battery-radar-right {
        width: 40px !important; /* Shrunk radar container */
        height: 40px !important;
    }
    .mobile-battery-card .radar-container {
        width: 38px !important;
        height: 38px !important;
    }
    .mobile-battery-card .radar-outer-ring {
        width: 36px !important;
        height: 36px !important;
    }
    .mobile-battery-card .radar-inner-ring {
        width: 26px !important;
        height: 26px !important;
    }
    .mobile-battery-card .radar-sweep {
        width: 36px !important;
        height: 36px !important;
    }
    .mobile-battery-card .radar-center-dot {
        width: 4px !important;
        height: 4px !important;
    }
    .mobile-battery-card .battery-card-footer {
        margin-top: 2px !important;
    }
    .mobile-battery-card .footer-status-text {
        display: none !important; /* Hide text to allow wave to span full width */
    }
    .mobile-battery-card .battery-wave-container {
        height: 12px !important;
        width: 100% !important;
    }
    
    .hud-right {
        display: none !important;
    }

    .main-title {
        font-family: var(--font-outfit) !important;
        font-size: 2.8rem !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
        color: #000000 !important; /* First line "KULDEEP" in solid black */
        text-transform: uppercase !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .gradient-text {
        background: none !important;
        -webkit-text-fill-color: initial !important;
        color: var(--accent-purple) !important; /* Second line "MISHRA" in solid theme purple */
        display: block !important;
    }

    /* Scale down typewriter text overlay font size on mobile screens */
    .welcome-text {
        font-size: 1.5rem !important;
        letter-spacing: 2px !important;
    }

    .bottom-fog-overlay {
        display: none !important;
    }
}

/* Floating Logo Layout (Top-Left) */
.logo-container-floating {
    position: absolute;
    top: 30px;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 10;
    pointer-events: auto;
}

.logo-img-ref {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.logo-divider {
    color: var(--text-primary);
    opacity: 0.3;
    font-size: 1.2rem;
    font-weight: 300;
}

.logo-text {
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-weight: 600;
    letter-spacing: 2px;
}

/* Floating Navigation tagline (Top-Center) */
.nav-center-floating {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--text-secondary);
    z-index: 10;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
}

/* Floating Scroll indicator (Top-Right) */
.nav-right-floating {
    position: absolute;
    top: 32px;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 10;
    pointer-events: auto;
}

/* Focus List Left Item & Right Dot */
.list-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.focus-item-icon {
    width: 15px;
    height: 15px;
    color: var(--accent-purple);
    filter: drop-shadow(0 0 4px rgba(124, 58, 237, 0.2));
}

.list-dot-right {
    width: 6px;
    height: 6px;
    background-color: var(--accent-purple);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--accent-purple);
}

/* Header Status Pulse Dot */
.header-status-indicator {
    display: flex;
    align-items: center;
}

.h-status-dot {
    width: 6px;
    height: 6px;
    background-color: var(--accent-purple);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-purple);
    position: relative;
}

.h-status-dot::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 1px solid var(--accent-purple);
    border-radius: 50%;
    opacity: 0;
    animation: pulseRing 2s infinite;
}

/* Center button overlay transition */
.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000; /* Float on top of everything */
    background: rgba(246, 245, 250, 0.45); /* Light gray-white fog glass background */
    backdrop-filter: blur(0px); /* Transitions to thick fog */
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease, backdrop-filter 0.8s ease, -webkit-backdrop-filter 0.8s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.transition-overlay.active {
    opacity: 1;
    backdrop-filter: blur(55px); /* Fully blur like thick fog */
    -webkit-backdrop-filter: blur(55px);
    pointer-events: auto;
}

.transition-text-container {
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

.transition-overlay.active .transition-text-container {
    opacity: 1;
    transform: translateY(0);
}

.welcome-text {
    font-family: var(--font-outfit);
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 4px;
    color: #000000; /* Absolute bold black */
    text-transform: uppercase;
    text-shadow: 0 0 30px rgba(37, 99, 235, 0.2);
    margin: 0;
    display: inline-block;
    border-right: 4px solid #2563eb; /* Blue glowing cursor */
    padding-right: 8px;
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #2563eb; }
}

/* ==========================================================================
   Section Layout & Scroll Animations
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

.section-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Cognitive Network Diagram (Center Column) */
.cognitive-network-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 6;
}

.cognitive-network-svg {
    width: 100%;
    max-width: 320px;
    height: auto;
    overflow: visible;
}

/* SVG Cognitive Network Animations */
@keyframes nodePulse {
    0% { transform: scale(0.95); opacity: 0.9; }
    100% { transform: scale(1.15); opacity: 1; }
}

@keyframes ringPulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes lineDash {
    to {
        stroke-dashoffset: -20;
    }
}

.node-pulse {
    transform-origin: 200px 200px;
    animation: nodePulse 2s ease-in-out infinite alternate;
}

.node-ring-pulse {
    transform-origin: 200px 200px;
    animation: ringPulse 2.5s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}

.pulse-line {
    stroke-dasharray: 6 4;
    animation: lineDash 1s linear infinite;
}

.network-status-tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-purple);
    margin-top: 15px;
    letter-spacing: 2px;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(124, 58, 237, 0.2);
}

/* Specializations progress bars */
.specializations-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.spec-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.spec-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-outfit);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-primary);
}

.spec-bar-bg {
    width: 100%;
    height: 8px;
    background-color: rgba(124, 58, 237, 0.06);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, 0.08);
}

.spec-bar-fill {
    height: 100%;
    width: 0%; /* Initial state for animated scroll entry */
    background: linear-gradient(90deg, var(--accent-purple) 0%, #2563eb 100%);
    border-radius: 4px;
    transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Research Status List */
.research-status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.research-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.06);
    padding-bottom: 8px;
}

.research-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.research-label {
    font-family: var(--font-outfit);
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

.research-value {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-purple);
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Second Section Styles (/01 ENTER - INTO IT)
   ========================================================================== */

#into-it {
    position: relative;
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.04) 0%, var(--bg-white) 80%);
    min-height: 160vh;
}

#smoke-canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

#into-it-stage .layer-building .stage-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: bottom center;
}

/* Giant Watermark Background Text */
.giant-background-text {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%) scaleY(1.4);
    font-family: var(--font-outfit);
    font-weight: 900;
    font-size: 13vw;
    background: linear-gradient(to bottom, rgba(18, 14, 32, 0.25) 10%, rgba(18, 14, 32, 0) 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
    user-select: none;
}

/* Top-Left Section Header Indicator */
.section-header-indicator {
    position: absolute;
    top: 40px;
    left: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    z-index: 10;
    pointer-events: none;
}

.indicator-tag {
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 800;
    color: #2563eb; /* Blue accent */
    letter-spacing: 3px;
    white-space: nowrap;
}

.indicator-line {
    width: 180px;
    height: 1.5px;
    background-color: #2563eb;
}

/* Main Content Grid */
.into-it-grid {
    display: grid;
    grid-template-columns: 420px 1fr 500px; /* Widened right column to fit square cards */
    gap: 40px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 120px 40px 60px 40px;
    align-items: center;
    position: relative;
    z-index: 5;
    min-height: 160vh;
}

/* Left Editorial Column */
.into-it-left {
    position: relative;
    padding-left: 40px; /* Indent text content to the right of the vertical line */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Local Vertical Guideline that aligns perfectly with text and indicator */
.into-it-left::before {
    content: '';
    position: absolute;
    top: -40px; /* Extends up to align near the section indicator */
    bottom: -40px; /* Extends down */
    left: 0;
    width: 2px;
    background-color: rgba(37, 99, 235, 0.25);
    z-index: 3;
}

.editorial-line-accent {
    position: absolute;
    left: 0; /* Positioned exactly on the vertical line */
    top: 0;
    bottom: 0;
    width: 0;
    pointer-events: none;
    z-index: 4;
}

.editorial-line-accent .line-dot {
    position: absolute;
    left: 0;
    top: 100px; /* Default initial position next to subtitle */
    width: 4px; /* Thicker vertical accent bar */
    height: 45px; /* Default initial height of subtitle line */
    background-color: #2563eb;
    transform: translateX(-50%);
    transition: top 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.editorial-content {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Decreased distance between title, plus, and body elements */
}

.editorial-title, .editorial-subtitle {
    font-family: var(--font-outfit);
    font-size: 2.1rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 1.5px;
    color: #120e20;
    text-transform: uppercase;
}

#about-subtitle {
    margin-top: 48px; /* Increased distance between name and subheader */
}

#about-title, #about-subtitle, #about-body {
    transition: opacity 0.3s ease;
}

.text-red {
    color: #2563eb !important;
}

.plus-accent {
    font-family: var(--font-outfit);
    font-size: 1.4rem;
    font-weight: 400;
    color: #2563eb;
    margin: 0; /* Reset margin to decrease gap */
    line-height: 1;
}

.editorial-body {
    font-family: var(--font-mono); /* Share Tech Mono */
    font-size: 0.82rem;
    line-height: 1.8;
    color: #000000; /* Bold black */
    font-weight: 700; /* Bold weight */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.editorial-action {
    margin-top: 15px;
    position: relative;
    display: inline-block;
    width: fit-content;
}

.btn-editorial {
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 800;
    color: #120e20;
    text-decoration: none;
    letter-spacing: 2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.btn-editorial:hover {
    color: #2563eb;
    transform: translateX(4px);
}

.btn-editorial .arrow {
    transition: transform 0.3s ease;
}

.btn-editorial:hover .arrow {
    transform: translateX(4px);
}

.action-line {
    width: 220px; /* Extends longer than the text */
    height: 1.5px;
    background-color: #2563eb; /* Blue line */
    margin-top: 8px;
}

/* Center Column (Gyroscope) */
.into-it-center {
    position: static; /* Let absolute children align to grid container */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 450px;
    z-index: 4;
}

.gyroscope-wrapper {
    position: absolute;
    top: 150px; /* Align vertically with the watermark text */
    left: 50%;
    margin-left: 70px; /* Shift to the right to touch/overlap the 'IGE' letters */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 460px;
    height: 460px;
    margin: 0 auto;
}

.gyroscope-wrapper::before,
.gyroscope-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(37, 99, 235, 0.22); /* Very thin blue border */
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    transform: translate(-50%, -50%) scale(0.45);
    opacity: 0;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.05);
}

.gyroscope-wrapper::before {
    animation: vibeCircle 6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.gyroscope-wrapper::after {
    animation: vibeCircle 6s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
    animation-delay: 3s; /* Staggered delay */
}

@keyframes vibeCircle {
    0% {
        transform: translate(-50%, -50%) scale(0.45);
        opacity: 0.9;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.25);
        opacity: 0;
    }
}

.gyroscope-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 15px 35px rgba(0,0,0,0.05));
    animation: floatSphere 8s ease-in-out infinite;
}

@keyframes floatSphere {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-24px); /* Levitate up by ~2cm */
    }
}

/* Bottom-Right Cards Column */
.into-it-bottom-right {
    display: flex;
    gap: 24px;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    z-index: 6;
    align-self: end;
    margin-bottom: 20px;
}

.hud-column-card {
    flex: 0 0 150px; /* Pure square shape */
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.01); /* 99% transparent glass background */
    backdrop-filter: blur(3px); /* Reduced blur to look like thin, pure clear glass */
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.25); /* More visible glass edge border */
    border-radius: 0; /* Four sharp corners */
    padding: 20px 15px 10px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.01);
    cursor: default;
    pointer-events: none; /* Make the cards completely non-touchable */
}

.hud-column-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(37, 99, 235, 0.3); /* Subtle blue glow on hover */
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.04);
}

.hud-column-card.active {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(37, 99, 235, 0.5) !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.hud-column-card.active .column-icon-wrapper {
    border-color: #2563eb !important; /* Visible active theme blue circle */
    background: rgba(37, 99, 235, 0.05) !important;
}

.column-icon-wrapper {
    width: 56px; /* Outer circular outline ring scaled for 150px card */
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.2px solid rgba(37, 99, 235, 0.4); /* Clearly visible blue ring */
    background: transparent;
    transition: all 0.3s ease;
}

.hud-column-card:hover .column-icon-wrapper {
    border-color: #2563eb; /* Visible hover theme blue circle */
    background: rgba(37, 99, 235, 0.04);
}

.column-icon {
    width: 26px;
    height: 26px;
    stroke: #2563eb; /* Theme blue icon */
}

.column-label {
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #120e20;
    text-transform: uppercase;
    margin-top: 10px;
    text-align: center;
}

/* Card Decoration Footer */
.card-deco-footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    height: 12px;
}

.deco-line {
    width: 36px;
    height: 1.5px;
    background-color: #2563eb;
    opacity: 0.65;
}

.deco-dots {
    display: grid;
    grid-template-columns: repeat(3, 3px);
    grid-template-rows: repeat(2, 3px);
    gap: 3.5px;
}

.deco-dot {
    width: 3px;
    height: 3px;
    background-color: rgba(37, 99, 235, 0.2);
    border-radius: 50%;
}

.deco-dot.active {
    background-color: #2563eb;
    opacity: 0.85;
}

/* Responsive Media Queries for /01 INTO IT */
@media (max-width: 1200px) {
    .into-it-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 50px;
        padding: 120px 30px 60px 30px;
        text-align: center;
    }
    
    .into-it-left {
        padding-left: 0;
        align-items: center;
    }
    
    .gyroscope-wrapper {
        position: relative;
        top: auto;
        left: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin: 0 auto !important; /* Center it! */
        width: 280px !important;
        height: 280px !important;
    }
    
    .gyroscope-wrapper::before,
    .gyroscope-wrapper::after {
        width: 260px !important;
        height: 260px !important;
    }
    
    .editorial-line-accent {
        display: none;
    }
    
    #into-it::before {
        display: none;
    }
    
    .into-it-bottom-right {
        justify-content: center;
        align-items: center;
        align-self: center;
        margin-bottom: 0;
    }
    
    .hud-column-card {
        flex: 0 1 180px; /* Square tablet cards */
        height: 180px;
        max-width: 180px;
        padding: 20px 15px 12px 15px;
    }
    
    .column-icon-wrapper {
        width: 56px;
        height: 56px;
    }
    
    .column-icon {
        width: 26px;
        height: 26px;
    }
    
    .column-label {
        font-size: 0.85rem;
        margin-top: 8px;
    }
    
    .card-deco-footer {
        padding-top: 8px;
    }
    
    .deco-line {
        width: 36px;
    }
}

@media (max-width: 768px) {
    /* ---- /01 INTO IT - Mobile Full Overhaul ---- */

    /* Hide Hindi name on mobile — only show English name */
    #name-hi-span {
        display: none !important;
    }

    #into-it {
        min-height: 100vh !important;
        overflow: hidden;
    }

    /* Section header: /01 ENTER tag visible, compact */
    .section-header-indicator {
        top: 20px;
        left: 20px;
        gap: 12px;
    }

    .indicator-tag {
        font-size: 0.78rem;
        letter-spacing: 2px;
    }

    .indicator-line {
        width: 80px;
    }

    /* Giant watermark stays visible but scaled */
    .giant-background-text {
        font-size: 14vw;
        top: 8%;
    }

    /* Grid: single column, left-aligned, full-width */
    .into-it-grid {
        display: flex;
        flex-direction: column;
        padding: 80px 0px 0px 0px;
        gap: 0;
        min-height: 100vh;
        align-items: stretch;
    }

    /* Left section: take full width, left-aligned with vertical line */
    .into-it-left {
        padding-left: 28px !important;
        padding-right: 20px;
        align-items: flex-start !important;
        text-align: left !important;
        position: relative;
        flex: 1;
    }

    /* Restore vertical blue line on mobile */
    .into-it-left::before {
        display: block !important;
        top: -80px !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 2px !important;
        background-color: rgba(37, 99, 235, 0.4) !important;
    }

    /* Show the editorial line accent dot */
    .editorial-line-accent {
        display: block !important;
    }

    /* Gyroscope: floating in background, centered behind text */
    .into-it-center {
        position: absolute !important;
        top: 60px;
        left: 0;
        right: 0;
        width: 100%;
        height: 55vw;
        display: flex !important;
        justify-content: center;
        align-items: center;
        z-index: 3;
        pointer-events: none;
        min-height: unset;
    }

    .gyroscope-wrapper {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 auto !important;
        width: 55vw !important;
        height: 55vw !important;
        max-width: 260px !important;
        max-height: 260px !important;
        opacity: 0.7;
    }

    .gyroscope-wrapper::before,
    .gyroscope-wrapper::after {
        width: 50vw !important;
        height: 50vw !important;
    }

    /* Editorial title: bold, left-aligned */
    .editorial-title {
        font-size: 2rem !important;
        font-weight: 900 !important;
        color: #120e20 !important;
        text-align: left !important;
        line-height: 1.2 !important;
    }

    /* editorial subtitle: "INTELLIGENCE / THAT MOVES" left-aligned */
    .editorial-subtitle {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
        text-align: left !important;
        margin-top: 12px !important;
    }

    /* + accent stays small */
    .plus-accent {
        font-size: 1.2rem;
        margin: 8px 0;
    }

    /* Body text: left-aligned monospace */
    .editorial-body {
        font-size: 0.72rem !important;
        line-height: 1.7 !important;
        text-align: left !important;
        letter-spacing: 0.5px !important;
    }

    /* Action link: left-aligned */
    .editorial-action {
        margin-top: 18px;
    }

    .btn-editorial {
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 2px;
    }

    .action-line {
        width: 160px;
    }

    /* Bottom cards: horizontal row of 3 square cards */
    .into-it-bottom-right {
        flex-direction: row !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        gap: 0 !important;
        width: 100% !important;
        margin-top: auto;
        align-self: flex-end;
    }

    .hud-column-card {
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
        height: 110px !important;
        padding: 12px 8px 8px 8px !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0 !important;
        border-radius: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        background: rgba(255, 255, 255, 0.04) !important;
    }

    .column-icon-wrapper {
        width: 42px !important;
        height: 42px !important;
    }

    .column-icon {
        width: 20px !important;
        height: 20px !important;
    }

    .column-label {
        margin-top: 6px !important;
        text-align: center !important;
        font-size: 0.7rem !important;
        letter-spacing: 1px;
    }

    /* Show card deco footer on mobile cards */
    .card-deco-footer {
        display: flex !important;
        padding-top: 4px;
    }

    .deco-line {
        width: 24px;
    }
}

/* ==========================================================================
   Third Section Styles (/02 ARSENAL)
   ========================================================================== */

#arsenal {
    position: relative;
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.04) 0%, var(--bg-white) 80%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Individual arsenal-orb styling consolidated into shared glow orb block */

.arsenal-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    grid-template-areas:
        "header header"
        "robot  cards";
    gap: 60px 50px;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 130px 40px;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Full-width header row: giant title gets the entire page width */
.arsenal-header {
    grid-area: header;
    position: relative;
    padding-left: 40px; /* Indent to the right of the vertical line */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Left Vertical Line */
.arsenal-header::before {
    content: '';
    position: absolute;
    top: -150px; /* Extends up to meet section 2's vertical line */
    bottom: -150px; /* Extends down */
    left: 0;
    width: 2px;
    background-color: rgba(37, 99, 235, 0.25);
    z-index: 3;
}

/* Robot column, beside the cards */
.arsenal-left {
    grid-area: robot;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Top Horizontal Line */
.arsenal-horizontal-line {
    width: 240px;
    height: 1.5px;
    background-color: rgba(37, 99, 235, 0.35); /* Theme blue muted line */
    margin-left: -40px; /* Pull left to touch vertical line */
    margin-bottom: 30px;
}

/* Subtitle /02 ARSENAL */
.arsenal-subtitle {
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 800;
    color: #2563eb; /* Theme blue */
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

/* Massive Title ARSENAL — original full size, on its own full-width row */
.arsenal-title {
    font-family: var(--font-outfit);
    font-size: clamp(3.5rem, 8.5vw, 6.8rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 2px;
    color: #120e20;
    text-transform: uppercase;
    margin-bottom: 25px;
}

/* Body description paragraph */
.arsenal-body {
    font-family: var(--font-mono); /* Share Tech Mono */
    font-size: 0.82rem;
    line-height: 1.8;
    color: #5c5670; /* Muted gray text color */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Right Side Column (Weapon Class Cards) */
.arsenal-right {
    grid-area: cards;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 4;
}

.robot-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.robot-img {
    width: 100%;
    height: auto;
    max-width: 340px; /* Proportional sizing for the robot image */
    object-fit: contain;
    filter: drop-shadow(0 15px 35px rgba(37, 99, 235, 0.12));
    animation: floatRobot 6s ease-in-out infinite;
}

@keyframes floatRobot {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px); /* 1cm float range */
    }
}

/* --------------------------------------------------------------------------
   Arsenal Flip Cards — tap/click a weapon class to reveal its loadout
   -------------------------------------------------------------------------- */
.arsenal-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    width: 100%;
}

.arsenal-card {
    perspective: 1200px;
    height: 250px;
    cursor: pointer;
    position: relative;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Scroll reveal: cards start hidden (only once JS arms the grid) and rise in */
.arsenal-cards-grid.anim-ready .arsenal-card:not(.revealed) {
    opacity: 0;
    transform: translateY(46px) scale(0.96);
}

/* Rotating neon border glow (visible on hover and while open) */
@property --arsenal-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.arsenal-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 17px;
    background: conic-gradient(
        from var(--arsenal-angle, 0deg),
        transparent 0%,
        rgba(37, 99, 235, 0.0) 18%,
        #3b82f6 30%,
        #93c5fd 36%,
        transparent 48%,
        transparent 62%,
        #2563eb 78%,
        transparent 92%
    );
    filter: blur(7px);
    opacity: 0;
    transition: opacity 0.45s ease;
    animation: arsenalBorderSpin 3.4s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.arsenal-card:hover::before,
.arsenal-card.flipped::before {
    opacity: 0.9;
}

@keyframes arsenalBorderSpin {
    to { --arsenal-angle: 360deg; }
}

.arsenal-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
    z-index: 1;
}

/* Fast transition while the cursor tilts the card */
.arsenal-card.tilting .arsenal-card-inner {
    transition: transform 0.12s ease-out;
}

.arsenal-card.flipped .arsenal-card-inner {
    transform: rotateY(180deg);
}

.arsenal-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.28);
    background-color: #080d1c; /* Dark terminal window base */
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(59, 130, 246, 0.05);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding: 0; /* Titlebar spans edge-to-edge; body gets its own padding */
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.arsenal-card:hover .arsenal-card-face {
    border-color: rgba(59, 130, 246, 0.6);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 22px rgba(37, 99, 235, 0.28);
}

/* Front face: dark window + cursor glare (follows --mx/--my) + scan-line sweep on hover */
.arsenal-card-front {
    background-image:
        radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(96, 165, 250, 0), transparent 60%),
        linear-gradient(115deg, transparent 38%, rgba(59, 130, 246, 0.10) 50%, transparent 62%),
        radial-gradient(circle at 25% 0%, rgba(37, 99, 235, 0.22), transparent 55%),
        linear-gradient(165deg, #0b1226 0%, #070b18 100%);
    background-size: 100% 100%, 240% 100%, 100% 100%, 100% 100%;
    background-position: 0 0, 135% 0, 0 0, 0 0;
    background-repeat: no-repeat;
}

.arsenal-card:hover .arsenal-card-front {
    background-image:
        radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(96, 165, 250, 0.22), transparent 60%),
        linear-gradient(115deg, transparent 38%, rgba(59, 130, 246, 0.12) 50%, transparent 62%),
        radial-gradient(circle at 25% 0%, rgba(37, 99, 235, 0.28), transparent 55%),
        linear-gradient(165deg, #0b1226 0%, #070b18 100%);
    animation: arsenalScan 1.7s ease-in-out infinite;
}

/* Terminal titlebar: traffic-light dots + fake URL + live status LED */
.arsenal-titlebar {
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.28);
    border-bottom: 1px solid rgba(59, 130, 246, 0.18);
    position: relative;
    z-index: 2;
}

.term-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.term-dot-r { background: #ff5f56; }
.term-dot-y { background: #ffbd2e; }
.term-dot-g { background: #27c93f; }

.arsenal-term-url {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.5px;
    color: #9db4e0;
    opacity: 0.85;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes arsenalScan {
    0%   { background-position: 0 0, 135% 0; }
    100% { background-position: 0 0, -35% 0; }
}

/* Icon: circular emblem with a slowly orbiting dashed ring, floating idle.
   In the terminal layout it sits top-right, below the titlebar. */
.arsenal-icon-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(96, 165, 250, 0.4);
    background: radial-gradient(circle at 35% 30%, rgba(96, 165, 250, 0.25), rgba(37, 99, 235, 0.06));
    margin: 16px 16px 4px auto; /* auto-left pushes it to the right edge */
    position: relative;
    z-index: 1;
    animation: arsenalIconFloat 3.4s ease-in-out infinite;
}

.arsenal-icon-wrap::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px dashed rgba(96, 165, 250, 0.5);
    animation: arsenalRingSpin 14s linear infinite;
}

.arsenal-icon-wrap::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #60a5fa;
    box-shadow: 0 0 8px rgba(96, 165, 250, 1);
    transform-origin: 2.5px 34px; /* orbits around the emblem center */
    animation: arsenalRingSpin 14s linear infinite;
}

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

@keyframes arsenalIconFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.arsenal-icon-wrap svg {
    width: 24px;
    height: 24px;
    stroke: #93c5fd;
    stroke-width: 1.6;
    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.6));
}

/* Brighten deco footer for the dark terminal background */
.arsenal-card .deco-line {
    background-color: #60a5fa;
    opacity: 0.8;
}

.arsenal-card .deco-dot {
    background-color: rgba(96, 165, 250, 0.35);
    animation: arsenalDecoBlink 1.6s ease-in-out infinite;
}

.arsenal-card .deco-dot.active {
    background-color: #60a5fa;
}

.arsenal-card .deco-dot:nth-child(1) { animation-delay: 0s; }
.arsenal-card .deco-dot:nth-child(2) { animation-delay: 0.15s; }
.arsenal-card .deco-dot:nth-child(3) { animation-delay: 0.3s; }
.arsenal-card .deco-dot:nth-child(4) { animation-delay: 0.45s; }
.arsenal-card .deco-dot:nth-child(5) { animation-delay: 0.6s; }
.arsenal-card .deco-dot:nth-child(6) { animation-delay: 0.75s; }

@keyframes arsenalDecoBlink {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

.arsenal-card-title {
    font-family: var(--font-outfit);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #eef4ff;
    text-align: left;
    line-height: 1.25;
    padding: 0 14px;
    margin-top: 2px;
    position: relative;
    z-index: 1;
}

/* Module label (below titlebar): small mono tag, terminal style */
.arsenal-module-tag {
    font-family: var(--font-mono);
    font-size: 0.54rem;
    letter-spacing: 2px;
    color: #f87171; /* subtle red mono accent, like the terminal label in the reference */
    opacity: 0.9;
    padding: 0 14px;
    margin-top: -2px;
    position: relative;
    z-index: 1;
}

/* Live status LED, pushed to the right edge of the titlebar */
.arsenal-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #27c93f;
    box-shadow: 0 0 7px rgba(39, 201, 63, 0.9);
    margin-left: auto;
    flex-shrink: 0;
    animation: arsenalDotPulse 1.8s ease-in-out infinite;
}

@keyframes arsenalDotPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 7px rgba(39, 201, 63, 0.9); }
    50%      { opacity: 0.3; box-shadow: 0 0 2px rgba(39, 201, 63, 0.4); }
}

/* HUD corner brackets on the front face */
.arsenal-card-front::before,
.arsenal-card-front::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 13px;
    border-color: rgba(96, 165, 250, 0.6);
    border-style: solid;
    pointer-events: none;
    z-index: 1;
}

.arsenal-card-front::before {
    bottom: 8px;
    left: 8px;
    border-width: 0 0 1.5px 1.5px;
}

.arsenal-card-front::after {
    bottom: 8px;
    right: 8px;
    border-width: 0 1.5px 1.5px 0;
}

.arsenal-card-count {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 1px;
    color: #7f96c4;
    opacity: 0.9;
    padding: 0 14px;
    margin-top: 8px;
    position: relative;
    z-index: 1;
}

.arsenal-card-front .card-deco-footer {
    margin-top: auto; /* push footer to the bottom of the window */
    margin-bottom: 12px;
    padding: 0 14px;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Back face (rotated, shows skill loadout) — dark terminal window */
.arsenal-card-back {
    transform: rotateY(180deg);
    justify-content: flex-start;
    background-image:
        radial-gradient(circle at 75% 0%, rgba(37, 99, 235, 0.22), transparent 55%),
        linear-gradient(165deg, #0b1226 0%, #070b18 100%);
    border-color: rgba(59, 130, 246, 0.45);
    padding: 14px;
}

.arsenal-back-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(96, 165, 250, 0.28);
    flex-shrink: 0;
}

.arsenal-back-header .arsenal-module-tag {
    padding: 0;
    margin: 0;
}

.arsenal-back-title {
    font-family: var(--font-outfit);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #eef4ff;
}

/* Skill chips */
.arsenal-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    align-content: flex-start;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.arsenal-chip {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.5px;
    color: #bcd1f5;
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.32);
    border-radius: 4px;
    padding: 3px 7px;
    line-height: 1.4;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.arsenal-chip:hover {
    background: rgba(59, 130, 246, 0.28);
    border-color: rgba(96, 165, 250, 0.7);
    color: #ffffff;
}

/* Chips cascade in one-by-one once the card flips open (--i set by JS) */
.arsenal-card.flipped .arsenal-chip {
    opacity: 0;
    animation: arsenalChipIn 0.32s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 45ms + 0.34s);
}

@keyframes arsenalChipIn {
    from { opacity: 0; transform: translateY(9px) scale(0.9); }
    to   { opacity: 1; transform: none; }
}

/* Accessibility: tone everything down for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .arsenal-card,
    .arsenal-card::before,
    .arsenal-card .deco-dot,
    .arsenal-icon-wrap,
    .arsenal-icon-wrap::before,
    .arsenal-icon-wrap::after,
    .arsenal-card:hover .arsenal-card-front,
    .arsenal-card.flipped .arsenal-chip {
        animation: none;
    }

    .arsenal-cards-grid.anim-ready .arsenal-card:not(.revealed) {
        opacity: 1;
        transform: none;
    }

    .arsenal-card.flipped .arsenal-chip {
        opacity: 1;
    }
}

.arsenal-back-footer {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 2px;
    color: #27c93f;
    opacity: 0.9;
    width: 100%;
    text-align: right;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(96, 165, 250, 0.2);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Arsenal Expand Modal — tap a card, its loadout bursts out big & readable
   -------------------------------------------------------------------------- */
.arsenal-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.arsenal-modal.open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease;
}

.arsenal-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 8, 18, 0.72);
    backdrop-filter: blur(9px) saturate(120%);
    -webkit-backdrop-filter: blur(9px) saturate(120%);
}

.arsenal-modal-window {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.4);
    background-image:
        radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.25), transparent 55%),
        linear-gradient(165deg, #0c1428 0%, #06090f 100%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(37, 99, 235, 0.25);
    overflow: hidden;
    transform: translateY(28px) scale(0.94);
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.42s ease;
}

.arsenal-modal.open .arsenal-modal-window {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Titlebar */
.arsenal-modal-titlebar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 16px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(96, 165, 250, 0.2);
    flex-shrink: 0;
}

.arsenal-modal-titlebar .term-dot { width: 11px; height: 11px; }

.arsenal-modal-url {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: #9db4e0;
    margin-left: 10px;
}

.arsenal-modal-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27c93f;
    box-shadow: 0 0 8px rgba(39, 201, 63, 0.9);
    margin-left: auto;
    animation: arsenalDotPulse 1.8s ease-in-out infinite;
}

.arsenal-modal-close {
    width: 30px;
    height: 30px;
    margin-left: 14px;
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 8px;
    background: rgba(96, 165, 250, 0.08);
    color: #cfe0ff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.arsenal-modal-close svg { width: 16px; height: 16px; }

.arsenal-modal-close:hover {
    background: rgba(239, 68, 68, 0.22);
    border-color: rgba(239, 68, 68, 0.6);
    transform: rotate(90deg);
}

/* Body */
.arsenal-modal-body {
    padding: 26px 28px 24px;
    overflow-y: auto;
}

.arsenal-modal-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(96, 165, 250, 0.4);
    background: radial-gradient(circle at 35% 30%, rgba(96, 165, 250, 0.28), rgba(37, 99, 235, 0.06));
    margin-bottom: 16px;
}

.arsenal-modal-icon svg {
    width: 30px;
    height: 30px;
    stroke: #93c5fd;
    stroke-width: 1.6;
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.6));
}

.arsenal-modal-module {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 2.5px;
    color: #f87171;
    display: block;
    margin-bottom: 6px;
}

.arsenal-modal-title {
    font-family: var(--font-outfit);
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #eef4ff;
    line-height: 1.1;
    margin: 0 0 16px;
}

.arsenal-modal-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.6), rgba(96, 165, 250, 0));
    margin-bottom: 20px;
}

/* Big readable chips that burst in */
.arsenal-modal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.arsenal-modal-chip {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    color: #cfe0ff;
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 7px;
    padding: 9px 15px;
    line-height: 1.3;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    /* burst-in start state */
    opacity: 0;
    transform: translateY(16px) scale(0.85);
    animation: arsenalModalChipIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: calc(var(--i, 0) * 55ms + 0.25s);
}

.arsenal-modal-chip:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(96, 165, 250, 0.8);
    color: #ffffff;
    transform: translateY(-2px);
}

@keyframes arsenalModalChipIn {
    to { opacity: 1; transform: none; }
}

.arsenal-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid rgba(96, 165, 250, 0.18);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 1.5px;
}

.arsenal-modal-count { color: #7f96c4; }
.arsenal-modal-status { color: #27c93f; }

@media (max-width: 600px) {
    .arsenal-modal-title { font-size: 1.5rem; }
    .arsenal-modal-chip { font-size: 0.82rem; padding: 8px 13px; }
    .arsenal-modal-body { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .arsenal-modal-window { transition: opacity 0.2s ease; transform: none; }
    .arsenal-modal-chip { animation: none; opacity: 1; transform: none; }
}

/* Responsive Media Queries for /02 ARSENAL */
@media (max-width: 1200px) {
    .arsenal-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "cards"
            "robot";
        padding: 100px 30px 60px 30px;
        text-align: center;
        gap: 40px;
    }

    .arsenal-header {
        padding-left: 0;
        align-items: center;
    }

    .arsenal-header::before {
        display: none;
    }

    .arsenal-horizontal-line {
        margin-left: auto;
        margin-right: auto;
    }

    .robot-img {
        max-width: 240px;
    }

    .arsenal-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 820px;
        margin: 0 auto;
    }
}

@media (max-width: 900px) {
    .arsenal-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 560px;
    }
}

@media (max-width: 768px) {
    .arsenal-grid {
        padding: 80px 20px 40px 20px;
    }

    .arsenal-title {
        font-size: 3.2rem;
    }

    .arsenal-horizontal-line {
        width: 160px;
    }

    .robot-img {
        max-width: 180px;
    }

    .arsenal-cards-grid {
        gap: 14px;
    }

    .arsenal-card {
        height: 250px;
    }

    .arsenal-card-title {
        font-size: 0.72rem;
    }
}

@media (max-width: 420px) {
    .arsenal-cards-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    .arsenal-card {
        height: 250px;
    }
}

/* ==========================================================================
   Fourth Section Styles (/03 SYSTEMS)
   ========================================================================== */

#systems {
    position: relative;
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.04) 0%, var(--bg-primary) 80%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.systems-grid {
    display: block;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 120px 40px;
    position: relative;
    z-index: 5;
}

.systems-inner {
    display: flex;
    flex-direction: column;
}

/* Compact section header */
.systems-head {
    position: relative;
    padding-left: 40px;
    margin-bottom: 26px;
}

.systems-head::before {
    content: '';
    position: absolute;
    top: -150px;
    bottom: -10px;
    left: 0;
    width: 2px;
    background-color: rgba(37, 99, 235, 0.25);
    z-index: 3;
}

/* Top Horizontal Line */
.systems-horizontal-line {
    width: 240px;
    height: 1.5px;
    background-color: rgba(37, 99, 235, 0.35);
    margin-left: -40px;
    margin-bottom: 22px;
}

/* Subtitle /03 SYSTEMS */
.systems-subtitle {
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 800;
    color: #2563eb;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

/* Massive Title SYSTEMS (original full size) */
.systems-title {
    font-family: var(--font-outfit);
    font-size: clamp(3.5rem, 8.5vw, 6.8rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 2px;
    color: #120e20;
    text-transform: uppercase;
    margin: 0;
}

/* ==========================================================================
   LIVE ARCHITECTURE PANEL — Agentic RAG Signal Path
   ========================================================================== */
.sys-arch {
    position: relative;
    border-radius: 18px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background-image:
        radial-gradient(circle at 18% 0%, rgba(37, 99, 235, 0.20), transparent 55%),
        radial-gradient(circle at 82% 12%, rgba(239, 68, 68, 0.10), transparent 50%),
        linear-gradient(165deg, #0b1327 0%, #070b16 100%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(96, 165, 250, 0.05);
    padding: 22px 26px 26px;
    overflow: hidden;
}

/* Topbar */
.sys-arch-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sys-arch-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sys-arch-menu {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
}
.sys-arch-menu span {
    width: 16px;
    height: 2px;
    background: #9db4e0;
    border-radius: 2px;
}

.sys-arch-name {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 3px;
    color: #eaf1ff;
    font-weight: 400;
}

.sys-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    color: #ff6b6b;
    padding: 3px 8px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 20px;
    background: rgba(239, 68, 68, 0.08);
}

.sys-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff4b4b;
    box-shadow: 0 0 7px rgba(255, 75, 75, 0.9);
    animation: sysLiveBlink 1.4s ease-in-out infinite;
}

@keyframes sysLiveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.sys-arch-crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sys-crumb {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    color: #9db4e0;
    padding: 4px 10px;
    border: 1px solid rgba(96, 165, 250, 0.35);
    border-radius: 20px;
    background: rgba(59, 130, 246, 0.08);
}

.sys-crumb-hot {
    color: #ff8a8a;
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.1);
}

.sys-crumb-arrow { color: #5a6b8c; font-size: 0.7rem; }

.sys-arch-heading {
    font-family: var(--font-outfit);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 4px;
    color: #5f7099;
    text-transform: uppercase;
    margin: 18px 0 6px;
}

/* Horizontal signal flow */
.sys-flow-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 20px;
    scrollbar-width: thin;
    scrollbar-color: rgba(96, 165, 250, 0.4) transparent;
}
.sys-flow-scroll::-webkit-scrollbar { height: 6px; }
.sys-flow-scroll::-webkit-scrollbar-thumb { background: rgba(96, 165, 250, 0.4); border-radius: 3px; }

.sys-flow-row {
    display: flex;
    align-items: center;
    width: max-content;
    padding: 8px 4px 104px; /* bottom room for the tool branch */
}

/* Node */
.sys-node {
    position: relative;
    flex-shrink: 0;
    width: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 13px 6px;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background: linear-gradient(160deg, rgba(96, 165, 250, 0.08), rgba(96, 165, 250, 0.02));
    animation: sysNodeWave 4.2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.42s);
}

@keyframes sysNodeWave {
    0%, 62%, 100% {
        border-color: rgba(96, 165, 250, 0.28);
        box-shadow: 0 0 0 rgba(59, 130, 246, 0);
    }
    16% {
        border-color: rgba(96, 165, 250, 0.85);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
    }
}

.sys-node-ic {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(96, 165, 250, 0.35);
    background: radial-gradient(circle at 35% 30%, rgba(96, 165, 250, 0.22), rgba(37, 99, 235, 0.05));
    margin-bottom: 9px;
}
.sys-node-ic svg {
    width: 20px;
    height: 20px;
    stroke: #93c5fd;
    stroke-width: 1.6;
}

.sys-node-main { display: flex; flex-direction: column; gap: 2px; }
.sys-node-label {
    font-family: var(--font-outfit);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #eef4ff;
    text-transform: uppercase;
}
.sys-node-sub {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 1px;
    color: #7f96c4;
    text-transform: uppercase;
}

.sys-node-tag {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 0.46rem;
    letter-spacing: 1px;
    color: #ff9d9d;
    padding: 3px 7px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 20px;
    text-transform: uppercase;
}

/* Accent variants */
.sys-node--core {
    border-color: rgba(239, 68, 68, 0.55);
    background: linear-gradient(160deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.03));
}
.sys-node--core .sys-node-ic { border-color: rgba(239, 68, 68, 0.6); background: radial-gradient(circle at 35% 30%, rgba(248, 113, 113, 0.3), rgba(239, 68, 68, 0.06)); }
.sys-node--core .sys-node-ic svg { stroke: #fca5a5; filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.6)); }
.sys-node--core { animation: sysNodeWaveCore 4.2s ease-in-out infinite; animation-delay: calc(var(--i) * 0.42s); }
@keyframes sysNodeWaveCore {
    0%, 62%, 100% { border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 0 12px rgba(239, 68, 68, 0.2); }
    16% { border-color: rgba(248, 113, 113, 0.95); box-shadow: 0 0 26px rgba(239, 68, 68, 0.5); }
}

.sys-node--llm .sys-node-ic svg { stroke: #c4b5fd; }
.sys-node--out { border-color: rgba(39, 201, 63, 0.4); }
.sys-node--out .sys-node-ic { border-color: rgba(39, 201, 63, 0.5); }
.sys-node--out .sys-node-ic svg { stroke: #6ee7a0; }

/* Connector */
.sys-conn {
    flex-shrink: 0;
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.sys-conn-label {
    font-family: var(--font-mono);
    font-size: 0.46rem;
    letter-spacing: 1px;
    color: #6b83b5;
    text-transform: uppercase;
    white-space: nowrap;
}
.sys-conn-line {
    position: relative;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.15), rgba(96, 165, 250, 0.6));
}
.sys-conn-line::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    border-left: 5px solid rgba(96, 165, 250, 0.8);
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
}
.sys-packet {
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: #93c5fd;
    box-shadow: 0 0 8px 2px rgba(96, 165, 250, 0.9);
    animation: sysPacket 1.5s linear infinite;
    animation-delay: calc(var(--i) * 0.18s);
}
@keyframes sysPacket {
    0% { left: -4%; opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 1; }
    100% { left: 104%; opacity: 0; }
}

/* Tool-calling branch under the core node */
.sys-tools {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 220px;
}
.sys-tools-drop {
    width: 0;
    height: 14px;
    border-left: 2px dashed rgba(239, 68, 68, 0.5);
}
.sys-tools-label {
    font-family: var(--font-mono);
    font-size: 0.46rem;
    letter-spacing: 1.5px;
    color: #ff9d9d;
    text-transform: uppercase;
    margin: 5px 0 7px;
}
.sys-tools-row { display: flex; gap: 8px; }
.sys-tool {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.5px;
    color: #cdb4b4;
    padding: 6px 9px;
    border: 1px dashed rgba(239, 68, 68, 0.4);
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.05);
    white-space: nowrap;
}
.sys-tool svg { width: 13px; height: 13px; stroke: #ff9d9d; stroke-width: 1.6; }

/* Live query ticker */
.sys-arch-ticker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    padding-top: 16px;
    border-top: 1px solid rgba(96, 165, 250, 0.14);
}
.sys-ticker-pill {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    color: #ff8a8a;
    padding: 4px 9px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.08);
    flex-shrink: 0;
}
.sys-ticker-text {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    color: #cfe0ff;
}
.sys-ticker-text::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 1.05em;
    background: #60a5fa;
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: sysCaret 1s steps(1) infinite;
}
@keyframes sysCaret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Feature badges */
.sys-arch-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
    margin-top: 18px;
}
.sys-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 1px;
    color: #9db4e0;
    text-transform: none;
}
.sys-badge svg { width: 15px; height: 15px; stroke-width: 1.8; }
.sys-badge:nth-child(1) svg { stroke: #fbbf24; }
.sys-badge:nth-child(2) svg { stroke: #60a5fa; }
.sys-badge:nth-child(3) svg { stroke: #6ee7a0; }
.sys-badge:nth-child(4) svg { stroke: #f87171; }

/* ==========================================================================
   SYSTEMS — Deployed Project Cards (terminal window style)
   ========================================================================== */
.sys-projects {
    margin-top: 60px;
}

.sys-projects-head {
    position: relative;
    padding-left: 40px;
    margin-bottom: 28px;
}
.sys-projects-head .systems-horizontal-line {
    margin-bottom: 14px;
}
.sys-projects-tag {
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 800;
    color: #2563eb;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.sys-projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

.proj-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background-image:
        radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.16), transparent 60%),
        linear-gradient(165deg, #0b1226 0%, #070b18 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.proj-card:hover {
    transform: translateY(-5px);
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 22px rgba(37, 99, 235, 0.25);
}

/* Titlebar */
.proj-titlebar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 13px;
    background: rgba(0, 0, 0, 0.28);
    border-bottom: 1px solid rgba(96, 165, 250, 0.16);
}
.proj-url {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.5px;
    color: #9db4e0;
    margin-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.proj-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 1px;
    color: #ff6b6b;
    padding: 2px 7px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 20px;
    background: rgba(239, 68, 68, 0.08);
    flex-shrink: 0;
}
.proj-live-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #ff4b4b;
    box-shadow: 0 0 6px rgba(255, 75, 75, 0.9);
    animation: sysLiveBlink 1.4s ease-in-out infinite;
}
.proj-src {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 1px;
    color: #6b83b5;
    padding: 2px 7px;
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 20px;
    flex-shrink: 0;
}

/* Body */
.proj-body {
    padding: 16px 15px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.proj-title {
    font-family: var(--font-outfit);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #eef4ff;
    margin: 0 0 8px;
    line-height: 1.15;
}
.proj-desc {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    line-height: 1.6;
    letter-spacing: 0.3px;
    color: #8ea3c9;
    margin: 0 0 14px;
    flex: 1;
}
.proj-meta {
    display: flex;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 1px;
    color: #cfe0ff;
}
.proj-meta-item em {
    font-style: normal;
    color: #5f7099;
    margin-right: 4px;
}

/* Actions footer */
.proj-actions {
    display: flex;
    border-top: 1px solid rgba(96, 165, 250, 0.16);
}
.proj-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: #cfe0ff;
    transition: background 0.2s ease, color 0.2s ease;
}
.proj-btn span { color: #60a5fa; transition: transform 0.2s ease; }
.proj-btn:hover { background: rgba(59, 130, 246, 0.14); color: #ffffff; }
.proj-btn:hover span { transform: translate(2px, -2px); }
.proj-btn + .proj-btn { border-left: 1px solid rgba(96, 165, 250, 0.16); }
.proj-btn--go { color: #6ee7a0; }
.proj-btn--go span { color: #6ee7a0; }
.proj-btn--go:hover { background: rgba(39, 201, 63, 0.14); }

/* Hub card (red, links to full GitHub profile) */
.proj-card--hub {
    border-color: rgba(239, 68, 68, 0.4);
    background-image:
        radial-gradient(circle at 25% 0%, rgba(239, 68, 68, 0.28), transparent 60%),
        linear-gradient(165deg, #1a0d12 0%, #0a0608 100%);
}
.proj-card--hub:hover {
    border-color: rgba(239, 68, 68, 0.7);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 26px rgba(239, 68, 68, 0.3);
}
.proj-card--hub .proj-titlebar { border-bottom-color: rgba(239, 68, 68, 0.2); }
.proj-hub-tag {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 2px;
    color: #ff8a8a;
    margin-bottom: 8px;
}
.proj-card--hub .proj-title { color: #ff9d9d; }
.proj-card--hub .proj-actions { border-top-color: rgba(239, 68, 68, 0.2); }
.proj-card--hub .proj-btn { color: #ffb3b3; }
.proj-card--hub .proj-btn span { color: #ff6b6b; }
.proj-card--hub .proj-btn:hover { background: rgba(239, 68, 68, 0.16); color: #ffffff; }

@media (max-width: 1200px) {
    .sys-projects-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    .sys-projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .sys-projects-grid { grid-template-columns: 1fr; }
    .sys-projects-head { padding-left: 24px; }
}

/* Responsive Media Queries for /03 SYSTEMS */
@media (max-width: 1200px) {
    .systems-grid {
        padding: 100px 30px 60px 30px;
    }
}

@media (max-width: 768px) {
    .systems-grid {
        padding: 80px 18px 40px 18px;
    }
    .systems-head {
        padding-left: 24px;
    }
    .systems-horizontal-line {
        width: 160px;
        margin-left: -24px;
    }
    .systems-title {
        font-size: 3.2rem;
    }
    .sys-arch {
        padding: 18px 14px 22px;
    }
    .sys-arch-topbar {
        gap: 10px;
    }
    .sys-arch-badges {
        gap: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sys-node, .sys-node--core, .sys-packet, .sys-live-dot { animation: none; }
    .sys-node--core { border-color: rgba(239, 68, 68, 0.5); }
}

/* ==========================================================================
   Fifth Section Styles (/04 INTELLIGENCE)
   ========================================================================== */

#intelligence {
    position: relative;
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.04) 0%, var(--bg-white) 80%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Ambient blue light behind all pages except first page (Hero) - positioned in the upper right */
.into-it-orb,
.arsenal-orb,
.systems-orb,
.intelligence-orb,
.archive-orb,
.contact-orb {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, rgba(37, 99, 235, 0.04) 45%, rgba(255, 255, 255, 0) 70%);
    filter: blur(100px);
    pointer-events: none;
    z-index: 2; /* Float above stages but behind text content */
}

.intelligence-grid {
    display: block;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 120px 40px;
    position: relative;
    z-index: 5;
}

.intel-inner { display: flex; flex-direction: column; }

.intel-head {
    position: relative;
    padding-left: 40px;
    margin-bottom: 6px;
}
.intel-head::before {
    content: '';
    position: absolute;
    top: -150px;
    bottom: -10px;
    left: 0;
    width: 2px;
    background-color: rgba(37, 99, 235, 0.25);
    z-index: 3;
}

/* Top Horizontal Line */
.intelligence-horizontal-line {
    width: 240px;
    height: 1.5px;
    background-color: rgba(37, 99, 235, 0.35);
    margin-left: -40px;
    margin-bottom: 22px;
}

/* Subtitle /04 INTELLIGENCE */
.intelligence-subtitle {
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 800;
    color: #2563eb;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

/* Massive Title INTELLIGENCE (original full size) */
.intelligence-title {
    font-family: var(--font-outfit);
    font-size: clamp(3.5rem, 8.5vw, 6.8rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 2px;
    color: #120e20;
    text-transform: uppercase;
    margin: 0;
}

/* ==========================================================================
   COGNITIVE CORE — animated capability neural map
   ========================================================================== */
.cog-stage {
    position: relative;
    width: 100%;
    height: 660px;
    margin-top: 34px;
    border-radius: 24px;
    border: 1px solid rgba(96, 165, 250, 0.22);
    background:
        radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.20), transparent 42%),
        radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.10), transparent 60%),
        linear-gradient(160deg, #0a1024 0%, #05070f 100%);
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.6), 0 30px 70px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.cog-arms { display: contents; }

/* Decorative orbit rings */
.cog-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.cog-orbit-1 {
    width: 300px; height: 300px;
    border: 1px dashed rgba(96, 165, 250, 0.16);
    animation: cogSpin 42s linear infinite;
}
.cog-orbit-2 {
    width: 540px; height: 540px;
    border: 1px solid rgba(96, 165, 250, 0.08);
    animation: cogSpin 90s linear infinite reverse;
}
@keyframes cogSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Central core */
.cog-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 214px;
    height: 214px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 6;
    background: radial-gradient(circle at 50% 42%, rgba(59, 130, 246, 0.30), rgba(37, 99, 235, 0.05) 62%, transparent 74%);
}
.cog-core-glow {
    position: absolute;
    inset: -26px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.38), transparent 65%);
    filter: blur(18px);
    animation: cogPulse 3s ease-in-out infinite;
}
@keyframes cogPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(1.08); }
}
.cog-core-ring { position: absolute; border-radius: 50%; }
.cog-core-ring.r1 { inset: 8px; border: 1px solid rgba(96, 165, 250, 0.5); }
.cog-core-ring.r2 { inset: 28px; border: 1px dashed rgba(96, 165, 250, 0.4); animation: cogSpin 20s linear infinite; }

.cog-core-content {
    position: relative;
    z-index: 2;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-width: 200px;
}
.cog-core-kicker {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 2.5px;
    color: #7fa0e0;
}
.cog-core-title {
    font-family: var(--font-outfit);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #eef4ff;
    line-height: 1.12;
    min-height: 1.1em;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.cog-core-desc {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    line-height: 1.55;
    color: #9db4e0;
    transition: opacity 0.25s ease;
}
.cog-core.swap .cog-core-title { opacity: 0; transform: translateY(4px); }
.cog-core.swap .cog-core-desc { opacity: 0; }

/* Neural arm (line from centre to node) */
.cog-arm {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 2px;
    transform-origin: 0 50%;
    transform: rotate(var(--a));
    z-index: 4;
}
.cog-line {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.04), rgba(96, 165, 250, 0.32));
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.cog-pulse {
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: #93c5fd;
    box-shadow: 0 0 8px 2px rgba(96, 165, 250, 0.9);
    animation: cogPacket 2.4s linear infinite;
    animation-delay: calc(var(--i) * 0.2s);
}
@keyframes cogPacket {
    0% { left: 14%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* Capability node (counter-rotated so text stays upright) */
.cog-node {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
    width: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cog-node-ic {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(96, 165, 250, 0.4);
    background: radial-gradient(circle at 35% 30%, rgba(96, 165, 250, 0.2), rgba(10, 16, 36, 0.92));
    animation: cogNodeBreath 3.6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.25s);
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
@keyframes cogNodeBreath {
    0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); }
    50% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(59, 130, 246, 0.4); }
}
.cog-node-ic svg {
    width: 22px;
    height: 22px;
    stroke: #93c5fd;
    stroke-width: 1.6;
    transition: stroke 0.25s ease;
}
.cog-node-label {
    font-family: var(--font-outfit);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #b9ccef;
    text-align: center;
    line-height: 1.2;
    transition: color 0.25s ease;
}

/* Hover / active states */
.cog-node:hover .cog-node-ic,
.cog-node:focus-visible .cog-node-ic,
.cog-arm.active .cog-node-ic {
    animation: none;
    transform: scale(1.12);
    border-color: #bfdbfe;
    background: radial-gradient(circle at 35% 30%, rgba(96, 165, 250, 0.5), rgba(37, 99, 235, 0.16));
    box-shadow: 0 0 24px rgba(59, 130, 246, 0.65);
}
.cog-node:hover .cog-node-ic svg,
.cog-arm.active .cog-node-ic svg { stroke: #ffffff; }
.cog-node:hover .cog-node-label,
.cog-arm.active .cog-node-label { color: #ffffff; }

.cog-arm.active .cog-line {
    background: linear-gradient(90deg, rgba(147, 197, 253, 0.35), rgba(147, 197, 253, 0.95));
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.6);
}
.cog-arm.active .cog-pulse { animation-duration: 1s; }

/* Scroll reveal */
.cog-stage:not(.revealed) .cog-node { opacity: 0; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))) scale(0.4); }
.cog-node { transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1), opacity 0.5s ease, border-color 0.25s, background 0.25s, box-shadow 0.25s; }
.cog-stage.revealed .cog-node { transition-delay: calc(var(--i) * 0.05s); }
.cog-stage:not(.revealed) .cog-core-glow,
.cog-stage:not(.revealed) .cog-pulse { opacity: 0; }

/* Responsive */
@media (max-width: 1200px) {
    .intelligence-grid { padding: 100px 30px 60px 30px; }
}
@media (max-width: 1100px) {
    .cog-arm { width: 205px; }
    .cog-stage { height: 560px; }
    .cog-core { width: 178px; height: 178px; }
    .cog-orbit-1 { width: 250px; height: 250px; }
    .cog-orbit-2 { width: 440px; height: 440px; }
    .cog-node { width: 96px; }
}

@media (max-width: 720px) {
    .intelligence-grid { padding: 80px 18px 40px; }
    .intel-head { padding-left: 24px; }
    .intelligence-horizontal-line { width: 150px; margin-left: -24px; }
    .intelligence-title { font-size: clamp(2.4rem, 11vw, 3.4rem); }

    /* Radial → stacked grid on phones */
    .cog-stage {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 28px 16px 34px;
    }
    .cog-orbit { display: none; }
    .cog-core {
        position: static;
        transform: none;
        width: 100%;
        max-width: 340px;
        height: auto;
        aspect-ratio: auto;
        padding: 22px;
        border-radius: 16px;
        border: 1px solid rgba(96, 165, 250, 0.3);
        background: linear-gradient(160deg, rgba(59,130,246,0.14), rgba(10,16,36,0.5));
    }
    .cog-core-ring, .cog-core-glow { display: none; }
    .cog-core-content { max-width: none; }
    .cog-arms {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px 6px;
        width: 100%;
        max-width: 360px;
    }
    .cog-arm {
        position: static;
        transform: none;
        width: auto;
        height: auto;
    }
    .cog-line { display: none; }
    .cog-node {
        position: static;
        transform: none;
        width: 100%;
    }
    .cog-stage:not(.revealed) .cog-node { opacity: 1; transform: none; }
    .cog-node:hover .cog-node-ic, .cog-arm.active .cog-node-ic { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .cog-orbit, .cog-core-glow, .cog-core-ring.r2, .cog-pulse, .cog-node-ic { animation: none; }
    .cog-stage:not(.revealed) .cog-node { opacity: 1; transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); }
}

/* ==========================================================================
   Sixth Section Styles (/05 ARCHIVE)
   ========================================================================== */

#archive {
    position: relative;
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.04) 0%, var(--bg-white) 80%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.archive-grid {
    display: block;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 120px 40px;
    position: relative;
    z-index: 5;
}

.archive-inner { display: flex; flex-direction: column; }

.archive-head {
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px;
}
.archive-head::before {
    content: '';
    position: absolute;
    top: -150px;
    bottom: -10px;
    left: 0;
    width: 2px;
    background-color: rgba(37, 99, 235, 0.25);
    z-index: 3;
}

.archive-horizontal-line {
    width: 240px;
    height: 1.5px;
    background-color: rgba(37, 99, 235, 0.35);
    margin-left: -40px;
    margin-bottom: 22px;
}

.archive-subtitle {
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 800;
    color: #2563eb;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.archive-title {
    font-family: var(--font-outfit);
    font-size: clamp(3.5rem, 8.5vw, 6.8rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 2px;
    color: #120e20;
    text-transform: uppercase;
    margin: 0;
}

/* ==========================================================================
   MY JOURNEY — animated vertical timeline
   ========================================================================== */
.jrn { margin-top: 20px; }

.jrn-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    color: #2563eb;
    text-transform: uppercase;
    margin-bottom: 30px;
}
.jrn-kicker-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.8);
    animation: sysLiveBlink 1.6s ease-in-out infinite;
}

.jrn-timeline {
    position: relative;
    padding: 6px 0 0;
}

/* Left spine */
.jrn-spine {
    position: absolute;
    top: 6px;
    bottom: 24px;
    left: 21px;
    width: 2px;
    background: linear-gradient(180deg, rgba(37,99,235,0) 0%, rgba(37,99,235,0.55) 5%, rgba(37,99,235,0.55) 95%, rgba(37,99,235,0) 100%);
}

/* Timeline item — single column, revealed one-by-one on scroll */
.jrn-item {
    position: relative;
    width: 100%;
    padding: 0 0 44px 62px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2,0.8,0.2,1);
}
.jrn-item:last-child { padding-bottom: 4px; }
/* neutralise the old zig-zag classes */
.jrn-left, .jrn-right { left: 0; width: 100%; text-align: left; }
.jrn-item.in { opacity: 1; transform: none; }

/* Clean glowing node dot on the spine */
.jrn-node {
    position: absolute;
    top: 5px;
    left: 21px;
    transform: translateX(-50%);
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #0b1327;
    border: 3px solid #3b82f6;
    box-shadow: 0 0 0 5px rgba(37,99,235,0.10), 0 0 12px rgba(37,99,235,0.55);
    z-index: 2;
    transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.jrn-node svg { display: none; }
.jrn-left .jrn-node, .jrn-right .jrn-node { left: 21px; right: auto; }
.jrn-item.in .jrn-node {
    background: #3b82f6;
    transform: translateX(-50%) scale(1.18);
    box-shadow: 0 0 0 6px rgba(37,99,235,0.18), 0 0 22px rgba(59,130,246,0.95);
}

/* Card */
.jrn-card {
    display: block;
    text-align: left;
    max-width: 840px;
    padding: 30px 34px;
    border-radius: 14px;
    border: 1px solid rgba(96, 165, 250, 0.3);
    background-image:
        radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.16), transparent 60%),
        linear-gradient(165deg, #0b1327 0%, #070b16 100%);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.jrn-item.in .jrn-card {
    border-color: rgba(96, 165, 250, 0.55);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4), 0 0 22px rgba(37, 99, 235, 0.2);
}

.jrn-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}
.jrn-phase {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 1.5px;
    color: #60a5fa;
}
.jrn-year {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 1px;
    color: #eef4ff;
    padding: 5px 12px;
    border: 1px solid rgba(96, 165, 250, 0.4);
    border-radius: 20px;
    background: rgba(59, 130, 246, 0.1);
    white-space: nowrap;
    flex-shrink: 0;
}
.jrn-title {
    font-family: var(--font-outfit);
    font-size: 1.42rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: #eef4ff;
    margin: 0 0 6px;
    line-height: 1.2;
}
.jrn-place {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.5px;
    color: #8ea3c9;
    margin-bottom: 18px;
}
.jrn-points {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}
.jrn-points li {
    position: relative;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.9;
    color: #b9ccef;
    padding: 5px 0 5px 20px;
}
.jrn-points li::before {
    content: '▹';
    position: absolute;
    left: 0;
    top: 5px;
    color: #3b82f6;
}
.jrn-milestone {
    font-family: var(--font-outfit);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #6ee7a0;
    padding-top: 16px;
    border-top: 1px solid rgba(96, 165, 250, 0.15);
}
.jrn-ms-arrow { color: #27c93f; margin-right: 3px; }

/* ==========================================================================
   EXPERIENCE log
   ========================================================================== */
.exp-block { margin-top: 64px; }
.exp-kicker {
    display: block;
    font-family: var(--font-outfit);
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 3px;
    color: #2563eb;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.exp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.exp-card {
    border-radius: 12px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    background-image:
        radial-gradient(circle at 20% 0%, rgba(37, 99, 235, 0.14), transparent 60%),
        linear-gradient(165deg, #0b1226 0%, #070b18 100%);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    padding: 18px 18px 20px;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.exp-card:hover {
    transform: translateY(-5px);
    border-color: rgba(96, 165, 250, 0.6);
    box-shadow: 0 18px 40px rgba(0,0,0,0.5), 0 0 22px rgba(37,99,235,0.22);
}
.exp-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(96, 165, 250, 0.14);
}
.exp-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #27c93f;
    box-shadow: 0 0 8px rgba(39, 201, 63, 0.9);
    margin-top: 5px;
    flex-shrink: 0;
}
.exp-role-wrap { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.exp-role {
    font-family: var(--font-outfit);
    font-size: 0.86rem;
    font-weight: 800;
    color: #eef4ff;
    line-height: 1.2;
}
.exp-org {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.5px;
    color: #60a5fa;
}
.exp-dates {
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.5px;
    color: #7f96c4;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
}
.exp-desc {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1.65;
    color: #97acd2;
    margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
    .archive-grid { padding: 100px 30px 60px 30px; }
}
@media (max-width: 900px) {
    .exp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .archive-head { padding-left: 24px; }
    .archive-horizontal-line { width: 160px; margin-left: -24px; }
    .archive-title { font-size: 3.2rem; }
    .archive-grid { padding: 80px 18px 40px; }

    /* Timeline stays single column; tighten spacing on phones */
    .jrn-spine { left: 16px; }
    .jrn-item { padding: 0 0 28px 44px; transform: translateY(24px); }
    .jrn-node,
    .jrn-left .jrn-node,
    .jrn-right .jrn-node { left: 16px; }
    .jrn-card { max-width: none; padding: 16px 16px; }
    .jrn-item.in .jrn-node { transform: translateX(-50%) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .jrn-item { opacity: 1 !important; transform: none !important; }
    .jrn-kicker-dot, .exp-dot { animation: none; }
}

/* ==========================================================================
   Futuristic Cyber-HUD Footer Section
   ========================================================================== */
.footer-system {
    position: relative;
    width: 100%;
    /* Futuristic layered background: gradient overlay + city.png styled to match the stretching size of the first page */
    background: linear-gradient(to bottom, rgba(246, 245, 250, 0.70) 0%, rgba(246, 245, 250, 0.82) 100%), url('/static/images/city.png') no-repeat center bottom;
    background-size: 100% 100%;
    border-top: 1px solid rgba(124, 58, 237, 0.12);
    padding: 170px 0 100px 0;
    overflow: hidden;
    z-index: 5;
    font-family: var(--font-outfit);
}

/* Background text styling */
.footer-bg-text {
    position: absolute;
    top: 10px; /* Positioned higher in the upper area of the footer */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between; /* Evenly spaces letters to touch both left and right edges */
    padding: 0; /* Stretches to the absolute left and right screen edges */
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.footer-bg-text span {
    font-family: var(--font-outfit);
    font-size: 16vw; /* Optimizes letter scale for proportional view width */
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.9;
    
    /* Text Gradient: Bold/Dark at the top, faded/low-visibility at the bottom */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.01) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-container {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 40px;
    z-index: 2;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2.2fr 1.2fr 1.6fr 1.6fr;
    gap: 50px;
}

.footer-column {
    display: flex;
    flex-direction: column;
}

/* Vertical dividers */
.footer-column:not(:first-child) {
    position: relative;
    padding-left: 30px;
}

.footer-column:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 1px;
    background: linear-gradient(to bottom, rgba(124, 58, 237, 0.12) 0%, rgba(124, 58, 237, 0.02) 100%);
}

/* Column titles */
.footer-col-title {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--text-primary);
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.08);
    padding-bottom: 8px;
}

.title-plus {
    color: var(--accent-purple);
    font-weight: 700;
}

/* About column styling */
.footer-system-tag {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.footer-tag-slash {
    color: var(--accent-purple);
}

.footer-tag-plus {
    margin-left: auto;
    color: var(--accent-purple);
    font-weight: 700;
}

.footer-brand {
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    color: var(--text-primary);
    text-transform: uppercase;
}

.text-accent {
    color: var(--accent-purple);
}

.footer-subtitle {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: var(--text-secondary);
    margin-bottom: 18px;
    text-transform: uppercase;
}

.footer-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 25px;
    max-width: 320px;
}

.footer-status-box {
    border: 1px solid rgba(124, 58, 237, 0.12);
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(4px);
    border-radius: 4px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: fit-content;
}

.status-pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #10b981; /* Premium emerald green for status */
    border-radius: 50%;
    box-shadow: 0 0 10px #10b981;
    animation: statusPulse 2s infinite;
}

@keyframes statusPulse {
    0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1.2); opacity: 0.5; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.status-text {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

/* Nav Column links styling */
.footer-nav-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav-link {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.footer-nav-link .arrow {
    color: var(--accent-purple);
    font-weight: bold;
    transition: transform 0.2s ease;
}

.footer-nav-link:hover {
    color: var(--accent-purple);
}

.footer-nav-link:hover .arrow {
    transform: translateX(3px);
}

/* Connect Column styling */
.footer-social-row {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

/* Image icon grid for social links */
.footer-social-icons-grid {
    display: grid;
    grid-template-columns: repeat(4, 58px);
    gap: 10px;
    margin-bottom: 22px;
}

.social-icon-btn {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1.5px solid rgba(200, 195, 215, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    flex-shrink: 0;
    overflow: hidden;
    padding: 6px;
}

.social-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.22s ease, filter 0.22s ease;
}

.social-icon-btn:hover {
    border-color: var(--accent-purple);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.2);
    transform: translateY(-3px);
}

.social-icon-btn:hover .social-icon-img {
    transform: scale(1.08);
    filter: drop-shadow(0 2px 6px rgba(124, 58, 237, 0.25));
}


.social-btn {
    border: 1px solid rgba(124, 58, 237, 0.12);
    background-color: rgba(255, 255, 255, 0.4);
    color: var(--text-secondary);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.social-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 1.5;
    transition: transform 0.2s;
}

.social-btn:hover {
    border-color: var(--accent-purple);
    color: var(--accent-purple);
    background-color: var(--bg-white);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.08);
}

.social-btn:hover i {
    transform: scale(1.1);
}

.btn-start-project {
    border: 1px solid var(--accent-purple);
    background-color: transparent;
    color: var(--text-primary);
    padding: 12px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 18px;
    max-width: 240px;
}

.project-arrow {
    transition: transform 0.2s;
}

.btn-start-project:hover {
    background-color: var(--accent-purple);
    color: white;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.2);
}

.btn-start-project:hover .project-arrow {
    transform: translateX(4px);
}

.footer-email-link {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}

.footer-email-link:hover {
    color: var(--accent-purple);
}

/* Subscribe Column styling */
.subscribe-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.subscribe-box {
    display: flex;
    align-items: center;
    border: 1px solid rgba(124, 58, 237, 0.12);
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 2px 2px 2px 12px;
    max-width: 260px;
    transition: border-color 0.2s;
}

.subscribe-box:focus-within {
    border-color: var(--accent-purple);
}

.subscribe-box .arrow {
    color: var(--accent-purple);
    font-weight: bold;
}

.subscribe-input {
    border: none;
    background: transparent;
    padding: 10px 8px;
    color: var(--text-primary);
    font-family: var(--font-outfit);
    font-size: 0.8rem;
    width: 100%;
    outline: none;
}

.subscribe-submit {
    border: none;
    background-color: var(--accent-purple);
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.subscribe-submit:hover {
    background-color: #6d28d9;
}

.subscribe-submit i {
    width: 16px;
    height: 16px;
}

/* Footer Bottom bar styling */
.footer-bottom {
    margin-top: 60px;
    border-top: 1px solid rgba(124, 58, 237, 0.08);
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bottom-link {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.bottom-link:hover {
    color: var(--accent-purple);
}

.footer-links .divider {
    color: rgba(124, 58, 237, 0.12);
}

/* Responsive Overrides */
@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .footer-column:not(:first-child) {
        padding-left: 0;
    }
    .footer-column:not(:first-child)::before {
        display: none;
    }
}

@media (max-width: 900px) {
    .footer-system {
        background:
            linear-gradient(
                to bottom,
                rgba(246, 245, 250, 0.38) 0%,
                rgba(246, 245, 250, 0.55) 60%,
                rgba(246, 245, 250, 0.72) 100%
            ),
            url('/static/images/city.png') no-repeat center bottom !important;
        background-size: cover !important;
        padding: 120px 0 40px 0;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }
    .footer-column:not(:first-child) {
        padding-left: 0;
    }
    .footer-column:not(:first-child)::before {
        display: none;
    }
}


@media (max-width: 600px) {
    /* ── Footer background: city.png cover, matching hero mobile look ── */
    .footer-system {
        background:
            linear-gradient(
                to bottom,
                rgba(246, 245, 250, 0.30) 0%,
                rgba(246, 245, 250, 0.52) 55%,
                rgba(246, 245, 250, 0.72) 100%
            ),
            url('/static/images/city.png') no-repeat center bottom !important;
        background-size: cover !important;
        padding: 90px 0 24px 0;
    }

    .footer-container {
        padding: 0 16px;
    }

    /* ── 2-column grid: Brand full-width, Nav+Connect side-by-side, Subscribe full-width ── */
    .footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "brand   brand"
            "nav     connect"
            "sub     sub";
        gap: 18px 14px;
    }
    .footer-about    { grid-area: brand; }
    .footer-nav      { grid-area: nav; }
    .footer-connect  { grid-area: connect; }
    .footer-subscribe{ grid-area: sub; }

    /* Remove divider lines between columns */
    .footer-column:not(:first-child) {
        padding-left: 0;
    }
    .footer-column:not(:first-child)::before {
        display: none;
    }

    /* Brand compact */
    .footer-brand        { font-size: 1.5rem; margin-bottom: 5px; }
    .footer-subtitle     { font-size: 0.65rem; margin-bottom: 10px; }
    .footer-desc         { font-size: 0.75rem; margin-bottom: 12px; max-width: 100%; }
    .footer-status-box   { padding: 5px 8px; }
    .status-text         { font-size: 0.58rem; }

    /* Column titles */
    .footer-col-title    { font-size: 0.72rem; margin-bottom: 12px; }

    /* Nav links */
    .footer-nav-list     { gap: 6px; }
    .footer-nav-link     { font-size: 0.68rem; }

    /* Social icons grid: 4 per row */
    .footer-social-icons-grid {
        grid-template-columns: repeat(4, 42px);
        gap: 6px;
        margin-bottom: 14px;
    }
    .social-icon-btn {
        width: 42px;
        height: 42px;
        padding: 4px;
    }

    /* Connect column buttons compact */
    .btn-start-project {
        padding: 8px 10px;
        font-size: 0.66rem;
        max-width: 100%;
        margin-bottom: 8px;
    }
    .footer-email-link {
        font-size: 0.60rem;
        word-break: break-all;
    }

    /* Subscribe */
    .subscribe-desc      { font-size: 0.72rem; margin-bottom: 10px; }
    .subscribe-box       { max-width: 100%; }
    .subscribe-input     { font-size: 0.72rem; }

    /* Footer bottom bar */
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        margin-top: 20px;
        padding-top: 16px;
    }
    .footer-copyright    { font-size: 0.68rem; }
    .bottom-link         { font-size: 0.68rem; }

    /* Big name background text */
    .footer-bg-text {
        font-size: 18vw;
        top: 0;
    }
    .footer-bg-text span {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.04) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* ==========================================================================
   AI CHAT OVERLAY
   ========================================================================== */

.ai-chat-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 100000;
    width: min(420px, 100vw);
    height: 100vh;
    height: 100dvh;
    background: #f0f4ff;
    display: flex;
    flex-direction: column;
    font-family: 'Outfit', -apple-system, sans-serif;
    border-radius: 20px 0 0 20px;
    box-shadow: -8px 0 60px rgba(37,99,235,0.18), -2px 0 20px rgba(0,0,0,0.08);
    overflow: hidden;
    /* Hidden: slid off to the right */
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: opacity 0.45s cubic-bezier(0.16,1,0.3,1),
                transform 0.45s cubic-bezier(0.16,1,0.3,1);
}
.ai-chat-overlay.ai-chat-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}
.ai-chat-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.blob-tl {
    top: -120px; right: -80px;
    width: 420px; height: 380px;
    background: radial-gradient(circle, rgba(200,214,255,0.75) 0%, rgba(200,214,255,0) 70%);
    animation: blobFloat 8s ease-in-out infinite alternate;
}
.blob-br {
    bottom: -100px; left: -80px;
    width: 380px; height: 360px;
    background: radial-gradient(circle, rgba(196,221,255,0.6) 0%, rgba(196,221,255,0) 70%);
    animation: blobFloat 10s ease-in-out infinite alternate-reverse;
}
@keyframes blobFloat {
    0%   { transform: translate(0,0) scale(1); }
    100% { transform: translate(20px,20px) scale(1.08); }
}
.ai-chat-dot-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(37,99,235,0.10) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.7;
}
/* TOP BAR */
.ai-chat-topbar {
    position: relative; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(37,99,235,0.10);
    flex-shrink: 0;
}
.ai-topbar-menu {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; width: 44px; height: 44px;
    background: #ffffff; border: none; border-radius: 12px;
    box-shadow: 0 2px 12px rgba(37,99,235,0.10);
    cursor: pointer; transition: box-shadow 0.2s, transform 0.15s;
}
.ai-topbar-menu:hover { box-shadow: 0 4px 20px rgba(37,99,235,0.18); transform: scale(1.05); }
.ai-topbar-menu span { display: block; width: 18px; height: 2px; background: #1e293b; border-radius: 2px; }
.ai-topbar-title { font-size: 1rem; font-weight: 700; color: #1e293b; letter-spacing: 0.5px; }
.ai-topbar-close {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: rgba(239,68,68,0.08); border: none; border-radius: 12px;
    cursor: pointer; transition: background 0.2s, transform 0.15s;
}
.ai-topbar-close:hover { background: rgba(239,68,68,0.16); transform: scale(1.08); }
.ai-topbar-close svg { width: 18px; height: 18px; color: #ef4444; }

/* HERO */
.ai-chat-hero {
    position: relative; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 36px 20px 24px; text-align: center;
    flex-shrink: 0;
    transition: padding 0.4s ease;
}
.ai-chat-overlay.has-messages .ai-chat-hero {
    padding: 14px 20px 10px;
}

.ai-avatar-ring-wrapper {
    position: relative; width: 110px; height: 110px;
    display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
    transition: width 0.4s ease, height 0.4s ease;
}
.ai-chat-overlay.has-messages .ai-avatar-ring-wrapper { width: 68px; height: 68px; margin-bottom: 8px; }
.ai-avatar-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(37,99,235,0.30); transition: all 0.4s ease; }
.ring-outer { width: 110px; height: 110px; animation: ringPulseOuter 3s ease-in-out infinite alternate; }
.ring-inner { width: 92px; height: 92px; border-color: rgba(37,99,235,0.50); }
.ai-chat-overlay.has-messages .ring-outer { width: 68px; height: 68px; }
.ai-chat-overlay.has-messages .ring-inner { width: 56px; height: 56px; }
@keyframes ringPulseOuter {
    0%   { box-shadow: 0 0 0 0 rgba(37,99,235,0.12); transform: scale(1); }
    100% { box-shadow: 0 0 0 12px rgba(37,99,235,0.0); transform: scale(1.04); }
}
.ai-avatar-img-wrap {
    width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
    background: #ffffff; box-shadow: 0 6px 28px rgba(37,99,235,0.22);
    position: relative; z-index: 2;
    transition: width 0.4s ease, height 0.4s ease;
}
.ai-chat-overlay.has-messages .ai-avatar-img-wrap { width: 52px; height: 52px; }
.ai-avatar-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.ai-avatar-status-dot {
    position: absolute; bottom: 10px; right: 10px;
    width: 16px; height: 16px; background: #2563eb;
    border: 2.5px solid #f0f4ff; border-radius: 50%; z-index: 3;
    animation: statusPing 2s ease-in-out infinite;
    transition: all 0.4s ease;
}
.ai-chat-overlay.has-messages .ai-avatar-status-dot { width: 12px; height: 12px; bottom: 4px; right: 4px; }
@keyframes statusPing {
    0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.5); }
    60%     { box-shadow: 0 0 0 7px rgba(37,99,235,0); }
}
.ai-chat-name { font-size: 1.2rem; font-weight: 700; color: #2563eb; margin-bottom: 8px; transition: font-size 0.3s; letter-spacing: 0.3px; }
.ai-chat-overlay.has-messages .ai-chat-name { font-size: 1rem; }
.ai-chat-divider { width: 42px; height: 3px; background: #2563eb; border-radius: 2px; margin: 0 auto 18px; transition: all 0.3s; }
.ai-chat-overlay.has-messages .ai-chat-divider { width: 24px; margin-bottom: 8px; }
.ai-chat-greeting { font-size: 1.3rem; font-weight: 400; color: #1e293b; line-height: 1.4; transition: font-size 0.3s; letter-spacing: -0.2px; }
.ai-chat-overlay.has-messages .ai-chat-greeting { font-size: 1rem; }
.ai-chat-greeting strong { color: #2563eb; font-weight: 700; }

/* MESSAGES */
.ai-chat-messages {
    position: relative; z-index: 5;
    flex: 1; overflow-y: auto;
    padding: 8px 14px; display: flex; flex-direction: column; gap: 10px;
    scroll-behavior: smooth;
}
.ai-chat-messages::-webkit-scrollbar { width: 4px; }
.ai-chat-messages::-webkit-scrollbar-thumb { background: rgba(37,99,235,0.20); border-radius: 2px; }
.ai-msg { display: flex; align-items: flex-end; gap: 8px; animation: msgSlideUp 0.3s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes msgSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ai-msg.from-ai  { align-self: flex-start; flex-direction: row; max-width: 82%; }
.ai-msg.from-user { align-self: flex-end; flex-direction: row-reverse; max-width: 82%; }
.ai-msg-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 1.5px solid rgba(37,99,235,0.25); background: #fff; }
.ai-msg-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ai-msg-bubble { padding: 12px 16px; border-radius: 18px; font-size: 0.92rem; line-height: 1.55; word-break: break-word; }
.from-ai  .ai-msg-bubble { background: #ffffff; color: #1e293b; border-bottom-left-radius: 4px; box-shadow: 0 2px 14px rgba(37,99,235,0.09); border-left: 3px solid #2563eb; }
.from-user .ai-msg-bubble { background: linear-gradient(135deg,#2563eb,#3b82f6); color: #ffffff; border-bottom-right-radius: 4px; box-shadow: 0 4px 18px rgba(37,99,235,0.30); }
.ai-msg-bubble.error-bubble { background: rgba(239,68,68,0.08); color: #dc2626; border-left-color: #ef4444; font-size: 0.85rem; }

/* TYPING */
.ai-typing-indicator { position: relative; z-index: 5; display: none; align-items: center; gap: 8px; padding: 4px 16px 8px; flex-shrink: 0; }
.ai-typing-indicator.visible { display: flex; }
.ai-typing-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(37,99,235,0.25); flex-shrink: 0; background: #fff; }
.ai-typing-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.ai-typing-dots { display: flex; align-items: center; gap: 5px; background: #ffffff; padding: 10px 14px; border-radius: 18px; border-bottom-left-radius: 4px; box-shadow: 0 2px 14px rgba(37,99,235,0.09); border-left: 3px solid #2563eb; }
.ai-typing-dots span { display: block; width: 7px; height: 7px; background: #2563eb; border-radius: 50%; animation: typingBounce 1.2s ease-in-out infinite; }
.ai-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingBounce {
    0%,60%,100% { transform: translateY(0); opacity: 0.5; }
    30%         { transform: translateY(-6px); opacity: 1; }
}

/* INPUT BAR */
.ai-chat-inputbar {
    position: relative; z-index: 10; padding: 12px 16px 20px;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(37,99,235,0.08); flex-shrink: 0;
}
.ai-input-wrapper {
    display: flex; align-items: center; gap: 10px;
    background: #ffffff; border: 1.5px solid rgba(37,99,235,0.15);
    border-radius: 50px; padding: 10px 10px 10px 18px;
    box-shadow: 0 4px 24px rgba(37,99,235,0.10);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-input-wrapper:focus-within { border-color: rgba(37,99,235,0.45); box-shadow: 0 4px 30px rgba(37,99,235,0.18); }
.ai-input-icon { display: flex; align-items: center; flex-shrink: 0; color: rgba(37,99,235,0.50); }
.ai-input-icon svg { width: 20px; height: 20px; }
.ai-chat-input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Outfit',sans-serif; font-size: 0.95rem; color: #1e293b; resize: none; line-height: 1.5; max-height: 120px; overflow-y: auto; }
.ai-chat-input::placeholder { color: #94a3b8; }
.ai-chat-send-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-width: 40px;
    background: linear-gradient(135deg,#2563eb,#3b82f6);
    border: none; border-radius: 50%; cursor: pointer;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
    transition: transform 0.15s, box-shadow 0.2s;
}
.ai-chat-send-btn:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(37,99,235,0.50); }
.ai-chat-send-btn:active { transform: scale(0.95); }
.ai-chat-send-btn:disabled { background: #94a3b8; box-shadow: none; cursor: not-allowed; transform: none; }
.ai-chat-send-btn svg { width: 18px; height: 18px; color: #ffffff; }
/* AI chat bubble markdown styles */
.ai-inline-code { background: rgba(37,99,235,0.10); padding: 1px 5px; border-radius: 4px; font-size: 0.86em; font-family: 'Share Tech Mono', monospace; }
.ai-md-h2 { font-size: 1rem; font-weight: 700; margin: 6px 0 2px; color: #1e293b; }
.ai-md-h3 { font-size: 0.92rem; font-weight: 700; margin: 4px 0 2px; color: #1e293b; }
.ai-md-li { margin-left: 14px; list-style: disc; display: list-item; }
.from-user .ai-inline-code { background: rgba(255,255,255,0.20); color: #fff; }

/* ==========================================================================
   CHIPSA-STYLE 3D PARALLAX OBJECTS (rope + ice) — CONTACT SECTION
   ========================================================================== */

.parallax-obj {
    position: absolute;
    pointer-events: none;
    will-change: transform;
    z-index: 2;
    opacity: 0; /* GSAP animates opacity on scroll into view */
}

/* Rope: bottom-LEFT corner, rotated so it runs toward top-right (diagonal) */
#parallax-rope {
    bottom: -4%;
    left: -5%;
    width: clamp(260px, 34vw, 500px);
    transform-origin: center center;
}
#parallax-rope img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0px 28px 56px rgba(0,0,0,0.50))
            drop-shadow(0px 10px 24px rgba(180,140,60,0.35));
    transform: rotate(-32deg);
}

/* Ice: TOP-RIGHT corner, close/front layer */
#parallax-ice {
    top: 4%;
    right: 3%;
    width: clamp(180px, 22vw, 320px);
    transform-origin: center center;
}
#parallax-ice img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0px 20px 44px rgba(37,99,235,0.50))
            drop-shadow(0px 6px 18px rgba(100,180,255,0.40));
}

/* Mobile */
@media (max-width: 768px) {
    #parallax-rope {
        width: clamp(150px, 40vw, 260px);
        bottom: -2%;
        left: -8%;
    }
    #parallax-ice {
        width: clamp(100px, 28vw, 180px);
        top: 4%;
        right: 2%;
    }
}

/* =====================================================
   SCROLL PROGRESS ORB
   ===================================================== */

@keyframes orbSpawn {
    0%   { transform: scale(0.05); opacity: 0; }
    60%  { transform: scale(1.12); opacity: 1; }
    80%  { transform: scale(0.95); }
    100% { transform: scale(1);    opacity: 1; }
}
@keyframes orbFloat {
    0%,100% { bottom: 24px; }
    50%     { bottom: 30px; }
}

.scroll-orb {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 80px;
    height: 80px;
    z-index: 99999;
    cursor: pointer;
    filter: none !important;
    isolation: isolate;
    animation: orbFloat 3s ease-in-out infinite;
}

/* Ball image - centred, smaller than container */
.orb-img {
    position: absolute;
    width: 62px;
    height: 62px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    object-fit: cover;
    display: block;
    z-index: 1;
    filter: none !important;
    pointer-events: none;
}

/* SVG ring ON TOP of ball image */
.scroll-orb-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

/* Faint background track */
.orb-track {
    fill: none;
    stroke: rgba(255,255,255,0.10);
    stroke-width: 5;
}

/* Progress arc fills as user scrolls */
.orb-progress {
    fill: none;
    stroke: #6b21a8;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 226.19;
    stroke-dashoffset: 226.19;
    transition: stroke-dashoffset 0.3s ease;
}

/* Spawn animation */
.scroll-orb.orb-spawning {
    animation: orbSpawn 0.7s cubic-bezier(0.16,1,0.3,1) forwards,
               orbFloat 3s ease-in-out 0.7s infinite;
}