body {
            font-family: 'Poppins', sans-serif;
            background-color: transparent;
            /* Made transparent for particles */
            color: #E5E7EB;
            /* Light text */
        }

        .glass-effect {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
        }

        .glass-effect::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
            transform: skewX(-25deg);
            transition: 0.75s;
            pointer-events: none;
        }

        .glass-effect:hover::before {
            left: 150%;
        }


        .hero-gradient-bg {
            background: #111827;
            position: relative;
            overflow: hidden;
        }

        .hero-aura {
            position: absolute;
            width: 15rem;
            height: 15rem;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
            filter: blur(80px);
            border-radius: 50%;
            z-index: 1;
            pointer-events: none;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            animation: auraPulse 10s ease-in-out infinite alternate;
        }

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

            100% {
                transform: translate(-40%, -60%) scale(1.5);
                opacity: 0.8;
            }
        }



        /* Floating Geometric Shapes */
        .floating-shape {
            position: absolute;
            opacity: 0.1;
            pointer-events: none;
        }

        .shape-circle {
            width: 100px;
            height: 100px;
            border: 2px solid #3B82F6;
            border-radius: 50%;
            top: 20%;
            left: 10%;
            animation: float1 20s ease-in-out infinite;
        }

        .shape-triangle {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 86px solid #3B82F6;
            top: 60%;
            right: 15%;
            animation: float2 18s ease-in-out infinite;
        }

        .shape-square {
            width: 80px;
            height: 80px;
            border: 2px solid #60A5FA;
            transform: rotate(45deg);
            bottom: 20%;
            left: 20%;
            animation: float3 22s ease-in-out infinite;
        }

        @keyframes float1 {

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

            50% {
                transform: translate(30px, -30px) rotate(180deg);
            }
        }

        @keyframes float2 {

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

            50% {
                transform: translate(-40px, 40px) rotate(-180deg);
            }
        }

        @keyframes float3 {

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

            50% {
                transform: translate(20px, -40px) rotate(225deg);
            }
        }

        /* Hide shapes on mobile */
        @media (max-width: 768px) {
            .floating-shape {
                display: none;
            }
        }

        /* Bounce Slow Animation */
        .animate-bounce-slow {
            animation: bounce-slow 3s infinite;
        }

        @keyframes bounce-slow {

            0%,
            100% {
                transform: translateY(-5%);
                animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
            }

            50% {
                transform: translateY(0);
                animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
            }
        }

        /* Tech Badges */

        .tech-badge {
            position: absolute;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 20;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }

        .tech-badge:hover {
            transform: scale(1.1) translateY(-5px);
            border-color: rgba(59, 130, 246, 0.5);
            background: rgba(255, 255, 255, 0.08);
        }

        .badge-1 {
            top: 25%;
            left: 15%;
        }

        .badge-2 {
            top: 35%;
            right: 15%;
        }

        .badge-3 {
            bottom: 30%;
            left: 20%;
        }

        .badge-4 {
            bottom: 25%;
            right: 20%;
        }


        @media (max-width: 768px) {
            .tech-badge {
                display: none;
            }
        }

        /* Gradient Animation for Title */
        .animate-gradient {
            background-size: 200% auto;
            animation: gradientShift 4s linear infinite;
        }

        @keyframes gradientShift {
            0% {
                background-position: 0% center;
            }

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

        /* Glowing Text Effect */
        .glow-text {
            text-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
        }

        /* Advanced Liquid Tech Text Animation */
        .liquid-tech-text {
            background: linear-gradient(to right,
                    #60A5FA,
                    #A855F7,
                    #EC4899,
                    #3B82F6,
                    #60A5FA);
            background-size: 300% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: liquidFlow 8s linear infinite;
            position: relative;
            z-index: 10;
        }

        /* Stat Card Live Border Trace (V3) */
        .stat-border-trace {
            position: absolute;
            inset: 0;
            border: 1px solid transparent;
            border-radius: inherit;
            background: linear-gradient(#111827, #111827) padding-box,
                conic-gradient(from var(--border-angle),
                    transparent 0%,
                    #3B82F6 10%,
                    transparent 20%) border-box;
            /* animation: borderRotate 4s linear infinite; Stopped rotation */
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            -webkit-mask-composite: destination-out;
            pointer-events: none;
            z-index: 1;
        }

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

        @keyframes borderRotate {
            from {
                --border-angle: 0deg;
            }

            to {
                --border-angle: 360deg;
            }
        }

        .stat-corner-dot {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #3B82F6;
            border-radius: 50%;
            z-index: 2;
            opacity: 0.6;
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
        }

        .stat-corner-dot.top-left {
            top: 2px;
            left: 2px;
        }

        .stat-corner-dot.bottom-right {
            bottom: 2px;
            right: 2px;
        }

        .glass-shimmer {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg,
                    transparent 0%,
                    rgba(59, 130, 246, 0.05) 40%,
                    rgba(59, 130, 246, 0.3) 48%,
                    rgba(168, 85, 247, 0.3) 52%,
                    rgba(59, 130, 246, 0.05) 60%,
                    transparent 100%);
            transform: translateX(-100%) skewX(-15deg);
            transition: transform 0.8s ease;
            filter: blur(2px);
            pointer-events: none;
            z-index: 2;
        }

        .group/stat:hover .glass-shimmer {
            transform: translateX(100%) skewX(-15deg);
        }

        /* V16: Hyper-Modern Plasma HUD Elements */
        .plasma-progress {
            width: 100%;
            height: 4px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            margin-top: 12px;
            position: relative;
            overflow: hidden;
            z-index: 10;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .plasma-flow {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg,
                    var(--plasma-color, #3B82F6) 0%,
                    #60A5FA 50%,
                    var(--plasma-color, #3B82F6) 100%);
            background-size: 200% 100%;
            animation: plasmaStream 2s linear infinite;
            filter: blur(1px);
            box-shadow: 0 0 15px var(--plasma-color, #3B82F6);
        }

        @keyframes plasmaStream {
            0% {
                background-position: 100% 0%;
            }

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

        .holographic-depth {
            position: absolute;
            inset: 0;
            background:
                repeating-linear-gradient(0deg,
                    transparent 0,
                    transparent 1px,
                    rgba(59, 130, 246, 0.03) 1px,
                    rgba(59, 130, 246, 0.03) 2px),
                radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                    rgba(59, 130, 246, 0.1) 0%,
                    transparent 50%);
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
            z-index: 2;
        }

        .group/stat:hover .holographic-depth {
            opacity: 1;
        }

        .data-fragments {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 3;
            overflow: hidden;
        }

        .data-fragment {
            position: absolute;
            width: 2px;
            height: 2px;
            background: var(--plasma-color, #3B82F6);
            opacity: 0;
            border-radius: 50%;
        }

        .group/stat:hover .data-fragment {
            animation: fragmentRise 2s infinite;
        }

        @keyframes fragmentRise {
            0% {
                transform: translateY(100%) scale(0);
                opacity: 0;
            }

            20% {
                opacity: 0.8;
            }

            100% {
                transform: translateY(-100%) scale(1.5);
                opacity: 0;
            }
        }

        /* V13 Legacy Scanners & Telemetry integrated for V16 */
        .pulse-scanner {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom,
                    transparent 0%,
                    rgba(59, 130, 246, 0.03) 45%,
                    rgba(59, 130, 246, 0.15) 50%,
                    rgba(59, 130, 246, 0.03) 55%,
                    transparent 100%);
            transform: translateY(-100%);
            animation: scannerSweep 4s ease-in-out infinite;
            pointer-events: none;
            z-index: 5;
        }

        @keyframes scannerSweep {
            0% {
                transform: translateY(-100%);
            }

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

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

        .telemetry-label {
            position: absolute;
            font-family: 'JetBrains Mono', monospace;
            font-size: 7px;
            color: rgba(255, 255, 255, 0.3);
            text-transform: uppercase;
            letter-spacing: 1px;
            pointer-events: none;
            z-index: 15;
            animation: telemetryFlicker 3s infinite;
        }

        @keyframes telemetryFlicker {

            0%,
            100% {
                opacity: 0.3;
            }

            95% {
                opacity: 0.7;
            }

            97% {
                opacity: 0.2;
            }
        }

        .stat-micro-grid {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px);
            background-size: 15px 15px;
            opacity: 0.2;
            z-index: 1;
        }

        /* "Cyber-Link" Neural Circuitry & HUD Decals (V4) */
        .circuit-path {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: circuitPulse 8s linear infinite;
        }

        @keyframes circuitPulse {
            0% {
                stroke-dashoffset: 1000;
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            50% {
                stroke-dashoffset: 0;
                opacity: 1;
            }

            90% {
                opacity: 1;
            }

            100% {
                stroke-dashoffset: -1000;
                opacity: 0;
            }
        }

        @keyframes float-slow {

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

            33% {
                transform: translateY(-10px) translateX(5px);
            }

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

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

        .animate-blink {
            animation: blink 1.5s step-end infinite;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        .scan-line-wipe {
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom,
                    transparent 0%,
                    rgba(59, 130, 246, 0) 45%,
                    rgba(59, 130, 246, 0.4) 50%,
                    rgba(59, 130, 246, 0) 55%,
                    transparent 100%);
            z-index: 20;
            pointer-events: none;
            animation: scanWipe 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        }

        @keyframes scanWipe {
            0% {
                top: -100%;
            }

            15% {
                top: 100%;
            }

            100% {
                top: 100%;
            }
        }

        .cyber-image-container::after {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(0deg,
                    transparent 0%,
                    rgba(59, 130, 246, 0.03) 1px,
                    transparent 2px);
            pointer-events: none;
            z-index: 15;
            opacity: 0.5;
        }

        /* "Hyper-Visible HUD" (V5) */
        .blueprint-grid {
            background-image:
                linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
            background-size: 30px 30px;
            background-position: center center;
            /* transform: perspective(1000px) rotateX(15deg) scale(1.2); Removed */
            /* animation: gridScroll 10s linear infinite; Stopped movement as per user request */
        }

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

            100% {
                background-position: 30px 30px;
            }
        }

        .animate-spin-slow {
            animation: spin 8s linear infinite;
        }

        .animate-reverse-spin {
            animation: reverse-spin 12s linear infinite;
        }

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

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

        @keyframes reverse-spin {
            from {
                transform: rotate(360deg);
            }

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

        @keyframes loading-bar {
            0% {
                width: 0%;
                opacity: 0.5;
            }

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

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

        .animate-loading-bar {
            animation: loading-bar 3s ease-in-out infinite;
        }

        .animate-loading-bar-delayed {
            animation: loading-bar 3s ease-in-out infinite;
            animation-delay: 1.5s;
        }

        /* Amplify Border Trace Visibility */
        .stat-border-trace {
            position: absolute;
            inset: 0;
            border: 2px solid transparent;
            /* Made thicker */
            border-radius: inherit;
            background: linear-gradient(#111827, #111827) padding-box,
                conic-gradient(from var(--border-angle),
                    transparent 0%,
                    #3B82F6 15%,
                    /* Slightly larger beam */
                    transparent 30%) border-box;
            /* animation: borderRotate 4s linear infinite; Removed to stop rotation */
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            -webkit-mask-composite: destination-out;
            pointer-events: none;
            z-index: 1;
            box-shadow: inset 0 0 10px rgba(59, 130, 246, 0.2);
        }

        @keyframes liquidFlow {
            0% {
                background-position: 0% 50%;
                filter: brightness(1);
            }

            50% {
                background-position: 100% 50%;
                filter: brightness(1.2) drop-shadow(0 0 15px rgba(59, 130, 246, 0.4));
            }

            100% {
                background-position: 200% 50%;
                filter: brightness(1);
            }
        }


        /* Main Card Orbit Animation */
        .orbit-animation-ring {
            animation: orbitSpin 25s linear infinite;
        }

        .orbit-item {
            position: absolute;
            background: rgba(17, 24, 39, 0.9);
            border: 1px solid rgba(59, 130, 246, 0.4);
            border-radius: 50%;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.25);
            backdrop-filter: blur(6px);
            /* Default center positioning before transform */
            left: 50%;
            top: 50%;
            margin-left: -20px;
            margin-top: -20px;
            width: 40px;
            height: 40px;
            transition: all 0.3s ease;

            /* Random Flash Glow Animation */
            animation: flashGlow 4s ease-in-out infinite;
        }

        /* Advanced Hover Effect: Pause orbit and scale item */
        .profile-orbit-container:hover .orbit-animation-ring,
        .profile-orbit-container:hover .orbit-item img {
            animation-play-state: paused;
        }

        .orbit-item:hover {
            transform: scale(1.2) !important;
            /* Override transform from positioning temporarily not easy without JS or layout change */
            /* Actually, scaling transform on an element that is already transformed for position is tricky in pure CSS without appending. */
            /* Better to scale the inner image or use a wrapper. Let's scale the border/box shadow or brightness. */
            border-color: #60A5FA;
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
            z-index: 10;
        }

        /* Animate the inner image to keep it upright + Pulse */
        .orbit-item img {
            animation: orbitCounterSpin 25s linear infinite, floatPulse 3s ease-in-out infinite;
        }

        /* Positioning items in a STRICT CIRCLE (Radius reduced to fit card) 
           Mobile Radius: 85px (was 95px)
           8 items = 360 / 8 = 45 degrees step */

        .item-1 {
            transform: rotate(0deg) translate(85px) rotate(0deg);
            animation-delay: 0s;
        }

        .item-2 {
            transform: rotate(45deg) translate(85px) rotate(-45deg);
            animation-delay: 1.5s;
        }

        .item-3 {
            transform: rotate(90deg) translate(85px) rotate(-90deg);
            animation-delay: 0.5s;
        }

        .item-4 {
            transform: rotate(135deg) translate(85px) rotate(-135deg);
            animation-delay: 2.5s;
        }

        .item-5 {
            transform: rotate(180deg) translate(85px) rotate(-180deg);
            animation-delay: 1s;
        }

        .item-6 {
            transform: rotate(225deg) translate(85px) rotate(-225deg);
            animation-delay: 3s;
        }

        .item-7 {
            transform: rotate(270deg) translate(85px) rotate(-270deg);
            animation-delay: 0.2s;
        }

        .item-8 {
            transform: rotate(315deg) translate(85px) rotate(-315deg);
            animation-delay: 2s;
        }

        @media (min-width: 768px) {
            .orbit-item {
                width: 48px;
                height: 48px;
                margin-left: -24px;
                margin-top: -24px;
            }

            /* Larger radius for desktop but constrained: 110px (was 130px) */
            .item-1 {
                transform: rotate(0deg) translate(110px) rotate(0deg);
            }

            .item-2 {
                transform: rotate(45deg) translate(110px) rotate(-45deg);
            }

            .item-3 {
                transform: rotate(90deg) translate(110px) rotate(-90deg);
            }

            .item-4 {
                transform: rotate(135deg) translate(110px) rotate(-135deg);
            }

            .item-5 {
                transform: rotate(180deg) translate(110px) rotate(-180deg);
            }

            .item-6 {
                transform: rotate(225deg) translate(110px) rotate(-225deg);
            }

            .item-7 {
                transform: rotate(270deg) translate(110px) rotate(-270deg);
            }

            .item-8 {
                transform: rotate(315deg) translate(110px) rotate(-315deg);
            }
        }

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

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

        /* Flash Glow Keyframes for Twinkling Effect */
        @keyframes flashGlow {

            0%,
            100% {
                background: rgba(17, 24, 39, 0.9);
                border-color: rgba(59, 130, 246, 0.4);
                box-shadow: 0 0 15px rgba(59, 130, 246, 0.25);
                z-index: 1;
            }

            10%,
            20% {
                /* Brief bright flash */
                background: rgba(59, 130, 246, 0.3);
                border-color: #60A5FA;
                box-shadow: 0 0 30px rgba(59, 130, 246, 0.8);
                z-index: 5;
            }
        }

        @keyframes orbitCounterSpin {
            from {
                transform: rotate(360deg);
            }

            /* Starts at 360 to counter the 0->360 of parent? No, just rotate reverse */
            to {
                transform: rotate(0deg);
            }
        }

        /* Wait, using 'transform' property in animation will override the specific placement transforms (translate) defined in the class! */
        /* CORRECT APPROACH: Wrap each item in a 'spoke' that rotates, OR leave them in place and rotate the RING. */

        /* If I rotate the .orbit-animation-ring div: */
        /* The children orbit. */
        /* To keep children upright: I need to rotate the children in reverse. */

        /* ISSUE with previous approach: The class .item-1 has `transform: ...`. The animation `orbitCounterSpin` also uses `transform`. They conflict. */

        /* BETTER APPROACH: */
        /* .orbit-animation-ring { animation: spin ... } */
        /* .orbit-item { animation: counterSpin ... } */
        /* BUT .orbit-item needs `translate(85px)` to be offset. */

        /* Solution: */
        /* 1. .orbit-spoke (absolute, center, rotates to specific angle) */
        /* 2. .orbit-item (inside spoke, pushed out by margin or absolute, animates counter-spin) */

        /* modifying CSS plan on the fly... */

        /* Advanced About Section with Cyber Border */
        #about-card {
            position: relative;
            overflow: hidden;
            background: rgba(17, 24, 39, 0.4);
            backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid rgba(59, 130, 246, 0.1);
        }

        /* Border Trace Effect for About Card */
        #about-card::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 2.5rem;
            /* matches rounded-[2.5rem] */
            padding: 2px;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(59, 130, 246, 0.3),
                    #3B82F6,
                    rgba(59, 130, 246, 0.3),
                    transparent);
            background-size: 200% auto;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            opacity: 0.5;
            animation: borderRotate 4s linear infinite;
            pointer-events: none;
            z-index: 1;
        }

        #about-card:hover::before {
            opacity: 0.8;
        }

        .about-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.5s;
            pointer-events: none;
        }

        .about-card:hover::after {
            opacity: 1;
            animation: aboutGlow 2s ease-in-out infinite;
        }

        @keyframes aboutGlow {

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

            50% {
                transform: translate(10%, 10%);
            }
        }

        /* Updated Skills Slider & Category Styles */
        .skills-slider-wrapper {
            position: relative;
        }

        .skills-slider-container {
            display: flex;
            overflow-x: auto;
            gap: 24px;
            padding: 40px 10px;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .skills-slider-container::-webkit-scrollbar {
            display: none;
        }

        /* Advanced Skills Section Overhaul - Vibrant Modernity */
        #skills-grid {
            perspective: 2000px;
        }

        .skill-item {
            flex: 0 0 280px;
            /* Adjusted width for sweet spot */
            scroll-snap-align: center;
            position: relative;
            background: rgba(17, 24, 39, 0.9);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 36px;
            padding: 3rem 1.5rem 2rem 1.5rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            transform-style: preserve-3d;
            cursor: pointer;
            height: 260px;
            /* Adjusted height */
            box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.6);
        }

        @media (max-width: 768px) {
            .skill-item {
                flex: 0 0 200px;
                /* Slightly smaller for better fit */
                height: 220px;
                padding: 2rem 1rem 1.5rem 1rem;
                gap: 0.5rem;
            }

            .skill-item svg {
                width: 70px !important;
                height: 70px !important;
            }

            .skill-item i {
                font-size: 70px !important;
            }

            .skill-item span {
                font-size: 0.85rem !important;
                letter-spacing: 0.04em;
                line-height: 1.2;
            }
        }

        @media (max-width: 480px) {
            .skill-item {
                flex: 0 0 160px;
                height: 200px;
                padding: 1.5rem 0.75rem 1.25rem 0.75rem;
                gap: 0.4rem;
            }

            .skill-item svg {
                width: 55px !important;
                height: 55px !important;
            }

            .skill-item i {
                font-size: 55px !important;
            }

            .skill-item span {
                font-size: 0.75rem !important;
                letter-spacing: 0.03em;
                line-height: 1.1;
            }
        }

        /* Animated Border - Gradient Trace */
        .skill-item::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 30px;
            padding: 2.5px;
            background: linear-gradient(90deg, #3B82F6, #8B5CF6, #3B82F6);
            background-size: 200% auto;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .skill-item:hover::before {
            opacity: 1;
            animation: gradientMove 2s linear infinite;
        }

        @keyframes gradientMove {
            to {
                background-position: 200% center;
            }
        }

        .skill-item:hover {
            transform: translateY(-20px) scale(1.05);
            background: rgba(17, 24, 39, 0.98);
            border-color: rgba(59, 130, 246, 0.5);
            box-shadow: 0 30px 60px -12px rgba(59, 130, 246, 0.5);
        }

        /* Neon Base Glow */
        .skill-item .glow-base {
            position: absolute;
            bottom: -20%;
            left: 50%;
            transform: translateX(-50%);
            width: 60%;
            height: 40%;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
            filter: blur(20px);
            opacity: 0;
            transition: opacity 0.5s ease;
            pointer-events: none;
        }

        .skill-item:hover .glow-base {
            opacity: 1;
        }

        .skill-item i {
            font-size: 100px;
            filter: brightness(1.2) drop-shadow(0 0 15px currentColor);
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            transform: translateZ(40px);
        }

        .skill-item:hover i {
            transform: translateZ(80px) scale(1.1);
            filter: brightness(1.4) drop-shadow(0 0 25px currentColor);
        }

        .skill-item span {
            font-size: 1.2rem;
            /* Adjusted font */
            font-weight: 800;
            color: #fff;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            transition: all 0.4s ease;
            transform: translateZ(25px);
            text-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
        }

        /* HUD Corners for Skill Cards */
        .skill-item .card-corner {
            width: 20px;
            height: 20px;
            border-width: 1.5px;
        }

        .skill-item:hover .card-corner {
            width: 25px;
            height: 25px;
        }

        /* Spotlight Effect Refined */
        .skill-item::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.08) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            z-index: 5;
        }

        .skill-item:hover::after {
            opacity: 1;
        }

        /* Category Buttons */
        .skill-category-btn.active {
            background: #3B82F6;
            color: #fff;
            border-color: #3B82F6;
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
        }

        .skill-category-btn:not(.active):hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

        /* Advanced Projects Section */
        .project-card {
            position: relative;
            transition: transform 0.3s ease;
        }

        .project-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.5), transparent);
            opacity: 0;
            transition: opacity 0.3s;
            z-index: -1;
        }

        .project-card:hover::before {
            opacity: 1;
            animation: projectShine 1.5s ease-in-out infinite;
        }

        @keyframes projectShine {
            0% {
                background-position: -200% center;
            }

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

        .project-card:hover {
            transform: translateY(-8px) scale(1.02);
        }

        .loader {
            width: 1rem;
            height: 1rem;
            border: 2px solid #fff;
            border-bottom-color: transparent;
            border-radius: 50%;
            display: inline-block;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
        }

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

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

        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }

        .modal-content {
            background-color: #1F2937;
            padding: 2rem;
            border-radius: 0.5rem;
            width: 90%;
            max-width: 500px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        /* Header Brand Avatar Styles */
        .header-avatar-container {
            position: relative;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            padding: 2px;
            background: linear-gradient(45deg, rgba(59, 130, 246, 0.6), transparent);
            border: 1px solid rgba(59, 130, 246, 0.3);
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
        }

        .header-avatar-container:hover {
            transform: scale(1.1);
            border-color: rgba(59, 130, 246, 0.8);
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
        }

        .header-avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            filter: brightness(1.1);
        }

        .avatar-status-pulse {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 9px;
            height: 9px;
            background: #10b981;
            border-radius: 50%;
            border: 2px solid #0f172a;
            box-shadow: 0 0 10px #10b981;
            animation: status-heartbeat 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        @keyframes status-heartbeat {

            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
            }

            50% {
                transform: scale(1.2);
                box-shadow: 0 0 10px 4px rgba(16, 185, 129, 0);
            }
        }

        .nav-brand-name {
            letter-spacing: 0.5px;
            transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            background: linear-gradient(120deg,
                    #fff 20%,
                    #60a5fa 40%,
                    #3b82f6 50%,
                    #60a5fa 60%,
                    #fff 80%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 800;
            display: inline-block;
            overflow: hidden;
            animation: liquid-aurora 8s linear infinite;
            padding-bottom: 2px;
        }

        @keyframes liquid-aurora {
            to {
                background-position: 200% center;
            }
        }

        /* Layer 1: Broad Soft Glow Sweep */
        .nav-brand-name::before {
            content: "";
            position: absolute;
            top: 0;
            left: -150%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.2),
                    transparent);
            transform: skewX(-25deg);
            animation: crystal-sweep 7s infinite ease-in-out;
            pointer-events: none;
            z-index: 1;
        }

        /* Layer 2: Sharp Crystal Ray */
        .nav-brand-name::after {
            content: "";
            position: absolute;
            top: 0;
            left: -150%;
            width: 30%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.5),
                    transparent);
            transform: skewX(-25deg);
            animation: crystal-sweep 7s infinite ease-in-out;
            animation-delay: 0.15s;
            pointer-events: none;
            z-index: 2;
        }

        @keyframes crystal-sweep {
            0% {
                left: -150%;
            }

            25% {
                left: 150%;
            }

            100% {
                left: 150%;
            }
        }

        .nav-brand-name:hover {
            letter-spacing: 1.8px;
            filter: brightness(1.2) drop-shadow(0 0 15px rgba(59, 130, 246, 0.4));
            transform: translateY(-2px);
        }


        .nav-link {
            position: relative;
            padding: 8px 18px;
            font-weight: 500;
            letter-spacing: 0.3px;
            border-radius: 12px;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            overflow: hidden;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* The Glass Capsule Background */
        .nav-link::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(59, 130, 246, 0.08);
            border-radius: 12px;
            transform: scale(0.6);
            opacity: 0;
            filter: blur(5px);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            z-index: -1;
            border: 1px solid rgba(59, 130, 246, 0.1);
        }

        /* The Dynamic Underline Beam */
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 6px;
            left: 50%;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #3B82F6, transparent);
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            transform: translateX(-50%);
        }

        .nav-link:hover {
            color: #60a5fa !important;
            transform: translateY(-2px);
            letter-spacing: 0.8px;
            text-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
        }

        .nav-link:hover::before {
            transform: scale(1);
            opacity: 1;
            filter: blur(0);
            background: rgba(59, 130, 246, 0.12);
        }

        .nav-link:hover::after {
            width: 60%;
        }

        /* Active State */
        .nav-link.active::before {
            transform: scale(1);
            opacity: 1;
            filter: blur(0);
            background: rgba(59, 130, 246, 0.15);
            border: 1px solid rgba(59, 130, 246, 0.3);
        }

        .nav-link.active::after {
            width: 70%;
            background: #3B82F6;
        }

        /* Neon Shadow Hover Effects on items */
        .skill-item:hover,
        .project-card:hover,
        .contact-card:hover,
        .experience-card:hover {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 0 5px rgba(59, 130, 246, 0.8);
        }


        /* --- Advanced Section Hover Effects --- */

        /* Hero: 3D Tilt */
        /* Hero: Advanced Cyber Card */
        .hero-card {
            transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
            transform-style: preserve-3d;
            position: relative;
            background: rgba(17, 24, 39, 0.4);
            backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid rgba(59, 130, 246, 0.1);
        }

        /* Border Trace Effect */
        .hero-card::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: 1rem;
            /* matches rounded-2xl */
            padding: 2px;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(59, 130, 246, 0.3),
                    #3B82F6,
                    rgba(59, 130, 246, 0.3),
                    transparent);
            background-size: 200% auto;
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: exclude;
            opacity: 0.5;
            animation: borderRotate 4s linear infinite;
            pointer-events: none;
        }

        @keyframes borderRotate {
            to {
                background-position: 200% center;
            }
        }

        #home:hover .hero-card {
            transform: scale(1.02);
            box-shadow: 0 40px 100px -20px rgba(59, 130, 246, 0.25);
            border-color: rgba(59, 130, 246, 0.3);
            background: rgba(17, 24, 39, 0.5);
        }

        /* HUD Corner Brackets */
        .card-corner {
            position: absolute;
            width: 30px;
            height: 30px;
            border: 2px solid rgba(59, 130, 246, 0.5);
            pointer-events: none;
            z-index: 20;
            transition: all 0.5s ease;
        }

        .card-corner.top-left {
            top: -10px;
            left: -10px;
            border-right: 0;
            border-bottom: 0;
            border-radius: 12px 0 0 0;
        }

        .card-corner.top-right {
            top: -10px;
            right: -10px;
            border-left: 0;
            border-bottom: 0;
            border-radius: 0 12px 0 0;
        }

        .card-corner.bottom-left {
            bottom: -10px;
            left: -10px;
            border-right: 0;
            border-top: 0;
            border-radius: 0 0 0 12px;
        }

        .card-corner.bottom-right {
            bottom: -10px;
            right: -10px;
            border-left: 0;
            border-top: 0;
            border-radius: 0 0 12px 0;
        }

        .hero-card:hover .card-corner {
            border-color: #3b82f6;
            width: 40px;
            height: 40px;
            filter: drop-shadow(0 0 10px #3b82f6);
        }

        /* Experience: Advanced Timeline */
        .timeline-progress {
            height: 0%;
            /* Will be animated via GSAP or CSS scroll */
            transition: height 0.5s ease-out;
        }

        .timeline-node-pulse {
            animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
        }

        @keyframes pulse-ring {
            0% {
                transform: scale(0.8);
                opacity: 0.5;
            }

            50% {
                transform: scale(1.5);
                opacity: 0;
            }

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

        .experience-card {
            background: rgba(31, 41, 55, 0.4);
            backdrop-filter: blur(20px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
            transform-style: preserve-3d;
            perspective: 1000px;
        }

        .experience-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 60px rgba(59, 130, 246, 0.2);
        }

        /* Spotlight Effect for Experience Card */
        .experience-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(59, 130, 246, 0.15) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            z-index: 5;
            border-radius: inherit;
        }

        .experience-card:hover::after {
            opacity: 1;
        }

        .experience-date {
            transition: all 0.3s ease;
        }

        .group:hover .experience-date {
            background: rgba(59, 130, 246, 0.2);
            transform: scale(1.05);
        }

        @media (max-width: 768px) {
            .absolute.left-1\/2 {
                left: 20px !important;
                transform: none !important;
            }

            .flex-col.md\:flex-row,
            .flex-col.md\:flex-row-reverse {
                align-items: flex-start !important;
                padding-left: 45px;
            }

            .timeline-node-wrapper {
                position: absolute;
                left: 0;
            }

            .md\:pr-16,
            .md\:pl-16 {
                padding: 0 !important;
            }
        }

        /* Projects: Sweeping Light */
        #projects .container {
            position: relative;
            overflow: hidden;
        }

        #projects .container::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
            transition: left 0.8s ease-in-out;
            pointer-events: none;
        }

        #projects:hover .container::before {
            left: 100%;
        }

        /* --- NEW: Animated Borders for About, Certificates, Contact --- */
        @keyframes rotate-glow {
            0% {
                transform: rotate(0deg);
            }

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

        .animated-border-card {
            position: relative;
            overflow: hidden;
        }

        .animated-border-card::before {
            content: '';
            position: absolute;
            width: 150%;
            height: 150%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: conic-gradient(from var(--angle), transparent 0%, transparent 70%, #60A5FA, #3B82F6, transparent 100%);
            animation: rotate-glow 4s linear infinite;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .animated-border-card:hover::before {
            opacity: 1;
        }

        .animated-border-content {
            position: relative;
            background: #111827;
            /* Same as body background */
            margin: 2px;
            /* This creates the border thickness */
            border-radius: inherit;
            /* Match parent's border-radius */
        }

        /* Specific adjustments for cards */
        #about .animated-border-content {
            background: #1F2937;
        }

        /* Glass effect is complex, using a solid color instead */

        /* New Animated Border for Skills & Projects */
        .skill-item .corner-border,
        .project-card .corner-border {
            content: '';
            position: absolute;
            background: linear-gradient(90deg, #60A5FA, #3B82F6);
            transition: transform 0.4s ease-out;
            z-index: 1;
        }

        .skill-item .corner-top,
        .project-card .corner-top {
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            transform: scaleX(0);
            transform-origin: left;
        }

        .skill-item .corner-right,
        .project-card .corner-right {
            top: 0;
            right: 0;
            width: 2px;
            height: 100%;
            transform: scaleY(0);
            transform-origin: top;
        }

        .skill-item:hover .corner-top,
        .project-card:hover .corner-top {
            transform: scaleX(1);
            transition-delay: 0s;
        }

        .skill-item:hover .corner-right,
        .project-card:hover .corner-right {
            transform: scaleY(1);
            transition-delay: 0.2s;
        }

        .skill-item>*:not(.corner-border),
        .project-card>*:not(.corner-border) {
            position: relative;
            z-index: 2;
        }

        html {
            scroll-padding-top: 80px;
        }

        /* Adjust scroll padding for mobile */
        @media (max-width: 768px) {
            html {
                scroll-padding-top: 100px;
            }
        }

        /* --- Ultra Advanced Cyber HUD Splash Screen --- */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #020617;
            /* Deep space dark */
            z-index: 9999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            /* transition removed to avoid GSAP conflict */
        }

        /* Moving 3D Grid Background */
        .preloader-grid {
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background-image: linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
            background-size: 50px 50px;
            transform: perspective(500px) rotateX(60deg);
            z-index: 0;
            animation: grid-drift 20s linear infinite;
        }

        @keyframes grid-drift {
            from {
                transform: perspective(500px) rotateX(60deg) translateY(0);
            }

            to {
                transform: perspective(500px) rotateX(60deg) translateY(50px);
            }
        }

        /* Animated HUD Crosshair */
        .hud-crosshair {
            position: absolute;
            width: 100px;
            height: 100px;
            pointer-events: none;
            z-index: 12;
            opacity: 0.3;
            transition: transform 0.1s ease-out;
        }

        .hud-crosshair::before,
        .hud-crosshair::after {
            content: '';
            position: absolute;
            background: #3b82f6;
        }

        .hud-crosshair::before {
            width: 100%;
            height: 1px;
            top: 50%;
            left: 0;
        }

        .hud-crosshair::after {
            height: 100%;
            width: 1px;
            left: 50%;
            top: 0;
        }

        /* HUD Brackets */
        .hud-brackets {
            position: absolute;
            inset: 40px;
            pointer-events: none;
            z-index: 10;
        }

        .hud-bracket {
            position: absolute;
            width: 60px;
            height: 60px;
            border: 2px solid rgba(59, 130, 246, 0.4);
            animation: hud-pulse 3s ease-in-out infinite;
        }

        .hud-bracket.top-left {
            top: 0;
            left: 0;
            border-right: 0;
            border-bottom: 0;
        }

        .hud-bracket.top-right {
            top: 0;
            right: 0;
            border-left: 0;
            border-bottom: 0;
        }

        .hud-bracket.bottom-left {
            bottom: 0;
            left: 0;
            border-right: 0;
            border-top: 0;
        }

        .hud-bracket.bottom-right {
            bottom: 0;
            right: 0;
            border-left: 0;
            border-top: 0;
        }

        @keyframes hud-pulse {

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

            50% {
                transform: scale(1.05);
                opacity: 0.8;
            }
        }

        /* System Logs Container */
        .system-logs-container {
            position: absolute;
            bottom: 60px;
            left: 60px;
            width: 300px;
            height: 120px;
            font-family: 'JetBrains Mono', 'Courier New', monospace;
            font-size: 10px;
            color: #3b82f6;
            opacity: 0.5;
            overflow: hidden;
            display: flex;
            flex-direction: column-reverse;
            z-index: 11;
            -webkit-mask-image: linear-gradient(to top, black 80%, transparent 100%);
            mask-image: linear-gradient(to top, black 80%, transparent 100%);
            mask: linear-gradient(to top, black 80%, transparent 100%);
        }

        .log-line {
            line-height: 1.5;
            animation: log-fade-in 0.3s ease-out forwards;
        }

        @keyframes log-fade-in {
            from {
                transform: translateY(10px);
                opacity: 0;
            }

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

        /* 3D Cube Container */
        .cube-container {
            width: 150px;
            height: 150px;
            perspective: 800px;
            z-index: 5;
            margin-bottom: 40px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Hologram Rings */
        .hologram-rings {
            position: absolute;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
        }

        .hud-ring {
            position: absolute;
            border: 1px dotted rgba(59, 130, 246, 0.4);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .hud-ring-1 {
            width: 220px;
            height: 220px;
            /* animation: rotate-ring 10s linear infinite; - Stopped 3D spin */
        }

        .hud-ring-2 {
            width: 260px;
            height: 260px;
            /* animation: rotate-ring-rev 15s linear infinite; - Stopped 3D spin */
            border-style: dashed;
            opacity: 0.3;
        }

        .hud-ring-3 {
            width: 300px;
            height: 300px;
            /* animation: rotate-ring 20s linear infinite; - Stopped 3D spin */
            opacity: 0.2;
        }

        @keyframes rotate-ring {
            from {
                transform: translate(-50%, -50%) rotateY(70deg) rotateZ(0);
            }

            to {
                transform: translate(-50%, -50%) rotateY(70deg) rotateZ(360deg);
            }
        }

        @keyframes rotate-ring-rev {
            from {
                transform: translate(-50%, -50%) rotateY(-70deg) rotateZ(360deg);
            }

            to {
                transform: translate(-50%, -50%) rotateY(-70deg) rotateZ(0);
            }
        }

        .cube {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate-cube 12s linear infinite;
        }

        .cube-face {
            position: absolute;
            width: 150px;
            height: 150px;
            border: 2px solid rgba(59, 130, 246, 0.4);
            background: rgba(59, 130, 246, 0.05);
            box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.2);
        }

        .cube-face:nth-child(1) {
            transform: rotateY(0deg) translateZ(75px);
        }

        .cube-face:nth-child(2) {
            transform: rotateY(90deg) translateZ(75px);
        }

        .cube-face:nth-child(3) {
            transform: rotateY(180deg) translateZ(75px);
        }

        .cube-face:nth-child(4) {
            transform: rotateY(-90deg) translateZ(75px);
        }

        .cube-face:nth-child(5) {
            transform: rotateX(90deg) translateZ(75px);
        }

        .cube-face:nth-child(6) {
            transform: rotateX(-90deg) translateZ(75px);
        }

        @keyframes rotate-cube {
            0% {
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }

        /* Name Reveal Container */
        .name-reveal-container {
            display: flex;
            align-items: center;
            margin-top: 1rem;
            min-height: 1.5rem;
        }

        .typewriter-cursor {
            font-size: 1.5rem;
            color: #fff;
            margin-left: 4px;
            animation: blink 0.8s infinite;
            text-shadow: 0 0 10px #3b82f6;
        }

        @keyframes blink {
            50% {
                opacity: 0;
            }
        }

        /* Holographic Identity Node Styles */
        /* Holographic Identity System Hub */
        .identity-system-hub {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2.5rem;
            margin-bottom: 2.5rem;
            z-index: 10;
        }

        .hub-module {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
        }

        .module-label {
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.65rem;
            color: #3b82f6;
            letter-spacing: 2px;
            font-weight: bold;
            text-transform: uppercase;
            opacity: 0.8;
            text-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
        }

        .hub-data-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            width: 120px;
        }

        .data-line {
            width: 100%;
            height: 1px;
            background: linear-gradient(90deg, transparent, #3b82f6, transparent);
            box-shadow: 0 0 10px #3b82f6;
        }

        .data-status {
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.6rem;
            color: #fff;
            letter-spacing: 1px;
            text-transform: uppercase;
            animation: text-pulse 1.5s ease-in-out infinite;
        }

        @keyframes text-pulse {

            0%,
            100% {
                opacity: 0.4;
            }

            50% {
                opacity: 1;
            }
        }

        .identity-node-container {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .identity-node {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            padding: 3px;
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(12px);
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
            border: 1px solid rgba(59, 130, 246, 0.4);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .identity-img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            filter: grayscale(0.2) contrast(1.1);
        }

        .node-scanner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: #3b82f6;
            box-shadow: 0 0 10px #3b82f6;
            animation: node-scan 3s ease-in-out infinite;
            z-index: 2;
        }

        @keyframes node-scan {

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

            45%,
            55% {
                opacity: 1;
            }

            50% {
                top: 100%;
            }
        }

        .pulse-container {
            position: relative;
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 0;
            z-index: 10;
        }


        .node-ring {
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            border: 1px dashed rgba(59, 130, 246, 0.4);
            border-radius: 50%;
            animation: rotate-node-ring 10s linear infinite;
            pointer-events: none;
        }

        @keyframes rotate-node-ring {
            from {
                transform: rotate(0deg);
            }

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

        .pulse-container {
            position: relative;
            width: 120px;
            height: 120px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 2rem;
        }

        /* Holographic Noise Overlay */
        .holographic-noise {
            position: absolute;
            inset: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3%3Cfilter id='noiseFilter'%3%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3%3C/filter%3%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3%3C/svg%3e");
            opacity: 0.05;
            pointer-events: none;
            mix-blend-mode: overlay;
        }

        /* Modern Scanning Beam */
        .scanning-beam {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            background: linear-gradient(to bottom,
                    transparent,
                    rgba(59, 130, 246, 0.1) 50%,
                    rgba(59, 130, 246, 0.2) 95%,
                    #3b82f6 100%);
            box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
            filter: blur(2px);
            z-index: 5;
            animation: beam-scan 4s linear infinite;
            will-change: transform;
        }

        @keyframes beam-scan {
            0% {
                transform: translateY(-100px);
            }

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

        /* HUD Corners */
        .hud-corner {
            position: absolute;
            width: 40px;
            height: 40px;
            border: 2px solid rgba(59, 130, 246, 0.3);
            z-index: 6;
            animation: hud-pulse 4s ease-in-out infinite;
        }

        .top-left {
            top: 40px;
            left: 40px;
            border-right: 0;
            border-bottom: 0;
        }

        .top-right {
            top: 40px;
            right: 40px;
            border-left: 0;
            border-bottom: 0;
        }

        .bottom-left {
            bottom: 40px;
            left: 40px;
            border-right: 0;
            border-top: 0;
        }

        .bottom-right {
            bottom: 40px;
            right: 40px;
            border-left: 0;
            border-top: 0;
        }

        @keyframes hud-pulse {

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

            50% {
                opacity: 0.8;
                transform: scale(1.05);
            }
        }

        /* System Console */
        .system-console {
            position: absolute;
            bottom: 40px;
            left: 40px;
            width: 300px;
            max-height: 150px;
            font-family: 'JetBrains Mono', 'Courier New', monospace;
            font-size: 10px;
            color: #3b82f6;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 4px;
            opacity: 0.6;
            pointer-events: none;
            z-index: 10;
        }

        .console-line {
            white-space: nowrap;
            overflow: hidden;
            border-right: 2px solid #3b82f6;
            width: 0;
            animation: typing 2s steps(40, end) forwards;
        }

        @keyframes typing {
            from {
                width: 0
            }

            to {
                width: 100%
            }
        }

        #preloader.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        /* Smaller pulse container on mobile */
        @media (max-width: 768px) {
            .pulse-container {
                width: 80px;
                height: 80px;
            }

            .identity-system-hub {
                gap: 1rem;
                flex-direction: column;
            }

            .hub-data-link {
                width: 2px;
                height: 50px;
            }

            .data-line {
                width: 1px;
                height: 100%;
                background: linear-gradient(180deg, transparent, #3b82f6, transparent);
            }
        }


        .pulse-ring {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 2px solid #3B82F6;
            opacity: 0;
            animation: pulse-ripple 2s linear infinite;
        }

        .pulse-ring:nth-child(2) {
            animation-delay: 0.5s;
        }

        .pulse-ring:nth-child(3) {
            animation-delay: 1s;
        }

        /* SVG Progress Ring */
        .progress-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(-90deg);
        }

        .progress-ring-circle {
            stroke: #3B82F6;
            stroke-width: 3;
            fill: none;
            stroke-linecap: round;
            filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.8));
        }

        .preloader-logo {
            font-size: 2rem;
            font-weight: bold;
            color: #fff;
            z-index: 10;
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(12px);
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid rgba(59, 130, 246, 0.4);
            box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
            position: relative;
        }

        /* Orbiting Tech Icons */
        .orbit-container {
            position: absolute;
            width: 180px;
            height: 180px;
            pointer-events: none;
        }

        .orbit-item {
            position: absolute;
            width: 30px;
            height: 30px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3b82f6;
            backdrop-filter: blur(4px);
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.1);
        }

        .orbit-item i {
            width: 16px;
            height: 16px;
        }

        /* Scramble Text */
        .scramble-text {
            font-size: 0.875rem;
            letter-spacing: 0.3rem;
            text-transform: uppercase;
            color: #3B82F6;
            font-family: 'Courier New', monospace;
            text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
        }

        /* Name Subtitle */
        .name-subtitle {
            font-size: 1.25rem;
            letter-spacing: 0.5rem;
            text-transform: uppercase;
            color: #fff;
            font-weight: 600;
            margin-top: 0;
            opacity: 1;
            white-space: pre-wrap;
            text-shadow: 0 0 15px rgba(59, 130, 246, 0.6);
        }

        /* Particle Burst */
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: #3B82F6;
            border-radius: 50%;
            pointer-events: none;
            box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
        }

        /* Binary Rain Effect */
        .binary-rain {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            opacity: 0.15;
        }

        /* Reduce binary rain on mobile for performance */
        @media (max-width: 768px) {
            .binary-rain {
                opacity: 0.08;
            }
        }

        .binary-column {
            position: absolute;
            top: -100%;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #3B82F6;
            text-shadow: 0 0 5px rgba(59, 130, 246, 0.8);
            animation: binary-fall linear infinite;
        }

        @keyframes binary-fall {
            to {
                top: 100%;
            }
        }

        /* Holographic Scan Lines */
        .scan-line {
            position: absolute;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #3B82F6, transparent);
            opacity: 0.3;
            animation: scan 3s linear infinite;
        }

        @keyframes scan {

            0%,
            100% {
                top: 0;
            }

            50% {
                top: 100%;
            }
        }

        /* 3D Wireframe Cube */
        .cube-container {
            position: absolute;
            width: 80px;
            height: 80px;
            perspective: 600px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0.2;
        }

        /* Smaller cube on mobile */
        @media (max-width: 768px) {
            .cube-container {
                width: 50px;
                height: 50px;
                opacity: 0.15;
            }

            .cube-face {
                width: 50px !important;
                height: 50px !important;
            }

            .cube-face:nth-child(1) {
                transform: rotateY(0deg) translateZ(25px) !important;
            }

            .cube-face:nth-child(2) {
                transform: rotateY(90deg) translateZ(25px) !important;
            }

            .cube-face:nth-child(3) {
                transform: rotateY(180deg) translateZ(25px) !important;
            }

            .cube-face:nth-child(4) {
                transform: rotateY(-90deg) translateZ(25px) !important;
            }

            .cube-face:nth-child(5) {
                transform: rotateX(90deg) translateZ(25px) !important;
            }

            .cube-face:nth-child(6) {
                transform: rotateX(-90deg) translateZ(25px) !important;
            }
        }

        .cube {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            animation: rotateCube 8s linear infinite;
        }

        .cube-face {
            position: absolute;
            width: 80px;
            height: 80px;
            border: 1px solid #3B82F6;
            background: rgba(59, 130, 246, 0.05);
            box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.3);
        }

        .cube-face:nth-child(1) {
            transform: rotateY(0deg) translateZ(40px);
        }

        .cube-face:nth-child(2) {
            transform: rotateY(90deg) translateZ(40px);
        }

        .cube-face:nth-child(3) {
            transform: rotateY(180deg) translateZ(40px);
        }

        .cube-face:nth-child(4) {
            transform: rotateY(-90deg) translateZ(40px);
        }

        .cube-face:nth-child(5) {
            transform: rotateX(90deg) translateZ(40px);
        }

        .cube-face:nth-child(6) {
            transform: rotateX(-90deg) translateZ(40px);
        }

        @keyframes rotateCube {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }

            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        @keyframes pulse-ripple {
            0% {
                transform: scale(0.8);
                opacity: 0.8;
                border-width: 2px;
            }

            100% {
                transform: scale(2.5);
                opacity: 0;
                border-width: 0px;
            }
        }

        main {
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        main.loaded {
            opacity: 1;
        }



        /* --- Professional Upgrade Styles --- */

        /* Services Cards */
        .service-card {
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .service-card:hover {
            border-color: rgba(59, 130, 246, 0.5);
            box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.3);
        }

        /* Blog Cards */
        .blog-card {
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .blog-card:hover {
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.5);
        }



        /* Contact Form Inputs */
        input::placeholder,
        textarea::placeholder {
            color: rgba(156, 163, 175, 0.5);
        }

        form input:focus,
        form textarea:focus {
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.1);
        }

        /* Transitions for Modal */
        .modal-backdrop {
            opacity: 0;
            pointer-events: none;
            transition: all 0.4s ease;
        }

        .modal-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-backdrop.active .modal-content {
            transform: scale(1);
            opacity: 1;
        }


        .modal-content {
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* --- Scroll Progress Bar --- */
        .scroll-progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            background: linear-gradient(to right, #3b82f6, #8b5cf6);
            z-index: 10001;
            width: 0;
            transition: width 0.1s ease;
        }

        /* --- Shimmer Buttons --- */

        .shimmer-btn {
            position: relative;
            overflow: hidden;
            background: #3B82F6;
            color: white;
            padding: 12px 32px;
            border-radius: 12px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
        }

        .shimmer-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: 0.5s;
            pointer-events: none;
            opacity: 0;
        }

        .shimmer-btn:hover {
            transform: translateY(-3px) scale(1.02);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.5);
        }

        .shimmer-btn:hover::after {
            left: 120%;
            top: 120%;
            opacity: 1;
        }

        .secondary-shimmer {
            background: rgba(31, 41, 55, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        .secondary-shimmer:hover {
            background: rgba(55, 65, 81, 1);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
        }


        .pricing-card {
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
        }

        /* --- Project Upgrade Styles --- */
        .filter-btn.active {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
            transform: scale(1.05);
        }

        #projects-grid {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .project-card:hover img {
            filter: brightness(0.6);
        }

        .project-card .generate-desc-btn {
            background: linear-gradient(135deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.9));
            backdrop-filter: blur(5px);
        }

        .project-card .generate-desc-btn:hover {
            border-color: #3b82f6;
            color: #3b82f6;
        }

        /* --- Project Slider Styles --- */
        .project-slider-wrapper {
            position: relative;
            padding: 0 40px;
        }

        .project-slider-container {
            display: flex;
            overflow-x: auto;
            gap: 20px;
            padding: 20px 0;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            /* Firefox */
            -ms-overflow-style: none;
            /* IE/Edge */
        }

        .project-slider-container::-webkit-scrollbar {
            display: none;
            /* Chrome/Safari */
        }

        .project-slider-container .project-card {
            flex: 0 0 calc(33.333% - 14px);
            min-width: 300px;
            scroll-snap-align: start;
            transition: transform 0.3s ease;
        }

        @media (max-width: 1024px) {
            .project-slider-container .project-card {
                flex: 0 0 calc(50% - 10px);
            }

            .project-slider-wrapper {
                padding: 0 20px;
            }
        }

        @media (max-width: 768px) {

            .py-24,
            .py-20 {
                padding-top: 4rem !important;
                padding-bottom: 4rem !important;
            }

            h2.text-4xl,
            h2.text-5xl {
                font-size: 2.25rem !important;
            }
        }

        @media (max-width: 640px) {
            .project-slider-container .project-card {
                flex: 0 0 280px;
                /* Fixed width for consistency on mobile */
            }

            .project-slider-wrapper {
                padding: 0 10px;
            }

            .hero-title {
                font-size: 2.5rem !important;
            }
        }

        .slider-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 45px;
            height: 45px;
            border-radius: 50%;
            background: rgba(31, 41, 55, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .slider-nav-btn:hover {
            background: #3b82f6;
            border-color: #3b82f6;
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
        }

        .slider-nav-btn.prev {
            left: -10px;
        }

        .slider-nav-btn.next {
            right: -10px;
        }

        .filter-btn {
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.05);
            color: #94a3b8;
        }

        .filter-btn.active {
            background: #3b82f6 !important;
            color: white !important;
            border-color: #3b82f6 !important;
        }


        /* --- Advanced Certificate Cards (Holographic Design) --- */
        .certificate-card-modern {
            position: relative;
            overflow: hidden;
            border-radius: 1rem;
            background: rgba(17, 24, 39, 0.9);
            /* Deep dark glass */
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            /* Very subtle base border */
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            isolation: isolate;
        }

        /* Animated Holographic Border */
        .certificate-card-modern::before {
            content: '';
            position: absolute;
            inset: -1px;
            z-index: -1;
            background: conic-gradient(from 0deg,
                    transparent 0deg,
                    rgba(59, 130, 246, 0.8) 60deg,
                    rgba(139, 92, 246, 0.8) 120deg,
                    transparent 180deg);
            animation: rotate-border 4s linear infinite;
            opacity: 0;
            transition: opacity 0.3s;
        }

        /* Inner Background Mask to reveal only border + Grid Pattern */
        .certificate-card-modern::after {
            content: '';
            position: absolute;
            inset: 1px;
            background: linear-gradient(rgba(17, 24, 39, 0.95), rgba(17, 24, 39, 0.95)),
                repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(255, 255, 255, 0.03) 20px),
                repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(255, 255, 255, 0.03) 20px);
            border-radius: inherit;
            z-index: -1;
        }

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

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

        /* Hover Effects with 3D Tilt */
        .certificate-card-modern:hover {
            transform: scale3d(1.02, 1.02, 1.02);
            box-shadow: 0 15px 40px -10px rgba(59, 130, 246, 0.4),
                0 0 20px rgba(59, 130, 246, 0.2) inset;
            /* Inner glow boost */
            border-color: rgba(59, 130, 246, 0.3);
            z-index: 10;
        }

        .certificate-card-modern:hover::before {
            opacity: 1;
            filter: brightness(1.2);
            /* Brighter holographic border */
        }


        /* Sheen Effect */
        /* Sheen Effect */
        .cert-glow {
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: skewX(-20deg);
            z-index: 10;
            pointer-events: none;
            transition: left 0.7s;
        }

        .certificate-card-modern:hover .cert-glow {
            animation: sheen 1s forwards;
            left: 200%;
        }

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

            100% {
                left: 200%;
            }
        }



        /* --- Modern Contact Section Styles --- */
        .contact-card-3d {
            perspective: 1000px;
            display: block;
        }

        .contact-card-3d .card-content {
            transform-style: preserve-3d;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .contact-card-3d:hover .card-content {
            transform: translateY(-5px);
            box-shadow: 0 20px 50px rgba(59, 130, 246, 0.2);
        }

        /* Floating Input Labels */
        .peer:placeholder-shown~label {
            top: 1rem;
            font-size: 1rem;
            color: #9CA3AF;
        }

        .peer:focus~label,
        .peer:not(:placeholder-shown)~label {
            top: -0.6rem;
            font-size: 0.75rem;
            color: #60A5FA;
            background-color: #111827;
            padding: 0 4px;
        }

        .peer:focus~label {
            color: #60A5FA;
        }

        /* Smooth Input Focus */
        input.peer,
        textarea.peer {
            transition: all 0.3s ease;
        }

        input.peer:focus,
        textarea.peer:focus {
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        }

        /* --- Advanced Contact Form Holographic Effect --- */
        .contact-form-container {
            background: rgba(17, 24, 39, 0.6) !important;
            /* Force override for consistnecy */
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }

        /* Animated Border Gradient for Form */
        .contact-form-container::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.5), rgba(139, 92, 246, 0.5), transparent);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: destination-out;
            mask-composite: exclude;
            animation: border-rotate 4s linear infinite;
            pointer-events: none;
        }

        @keyframes border-rotate {
            0% {
                filter: hue-rotate(0deg);
            }

            100% {
                filter: hue-rotate(360deg);
            }
        }

        /* Form Focus Glow */
        #contact input:focus,
        #contact textarea:focus {
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
            border-color: rgba(59, 130, 246, 0.5);
            background: rgba(17, 24, 39, 0.8);
        }

        /* Neon Social Icons Styling */
        .platform-btn-neon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(8px);
            color: #9CA3AF;
            animation: iconFloat 3s ease-in-out infinite;
        }

        .platform-btn-neon::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .platform-btn-neon:hover::after {
            opacity: 1;
        }

        /* Platform Specific Neon Glows */
        .btn-github:hover {
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
            transform: translateY(-3px) scale(1.05);
            color: white;
        }

        .btn-linkedin:hover {
            border-color: rgba(10, 102, 194, 0.5);
            box-shadow: 0 0 15px rgba(10, 102, 194, 0.3);
            transform: translateY(-3px) scale(1.05);
            color: #0A66C2;
        }

        .btn-facebook:hover {
            border-color: rgba(24, 119, 242, 0.5);
            box-shadow: 0 0 15px rgba(24, 119, 242, 0.3);
            transform: translateY(-3px) scale(1.05);
            color: #1877F2;
        }

        .btn-instagram:hover {
            border-color: rgba(225, 48, 108, 0.5);
            box-shadow: 0 0 15px rgba(225, 48, 108, 0.3);
            transform: translateY(-3px) scale(1.05);
            color: #E1306C;
        }

        .btn-upwork:hover {
            border-color: rgba(20, 168, 0, 0.5);
            box-shadow: 0 0 15px rgba(20, 168, 0, 0.3);
            transform: translateY(-3px) scale(1.05);
            color: #14A800;
        }

        .btn-fiverr:hover {
            border-color: rgba(29, 191, 115, 0.5);
            box-shadow: 0 0 15px rgba(29, 191, 115, 0.3);
            transform: translateY(-3px) scale(1.05);
            color: #1DBF73;
        }

        .btn-toptal:hover {
            border-color: rgba(56, 99, 160, 0.5);
            box-shadow: 0 0 15px rgba(56, 99, 160, 0.3);
            transform: translateY(-3px) scale(1.05);
            color: #3863A0;
        }

        /* Continuous Floating Animation */
        @keyframes iconFloat {

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

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

        /* Pulse Animation on Hover */
        @keyframes neonPulse {
            0% {
                box-shadow: 0 0 10px currentColor;
            }

            50% {
                box-shadow: 0 0 20px currentColor;
            }

            100% {
                box-shadow: 0 0 10px currentColor;
            }
        }

        .platform-btn-neon:hover {
            animation: neonPulse 1.5s ease-in-out infinite;
            z-index: 10;
        }

        /* ==========================================================================
   Advanced Footer Styles
   ========================================================================== */
        .footer-mesh-bg {
            position: relative;
            background: #0b0f1a;
            /* Darkest blue to block particles slightly for readability */
            overflow: hidden;
            margin-top: -1px;
            /* Pull up slightly to close any sub-pixel gaps */
        }

        .footer-mesh-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.08) 0%, transparent 40%),
                radial-gradient(circle at 20% 40%, rgba(59, 130, 246, 0.05) 0%, transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.05) 0%, transparent 60%);
            pointer-events: none;
        }

        .footer-glow-divider {
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2), transparent);
            width: 100%;
        }

        .footer-link-modern {
            position: relative;
            display: inline-block;
            transition: all 0.3s ease;
        }

        .footer-link-modern::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: linear-gradient(to right, #3b82f6, #8b5cf6);
            transition: width 0.3s ease;
        }

        .footer-link-modern:hover {
            color: white;
            transform: translateX(5px);
        }

        .footer-link-modern:hover::after {
            width: 100%;
        }

        /* Modern HamSync Card Styles - Verified */
        .hamsync-card-modern {
            background: rgba(10, 15, 30, 0.7);
            backdrop-filter: blur(40px);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05),
                0 20px 50px -10px rgba(0, 0, 0, 0.7);
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            z-index: 1;
        }

        .hamsync-card-modern:hover {
            transform: translateY(-5px) scale(1.005);
            background: rgba(13, 20, 40, 0.85);
            box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.4),
                0 0 30px rgba(59, 130, 246, 0.15),
                0 30px 60px -15px rgba(0, 0, 0, 0.8);
        }

        .hamsync-card-modern .modern-border-trace {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 1.5px;
            background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0.6;
            pointer-events: none;
        }

        .hamsync-card-modern:hover .modern-border-trace {
            background: linear-gradient(90deg, transparent, #60A5FA, #A855F7, #60A5FA, transparent);
            background-size: 200% 100%;
            animation: modernBorderFlow 2.5s linear infinite;
            opacity: 1;
            padding: 2px;
        }

        @keyframes modernBorderFlow {
            0% {
                background-position: 150% 0;
            }

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

        @media (max-width: 768px) {
            .hamsync-card-modern {
                padding: 2rem !important;
                background: rgba(10, 15, 30, 0.9);
            }

            .hamsync-card-modern h2 {
                font-size: 1.75rem !important;
            }

            .hamsync-card-modern h3 {
                font-size: 1.5rem !important;
            }
        }



        @keyframes borderTrace {
            0% {
                background-position: 100% 0;
            }

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

        .newsletter-input-glass {
            background: rgba(255, 255, 255, 0.03) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .newsletter-input-glass:focus {
            background: rgba(255, 255, 255, 0.05) !important;
            border-color: rgba(59, 130, 246, 0.5) !important;
            box-shadow: 0 0 15px rgba(59, 130, 246, 0.15);
        }

        .footer-heading-glow {
            text-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
        }

        /* Advanced Slider Progress Animation */
        @keyframes slideProgress {
            0% {
                transform: translateX(-100%);
            }

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

        @keyframes scanlineMove {
            0% {
                transform: translateY(-100%);
            }

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

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

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