:root{--bg:#0b0b0c;--panel:#111113;--line:#232327;--text:#f2f4f3;--mute:#8d9399;--g1:#00ff9d;--g2:#00e5ff;--grad:linear-gradient(90deg,var(--g1),var(--g2));--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;box-sizing:border-box}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{background:var(--bg);color:var(--text);font-family:'Sora',system-ui,sans-serif;line-height:1.65;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--g1);outline-offset:3px}
.grid{position:fixed;inset:0;z-index:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;background-position:0 var(--sy,0);opacity:.35;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%)}
/* HUD */
.hud{position:fixed;inset:0;z-index:30;pointer-events:none;font:11px var(--mono);color:var(--mute);letter-spacing:.04em}
.c{position:absolute;width:22px;height:22px;border:2px solid var(--g1);opacity:.8}
.c.a{left:max(12px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));border-right:0;border-bottom:0}
.c.b{right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));border-left:0;border-bottom:0}
.c.d{left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));border-right:0;border-top:0}
.c.e{right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));border-left:0;border-top:0}
.h{position:absolute}
.h.a{left:44px;top:max(16px,env(safe-area-inset-top))}.h.b{right:44px;top:max(16px,env(safe-area-inset-top))}
.h.d{left:44px;bottom:max(16px,env(safe-area-inset-bottom))}.h.e{right:44px;bottom:max(16px,env(safe-area-inset-bottom))}
.h b{color:var(--g1);font-weight:600}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--g1);margin-right:8px;animation:pl 1.6s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(0,255,157,.6)}80%,100%{box-shadow:0 0 0 8px transparent}}
.rail{position:fixed;left:22px;top:50%;translate:0 -50%;height:260px;width:2px;background:var(--line);z-index:31;display:flex;flex-direction:column;justify-content:space-between}
.rail i{position:absolute;left:0;top:0;width:2px;height:calc(var(--p,0)*100%);background:var(--grad);box-shadow:0 0 10px var(--g1)}
.rail a{position:relative;width:10px;height:10px;margin-left:-4px;border-radius:50%;background:var(--bg);border:2px solid var(--line);transition:.3s}
.rail a.on{border-color:var(--g1);background:var(--g1);box-shadow:0 0 12px var(--g1)}
.rail a::after{content:attr(data-t);position:absolute;left:22px;top:-4px;font:11px var(--mono);color:var(--text);opacity:0;transition:.25s;white-space:nowrap;translate:-6px 0}
.rail a:hover::after{opacity:1;translate:0 0}
nav{position:fixed;bottom:calc(46px + env(safe-area-inset-bottom,0px));left:50%;translate:-50% 0;display:flex;gap:2px;padding:5px;border:1px solid var(--line);border-radius:999px;background:rgba(17,17,19,.85);backdrop-filter:blur(12px);z-index:40}
nav a{font:12px var(--mono);padding:8px 14px;border-radius:999px;color:var(--mute);transition:.3s}
nav a:hover{color:var(--text)}
nav a.on{background:var(--grad);color:#04120c;font-weight:600}
#lock{position:fixed;left:0;top:0;pointer-events:none;z-index:45;opacity:0;transition:all .25s cubic-bezier(.2,.8,.2,1);--c:linear-gradient(var(--g1),var(--g1));background:var(--c) 0 0/14px 2px,var(--c) 0 0/2px 14px,var(--c) 100% 0/14px 2px,var(--c) 100% 0/2px 14px,var(--c) 0 100%/14px 2px,var(--c) 0 100%/2px 14px,var(--c) 100% 100%/14px 2px,var(--c) 100% 100%/2px 14px;background-repeat:no-repeat}
#drone{position:fixed;left:0;top:0;width:72px;z-index:44;pointer-events:none;filter:drop-shadow(0 0 12px rgba(0,255,190,.55))}
#drone svg{display:block;width:100%;overflow:visible;animation:bob 2.6s ease-in-out infinite alternate}
@keyframes bob{to{translate:0 7px}}
.bl{transform-box:fill-box;transform-origin:center;animation:blade .12s linear infinite}
@keyframes blade{50%{transform:scaleX(.2)}}
.led{animation:led 1s steps(2) infinite}@keyframes led{50%{opacity:.1}}
.beam{animation:beam 1.6s ease-in-out infinite alternate}@keyframes beam{from{opacity:.3}to{opacity:1}}
main,footer{position:relative;z-index:2}
section{padding:130px max(7vw,24px);max-width:1220px;margin:auto}
/* hero */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;position:relative;max-width:none;overflow:hidden}
.radar{position:absolute;right:-10vw;top:50%;translate:0 -50%;width:min(95vw,860px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 59px,var(--line) 59px 60px);opacity:.7;z-index:0}
.radar::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(0,255,157,.25),transparent 20%);animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bp{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--g1);animation:ping 5s infinite}
@keyframes ping{0%,100%{box-shadow:0 0 0 0 rgba(0,255,157,.7);opacity:1}50%{box-shadow:0 0 0 16px transparent;opacity:.4}}
.hero>*:not(.radar){position:relative;z-index:1}
.rec{font:12px var(--mono);color:var(--mute);margin-bottom:22px}
.rec b{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff4d6d;margin-right:10px;animation:led 1.2s steps(2) infinite}
.hero h1{font-size:clamp(42px,12.5vw,176px);line-height:.92;font-weight:800;letter-spacing:-.045em}
.hero h1 span{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 b{display:inline-block;animation:up .9s cubic-bezier(.2,.8,.2,1) both,lit 6s linear infinite;animation-delay:calc(var(--i)*50ms),calc(1.5s + var(--i)*.1s)}
.l1 b{--b:#fff;color:#fff}
.l2 b{--b:transparent;color:transparent;-webkit-text-stroke:1.5px var(--g1)}
@keyframes up{from{transform:translateY(105%)}}
@keyframes lit{0%{color:var(--b)}6%{color:var(--g1);text-shadow:0 0 34px rgba(0,255,157,.8)}22%,100%{color:var(--b);text-shadow:none}}
.sub{margin-top:30px;max-width:46ch;color:var(--mute);font-size:clamp(16px,2vw,19px)}
.sub b{color:var(--text);font-weight:600}
.cta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 24px;border:1.5px solid var(--g1);border-radius:10px;color:var(--g1);font:600 13px var(--mono);transition:.25s}
.btn:hover{background:var(--grad);color:#04120c;border-color:transparent}
.btn.solid{background:var(--grad);color:#04120c;border-color:transparent}
/* headers */
.sh{display:flex;align-items:center;gap:20px;margin-bottom:50px}
.sh h2{font-size:clamp(32px,5.5vw,60px);font-weight:800;letter-spacing:-.03em;line-height:1}
.sh i{flex:1;height:0;border-top:2px dashed var(--line);position:relative}
.sh i::after{content:"";position:absolute;right:0;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--g1);box-shadow:0 0 14px var(--g1)}
.sh span{font:12px var(--mono);color:var(--mute)}
/* about */
.two{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center}
.about p{color:var(--mute);max-width:56ch;margin-bottom:18px}
.about p:first-child{color:var(--text);font-size:clamp(20px,2.4vw,26px);line-height:1.45}
.tele{display:grid;gap:0;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.tele div{display:flex;justify-content:space-between;align-items:baseline;padding:20px 24px;border-bottom:1px solid var(--line)}
.tele div:last-child{border:0}
.tele strong{font-size:38px;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.tele span{font:12px var(--mono);color:var(--mute);text-align:right}
/* skills */
#radar{width:100%;max-width:460px;margin:auto;display:block;overflow:visible}
#radar .ring{fill:none;stroke:var(--line)}
#radar text{font:10.5px var(--mono);fill:var(--mute)}
#rp2{fill:rgba(0,255,157,.15);stroke:var(--g1);stroke-width:2;transform-origin:150px 150px;transform:scale(0);transition:transform 1.5s cubic-bezier(.2,.8,.2,1)}
#radar circle{fill:var(--g1);opacity:0;transition:opacity .6s 1.3s}
#radar.in #rp2{transform:scale(1)}#radar.in circle{opacity:1}
.stack{display:grid;gap:0}
.stack div{display:grid;grid-template-columns:104px 1fr;gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.stack dt{font:12px var(--mono);color:var(--g1)}
.stack dd{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0}
.stack dd span{transition:color .2s,translate .2s;cursor:default}
.stack dd span:hover{color:var(--g1);translate:0 -3px}
/* log */
.row{display:grid;grid-template-columns:200px 1fr;gap:30px;padding:34px 0;border-top:1px dashed var(--line)}
.row time{font:13px var(--mono);color:var(--g1)}
.row h3{font-size:22px;line-height:1.3}
.org{color:var(--mute);margin-bottom:14px;font-size:14px}
.row ul{color:var(--mute);padding-left:18px;max-width:68ch}
.row li{margin-bottom:6px}
.tag{display:inline-block;margin-left:10px;font:600 10px var(--mono);padding:2px 9px;border-radius:999px;background:var(--grad);color:#04120c;vertical-align:3px;animation:pl 2s infinite}
/* missions */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:22px}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:30px;overflow:hidden;transition:border-color .3s}
.card:hover{border-color:rgba(0,255,157,.5)}
.card::after{content:"";position:absolute;right:-60px;top:-60px;width:120px;height:120px;border-radius:50%;border:1px solid var(--g1);opacity:0;animation:rp 3.6s infinite}
.card:nth-child(2)::after{animation-delay:-1s}.card:nth-child(3)::after{animation-delay:-2s}.card:nth-child(4)::after{animation-delay:-.5s}
@keyframes rp{0%{transform:scale(.2);opacity:.7}100%{transform:scale(1.6);opacity:0}}
.st{font:11px var(--mono);color:var(--g1);display:flex;align-items:center;gap:8px;margin-bottom:18px}
.st.off{color:var(--mute)}
.st b{width:7px;height:7px;border-radius:50%;background:currentColor}
.st:not(.off) b{animation:pl 1.6s infinite}
.card h3{font-size:26px;letter-spacing:-.02em}
.card .sub2{color:var(--mute);font-size:14px;margin-bottom:14px}
.card p{color:#b8bdc2;font-size:15px;margin-bottom:20px}
.tech{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.tech span{font:11px var(--mono);padding:4px 10px;border:1px solid var(--line);border-radius:4px;color:var(--mute)}
.card .go{display:inline-block;margin-top:14px;font:600 13px var(--mono);color:var(--g1)}
.card .go:hover{text-decoration:underline}
/* contact */
.contact{text-align:left}
.big{display:block;font-size:clamp(18px, 5.2vw, 68px);font-weight:800;letter-spacing:-.04em;line-height:1.1;word-break:break-word;background:linear-gradient(90deg,var(--text),var(--text)) 0 100%/0 3px no-repeat;transition:background-size .6s cubic-bezier(.7,0,.2,1),color .3s}
.big:hover{background-size:100% 3px;color:var(--g1)}
.big small{display:block;font:12px var(--mono);color:var(--mute);letter-spacing:0;margin-bottom:14px;font-weight:400}
.links{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
footer{padding:30px max(7vw,24px) 130px;max-width:1220px;margin:auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:12px var(--mono);color:var(--mute);border-top:1px solid var(--line)}
footer a:hover{color:var(--g1)}
.rv{opacity:0;translate:0 36px;transition:opacity .8s,translate .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;translate:0 0}
.ab{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:clamp(32px,6vw,72px);align-items:center}
.abt p{color:var(--mute);max-width:56ch;margin-bottom:18px}
.abt p:first-child{color:var(--text);font-size:clamp(20px,2.4vw,28px);line-height:1.45}
.ph{position:relative;width:100%;aspect-ratio:1;border-radius:6px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 38%,rgba(0,255,157,.32),rgba(0,229,255,.08) 45%,transparent 70%),linear-gradient(160deg,#101214,#0b0b0c);box-shadow:0 30px 70px -35px rgba(0,255,157,.45)}
.ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom;filter:contrast(1.05) saturate(.95)}
.ph::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,12,.8),transparent 32%);z-index:1}
.ph .scan{position:absolute;left:0;right:0;height:2px;top:0;background:var(--grad);box-shadow:0 0 18px var(--g1);z-index:2;animation:scn 4.5s ease-in-out infinite}
@keyframes scn{0%{top:0;opacity:0}10%,90%{opacity:1}100%{top:100%;opacity:0}}
.fl{position:absolute;left:11%;top:15%;width:55%;height:58%;z-index:2;animation:fl 3.2s ease-in-out infinite}
.fl i{position:absolute;width:18px;height:18px;border:2px solid var(--g1)}
.fl i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.fl i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.fl i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.fl i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
@keyframes fl{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}}
.ph figcaption{position:absolute;left:16px;bottom:14px;z-index:3;font:11px/1.6 var(--mono);color:var(--text)}
.ph figcaption b{color:var(--g1)}
.tele{grid-template-columns:repeat(3,1fr);margin-top:clamp(40px,6vw,64px)}
.tele div{flex-direction:column;align-items:flex-start;gap:2px;border-bottom:0;border-right:1px solid var(--line)}
.tele div:last-child{border-right:0}
.tele span{text-align:left}
@media(max-width:900px){.ab{grid-template-columns:1fr;gap:34px}.ph{max-width:380px}}
@media(max-width:560px){.ph{max-width:none}.tele div{padding:16px 14px}.tele strong{font-size:28px}.tele span{font-size:10px}}
@media(min-width:1600px){section,footer{max-width:1400px}}
@media(max-height:520px) and (orientation:landscape){.hero{min-height:auto;padding-block:120px}}
@media(max-width:900px){.rail{display:none}.two{grid-template-columns:1fr;gap:36px}.row{grid-template-columns:1fr;gap:8px}.radar{right:-35vw;opacity:.5}}
@media(max-width:700px){.h.d,.h.e{display:none}.h.a,.h.b{left:40px;right:40px}.h.b{left:auto}nav a{padding:8px 10px;font-size:11px}#drone{width:54px}.stack div{grid-template-columns:1fr;gap:4px}section{padding-block:90px}.sh{gap:12px}}
@media(max-width:380px){nav a{padding:8px 7px;font-size:10px}.cta .btn,.links .btn{flex:1;text-align:center}}
/* ---- responsive hardening ---- */
:root{--mw:1220px;--pad:max(7vw,24px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
img,svg{max-width:100%}
.hud::before,.hud::after{content:"";position:absolute;left:0;right:0}
.hud::before{top:0;height:64px;background:linear-gradient(var(--bg),transparent)}
.hud::after{bottom:0;height:120px;background:linear-gradient(transparent,var(--bg))}
section,footer{max-width:var(--mw)}
.hero{max-width:none;min-height:100vh;min-height:100svh;padding-inline:max(var(--pad),calc((100vw - var(--mw))/2 + var(--pad)))}
@media(min-width:1600px){:root{--mw:1400px}}
@media(min-width:2200px){:root{--mw:1600px}.radar{width:1000px}}
@media(min-width:901px) and (max-width:1100px){.ab{grid-template-columns:minmax(240px,320px) 1fr}.row{grid-template-columns:160px 1fr}}
@media(max-width:700px){.card{padding:22px}.card h3{font-size:23px}.hero h1{letter-spacing:-.04em}footer{flex-direction:column;gap:10px}.cta .btn{flex:1;text-align:center}.hero{padding-top:90px}}
@media(max-width:560px){.sh h2{font-size:clamp(28px,9vw,40px)}.row{padding:26px 0}.row h3{font-size:19px}.tag{display:inline-block;margin:6px 0 0}}
@media(max-width:400px){.sh span{display:none}.btn{padding:12px 16px}.links .btn{flex:1 1 100%}}
@media(max-width:340px){.h.b{display:none}.rec{font-size:11px}}
@media(hover:none){#lock{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;translate:none}#rp2{transform:none}#radar circle{opacity:1}}

/* ---- contact form ---- */
.cform{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px;max-width:760px;padding:clamp(20px,4vw,34px);border:1px solid var(--line);border-radius:8px;background:var(--panel);position:relative}
.cform h3{grid-column:1/-1;font-size:22px;letter-spacing:-.02em}
.cform label{display:flex;flex-direction:column;gap:8px;font:12px var(--mono);color:var(--mute)}
.cform .full{grid-column:1/-1}
.cform input,.cform textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:13px 14px;color:var(--text);font:15px 'Sora',system-ui,sans-serif;transition:border-color .25s,box-shadow .25s;resize:vertical}
.cform input:focus,.cform textarea:focus{outline:0;border-color:var(--g1);box-shadow:0 0 0 3px rgba(0,255,157,.15)}
.cform small{align-self:flex-end;font-size:11px}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.cform button{grid-column:1/-1;justify-self:start;cursor:pointer;font-family:var(--mono)}
.cform button:disabled{opacity:.6;cursor:wait}
#fst{grid-column:1/-1;font-size:14px;min-height:1.4em;margin:0}
#fst.ok{color:var(--g1)}#fst.err{color:#ff6b81}#fst a{text-decoration:underline}
@media(max-width:600px){.cform{grid-template-columns:1fr}.cform button{justify-self:stretch}}