* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

        :root {
            --teal: #ffffff;
            --teal-dim: rgba(18,163,189,0.12);
            --teal-glow: rgba(18,163,189,0.35);
        }

        body {
            font-family: 'Poppins', sans-serif;
            height: 100vh;
            height: 100dvh;
            overflow: hidden;
            color: #fff;
            background: #0a0a0a;
        }

        body::before {
            content: '';
            position: fixed; inset: 0;
            background:
                radial-gradient(ellipse 65% 100% at -5% 55%, rgba(18,163,189,0.32) 0%, transparent 55%),
                radial-gradient(ellipse 40% 60% at 2% 20%, rgba(14,120,150,0.18) 0%, transparent 50%),
                radial-gradient(ellipse 30% 40% at 0% 90%, rgba(10,80,110,0.15) 0%, transparent 50%);
            z-index: -1; pointer-events: none;
        }
        body::after {
            content: '';
            position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
            background: radial-gradient(circle 800px at 15% 60%, rgba(18,163,189,0.10) 0%, transparent 60%);
            animation: breathe 12s ease-in-out infinite;
            z-index: -1; pointer-events: none;
        }
        @keyframes breathe {
            0%,100% { transform: scale(1) translate(0,0); opacity: 1; }
            50%      { transform: scale(1.08) translate(2%, 3%); opacity: 0.7; }
        }

        /* ── NAVBAR ── */
        .navbar {
            position: fixed; top: 0; left: 0; right: 0; height: 56px;
            display: flex; align-items: center; justify-content: space-between;
            padding: 0 20px; z-index: 1000;
            background: transparent;
            backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .logo img { height: 34px; width: auto; display: block; }
        .nav-site  { font-size: 11px; color: rgba(255,255,255,0.30); letter-spacing: 0.3px; }

        /* ── HERO ── */
        .hero-section {
            position: absolute; top: 0; left: 0; width: 100%;
            height: 100vh; height: 100dvh;
            display: flex; flex-direction: column;
            justify-content: center; align-items: center;
            text-align: center; z-index: 10;
            transition: transform 0.8s cubic-bezier(0.77,0,0.175,1), opacity 0.8s ease;
            perspective: 1000px; padding: 0 24px;
        }
        .hero-section.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; }

        .profile-container {
            width: 150px; height: 150px; margin-bottom: 24px;
            position: relative; will-change: transform; transform-style: preserve-3d;
        }
        .profile-container img {
            width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
            border: 3px solid var(--teal);
            box-shadow: 0 0 0 6px var(--teal-dim), 0 0 40px var(--teal-glow), 0 20px 60px rgba(0,0,0,0.6);
            display: block;
        }
        .profile-container::before {
            content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px;
            border-radius: 50%; border: 2px solid rgba(18,163,189,0.35);
            animation: pulse 3s ease-in-out infinite;
        }
        .profile-container::after {
            content: ''; position: absolute; top: -22px; left: -22px; right: -22px; bottom: -22px;
            border-radius: 50%; border: 1px solid rgba(18,163,189,0.12);
            animation: pulse 3s ease-in-out infinite 0.5s;
        }
        @keyframes pulse {
            0%   { transform: scale(1); opacity: 0.8; }
            50%  { transform: scale(1.08); opacity: 0.15; }
            100% { transform: scale(1); opacity: 0.8; }
        }

        .hero-content h1 {
            font-size: clamp(1.6rem, 5vw, 3.8rem); font-weight: 800;
            line-height: 1.1; margin-bottom: 10px; letter-spacing: -0.5px;
        }
        .hero-content .subtitle {
            color: var(--teal); font-weight: 500; font-size: 11px;
            letter-spacing: 3px; text-transform: uppercase; opacity: 0.9;
        }

        .scroll-indicator {
            position: absolute; bottom: 36px;
            display: inline-flex; align-items: center; gap: 10px;
            padding: 10px 26px; border: 1px solid rgba(255,255,255,0.18);
            border-radius: 30px; font-size: 10px; letter-spacing: 2.5px;
            text-transform: uppercase; color: rgba(255,255,255,0.55);
            cursor: pointer; transition: border-color .25s, color .25s, background .25s;
            animation: bounce 2.5s ease-in-out infinite;
        }
        .scroll-indicator:hover, .scroll-indicator:active {
            border-color: var(--teal); color: var(--teal); background: rgba(18,163,189,0.08);
        }
        .scroll-indicator::before { content: ''; width: 18px; height: 1px; background: currentColor; }
        @keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

        /* ── PROJECTS LAYOUT ── */
        .projects-layout {
            position: absolute; top: 56px; left: 0; width: 100%;
            height: calc(100vh - 56px); height: calc(100dvh - 56px);
            opacity: 0; visibility: hidden; transform: translateY(80px);
            transition: all 0.8s cubic-bezier(0.77,0,0.175,1);
        }
        .projects-layout.visible { opacity: 1; visibility: visible; transform: translateY(0); }

        .scroll-track {
            height: 100%; width: 100%;
            display: flex; flex-direction: row;
        }

        .left-content {
            flex: 1; display: flex; align-items: center; justify-content: center;
            padding: 2rem 2rem 2rem 2.5rem; position: relative;
        }

        .project-text-group {
            position: absolute; opacity: 0;
            pointer-events: none; max-width: 480px; width: 100%;
        }
        .project-text-group.active { opacity: 1; pointer-events: all; position: relative; }

        .project-tag {
            display: inline-block; padding: 4px 12px; border-radius: 20px;
            font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
            margin-bottom: 12px; border: 1px solid rgba(18, 163, 189, 0);
            background: rgba(18, 163, 189, 0.301); color: var(--teal);
        }
        .project-text-group h2 {
            font-size: clamp(1.4rem, 2.5vw, 2.6rem); font-weight: 800;
            letter-spacing: -0.5px; line-height: 1.15; margin-bottom: 10px;
        }
        .project-text-group p {
            font-size: 13px; color: rgba(255,255,255,0.48); line-height: 1.75; max-width: 340px;
        }
        .cta-button {
            display: inline-flex; align-items: center; gap: 8px;
            margin-top: 22px; padding: 11px 24px; background: #fff; color: #000;
            text-decoration: none; border-radius: 4px; font-weight: 600; font-size: 12px;
            letter-spacing: 0.2px; transition: background .25s, transform .25s, color .25s;
        }
        .cta-button:hover, .cta-button:active { background: var(--teal); background: #000; color: #fff; transform: translateY(-2px); }
        .cta-button::after { content: '→'; }

        .right-side {
            width: 50%; height: 100%;
            overflow-y: scroll; overflow-x: hidden;
            scroll-snap-type: y mandatory;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-y: contain;
            padding-bottom: 50vh;
        }
        .right-side::-webkit-scrollbar { display: none; }

        .item-section {
            height: 90vh; height: 90dvh;
            scroll-snap-align: center;
            display: flex; align-items: center; justify-content: center;
        }

        .showcase-wrapper {
            position: relative; display: flex;
            align-items: center; justify-content: center;
            transition: opacity 0.3s ease;
        }

        .showcase-item { position: relative; overflow: hidden; will-change: transform; z-index: 2; }

        .laptop-mockup {
            width: 500px; height: 320px; border-radius: 14px;
            border: 11px solid #1e1e1e; background: #111;
            box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04), 0 0 60px rgba(18,163,189,0.08);
        }
        .phone-mockup {
            width: 280px; height: 560px; border-radius: 36px;
            border: 8px solid #1e1e1e; background: #111;
            box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04), 0 0 60px rgba(100,30,180,0.10);
        }
        .canvas-mockup {
            width: 400px; height: 450px; border-radius: 4px;
            border: 15px solid #3e2c1a; background: #eee;
            box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04);
        }

        .screen-content {
            width: 100%; height: 100%; display: flex; flex-direction: column;
            justify-content: center; align-items: center; text-align: center; padding: 20px;
        }
        .theme-web    { background: linear-gradient(145deg, #0f2744 0%, #1a4b80 100%); color: #fff; }
        .theme-mobile { background: linear-gradient(145deg, #0f2744 0%, #1a4b80 100%); color: #fff; }
        .theme-art    { background: #fdfaf5; color: #333; }

        .float-img {
            position: absolute; pointer-events: none; will-change: transform; z-index: 5;
            filter: drop-shadow(0 16px 32px rgba(0,0,0,0.55));
        }
        .float-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

        .web-float-a    { width: 230px; height: 230px; top: -55px; left: -60px; }
        .web-float-b    { width: 230px; height: 230px; bottom: -45px; right: -50px; }
        .mobile-float-a { width: 200px; height: 200px; top: -50px; right: 160px; }
        .mobile-float-b { width: 250px; height: 250px; bottom: -40px; left: 160px; }
        .art-float-a    { width: 230px; height: 230px; top: -50px; left: -55px; }
        .art-float-b    { width: 230px; height: 230px; bottom: -40px; right: -50px; }


        .scroll-dots {
            position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
            display: flex; flex-direction: column; gap: 8px; z-index: 50;
        }
        .dot { width: 4px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); transition: height .3s, background .3s; }
        .dot.active { height: 20px; background: var(--teal); }

        @media (min-width: 769px) {
            .scroll-track {
                display: grid;
                grid-template-columns: 1fr 1fr;
                overflow-y: scroll;
                scroll-snap-type: y mandatory;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-y: contain;
            }
            .scroll-track::-webkit-scrollbar { display: none; }

            .left-content {
                grid-column: 1;
                grid-row: 1 / -1;
                position: sticky;
                top: 0;
                height: 100%;
            }

            .right-side { display: contents; }

            .item-section { grid-column: 2; }
        }

        @media (max-width: 768px) {

            .scroll-track { flex-direction: column; }

            .left-content {
                width: 100%; height: 38%; min-height: 180px; flex-shrink: 0;
                padding: 16px 24px 8px; align-items: flex-start;
            }

            .project-text-group { max-width: 100%; }
            .project-text-group h2 { font-size: 1.45rem; }
            .project-text-group p  { font-size: 12px; max-width: 100%; }
            .project-tag           { font-size: 9px; margin-bottom: 8px; }
            .cta-button            { margin-top: 12px; padding: 9px 20px; font-size: 11px; }

            .right-side {
                width: 100%;
                height: 62%;
                flex-shrink: 0;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-y: contain;
                scroll-snap-type: y mandatory;
                padding-bottom: 60vh; /* Reduced padding so the last item remains reachable */
                touch-action: pan-y;
            }

            .item-section {
                height: 50vh; /* Explicit vertical section height for snap scrolling */
                min-height: 20px;
                scroll-snap-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: visible; /* Prevents shadow clipping */
            }

            .laptop-mockup {
                width: min(320px, 82vw);
                height: calc(min(320px, 82vw) * 0.62);
                border-width: 7px; border-radius: 10px;
            }
            .phone-mockup {
                width: min(150px, 36vw);
                height: calc(min(150px, 36vw) * 2);
                border-width: 5px; border-radius: 22px;
            }
            .canvas-mockup {
                width: min(240px, 68vw);
                height: calc(min(240px, 68vw) * 1.1);
                border-width: 9px;
            }

            .web-float-a    { width: 95px;  height: 95px;  top: -26px; left: -26px; }
            .web-float-b    { width: 95px;  height: 95px;  bottom: -26px; right: -26px; }
            .mobile-float-a { width: 85px;  height: 85px;  top: -24px; right: 50px; }
            .mobile-float-b { width: 100px; height: 100px; bottom: -24px; left: 50px; }
            .art-float-a    { width: 95px;  height: 95px;  top: -26px; left: -26px; }
            .art-float-b    { width: 95px;  height: 95px;  bottom: -26px; right: -26px; }

            .scroll-dots { display: none; }
        }

        @media (max-width: 380px) {
            .left-content  { height: 36%; padding: 12px 16px 6px; }
            .right-side    { height: 64%; }
            .profile-container { width: 120px; height: 120px; }
            .hero-content h1   { font-size: 1.3rem; }
        }