@keyframes loadBar { to { width: 100%; } }

@keyframes particleDrift {
            0% { opacity: 0; transform: translateY(0) translateX(0) scale(1); }
            10% { opacity: 0.8; }
            80% { opacity: 0.4; }
            100% { opacity: 0; transform: translateY(var(--dy)) translateX(var(--dx)) scale(0); }
        }

@keyframes scanDown {
            0% { top: -4px; }
            100% { top: 100vh; }
        }

@keyframes rgbCycle {
            0%   { border-color: var(--cyan); box-shadow: 0 0 15px var(--cyan-dim); }
            25%  { border-color: var(--pink); box-shadow: 0 0 15px var(--pink-dim); }
            50%  { border-color: var(--green); box-shadow: 0 0 15px var(--green-dim); }
            75%  { border-color: var(--purple); box-shadow: 0 0 15px var(--purple-dim); }
            100% { border-color: var(--cyan); box-shadow: 0 0 15px var(--cyan-dim); }
        }

@keyframes glitch1 {
            0%,92%,100%{transform:translate(0)}93%{transform:translate(-5px,-2px)}96%{transform:translate(3px,1px)}
        }

@keyframes glitch2 {
            0%,90%,100%{transform:translate(0)}91%{transform:translate(5px,2px)}94%{transform:translate(-3px,-1px)}
        }

@keyframes glitchFlash {
            0%,90%,100%{opacity:1;text-shadow:0 0 30px var(--cyan-dim)}
            92%{opacity:0.7;text-shadow:0 0 60px var(--pink-dim)}
            95%{opacity:1;text-shadow:0 0 30px var(--cyan-dim),0 0 60px var(--green-dim)}
        }

@keyframes gridPulse {
            0%,100%{opacity:0.7}50%{opacity:1}
        }

@keyframes blink { 0%,100%{opacity:1}50%{opacity:0.3} }

@keyframes holoShimmer {
            0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}
        }

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

.view-gaming {
/* ═══════════════════════════════════════════
           CYBERPUNK NEON — GAMING ZONE
        ═══════════════════════════════════════════ */
        & {
            --cyan: #00f5ff;
            --cyan-dim: rgba(0,245,255,0.4);
            --pink: #ff2d95;
            --pink-dim: rgba(255,45,149,0.4);
            --green: #39ff14;
            --green-dim: rgba(57,255,20,0.4);
            --purple: #b24dff;
            --purple-dim: rgba(178,77,255,0.4);
            --yellow: #ffe600;
            --yellow-dim: rgba(255,230,0,0.4);
            --orange: #ff6b2b;

            --bg-deep: #030318;
            --bg-mid: #0a0a2e;
            --bg-card: rgba(8,8,40,0.85);
            --bg-card-solid: #0c0c30;
            --border: rgba(0,245,255,0.12);
            --text: #e0e0f0;
            --text-dim: rgba(200,200,230,0.55);

            --font-display: 'Audiowide', 'Impact', sans-serif;
            --font-heading: 'Rajdhani', 'Segoe UI', sans-serif;
            --font-&: 'Exo 2', system-ui, sans-serif;
            --font-mono: 'Share Tech Mono', monospace;

            --ease: cubic-bezier(0.16, 1, 0.3, 1);
        }

        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        & { scroll-behavior: smooth; }
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: var(--bg-deep); }
        ::-webkit-scrollbar-thumb { background: var(--cyan); border-radius: 3px; box-shadow: 0 0 8px var(--cyan-dim); }

        & {
            font-family: var(--font-&);
            background: var(--bg-deep);
            color: var(--text);
            overflow-x: hidden;
            cursor: crosshair;
        }
        ::selection { background: var(--pink); color: #fff; }
        img { max-width: 100%; display: block; }
        a { text-decoration: none; color: inherit; cursor: crosshair; }
        button, input, select, textarea { cursor: crosshair; }

        /* ═══════════════════════════════════════════
           LOADING SCREEN
        ═══════════════════════════════════════════ */
        #loader {
            position: fixed; inset: 0; z-index: 99999;
            background: var(--bg-deep);
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            transition: opacity 0.8s, visibility 0.8s;
        }
        #loader.done { opacity: 0; visibility: hidden; pointer-events: none; }

        .loader__title {
            font-family: var(--font-display);
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--cyan);
            text-shadow: 0 0 30px var(--cyan-dim), 0 0 60px var(--cyan-dim);
            animation: glitchFlash 3s ease-in-out infinite;
            margin-bottom: 2rem;
        }
        .loader__bar-wrap {
            width: 200px; height: 3px;
            background: rgba(0,245,255,0.1);
            border-radius: 2px; overflow: hidden;
        }
        .loader__bar {
            height: 100%; width: 0;
            background: linear-gradient(90deg, var(--cyan), var(--pink), var(--green));
            animation: loadBar 2s ease forwards;
            border-radius: 2px;
            box-shadow: 0 0 10px var(--cyan);
        }
        .loader__pct {
            font-family: var(--font-mono);
            font-size: 0.7rem;
            color: var(--cyan);
            margin-top: 0.8rem;
            letter-spacing: 0.2em;
        }
        

        /* ═══════════════════════════════════════════
           NEON PARTICLES
        ═══════════════════════════════════════════ */
        #particles {
            position: fixed; inset: 0;
            pointer-events: none; z-index: 1;
            overflow: hidden;
        }
        .particle {
            position: absolute;
            border-radius: 50%;
            opacity: 0;
            animation: particleDrift linear infinite;
        }
        

        /* ═══════════════════════════════════════════
           SCANLINE EFFECT
        ═══════════════════════════════════════════ */
        .scanline {
            position: fixed; inset: 0;
            pointer-events: none; z-index: 2;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0,0,0,0.08) 2px,
                rgba(0,0,0,0.08) 4px
            );
        }
        .scanline::after {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            background: linear-gradient(90deg, transparent, var(--cyan-dim), transparent);
            animation: scanDown 8s linear infinite;
            opacity: 0.4;
        }
        

        /* ═══════════════════════════════════════════
           RGB BORDER
        ═══════════════════════════════════════════ */
        

        /* ═══════════════════════════════════════════
           NEON SEPARATOR
        ═══════════════════════════════════════════ */
        .neon-sep {
            width: 100%; height: 2px; position: relative; overflow: visible;
            background: linear-gradient(90deg, transparent 5%, var(--cyan) 20%, var(--pink) 50%, var(--green) 80%, transparent 95%);
            box-shadow: 0 0 15px var(--cyan-dim), 0 0 30px var(--pink-dim);
        }
        .neon-sep::after {
            content: '';
            position: absolute; inset: -8px 0;
            background: linear-gradient(90deg, transparent, var(--cyan-dim), var(--pink-dim), transparent);
            filter: blur(8px);
        }

        /* ═══════════════════════════════════════════
           GLITCH TEXT
        ═══════════════════════════════════════════ */
        .glitch {
            position: relative;
            display: inline-block;
        }
        .glitch::before, .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            pointer-events: none;
        }
        .glitch::before {
            color: var(--cyan);
            animation: glitch1 4s infinite linear alternate-reverse;
            clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
        }
        .glitch::after {
            color: var(--pink);
            animation: glitch2 3s infinite linear alternate-reverse;
            clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
        }
        
        
        

        /* ═══════════════════════════════════════════
           NAVIGATION
        ═══════════════════════════════════════════ */
        .nav {
            position: fixed; top: 0; left: 0; right: 0;
            z-index: 1000; height: 68px;
            padding: 0 3.5rem;
            display: flex; justify-content: space-between; align-items: center;
            transition: all 0.4s;
        }
        .nav.scrolled {
            background: rgba(3,3,24,0.92);
            backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 2px 30px rgba(0,245,255,0.06);
        }
        .nav__brand { display: flex; align-items: center; gap: 0.7rem; }
        .nav__logo-img {
            height: 40px;
            width: auto;
            object-fit: contain;
            border-radius: 4px;
            border: 1px solid rgba(0,245,255,.15);
            transition: all .4s;
        }
        .nav__brand:hover .nav__logo-img{border-color:var(--cyan);box-shadow:0 0 15px var(--cyan-dim)}
        .nav__logo-text {
            font-family: var(--font-heading);
            font-size: 0.68rem; font-weight: 700;
            letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--text-dim); line-height: 1.3;
        }
        .nav__links { display: flex; gap: 1.8rem; list-style: none; align-items: center; }
        .nav__link {
            font-family: var(--font-heading);
            font-size: 0.82rem; font-weight: 700;
            letter-spacing: 0.08em; text-transform: uppercase;
            color: var(--text-dim);
            padding: 0.3rem 0; position: relative;
            transition: color 0.25s, text-shadow 0.25s;
        }
        .nav__link::after {
            content: ''; position: absolute;
            bottom: -2px; left: 0; width: 0; height: 2px;
            background: var(--cyan);
            box-shadow: 0 0 8px var(--cyan-dim);
            transition: width 0.3s var(--ease);
        }
        .nav__link:hover { color: var(--cyan); text-shadow: 0 0 15px var(--cyan-dim); }
        .nav__link:hover::after { width: 100%; }
        .nav__cta {
            font-family: var(--font-heading);
            font-size: 0.78rem; font-weight: 800;
            letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--bg-deep);
            background: var(--cyan);
            padding: 0.5rem 1.4rem;
            border: none;
            clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
            transition: all 0.25s;
            text-shadow: none;
        }
        .nav__cta:hover {
            background: var(--pink);
            box-shadow: 0 0 25px var(--pink-dim);
        }
        .nav__burger {
            display: none; flex-direction: column; gap: 5px;
            cursor: crosshair; padding: 8px; background: none; border: none;
        }
        .nav__burger span { width: 24px; height: 2px; background: var(--cyan); transition: 0.3s; box-shadow: 0 0 4px var(--cyan-dim); }

        .mobile-nav {
            position: fixed; inset: 0; z-index: 999;
            background: rgba(3,3,24,0.97);
            display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 1.8rem;
            opacity: 0; pointer-events: none; transition: opacity 0.4s;
        }
        .mobile-nav.open { opacity: 1; pointer-events: all; }
        .mobile-nav__link {
            font-family: var(--font-display); font-size: 2rem;
            color: var(--text); text-transform: uppercase;
            letter-spacing: 0.1em; transition: all 0.3s;
        }
        .mobile-nav__link:hover { color: var(--cyan); text-shadow: 0 0 20px var(--cyan-dim); }
        .mobile-nav__close {
            position: absolute; top: 1.5rem; right: 1.5rem;
            font-size: 2rem; color: var(--pink);
            background: none; border: none;
            font-family: var(--font-mono);
        }

        /* ═══════════════════════════════════════════
           HERO + SLIDES
        ═══════════════════════════════════════════ */
        .hero {
            position: relative;
            width: 100%; height: 100vh; min-height: 650px;
            overflow: hidden; background: var(--bg-deep);
        }
        .hero__video {
            position: absolute; top: 50%; left: 50%;
            min-width: 100%; min-height: 100%;
            transform: translate(-50%,-50%);
            object-fit: cover; opacity: 0.3;
            filter: hue-rotate(200deg) saturate(1.5);
        }
        .hero__overlay {
            position: absolute; inset: 0;
            background:
                radial-gradient(ellipse at 30% 40%, rgba(0,245,255,0.06) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 60%, rgba(255,45,149,0.04) 0%, transparent 50%),
                linear-gradient(180deg,
                    rgba(3,3,24,0.6) 0%,
                    rgba(3,3,24,0.15) 35%,
                    rgba(3,3,24,0.3) 60%,
                    rgba(3,3,24,1) 100%
                );
            pointer-events: none;
        }

        /* Perspective Grid Floor */
        .hero__grid {
            position: absolute; bottom: 0; left: -30%; right: -30%;
            height: 35%;
            background:
                linear-gradient(rgba(0,245,255,0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,245,255,0.08) 1px, transparent 1px);
            background-size: 50px 50px;
            transform: perspective(400px) rotateX(55deg);
            transform-origin: bottom center;
            mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 80%);
            -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 80%);
            pointer-events: none;
            animation: gridPulse 4s ease-in-out infinite;
        }
        

        /* HUD Overlay */
        .hud {
            position: absolute; inset: 0; z-index: 5;
            pointer-events: none;
        }
        .hud__corner {
            position: absolute;
            width: 40px; height: 40px;
            border-color: var(--cyan);
            border-style: solid;
            opacity: 0.4;
        }
        .hud__corner--tl { top: 20px; left: 20px; border-width: 2px 0 0 2px; }
        .hud__corner--tr { top: 20px; right: 20px; border-width: 2px 2px 0 0; }
        .hud__corner--bl { bottom: 20px; left: 20px; border-width: 0 0 2px 2px; }
        .hud__corner--br { bottom: 20px; right: 20px; border-width: 0 2px 2px 0; }
        .hud__data {
            position: absolute;
            font-family: var(--font-mono);
            font-size: 0.6rem;
            color: var(--cyan);
            letter-spacing: 0.12em;
            opacity: 0.45;
            text-shadow: 0 0 8px var(--cyan-dim);
        }
        .hud__data--tl { top: 28px; left: 68px; }
        .hud__data--tr { top: 88px; right: 68px; text-align: right; }
        .hud__data--bl { bottom: 28px; left: 68px; }
        .hud__data-dot {
            display: inline-block; width: 6px; height: 6px;
            background: var(--green);
            border-radius: 50%;
            margin-right: 6px;
            box-shadow: 0 0 6px var(--green);
            animation: blink 2s ease-in-out infinite;
        }
        

        /* Slides */
        .slides { position: relative; z-index: 6; width: 100%; height: 100%; }
        .slide {
            position: absolute; inset: 0;
            display: flex; align-items: center;
            padding: 0 4rem;
            opacity: 0; transform: translateY(15px) scale(1.02);
            transition: opacity 0.7s, transform 0.7s var(--ease);
            pointer-events: none;
        }
        .slide.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
        .slide__inner { max-width: 720px; }
        .slide__label {
            font-family: var(--font-mono);
            font-size: 0.7rem;
            letter-spacing: 0.25em; text-transform: uppercase;
            color: var(--cyan);
            margin-bottom: 1.2rem;
            display: flex; align-items: center; gap: 0.6rem;
            text-shadow: 0 0 10px var(--cyan-dim);
        }
        .slide__label-dot {
            width: 8px; height: 8px;
            background: var(--green);
            box-shadow: 0 0 8px var(--green);
            animation: blink 2s ease infinite;
        }
        .slide__title {
            font-family: var(--font-display);
            font-size: clamp(3rem, 9vw, 6.5rem);
            line-height: 1;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #fff;
            margin-bottom: 1.5rem;
        }

        /* Neon highlight styles */
        .n-cyan { color: var(--cyan); text-shadow: 0 0 25px var(--cyan-dim), 0 0 50px var(--cyan-dim); }
        .n-pink { color: var(--pink); text-shadow: 0 0 25px var(--pink-dim), 0 0 50px var(--pink-dim); }
        .n-green { color: var(--green); text-shadow: 0 0 25px var(--green-dim); }
        .n-purple { color: var(--purple); text-shadow: 0 0 25px var(--purple-dim); }
        .n-box {
            background: var(--cyan);
            color: var(--bg-deep);
            padding: 0 0.12em;
            text-shadow: none;
            display: inline-block;
            box-shadow: 0 0 20px var(--cyan-dim);
        }
        .n-box--pink { background: var(--pink); box-shadow: 0 0 20px var(--pink-dim); }
        .n-underline {
            position: relative; display: inline-block;
        }
        .n-underline::after {
            content: '';
            position: absolute; bottom: 0; left: 0; right: 0;
            height: 0.12em;
            background: var(--pink);
            box-shadow: 0 0 10px var(--pink-dim);
        }

        .slide__desc {
            font-size: 1.05rem; font-weight: 300;
            color: var(--text-dim);
            max-width: 480px; line-height: 1.8;
            margin-bottom: 2rem;
        }
        .slide__desc strong { color: var(--cyan); font-weight: 600; }
        .slide__btns { display: flex; gap: 1rem; flex-wrap: wrap; }

        /* Buttons */
        .btn-neon {
            font-family: var(--font-heading);
            font-size: 0.82rem; font-weight: 800;
            letter-spacing: 0.1em; text-transform: uppercase;
            padding: 0.85rem 2rem;
            border: none; cursor: crosshair;
            transition: all 0.3s var(--ease);
            position: relative; overflow: hidden;
            clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
        }
        .btn-neon--cyan {
            background: var(--cyan); color: var(--bg-deep);
        }
        .btn-neon--cyan:hover {
            background: #fff; color: var(--bg-deep);
            box-shadow: 0 0 30px var(--cyan-dim), 0 0 60px var(--cyan-dim);
            transform: translateY(-2px);
        }
        .btn-neon--ghost {
            background: transparent; color: var(--cyan);
            border: 2px solid var(--cyan);
            clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
        }
        .btn-neon--ghost:hover {
            background: rgba(0,245,255,0.1);
            box-shadow: 0 0 25px var(--cyan-dim);
            transform: translateY(-2px);
        }

        /* Slide dots */
        .slides__dots {
            position: absolute; bottom: 3rem; left: 4rem;
            display: flex; gap: 0.5rem; z-index: 10;
        }
        .slides__dot {
            width: 35px; height: 3px;
            background: rgba(0,245,255,0.15);
            border: none; cursor: crosshair;
            transition: all 0.3s;
        }
        .slides__dot.active {
            background: var(--cyan);
            box-shadow: 0 0 10px var(--cyan-dim);
        }
        .slides__progress {
            position: absolute; bottom: 0; left: 0; right: 0;
            height: 3px; z-index: 10;
            background: rgba(0,245,255,0.06);
        }
        .slides__bar {
            height: 100%; width: 0;
            background: linear-gradient(90deg, var(--cyan), var(--pink));
            box-shadow: 0 0 12px var(--cyan-dim);
        }

        /* ═══════════════════════════════════════════
           SECTIONS SHARED
        ═══════════════════════════════════════════ */
        .sec { padding: 7rem 4rem; position: relative; overflow: hidden; }
        .sec--dark { background: var(--bg-deep); }
        .sec--alt { background: var(--bg-mid); }

        .sec-label {
            font-family: var(--font-mono);
            font-size: 0.68rem;
            letter-spacing: 0.25em; text-transform: uppercase;
            color: var(--cyan);
            margin-bottom: 0.8rem;
            display: flex; align-items: center; gap: 0.8rem;
            text-shadow: 0 0 10px var(--cyan-dim);
        }
        .sec-label::before {
            content: '//';
            color: var(--pink);
        }
        .sec-title {
            font-family: var(--font-display);
            font-size: clamp(2.2rem, 5vw, 4rem);
            line-height: 1.05;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #fff;
            margin-bottom: 1.5rem;
        }
        .sec-text {
            font-size: 1rem; font-weight: 300;
            line-height: 1.8; color: var(--text-dim);
            max-width: 520px;
        }
        .sec-text strong { color: var(--cyan); font-weight: 500; }

        /* Watermark */
        .sec__watermark {
            position: absolute;
            font-family: var(--font-display);
            font-size: clamp(10rem, 25vw, 28rem);
            line-height: 1;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(0,245,255,0.02);
            top: 50%; right: 3%;
            transform: translateY(-50%);
            pointer-events: none; user-select: none;
        }

        /* Scroll Reveal */
        .rv { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
        .rv.vis { opacity: 1; transform: translateY(0); }
        .rv-r { opacity: 0; transform: translateX(50px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
        .rv-r.vis { opacity: 1; transform: translateX(0); }

        /* ═══════════════════════════════════════════
           ABOUT — "LEVEL UP YOUR VISION"
        ═══════════════════════════════════════════ */
        .about__grid {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 5rem; align-items: center;
            position: relative; z-index: 1;
        }
        .about__stats {
            display: flex; gap: 3rem;
            margin-top: 2.5rem; padding-top: 2rem;
            border-top: 1px solid var(--border);
        }
        .about__stat-num {
            font-family: var(--font-display);
            font-size: 3rem; line-height: 1;
            color: var(--cyan);
            text-shadow: 0 0 20px var(--cyan-dim);
        }
        .about__stat-label {
            font-family: var(--font-mono);
            font-size: 0.65rem;
            letter-spacing: 0.08em; text-transform: uppercase;
            color: var(--text-dim);
            margin-top: 0.3rem;
        }
        .about__cards {
            display: flex; gap: 1.2rem; justify-content: center;
        }
        .about__card {
            width: 200px; height: 280px;
            position: relative; overflow: hidden;
            border: 1px solid var(--border);
            transition: all 0.4s var(--ease);
        }
        .about__card:hover {
            border-color: var(--cyan);
            box-shadow: 0 0 30px var(--cyan-dim);
            transform: translateY(-6px);
        }
        .about__card:first-child { transform: translateY(1.5rem); }
        .about__card:last-child { transform: translateY(-1.5rem); }
        .about__card:first-child:hover { transform: translateY(calc(1.5rem - 6px)); }
        .about__card:last-child:hover { transform: translateY(calc(-1.5rem - 6px)); }
        .about__card-bg {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
        }
        .about__card:first-child .about__card-bg {
            background: linear-gradient(160deg, rgba(0,245,255,0.15) 0%, var(--bg-deep) 100%);
        }
        .about__card:last-child .about__card-bg {
            background: linear-gradient(160deg, rgba(255,45,149,0.15) 0%, var(--bg-deep) 100%);
        }
        .about__card-icon { font-size: 4rem; }
        .about__card-label {
            position: absolute; bottom: 1.2rem; left: 1.2rem;
            font-family: var(--font-heading);
            font-size: 0.65rem; font-weight: 800;
            letter-spacing: 0.12em; text-transform: uppercase;
            color: var(--cyan);
            text-shadow: 0 0 10px var(--cyan-dim);
        }
        /* Holo shimmer */
        .about__card::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(
                105deg,
                transparent 35%,
                rgba(0,245,255,0.08) 42%,
                rgba(255,45,149,0.08) 50%,
                rgba(57,255,20,0.08) 58%,
                transparent 65%
            );
            background-size: 300% 300%;
            animation: holoShimmer 6s ease-in-out infinite;
            pointer-events: none;
        }
        

        /* ═══════════════════════════════════════════
           PRODUCTS — "SELECT YOUR LOADOUT"
        ═══════════════════════════════════════════ */
        .products__header { margin-bottom: 3.5rem; }
        .products__grid {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 1.8rem;
        }
        .pcard {
            position: relative; overflow: hidden;
            background: var(--bg-card);
            border: 1px solid var(--border);
            transition: all 0.5s var(--ease);
            opacity: 0; transform: translateY(35px);
        }
        .pcard.vis { opacity: 1; transform: translateY(0); }
        .pcard:hover {
            border-color: var(--cyan);
            box-shadow: 0 0 40px var(--cyan-dim), inset 0 0 30px rgba(0,245,255,0.03);
            transform: translateY(-8px);
        }

        /* Spinning border light */
        .pcard::before {
            content: '';
            position: absolute; inset: -1px;
            background: conic-gradient(from 0deg, transparent 60%, var(--cyan) 75%, var(--pink) 85%, transparent 100%);
            z-index: -1;
            opacity: 0;
            animation: spinBorder 3s linear infinite;
            transition: opacity 0.5s;
        }
        .pcard:hover::before { opacity: 1; }
        
        .pcard::after {
            content: '';
            position: absolute; inset: 1px;
            background: var(--bg-card-solid);
            z-index: 0;
        }

        .pcard__visual {
            aspect-ratio: 4/3; position: relative; overflow: hidden;
            z-index: 1;
        }
        .pcard__bg {
            position: absolute; inset: 0;
            transition: transform 0.6s var(--ease);
        }
        .pcard:hover .pcard__bg { transform: scale(1.1); }

        .pcard:nth-child(1) .pcard__bg { background: linear-gradient(160deg, rgba(0,245,255,0.3) 0%, rgba(0,100,120,0.2) 40%, var(--bg-deep) 100%); }
        .pcard:nth-child(2) .pcard__bg { background: linear-gradient(160deg, rgba(255,45,149,0.3) 0%, rgba(140,20,80,0.2) 40%, var(--bg-deep) 100%); }
        .pcard:nth-child(3) .pcard__bg { background: linear-gradient(160deg, rgba(178,77,255,0.3) 0%, rgba(90,30,150,0.2) 40%, var(--bg-deep) 100%); }

        .pcard__icon {
            position: absolute; top: 40%; left: 50%;
            transform: translate(-50%,-50%);
            font-size: 5rem; z-index: 2;
            filter: drop-shadow(0 0 20px rgba(0,245,255,0.4));
            transition: transform 0.5s var(--ease);
        }
        .pcard:hover .pcard__icon { transform: translate(-50%,-55%) scale(1.2); }

        .pcard__badge {
            position: absolute; top: 0.8rem; left: 0.8rem;
            font-family: var(--font-mono);
            font-size: 0.58rem; font-weight: 400;
            letter-spacing: 0.15em; text-transform: uppercase;
            padding: 0.25rem 0.6rem; z-index: 3;
        }
        .pcard:nth-child(1) .pcard__badge { background: var(--cyan); color: var(--bg-deep); box-shadow: 0 0 12px var(--cyan-dim); }
        .pcard:nth-child(2) .pcard__badge { background: var(--pink); color: #fff; box-shadow: 0 0 12px var(--pink-dim); }
        .pcard:nth-child(3) .pcard__badge { background: var(--purple); color: #fff; box-shadow: 0 0 12px var(--purple-dim); }

        .pcard__content {
            padding: 1.8rem; position: relative; z-index: 1;
            background: linear-gradient(to top, var(--bg-card-solid) 60%, transparent);
        }
        .pcard__cat {
            font-family: var(--font-mono);
            font-size: 0.6rem;
            letter-spacing: 0.15em; text-transform: uppercase;
            color: var(--text-dim);
            margin-bottom: 0.4rem;
        }
        .pcard__name {
            font-family: var(--font-display);
            font-size: 1.6rem; letter-spacing: 0.05em;
            text-transform: uppercase; color: #fff;
            margin-bottom: 0.5rem;
        }
        .pcard__desc {
            font-size: 0.82rem; color: var(--text-dim);
            line-height: 1.6; margin-bottom: 1rem;
        }

        /* RPG Stat Bars */
        .pcard__stats { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
        .stat {
            display: flex; align-items: center; gap: 0.6rem;
        }
        .stat__label {
            font-family: var(--font-mono);
            font-size: 0.55rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-dim);
            width: 72px; flex-shrink: 0;
        }
        .stat__bar-wrap {
            flex: 1; height: 6px;
            background: rgba(0,245,255,0.08);
            position: relative; overflow: hidden;
        }
        .stat__bar {
            height: 100%; width: 0;
            transition: width 1.5s var(--ease);
            position: relative;
        }
        .stat__bar::after {
            content: '';
            position: absolute; right: 0; top: 0; bottom: 0; width: 4px;
            background: #fff;
            filter: blur(2px);
        }
        .stat__bar--cyan { background: linear-gradient(90deg, rgba(0,245,255,0.3), var(--cyan)); box-shadow: 0 0 8px var(--cyan-dim); }
        .stat__bar--pink { background: linear-gradient(90deg, rgba(255,45,149,0.3), var(--pink)); box-shadow: 0 0 8px var(--pink-dim); }
        .stat__bar--green { background: linear-gradient(90deg, rgba(57,255,20,0.3), var(--green)); box-shadow: 0 0 8px var(--green-dim); }
        .stat__bar--purple { background: linear-gradient(90deg, rgba(178,77,255,0.3), var(--purple)); box-shadow: 0 0 8px var(--purple-dim); }

        .stat__val {
            font-family: var(--font-mono);
            font-size: 0.6rem;
            color: var(--cyan);
            width: 32px; text-align: right;
        }

        .pcard__price {
            font-family: var(--font-display);
            font-size: 1.4rem; color: var(--green);
            text-shadow: 0 0 15px var(--green-dim);
        }
        .pcard__price span {
            font-family: var(--font-&);
            font-size: 0.75rem; color: var(--text-dim);
            text-shadow: none;
        }

        /* ═══════════════════════════════════════════
           GALLERY — "THE ARENA"
        ═══════════════════════════════════════════ */
        .gallery__header { margin-bottom: 3rem; }
        .gal-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 1rem;
        }
        .gal-item {
            position: relative; overflow: hidden;
            background: var(--bg-card);
            border: 1px solid var(--border);
            cursor: crosshair;
            opacity: 0; transform: scale(0.96);
            transition: all 0.6s var(--ease);
        }
        .gal-item.vis { opacity: 1; transform: scale(1); }
        .gal-item:hover {
            border-color: var(--cyan);
            box-shadow: 0 0 30px var(--cyan-dim);
        }
        .gal-item--w { grid-column: span 7; aspect-ratio: 16/9; }
        .gal-item--t { grid-column: span 5; aspect-ratio: 4/3; }
        .gal-item--s { grid-column: span 4; aspect-ratio: 1; }

        .gal-item__bg {
            position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 4rem;
            transition: transform 0.6s var(--ease);
        }
        .gal-item:hover .gal-item__bg { transform: scale(1.1); }

        .gal-item--w .gal-item__bg { background: linear-gradient(135deg, rgba(0,245,255,0.08) 0%, var(--bg-mid) 100%); }
        .gal-item--t .gal-item__bg { background: linear-gradient(135deg, rgba(255,45,149,0.08) 0%, var(--bg-mid) 100%); }
        .gal-item--s:nth-child(3) .gal-item__bg { background: linear-gradient(135deg, rgba(57,255,20,0.06) 0%, var(--bg-mid) 100%); }
        .gal-item--s:nth-child(4) .gal-item__bg { background: linear-gradient(135deg, rgba(178,77,255,0.06) 0%, var(--bg-mid) 100%); }
        .gal-item--s:nth-child(5) .gal-item__bg { background: linear-gradient(135deg, rgba(255,230,0,0.06) 0%, var(--bg-mid) 100%); }

        /* Neon glow on hover */
        .gal-item::after {
            content: ''; position: absolute; bottom: 0; left: 0; right: 0;
            height: 0;
            background: linear-gradient(to top, rgba(0,245,255,0.15), transparent);
            transition: height 0.5s; pointer-events: none; z-index: 1;
        }
        .gal-item:hover::after { height: 60%; }

        .gal-item__ov {
            position: absolute; inset: 0; z-index: 2;
            background: linear-gradient(to top, rgba(3,3,24,0.95) 0%, transparent 50%);
            opacity: 0; transition: opacity 0.4s;
        }
        .gal-item:hover .gal-item__ov { opacity: 1; }
        .gal-item__info {
            position: absolute; bottom: 1.3rem; left: 1.3rem; right: 1.3rem;
            z-index: 3;
            transform: translateY(10px); opacity: 0;
            transition: all 0.4s var(--ease);
        }
        .gal-item:hover .gal-item__info { transform: translateY(0); opacity: 1; }
        .gal-item__tag {
            font-family: var(--font-mono);
            font-size: 0.55rem;
            letter-spacing: 0.15em; text-transform: uppercase;
            color: var(--cyan);
            text-shadow: 0 0 8px var(--cyan-dim);
        }
        .gal-item__title {
            font-family: var(--font-display);
            font-size: 1.2rem; letter-spacing: 0.04em;
            text-transform: uppercase; margin-top: 0.2rem;
        }
        /* Achievement badge */
        .gal-item__badge {
            position: absolute; top: 0.8rem; right: 0.8rem;
            font-family: var(--font-mono);
            font-size: 0.5rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            padding: 0.2rem 0.5rem;
            border: 1px solid;
            z-index: 4; opacity: 0;
            transform: translateY(-5px);
            transition: all 0.3s;
        }
        .gal-item:hover .gal-item__badge { opacity: 1; transform: translateY(0); }
        .gal-item:nth-child(1) .gal-item__badge { border-color: var(--yellow); color: var(--yellow); }
        .gal-item:nth-child(2) .gal-item__badge { border-color: var(--pink); color: var(--pink); }
        .gal-item:nth-child(3) .gal-item__badge { border-color: var(--green); color: var(--green); }
        .gal-item:nth-child(4) .gal-item__badge { border-color: var(--cyan); color: var(--cyan); }
        .gal-item:nth-child(5) .gal-item__badge { border-color: var(--purple); color: var(--purple); }

        /* ═══════════════════════════════════════════
           CONTACT
        ═══════════════════════════════════════════ */
        .contact__grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 5rem;
        }
        .contact__list {
            display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem;
        }
        .contact__item { display: flex; align-items: center; gap: 1rem; }
        .contact__icon {
            width: 46px; height: 46px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.1rem; flex-shrink: 0;
            transition: all 0.3s;
        }
        .contact__item:hover .contact__icon {
            background: var(--cyan); border-color: var(--cyan);
            box-shadow: 0 0 15px var(--cyan-dim);
        }
        .contact__lbl {
            font-family: var(--font-mono);
            font-size: 0.58rem;
            letter-spacing: 0.12em; text-transform: uppercase;
            color: var(--text-dim);
        }
        .contact__val {
            font-family: var(--font-heading);
            font-size: 1rem; font-weight: 600; color: #fff;
        }
        .contact__form {
            background: var(--bg-card);
            border: 1px solid var(--border);
            padding: 2.5rem; position: relative;
        }
        .contact__form::before {
            content: ''; position: absolute; top: 0; left: 0;
            width: 100%; height: 2px;
            background: linear-gradient(90deg, var(--cyan), var(--pink), var(--green));
            box-shadow: 0 0 10px var(--cyan-dim);
        }
        .contact__form-title {
            font-family: var(--font-display); font-size: 1.6rem;
            letter-spacing: 0.04em; text-transform: uppercase;
            margin-bottom: 1.5rem;
        }
        .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .f-group { margin-bottom: 1.2rem; }
        .f-label {
            display: block;
            font-family: var(--font-mono);
            font-size: 0.6rem;
            letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--text-dim); margin-bottom: 0.4rem;
        }
        .f-input, .f-textarea, .f-select {
            width: 100%; background: var(--bg-deep);
            border: 1px solid var(--border);
            padding: 0.8rem 1rem;
            font-family: var(--font-&); font-size: 0.9rem;
            color: #fff; outline: none;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        .f-input:focus, .f-textarea:focus, .f-select:focus {
            border-color: var(--cyan);
            box-shadow: 0 0 15px var(--cyan-dim), inset 0 0 10px rgba(0,245,255,0.03);
        }
        .f-textarea { min-height: 90px; resize: vertical; }
        .f-select { appearance: auto; }
        .f-submit {
            width: 100%;
            font-family: var(--font-heading);
            font-size: 0.85rem; font-weight: 800;
            letter-spacing: 0.12em; text-transform: uppercase;
            color: var(--bg-deep); background: var(--cyan);
            border: none; padding: 1rem; cursor: crosshair;
            transition: all 0.3s;
            clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
        }
        .f-submit:hover {
            background: var(--pink);
            box-shadow: 0 0 30px var(--pink-dim);
        }

        /* ═══════════════════════════════════════════
           FOOTER
        ═══════════════════════════════════════════ */
        .footer {
            background: var(--bg-deep);
            border-top: 1px solid var(--border);
        }
        .footer__top {
            padding: 3.5rem 4rem;
            display: flex; justify-content: space-between; align-items: center;
            gap: 2rem; flex-wrap: wrap;
        }
        .footer__brand { display: flex; align-items: center; gap: 1rem; }
        .footer__mark {
            border: 2px solid var(--cyan);
            padding: 0.45rem 0.7rem;
            font-family: var(--font-display); font-size: 1.6rem;
            color: var(--cyan); line-height: 1;
            text-shadow: 0 0 15px var(--cyan-dim);
        }
        .footer__desc {
            font-family: var(--font-heading);
            font-size: 0.68rem; font-weight: 600;
            letter-spacing: 0.1em; text-transform: uppercase;
            color: var(--text-dim); line-height: 1.5;
        }
        .footer__cta { display: flex; align-items: center; gap: 1.5rem; }
        .footer__platforms { display: flex; gap: 0.5rem; }
        .footer__plat {
            font-family: var(--font-mono);
            font-size: 0.6rem;
            letter-spacing: 0.06em; text-transform: uppercase;
            color: var(--text-dim); padding: 0.4rem 0.7rem;
            border: 1px solid var(--border);
            transition: all 0.3s;
        }
        .footer__plat:hover {
            color: var(--cyan); border-color: var(--cyan);
            box-shadow: 0 0 10px var(--cyan-dim);
        }
        .footer__bottom {
            padding: 1.3rem 4rem;
            border-top: 1px solid var(--border);
            display: flex; justify-content: space-between; align-items: center;
        }
        .footer__copy {
            font-size: 0.75rem; color: var(--text-dim);
            font-family: var(--font-mono);
        }
        .footer__social { display: flex; gap: 0.4rem; }
        .footer__slink {
            width: 32px; height: 32px;
            border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            color: var(--text-dim);
            font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700;
            transition: all 0.3s;
        }
        .footer__slink:hover {
            background: var(--cyan); border-color: var(--cyan);
            color: var(--bg-deep);
            box-shadow: 0 0 15px var(--cyan-dim);
        }

        /* ═══════════════════════════════════════════
           RESPONSIVE
        ═══════════════════════════════════════════ */
        @media (max-width: 1024px) {
            .sec { padding: 5rem 2rem; }
            .nav { padding: 0 1.5rem; }
            .nav__links { display: none; }
            .nav__burger { display: flex; }
            .slide { padding: 0 2rem; }
            .slides__dots { left: 2rem; }
            .about__grid { grid-template-columns: 1fr; gap: 3rem; }
            .about__cards { order: -1; }
            .products__grid { grid-template-columns: 1fr; }
            .gal-grid { grid-template-columns: 1fr; }
            .gal-item--w, .gal-item--t, .gal-item--s { grid-column: span 1; aspect-ratio: 16/9; }
            .contact__grid { grid-template-columns: 1fr; gap: 3rem; }
            .f-row { grid-template-columns: 1fr; }
            .footer__top, .footer__bottom { flex-direction: column; text-align: center; padding: 2rem; }
            .footer__cta { flex-direction: column; }
            .footer__platforms { flex-wrap: wrap; justify-content: center; }
            .hud__data { display: none; }
            .hud__corner { width: 25px; height: 25px; }
        }
        @media (max-width: 768px) {
            .products__grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
            .pcard__name { font-size: 1.2rem; }
            .pcard__desc { font-size: 0.75rem; }
            .pcard__content { padding: 1.2rem; }
            .pcard__price { font-size: 1.1rem; }
            .stat__label { font-size: 0.5rem; width: 58px; }
            .gal-grid { grid-template-columns: repeat(2, 1fr); }
            .gal-item--w, .gal-item--t, .gal-item--s { grid-column: span 1; aspect-ratio: 4/3; }
            .sec-title { font-size: clamp(1.8rem, 5vw, 3rem); }
            .sec__watermark { font-size: clamp(6rem, 18vw, 14rem); }
        }
        @media (max-width: 640px) {
            .sec { padding: 3.5rem 1.2rem; }
            .slide { padding: 0 1.2rem; }
            .slide__title { font-size: clamp(2rem, 8vw, 4rem); }
            .slide__desc { font-size: 0.9rem; max-width: 100%; }
            .slide__label { font-size: 0.6rem; }
            .slides__dots { left: 1.2rem; bottom: 2rem; }
            .slide__btns { flex-direction: column; width: 100%; }
            .btn-neon { width: 100%; text-align: center; justify-content: center; display: flex; }
            .about__stats { flex-direction: column; gap: 1.5rem; }
            .about__stat-num { font-size: 2.2rem; }
            .about__cards { flex-direction: column; align-items: center; }
            .about__card { width: 180px; height: 240px; }
            .about__card:first-child, .about__card:last-child { transform: none; }
            .about__card:first-child:hover, .about__card:last-child:hover { transform: translateY(-6px); }
            .about__card-icon { font-size: 3rem; }
            .products__grid { grid-template-columns: 1fr; }
            .pcard__icon { font-size: 3.5rem; }
            .gal-grid { grid-template-columns: 1fr; }
            .gal-item--w, .gal-item--t, .gal-item--s { aspect-ratio: 16/9; }
            .contact__form { padding: 1.8rem 1.2rem; }
            .contact__form-title { font-size: 1.2rem; }
            .hero__grid { display: none; }
            .hud__corner { width: 20px; height: 20px; }
            .footer__mark { font-size: 1.2rem; padding: 0.3rem 0.5rem; }
            .footer__desc { font-size: 0.6rem; }
            .footer__plat { font-size: 0.5rem; padding: 0.3rem 0.5rem; }
            .footer__slink { width: 28px; height: 28px; font-size: 0.6rem; }
            .footer__bottom { padding: 1rem 1.2rem; }
            .sec__watermark { display: none; }
            .sec-label { font-size: 0.6rem; }
            .loader__title { font-size: clamp(1rem, 5vw, 1.8rem); letter-spacing: 0.2em; }
        }
}