
        :root {
            --primary: #00c6ff;
            --secondary: #1a1a1a;
            --text: #f5f5f5;
            --text-muted: #cccccc;
            --bg: #101010;
            --accent: #ffe000;
            --card-bg: #1f1f1f;
            --border-color: rgba(255, 255, 255, 0.12);
            --glow-primary: rgba(0, 198, 255, 0.4);
            --glow-accent: rgba(255, 224, 0, 0.5);
            --shadow-light: rgba(0, 0, 0, 0.3);
            --shadow-medium: rgba(0, 0, 0, 0.6);
            --transition-smooth: all 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
            --transition-fast: all 0.3s ease-in-out;
            --font-main: 'Cairo', sans-serif;
            --section-padding: 130px 0;
            --container-padding: 0 35px;
            --grid-gap: 45px;
            --red-color: #ff4d4d;
            --glow-red: rgba(255, 77, 77, 0.7);
        }

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth !important; }

        body {
            font-family: var(--font-main); background-color: var(--bg); color: var(--text);
            line-height: 1.85; overflow-x: hidden; position: relative; font-size: 16.5px;
            cursor: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s ease-in-out, visibility 0s linear 0.6s;
        }
        body.site-active {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.6s ease-in-out;
        }
        body.theft-detected {
            opacity: 1;
            visibility: visible;
            overflow: hidden;
            cursor: default !important;
        }
        body.theft-detected * {
             pointer-events: none !important;
             user-select: none !important;
             -webkit-user-select: none !important;
             -moz-user-select: none !important;
             -ms-user-select: none !important;
        }


        #theft-warning {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(16, 16, 16, 0.97);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10001;
            text-align: center;
            padding: 30px;
            opacity: 0;
            visibility: hidden;
            transform: scale(0.95);
            transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s linear 0.6s, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
            pointer-events: none;
        }
        #theft-warning.visible {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
            transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0s linear 0s, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
            pointer-events: auto;
        }
        #theft-warning i {
            font-size: 6rem;
            color: var(--red-color);
            margin-bottom: 30px;
            animation: pulse-warning 1.5s infinite ease-in-out;
            text-shadow: 0 0 15px var(--glow-red);
        }
        #theft-warning h2 {
            font-size: 2.5rem;
            color: var(--red-color);
            margin-bottom: 15px;
            font-weight: 800;
            text-shadow: 0 0 8px var(--glow-red);
        }
        #theft-warning p {
            font-size: 1.2rem;
            color: var(--text-muted);
            max-width: 600px;
            line-height: 1.7;
            margin-bottom: 10px;
        }
        #theft-warning p#theft-reason {
            font-weight: 600;
            color: var(--accent);
            margin-top: 15px;
            font-size: 1.05rem;
            word-break: break-word;
            background: rgba(255, 224, 0, 0.08);
            padding: 8px 15px;
            border-radius: 6px;
            border: 1px solid rgba(255, 224, 0, 0.2);
            display: inline-block;
            max-width: 90%;
        }
        @keyframes pulse-warning {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        .cursor-dot, .cursor-outline { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); border-radius: 50%; z-index: 9999; pointer-events: none; transition: opacity 0.3s ease, transform 0.1s ease-out, width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; will-change: transform; }
        .cursor-dot { width: 10px; height: 10px; background-color: var(--accent); box-shadow: 0 0 10px var(--glow-accent); }
        .cursor-outline { width: 45px; height: 45px; background-color: transparent; border: 2px solid var(--primary); transition-duration: 0.2s; mix-blend-mode: screen; opacity: 0.5; }
        body:not(.theft-detected):has(a:hover, .btn:hover, .skill-item:hover, .contact-item:hover, .hamburger:hover, .logo:hover) .cursor-dot { opacity: 0.8; transform: translate(-50%, -50%) scale(1.8); background-color: var(--primary); box-shadow: 0 0 12px var(--glow-primary); }
        body:not(.theft-detected):has(a:hover, .btn:hover, .skill-item:hover, .contact-item:hover, .hamburger:hover, .logo:hover) .cursor-outline { transform: translate(-50%, -50%) scale(0.85); opacity: 0.8; border-color: var(--accent); border-width: 3px; background-color: rgba(255, 224, 0, 0.1); }
        @media (hover: none) { .cursor-dot, .cursor-outline { display: none !important; } body { cursor: auto; } a, button, .hamburger, .logo, .skill-item, .contact-item { cursor: pointer; } }

        .has-scroll-smooth { overflow: hidden; }
        .has-scroll-dragging { user-select: none; }
        .c-scrollbar { position: absolute; right: 0; top: 0; width: 11px; height: 100%; transform-origin: center right; transition: transform .3s,opacity .3s; opacity: 0; z-index: 999; }
        html.has-scroll-smooth .c-scrollbar { opacity: 1; }
        .c-scrollbar:hover { transform: scaleX(1.45); }
        .c-scrollbar_thumb { position: absolute; top: 0; right: 0; background-color: var(--primary); opacity: 0.7; width: 7px; border-radius: 10px; margin: 2px; cursor: grab !important; }
        .has-scroll-dragging .c-scrollbar_thumb { cursor: grabbing !important; background-color: var(--accent); }
        [data-scroll-container] { perspective: 1px; outline: none; }

        #background-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

        #main-container { position: relative; z-index: 1; background-color: var(--bg); will-change: transform; }

        .container { max-width: 1200px; margin: 0 auto; padding: var(--container-padding); }
        section { padding: var(--section-padding); position: relative; overflow: hidden; }
        section:nth-of-type(odd) { background-color: var(--bg); }
        section:nth-of-type(even) { background-color: var(--secondary); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }

        h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--text); margin-bottom: 1.8rem; line-height: 1.45; letter-spacing: -0.7px; }
        h2 {
            font-size: 3rem; font-weight: 800; margin-bottom: 30px; position: relative;
            display: inline-block; text-align: right; color: var(--primary); padding-bottom: 18px;
            max-width: 100%; opacity: 1; transform: translateY(0); will-change: opacity, transform;
        }
        h2::before {
            content: ''; position: absolute; bottom: 0; right: 0; width: 0%; min-width: 90px; max-width: 150px; height: 6px;
            background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 3px; box-shadow: 0 0 8px var(--glow-primary);
            transform-origin: right; transition: width 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) 0.3s;
        }
        h2.is-visible::before { width: 60%; }
        section:hover h2::before { width: 80%; background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: 0 0 12px var(--glow-accent); }

        p {
            font-size: 1.15rem; margin-bottom: 1.8rem; color: var(--text-muted); max-width: 780px; font-weight: 400;
            opacity: 1; transform: translateY(0); will-change: opacity, transform;
        }
        #about p, #skills p, #contact p { margin-right: 0; margin-left: 0; }
        #about p { text-align: right; font-size: 1.1rem; }
        #skills p, #contact p { text-align: center; }
        #hero p { text-align: center; }
        a { color: var(--primary); text-decoration: none; transition: var(--transition-fast); cursor: none; }
        a:hover { color: var(--accent); text-decoration: none; filter: brightness(1.15); }

        header { background: transparent; padding: 28px 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: background-color 0.5s ease-out, box-shadow 0.5s ease-out, padding 0.5s ease-out; will-change: background-color, box-shadow, padding; }
        header.scrolled { background-color: rgba(16, 16, 16, 0.85); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); padding: 18px 0; box-shadow: 0 6px 20px var(--shadow-light); border-bottom: 1px solid var(--border-color); }
        nav { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 2.6rem; font-weight: 800; color: var(--primary); transition: var(--transition-smooth); letter-spacing: -1.8px; text-shadow: 0 0 12px var(--glow-primary); cursor: none; display: inline-block; will-change: transform, color, text-shadow; }
        .logo:hover { color: var(--accent); transform: scale(1.04) rotate(-1.5deg); text-shadow: 0 0 18px var(--glow-accent); }
        nav ul { list-style: none; display: flex; align-items: center; }
        nav ul li { margin-right: 45px; }
        nav ul li:last-child { margin-right: 0; }
        nav ul li a { color: var(--text); font-weight: 700; font-size: 1.1rem; padding: 12px 6px; position: relative; letter-spacing: 0.6px; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); display: inline-block; will-change: color; }
        nav ul li a::after { content: ''; position: absolute; bottom: 0; left: 0; right: auto; width: 0%; height: 3px; background: linear-gradient(90deg, var(--accent), var(--primary)); transition: width 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.45s ease; border-radius: 1.5px; box-shadow: 0 0 5px var(--glow-accent); transform-origin: right; }
        nav ul li a:hover::after, nav ul li a.active::after { width: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: 0 0 8px var(--glow-primary); }
        nav ul li a:hover { color: var(--accent); }
        .hamburger { display: none; z-index: 1001; width: 34px; height: 26px; position: relative; cursor: none; }
        .hamburger:hover { opacity: 0.85; }
        .hamburger .line { width: 100%; height: 3.5px; background: var(--text); border-radius: 4px; position: absolute; left: 0; transition: all 0.45s cubic-bezier(0.68, -0.6, 0.32, 1.6); box-shadow: 0 1px 3px rgba(0,0,0,0.4); will-change: transform, opacity, background-color; }
        .hamburger .line:nth-child(1) { top: 0; } .hamburger .line:nth-child(2) { top: 50%; transform: translateY(-50%); } .hamburger .line:nth-child(3) { bottom: 0; }
        .hamburger.active .line:nth-child(1) { transform: rotate(45deg); top: 11px; background: var(--primary); } .hamburger.active .line:nth-child(2) { opacity: 0; transform: translateX(-20px) scaleX(0); } .hamburger.active .line:nth-child(3) { transform: rotate(-45deg); bottom: 11px; background: var(--primary); }

        #hero {
            min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
            position: relative; padding-top: 130px; z-index: 1;
            background: var(--bg);
            overflow: hidden;
        }
        #hero-canvas {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            z-index: 1;
            pointer-events: none;
        }
        .hero-content { position: relative; z-index: 2; max-width: 850px; margin-bottom: 0; padding-bottom: 60px; }
        .hero-content h1 { font-size: 4.2rem; margin-bottom: 30px; color: var(--text); font-weight: 800; text-shadow: 0 0 18px var(--glow-primary), 0 0 30px var(--glow-primary); line-height: 1.4; will-change: opacity, transform; }
        .hero-content h1 span { color: var(--primary); display: inline-block; }
        .hero-content h1 .name { color: var(--accent); text-shadow: 0 0 18px var(--glow-accent), 0 0 30px var(--glow-accent); }
        .hero-content p.subtitle { font-size: 1.6rem; margin-bottom: 0; max-width: 720px; margin-left: auto; margin-right: auto; color: var(--text-muted); font-weight: 400; line-height: 1.75; will-change: opacity, transform; }
        .hero-content p span#changingText { color: var(--accent); font-weight: 700; border-bottom: 3px solid var(--accent); padding-bottom: 5px; text-shadow: 0 0 10px var(--glow-accent); }

        .btn { display: inline-block; padding: 15px 40px; border-radius: 6px; font-weight: 700; font-size: 1.15rem; text-align: center; border: 2px solid transparent; transition: var(--transition-smooth); cursor: none; position: relative; overflow: hidden; z-index: 1; letter-spacing: 0.8px; text-transform: uppercase; transform: perspective(1px) translateZ(0); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); will-change: transform, box-shadow, background-color, border-color, color, opacity; }
        .btn::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0)); opacity: 0; transition: opacity 0.4s ease-out; z-index: -1; border-radius: 4px; }
        .btn:hover::before { opacity: 1; }
        .btn-primary { background-color: var(--primary); color: var(--bg); border-color: var(--primary); text-shadow: none; box-shadow: 0 5px 15px var(--glow-primary); }
        .btn-primary:hover { background-color: var(--accent); border-color: var(--accent); color: #000; transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px var(--glow-accent); }
        .btn-secondary { background-color: transparent; border-color: var(--border-color); color: var(--text-muted); }
        .btn-secondary:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); box-shadow: 0 5px 12px rgba(0, 191, 255, 0.1), 0 0 10px var(--glow-primary); }

        #about { background-color: var(--secondary); }
        #about .container { display: flex; flex-wrap: wrap; align-items: center; gap: 90px; }
        .about-image { flex: 1 1 350px; text-align: center; position: relative; opacity: 1; transform: none; will-change: opacity, transform; }
        .about-image img {
            width: 100%; max-width: 350px; height: 350px;
            border-radius: 50%;
            object-fit: cover; border: none;
            box-shadow: 0 15px 40px var(--shadow-medium);
            transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease-out, filter 0.5s ease-out;
            aspect-ratio: 1 / 1; filter: saturate(1) brightness(1);
            will-change: transform, box-shadow, filter;
        }
        .about-image:hover img {
            transform: scale(1.05) translateY(-8px) rotate(2deg);
            box-shadow: 0 22px 55px var(--shadow-medium), 0 0 30px var(--glow-primary);
            filter: saturate(1.15) brightness(1.08);
        }
        .about-text { flex: 1 1 600px; opacity: 1; transform: none; will-change: opacity, transform; }
        .about-text h2 { text-align: right; margin-bottom: 25px; }
        .about-text p { font-size: 1.1rem; margin-bottom: 15px; line-height: 1.9; color: var(--text-muted); max-width: none; font-weight: 400; }

        #skills { background-color: var(--bg); }
        #skills h2 { text-align: right; }
        .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(295px, 1fr)); gap: var(--grid-gap); margin-top: 50px; }
        .skill-item { background: var(--card-bg); border-radius: 18px; padding: 50px 40px; text-align: center; border: 1px solid var(--border-color); box-shadow: 0 10px 30px var(--shadow-light); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease; position: relative; overflow: hidden; cursor: none; opacity: 1; transform: none; will-change: transform, box-shadow, border-color, opacity; }
        .skill-item::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, var(--glow-primary) 0%, transparent 65%); transition: opacity 0.6s ease-out; z-index: 0; opacity: 0; transform-origin: center; will-change: opacity; }
        .skill-item:hover { transform: translateY(-18px) scale(1.04); box-shadow: 0 20px 45px var(--shadow-medium), 0 0 20px var(--glow-primary); border-color: var(--primary); }
        .skill-item:hover::before { opacity: 0.5; }
        .skill-item i { font-size: 4.2rem; color: var(--primary); margin-bottom: 35px; display: block; transition: transform 0.5s ease-out, color 0.4s ease-out, text-shadow 0.4s ease; position: relative; z-index: 1; text-shadow: 0 0 12px var(--glow-primary); will-change: transform, color, text-shadow; }
        .skill-item:hover i { transform: scale(1.25) rotate(8deg); color: var(--accent); text-shadow: 0 0 18px var(--glow-accent); }
        .skill-item h3 { font-size: 1.8rem; color: var(--text); margin-bottom: 18px; font-weight: 700; position: relative; z-index: 1; }
        .skill-item p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.75; position: relative; z-index: 1; max-width: none; text-align: center; }

        #contact { background-color: var(--secondary); }
        #contact h2 { text-align: right; }
        .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(305px, 1fr)); gap: var(--grid-gap); margin-top: 50px; }
        .contact-item { background: var(--card-bg); padding: 45px; border-radius: 18px; box-shadow: 0 10px 25px var(--shadow-light); border: 1px solid var(--border-color); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease; text-align: center; display: flex; flex-direction: column; align-items: center; cursor: none; opacity: 1; transform: none; will-change: transform, box-shadow, border-color, opacity; }
        .contact-item:hover { transform: translateY(-15px) scale(1.03); box-shadow: 0 18px 40px var(--shadow-medium), 0 0 18px var(--glow-accent); border-color: var(--accent); }
        .contact-item i { font-size: 3.8rem; margin-bottom: 30px; color: var(--primary); transition: var(--transition-smooth); width: 90px; height: 90px; line-height: 90px; border-radius: 50%; background: rgba(0, 198, 255, 0.12); display: inline-block; text-align: center; text-shadow: 0 0 10px var(--glow-primary); box-shadow: inset 0 0 10px rgba(0, 198, 255, 0.2); will-change: transform, color, background-color, text-shadow, box-shadow; }
        .contact-item:hover i { color: var(--accent); background-color: rgba(255, 224, 0, 0.18); transform: scale(1.18) rotate(-12deg); text-shadow: 0 0 15px var(--glow-accent); box-shadow: inset 0 0 15px rgba(255, 224, 0, 0.3); }
        .contact-item h3 { font-size: 1.7rem; margin-bottom: 15px; color: var(--text); font-weight: 700; }
        .contact-item p { font-size: 1.1rem; color: var(--text-muted); margin-bottom: 30px; word-break: break-word; flex-grow: 1; max-width: none; text-align: center; }
        .contact-item a.contact-link { display: inline-block; padding: 13px 32px; border-radius: 6px; font-weight: 700; font-size: 1.05rem; text-align: center; border: 2px solid var(--border-color); transition: var(--transition-smooth); cursor: none; position: relative; overflow: hidden; z-index: 1; letter-spacing: 0.6px; text-transform: uppercase; background-color: transparent; color: var(--text-muted); margin-top: auto; will-change: transform, box-shadow, background-color, border-color, color; }
        .contact-item a.contact-link:hover { background-color: var(--primary); color: var(--bg); border-color: var(--primary); transform: translateY(-4px); box-shadow: 0 6px 15px var(--glow-primary); }

        footer { background: var(--bg); padding: 60px 0; text-align: center; border-top: 1px solid var(--border-color); margin-top: 90px; position: relative; opacity: 1; transform: none; will-change: opacity, transform; }
        footer p { font-size: 1.05rem; color: var(--text-muted); margin: 0; max-width: none; text-align: center; font-weight: 400; letter-spacing: 0.3px; }
        footer p .owner-name { font-weight: 700; color: var(--primary); }
        footer .container { opacity: 1; transform: none; will-change: opacity, transform; }

        #loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg); display: flex; justify-content: center; align-items: center; z-index: 10000; transition: opacity 0.8s ease-out 0.2s, visibility 0.8s ease-out 0.2s; opacity: 1; visibility: visible; }
        #loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: 0s; }
        .spinner { width: 65px; height: 65px; border: 7px solid rgba(255, 255, 255, 0.08); border-top-color: var(--primary); border-left-color: var(--accent); border-radius: 50%; animation: spin 1.1s linear infinite; box-shadow: 0 0 18px var(--glow-primary), 0 0 12px var(--glow-accent); }
        @keyframes spin { 100% { transform: rotate(360deg); } }

        #progress-bar {
            position: fixed; top: 0; left: 0; right: 0; height: 5px; background: transparent;
            transform-origin: left; transform: scaleX(0);
            background: linear-gradient(90deg, var(--primary), var(--accent));
            box-shadow: 0 0 10px var(--glow-primary); z-index: 1001;
            transition: transform 0.1s linear;
        }
        #progress-circle {
            position: fixed; bottom: 30px; left: 30px; width: 50px; height: 50px;
            z-index: 1001; display: none; transform: rotate(-90deg); overflow: visible;
        }
        #progress-circle.completed-red .progress-fill {
            stroke: var(--red-color);
            filter: drop-shadow(0 0 6px var(--glow-red));
        }
        #progress-circle.completed-red .completion-icon-heart {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1) rotate(90deg);
            color: var(--red-color);
            filter: drop-shadow(0 0 5px var(--glow-red));
        }
        #progress-circle svg { width: 100%; height: 100%; overflow: visible; }
        #progress-circle circle { fill: none; stroke-width: 4; }
        #progress-circle .bg-circle { stroke: rgba(255, 255, 255, 0.1); }
        #progress-circle .progress-fill {
            stroke: var(--primary); stroke-linecap: round;
            transition: stroke-dashoffset 0.1s linear, stroke 0.4s ease-out, filter 0.4s ease-out;
            filter: drop-shadow(0 0 5px var(--glow-primary));
        }
        .completion-icon-heart {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.8) rotate(90deg);
            font-size: 18px;
            color: var(--red-color);
            opacity: 0;
            transition: opacity 0.4s ease-out 0.2s,
                        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
                        color 0.4s ease-out,
                        filter 0.4s ease-out;
            will-change: transform, opacity;
            filter: none;
        }

        @media (max-width: 1024px) { :root { --section-padding: 110px 0; --grid-gap: 35px; } h2 { font-size: 2.7rem; } .hero-content h1 { font-size: 3.7rem; } .hero-content p.subtitle { font-size: 1.4rem; } #about .container { gap: 60px; } .skills-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
        @media (max-width: 768px) {
            :root { --section-padding: 90px 0; --container-padding: 0 25px; --grid-gap: 30px; }
            body { font-size: 16px; cursor: auto; }
            a, button, .hamburger, .logo, .skill-item, .contact-item { cursor: pointer; }
            h2 { font-size: 2.3rem; margin-bottom: 25px; padding-bottom: 15px; } h2::before { width: 0%; min-width: 80px; max-width: 120px; height: 5px; } h2.is-visible::before { width: 50%; } section:hover h2::before { width: 70%; }
            .hero-content { padding-bottom: 40px; }
            .hero-content h1 { font-size: 3rem; line-height: 1.35;} .hero-content p.subtitle { font-size: 1.25rem; margin-bottom: 0px;}
            .btn { padding: 13px 32px; font-size: 1.05rem; }
            nav ul { position: fixed; top: 0; right: -100%; width: 290px; height: 100vh; background-color: var(--secondary); flex-direction: column; padding-top: 110px; text-align: center; transition: right 0.55s cubic-bezier(0.77, 0, 0.175, 1); box-shadow: -10px 0 30px var(--shadow-medium); z-index: 999; border-left: 1px solid var(--border-color); will-change: right; display: flex; }
            nav ul.active { right: 0; } nav ul li { margin: 0 0 40px 0; width: 100%; } nav ul li a { font-size: 1.4rem; display: block; padding: 18px 0; } nav ul li a::after { left: 50%; transform: translateX(-50%); height: 2.5px; transform-origin: center; } .hamburger { display: block; }
            #about .container { flex-direction: column; text-align: center; gap: 40px; }
            #about .about-text h2 { text-align: center; } #about p { text-align: center; }
            .about-image img { max-width: 300px; height: 300px; border-radius: 50%;}
            .skills-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 40px; } .contact-grid { grid-template-columns: 1fr; margin-top: 40px; } .skill-item, .contact-item { padding: 40px 30px; border-radius: 15px; } footer { margin-top: 70px; padding: 50px 0;}

            #progress-bar { display: none; }
            #progress-circle { display: block; }
            .c-scrollbar { display: none !important; }
            #theft-warning h2 { font-size: 2rem; }
            #theft-warning p { font-size: 1.1rem; }
            #theft-warning i { font-size: 5rem;}
        }
        @media (max-width: 480px) { :root { --section-padding: 80px 0; --container-padding: 0 20px; --grid-gap: 25px; } h2 { font-size: 2rem; margin-bottom: 20px; } h2::before { height: 4px; } .hero-content h1 { font-size: 2.5rem; line-height: 1.4; margin-bottom: 25px;} .hero-content p.subtitle { font-size: 1.15rem; margin-bottom: 0;} .btn { padding: 12px 30px; font-size: 1rem; letter-spacing: 0.6px;} .logo { font-size: 2.1rem; } .skills-grid { grid-template-columns: 1fr; } .skill-item i { font-size: 3.8rem; margin-bottom: 30px;} .skill-item h3 { font-size: 1.6rem; } .contact-item i { font-size: 3.2rem; margin-bottom: 25px; width: 80px; height: 80px; line-height: 80px;} .contact-item h3 { font-size: 1.5rem; } .about-image img { max-width: 250px; height: 250px; box-shadow: 0 12px 30px var(--shadow-medium), 0 0 15px var(--glow-primary);} nav ul { padding-top: 100px; width: 260px;} nav ul li a { font-size: 1.3rem; }
            #progress-circle { width: 45px; height: 45px; bottom: 20px; left: 20px; }
            #progress-circle circle { stroke-width: 3.5; }
            .completion-icon-heart { font-size: 16px; }
            #theft-warning h2 { font-size: 1.8rem; }
            #theft-warning p { font-size: 1rem; }
            #theft-warning i { font-size: 4rem;}
        }



        

/* Add or Replace these styles */
.visitor-stats {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 25px; /* Increased margin */
    opacity: 0.8;
    transition: opacity 0.3s ease;
    display: flex; /* Use flex for alignment */
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 8px; /* Space between icon, label, and value */
}

.visitor-stats:hover {
    opacity: 1;
}

.visitor-stats .stats-label {
    display: inline-flex; /* Keep icon and text together */
    align-items: center;
}

.visitor-stats i {
    /* Removed margin-left, handled by gap */
    color: var(--primary);
    font-size: 1.1em; /* Slightly larger icon */
    margin-right: 8px; /* Space between icon and text */

}

.visitor-stats .stats-value {
    font-weight: 700;
    font-size: 1.05em; /* Slightly larger count */
    color: var(--accent);
    background-color: rgba(255, 224, 0, 0.1); /* Subtle background */
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 25px; /* Prevent layout shift */
    text-align: center;
    display: inline-block;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

footer {
     padding: 50px 0; /* Keep padding reasonable */
}

@media (max-width: 480px) {
    .visitor-stats {
        font-size: 0.9rem;
        margin-top: 20px;
        gap: 5px;
    }
    footer {
        padding: 40px 0 30px;
    }
    .visitor-stats .stats-value {
        min-width: 20px;
        padding: 1px 6px;
    }
}

/* Ensure theft warning is above everything */
#theft-warning {
    z-index: 10002; /* Higher than other elements */
}