/* =====================================================
           01 — DESIGN TOKENS
           ===================================================== */

        :root {

            --space: #0B0C10;
            --space-light: #11131B;
            --space-card: #141722;

            --purple: #6C2BD9;
            --purple-light: #9B6CFF;

            --gold: #FFD700;
            --gold-light: #FFE87A;

            --teal: #00D4FF;
            --teal-dark: #008EAA;

            --blue: #2997FF;

            --white: #FFFFFF;
            --text: #D9DBE5;
            --muted: #85899B;

            --glass:
                rgba(255,255,255,0.055);

            --glass-border:
                rgba(255,255,255,0.10);

            --container: 1180px;

            --radius-sm: 12px;
            --radius-md: 20px;
            --radius-lg: 28px;

            --ease:
                cubic-bezier(.2,.8,.2,1);
        }


        /* =====================================================
           02 — RESET
           ===================================================== */

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


        html {
            scroll-behavior: smooth;
        }


        body {

            min-height: 100vh;

            overflow-x: hidden;

            background:
                radial-gradient(
                    circle at 20% 10%,
                    rgba(108,43,217,.10),
                    transparent 32%
                ),
                radial-gradient(
                    circle at 80% 70%,
                    rgba(0,212,255,.055),
                    transparent 35%
                ),
                var(--space);

            color: var(--text);

            font-family:
                "Inter",
                Arial,
                sans-serif;

            line-height: 1.7;
        }


        ::selection {
            background: var(--purple);
            color: white;
        }


        a {
            color: inherit;
            text-decoration: none;
        }


        button,
        input,
        textarea {
            font: inherit;
        }


        button {
            cursor: pointer;
        }


        /* =====================================================
           03 — GLOBAL
           ===================================================== */

        .container {

            width:
                min(
                    calc(100% - 32px),
                    var(--container)
                );

            margin-inline: auto;
        }


        .section {

            position: relative;

            padding:
                110px 0;
        }


        .section-header {

            max-width: 720px;

            margin:
                0 auto 60px;

            text-align: center;
        }


        .eyebrow {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            margin-bottom: 14px;

            color: var(--gold);

            font-family:
                "Orbitron",
                sans-serif;

            font-size: .7rem;

            letter-spacing: 3px;

            text-transform: uppercase;
        }


        .eyebrow::before,
        .eyebrow::after {

            content: "";

            width: 28px;

            height: 1px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    var(--gold)
                );
        }


        .section-title {

            color: var(--white);

            font-family:
                "Orbitron",
                sans-serif;

            font-size:
                clamp(
                    1.9rem,
                    5vw,
                    3.1rem
                );

            line-height: 1.25;

            margin-bottom: 18px;
        }


        .section-title span {

            color: var(--gold);

            text-shadow:
                0 0 25px
                rgba(255,215,0,.25);
        }


        .section-description {

            color: var(--muted);

            font-size: .95rem;
        }


        /* =====================================================
           04 — BACKGROUND STARS
           ===================================================== */

        .background-stars {

            position: fixed;

            inset: 0;

            z-index: -10;

            pointer-events: none;

            opacity: .55;

            background-image:
                radial-gradient(
                    1px 1px at 10% 20%,
                    white,
                    transparent
                ),
                radial-gradient(
                    1px 1px at 80% 30%,
                    white,
                    transparent
                ),
                radial-gradient(
                    1px 1px at 35% 80%,
                    white,
                    transparent
                ),
                radial-gradient(
                    1px 1px at 90% 85%,
                    white,
                    transparent
                );

            background-size:
                250px 250px,
                330px 330px,
                210px 210px,
                400px 400px;

            animation:
                starMove 100s linear infinite;
        }


        @keyframes starMove {

            from {
                transform: translateY(0);
            }

            to {
                transform: translateY(-300px);
            }
        }


        /* =====================================================
           05 — NAVIGATION
           ===================================================== */

        .navbar {

            position: fixed;

            top: 0;
            left: 0;
            right: 0;

            z-index: 1000;

            padding:
                18px 0;

            transition:
                all .35s var(--ease);
        }


        .navbar.scrolled {

            padding:
                10px 0;

            background:
                rgba(11,12,16,.78);

            backdrop-filter:
                blur(20px);

            -webkit-backdrop-filter:
                blur(20px);

            border-bottom:
                1px solid
                rgba(255,255,255,.07);

            box-shadow:
                0 10px 40px
                rgba(0,0,0,.25);
        }


        .nav-inner {

            display: flex;

            align-items: center;

            justify-content: space-between;
        }


        .logo {

            display: flex;

            align-items: center;

            gap: 10px;

            color: var(--gold);

            font-family:
                "Orbitron",
                sans-serif;

            font-size: 1.15rem;

            font-weight: 800;

            letter-spacing: -1px;

            text-shadow:
                0 0 20px
                rgba(255,215,0,.35);
        }


        .logo-icon {

            width: 34px;
            height: 34px;

            display: grid;

            place-items: center;

            border-radius: 50%;

            color: var(--space);

            background:
                radial-gradient(
                    circle at 35% 30%,
                    #fff,
                    var(--gold) 28%,
                    #D49400 75%
                );

            box-shadow:
                0 0 18px
                rgba(255,215,0,.55);
        }


        .nav-links {

            display: flex;

            align-items: center;

            gap: 32px;

            list-style: none;
        }


        .nav-links a {

            position: relative;

            color: #A9ADBC;

            font-size: .84rem;

            transition:
                color .3s ease;
        }


        .nav-links a::after {

            content: "";

            position: absolute;

            bottom: -7px;

            left: 0;

            width: 0;

            height: 2px;

            background:
                var(--gold);

            transition:
                width .3s ease;
        }


        .nav-links a:hover {

            color:
                var(--gold);
        }


        .nav-links a:hover::after {

            width: 100%;
        }


        .menu-toggle {

            display: none;

            width: 42px;
            height: 42px;

            border:
                1px solid
                rgba(255,255,255,.1);

            border-radius: 12px;

            color: white;

            background:
                rgba(255,255,255,.05);
        }


        /* =====================================================
           06 — BUTTONS
           ===================================================== */

        .btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 10px;

            min-height: 52px;

            padding:
                0 24px;

            border-radius: 14px;

            font-size: .82rem;

            font-weight: 700;

            transition:
                transform .3s var(--ease),
                box-shadow .3s ease,
                border-color .3s ease;
        }


        .btn:hover {

            transform:
                translateY(-4px);
        }


        .btn-primary {

            color:
                var(--space);

            border:
                1px solid
                rgba(255,215,0,.45);

            background:
                linear-gradient(
                    135deg,
                    var(--gold),
                    var(--gold-light)
                );

            box-shadow:
                0 0 20px
                rgba(255,215,0,.15);
        }


        .btn-primary:hover {

            box-shadow:
                0 0 35px
                rgba(255,215,0,.4);
        }


        .btn-secondary {

            color: white;

            border:
                1px solid
                rgba(255,255,255,.13);

            background:
                rgba(255,255,255,.045);

            backdrop-filter:
                blur(12px);
        }


        .btn-secondary:hover {

            border-color:
                rgba(0,212,255,.45);

            box-shadow:
                0 0 30px
                rgba(0,212,255,.15);
        }


        .btn-outline-primary {

            color: var(--teal);

            border: 1px solid rgba(0, 212, 255, 0.45);

            background: rgba(0, 212, 255, 0.06);

            backdrop-filter: blur(10px);

            text-decoration: none;
        }


        .btn-outline-primary:hover {

            color: var(--space);

            border-color: var(--teal);

            background: linear-gradient(
                135deg,
                var(--teal),
                #64E5FF
            );

            box-shadow: 0 0 25px rgba(0, 212, 255, 0.4);
        }


        .btn-sm {

            min-height: 38px;

            padding: 0 16px;

            font-size: .75rem;

            border-radius: 10px;

            gap: 6px;
        }


        .mt-3 {
            margin-top: 1rem !important;
        }


        .ms-1 {
            margin-left: 0.25rem !important;
        }


        .me-2 {
            margin-right: 0.5rem !important;
        }


        /* =====================================================
           07 — HERO
           ===================================================== */

        .hero {

            position: relative;

            min-height: 100svh;

            display: flex;

            align-items: center;

            overflow: hidden;
        }


        #galaxy-canvas {

            position: absolute;

            inset: 0;

            width: 100%;
            height: 100%;

            z-index: -2;

            pointer-events: none;
        }


        .hero::before {

            content: "";

            position: absolute;

            width: 650px;
            height: 650px;

            top: 50%;
            left: 50%;

            transform:
                translate(-50%,-50%);

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(108,43,217,.14),
                    transparent 65%
                );

            filter:
                blur(20px);

            pointer-events: none;
        }


        .hero-content {

            padding-top: 70px;

            text-align: center;
        }


        .hero-badge {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding:
                7px 15px;

            margin-bottom: 25px;

            border:
                1px solid
                rgba(255,215,0,.2);

            border-radius: 100px;

            background:
                rgba(255,215,0,.04);

            color:
                var(--gold);

            font-size: .7rem;

            backdrop-filter:
                blur(10px);
        }


        .hero-badge i {

            animation:
                pulse 2s ease-in-out infinite;
        }


        @keyframes pulse {

            0%,100% {
                transform: scale(.85);
                opacity: .55;
            }

            50% {
                transform: scale(1.15);
                opacity: 1;
            }
        }


        .hero-title {

            max-width: 1000px;

            margin:
                0 auto 25px;

            color: white;

            font-family:
                "Orbitron",
                sans-serif;

            font-size:
                clamp(
                    2.2rem,
                    7vw,
                    5.6rem
                );

            font-weight: 800;

            line-height: 1.1;

            letter-spacing:
                -2px;

            text-shadow:
                0 0 45px
                rgba(108,43,217,.3);
        }


        .hero-title .gold {

            color:
                var(--gold);

            text-shadow:
                0 0 35px
                rgba(255,215,0,.35);
        }


        .hero-subtitle {

            max-width: 650px;

            margin:
                0 auto 38px;

            color:
                #A4A8B8;

            font-size:
                clamp(
                    .95rem,
                    2vw,
                    1.18rem
                );
        }


        .hero-actions {

            display: flex;

            justify-content: center;

            flex-wrap: wrap;

            gap: 14px;
        }


        .scroll-indicator {

            position: absolute;

            bottom: 25px;

            left: 50%;

            transform:
                translateX(-50%);

            display: flex;

            flex-direction: column;

            align-items: center;

            gap: 6px;

            color:
                #656978;

            font-size: .58rem;

            letter-spacing: 3px;
        }


        .scroll-line {

            width: 1px;

            height: 38px;

            background:
                linear-gradient(
                    var(--gold),
                    transparent
                );
        }


        /* =====================================================
           08 — GLASS
           ===================================================== */

        .glass {

            background:
                linear-gradient(
                    145deg,
                    rgba(255,255,255,.065),
                    rgba(255,255,255,.02)
                );

            border:
                1px solid
                var(--glass-border);

            backdrop-filter:
                blur(16px);

            -webkit-backdrop-filter:
                blur(16px);

            box-shadow:
                inset 0 1px 0
                rgba(255,255,255,.04),
                0 25px 70px
                rgba(0,0,0,.15);
        }


        /* =====================================================
           09 — SERVICES
           ===================================================== */

        .services-grid {

            display: grid;

            grid-template-columns:
                repeat(4,1fr);

            gap: 20px;
        }


        .service-card {

            position: relative;

            min-height: 360px;

            padding: 28px;

            border-radius:
                var(--radius-lg);

            overflow: hidden;

            transform-style:
                preserve-3d;

            transition:
                box-shadow .4s ease,
                border-color .4s ease;
        }


        .service-card:hover {

            border-color:
                rgba(255,255,255,.2);

            box-shadow:
                0 30px 80px
                rgba(0,0,0,.3);
        }


        .service-card::before {

            content: "";

            position: absolute;

            width: 190px;
            height: 190px;

            top: -90px;
            left: -70px;

            border-radius: 50%;

            background:
                var(--accent);

            opacity: .12;

            filter:
                blur(30px);
        }


        .service-number {

            position: absolute;

            top: 22px;
            left: 24px;

            color:
                rgba(255,255,255,.11);

            font-family:
                "Orbitron",
                sans-serif;

            font-size: 2rem;

            font-weight: 800;
        }


        .service-orbit {

            position: absolute;

            top: 30px;
            right: 22px;

            width: 82px;
            height: 82px;

            border:
                1px solid
                color-mix(
                    in srgb,
                    var(--accent),
                    transparent 65%
                );

            border-radius: 50%;

            transform:
                rotateX(65deg);

            animation:
                orbit 7s linear infinite;
        }


        .service-orbit::after {

            content: "";

            position: absolute;

            top: 50%;

            right: -4px;

            width: 8px;
            height: 8px;

            border-radius: 50%;

            background:
                var(--accent);

            box-shadow:
                0 0 15px
                var(--accent);
        }


        @keyframes orbit {

            to {
                transform:
                    rotateX(65deg)
                    rotateZ(360deg);
            }
        }


        .service-icon {

            position: relative;

            width: 64px;
            height: 64px;

            display: grid;

            place-items: center;

            margin-bottom: 38px;

            border-radius: 50%;

            color:
                var(--accent);

            background:
                color-mix(
                    in srgb,
                    var(--accent),
                    transparent 90%
                );

            border:
                1px solid
                color-mix(
                    in srgb,
                    var(--accent),
                    transparent 65%
                );

            box-shadow:
                0 0 25px
                color-mix(
                    in srgb,
                    var(--accent),
                    transparent 78%
                );

            transform:
                translateZ(30px);
        }


        .service-icon i {
            font-size: 1.3rem;
        }


        .service-title {

            position: relative;

            margin-bottom: 13px;

            color: white;

            font-family:
                "Orbitron",
                sans-serif;

            font-size: .98rem;
        }


        .service-description {

            position: relative;

            color:
                var(--muted);

            font-size: .82rem;

            line-height: 1.9;
        }


        /* =====================================================
           10 — PORTFOLIO
           ===================================================== */

        .portfolio-grid {

            display: grid;

            grid-template-columns:
                repeat(3,1fr);

            gap: 22px;
        }


        .project-card {

            overflow: hidden;

            border-radius:
                var(--radius-md);

            transition:
                transform .4s var(--ease),
                box-shadow .4s ease,
                border-color .4s ease;
        }


        .project-card:hover {

            transform:
                translateY(-8px);

            border-color:
                rgba(255,255,255,.18);

            box-shadow:
                0 30px 80px
                rgba(0,0,0,.3);
        }


        .project-image {

            position: relative;

            height: 240px;

            overflow: hidden;

            background:
                var(--project-bg);
        }


        .project-image::before {

            content: "";

            position: absolute;

            width: 250px;
            height: 250px;

            top: -100px;
            right: -70px;

            border-radius: 50%;

            background:
                rgba(255,255,255,.1);

            filter:
                blur(35px);
        }


        .project-image::after {

            content: "";

            position: absolute;

            inset: 0;

            background:
                linear-gradient(
                    to bottom,
                    transparent,
                    rgba(4,5,9,.7)
                );
        }


        .project-window {

            position: absolute;

            top: 17%;
            left: 11%;

            width: 78%;
            height: 68%;

            overflow: hidden;

            border:
                1px solid
                rgba(255,255,255,.14);

            border-radius: 12px;

            background:
                rgba(7,8,14,.65);

            backdrop-filter:
                blur(8px);

            box-shadow:
                0 20px 50px
                rgba(0,0,0,.4);

            transform:
                perspective(800px)
                rotateX(6deg)
                rotateY(-7deg);

            transition:
                transform .6s var(--ease);
        }


        .project-card:hover
        .project-window {

            transform:
                perspective(800px)
                rotateX(0)
                rotateY(0)
                translateY(-7px)
                scale(1.04);
        }


        .window-bar {

            height: 24px;

            display: flex;

            align-items: center;

            gap: 5px;

            padding-left: 10px;

            border-bottom:
                1px solid
                rgba(255,255,255,.07);
        }


        .window-dot {

            width: 5px;
            height: 5px;

            border-radius: 50%;

            background:
                rgba(255,255,255,.3);
        }


        .window-content {

            padding: 18px;
        }


        .window-line {

            height: 7px;

            width: 70%;

            margin-bottom: 9px;

            border-radius: 20px;

            background:
                rgba(255,255,255,.14);
        }


        .window-line.short {
            width: 42%;
        }


        .window-grid {

            display: grid;

            grid-template-columns:
                repeat(3,1fr);

            gap: 6px;

            margin-top: 18px;
        }


        .window-box {

            height: 48px;

            border-radius: 6px;

            background:
                linear-gradient(
                    135deg,
                    rgba(255,255,255,.13),
                    rgba(255,255,255,.025)
                );
        }


        .project-info {

            padding: 21px;

            background:
                rgba(255,255,255,.035);

            border-top:
                1px solid
                rgba(255,255,255,.06);
        }


        .project-title {

            margin-bottom: 12px;

            color: white;

            font-family:
                "Orbitron",
                sans-serif;

            font-size: .9rem;
        }


        .tech-tags {

            display: flex;

            flex-wrap: wrap;

            gap: 6px;
        }


        .tech-tag {

            padding:
                4px 8px;

            border-radius: 6px;

            background:
                rgba(108,43,217,.11);

            border:
                1px solid
                rgba(108,43,217,.2);

            color:
                #BDA9F4;

            font-size: .63rem;
        }


        /* =====================================================
           11 — SKILLS
           ===================================================== */

        .skills-layout {

            display: grid;

            grid-template-columns:
                1fr 1fr;

            gap: 80px;

            align-items: center;
        }


        .skills-content h3 {

            margin-bottom: 16px;

            color: white;

            font-family:
                "Orbitron",
                sans-serif;

            font-size: 1.6rem;
        }


        .skills-content p {

            color:
                var(--muted);

            font-size: .9rem;
        }


        .skills-cloud {

            display: flex;

            flex-wrap: wrap;

            gap: 10px;

            margin-top: 28px;
        }


        .skill {

            padding:
                8px 13px;

            border:
                1px solid
                rgba(255,255,255,.1);

            border-radius: 9px;

            color:
                #D6D8E2;

            background:
                rgba(255,255,255,.035);

            font-family:
                "Orbitron",
                sans-serif;

            font-size: .64rem;

            transition:
                all .3s ease;
        }


        .skill:hover {

            color:
                var(--gold);

            border-color:
                rgba(255,215,0,.35);

            box-shadow:
                0 0 20px
                rgba(255,215,0,.1);

            transform:
                translateY(-3px);
        }


        .skill-bars {

            display: flex;

            flex-direction: column;

            gap: 21px;
        }


        .skill-row {

            display: flex;

            flex-direction: column;

            gap: 7px;
        }


        .skill-label {

            display: flex;

            justify-content: space-between;

            color:
                #C5C7D2;

            font-size: .75rem;
        }


        .skill-track {

            height: 5px;

            overflow: hidden;

            border-radius: 20px;

            background:
                rgba(255,255,255,.08);
        }


        .skill-progress {

            width: var(--value);

            height: 100%;

            border-radius: inherit;

            background:
                linear-gradient(
                    90deg,
                    var(--purple),
                    var(--teal)
                );

            box-shadow:
                0 0 15px
                rgba(0,212,255,.3);
        }


        /* =====================================================
           12 — ABOUT
           ===================================================== */

        .about-layout {

            display: grid;

            grid-template-columns:
                1fr 1fr;

            gap: 80px;

            align-items: center;
        }


        .about-content h3 {

            margin-bottom: 22px;

            color: white;

            font-family:
                "Orbitron",
                sans-serif;

            font-size: 1.8rem;

            line-height: 1.4;
        }


        .about-content p {

            margin-bottom: 16px;

            color:
                var(--muted);

            font-size: .9rem;
        }


        .about-quote {

            padding:
                18px 20px;

            margin-top: 25px;

            border-right:
                3px solid
                var(--gold);

            border-radius: 10px;

            background:
                rgba(255,215,0,.025);

            color:
                #D2D4DE;

            font-size: .9rem;
        }


        /* =====================================================
           13 — GALAXY DIAGRAM
           ===================================================== */

        .galaxy {

            position: relative;

            width: min(
                100%,
                500px
            );

            aspect-ratio: 1;

            margin-inline: auto;
        }


        .galaxy-ring {

            position: absolute;

            top: 50%;
            left: 50%;

            border-radius: 50%;

            border:
                1px solid
                rgba(108,43,217,.3);

            transform:
                translate(-50%,-50%)
                rotateX(65deg);

            animation:
                galaxyRotate 18s linear infinite;
        }


        .galaxy-ring.r1 {

            width: 52%;
            height: 52%;
        }


        .galaxy-ring.r2 {

            width: 72%;
            height: 72%;

            border-color:
                rgba(0,212,255,.22);

            animation-duration:
                26s;

            animation-direction:
                reverse;
        }


        .galaxy-ring.r3 {

            width: 94%;
            height: 94%;

            border-color:
                rgba(255,215,0,.14);

            animation-duration:
                35s;
        }


        @keyframes galaxyRotate {

            to {

                transform:
                    translate(-50%,-50%)
                    rotateX(65deg)
                    rotateZ(360deg);
            }
        }


        .galaxy-core {

            position: absolute;

            top: 50%;
            left: 50%;

            width: 105px;
            height: 105px;

            display: grid;

            place-items: center;

            transform:
                translate(-50%,-50%);

            border-radius: 50%;

            background:
                radial-gradient(
                    circle at 35% 30%,
                    white 0%,
                    var(--gold) 25%,
                    #D99100 60%,
                    transparent 72%
                );

            color:
                var(--space);

            font-family:
                "Orbitron",
                sans-serif;

            font-size: .62rem;

            font-weight: 800;

            box-shadow:
                0 0 25px
                var(--gold),
                0 0 90px
                rgba(255,215,0,.3);

            z-index: 5;
        }


        .galaxy-node {

            position: absolute;

            width: 58px;
            height: 58px;

            display: grid;

            place-items: center;

            border:
                1px solid
                var(--node);

            border-radius: 50%;

            background:
                rgba(10,12,18,.9);

            color:
                var(--node);

            box-shadow:
                0 0 20px
                color-mix(
                    in srgb,
                    var(--node),
                    transparent 70%
                );

            z-index: 4;
        }


        .node1 {

            top: 8%;
            right: 19%;

            --node:
                var(--teal);
        }


        .node2 {

            top: 44%;
            right: 1%;

            --node:
                var(--purple-light);
        }


        .node3 {

            bottom: 8%;
            right: 22%;

            --node:
                var(--gold);
        }


        .node4 {

            bottom: 18%;
            left: 10%;

            --node:
                #FF68B5;
        }


        .node5 {

            top: 31%;
            left: 1%;

            --node:
                #73FF8A;
        }


        /* =====================================================
           14 — TESTIMONIALS
           ===================================================== */

        .testimonials {

            display: grid;

            grid-template-columns:
                repeat(3,1fr);

            gap: 20px;
        }


        .testimonial {

            position: relative;

            padding: 30px;

            border-radius:
                var(--radius-md);
        }


        .testimonial-star {

            position: absolute;

            top: 22px;
            right: 24px;

            color:
                var(--gold);

            animation:
                twinkle 2.4s ease-in-out infinite;
        }


        @keyframes twinkle {

            0%,100% {
                opacity: .45;
                transform: scale(.9);
            }

            50% {
                opacity: 1;
                transform: scale(1.15);
            }
        }


        .testimonial-quote {

            margin-bottom: 25px;

            color:
                #C9CBD5;

            font-size: .87rem;

            line-height: 2;
        }


        .quote-mark {

            display: block;

            color:
                var(--purple-light);

            font-family:
                Georgia,
                serif;

            font-size: 3rem;

            line-height: .7;

            margin-bottom: 15px;
        }


        .client {

            display: flex;

            align-items: center;

            gap: 12px;
        }


        .client-avatar {

            width: 42px;
            height: 42px;

            display: grid;

            place-items: center;

            border-radius: 50%;

            background:
                linear-gradient(
                    135deg,
                    var(--purple),
                    var(--teal)
                );

            color: white;

            font-weight: 700;
        }


        .client-name {

            color: white;

            font-size: .78rem;

            font-weight: 700;
        }


        .client-title {

            color:
                var(--muted);

            font-size: .67rem;
        }


        /* =====================================================
           15 — CONTACT
           ===================================================== */

        .contact-layout {

            display: grid;

            grid-template-columns:
                .8fr 1.2fr;

            gap: 22px;
        }


        .contact-info,
        .contact-form {

            padding: 34px;

            border-radius:
                var(--radius-lg);
        }


        .contact-info h3 {

            margin-bottom: 14px;

            color: white;

            font-family:
                "Orbitron",
                sans-serif;

            font-size: 1.4rem;
        }


        .contact-info > p {

            margin-bottom: 30px;

            color:
                var(--muted);

            font-size: .85rem;
        }


        .contact-list {

            display: flex;

            flex-direction: column;

            gap: 15px;

            margin-bottom: 30px;
        }


        .contact-item {

            display: flex;

            align-items: center;

            gap: 12px;

            color:
                #BFC2CE;

            font-size: .78rem;
        }


        .contact-item i {

            width: 38px;
            height: 38px;

            display: grid;

            place-items: center;

            border-radius: 10px;

            color:
                var(--purple-light);

            background:
                rgba(108,43,217,.1);
        }


        .social-links {

            display: flex;

            gap: 9px;
        }


        .social-link {

            width: 42px;
            height: 42px;

            display: grid;

            place-items: center;

            border:
                1px solid
                rgba(255,255,255,.1);

            border-radius: 10px;

            background:
                rgba(255,255,255,.03);

            color:
                #AEB1BE;

            transition:
                all .3s ease;
        }


        .social-link:hover {

            color:
                var(--gold);

            border-color:
                rgba(255,215,0,.35);

            box-shadow:
                0 0 20px
                rgba(255,215,0,.1);

            transform:
                translateY(-3px);
        }


        /* =====================================================
           16 — FORM
           ===================================================== */

        .form-group {

            margin-bottom: 17px;
        }


        .form-label {

            display: block;

            margin-bottom: 7px;

            color:
                #C5C8D3;

            font-size: .72rem;
        }


        .form-control {

            width: 100%;

            padding:
                13px 14px;

            border:
                1px solid
                rgba(255,255,255,.1);

            border-radius: 10px;

            outline: none;

            background:
                rgba(0,0,0,.18);

            color: white;

            transition:
                border-color .3s ease,
                box-shadow .3s ease;
        }


        .form-control::placeholder {

            color:
                #5E6270;
        }


        .form-control:focus {

            border-color:
                rgba(0,212,255,.5);

            box-shadow:
                0 0 0 3px
                rgba(0,212,255,.06);
        }


        textarea.form-control {

            min-height: 140px;

            resize: vertical;
        }


        .form-error {

            display: none;

            margin-top: 5px;

            color:
                #FF6675;

            font-size: .66rem;
        }


        .form-group.invalid
        .form-control {

            border-color:
                #FF6675;
        }


        .form-group.invalid
        .form-error {

            display: block;
        }


        .success-message {

            display: none;

            margin-bottom: 18px;

            padding:
                13px 15px;

            border:
                1px solid
                rgba(0,212,255,.2);

            border-radius: 10px;

            background:
                rgba(0,212,255,.06);

            color:
                var(--teal);

            font-size: .75rem;
        }


        /* =====================================================
           17 — FOOTER
           ===================================================== */

        footer {

            padding:
                30px 0;

            border-top:
                1px solid
                rgba(255,255,255,.06);
        }


        .footer-inner {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;
        }


        .copyright {

            color:
                #646878;

            font-size: .67rem;
        }


        .footer-brand {

            color:
                var(--gold);

            font-family:
                "Orbitron",
                sans-serif;

            font-size: .78rem;
        }


        /* =====================================================
           18 — SCROLL REVEAL
           ===================================================== */

        .reveal {

            opacity: 0;

            transform:
                translateY(35px);
        }


        /* =====================================================
           19 — RESPONSIVE
           ===================================================== */

        @media (max-width: 900px) {

            .menu-toggle {
                display: grid;

                place-items: center;
            }


            .nav-links {

                position: fixed;

                top: 72px;

                left: 16px;
                right: 16px;

                display: none;

                flex-direction: column;

                gap: 5px;

                padding: 18px;

                border:
                    1px solid
                    rgba(255,255,255,.1);

                border-radius: 18px;

                background:
                    rgba(11,12,16,.94);

                backdrop-filter:
                    blur(20px);

                box-shadow:
                    0 25px 70px
                    rgba(0,0,0,.4);
            }


            .nav-links.active {
                display: flex;
            }


            .nav-links a {

                width: 100%;

                padding:
                    9px 5px;
            }


            .services-grid {

                grid-template-columns:
                    repeat(2,1fr);
            }


            .portfolio-grid {

                grid-template-columns:
                    repeat(2,1fr);
            }


            .skills-layout,
            .about-layout {

                grid-template-columns:
                    1fr;

                gap: 60px;
            }


            .contact-layout {

                grid-template-columns:
                    1fr;
            }


            .testimonials {

                grid-template-columns:
                    1fr;
            }
        }


        @media (max-width: 600px) {

            .section {

                padding:
                    80px 0;
            }


            .services-grid,
            .portfolio-grid {

                grid-template-columns:
                    1fr;
            }


            .hero-actions {

                flex-direction:
                    column;
            }


            .hero-actions .btn {

                width: 100%;
            }


            .galaxy {

                transform:
                    scale(.85);
            }


            .contact-info,
            .contact-form {

                padding: 24px;
            }


            .footer-inner {

                flex-direction:
                    column;

                text-align:
                    center;
            }
        }


        /* =====================================================
           20 — REDUCED MOTION
           ===================================================== */

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {

                animation-duration:
                    .01ms !important;

                animation-iteration-count:
                    1 !important;

                transition-duration:
                    .01ms !important;

                scroll-behavior:
                    auto !important;
            }
        }