:root {
            --bg-color: #f8fafc;
            --text-color: #0f172a;
            --card-bg: #ffffff;
            --border-color: #e2e8f0;
            --accent-color: #3b82f6;
            --muted-text: #64748b;
            --neon-glow-cyan: none;
            --neon-glow-purple: none;
            --btn-bg: #3b82f6;
            --btn-hover-bg: #2563eb;
            --btn-text: #ffffff;
        }


        body { 
            font-family: 'Inter', sans-serif; 
            background-color: var(--bg-color); 
            color: var(--text-color);
            transition: background-color 0.5s ease, color 0.5s ease;
            overflow-x: clip;
        }
        
        h1, h2, h3, .font-display {
            font-family: 'Space Grotesk', sans-serif;
        }

        .theme-bg { background-color: var(--bg-color); }
        .theme-card { background-color: var(--card-bg); border: 1px solid var(--border-color); }
        .theme-text { color: var(--text-color); }
        .theme-muted { color: var(--muted-text); }
        .theme-border { border-color: var(--border-color); }

        /* Light mode fallbacks for neon text classes */
        .neon-text-cyan { color: var(--accent-color); font-weight: bold; }
        .neon-text-purple { color: #9333ea; font-weight: bold; } /* purple-600 */

        /* Generic Button Styling */
        .primary-btn {
            background: var(--btn-bg);
            color: var(--btn-text);
            position: relative;
            z-index: 1;
            transition: all 0.3s ease;
        }
        .primary-btn:hover {
            background-color: var(--btn-hover-bg);
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .glass-header {
            background: rgba(var(--bg-color-rgb), 0.8);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        /* Compute RGB for glassmorphism based on theme */
        :root { --bg-color-rgb: 248, 250, 252; }

        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-right {
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-scale {
            opacity: 0;
            transform: scale(0.85);
            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* --- Advanced Multi-Directional 3D Scroll Reveals --- */
        .perspective-container {
            perspective: 1200px;
            perspective-origin: center center;
        }

        .reveal-3d-left {
            opacity: 0;
            transform: perspective(1000px) translateX(-100px) rotateY(35deg) scale(0.9);
            transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform, opacity;
        }
        .reveal-3d-right {
            opacity: 0;
            transform: perspective(1000px) translateX(100px) rotateY(-35deg) scale(0.9);
            transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform, opacity;
        }
        .reveal-3d-flip {
            opacity: 0;
            transform: perspective(1000px) rotateX(-65deg) translateY(60px) scale(0.85);
            transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform, opacity;
        }
        .reveal-3d-rotate {
            opacity: 0;
            transform: perspective(1000px) rotate3d(1, 1, 0, 45deg) translateY(80px) scale(0.8);
            transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform, opacity;
        }
        .reveal-3d-zoom {
            opacity: 0;
            transform: perspective(1000px) translateZ(-400px) translateY(40px);
            transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
            will-change: transform, opacity;
        }

        /* --- 3D Spatial Convergence Animations (Cards fly from everywhere) --- */
        .converge-top-left {
            opacity: 0;
            transform: perspective(1200px) translate3d(-350px, -250px, 400px) rotate3d(1, 1, 0, 70deg) scale(0.4);
            will-change: transform, opacity;
        }
        .converge-top-right {
            opacity: 0;
            transform: perspective(1200px) translate3d(350px, -250px, 400px) rotate3d(-1, 1, 0, 70deg) scale(0.4);
            will-change: transform, opacity;
        }
        .converge-far-left {
            opacity: 0;
            transform: perspective(1200px) translate3d(-500px, -50px, -300px) rotateY(-80deg) scale(0.3);
            will-change: transform, opacity;
        }
        .converge-far-right {
            opacity: 0;
            transform: perspective(1200px) translate3d(500px, -50px, -300px) rotateY(80deg) scale(0.3);
            will-change: transform, opacity;
        }
        .converge-bottom-left {
            opacity: 0;
            transform: perspective(1200px) translate3d(-400px, 300px, 200px) rotateX(-70deg) scale(0.4);
            will-change: transform, opacity;
        }
        .converge-bottom-mid-left {
            opacity: 0;
            transform: perspective(1200px) translate3d(-150px, 400px, -500px) rotate3d(1, -1, 1, 60deg) scale(0.2);
            will-change: transform, opacity;
        }
        .converge-bottom-mid-right {
            opacity: 0;
            transform: perspective(1200px) translate3d(150px, 400px, -500px) rotate3d(-1, 1, -1, 60deg) scale(0.2);
            will-change: transform, opacity;
        }
        .converge-bottom-right {
            opacity: 0;
            transform: perspective(1200px) translate3d(400px, 300px, 200px) rotateX(70deg) scale(0.4);
            will-change: transform, opacity;
        }

        /* --- Scroll-Driven Progress (State 1 to 10 Down, State 10 to 1 Up) --- */
        .reveal.active,
        .reveal-left.active,
        .reveal-right.active,
        .reveal-scale.active,
        .reveal-3d-left.active,
        .reveal-3d-right.active,
        .reveal-3d-flip.active,
        .reveal-3d-rotate.active,
        .reveal-3d-zoom.active,
        .converge-top-left.active,
        .converge-top-right.active,
        .converge-far-left.active,
        .converge-far-right.active,
        .converge-bottom-left.active,
        .converge-bottom-mid-left.active,
        .converge-bottom-mid-right.active,
        .converge-bottom-right.active {
            opacity: 1 !important;
        }

        .reveal-3d-left.active {
            transform: perspective(1000px) translateX(calc(-100px * (1 - var(--scroll-p, 1)))) rotateY(calc(35deg * (1 - var(--scroll-p, 1)))) scale(calc(0.9 + 0.1 * var(--scroll-p, 1))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }
        .reveal-3d-right.active {
            transform: perspective(1000px) translateX(calc(100px * (1 - var(--scroll-p, 1)))) rotateY(calc(-35deg * (1 - var(--scroll-p, 1)))) scale(calc(0.9 + 0.1 * var(--scroll-p, 1))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }
        .reveal-3d-flip.active {
            transform: perspective(1000px) rotateX(calc(-65deg * (1 - var(--scroll-p, 1)))) translateY(calc(60px * (1 - var(--scroll-p, 1)))) scale(calc(0.85 + 0.15 * var(--scroll-p, 1))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }
        .reveal-3d-rotate.active {
            transform: perspective(1000px) rotate3d(1, 1, 0, calc(45deg * (1 - var(--scroll-p, 1)))) translateY(calc(80px * (1 - var(--scroll-p, 1)))) scale(calc(0.8 + 0.2 * var(--scroll-p, 1))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }
        .reveal-3d-zoom.active {
            transform: perspective(1000px) translateZ(calc(-400px * (1 - var(--scroll-p, 1)))) translateY(calc(40px * (1 - var(--scroll-p, 1)))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }

        .converge-top-left.active {
            transform: perspective(1200px) translate3d(calc(-350px * (1 - var(--scroll-p, 1))), calc(-250px * (1 - var(--scroll-p, 1))), calc(400px * (1 - var(--scroll-p, 1)))) rotate3d(1, 1, 0, calc(70deg * (1 - var(--scroll-p, 1)))) scale(calc(0.4 + 0.6 * var(--scroll-p, 1))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }
        .converge-top-right.active {
            transform: perspective(1200px) translate3d(calc(350px * (1 - var(--scroll-p, 1))), calc(-250px * (1 - var(--scroll-p, 1))), calc(400px * (1 - var(--scroll-p, 1)))) rotate3d(-1, 1, 0, calc(70deg * (1 - var(--scroll-p, 1)))) scale(calc(0.4 + 0.6 * var(--scroll-p, 1))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }
        .converge-far-left.active {
            transform: perspective(1200px) translate3d(calc(-500px * (1 - var(--scroll-p, 1))), calc(-50px * (1 - var(--scroll-p, 1))), calc(-300px * (1 - var(--scroll-p, 1)))) rotateY(calc(-80deg * (1 - var(--scroll-p, 1)))) scale(calc(0.3 + 0.7 * var(--scroll-p, 1))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }
        .converge-far-right.active {
            transform: perspective(1200px) translate3d(calc(500px * (1 - var(--scroll-p, 1))), calc(-50px * (1 - var(--scroll-p, 1))), calc(-300px * (1 - var(--scroll-p, 1)))) rotateY(calc(80deg * (1 - var(--scroll-p, 1)))) scale(calc(0.3 + 0.7 * var(--scroll-p, 1))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }
        .converge-bottom-left.active {
            transform: perspective(1200px) translate3d(calc(-400px * (1 - var(--scroll-p, 1))), calc(300px * (1 - var(--scroll-p, 1))), calc(200px * (1 - var(--scroll-p, 1)))) rotateX(calc(-70deg * (1 - var(--scroll-p, 1)))) scale(calc(0.4 + 0.6 * var(--scroll-p, 1))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }
        .converge-bottom-mid-left.active {
            transform: perspective(1200px) translate3d(calc(-150px * (1 - var(--scroll-p, 1))), calc(400px * (1 - var(--scroll-p, 1))), calc(-500px * (1 - var(--scroll-p, 1)))) rotate3d(1, -1, 1, calc(60deg * (1 - var(--scroll-p, 1)))) scale(calc(0.2 + 0.8 * var(--scroll-p, 1))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }
        .converge-bottom-mid-right.active {
            transform: perspective(1200px) translate3d(calc(150px * (1 - var(--scroll-p, 1))), calc(400px * (1 - var(--scroll-p, 1))), calc(-500px * (1 - var(--scroll-p, 1)))) rotate3d(-1, 1, -1, calc(60deg * (1 - var(--scroll-p, 1)))) scale(calc(0.2 + 0.8 * var(--scroll-p, 1))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }
        .converge-bottom-right.active {
            transform: perspective(1200px) translate3d(calc(400px * (1 - var(--scroll-p, 1))), calc(300px * (1 - var(--scroll-p, 1))), calc(200px * (1 - var(--scroll-p, 1)))) rotateX(calc(70deg * (1 - var(--scroll-p, 1)))) scale(calc(0.4 + 0.6 * var(--scroll-p, 1))) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }

        /* --- BRUTALIST CYBER MODE CARDS --- */
        .brutal-card {
            position: relative;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .brutal-card::before,
        .brutal-card::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            border: 2px solid transparent;
            transition: all 0.3s ease-in-out;
            pointer-events: none;
        }

        .brutal-card::before {
            top: -1px;
            left: -1px;
            border-top-color: currentColor;
            border-left-color: currentColor;
        }

        .brutal-card::after {
            bottom: -1px;
            right: -1px;
            border-bottom-color: currentColor;
            border-right-color: currentColor;
        }

        .brutal-card:hover::before,
        .brutal-card:hover::after {
            width: 100%;
            height: 100%;
        }

        .reveal.active, 
        .reveal-left.active, 
        .reveal-right.active, 
        .reveal-scale.active {
            transform: translate(0) scale(1) !important;
            transition: transform 0.1s linear, opacity 0.15s linear;
        }

        /* Fallback: Auto reveal if JS takes time or is delayed */
        @media (prefers-reduced-motion: reduce) {
            .reveal, .reveal-left, .reveal-right, .reveal-scale,
            .reveal-3d-left, .reveal-3d-right, .reveal-3d-flip, .reveal-3d-rotate, .reveal-3d-zoom,
            .converge-top-left, .converge-top-right, .converge-far-left, .converge-far-right,
            .converge-bottom-left, .converge-bottom-mid-left, .converge-bottom-mid-right, .converge-bottom-right {
                opacity: 1 !important;
                transform: none !important;
            }
        }

        .reveal-delay-1 { transition-delay: 0.12s; }
        .reveal-delay-2 { transition-delay: 0.24s; }
        .reveal-delay-3 { transition-delay: 0.36s; }
        .reveal-delay-4 { transition-delay: 0.48s; }

        /* --- 3D Card Hover Tilt Effects --- */
        .tilt-card {
            transform-style: preserve-3d;
            transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
            will-change: transform;
        }
        .tilt-card-content {
            transform: translateZ(30px);
            transition: transform 0.2s ease-out;
        }
        .tilt-card-badge {
            transform: translateZ(50px);
            transition: transform 0.2s ease-out;
        }
        
        /* Animated Glowing Borders */
        .glow-card-animated {
            position: relative;
            z-index: 1;
            overflow: hidden;
        }
        .glow-card-animated::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, transparent 0%, #00f0ff 25%, transparent 50%, #b026ff 75%, transparent 100%);
            animation: rotateGlow 6s linear infinite;
            z-index: -2;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .glow-card-animated:hover::before {
            opacity: 1;
        }
        .glow-card-animated::after {
            content: '';
            position: absolute;
            inset: 2px;
            background: inherit;
            border-radius: inherit;
            z-index: -1;
        }
        @keyframes rotateGlow {
            100% { transform: rotate(360deg); }
        }

        .page-content { display: none; }
        .page-content.active { display: block; animation: fadeIn 0.5s ease-in-out; }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Light mode specific background pattern */
        .light-pattern { display: block; }

        /* Chatbot Animations */
        .typing-dot {
            animation: typing 1.4s infinite ease-in-out both;
        }
        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
        @keyframes typing {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }

/* ==========================================================================
   SKEWED ONE PAGE SCROLL (Our Core Capabilities Redesign)
   ========================================================================== */
.skw-track {
    position: relative;
    width: 100%;
}

.skw-viewport {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.skw-pages {
    overflow: hidden;
    position: relative;
    height: 100vh;
    width: 100%;
}

.skw-page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.skw-page.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 10;
}

.skw-page.inactive {
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.skw-page__half {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100vh;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
}

.skw-page__half--left {
    left: 0;
    transform: translate3d(-32.4vh, 100%, 0);
}

.skw-page__half--right {
    left: 50%;
    transform: translate3d(32.4vh, -100%, 0);
}

.skw-page.active .skw-page__half--left,
.skw-page.active .skw-page__half--right {
    transform: translate3d(0, 0, 0);
}

.skw-page.passed .skw-page__half--left {
    transform: translate3d(32.4vh, -100%, 0);
}

.skw-page.passed .skw-page__half--right {
    transform: translate3d(-32.4vh, 100%, 0);
}

.skw-page__skewed {
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 140%;
    height: 100%;
    transform: skewX(-18deg);
    background: #090d16;
}

.skw-page__half--left .skw-page__skewed {
    left: -40%;
}

.skw-page__half--right .skw-page__skewed {
    right: -40%;
}

.skw-page__content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 12%;
    color: #fff;
    transform: skewX(18deg);
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.8s ease;
    background-size: cover;
    background-position: center center;
}

.skw-page__half--left .skw-page__content {
    padding-left: 18%;
    padding-right: 12%;
    transform-origin: 100% 0;
}

.skw-page__half--right .skw-page__content {
    padding-left: 12%;
    padding-right: 18%;
    transform-origin: 0 100%;
}

.skw-page.passed .skw-page__content {
    opacity: 0.5;
    transform: skewX(18deg) scale(0.95);
}

/* ==========================================================================
   TECH EXPLORE CARDS — Pill → Card Expansion
   ========================================================================== */

/* Default state: compact pill */
.tech-expand-card {
    border-radius: 9999px;
    height: 48px;
    padding: 10px 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition:
        border-radius 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        padding 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s ease;
    will-change: border-radius, height;
}

/* Expanded state: full card */
.tech-expand-card.card-expanded {
    border-radius: 1.25rem;   /* rounded-2xl */
    height: auto;
    min-height: 220px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    overflow: visible;
}

/* Card body: hidden in pill state, revealed in expanded state */
.card-expand-body {
    opacity: 0;
    transition: opacity 0.35s ease 0.2s;
}

.card-expand-body.body-visible {
    opacity: 1;
}

/* Mobile responsive fallback for skewed layout */
@media (max-width: 768px) {
    .skw-page__skewed {
        transform: none !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
    .skw-page__content {
        transform: none !important;
        padding: 2rem 1.5rem !important;
    }
    .skw-page__half {
        width: 100% !important;
        height: 50vh !important;
    }
    .skw-page__half--left {
        left: 0 !important;
        top: 0 !important;
        transform: translate3d(-100%, 0, 0);
    }
    .skw-page__half--right {
        left: 0 !important;
        top: 50vh !important;
        transform: translate3d(100%, 0, 0);
    }
    .skw-page.active .skw-page__half--left,
    .skw-page.active .skw-page__half--right {
        transform: translate3d(0, 0, 0) !important;
    }
}