* { margin: 0; padding: 0; box-sizing: border-box; }
        :root{
            --primary-blue:#0f1419;
            --secondary-blue:#1a2332;
            --accent-cyan:#00d4ff;
            --accent-purple:#6366f1;
            --text-light:#e2e8f0;
            --text-gray:#94a3b8;
            --gradient: linear-gradient(135deg,#0f1419 0%,#1a2332 50%,#2563eb 100%);
            --glass-bg: rgba(255,255,255,0.06);
            --glass-border: rgba(255,255,255,0.12);
            --container-width:1200px;
        }
        body{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--gradient);
            color: var(--text-light);
            line-height:1.6;
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            overflow-x:hidden;
            overflow-y:hidden;
        }

        /* ---------- Animated Background ---------- */
        .bg-animation{
            position:fixed;
            inset:0;z-index:-1;
            overflow:hidden;
        }
        .floating-shapes{
            position:absolute;
            width:110px;
            height:110px;
            background:linear-gradient(45deg,var(--accent-cyan),var(--accent-purple));
            border-radius:50%;
            opacity:0.09;
            animation:float 20s infinite linear;
        }
        .floating-shapes:nth-child(1){
            top:6%;
            left:8%;
            animation-delay:0s;
        }
        .floating-shapes:nth-child(2){top:72%;
            left:82%;
            animation-delay:5s;
        }
        .floating-shapes:nth-child(3){top:30%;
            left:68%;
            animation-delay:10s;
        }
        .floating-shapes:nth-child(4){top:82%;
            left:18%;
            animation-delay:15s;
        }
        @keyframes float{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-20px) rotate(90deg)}50%{transform:translateY(-40px) rotate(180deg)}75%{transform:translateY(-20px) rotate(270deg)}
    }

        /* ---------- Navigation ---------- */
        nav{
            position:fixed;
            top:0;
            width:100%;
            background:rgba(15,20,25,0.9);
            backdrop-filter:blur(10px);
            padding:1rem 2rem;
            z-index:1000;
            transition:all .3s ease;
        }
        .nav-container{
            max-width:var(--container-width);
            margin:0 auto;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:1rem;
        }
        .logo{
            font-size:1.25rem;
            font-weight:700;
            background:linear-gradient(45deg,var(--accent-cyan),var(--accent-purple));
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }
        .nav-links{
            display:flex;
            gap:1.6rem;
            list-style:none;
        }
        .nav-links a{
            color:var(--text-light);
            text-decoration:none;
            position:relative;
            padding:.25rem;
        }
        .nav-links a:hover{
            color:var(--accent-cyan)}
        .nav-links a::after{
            content:'';
            position:absolute;
            bottom:-6px;
            left:0;
            width:0;
            height:2px;
            background:var(--accent-cyan);
            transition:width .25s ease;
        }
        .nav-links a:hover::after{
            width:100%;
        }

        .menu-toggle{
            display:none;
            background:transparent;
            border:1px solid transparent;
            padding:.5rem;
            border-radius:8px;
            cursor:pointer;
        }
        .menu-toggle:focus{
            outline:none;
            border-color:var(--glass-border)}
        .hamburger{
            width:22px;
            height:2px;
            background:var(--text-light);
            display:block;
            position:relative;
        }
        .hamburger::before,.hamburger::after{
            content:"";
            position:absolute;
            left:0;
            width:22px;
            height:2px;
            background:var(--text-light);
        }
        .hamburger::before{
            top:-6px;
        }
        .hamburger::after{
            top:6px;
        }

        /* ---------- Sections & Layout ---------- */
        section{min-height:100vh;padding:2.5rem 1rem;display:flex;align-items:center;justify-content:center}
        .container{max-width:var(--container-width);width:100%;margin:0 auto;padding:0 1rem}
        .glass-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:1.6rem;backdrop-filter:blur(8px);transition:all .28s ease}
        .glass-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,212,255,0.06)}

        /* ---------- Hero ---------- */
        .hero{position:relative;text-align:center;padding-top:6rem}
        .hero-content{opacity:0;animation:fadeInUp .9s ease forwards .2s}
        .hero h1{font-size:3.25rem;margin-bottom:.75rem;background:linear-gradient(45deg,var(--accent-cyan),var(--accent-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:glow 2s ease-in-out infinite alternate}
        @keyframes glow{from{filter:drop-shadow(0 0 8px rgba(0,212,255,.26))}to{filter:drop-shadow(0 0 18px rgba(0,212,255,.5))}}
        .hero p{font-size:1.05rem;color:var(--text-gray);margin-bottom:1.25rem}
        .cta-button{display:inline-block;padding:.9rem 1.8rem;background:linear-gradient(45deg,var(--accent-cyan),var(--accent-purple));color:white;text-decoration:none;border-radius:999px;box-shadow:0 10px 30px rgba(0,212,255,0.18);transition:all .25s ease}
        .cta-button:hover{transform:translateY(-3px);box-shadow:0 15px 40px rgba(0,212,255,.28)}

        /* ---------- About ---------- */
        .about-grid{display:grid;grid-template-columns:1fr 1.8fr;gap:2rem;align-items:center}
        .profile-image img{
            width:280px;
            height:300px;
            border-radius:50%;
            background:linear-gradient(45deg,var(--accent-cyan),var(--accent-purple));
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:3.6rem;
            color:white;
            margin:0 auto;
        }
        @keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
        .about-grid h2{color:var(--accent-cyan);font-size:2rem;margin-bottom:1rem}

        /* ---------- Skills ---------- */
        .skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-top:1.75rem}
        .skill-category h3{color:var(--accent-cyan);margin-bottom:.75rem}
        .skill-bar{background:rgba(255,255,255,0.06);height:10px;border-radius:999px;margin:.45rem 0;overflow:hidden}
        .skill-progress{height:100%;background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple));border-radius:999px;transition:width 1.6s ease;width:0}
        .skill-progress.animate{animation:fillBar 1.6s ease forwards}
        @keyframes fillBar{to{width:var(--width)}}

        /* ---------- Portfolio ---------- */
        .portfolio-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
            gap:1.25rem;
            margin-top:1.75rem
        }
        .portfolio-item{
            border-radius:12px;
            overflow:hidden;
            transition:transform .25s ease,box-shadow .25s ease;
        }
        .portfolio-item:hover{transform:scale(1.03);box-shadow:0 25px 50px rgba(0,212,255,0.08)}
        .portfolio-image{height:180px;background:linear-gradient(135deg,var(--accent-purple),var(--accent-cyan));display:flex;align-items:center;justify-content:center;font-size:2.75rem;color:white}
        .portfolio-content{padding:1.25rem}

        /* ---------- Contact ---------- */
        .contact-form{
            margin:0 auto
        }
        .form-group{
            margin-bottom:1rem
        }
        input,textarea{
            width:100%;
            padding:1rem;
            border-radius:10px;
            background:var(--glass-bg);
            border:1px solid var(--glass-border);
            color:var(--text-light);
            backdrop-filter:blur(6px)
        }
        input:focus,textarea:focus{
            outline:none;
            border-color:var(--accent-cyan);
            box-shadow:0 0 20px rgba(0,212,255,.12)
        }

        /* ---------- Animations & Utilities ---------- */
        @keyframes fadeInUp{
            from{
                opacity:0;
                transform:translateY(20px)}
            to{opacity:1;
                transform:translateY(0)}
        }
        .animate-on-scroll{
            opacity:0;
            transform:translateY(18px);
            transition:all .6s ease
        }
        .animate-on-scroll.animate{
            opacity:1;
            transform:translateY(0)
        }

        /* ---------- Responsive ---------- */
        @media (max-width: 900px){
            .about-grid{
                grid-template-columns:1fr;
                text-align:center;
                gap:1.25rem
            }
            .hero h1{
                font-size:2.25rem
            }
        }
        @media (max-width: 768px){
            .nav-links{
                display:none;
                position:absolute;
                top:100%;
                right:1rem;
                background:rgba(8,12,16,.95);
                border-radius:8px;
                padding:1rem;
                flex-direction:column;
                gap:.8rem;
                width:calc(100% - 2rem);
                max-width:320px
            }
            .menu-toggle{
                display:block
            }
            .nav-links.show{
                display:flex
            }
            .hero{
                padding-top:5.5rem
            }
        }