:root{--bg:#081016;--bg2:#0c171d;--paper:#f2eadb;--ink:#11181d;--muted:#9eabb0;--line:rgba(255,255,255,.13);--green:#8df0b5;--cyan:#79dce8;--yellow:#f3c85d;--max:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#eef5f3;font-family:'DM Sans',sans-serif;overflow-x:hidden}.container{width:min(var(--max),calc(100% - 48px));margin:auto}.nav-wrap{position:fixed;top:0;left:0;width:100%;z-index:20;background:linear-gradient(180deg,rgba(8,16,22,.9),transparent);backdrop-filter:blur(10px)}.nav{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{font:700 20px 'Space Grotesk';color:#fff;text-decoration:none;letter-spacing:-.04em}.brand span{color:var(--green)}.nav-links{display:flex;gap:34px}.nav-links a,.nav-dot{color:#d6dfdd;text-decoration:none;font-size:13px}.nav-links a{transition:color .2s}.nav-links a:hover{color:var(--green)}.nav-dot{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.nav-dot span{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green)}.ambient{position:fixed;border-radius:50%;filter:blur(75px);pointer-events:none;z-index:-1;opacity:.12;will-change:transform}.ambient-1{width:360px;height:360px;left:-170px;top:15vh;background:#39e0a1}.ambient-2{width:320px;height:320px;right:-140px;top:58vh;background:#44b9e8}.grain{position:fixed;inset:0;pointer-events:none;opacity:.035;z-index:10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.hero{min-height:100vh;position:relative;padding-top:110px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:45px}.hero-art{height:620px;border-radius:32px;position:relative;overflow:hidden;background:linear-gradient(160deg,#142c3a,#081015 72%);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.28)}.moon{position:absolute;width:150px;height:150px;border-radius:50%;right:12%;top:10%;background:radial-gradient(circle at 35% 30%,#fff,#cbd9d9 65%,#a4b4b5);box-shadow:0 0 55px rgba(220,255,255,.18)}.stars{position:absolute;inset:0;background-image:radial-gradient(#dff 1px,transparent 1px),radial-gradient(#fff .8px,transparent .8px);background-size:88px 75px,127px 101px;background-position:12px 18px,55px 30px;opacity:.55}.mountains{position:absolute;left:-8%;width:116%;bottom:18%;height:36%;clip-path:polygon(0 100%,10% 58%,18% 72%,29% 32%,38% 65%,51% 20%,63% 64%,76% 38%,88% 69%,100% 42%,100% 100%);}.mountains.back{background:#17303c;opacity:.9}.mountains.front{bottom:7%;height:31%;background:#071014;clip-path:polygon(0 100%,8% 68%,16% 78%,28% 43%,39% 71%,52% 31%,65% 74%,78% 48%,90% 70%,100% 53%,100% 100%)} .desk-scene{position:absolute;bottom:5%;left:7%;right:7%;height:43%;}
.desk{position:absolute;left:4%;right:4%;bottom:18%;height:11px;background:#2d4147;border-radius:8px;box-shadow:0 0 18px rgba(121,220,232,.08)}
.desk:after{content:"";position:absolute;left:12%;top:10px;width:5px;height:94px;background:#26343a;box-shadow:calc(66vw - 40px) 0 0 #26343a;max-width:44vw}
.laptop{position:absolute;right:21%;bottom:21%;width:190px;height:116px;background:#17282f;border:5px solid #3a5057;border-radius:9px 9px 4px 4px;transform:skew(-7deg);box-shadow:0 10px 22px rgba(0,0,0,.25)}
.screen{position:relative;margin:8px;height:89px;border-radius:3px;background:linear-gradient(145deg,#08242c,#071419);box-shadow:inset 0 0 35px rgba(112,241,190,.08);overflow:hidden;padding:12px}
.code-line{display:block;height:4px;margin:6px 0;border-radius:3px;background:#63dca4;opacity:.7;animation:codePulse 2.8s ease-in-out infinite}
.code-line.l1{width:72%}.code-line.l2{width:48%;animation-delay:.25s}.code-line.l3{width:64%;animation-delay:.5s}.code-line.l4{width:38%;animation-delay:.75s}
.cursor-block{display:block;width:5px;height:9px;background:#d7f7e6;margin-top:8px;animation:blink .8s steps(1) infinite}
@keyframes codePulse{50%{opacity:.25;transform:scaleX(.86);transform-origin:left}}@keyframes blink{50%{opacity:0}}
.keyboard{position:absolute;right:19%;bottom:17%;width:160px;height:18px;background:#43545a;border-radius:4px;transform:skew(-7deg);padding:4px 8px;display:flex;gap:4px;align-items:center}
.keyboard i{display:block;width:17px;height:5px;border-radius:2px;background:#708086;animation:keyTap 2.2s ease-in-out infinite}.keyboard i:nth-child(2){animation-delay:.12s}.keyboard i:nth-child(3){animation-delay:.24s}.keyboard i:nth-child(4){animation-delay:.36s}.keyboard i:nth-child(5){animation-delay:.48s}.keyboard i:nth-child(6){animation-delay:.6s}
@keyframes keyTap{0%,80%,100%{transform:translateY(0);opacity:.8}84%{transform:translateY(2px);opacity:.35}}
.pc-case{position:absolute;left:7%;bottom:19%;width:66px;height:105px;border:4px solid #3b5055;border-radius:7px;background:#102027;box-shadow:inset 0 0 20px rgba(99,245,156,.04)}
.pc-case span{position:absolute;left:12px;right:12px;top:16px;height:5px;background:#63f59c;border-radius:3px;box-shadow:0 0 10px rgba(99,245,156,.55)}
.pc-case b{position:absolute;left:12px;right:12px;bottom:17px;height:34px;border:1px solid #31464c;border-radius:4px}
.toolbox{position:absolute;right:5%;bottom:25%;width:52px;height:33px;border-radius:5px;background:#a87836;box-shadow:inset 0 5px 0 #c99a52}.toolbox:before{content:"";position:absolute;left:17px;top:-9px;width:18px;height:10px;border:3px solid #c99a52;border-bottom:0;border-radius:7px 7px 0 0}.toolbox i{position:absolute;bottom:7px;width:4px;height:11px;background:#20343a}.toolbox i:nth-child(1){left:12px;transform:rotate(25deg)}.toolbox i:nth-child(2){left:24px;transform:rotate(-12deg)}.toolbox i:nth-child(3){left:36px;transform:rotate(20deg)}
.mug{position:absolute;right:1%;bottom:28%;width:27px;height:25px;background:#d1a55a;border-radius:3px 3px 8px 8px}.mug:after{content:"";position:absolute;right:-9px;top:5px;width:10px;height:11px;border:3px solid #d1a55a;border-left:0;border-radius:0 8px 8px 0}
.person{position:absolute;left:28%;bottom:18%;width:175px;height:205px;z-index:2}
.person .head{position:absolute;left:62px;top:0;width:47px;height:52px;border-radius:48% 52% 46% 46%;background:#d5966c}.person .hair{position:absolute;left:60px;top:-2px;width:51px;height:24px;border-radius:55% 60% 20% 20%;background:#20282b}.person .body{position:absolute;left:39px;top:48px;width:100px;height:88px;background:#d85e3e;border-radius:25px 30px 15px 12px;transform:rotate(2deg)}
.person .arm{position:absolute;top:91px;width:76px;height:17px;border-radius:20px;background:#d5966c;transform-origin:10px 50%}.person .arm-left{left:46px;transform:rotate(28deg)}.person .arm-right{left:94px;transform:rotate(10deg);width:82px}.person .leg{position:absolute;top:128px;width:25px;height:70px;background:#1b2830;transform-origin:top center}.person .leg-left{left:57px;transform:rotate(5deg)}.person .leg-right{left:91px;transform:rotate(13deg)}.person .shoe{position:absolute;bottom:0;width:53px;height:15px;background:#151a1d;border-radius:15px}.person .shoe-left{left:44px}.person .shoe-right{left:88px}
.hero-copy{padding:20px 0 40px}.script{font:400 clamp(42px,6vw,76px) 'Yellowtail',cursive;color:var(--yellow);line-height:1}.eyebrow,.section-label{font:600 11px 'Space Grotesk';letter-spacing:.18em;color:#8ea0a4}.hero h1{font:700 clamp(76px,10vw,145px) 'Space Grotesk';line-height:.8;letter-spacing:-.09em;margin:25px 0 30px}.hero h1 em,.experience-head em,.skills-layout em,.contact-title em{font-style:normal;color:var(--green)}.hero-lead{font-size:18px;color:#c6d2d0}.scroll-cue{display:inline-flex;align-items:center;gap:12px;margin-top:52px;color:#e9f2ef;text-decoration:none;font-size:13px}.scroll-cue span{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--green)}.section{padding:135px 0}.section-label{margin-bottom:50px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.about-title{font:500 clamp(54px,7vw,100px) 'Space Grotesk';line-height:.9;letter-spacing:-.07em}.about-title span{display:block;color:#65757a}.about-title strong{font-weight:500}.about-copy{max-width:550px;font-size:20px;line-height:1.65;color:#c4cfcd}.mini-links{display:flex;gap:25px;margin-top:35px}.mini-links a{color:var(--green);text-decoration:none;font-size:13px}.dark{background:#0d191f;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}.service-grid article{background:#0d191f;padding:42px;min-height:330px;transition:transform .3s ease,background .3s ease}.service-grid article:hover{background:#102129;transform:translateY(-6px)}.service-grid article>span{font:12px 'Space Grotesk';color:#627378}.service-grid .icon{font:38px 'Space Grotesk';color:var(--green);margin:55px 0 20px}.service-grid h3{font:600 28px 'Space Grotesk';margin:0 0 12px}.service-grid p{color:#95a4a6;line-height:1.6;margin:0}.experience-head{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:55px}.experience-head h2,.skills-layout h2{font:600 clamp(58px,7vw,100px) 'Space Grotesk';line-height:.85;letter-spacing:-.07em;margin:0}.experience-head p{color:#a9b7b7;line-height:1.7;max-width:470px}.experience-card{display:grid;grid-template-columns:140px 1fr 50px;gap:30px;border-top:1px solid var(--line);padding:38px 0}.exp-year{font:12px 'Space Grotesk';color:var(--green);padding-top:8px}.exp-main h3{font:600 28px 'Space Grotesk';margin:0}.role{color:var(--yellow);margin:8px 0 18px}.exp-main>p:not(.role){color:#aab7b7;line-height:1.7;max-width:720px}.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}.tags span{font-size:11px;border:1px solid var(--line);padding:8px 11px;border-radius:999px;color:#b8c4c2}.exp-arrow{font-size:28px;color:var(--green)}.skills-section{background:#0b151b;color:#eef5f3;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.skills-section .section-label{color:#8ea0a4}.skills-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:100px}.skills-layout h2{color:#eef5f3}.skill-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.skill-grid div{padding:22px 4px;border-bottom:1px solid var(--line);font:600 18px 'Space Grotesk';display:flex;justify-content:space-between}.skill-grid small{font:11px 'DM Sans';color:#8a918f}.education{padding-bottom:160px}.edu-grid{display:grid;grid-template-columns:1fr auto;align-items:end;border-top:1px solid var(--line);padding-top:45px}.edu-grid h2{font:600 42px 'Space Grotesk';margin:0 0 10px}.edu-grid p{color:#9ca9aa}.edu-year{color:var(--green);font:12px 'Space Grotesk'}.contact{background:linear-gradient(135deg,#102b30,#0a171d);border-top:1px solid var(--line);padding:135px 0}.contact-inner{position:relative}.contact-title h2{font:600 clamp(72px,10vw,150px) 'Space Grotesk';line-height:.82;letter-spacing:-.09em;margin:20px 0 30px}.contact-title .script{font-size:54px}.contact-copy{color:#a9b7b7;max-width:480px;line-height:1.6}.contact-links{margin-top:65px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}.contact-links a{padding:25px 0;color:#eef5f3;text-decoration:none;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px;font-size:15px}.contact-links a+a{padding-left:30px;border-left:1px solid var(--line)}.contact-links span{font:10px 'Space Grotesk';letter-spacing:.15em;color:var(--green)}.footer{height:90px;display:flex;justify-content:space-between;align-items:center;color:#758386;font-size:11px}.footer a{color:#b9c4c2;text-decoration:none}.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}.service-grid article{opacity:0;transform:translateY(18px)}.visible .service-grid article{animation:rise .55s ease forwards}.visible .service-grid article:nth-child(2){animation-delay:.08s}.visible .service-grid article:nth-child(3){animation-delay:.16s}@keyframes rise{to{opacity:1;transform:none}}@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto;padding-top:110px;padding-bottom:80px}.hero-art{height:470px;order:2}.hero-copy{order:1}.hero h1{font-size:clamp(68px,17vw,110px)}.about-grid,.experience-head,.skills-layout{grid-template-columns:1fr;gap:45px}.service-grid{grid-template-columns:1fr}.experience-card{grid-template-columns:1fr 40px}.exp-year{grid-column:1/2}.exp-main{grid-column:1/2}.exp-arrow{grid-column:2;grid-row:1/3}.contact-title h2{font-size:clamp(65px,14vw,110px)}}@media(max-width:620px){.container{width:min(var(--max),calc(100% - 30px))}.nav{height:68px}.nav-links{display:none}.nav-dot{width:30px;height:30px}.hero-art{height:390px;border-radius:22px}.moon{width:95px;height:95px}.person{transform:scale(.72);transform-origin:left bottom}.pc-case{transform:scale(.8);transform-origin:left bottom}.keyboard{transform:scale(.78);transform-origin:right bottom}.toolbox{transform:scale(.85);transform-origin:right bottom}.laptop{transform:scale(.72) skew(-7deg);transform-origin:right bottom}.script{font-size:48px}.section{padding:95px 0}.section-label{margin-bottom:35px}.about-copy{font-size:17px}.contact-links{grid-template-columns:1fr}.contact-links a+a{padding-left:0;border-left:0}.edu-grid{grid-template-columns:1fr;gap:20px}.footer{height:75px}.ambient{filter:blur(65px);opacity:.09}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.service-grid article{opacity:1;transform:none;animation:none!important}.ambient{display:none}}

/* Refined hero workspace illustration */
.clean-scene{left:0;right:0;bottom:0;height:58%;}
.work-illustration{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.work-illustration .typing-arm{transform-box:fill-box;transform-origin:90% 50%;animation:typeArm 2.6s ease-in-out infinite}
.work-illustration .typing-hand{transform-box:fill-box;transform-origin:0 50%;animation:typeHand 2.6s ease-in-out infinite}
.work-illustration .terminal-lines rect{animation:terminalBlink 2.8s ease-in-out infinite}
.work-illustration .terminal-lines rect:nth-child(2){animation-delay:.18s}
.work-illustration .terminal-lines rect:nth-child(3){animation-delay:.34s}
.work-illustration .terminal-lines rect:nth-child(4){animation-delay:.5s}
.work-illustration .cursor-svg{animation:svgCursor .85s steps(1) infinite}
.work-illustration .keyboard-svg rect{fill:#718187;animation:keyPress 2.2s ease-in-out infinite}
.work-illustration .keyboard-svg rect:nth-child(2){animation-delay:.12s}
.work-illustration .keyboard-svg rect:nth-child(3){animation-delay:.3s}
.work-illustration .keyboard-svg rect:nth-child(4){animation-delay:.46s}
.work-illustration .power-light{animation:powerPulse 2s ease-in-out infinite}
.work-illustration .status-dot{animation:statusPulse 2s ease-in-out infinite}
.work-illustration .status-dot.delay{animation-delay:1s}
@keyframes typeArm{0%,100%{transform:rotate(0deg)}45%{transform:rotate(-3deg)}55%{transform:rotate(2deg)}}
@keyframes typeHand{0%,100%{transform:translateY(0)}45%{transform:translateY(3px)}55%{transform:translateY(-1px)}}
@keyframes terminalBlink{0%,100%{opacity:.72}50%{opacity:.3}}
@keyframes svgCursor{50%{opacity:0}}
@keyframes keyPress{0%,78%,100%{transform:translateY(0);opacity:.75}84%{transform:translateY(2px);opacity:.3}}
@keyframes powerPulse{50%{opacity:.35;filter:drop-shadow(0 0 4px #8df0b5)}}
@keyframes statusPulse{50%{opacity:.35}}

@media (max-width:1100px) and (min-width:901px){
  .hero{grid-template-columns:1fr 1fr;gap:28px}
  .hero-art{height:540px}
  .hero h1{font-size:clamp(68px,8vw,108px)}
  .hero-lead{font-size:16px}
}
@media (max-width:620px){
  .clean-scene{height:58%;bottom:0}
  .work-illustration{transform:scale(1.08);transform-origin:center bottom}
}
@media (prefers-reduced-motion:reduce){
  .work-illustration .typing-arm,.work-illustration .typing-hand,.work-illustration .terminal-lines rect,
  .work-illustration .cursor-svg,.work-illustration .keyboard-svg rect,.work-illustration .power-light,
  .work-illustration .status-dot{animation:none!important}
}

/* Hero redesign: personal avatar over a calm night landscape */
.hero{position:relative;overflow:hidden}
.hero-art{position:relative;min-height:650px;border:0!important;border-radius:0!important;background:
  radial-gradient(circle at 76% 22%,rgba(245,248,245,.08),transparent 17%),
  linear-gradient(180deg,#08141a 0%,#0a1d25 55%,#071117 100%);
}
.hero-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 35%,rgba(121,220,232,.10),transparent 28%),linear-gradient(180deg,transparent 60%,rgba(0,0,0,.28));pointer-events:none}
.moon{position:absolute;right:12%;top:9%;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff 0 18%,#e9f0ef 55%,#c9d3d3 100%);box-shadow:0 0 45px rgba(220,245,244,.12);z-index:1}
.stars{position:absolute;inset:0;opacity:.75;background-image:radial-gradient(#d7efef 1px,transparent 1px),radial-gradient(#9bc5c9 .8px,transparent .8px);background-size:83px 83px,127px 127px;background-position:11px 9px,37px 42px}
.mountains{position:absolute;left:-5%;right:-5%;bottom:7%;height:45%;clip-path:polygon(0 82%,12% 55%,20% 72%,30% 38%,38% 68%,48% 28%,58% 67%,69% 44%,78% 68%,89% 35%,100% 67%,100% 100%,0 100%);}
.mountains.back{background:#15303b;opacity:.95;bottom:9%;transform:scale(1.05)}
.mountains.front{background:#081319;bottom:0;height:39%;clip-path:polygon(0 64%,14% 45%,24% 67%,38% 40%,48% 70%,61% 48%,73% 68%,84% 42%,100% 64%,100% 100%,0 100%)}
.avatar-scene{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);width:330px;height:410px;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;z-index:3}
.avatar-halo{position:absolute;width:310px;height:310px;border-radius:50%;background:radial-gradient(circle,rgba(99,245,156,.12),rgba(103,232,249,.05) 48%,transparent 70%);filter:blur(2px);animation:haloFloat 5s ease-in-out infinite}
.avatar{position:relative;width:235px;height:320px;filter:drop-shadow(0 24px 22px rgba(0,0,0,.38));animation:avatarFloat 5s ease-in-out infinite}
.avatar-face{position:absolute;left:66px;top:42px;width:103px;height:123px;border-radius:48% 48% 45% 45%;background:linear-gradient(145deg,#e2aa7e,#bc7656);z-index:3;box-shadow:inset -12px -8px 18px rgba(76,31,21,.14)}
.avatar-hair{position:absolute;left:61px;top:31px;width:113px;height:70px;border-radius:52% 55% 36% 42%;background:#172128;z-index:5;transform:rotate(-2deg)}
.avatar-hair::after{content:"";position:absolute;left:10px;top:33px;width:30px;height:36px;background:#172128;border-radius:45% 0 50% 30%;transform:rotate(-18deg)}
.eye{position:absolute;top:82px;width:8px;height:5px;border-radius:50%;background:#172128;z-index:6}.eye-left{left:92px}.eye-right{right:25px}
.nose{position:absolute;left:49px;top:90px;width:4px;height:15px;border-left:2px solid rgba(91,45,31,.4);border-radius:50%;z-index:6}
.smile{position:absolute;left:42px;top:106px;width:23px;height:9px;border-bottom:2px solid #7c4434;border-radius:0 0 50% 50%;z-index:6}
.avatar-neck{position:absolute;left:102px;top:151px;width:43px;height:45px;background:#b97555;z-index:2}
.avatar-shirt{position:absolute;left:26px;top:170px;width:185px;height:143px;border-radius:70px 70px 25px 25px;background:linear-gradient(145deg,#2b5c63,#183b42);z-index:1;box-shadow:inset 12px 0 20px rgba(103,232,249,.06)}
.avatar-shirt::before{content:"";position:absolute;left:67px;top:0;border-left:25px solid transparent;border-right:25px solid transparent;border-top:32px solid #b97555}
.avatar-shirt span{position:absolute;left:0;right:0;bottom:35px;text-align:center;color:rgba(225,255,247,.72);font:600 18px 'Space Grotesk';letter-spacing:.12em}
.avatar-caption{position:relative;margin-top:-5px;color:#9fb0b1;font:11px 'DM Sans';letter-spacing:.08em;text-transform:uppercase;z-index:4}.avatar-caption .status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 10px rgba(99,245,156,.55)}
@keyframes avatarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes haloFloat{0%,100%{transform:scale(.98);opacity:.75}50%{transform:scale(1.04);opacity:1}}
@media(max-width:900px){.hero-art{min-height:520px;order:2}.moon{width:110px;height:110px;right:10%;top:8%}.avatar-scene{bottom:4%;transform:translateX(-50%) scale(.82);transform-origin:bottom center}.mountains{bottom:6%}}
@media(max-width:620px){.hero-art{min-height:420px}.moon{width:82px;height:82px}.avatar-scene{transform:translateX(-50%) scale(.66);bottom:0}.hero-art{margin-top:10px}.hero-copy{padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){.avatar,.avatar-halo{animation:none}.hero-art{transform:none!important}}

/* Hero redesign: personal avatar over a calm night landscape */
.hero{position:relative;overflow:hidden}
.hero-art{position:relative;min-height:650px;border:0!important;border-radius:0!important;background:radial-gradient(circle at 76% 22%,rgba(245,248,245,.08),transparent 17%),linear-gradient(180deg,#08141a 0%,#0a1d25 55%,#071117 100%)}
.hero-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 35%,rgba(121,220,232,.10),transparent 28%),linear-gradient(180deg,transparent 60%,rgba(0,0,0,.28));pointer-events:none}
.moon{position:absolute;right:12%;top:9%;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff 0 18%,#e9f0ef 55%,#c9d3d3 100%);box-shadow:0 0 45px rgba(220,245,244,.12);z-index:1}
.stars{position:absolute;inset:0;opacity:.75;background-image:radial-gradient(#d7efef 1px,transparent 1px),radial-gradient(#9bc5c9 .8px,transparent .8px);background-size:83px 83px,127px 127px;background-position:11px 9px,37px 42px}
.mountains{position:absolute;left:-5%;right:-5%;bottom:7%;height:45%;clip-path:polygon(0 82%,12% 55%,20% 72%,30% 38%,38% 68%,48% 28%,58% 67%,69% 44%,78% 68%,89% 35%,100% 67%,100% 100%,0 100%)}
.mountains.back{background:#15303b;opacity:.95;bottom:9%;transform:scale(1.05)}
.mountains.front{background:#081319;bottom:0;height:39%;clip-path:polygon(0 64%,14% 45%,24% 67%,38% 40%,48% 70%,61% 48%,73% 68%,84% 42%,100% 64%,100% 100%,0 100%)}
.avatar-scene{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);width:330px;height:410px;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;z-index:3}
.avatar-halo{position:absolute;width:310px;height:310px;border-radius:50%;background:radial-gradient(circle,rgba(99,245,156,.12),rgba(103,232,249,.05) 48%,transparent 70%);filter:blur(2px);animation:haloFloat 5s ease-in-out infinite}
.avatar{position:relative;width:235px;height:320px;filter:drop-shadow(0 24px 22px rgba(0,0,0,.38));animation:avatarFloat 5s ease-in-out infinite}
.avatar-face{position:absolute;left:66px;top:42px;width:103px;height:123px;border-radius:48% 48% 45% 45%;background:linear-gradient(145deg,#e2aa7e,#bc7656);z-index:3;box-shadow:inset -12px -8px 18px rgba(76,31,21,.14)}
.avatar-hair{position:absolute;left:61px;top:31px;width:113px;height:70px;border-radius:52% 55% 36% 42%;background:#172128;z-index:5;transform:rotate(-2deg)}
.avatar-hair::after{content:"";position:absolute;left:10px;top:33px;width:30px;height:36px;background:#172128;border-radius:45% 0 50% 30%;transform:rotate(-18deg)}
.eye{position:absolute;top:82px;width:8px;height:5px;border-radius:50%;background:#172128;z-index:6}.eye-left{left:92px}.eye-right{right:25px}
.nose{position:absolute;left:49px;top:90px;width:4px;height:15px;border-left:2px solid rgba(91,45,31,.4);border-radius:50%;z-index:6}
.smile{position:absolute;left:42px;top:106px;width:23px;height:9px;border-bottom:2px solid #7c4434;border-radius:0 0 50% 50%;z-index:6}
.avatar-neck{position:absolute;left:102px;top:151px;width:43px;height:45px;background:#b97555;z-index:2}
.avatar-shirt{position:absolute;left:26px;top:170px;width:185px;height:143px;border-radius:70px 70px 25px 25px;background:linear-gradient(145deg,#2b5c63,#183b42);z-index:1;box-shadow:inset 12px 0 20px rgba(103,232,249,.06)}
.avatar-shirt::before{content:"";position:absolute;left:67px;top:0;border-left:25px solid transparent;border-right:25px solid transparent;border-top:32px solid #b97555}
.avatar-shirt span{position:absolute;left:0;right:0;bottom:35px;text-align:center;color:rgba(225,255,247,.72);font:600 18px 'Space Grotesk';letter-spacing:.12em}
.avatar-caption{position:relative;margin-top:-5px;color:#9fb0b1;font:11px 'DM Sans';letter-spacing:.08em;text-transform:uppercase;z-index:4}.avatar-caption .status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:7px;box-shadow:0 0 10px rgba(99,245,156,.55)}
@keyframes avatarFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes haloFloat{0%,100%{transform:scale(.98);opacity:.75}50%{transform:scale(1.04);opacity:1}}
@media(max-width:900px){.hero-art{min-height:520px;order:2}.moon{width:110px;height:110px;right:10%;top:8%}.avatar-scene{bottom:4%;transform:translateX(-50%) scale(.82);transform-origin:bottom center}.mountains{bottom:6%}}
@media(max-width:620px){.hero-art{min-height:420px}.moon{width:82px;height:82px}.avatar-scene{transform:translateX(-50%) scale(.66);bottom:0}.hero-art{margin-top:10px}.hero-copy{padding-bottom:20px}}
@media(prefers-reduced-motion:reduce){.avatar,.avatar-halo{animation:none}.hero-art{transform:none!important}}


/* FINAL HERO: full-page night landscape, no boxed illustration objects */
.hero{position:relative;display:block;min-height:100vh;padding-top:82px;overflow:visible}
.hero-art{position:absolute;inset:0 -20vw 0 -20vw;min-height:100vh;z-index:-2;pointer-events:none;border:0!important;border-radius:0!important;overflow:hidden;background:
  radial-gradient(circle at 74% 18%,rgba(240,248,247,.08),transparent 13%),
  radial-gradient(circle at 22% 35%,rgba(74,181,205,.08),transparent 25%),
  linear-gradient(180deg,#061017 0%,#0a1b24 52%,#071117 100%);box-shadow:none!important}
.hero-art::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 72% 24%,rgba(232,248,247,.12),transparent 12%),
  linear-gradient(180deg,transparent 0%,rgba(3,10,14,.08) 55%,rgba(3,8,11,.45) 100%);}
.hero-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:35%;background:linear-gradient(180deg,transparent,rgba(2,7,10,.62));}
.moon{width:190px;height:190px;right:14%;top:12%;z-index:1}
.stars{z-index:0;opacity:.48}
.mountains{z-index:1;left:-2%;right:-2%;width:auto}
.mountains.back{bottom:0;height:46%;opacity:.7;filter:blur(.15px)}
.mountains.front{bottom:-1%;height:39%;opacity:.98}
.hero-copy{position:relative;z-index:4;min-height:calc(100vh - 82px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;max-width:760px;padding:70px 0 120px}
.hero-copy .script{font-size:clamp(48px,7vw,92px);text-shadow:0 8px 28px rgba(0,0,0,.3)}
.hero-copy h1{font-size:clamp(78px,10vw,150px);line-height:.84;text-shadow:0 14px 40px rgba(0,0,0,.25)}
.hero-copy .hero-lead{font-size:18px;letter-spacing:.02em;color:#d5dfdd;margin-top:22px}
.scroll-cue{margin-top:42px}

/* Keep the page atmosphere continuous below the hero */
.section,.contact,.footer{position:relative}
.section::before,.contact::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1}
.section.dark::before{background:linear-gradient(180deg,rgba(5,13,18,.12),rgba(5,13,18,.78))}
.skills-section::before{background:radial-gradient(circle at 82% 30%,rgba(91,214,190,.06),transparent 28%)}
.contact::before{background:radial-gradient(circle at 15% 30%,rgba(80,168,214,.07),transparent 25%)}

@media(max-width:900px){
  .hero{min-height:100svh}
  .hero-art{inset:0 -30vw 0 -30vw}
  .moon{width:130px;height:130px;right:12%;top:13%}
  .hero-copy{min-height:calc(100svh - 72px);padding-top:90px}
  .hero-copy h1{font-size:clamp(64px,14vw,110px)}
}
@media(max-width:620px){
  .hero-art{inset:0 -55vw 0 -55vw}
  .moon{width:92px;height:92px;right:13%;top:14%}
  .mountains.back{height:40%}
  .mountains.front{height:33%}
  .hero-copy{padding:90px 0 90px}
  .hero-copy .script{font-size:48px}
  .hero-copy h1{font-size:clamp(58px,18vw,88px)}
}

/* MOON LIGHTING FIX: natural moon surface + restrained atmospheric halo */
.moon{
  width:190px;
  height:190px;
  border-radius:50%;
  right:14%;
  top:12%;
  z-index:2;
  background:
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.98) 0 7%, transparent 8%),
    radial-gradient(circle at 68% 37%, rgba(150,160,160,.28) 0 7%, transparent 8%),
    radial-gradient(circle at 55% 70%, rgba(145,154,154,.20) 0 10%, transparent 11%),
    radial-gradient(circle at 29% 62%, rgba(165,173,173,.22) 0 6%, transparent 7%),
    radial-gradient(circle at 72% 70%, rgba(255,255,255,.18) 0 4%, transparent 5%),
    radial-gradient(circle at 38% 45%, #f8fbfa 0%, #e7eceb 48%, #c9d0cf 78%, #aeb7b6 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 28px rgba(225,238,236,.16),
    0 0 85px rgba(181,214,213,.09);
  overflow:visible;
}
.moon::before{
  content:"";
  position:absolute;
  inset:-24px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(225,240,239,.11) 0 34%, rgba(225,240,239,.045) 52%, transparent 72%);
  filter:blur(10px);
  z-index:-1;
}
.moon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 22% 34%, rgba(116,125,125,.13) 0 8px, transparent 9px),
    radial-gradient(circle at 58% 20%, rgba(120,128,128,.10) 0 12px, transparent 13px),
    radial-gradient(circle at 75% 54%, rgba(115,124,124,.13) 0 10px, transparent 11px),
    radial-gradient(circle at 44% 78%, rgba(115,124,124,.10) 0 13px, transparent 14px),
    radial-gradient(circle at 65% 74%, rgba(115,124,124,.08) 0 6px, transparent 7px);
  mix-blend-mode:multiply;
  opacity:.9;
}
@media(max-width:900px){.moon{width:130px;height:130px;right:12%;top:13%}}
@media(max-width:620px){.moon{width:92px;height:92px;right:13%;top:14%}}


/* Animated stars + subtle aurora atmosphere */
.stars{
  overflow:hidden;
  animation:starDrift 24s linear infinite;
  will-change:background-position,opacity;
}
.stars::before,.stars::after{
  content:"";
  position:absolute;
  inset:-12%;
  pointer-events:none;
  background-repeat:repeat;
  will-change:transform,opacity;
}
.stars::before{
  background-image:
    radial-gradient(circle,rgba(235,255,252,.92) 0 1px,transparent 1.7px),
    radial-gradient(circle,rgba(190,236,230,.7) 0 .7px,transparent 1.4px);
  background-size:137px 113px,191px 157px;
  background-position:17px 31px,73px 9px;
  opacity:.55;
  animation:starFloat 18s ease-in-out infinite alternate;
}
.stars::after{
  background-image:
    radial-gradient(circle,rgba(255,255,255,.95) 0 1.2px,transparent 2px),
    radial-gradient(circle,rgba(132,224,202,.75) 0 .8px,transparent 1.7px);
  background-size:223px 181px,149px 131px;
  background-position:41px 64px,101px 27px;
  opacity:.34;
  animation:starTwinkle 4.5s ease-in-out infinite alternate;
}
@keyframes starDrift{
  from{background-position:12px 18px,55px 30px}
  to{background-position:34px 42px,23px 8px}
}
@keyframes starFloat{
  from{transform:translate3d(-7px,4px,0)}
  to{transform:translate3d(9px,-8px,0)}
}
@keyframes starTwinkle{
  0%,100%{opacity:.22;transform:translate3d(0,0,0) scale(1)}
  48%{opacity:.48}
  72%{opacity:.30;transform:translate3d(-3px,-4px,0) scale(1.01)}
}
.aurora{
  position:absolute;
  left:-12%;
  width:124%;
  height:36%;
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:.13;
  filter:blur(28px);
  will-change:transform,opacity;
  z-index:1;
}
.aurora-a{
  top:17%;
  background:linear-gradient(100deg,transparent 8%,rgba(91,239,185,.42) 34%,rgba(84,196,236,.26) 53%,transparent 78%);
  transform:rotate(-7deg) translate3d(-3%,0,0);
  animation:auroraWave 13s ease-in-out infinite alternate;
}
.aurora-b{
  top:27%;
  height:26%;
  opacity:.08;
  background:linear-gradient(80deg,transparent 18%,rgba(111,218,194,.34) 43%,rgba(86,174,235,.22) 61%,transparent 84%);
  transform:rotate(8deg) translate3d(4%,0,0);
  animation:auroraWaveB 17s ease-in-out infinite alternate;
}
@keyframes auroraWave{
  from{transform:rotate(-7deg) translate3d(-6%,3%,0) scaleX(.98);opacity:.08}
  to{transform:rotate(-2deg) translate3d(6%,-5%,0) scaleX(1.04);opacity:.17}
}
@keyframes auroraWaveB{
  from{transform:rotate(8deg) translate3d(5%,0,0) scaleX(1.02);opacity:.05}
  to{transform:rotate(3deg) translate3d(-7%,4%,0) scaleX(.96);opacity:.11}
}
@media(prefers-reduced-motion:reduce){
  .stars,.stars::before,.stars::after,.aurora{animation:none!important}
}

/* ===== PERFORMANCE OPTIMIZATION ===== */
/* Keep the same visual language while moving animation work to the compositor. */
.nav-wrap{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(180deg,rgba(8,16,22,.96),rgba(8,16,22,.78) 70%,transparent)}
.ambient{filter:none;will-change:auto;opacity:.10;background:radial-gradient(circle,rgba(57,224,161,.30) 0%,rgba(57,224,161,.12) 34%,transparent 70%)}
.ambient-2{background:radial-gradient(circle,rgba(68,185,232,.26) 0%,rgba(68,185,232,.10) 34%,transparent 70%)}
.grain{display:none}
.hero-art{box-shadow:0 18px 50px rgba(0,0,0,.22)}
.moon{box-shadow:0 0 34px rgba(220,245,244,.10)}
.moon::before{filter:none;background:radial-gradient(circle,rgba(225,240,239,.10) 0 32%,rgba(225,240,239,.035) 48%,transparent 70%)}

/* Stars: no background-position animation (which forces repeated paint). */
.stars{animation:none;will-change:auto}
.stars::before{animation:starFloat 24s ease-in-out infinite alternate;will-change:transform}
.stars::after{animation:starTwinkle 7s ease-in-out infinite alternate;will-change:opacity,transform}
@keyframes starFloat{from{transform:translate3d(-5px,3px,0)}to{transform:translate3d(6px,-5px,0)}}
@keyframes starTwinkle{0%,100%{opacity:.22;transform:translate3d(0,0,0)}50%{opacity:.42;transform:translate3d(3px,-2px,0)}}

/* Aurora: transform/opacity only, no filter blur. */
.aurora{filter:none!important;will-change:transform,opacity;background:radial-gradient(ellipse at center,rgba(73,235,190,.12),transparent 68%)}
.aurora-a{animation:auroraWave 18s ease-in-out infinite alternate}
.aurora-b{animation:auroraWaveB 22s ease-in-out infinite alternate}

/* Avoid keeping every animated element in a separate GPU layer. */
.person,.avatar,.avatar-halo,.desk-scene,.laptop,.keyboard,.pc-case,.toolbox,.mug{will-change:auto}

/* Let off-screen sections skip rendering until needed. */
.section,.contact,.footer{content-visibility:auto;contain-intrinsic-size:700px}

/* Less work on touch/mobile devices while retaining the effect. */
@media (max-width:900px){
  .ambient{opacity:.07}
  .hero-art{box-shadow:0 14px 38px rgba(0,0,0,.20)}
  .stars::before{animation-duration:32s}
  .stars::after{animation-duration:9s}
}
@media (max-width:620px){
  .ambient{display:none}
  .stars::before,.stars::after{animation-duration:40s}
  .aurora{opacity:.55}
}
@media (prefers-reduced-motion:reduce){
  .stars::before,.stars::after,.aurora{animation:none!important}
}


/* ===== TOP HERO PERFORMANCE PASS =====
   Keep the same night-sky look, but avoid continuous paint-heavy effects. */
.grain,.ambient{display:none!important}

/* Static star layers: background-position animation removed because it repaints the hero. */
.hero .stars{
  animation:none!important;
  will-change:auto!important;
  opacity:.46;
  transform:translateZ(0);
}
.hero .stars::before,
.hero .stars::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(224,246,246,.75) 0 1px,transparent 1.5px),
    radial-gradient(circle at 34% 31%,rgba(184,226,230,.62) 0 1px,transparent 1.5px),
    radial-gradient(circle at 58% 16%,rgba(230,248,248,.72) 0 1px,transparent 1.5px),
    radial-gradient(circle at 82% 29%,rgba(188,225,228,.60) 0 1px,transparent 1.5px),
    radial-gradient(circle at 68% 51%,rgba(226,246,246,.66) 0 1px,transparent 1.5px),
    radial-gradient(circle at 22% 64%,rgba(193,230,232,.58) 0 1px,transparent 1.5px),
    radial-gradient(circle at 46% 74%,rgba(226,246,246,.60) 0 1px,transparent 1.5px),
    radial-gradient(circle at 91% 72%,rgba(192,229,231,.56) 0 1px,transparent 1.5px);
}
.hero .stars::before{opacity:.65;animation:starTwinkleLite 5s ease-in-out infinite alternate}
.hero .stars::after{opacity:.38;transform:translate3d(8px,-5px,0);animation:starTwinkleLite 7s ease-in-out 1.2s infinite alternate}
@keyframes starTwinkleLite{from{opacity:.28}to{opacity:.72}}

/* Aurora stays visible, but is static to avoid repeated large-area repaints. */
.hero .aurora{
  filter:none!important;
  mix-blend-mode:normal!important;
  will-change:auto!important;
  animation:none!important;
  opacity:.075!important;
}
.hero .aurora-a{background:radial-gradient(ellipse at 48% 45%,rgba(82,222,182,.24),transparent 64%);transform:rotate(-7deg) translateZ(0)}
.hero .aurora-b{background:radial-gradient(ellipse at 58% 50%,rgba(83,178,222,.18),transparent 66%);transform:rotate(8deg) translateZ(0);opacity:.045!important}

/* Moon: remove the blurred pseudo-halo; the real moon already has a restrained glow. */
.hero .moon::before{display:none!important}
.hero .moon{box-shadow:0 0 30px rgba(225,238,236,.12)!important;transform:translateZ(0)}

/* Mountains and hero are already static; avoid unnecessary compositor promotion. */
.hero .mountains,.hero .hero-art{will-change:auto!important}

@media(max-width:900px){
  .hero .aurora{opacity:.055!important}
  .hero .stars::after{transform:translate3d(5px,-3px,0)}
}
@media(prefers-reduced-motion:reduce){
  .hero .stars::before,.hero .stars::after{animation:none!important}
}