@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--bg:#0b0d0c;--panel:#121613;--line:#282e28;--text:#f0f2ec;--muted:#929a92;--lime:#c4fa70;--mono:'IBM Plex Mono',monospace;--heading:'Space Grotesk',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;background:var(--bg);color:var(--text);font:15px 'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:6px}header{height:88px;max-width:1440px;margin:auto;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.logo{font:bold 25px var(--heading);letter-spacing:-1.6px}.logo span{color:var(--lime)}.logo i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-left:6px}nav{display:flex;gap:36px;font-size:13px;color:#b7beb5}nav a:hover,.text-link:hover{color:var(--lime)}.contact-link{font-size:13px;border-bottom:1px solid #6d7966;padding:12px 0}.contact-link span{margin-left:24px;color:var(--lime)}.hero{max-width:1440px;margin:auto;padding:72px 6% 0;position:relative;display:grid;grid-template-columns:1.1fr 1fr;min-height:650px;overflow:hidden}.eyebrow,.section-tag{font:10px var(--mono);letter-spacing:1.6px;color:var(--lime)}.eyebrow{display:flex;gap:10px;align-items:center}.eyebrow i,.float-label i,.code-footer i{width:5px;height:5px;background:var(--lime);border-radius:50%;display:inline-block;box-shadow:0 0 12px #c4fa7060}.intro{font:25px var(--heading);margin:35px 0 14px}.wave{color:var(--lime);display:inline-block;font-size:27px;margin-left:8px;animation:spin 15s linear infinite}h1{font:600 clamp(48px,5.2vw,76px)/1.04 var(--heading);letter-spacing:-4px;margin:0}em{font-style:normal;color:var(--lime)}.lead{font-size:14px;line-height:1.8;color:#a1aaa0;margin:26px 0 29px}.hero-actions{display:flex;gap:12px}.button{display:inline-flex;align-items:center;justify-content:center;gap:27px;padding:16px 23px;border:1px solid var(--line);border-radius:5px;font-weight:600;font-size:12px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.primary{background:var(--lime);color:#17200d;border-color:var(--lime)}.primary:hover{background:#d2ff92}.secondary{background:#141813}.hero-note{display:flex;align-items:center;gap:12px;margin:29px 0 20px;font:10px/1.7 var(--mono);color:#c0c6bd}.hero-note strong{font-weight:400;color:#717d70}.tiny-code{border:1px solid var(--line);border-radius:50%;padding:10px;color:var(--lime);font-size:16px}.hero-art{position:relative;height:460px;min-width:0}.grid{position:absolute;inset:-40px -60px 0;background-image:linear-gradient(#242c2340 1px,transparent 1px),linear-gradient(90deg,#242c2340 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(ellipse,#000 5%,transparent 72%)}.orbit-system{position:absolute;top:4px;left:11%;width:340px;height:300px;filter:drop-shadow(0 0 40px #a2ef4c18)}.sphere{width:195px;height:195px;border-radius:50%;position:absolute;top:54px;left:75px;background:radial-gradient(circle at 33% 28%,#283c1b,#131b0e 50%,#060905 80%);box-shadow:inset -14px -10px 30px #000,inset 1px 1px 3px #c5fa7088,0 0 55px #9cd24f12;overflow:hidden;display:grid;place-items:center}.sphere:before,.sphere:after{content:'';position:absolute;width:98%;height:98%;border:1px solid #b3e97150;border-radius:50%;transform:scaleX(.45)}.sphere:after{transform:scaleX(.75)}.sphere-grid{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 22px,#bddf8133 23px,transparent 24px);border-radius:50%;transform:rotate(-22deg)}.sphere span{font:500 62px var(--mono);color:var(--lime);text-shadow:0 0 30px #b2ff4060;z-index:1;transform:rotate(-12deg)}.orbit{position:absolute;border:1px solid #8eae5b80;border-radius:50%;width:350px;height:130px;top:85px;left:0;transform:rotate(-27deg);animation:orbit 15s ease-in-out infinite}.orbit.two{transform:rotate(46deg);height:160px;border-color:#78964b50;animation-delay:-5s}.orbit.three{transform:rotate(96deg);border-color:#b0d87133;height:115px;animation-delay:-9s}.satellite{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--lime);box-shadow:0 0 23px #c4fa7080}.s1{top:64px;right:5px}.s2{left:28px;top:212px;width:7px;height:7px}.float-label{position:absolute;font:9px var(--mono);border:1px solid #455136;background:#151d11cc;padding:10px 13px;border-radius:4px;display:flex;gap:8px;align-items:center;animation:float 5s ease-in-out infinite}.label-top{right:0;top:14px}.code-panel{position:absolute;width:350px;bottom:8px;left:12%;background:#121713ed;border:1px solid #46503c;border-radius:9px;box-shadow:0 22px 60px #0009;transform:rotate(-4deg);animation:float 7s ease-in-out infinite}.code-top{border-bottom:1px solid #2b3327;padding:13px 14px;display:flex;align-items:center;justify-content:space-between;font:10px var(--mono);color:#7b8775}.code-top>span{display:flex;gap:5px}.code-top b{height:6px;width:6px;border-radius:50%;background:#58634e}.code-top b:first-child{background:#ba7760}.code-top b:nth-child(2){background:#c4bb70}.code-top b:nth-child(3){background:#9eae71}.code-top small{color:#c7cf74}.code-body{font:11px/2.1 var(--mono);padding:18px 10px;color:#c0c8b9}.code-body i{font-style:normal;color:#4b5a44;display:inline-block;width:30px;text-align:center;margin-right:9px}.lime{color:#b9dc81}.purple{color:#c4a1e2}.code-footer{display:flex;justify-content:space-between;font:8px var(--mono);color:#88977e;padding:10px 15px;border-top:1px solid #2b3327}.code-footer i{width:4px;height:4px}.cursor{color:var(--lime);animation:blink 1s steps(2) infinite}.art-caption{position:absolute;bottom:-20px;left:17%;font:8px var(--mono);letter-spacing:1.5px;color:#54624e}.hero-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);height:72px;margin-top:55px;color:#73806e;font:8px var(--mono);letter-spacing:1.3px}.hero-bottom a{color:#bcc5b5}.hero-bottom a span{color:var(--lime);margin-left:15px}.motion{background:none;border:0;color:#95a489;font:9px var(--mono)}.stack-strip{border-block:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 6%;max-width:1440px;margin:auto;background:#10140f}.stack-strip>span{font:8px var(--mono);max-width:85px;line-height:1.8;color:#6d7a65;letter-spacing:1px}.stack-strip strong{font:500 16px var(--heading);color:#b8c0b2;white-space:nowrap}.stack-strip b{font-size:15px;color:#64774e;font-weight:400}.section{max-width:1440px;margin:auto;padding:85px 6%;scroll-margin-top:20px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:35px}h2{font:500 43px/1.1 var(--heading);letter-spacing:-1.7px;margin:19px 0 0}h2>span:not(.contact-star){color:#7f897a}.section-heading p{font-size:12px;line-height:1.8;color:var(--muted);margin:0 0 4px}.text-link{font:11px var(--mono);border-bottom:1px solid #536047;padding-bottom:8px;white-space:nowrap}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:27px}.project-card{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:#10140f;transition:border .2s,transform .3s}.project-card:hover{border-color:#849f61;transform:translateY(-5px)}.project-visual{height:256px;padding:24px;position:relative;overflow:hidden}.voice{background:radial-gradient(ellipse at 50% 20%,#353747,#191c26 65%);color:#c7c6dd}.visual-top{display:flex;justify-content:space-between;font:12px var(--heading)}.visual-top small{font:7px var(--mono);letter-spacing:1px;opacity:.5}.waveform{display:flex;justify-content:center;align-items:center;height:103px;gap:4px;margin-top:10px}.waveform i{width:4px;border-radius:3px;background:linear-gradient(#d2c5ff,#8b7aa9);height:var(--h);animation:bars 1.4s ease-in-out infinite alternate;animation-delay:var(--d)}.player{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#ffffff08;border:1px solid #ffffff0c;border-radius:6px}.play{background:#c3b0ef;color:#221d30;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:9px}.player strong{font-size:10px;display:block;font-weight:500}.player small{font:7px var(--mono);display:block;margin-top:4px;opacity:.5}.player>span:last-child{margin-left:auto;font:8px var(--mono);opacity:.5}.concept{position:absolute;right:13px;bottom:8px;font:6px var(--mono);letter-spacing:1px;opacity:.4}.ocr{background:radial-gradient(ellipse at top,#28382e,#14221b 70%);color:#bdd6c4}.ocr-demo{display:flex;align-items:center;justify-content:center;gap:24px;height:180px}.paper{height:123px;width:88px;background:#d7e3cc;border-radius:3px;padding:25px 12px;position:relative;transform:rotate(-7deg)}.paper div{height:4px;background:#83927e;margin-bottom:12px}.paper div:nth-child(2){width:80%}.paper div:nth-child(4){width:60%}.scan{position:absolute;left:-10px;right:-10px;height:1px;background:var(--lime);box-shadow:0 0 12px #bfff79;top:15px;animation:scan 3s ease-in-out infinite alternate}.ocr-demo>span{opacity:.5}.result{font:12px/1.7 var(--mono)}.result small{font-size:7px;color:#7eab8a;display:block;margin-bottom:12px}.result b{display:block;font:7px var(--mono);color:#8cd19a;margin-top:15px}.result code span{animation:blink 1s infinite}.project-info{padding:25px}.project-info small,.resume-grid small{font:8px var(--mono);letter-spacing:1px;color:#849579}h3{font:500 24px var(--heading);letter-spacing:-.5px;margin:11px 0}.project-info h3{display:flex;justify-content:space-between}.project-info h3 span{font-size:20px;color:#75886a}.project-info p,.resume-grid p{color:#8e9b87;font-size:12px;line-height:1.8;margin:0}.tags{display:flex;gap:7px;margin-top:22px}.tags span{border:1px solid #2c3727;border-radius:4px;font:8px var(--mono);padding:5px 8px;color:#a3b397}.wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.wide .project-info{padding:36px}.wide .text-link{display:inline-block;margin-top:25px}.lock{height:100%;min-height:270px;background:radial-gradient(ellipse at center,#293720,#131b11);display:flex;flex-direction:column;align-items:center;justify-content:center}.lock>small{font:7px var(--mono);letter-spacing:2px;color:#728665}.lock-icon{font:62px var(--heading);color:#bad991;line-height:1.4}.lock strong{font:18px var(--heading);color:#bbccaf}.lock>div{margin-top:20px;border:1px solid #6d83514d;border-radius:5px;padding:10px 16px;font:8px var(--mono);letter-spacing:5px;color:#8ea477}.lock>div span{margin-left:35px;color:var(--lime)}.about{display:grid;grid-template-columns:1fr 1fr;gap:8%;border-block:1px solid var(--line);background:#10140f}.about-copy p{font:17px/1.8 var(--heading);color:#c8d0c1;margin:0 0 22px}.about-copy p+p{font:13px/1.9 'DM Sans',sans-serif;color:#8b9784}.approach{display:flex;gap:20px;border-top:1px solid var(--line);padding-top:23px;font:8px var(--mono);color:var(--lime)}.resume-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;border-block:1px solid var(--line);padding:32px 0}.resume-grid h3{font-size:19px;margin-top:18px}.resume-note{font:9px var(--mono);color:#73806b;margin-top:23px}.contact{background:var(--lime);color:#15200d;padding-top:65px;padding-bottom:60px;border-radius:8px;max-width:calc(1440px - 12%);margin:0 6% 65px;position:relative}.contact .section-tag{color:#566b3c}.contact h2{font-size:66px;letter-spacing:-3px}.contact em{color:#5b773b}.contact-star{position:absolute;right:8%;top:65px;font-size:125px;font-weight:400;animation:spin 40s linear infinite}.contact-row{display:flex;align-items:center;gap:26px;margin-top:35px;font-size:11px}.contact .primary{background:#14200b;color:var(--lime)}#copy-email{background:none;border:0;font-size:11px;padding:12px 0}.contact-row>a:nth-last-child(2){margin-left:auto}footer{max-width:1440px;margin:auto;padding:0 6% 32px;display:flex;justify-content:space-between;align-items:center}footer .logo{font-size:21px}footer>span,footer>a:last-child{font:9px var(--mono);color:#7b8872}.progress{position:fixed;top:0;left:0;height:2px;background:var(--lime);width:0;z-index:20}.skip{position:absolute;top:-80px;z-index:50;background:var(--lime);color:#000;padding:15px}.skip:focus{top:0}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,20px);background:var(--lime);color:#14200b;padding:14px 24px;border-radius:6px;opacity:0;pointer-events:none;transition:.3s;z-index:30}.toast.visible{opacity:1;transform:translate(-50%,0)}body.paused *,body.paused *:before,body.paused *:after{animation-play-state:paused!important}body.paused{scroll-behavior:auto}@keyframes float{50%{translate:0 -10px}}@keyframes orbit{50%{rotate:12deg}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes blink{50%{opacity:0}}@keyframes bars{to{transform:scaleY(.45)}}@keyframes scan{to{top:105px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media(min-width:1441px){.contact{margin-inline:auto;max-width:1267px}}@media(max-width:1000px){h1{font-size:56px;letter-spacing:-2.7px}.hero{padding-top:60px}.hero-art{transform:scale(.85);transform-origin:center top}.orbit-system{left:0}.code-panel{left:0}.hero-bottom>span{display:none}.stack-strip{gap:12px;overflow:hidden}.stack-strip strong{font-size:12px}.section-heading p{display:none}.contact h2{font-size:57px}}@media(max-width:700px){header{height:74px;padding-inline:6%}.logo{font-size:23px}nav{gap:15px;font-size:11px}.contact-link{display:none}.hero{display:block;padding-top:40px}.eyebrow{font-size:8px;letter-spacing:1px}.intro{font-size:22px;margin-top:28px}h1{font-size:clamp(43px,11vw,65px);letter-spacing:-2.5px}.lead{font-size:13px}.desktop{display:none}.hero-art{height:375px;transform:scale(.88);transform-origin:center center;margin-inline:-12px}.orbit-system{left:calc(50% - 170px);top:0}.code-panel{left:calc(50% - 175px);bottom:-10px}.label-top{right:3%;top:0}.art-caption{display:none}.hero-bottom{margin-top:30px;height:65px}.hero-note{margin-bottom:0}.stack-strip{padding-block:20px;flex-wrap:wrap;justify-content:center;gap:14px 18px}.stack-strip>span{max-width:none;width:100%;text-align:center}.stack-strip b{font-size:10px}.stack-strip strong{font-size:12px}.stack-strip b:nth-last-of-type(1){display:none}.section{padding:58px 6%}.section-heading{align-items:flex-start}h2{font-size:35px}.section-tag{font-size:8px;letter-spacing:1px}.section-heading>.text-link{font-size:8px;margin-top:35px}.project-grid{grid-template-columns:1fr;gap:20px}.wide{grid-column:auto;display:block}.wide .project-info{padding:25px}.project-visual{height:242px}.lock{min-height:242px}.about{grid-template-columns:1fr;gap:30px}.about-copy p{font-size:16px}.approach{justify-content:space-between;gap:5px}.resume .section-heading{flex-wrap:wrap}.resume .button{margin-top:5px}.resume-grid{grid-template-columns:1fr;gap:30px}.resume-note{line-height:1.8}.contact{padding:40px 7%;margin:0 6% 45px}.contact h2{font-size:43px;letter-spacing:-2px}.contact-star{font-size:65px;right:6%;top:32px}.contact-row{flex-wrap:wrap;gap:18px}.contact-row>a:nth-last-child(2){margin-left:0}.contact .button{width:100%}footer{flex-wrap:wrap;gap:20px}footer>span{order:3;width:100%;font-size:8px}.button{padding:15px 18px;gap:16px}}@media print{body{background:white;color:black}header,.hero,.stack-strip,.projects,.about,.contact,footer,.progress,.toast,.resume .button{display:none!important}.resume{padding:20px}.resume h2,.resume h2>span,.resume-grid p,.resume-note,.section-tag,.resume-grid small{color:black}.resume-grid{display:block}.resume-grid>div{margin-bottom:25px}.resume:before{content:'Hamza Afzal — Software Engineer';font-size:28px}.resume:after{content:'github.com/ihamxaafzal · mhamzaafzal785@gmail.com';display:block;margin-top:30px}.section-heading p{display:block}}