:root {
            --bg-color: #080808;
            --primary-blue: #00acee;
            --text-white: #ffffff;
            --text-gray: #b0b0b0;
            --secondary-bg: #111111;
        }
        * { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; scroll-behavior:smooth; }
        html { scroll-padding-top:90px; }
        body { background:var(--bg-color); color:var(--text-white); overflow-x:hidden; }

        .bg-accent {
            position:fixed; bottom:0; right:0; width:50%; height:80%;
        }

        /* ── NAVIGATION ── */ 
        nav {
            position:fixed; top:0; left:0; width:100%;
            background:rgba(8,8,8,0.85); backdrop-filter:blur(10px);
            z-index:1000; padding:20px 5%;
            display:flex; justify-content:center; align-items:center;
        }

        .nav-links {
            display:flex; gap:28px; list-style:none;
        }
        .nav-links a {
            color:var(--text-white); text-decoration:none;
            font-size:0.9rem; text-transform:uppercase; letter-spacing:1px;
            transition:0.3s; border-bottom:2px solid transparent;
        }
        .nav-links a:hover,
        .nav-links a.active {
            color:var(--primary-blue);
            border-bottom:2px solid var(--primary-blue);
            padding-bottom:4px;
        }

        /* Hamburger (only mobile) */
        .menu-toggle {
            display:none;
            flex-direction:column; gap:6px; cursor:pointer;
            z-index:1002;
        }
        .bar {
            width:28px; height:3px; background:var(--text-white);
            border-radius:2px; transition:0.4s;
        }

        /* ── MOBILE MENU ── */
        @media (max-width:768px) {
            .menu-toggle { display:flex; }
            .nav-links {
                position:fixed; top:0; right:-100%;
                width:80%; height:100vh;
                background:rgba(8,8,8,0.98); backdrop-filter:blur(12px);
                flex-direction:column; align-items:center; justify-content:center;
                gap:32px; transition:right 0.45s ease;
                padding:80px 20px;
            }
            .nav-links.active { right:0; }

            .menu-toggle.active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

            /* Social icons below menu links on mobile */
            .mobile-social {
                margin-top:60px; display:flex; gap:40px;
            }
            .mobile-social a {
                color:var(--text-gray); font-size:1.9rem;
                transition:0.3s;
            }
            .mobile-social a:hover { color:var(--primary-blue); transform:scale(1.15); }
        }

        /* ── DESKTOP: hide social icons ── */
        @media (min-width:769px) {
            .mobile-social { display:none; }
        }

        /* ── OTHER STYLES (unchanged from previous) ── */
        section#home { min-height:100vh; padding:140px 10% 80px 12%; display:flex; align-items:center; justify-content:space-between; }
        .hero-text { max-width:620px; }
        .hero-text h3 { font-size:26px; font-weight:700; }
        .hero-text h3 span, .hero-text h1 span { color:var(--primary-blue); }
        .hero-text h1 { font-size:52px; font-weight:700; margin:-4px 0 12px; }
        .hero-text p { color:var(--text-gray); line-height:1.7; margin-bottom:35px; font-size:1rem; }
        .btn-group { display:flex; gap:24px; }
        .btn {
            padding:13px 32px; border-radius:6px; text-decoration:none;
            font-weight:600; transition:0.3s; font-size:0.95rem;
        }
        .btn-fill { background:var(--primary-blue); color:#000; border:1px solid var(--primary-blue); }
        .btn-outline { background:transparent; color:var(--primary-blue); border:1px solid var(--primary-blue); }
        .btn:hover { transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,172,238,0.35); }

        .profile-container {
            position:relative; width:380px; height:380px;
            display:flex; justify-content:center; align-items:center;
        }
        .image-ring {
            width:300px; height:300px; border-radius:50%;
            border:8px solid white; overflow:hidden; z-index:2;
            box-shadow:0 0 40px var(--primary-blue), inset 0 0 40px var(--primary-blue);
        }
        .image-ring img { width:100%; height:100%; object-fit:cover; }
        .shape-bg {
            position:absolute; width:360px; height:360px;
            background:#252525; border-radius:50%; z-index:1;
        }

        .about-row {
            display:flex; align-items:center; gap:60px;
            padding:100px 10%; min-height:auto;
        }
        .about-row.reverse { flex-direction:row-reverse; background:var(--secondary-bg); }
        .text-box { flex:1; }
        .text-box h2 { font-size:2.2rem; color:var(--primary-blue); margin-bottom:20px; }
        .text-box p { color:var(--text-gray); font-size:1rem; line-height:1.7; }

        .facts-section { padding:100px 10%; text-align:center; }
        .bio-table {
            margin:40px auto; border-collapse:collapse;
            width:100%; max-width:720px;
        }
        .bio-table td {
            padding:18px 24px; border-bottom:1px solid #222;
            text-align:left;
        }
        .bio-table td:first-child {
            font-weight:600; color:var(--primary-blue); width:38%;
        }

        footer {
            padding:50px 10%; border-top:1px solid #1a1a1a;
            text-align:center; color:var(--text-gray);
        }

        @media (max-width:992px) {
            section#home, .about-row, .about-row.reverse {
                flex-direction:column; text-align:center;
                padding:100px 6% 60px;
            }
            .profile-container { margin:0 auto 50px; }
            .btn-group { justify-content:center; }
        }

        ::-webkit-scrollbar { width:8px; }
        ::-webkit-scrollbar-track { background:#080808; }
        ::-webkit-scrollbar-thumb { background:var(--primary-blue); border-radius:10px; }
        ::selection { background:var(--primary-blue); color:#000; }