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

        body {
            font-family: 'Courier New', monospace;
            background: linear-gradient(135deg, #0a0e27 0%, #020515 100%);
            color: #00d9ff;
            overflow-x: hidden;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Header Section */
        .header {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin-bottom: 60px;
            align-items: center;
        }

        .intro {
            animation: fadeInLeft 1s ease-out;
        }

        .intro h1 {
            font-size: 4rem;
            font-weight: bold;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-shadow: 0 0 20px #00d9ff, 0 0 40px #00d9ff;
            margin-bottom: 20px;
            animation: glow 2s ease-in-out infinite;
        }

        .intro h2 {
            font-size: 1.8rem;
            font-weight: normal;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: #00b8d4;
            min-height: 60px;
            display: flex;
            align-items: center;
        }

        #role-typer {
            border-right: 3px solid #00d9ff;
            padding-right: 5px;
            animation: blink 0.7s step-end infinite;
        }

        .intro-stats {
            margin-top: 6px;
            font-size: clamp(0.7rem, 1.2vw, 0.9rem);
            color: #7fe4ff;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            text-shadow: 0 0 12px rgba(0, 217, 255, 0.35);
            line-height: 1.4;
        }

        @keyframes blink {
            50% {
                border-color: transparent;
            }
        }

        /* Portrait - Integrated Hologram */
        .portrait-container {
            position: relative;
            animation: fadeInRight 1s ease-out;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 450px;
        }

        .portrait-frame {
            border: 2px solid #00d9ff;
            border-radius: 10px;
            padding: 40px;
            background: rgba(0, 217, 255, 0.05);
            box-shadow: 0 0 30px rgba(0, 217, 255, 0.3);
            position: relative;
            width: 100%;
            max-width: 500px;
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .portrait-frame:hover {
            box-shadow: 0 0 50px rgba(0, 217, 255, 0.5);
            transform: translateY(-5px);
        }

        .portrait-frame::before,
        .portrait-frame::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 50px;
            border: 2px solid #00d9ff;
            transition: all 0.3s ease;
        }

        .portrait-frame::before {
            top: -2px;
            left: -2px;
            border-right: none;
            border-bottom: none;
            box-shadow: -5px -5px 15px rgba(0, 217, 255, 0.4);
        }

        .portrait-frame::after {
            bottom: -2px;
            right: -2px;
            border-left: none;
            border-top: none;
            box-shadow: 5px 5px 15px rgba(0, 217, 255, 0.4);
        }

        .portrait-frame:hover::before,
        .portrait-frame:hover::after {
            width: 60px;
            height: 60px;
        }

        /* Additional corner accents */
        .portrait-accent-tl,
        .portrait-accent-tr,
        .portrait-accent-bl,
        .portrait-accent-br {
            position: absolute;
            width: 20px;
            height: 20px;
            border: 1px solid rgba(0, 217, 255, 0.6);
        }

        .portrait-accent-tl {
            top: 15px;
            left: 15px;
            border-right: none;
            border-bottom: none;
        }

        .portrait-accent-tr {
            top: 15px;
            right: 15px;
            border-left: none;
            border-bottom: none;
        }

        .portrait-accent-bl {
            bottom: 15px;
            left: 15px;
            border-right: none;
            border-top: none;
        }

        .portrait-accent-br {
            bottom: 15px;
            right: 15px;
            border-left: none;
            border-top: none;
        }

        /* Hologram Avatar Styles */
        .hologram-scene {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            perspective: 1800px;
            position: relative;
            z-index: 1;
        }

        .hologram {
            position: relative;
            width: 100%;
            max-width: 350px;
            aspect-ratio: 1;
            transform-style: preserve-3d;
            will-change: transform;
        }

        .hologram-aura {
            position: absolute;
            inset: -14%;
            background: radial-gradient(
                circle,
                rgba(120,255,255,0.35),
                rgba(170,90,255,0.3),
                transparent 70%
            );
            filter: blur(50px);
            transform: translateZ(-160px);
            will-change: filter, opacity;
        }

        .hologram-particles {
            position: absolute;
            inset: -20%;
            pointer-events: none;
            overflow: visible;
        }

        .hologram-particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: rgba(0, 217, 255, 0.6);
            border-radius: 50%;
            box-shadow: 0 0 4px rgba(0, 217, 255, 0.8);
            will-change: transform, opacity;
        }

        .hologram-layer {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            mix-blend-mode: screen;
            transform-origin: center;
            will-change: transform;
            backface-visibility: hidden;
        }

        .hologram-layer.cyan {
            filter: drop-shadow(0 0 30px rgba(0,230,255,0.85));
            opacity: 0.55;
        }

        .hologram-layer.magenta {
            filter: drop-shadow(0 0 34px rgba(255,60,200,0.75));
            opacity: 0.5;
        }

        .hologram-layer.core {
            filter: drop-shadow(0 0 22px rgba(170,100,255,0.85));
            opacity: 0.8;
        }

        .hologram-fresnel {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            pointer-events: none;
            background: radial-gradient(
                circle at center,
                transparent 55%,
                rgba(160,220,255,0.25) 68%,
                rgba(200,100,255,0.4) 78%,
                transparent 88%
            );
            mix-blend-mode: screen;
            opacity: 0.4;
            transform: translateZ(120px);
        }

        .hologram-scan-sweep {
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to bottom,
                transparent,
                rgba(0, 217, 255, 0.35),
                transparent
            );
            height: 35%;
            animation: sweep 6s linear infinite;
            mix-blend-mode: screen;
            pointer-events: none;
        }

        .hologram-scanlines {
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                to bottom,
                rgba(255,255,255,0.035),
                rgba(255,255,255,0.035) 1px,
                transparent 3px,
                transparent 5px
            );
            mix-blend-mode: overlay;
            opacity: 0.25;
            pointer-events: none;
        }

        .hologram-base {
            position: absolute;
            bottom: -24%;
            left: 50%;
            width: 70%;
            height: 10px;
            transform: translateX(-50%) translateZ(-180px);
            background: linear-gradient(
                90deg,
                transparent,
                rgba(0, 217, 255, 0.9),
                transparent
            );
            filter: blur(18px);
        }

        .hologram-glitch {
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0;
            mix-blend-mode: screen;
        }

        .hologram-glitch-bar {
            position: absolute;
            width: 100%;
            height: 3px;
            background: rgba(0, 255, 255, 0.5);
            left: 0;
        }

        .hologram-noise {
            position: absolute;
            inset: 0;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/></filter><rect width="200" height="200" filter="url(%23n)" opacity="0.15"/></svg>');
            opacity: 0.08;
            pointer-events: none;
            animation: noise-anim 0.2s steps(2) infinite;
        }

        @keyframes sweep {
            from { transform: translateY(-120%); }
            to { transform: translateY(320%); }
        }

        @keyframes noise-anim {
            0%, 100% { transform: translate(0, 0); }
            10% { transform: translate(-5%, -5%); }
            20% { transform: translate(-10%, 5%); }
            30% { transform: translate(5%, -10%); }
            40% { transform: translate(-5%, 15%); }
            50% { transform: translate(-10%, 5%); }
            60% { transform: translate(15%, 0); }
            70% { transform: translate(0, 10%); }
            80% { transform: translate(-15%, 0); }
            90% { transform: translate(10%, 5%); }
        }

        /* Panel Styling */
        .panel {
            background: rgba(0, 40, 80, 0.3);
            border: 2px solid #00d9ff;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
            position: relative;
            margin-bottom: 40px;
            transition: all 0.3s ease;
        }

        .panel:hover {
            box-shadow: 0 0 40px rgba(0, 217, 255, 0.4);
            transform: translateY(-5px);
        }

        .panel-title {
            font-size: 1.5rem;
            font-weight: bold;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 30px;
            text-shadow: 0 0 10px #00d9ff;
        }

        .panel-title-text {
            position: relative;
            display: inline-block;
            padding-bottom: 18px;
            max-width: 100%;
        }

        .panel-title-text::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 16px;
            background:
                radial-gradient(circle, rgba(0, 217, 255, 0.95) 30%, rgba(0, 217, 255, 0.05) 70%, transparent 85%) 0 100% / 10px 10px no-repeat,
                radial-gradient(circle, rgba(0, 217, 255, 0.95) 30%, rgba(0, 217, 255, 0.05) 70%, transparent 85%) 100% 100% / 10px 10px no-repeat,
                linear-gradient(90deg, rgba(0, 217, 255, 0), rgba(0, 217, 255, 0.85) 30%, #00d9ff 50%, rgba(160, 120, 255, 0.85) 70%, rgba(0, 217, 255, 0)) 50% 100% / 100% 3px no-repeat;
            filter: drop-shadow(0 0 6px rgba(0, 217, 255, 0.8)) drop-shadow(0 0 15px rgba(162, 120, 255, 0.5));
            pointer-events: none;
        }

        /* Skills Section */
        .skills-section {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 40px;
            align-items: center;
        }

        .skills-dials {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
        }

        .gear-skill {
            width: 180px;
            height: 180px;
            position: relative;
            flex: 0 0 auto;
        }

        .gear-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .gear {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            pointer-events: none;
        }

        .gear-outer {
            border: 3px dashed rgba(0, 217, 255, 0.65);
            animation: spin 12s linear infinite;
            box-shadow: 0 0 25px rgba(0, 217, 255, 0.45);
        }

        .gear-inner {
            inset: 18%;
            border: 2px dashed rgba(170, 120, 255, 0.75);
            animation: spin-reverse 8s linear infinite;
        }

        .gear-progress {
            position: absolute;
            inset: 0;
            transform: rotate(-90deg);
        }

        .gear-track {
            fill: none;
            stroke: rgba(0, 217, 255, 0.15);
            stroke-width: 8;
        }

        .gear-fill {
            fill: none;
            stroke: #00d9ff;
            stroke-width: 8;
            stroke-linecap: round;
            stroke-dasharray: 402;
            stroke-dashoffset: 402;
            filter: drop-shadow(0 0 10px #00d9ff);
            transition: stroke-dashoffset 2s ease-out;
        }

        .gear-center {
            position: absolute;
            inset: 26%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0, 40, 80, 0.9), rgba(0, 20, 40, 0.6));
            box-shadow: inset 0 0 25px rgba(0, 217, 255, 0.45);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .gear-label {
            font-size: 0.7rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #88d9ff;
            margin-bottom: 6px;
            line-height: 1.2;
        }

        .gear-value {
            font-size: 1.4rem;
            font-weight: bold;
        }

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

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

        .skills-bars {
            flex: 1;
        }

        .skill-bar {
            margin: 20px 0;
        }

        .skill-bar-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .skill-bar-bg {
            height: 8px;
            background: rgba(0, 217, 255, 0.2);
            border-radius: 10px;
            overflow: hidden;
            position: relative;
        }

        .skill-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #00d9ff, #00b8d4);
            border-radius: 10px;
            box-shadow: 0 0 10px #00d9ff;
            transition: width 2s ease;
            width: 0;
        }

        /* Achievements Section */
        .achievements-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
        }

        .achievement-card {
            border: 2px solid #00d9ff;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            background: rgba(0, 217, 255, 0.05);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 120px;
        }

        .achievement-card:hover {
            background: rgba(0, 217, 255, 0.15);
            box-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
            transform: scale(1.05);
        }

        .achievement-icon {
            font-size: 3rem;
            font-weight: bold;
        }

        /* Signal Jamming Grid */
        .panel.holo-panel.holo-panel-2.panel-scanline {
            position: relative;
            border: 2px solid rgba(0, 217, 255, 0.8);
            border-radius: 12px;
            padding: 30px;
            background: linear-gradient(140deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 30, 0.65));
            box-shadow: 0 0 30px rgba(0, 217, 255, 0.25), inset 0 0 50px rgba(0, 217, 255, 0.05);
            overflow: hidden;
        }

        .panel.holo-panel.holo-panel-1.panel-scanline {
            background: linear-gradient(140deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 30, 0.65));
            box-shadow: 0 0 30px rgba(0, 217, 255, 0.25), inset 0 0 50px rgba(0, 217, 255, 0.05);
        }

        .panel.holo-panel.holo-panel-1.panel-scanline::after {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                180deg,
                rgba(0, 217, 255, 0.18) 0px,
                rgba(0, 217, 255, 0.08) 2px,
                transparent 3px,
                transparent 6px
            );
            opacity: 0.2;
            animation: signal-scan 8s linear infinite;
            pointer-events: none;
            border-radius: inherit;
            box-shadow: inset 0 0 50px rgba(0, 217, 255, 0.05);
            z-index: 0;
        }

        .panel.holo-panel.holo-panel-2.panel-scanline::after {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                180deg,
                rgba(0, 217, 255, 0.18) 0px,
                rgba(0, 217, 255, 0.08) 2px,
                transparent 3px,
                transparent 6px
            );
            opacity: 0.2;
            animation: signal-scan 8s linear infinite;
            pointer-events: none;
            border-radius: inherit;
            box-shadow: inset 0 0 50px rgba(0, 217, 255, 0.05);
            z-index: 0;
        }

        .panel.holo-panel.holo-panel-2.panel-scanline .signal-jamming-header,
        .panel.holo-panel.holo-panel-3.panel-scanline .signal-jamming-header,
        .panel.holo-panel.holo-panel-4 .signal-jamming-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            margin-bottom: 25px;
            flex-wrap: wrap;
            padding: 30px 30px 0;
            position: relative;
            z-index: 1;
        }

        .panel.holo-panel.holo-panel-2.panel-scanline .panel-title {
            position: relative;
            z-index: 1;
        }

        .signal-title {
            font-size: 1.2rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
        }

        .signal-status-text {
            font-size: 0.75rem;
            letter-spacing: 0.3em;
            color: #88d9ff;
            text-transform: uppercase;
        }

        .panel.holo-panel.holo-panel-2.panel-scanline .signal-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 20px;
            padding: 0 30px 30px;
            position: relative;
            z-index: 1;
        }

        .signal-card-link {
            text-decoration: none;
            color: inherit;
        }

        .signal-card {
            position: relative;
            border-radius: 16px;
            border: 1px solid rgba(0, 217, 255, 0.45);
            padding: 24px;
            background: linear-gradient(120deg, rgba(0, 25, 45, 0.85), rgba(0, 10, 25, 0.7));
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .signal-card:hover {
            transform: translateY(-4px);
        }

        .signal-content {
            position: relative;
            z-index: 2;
            filter: blur(6px);
            opacity: 0.35;
            transition: filter 0.8s ease, opacity 0.8s ease;
        }

        .signal-card-title {
            font-size: 1.3rem;
            letter-spacing: 0.35em;
            text-transform: uppercase;
        }

        .signal-card-sub {
            margin-top: 12px;
            font-size: 0.75rem;
            letter-spacing: 0.25em;
            color: #88d9ff;
            text-transform: uppercase;
        }

        .signal-noise,
        .signal-band,
        .signal-data-flow {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .signal-noise {
            background: repeating-linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.05) 0px,
                rgba(255, 255, 255, 0.05) 2px,
                transparent 3px,
                transparent 5px
            );
            opacity: 0;
        }

        .signal-band {
            left: -10%;
            width: 120%;
            height: 7px;
            background: linear-gradient(90deg, rgba(0, 217, 255, 0.9), rgba(255, 255, 255, 0.4), rgba(0, 217, 255, 0));
            opacity: 0;
        }

        .signal-band.band1 { top: 30%; }
        .signal-band.band2 { top: 55%; }
        .signal-band.band3 { top: 75%; }

        .signal-data-flow {
            opacity: 0;
            overflow: hidden;
        }

        .signal-packet {
            position: absolute;
            width: 2px;
            height: 18px;
            background: linear-gradient(to bottom, transparent, rgba(0, 217, 255, 0.95), transparent);
            filter: drop-shadow(0 0 6px rgba(0, 217, 255, 0.9));
            opacity: 0.7;
            animation: signal-packet-move linear infinite;
        }

        .signal-card.signal-jamming-active {
            animation: signal-jitter 0.9s ease;
        }

        .signal-card.signal-jamming-active .signal-content {
            animation: signal-blur 0.9s ease;
        }

        .signal-card.signal-jamming-active .signal-noise {
            animation: signal-noise 0.9s ease;
        }

        .signal-card.signal-jamming-active .band1 { animation: signal-band 0.9s ease; }
        .signal-card.signal-jamming-active .band2 { animation: signal-band 0.9s ease 0.12s; }
        .signal-card.signal-jamming-active .band3 { animation: signal-band 0.9s ease 0.22s; }

        .signal-card.signal-revealed .signal-content {
            filter: none;
            opacity: 1;
        }

        .signal-card.signal-revealed .signal-data-flow {
            opacity: 0.35;
        }

        .signal-card.signal-revealed .signal-content::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.6), transparent);
            animation: signal-decrypt 0.8s linear;
            pointer-events: none;
        }

        .signal-card.signal-revealed::before {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                0deg,
                rgba(255, 255, 255, 0.04),
                rgba(255, 255, 255, 0.04) 1px,
                transparent 3px,
                transparent 6px
            );
            opacity: 0.12;
            animation: signal-residual 1.4s steps(2) infinite;
            pointer-events: none;
        }

        @keyframes signal-scan {
            from { transform: translateY(-18px); }
            to { transform: translateY(18px); }
        }

        @keyframes signal-blur {
            0% { filter: blur(7px); opacity: 0.2; }
            30% { filter: blur(12px); opacity: 0.1; }
            60% { filter: blur(4px); opacity: 0.6; }
            100% { filter: none; opacity: 1; }
        }

        @keyframes signal-band {
            0% { opacity: 0; transform: translateX(-8px); }
            35% { opacity: 0.7; transform: translateX(8px); }
            100% { opacity: 0; }
        }

        @keyframes signal-noise {
            0% { opacity: 0; }
            25% { opacity: 0.6; }
            100% { opacity: 0; }
        }

        @keyframes signal-jitter {
            0% { transform: none; }
            20% { transform: translateX(-2px); }
            40% { transform: translateX(2px); }
            60% { transform: translateX(-1px); }
            80% { transform: translateX(1px); }
            100% { transform: none; }
        }

        @keyframes signal-decrypt {
            from { transform: translateX(-100%); }
            to { transform: translateX(100%); }
        }

        @keyframes signal-residual {
            0% { opacity: 0.05; }
            50% { opacity: 0.18; }
            100% { opacity: 0.05; }
        }

        @keyframes signal-packet-move {
            from { transform: translate(-30%, -30%); opacity: 0; }
            15% { opacity: 1; }
            to { transform: translate(140%, 140%); opacity: 0; }
        }

        @media (prefers-reduced-motion: reduce) {
            .panel.holo-panel.holo-panel-2.panel-scanline::after,
            .signal-card::before,
            .signal-card::after {
                animation: none !important;
            }
        }

        /* Projects Section */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }

        .project-card {
            border: 2px solid #00d9ff;
            border-radius: 10px;
            padding: 25px;
            background: rgba(0, 217, 255, 0.05);
            transition: all 0.3s ease;
            position: relative;
        }

        .project-card::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            width: 30px;
            height: 30px;
            border: 2px solid #00d9ff;
            border-right: none;
            border-bottom: none;
        }

        .project-card:hover {
            background: rgba(0, 217, 255, 0.15);
            box-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
            transform: translateY(-5px);
        }

        .project-title {
            font-size: 1.2rem;
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 15px;
            letter-spacing: 0.05em;
        }

        .project-description {
            font-size: 0.9rem;
            line-height: 1.6;
            color: #88d9ff;
        }

        /* Contact Form */
        .contact-form {
            max-width: 600px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-label {
            display: block;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 0.9rem;
        }

        .form-input {
            width: 100%;
            padding: 15px;
            background: rgba(0, 217, 255, 0.05);
            border: 2px solid #00d9ff;
            border-radius: 5px;
            color: #00d9ff;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .form-input:focus {
            outline: none;
            box-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
            background: rgba(0, 217, 255, 0.1);
        }

        .submit-btn {
            background: transparent;
            border: 2px solid #00d9ff;
            color: #00d9ff;
            padding: 15px 40px;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            cursor: pointer;
            border-radius: 5px;
            transition: all 0.3s ease;
            margin-top: 20px;
        }

        .submit-btn:hover {
            background: #00d9ff;
            color: #020515;
            box-shadow: 0 0 30px #00d9ff;
            transform: scale(1.05);
        }

        .holo-panel {
            animation: holoFloat 2.4s ease-in-out infinite, holoGlow 2.8s ease-in-out infinite;
            will-change: transform, box-shadow;
        }

        .holo-panel-1 {
            animation-delay: 0s, 0s;
        }

        .holo-panel-2 {
            animation-delay: 0.25s, 0.35s;
        }

        .holo-panel-3 {
            animation-delay: 0.5s, 0.7s;
        }

        .holo-panel-4 {
            animation-delay: 0.75s, 1.05s, 0s;
        }

        @keyframes holoFloat {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-6px);
            }
            100% {
                transform: translateY(0);
            }
        }

        @keyframes holoGlow {
            0% {
                box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
            }
            50% {
                box-shadow: 0 0 32px rgba(0, 217, 255, 0.35);
            }
            100% {
                box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
            }
        }

        .panel-scanline {
            position: relative;
            overflow: hidden;
        }

        .panel-scanline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.5), transparent);
            animation: contactScanline 3s linear infinite;
            pointer-events: none;
            border-radius: inherit;
            z-index: 1;
        }

        @media (prefers-reduced-motion: reduce) {
            .holo-panel {
                animation: none;
            }
            .panel-scanline::before {
                animation: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .holo-panel {
                animation: none;
            }
        }

        /* Portfolio Contact Wall */
        .portfolio-contact {
            position: relative;
            margin-bottom: 40px;
            padding: 25px;
        }

        .panel.holo-panel.holo-panel-4 {
            background: linear-gradient(140deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 30, 0.65));
            border: 2px solid #00d9ff;
            border-radius: 12px;
            box-shadow: 0 0 30px rgba(0, 217, 255, 0.25), inset 0 0 50px rgba(0, 217, 255, 0.05);
            position: relative;
            overflow: hidden;
            animation: holoFloat 2.4s ease-in-out infinite, holoGlow 2.8s ease-in-out infinite, contactPanelPulse 3s ease-in-out infinite;
        }

        .panel.holo-panel.holo-panel-4::after {
            content: '';
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(
                180deg,
                rgba(0, 217, 255, 0.18) 0px,
                rgba(0, 217, 255, 0.08) 2px,
                transparent 3px,
                transparent 6px
            );
            opacity: 0.2;
            animation: signal-scan 8s linear infinite;
            pointer-events: none;
            border-radius: inherit;
            box-shadow: inset 0 0 50px rgba(0, 217, 255, 0.05);
            z-index: 0;
        }

        @media (prefers-reduced-motion: reduce) {
            .panel.holo-panel.holo-panel-4 {
                animation: contactPanelPulse 3s ease-in-out infinite;
                animation-delay: 0s;
            }
        }

        .portfolio-contact-scanline {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.5), transparent);
            animation: contactScanline 3s linear infinite;
            pointer-events: none;
        }

        .portfolio-contact-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
        }

        .portfolio-contact-badge {
            width: 42px;
            height: 42px;
            border: 2px solid #00d9ff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 1.2rem;
            color: #00d9ff;
            text-shadow: 0 0 10px rgba(0, 217, 255, 0.9);
            box-shadow: 0 0 12px rgba(0, 217, 255, 0.4), inset 0 0 12px rgba(0, 217, 255, 0.1);
        }

        .portfolio-contact-title-block {
            flex: 1;
        }

        .portfolio-contact-title {
            font-size: 1.1rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: #00d9ff;
            text-shadow: 0 0 12px rgba(0, 217, 255, 0.6);
        }

        .portfolio-contact-subtitle {
            font-size: 0.75rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #4db8d1;
            margin-top: 4px;
        }

        .portfolio-contact-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(120px, 1fr));
            gap: 15px;
            margin-bottom: 25px;
        }

        .portfolio-contact-grid .portfolio-contact-card:nth-child(4),
        .portfolio-contact-grid .portfolio-contact-card:nth-child(5) {
            grid-column: span 1;
        }

        .portfolio-contact-grid .portfolio-contact-card:nth-child(5) {
            grid-column: span 2;
        }

        .portfolio-contact-card {
            border: 2px solid #00a8cc;
            border-radius: 10px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-decoration: none;
            color: #00d9ff;
            font-size: 0.75rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            background: rgba(0, 20, 40, 0.4);
            box-shadow: 0 0 12px rgba(0, 168, 204, 0.35), inset 0 0 25px rgba(0, 217, 255, 0.08);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .portfolio-contact-card .signal-data-flow,
        .portfolio-contact-footer .signal-data-flow {
            opacity: 0.35;
            z-index: 0;
        }

        .portfolio-contact-card::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(0, 217, 255, 0.18);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .portfolio-contact-card:hover {
            border-color: #00d9ff;
            box-shadow: 0 0 25px rgba(0, 217, 255, 0.55), inset 0 0 35px rgba(0, 217, 255, 0.15);
            transform: translateY(-2px) scale(1.02);
        }

        .portfolio-contact-card:hover::before {
            width: 300px;
            height: 300px;
        }

        .portfolio-contact-card svg {
            width: 18px;
            height: 18px;
            position: relative;
            z-index: 1;
        }

        .portfolio-contact-card span {
            position: relative;
            z-index: 1;
        }

        .portfolio-contact-footer {
            border: 2px solid #00a8cc;
            border-radius: 12px;
            padding: 14px 18px;
            display: flex;
            align-items: center;
            gap: 15px;
            background: rgba(0, 20, 40, 0.5);
            box-shadow: 0 0 12px rgba(0, 168, 204, 0.3), inset 0 0 20px rgba(0, 217, 255, 0.05);
            position: relative;
            overflow: hidden;
        }

        .portfolio-contact-footer-text {
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: #00d9ff;
            font-size: 0.85rem;
            text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
            position: relative;
            z-index: 1;
            text-align: center;
            width: 100%;
        }

        .portfolio-contact-footer .portfolio-contact-sweep {
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.35), transparent);
            animation: contactSweep 4s linear infinite;
        }

        @media (prefers-reduced-motion: reduce) {
            .portfolio-contact-card .signal-data-flow,
            .portfolio-contact-footer .signal-data-flow {
                display: none;
            }
        }

        @keyframes contactPanelPulse {
            0%, 100% {
                box-shadow: 0 0 20px rgba(0, 217, 255, 0.35), inset 0 0 35px rgba(0, 217, 255, 0.08);
            }
            50% {
                box-shadow: 0 0 30px rgba(0, 217, 255, 0.5), inset 0 0 45px rgba(0, 217, 255, 0.12);
            }
        }

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

        @keyframes contactScanline {
            0% {
                top: 0;
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                top: 100%;
                opacity: 0;
            }
        }

        @media (max-width: 768px) {
            .portfolio-contact-grid {
                grid-template-columns: 1fr;
            }

            .portfolio-contact-grid .portfolio-contact-card:nth-child(5) {
                grid-column: auto;
            }
        }

        /* Animations */
        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes glow {
            0%, 100% {
                text-shadow: 0 0 20px #00d9ff, 0 0 40px #00d9ff;
            }
            50% {
                text-shadow: 0 0 30px #00d9ff, 0 0 60px #00d9ff, 0 0 80px #00d9ff;
            }
        }

        
.intro-bio {
    margin-top: 15px;
    font-size: 1rem;
    color: #88d9ff;
    line-height: 1.6;
    max-width: 550px;
    min-height: 60px;
    text-align: justify;
}

        /* Responsive */
        @media (max-width: 768px) {
            .header {
                grid-template-columns: 1fr;
            }

            .intro h1 {
                font-size: 2.5rem;
            }

            .intro h2 {
                font-size: 1.2rem;
            }

            .projects-grid,
            .achievements-grid {
                grid-template-columns: 1fr;
            }

            .skills-section {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .skills-dials {
                justify-content: center;
            }

            .portrait-container {
                min-height: 350px;
            }

            .portrait-frame {
                padding: 30px;
                max-width: 400px;
            }

            .portrait-frame::before,
            .portrait-frame::after {
                width: 35px;
                height: 35px;
            }

            .hologram {
                max-width: 280px;
            }
        }

        @media (max-width: 480px) {
            .skills-dials {
                flex-direction: column;
                gap: 20px;
            }

            .portrait-container {
                min-height: 300px;
            }

            .portrait-frame {
                padding: 20px;
                max-width: 320px;
            }

            .portrait-frame::before,
            .portrait-frame::after {
                width: 30px;
                height: 30px;
            }

            .portrait-accent-tl,
            .portrait-accent-tr,
            .portrait-accent-bl,
            .portrait-accent-br {
                display: none;
            }

            .hologram {
                max-width: 240px;
            }
        }

        /* Scanline Effect */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                0deg,
                rgba(0, 217, 255, 0.03) 0px,
                transparent 1px,
                transparent 2px,
                rgba(0, 217, 255, 0.03) 3px
            );
            pointer-events: none;
            z-index: 1000;
        }

        /* ==========================
           JARVIS INTRO + WRAPPER
           ========================== */

        :root {
          --jarvis-primary: #00d9ff;
          --jarvis-secondary: #00b8d4;
          --jarvis-accent: #00ffd1;
          --jarvis-bg: #020515;
          --jarvis-ring-duration: 6s;
          --jarvis-sweep-duration: 3.5s;
          --jarvis-intro-duration: 6s;
        }

        /* Main site wrapper (hidden until intro ends) */
        #site-wrapper {
          opacity: 0;
          filter: blur(10px);
          transition: opacity 0.8s ease, filter 1s ease;
        }

        #site-wrapper.show {
          opacity: 1;
          filter: blur(0);
        }

        /* JARVIS INTRO OVERLAY */
        #jarvis-intro {
          position: fixed;
          inset: 0;
          background:
            radial-gradient(circle at center, #071024 0%, #020515 55%, #000000 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 9999;
          overflow: hidden;
          pointer-events: auto;
          transition: opacity 1s ease;
        }

        #jarvis-intro.hide {
          opacity: 0;
        }

        .jarvis-container {
          position: relative;
          width: min(60vmin, 480px);
          height: min(60vmin, 480px);
          display: flex;
          align-items: center;
          justify-content: center;
        }

        /* Glowing background grid */
        .jarvis-grid {
          position: absolute;
          inset: -40%;
          background-image:
            linear-gradient(
              rgba(0, 217, 255, 0.12) 1px,
              transparent 1px
            ),
            linear-gradient(
              90deg,
              rgba(0, 217, 255, 0.12) 1px,
              transparent 1px
            );
          background-size: 40px 40px;
          opacity: 0.4;
          animation: grid-pulse 4s ease-in-out infinite;
        }

        @keyframes grid-pulse {
          0%,
          100% {
            opacity: 0.2;
            transform: scale(1);
          }
          50% {
            opacity: 0.6;
            transform: scale(1.03);
          }
        }

        /* Central core */
        .jarvis-core {
          position: relative;
          width: 30%;
          height: 30%;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow:
            0 0 30px rgba(0, 217, 255, 0.9),
            0 0 80px rgba(0, 184, 212, 0.7);
        }

        .core-inner {
          position: relative;
          width: 70%;
          height: 70%;
          border-radius: 50%;
          background: radial-gradient(circle,
            #ffffff 0%,
            #c8fbff 25%,
            #00d9ff 55%,
            #00b8d4 80%,
            #001221 100%);
          box-shadow:
            0 0 18px rgba(255, 255, 255, 0.95),
            0 0 40px rgba(0, 217, 255, 0.8);
          animation: core-pulse 1.8s ease-in-out infinite;
        }

        .core-inner::before {
          content: "";
          position: absolute;
          inset: 15%;
          border-radius: inherit;
          border: 2px solid rgba(0, 217, 255, 0.8);
          box-shadow:
            0 0 20px rgba(0, 217, 255, 0.9),
            0 0 45px rgba(0, 184, 212, 0.7);
        }

        .core-inner::after {
          content: "";
          position: absolute;
          inset: -20%;
          border-radius: inherit;
          border: 2px dashed rgba(0, 217, 255, 0.6);
          animation: core-inner-spin 5s linear infinite;
        }

        @keyframes core-pulse {
          0%,
          100% {
            transform: scale(1);
            box-shadow:
              0 0 18px rgba(255, 255, 255, 0.95),
              0 0 40px rgba(0, 217, 255, 0.8);
          }
          50% {
            transform: scale(1.08);
            box-shadow:
              0 0 26px rgba(255, 255, 255, 1),
              0 0 65px rgba(0, 255, 209, 0.95);
          }
        }

        @keyframes core-inner-spin {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }

        /* Rings */
        .ring {
          position: absolute;
          border-radius: 50%;
          border: 1px solid rgba(0, 217, 255, 0.35);
          box-shadow:
            0 0 30px rgba(0, 217, 255, 0.45),
            0 0 60px rgba(0, 184, 212, 0.35);
          overflow: hidden;
        }

        .ring::before {
          content: "";
          position: absolute;
          inset: 0;
          border-radius: inherit;
          border-top: 3px solid var(--jarvis-primary);
          border-right: 3px solid transparent;
          border-bottom: 3px solid rgba(0, 217, 255, 0.5);
          border-left: 3px solid transparent;
          box-shadow: 0 0 20px rgba(0, 217, 255, 0.8);
        }

        .ring.ring-1 {
          width: 50%;
          height: 50%;
          animation: ring-rotate var(--jarvis-ring-duration) linear infinite;
        }

        .ring.ring-2 {
          width: 70%;
          height: 70%;
          border-color: rgba(0, 184, 212, 0.4);
          animation: ring-rotate-reverse calc(var(--jarvis-ring-duration) * 1.3)
            linear infinite;
        }

        .ring.ring-3 {
          width: 90%;
          height: 90%;
          border-color: rgba(0, 217, 255, 0.28);
          animation: ring-rotate calc(var(--jarvis-ring-duration) * 1.8) linear
            infinite;
        }

        .ring.ring-4 {
          width: 110%;
          height: 110%;
          border-style: dashed;
          border-color: rgba(0, 184, 212, 0.3);
          animation: ring-rotate-reverse calc(var(--jarvis-ring-duration) * 2.1)
            linear infinite;
        }

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

        @keyframes ring-rotate-reverse {
          from {
            transform: rotate(360deg);
          }
          to {
            transform: rotate(0deg);
          }
        }

        /* Sweeping radar arc */
        .sweep {
          position: absolute;
          width: 140%;
          height: 140%;
          border-radius: 50%;
          background: conic-gradient(
            from 0deg,
            rgba(0, 184, 212, 0.9),
            rgba(0, 217, 255, 0.55) 22%,
            rgba(0, 217, 255, 0.1) 40%,
            transparent 60%,
            transparent 100%
          );
          mix-blend-mode: screen;
          animation: sweep-rotate var(--jarvis-sweep-duration) linear infinite;
          filter: blur(2px);
          opacity: 0.95;
        }

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

        /* Small orbiting nodes */
        .orbit-node {
          position: absolute;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: var(--jarvis-accent);
          box-shadow:
            0 0 6px rgba(0, 255, 209, 0.85),
            0 0 18px rgba(0, 217, 255, 0.75);
        }

        .orbit-track {
          position: absolute;
          width: 80%;
          height: 80%;
          border-radius: 50%;
          border: 1px dashed rgba(0, 217, 255, 0.32);
          animation: orbit-spin 8s linear infinite;
        }

        @keyframes orbit-spin {
          from {
            transform: rotate(0deg);
          }
          to {
            transform: rotate(360deg);
          }
        }

        .orbit-track .orbit-node {
          top: -4px;
          left: 50%;
          transform: translateX(-50%);
        }

        /* HUD texts */
        .hud-text {
          position: absolute;
          font-size: 0.65rem;
          text-transform: uppercase;
          letter-spacing: 0.16em;
          color: rgba(200, 249, 255, 0.95);
          text-shadow: 0 0 6px rgba(0, 217, 255, 0.9);
          opacity: 0;
          animation: hud-text-fade 5s ease-out forwards;
        }

        .hud-text.top-left {
          top: 10%;
          left: 10%;
        }

        .hud-text.top-right {
          top: 10%;
          right: 10%;
          text-align: right;
        }

        .hud-text.bottom-left {
          bottom: 10%;
          left: 8%;
        }

        .hud-text.bottom-right {
          bottom: 8%;
          right: 8%;
          text-align: right;
        }

        @keyframes hud-text-fade {
          0% {
            opacity: 0;
            transform: translateY(10px);
          }
          20% {
            opacity: 1;
            transform: translateY(0);
          }
          80% {
            opacity: 1;
          }
          100% {
            opacity: 0.25;
          }
        }

        /* Horizontal scanning lines */
        .scanlines {
          position: absolute;
          inset: 0;
          background-image: repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.14) 0px,
            rgba(0, 0, 0, 0.14) 2px,
            transparent 3px,
            transparent 4px
          );
          mix-blend-mode: soft-light;
          opacity: 0.65;
          animation: scanline-move 1.3s linear infinite;
        }

        @keyframes scanline-move {
          from {
            transform: translateY(0);
          }
          to {
            transform: translateY(4px);
          }
        }

        /* Status bar bottom */
        .jarvis-status-bar {
          position: absolute;
          bottom: 8%;
          left: 50%;
          transform: translateX(-50%);
          min-width: 260px;
          padding: 6px 16px;
          border-radius: 999px;
          border: 1px solid rgba(0, 217, 255, 0.5);
          background: linear-gradient(
            90deg,
            rgba(0, 217, 255, 0.25),
            rgba(0, 184, 212, 0.08)
          );
          box-shadow:
            0 0 22px rgba(0, 217, 255, 0.55),
            0 0 38px rgba(0, 184, 212, 0.35);
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 0.7rem;
          text-transform: uppercase;
          letter-spacing: 0.14em;
          opacity: 0;
          animation: status-bar-in 1.8s ease-out forwards 0.6s;
        }

        @keyframes status-bar-in {
          0% {
            opacity: 0;
            transform: translate(-50%, 16px);
          }
          100% {
            opacity: 1;
            transform: translate(-50%, 0);
          }
        }

        @media (max-width: 768px) {
          .hud-text.bottom-left {
            left: 6%;
            bottom: 15%;
          }

          .hud-text.bottom-right {
            right: 6%;
            bottom: 15%;
          }

          .jarvis-status-bar {
            bottom: 6%;
            right: auto;
            text-align: center;
          }
        }

        .status-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: var(--jarvis-accent);
          box-shadow:
            0 0 10px rgba(0, 255, 209, 0.95),
            0 0 24px rgba(0, 217, 255, 0.85);
          position: relative;
        }

        .status-dot::after {
          content: "";
          position: absolute;
          inset: -6px;
          border-radius: inherit;
          border: 1px solid rgba(0, 255, 209, 0.5);
          animation: status-dot-ping 1.8s ease-out infinite;
        }

        @keyframes status-dot-ping {
          0% {
            opacity: 0.8;
            transform: scale(0.6);
          }
          100% {
            opacity: 0;
            transform: scale(1.4);
          }
        }

        .status-text {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #c8f7ff;
        }

        .status-label {
          opacity: 0.9;
        }

        .status-value {
          font-weight: 500;
          color: var(--jarvis-secondary);
        }

        /* Vignette */
        .vignette {
          position: absolute;
          inset: 0;
          pointer-events: none;
          background:
            radial-gradient(circle at center, transparent 0%, transparent 55%, rgba(0, 0, 0, 0.75) 100%);
          mix-blend-mode: multiply;
          opacity: 0.65;
        }
    
        /* ═══════════════════════════════════════════════════════════════
           FIXED CYBER PROJECTS SECTION - DYNAMIC HEXAGON CIRCUIT
           ═══════════════════════════════════════════════════════════════ */

        .panel.holo-panel.holo-panel-3.panel-scanline {
            z-index: 0;
            background: linear-gradient(140deg, rgba(0, 20, 40, 0.8), rgba(0, 10, 30, 0.65));
            box-shadow: 0 0 30px rgba(0, 217, 255, 0.25), inset 0 0 50px rgba(0, 217, 255, 0.05);
            isolation: isolate;
            backface-visibility: hidden;
            transform: translateZ(0);
        }

        .panel.holo-panel.holo-panel-3.panel-scanline::before {
            left: 2px;
            right: 2px;
            border-radius: 8px;
            backface-visibility: hidden;
            transform: translateZ(0);
        }

        .panel.holo-panel.holo-panel-3.panel-scanline::after {
            content: '';
            position: absolute;
            inset: 2px;
            background: repeating-linear-gradient(
                180deg,
                rgba(0, 217, 255, 0.18) 0px,
                rgba(0, 217, 255, 0.08) 2px,
                transparent 3px,
                transparent 6px
            );
            opacity: 0.2;
            animation: signal-scan 8s linear infinite;
            pointer-events: none;
            border-radius: 8px;
            box-shadow: inset 0 0 50px rgba(0, 217, 255, 0.05);
            z-index: 0;
            backface-visibility: hidden;
            transform: translateZ(0);
        }

        @keyframes star-field-drift {
            from { background-position: 0 0; }
            to { background-position: 40px 40px; }
        }

        /* Dynamic SVG layer */
        .circuit-svg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0.95;
            pointer-events: none;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .circuit-svg {
            z-index: -1;
        }

        .circuit-path {
            fill: none;
            stroke: rgba(0,217,255,0.4);
            stroke-width: 2;
            stroke-linecap: round;
            filter: url(#circuit-glow-enhanced);
        }

        .circuit-path-glow {
            fill: none;
            stroke: rgba(0,217,255,0.2);
            stroke-width: 6;
            stroke-linecap: round;
            filter: blur(8px);
        }

        .circuit-node {
            fill: rgba(0,217,255,0.3);
            stroke: rgba(0,217,255,0.8);
            stroke-width: 2;
            filter: url(#node-glow);
        }

        .circuit-particle {
            fill: url(#particle-gradient);
            filter: drop-shadow(0 0 6px rgba(0,255,255,0.9));
            pointer-events: none;
            opacity: 0.95;
            transition: opacity 0.4s ease;
        }

        /* Hexagon row - responsive layout */
        .hexagon-row {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(15px, 3vw, 40px);
            max-width: 100%;
            width: 100%;
            z-index: 10;
            flex-wrap: nowrap;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hexagon-row {
            min-height: 360px;
            padding: 0 30px 20px;
        }

        @media (max-width: 768px) {
            .hexagon-row {
                flex-direction: column;
                gap: clamp(30px, 6vw, 50px);
                padding: 20px 0;
            }

            .panel.holo-panel.holo-panel-3.panel-scanline .hexagon-row {
                padding: 0 30px 20px;
            }
        }

        /* Hexagon container - dynamic sizing */
        .hex-container {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            animation: hex-float-smooth 4s ease-in-out infinite;
            will-change: transform;
            overflow: visible;
        }

        .hex-container:nth-child(1) { animation-delay: 0s; }
        .hex-container:nth-child(2) { animation-delay: 0.3s; }
        .hex-container:nth-child(3) { animation-delay: 0.6s; }
        .hex-container:nth-child(4) { animation-delay: 0.9s; }
        .hex-container:nth-child(5) { animation-delay: 1.2s; }

        .hex-container.hex-center {
            transform: scale(1.15);
        }

        @keyframes hex-float-smooth {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @media (max-width: 768px) {
            .hex-container.hex-center {
                transform: scale(1.25);
            }

            @keyframes hex-float-smooth {
                0%, 100% { transform: translateX(0); }
                50% { transform: translateX(8px); }
            }
        }

        /* Hexagon - proper sizing with clamp() */
        .hexagon {
            width: clamp(90px, 9vw, 140px);
            height: calc(clamp(90px, 9vw, 140px) * 1.15);
            position: relative;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            background: 
                radial-gradient(circle at 50% 50%, rgba(0,217,255,0.05), rgba(0,40,80,0.02)),
                linear-gradient(135deg, rgba(0,217,255,0.03), rgba(0,100,150,0.01));
            backdrop-filter: blur(12px) saturate(120%);
            -webkit-backdrop-filter: blur(12px) saturate(120%);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            overflow: hidden;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hex-container .signal-data-flow {
            opacity: 0.35;
            clip-path: var(--hex-clip);
            -webkit-clip-path: var(--hex-clip);
            z-index: 0;
        }

        /* Hexagon border overlay - NO rectangular artifacts */
        .hex-border {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }

        .hex-border-path {
            vector-effect: non-scaling-stroke;
            filter: drop-shadow(0 0 8px rgba(0,217,255,0.6));
            transition: all 0.4s ease;
            animation: hex-border-pulse 3s ease-in-out infinite;
        }

        @keyframes hex-border-pulse {
            0%, 100% {
                stroke: rgba(0,217,255,0.6);
                stroke-width: 2;
                filter: drop-shadow(0 0 8px rgba(0,217,255,0.6));
            }
            50% {
                stroke: rgba(0,217,255,0.85);
                stroke-width: 2.5;
                filter: drop-shadow(0 0 15px rgba(0,217,255,0.9));
            }
        }

        .hex-container.hex-center .hex-border-path {
            stroke: rgba(0,217,255,0.8);
            stroke-width: 2.5;
            filter: drop-shadow(0 0 12px rgba(0,217,255,0.8));
        }

        /* Inner glow effect */
        .hex-inner-glow {
            position: absolute;
            inset: 15%;
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            background: radial-gradient(circle, rgba(0,217,255,0.15), transparent 70%);
            filter: blur(15px);
            opacity: 0.5;
            animation: inner-glow-pulse 3s ease-in-out infinite;
            pointer-events: none;
            z-index: 1;
        }

        @keyframes inner-glow-pulse {
            0%, 100% {
                opacity: 0.4;
                transform: scale(0.9);
            }
            50% {
                opacity: 0.7;
                transform: scale(1.1);
            }
        }

        /* Hexagon content - centered */
        .hex-content {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: clamp(6px, 1.2vw, 12px);
            width: 80%;
            height: 80%;
            z-index: 3;
            text-align: center;
        }

        /* Icon inside hexagon */
        .hex-icon {
            width: clamp(28px, 4vw, 48px);
            height: clamp(28px, 4vw, 48px);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #00d9ff;
            filter: drop-shadow(0 0 8px rgba(0,217,255,0.9));
            transition: all 0.4s ease;
        }

        .hex-icon svg {
            width: 100%;
            height: 100%;
            stroke: currentColor;
        }

        /* Label inside hexagon */
        .hex-label {
            font-size: clamp(0.45rem, 0.65vw, 0.7rem);
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            line-height: 1.3;
            color: #00d9ff;
            text-shadow: 0 0 8px rgba(0,217,255,0.7);
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .hex-container.hex-center .hex-label {
            font-size: clamp(0.5rem, 0.75vw, 0.8rem);
            font-weight: 600;
        }

        /* Hover effects */
        .hex-container:hover .hexagon {
            background: 
                radial-gradient(circle at 50% 50%, rgba(0,217,255,0.12), rgba(0,60,100,0.05));
            transform: scale(1.08);
        }

        .hex-container:hover .hex-border-path {
            stroke: rgba(0,255,255,0.95);
            stroke-width: 3;
            filter: drop-shadow(0 0 20px rgba(0,255,255,1));
        }

        .hex-container:hover .hex-icon {
            transform: scale(1.15);
            filter: drop-shadow(0 0 15px rgba(0,255,255,1));
        }

        .hex-container:hover .hex-label {
            color: #00ffff;
            text-shadow: 0 0 12px rgba(0,255,255,1);
        }

        .hex-container:hover .hex-inner-glow {
            opacity: 0.9;
            transform: scale(1.2);
        }

        /* Mobile optimizations */
        @media (max-width: 480px) {
            .panel.holo-panel.holo-panel-3.panel-scanline .hexagon-row {
                min-height: 440px;
                padding: 0 30px 20px;
            }

            .hexagon {
                width: clamp(100px, 20vw, 120px);
                height: calc(clamp(100px, 20vw, 120px) * 1.15);
            }

            .hex-label {
                font-size: clamp(0.5rem, 2vw, 0.65rem);
            }
        }

        /* Reduced motion support */
        @media (prefers-reduced-motion: reduce) {
            .hex-container,
            .hex-border-path,
            .hex-inner-glow,
            .panel.holo-panel.holo-panel-3.panel-scanline::after {
                animation: none !important;
            }

            .circuit-particle {
                display: none;
            }
        }

        /* Cyber projects hexagon overrides */
        .panel.holo-panel.holo-panel-3.panel-scanline {
            --hex-side-size: 160px;
            --hex-center-size: 200px;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline {
            --hex-clip: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hexagon {
            width: var(--hex-side-size);
            height: calc(var(--hex-side-size) * 1.15);
            clip-path: var(--hex-clip);
            -webkit-clip-path: var(--hex-clip);
            overflow: hidden;
            background: transparent;
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            position: relative;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hexagon::before {
            content: none;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hexagon-row {
            gap: clamp(30px, 4vw, 70px);
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hex-container.hex-center .hexagon {
            width: var(--hex-center-size);
            height: calc(var(--hex-center-size) * 1.15);
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hex-inner-glow {
            display: none !important;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hex-inner-glow::after {
            content: none !important;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hex-icon {
            width: clamp(26px, 3.5vw, 42px);
            height: clamp(26px, 3.5vw, 42px);
            padding: clamp(4px, 0.8vw, 10px);
            margin-bottom: clamp(8px, 1vw, 16px);
            filter: none !important;
            transition: none;
            transform: none !important;
            position: relative;
            z-index: 2;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hex-container:hover .hex-icon {
            transform: none !important;
            filter: none !important;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hex-icon svg,
        .panel.holo-panel.holo-panel-3.panel-scanline .hex-icon svg * {
            fill: none !important;
            filter: none !important;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .circuit-node {
            border-radius: 50%;
            r: clamp(3.5px, 0.7vw, 6px);
            fill: rgba(0, 217, 255, 0.35);
            stroke: rgba(0, 217, 255, 0.9);
            stroke-width: 2.5;
            filter: none !important;
            animation: none !important;
            transition: none !important;
            transform: none !important;
            opacity: 0.95;
            pointer-events: none;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .circuit-node animate,
        .panel.holo-panel.holo-panel-3.panel-scanline .circuit-node animateTransform,
        .panel.holo-panel.holo-panel-3.panel-scanline .circuit-node animateMotion {
            display: none !important;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hex-content {
            width: 85%;
            height: 85%;
            gap: clamp(10px, 1.4vw, 16px);
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hex-label {
            margin-top: clamp(6px, 1vw, 14px);
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hex-border,
        .panel.holo-panel.holo-panel-3.panel-scanline .hex-border-path,
        .panel.holo-panel.holo-panel-3.panel-scanline .hex-inner-glow {
            clip-path: var(--hex-clip);
            -webkit-clip-path: var(--hex-clip);
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hex-border-path {
            filter: drop-shadow(0 0 12px rgba(0,217,255,0.65));
        }

        .panel.holo-panel.holo-panel-3.panel-scanline .hex-container:hover .hex-border-path {
            filter: drop-shadow(0 0 18px rgba(0,255,255,0.95));
        }

        @media (max-width: 768px) {
            .panel.holo-panel.holo-panel-3.panel-scanline {
                --hex-side-size: clamp(120px, 28vw, 140px);
                --hex-center-size: clamp(140px, 32vw, 160px);
            }
        }

        @media (max-width: 480px) {
            .panel.holo-panel.holo-panel-3.panel-scanline {
                --hex-side-size: clamp(110px, 38vw, 130px);
                --hex-center-size: clamp(130px, 42vw, 150px);
            }
        }

        /* Hex description popup */
        .hex-popup {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0.94);
            min-width: 220px;
            max-width: 360px;
            padding: 14px 16px;
            border: 1px solid rgba(0, 217, 255, 0.6);
            border-radius: 10px;
            background: rgba(8, 12, 28, 0.95);
            box-shadow: 0 12px 30px rgba(0, 12, 24, 0.45);
            color: #c6f7ff;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s ease;
            filter: blur(6px);
            will-change: opacity, transform, filter, box-shadow;
            backface-visibility: hidden;
            z-index: 40;
            text-align: left;
        }

        .hex-popup::before,
        .hex-popup::after {
            content: "";
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            pointer-events: none;
            opacity: 0;
            mix-blend-mode: screen;
        }

        .hex-popup::before {
            background: linear-gradient(90deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 140, 0.25), rgba(0, 140, 255, 0.2));
            filter: blur(1px);
            transform: translateX(-6px);
        }

        .hex-popup::after {
            background: linear-gradient(90deg, rgba(255, 80, 0, 0.15), rgba(0, 255, 160, 0.2), rgba(0, 120, 255, 0.2));
            filter: blur(0.5px);
            transform: translateX(6px);
        }

        .hex-popup-title {
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #00f0ff;
            margin-bottom: 8px;
        }

        .hex-popup-text {
            font-size: 0.75rem;
            line-height: 1.5;
            color: rgba(198, 247, 255, 0.9);
            /*text-align: justify;*/
        }

        .hex-container:hover .hex-popup,
        .hex-container.is-active .hex-popup {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
            filter: blur(0);
            animation: popup-reveal 0.45s ease-out both, popup-glow 0.7s ease-out both;
        }

        .hex-container:hover .hex-popup::before,
        .hex-container.is-active .hex-popup::before {
            animation: popup-glitch 0.35s steps(2, end) both;
        }

        .hex-container:hover .hex-popup::after,
        .hex-container.is-active .hex-popup::after {
            animation: popup-glitch 0.35s steps(2, end) both;
            animation-delay: 0.04s;
        }

        @keyframes popup-reveal {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.88);
                filter: blur(8px);
            }
            60% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.02);
                filter: blur(1px);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
                filter: blur(0);
            }
        }

        @keyframes popup-reveal-mobile {
            0% {
                opacity: 0;
                transform: translateY(20px) scale(0.88);
                filter: blur(8px);
            }
            60% {
                opacity: 1;
                transform: translateY(-2px) scale(1.02);
                filter: blur(1px);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0);
            }
        }

        @keyframes popup-glow {
            0% {
                box-shadow: 0 0 0 rgba(0, 217, 255, 0), 0 0 0 rgba(0, 217, 255, 0);
            }
            60% {
                box-shadow: 0 0 18px rgba(0, 217, 255, 0.55), 0 0 32px rgba(0, 217, 255, 0.35);
            }
            100% {
                box-shadow: 0 12px 30px rgba(0, 12, 24, 0.45);
            }
        }

        @keyframes popup-glitch {
            0% {
                opacity: 0;
                transform: translateX(0);
            }
            30% {
                opacity: 0.55;
                transform: translateX(-6px);
            }
            60% {
                opacity: 0.35;
                transform: translateX(6px);
            }
            100% {
                opacity: 0;
                transform: translateX(0);
            }
        }

        @media (max-width: 768px) {
            .hex-popup {
                position: fixed;
                left: 16px;
                right: 16px;
                bottom: 16px;
                top: auto;
                max-width: none;
                transform: translateY(20px);
            }

            .hex-container:hover .hex-popup,
            .hex-container.is-active .hex-popup {
                transform: translateY(0);
                animation: popup-reveal-mobile 0.45s ease-out both, popup-glow 0.7s ease-out both;
            }
        }