:root{--bg:#080d19;--bg2:#0d1426;--card:rgba(255,255,255,.045);--line:rgba(255,255,255,.09);--tx:#e9eef7;--mut:#9aa6ba;
--accent:#3d7bff;--sky:#3db0ff;--mint:#1fd1a8;--amber:#ff9f0a;--rose:#ff5d73;--r:18px;--max:1180px;
--silver:linear-gradient(180deg,#f4f6f9,#cfd5dd 55%,#b4bcc7);--silvertx:linear-gradient(180deg,#fff,#b9c2d0 60%,#8c95a3)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.6 Onest,system-ui,sans-serif;overflow-x:hidden;
background-image:radial-gradient(900px 600px at 10% -10%,rgba(61,123,255,.22),transparent 60%),radial-gradient(700px 500px at 100% 10%,rgba(31,209,168,.12),transparent 60%);background-attachment:fixed}
a{color:inherit}img{max-width:100%;display:block}
h1,h2,h3{font-family:Unbounded,Onest,sans-serif;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h2{font-size:clamp(24px,3.4vw,36px)}h3{font-size:18px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
/* header */
.hd{position:sticky;top:0;z-index:50;background:var(--silver);color:#1b2230;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 8px 30px rgba(0,0,0,.35)}
.hd .wrap{display:flex;align-items:center;gap:14px;height:60px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 15px Unbounded,sans-serif;white-space:nowrap}
.logo i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#1b2230,#46536b);color:#e9eef7;display:grid;place-items:center;font-style:normal;font-size:13px}
.nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none;font-size:14px;padding:6px 10px;border-radius:9px;white-space:nowrap;color:#2a3343}
.nav a:hover,.nav a.on{background:rgba(27,34,48,.1)}
.lang{position:relative}.lang button{font:600 13px Onest,sans-serif;background:#1b2230;color:#fff;border:0;border-radius:9px;padding:7px 10px;cursor:pointer}
.lang ul{position:absolute;right:0;top:110%;list-style:none;margin:0;padding:6px;background:#f4f6f9;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);display:none;min-width:84px}
.lang.open ul{display:block}.lang li a{display:block;padding:6px 10px;border-radius:8px;text-decoration:none;font-size:14px}.lang li a:hover{background:#dfe4ea}
@media(max-width:860px){.nav{display:none}.lang{margin-left:auto}}
/* hero */
.hero{padding:80px 0 40px}.role{color:var(--mint);font:500 14px "JetBrains Mono",monospace;margin-bottom:18px}
.hero h1{font-size:clamp(32px,6vw,64px);max-width:16ch;background:var(--silvertx);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:clamp(16px,2vw,19px);color:var(--mut);max-width:62ch}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 20px;border-radius:14px;text-decoration:none;font-weight:600;border:1px solid var(--line);background:var(--card);transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.08)}
.btn.pri{background:linear-gradient(135deg,var(--accent),var(--sky));border:0;color:#fff;box-shadow:0 10px 30px rgba(61,123,255,.35)}
.plat{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.plat span{font-size:13px;padding:5px 11px;border-radius:99px;border:1px solid var(--line);color:var(--mut)}
/* stats */
.stats{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;margin:30px 0 10px}
.stats div{padding:20px 16px;border-left:1px solid var(--line)}.stats div:first-child{border-left:0}
.stats b{display:block;font:700 clamp(26px,3.6vw,40px) Unbounded,sans-serif;background:var(--silvertx);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{font-size:13px;color:var(--mut);line-height:1.35;display:block}
@media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.stats div{border-left:0;border-top:1px solid var(--line)}.stats div:nth-child(-n+2){border-top:0}.stats div:nth-child(even){border-left:1px solid var(--line)}.stats div:last-child{grid-column:1/-1}}
section{padding:56px 0}
/* section buttons */
.secs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.secs{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.secs{grid-template-columns:1fr}}
.sec{position:relative;display:block;text-decoration:none;border-radius:var(--r);padding:22px;min-height:170px;overflow:hidden;border:1px solid var(--line);background:var(--g);transition:transform .25s,box-shadow .25s}
.sec:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.sec h3{font-size:20px;margin-bottom:6px}.sec p{color:rgba(233,238,247,.75);font-size:14px;margin:0;max-width:30ch}
.sec .ic{font-size:26px;margin-bottom:12px;display:block}
.sec .go{position:absolute;right:18px;bottom:16px;font-size:13px;opacity:.75}
.sec .th{position:absolute;right:-20px;bottom:-30px;width:130px;height:130px;border-radius:24px;object-fit:cover;opacity:.35;transform:rotate(-12deg);transition:opacity .25s,transform .25s}
.sec:hover .th{opacity:.6;transform:rotate(-6deg) scale(1.05)}
.sec h3,.sec p,.sec .go{position:relative;z-index:1}
@media(max-width:600px){.sec .th{width:96px;height:96px;opacity:.22;right:-16px;bottom:-34px}.sec p{padding-right:40px}}
/* who / skills */
.who{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center}.who p{color:var(--mut);font-size:17px}
.who img{border-radius:var(--r);border:1px solid var(--line)}@media(max-width:800px){.who{grid-template-columns:1fr}}
.skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.skill{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-decoration:none;font-size:15px}
.skill small{color:var(--mint);font-size:12px;white-space:nowrap}.skill:hover{border-color:rgba(31,209,168,.5)}
/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{border-radius:var(--r);border:1px solid var(--line);background:var(--card);overflow:hidden;display:flex;flex-direction:column}
.card .im{aspect-ratio:4/3;background:#0b1120;overflow:hidden;position:relative}
.card .im img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s}
.card:hover .im img{transform:scale(1.04)}
.card .bd{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card .tt{display:flex;align-items:center;gap:10px}.card .tt img{width:34px;height:34px;border-radius:9px}
.card h3{margin:0;font-size:16px}.card p{margin:0;color:var(--mut);font-size:14px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.tag{font-size:12px;padding:3px 9px;border-radius:99px;border:1px solid var(--line);color:var(--mut);text-decoration:none}
a.tag{color:var(--tx)}a.tag:hover{background:rgba(255,255,255,.08)}
.b-live{background:rgba(31,209,168,.15);border-color:rgba(31,209,168,.45);color:#7ff0d3}
.b-beta{background:rgba(61,123,255,.15);border-color:rgba(61,123,255,.45);color:#a9c4ff}
.b-wip{background:rgba(255,159,10,.12);border-color:rgba(255,159,10,.4);color:#ffcf85}
.b-play{background:rgba(255,93,115,.15);border-color:rgba(255,93,115,.5);color:#ffb3bf}
/* contact */
.contact{border-radius:24px;padding:34px;background:linear-gradient(135deg,rgba(61,123,255,.2),rgba(31,209,168,.12));border:1px solid var(--line)}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.mail code{font:600 clamp(16px,2.6vw,22px) "JetBrains Mono",monospace;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.3);word-break:break-all}
.mail button{font:600 14px Onest,sans-serif;padding:12px 16px;border-radius:12px;border:0;background:#f4f6f9;color:#1b2230;cursor:pointer}
footer{padding:30px 0 50px;color:var(--mut);font-size:14px;border-top:1px solid var(--line);margin-top:30px}
/* subpage hero */
.sh{padding:56px 0 24px}.crumb{font-size:14px;color:var(--mut);text-decoration:none}.crumb:hover{color:var(--tx)}
.sh h1{font-size:clamp(34px,6vw,62px);margin-top:14px}.sh p{color:rgba(233,238,247,.78);font-size:18px;max-width:60ch}
.page{background-image:var(--pg);background-attachment:fixed}
.sub h2{font-size:24px;margin-top:10px}
.next{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
/* games wow: neon + tilt */
.p-games .card{border-color:rgba(176,120,255,.25);box-shadow:0 0 0 1px rgba(176,120,255,.08),0 10px 40px rgba(110,60,220,.15);transform-style:preserve-3d;will-change:transform}
.p-games .card:hover{box-shadow:0 0 24px rgba(176,120,255,.45),0 0 60px rgba(61,176,255,.2)}
.p-games .sh h1{text-shadow:0 0 18px rgba(176,120,255,.7),0 0 42px rgba(61,176,255,.4)}
/* apps wow: device frames */
.phones{display:flex;gap:22px;overflow-x:auto;padding:10px 4px 26px;scroll-snap-type:x mandatory}
.phone{flex:0 0 220px;scroll-snap-align:start}
.phone .fr{border-radius:34px;padding:9px;background:linear-gradient(145deg,#2c3446,#0f1420);box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.12)}
.phone .fr img{border-radius:26px;aspect-ratio:9/19;object-fit:cover;object-position:top;width:100%}
.phone h3{margin:12px 0 2px;font-size:15px}.phone p{margin:0;color:var(--mut);font-size:13px}
.macs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}@media(max-width:400px){.macs{grid-template-columns:1fr}}
.mac .fr{border-radius:14px;overflow:hidden;background:rgba(255,255,255,.06);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.mac .bar{height:26px;display:flex;align-items:center;gap:6px;padding:0 10px;background:rgba(255,255,255,.06)}
.mac .bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}.mac .bar i+i{background:#febc2e}.mac .bar i+i+i{background:#28c840}
.mac img{aspect-ratio:16/10;object-fit:cover;object-position:top;width:100%}
.mac h3{margin:12px 0 2px;font-size:15px}.mac p{margin:0;color:var(--mut);font-size:13px}
/* 3d */
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.model{border-radius:var(--r);border:1px solid rgba(255,159,10,.25);background:radial-gradient(circle at 50% 40%,rgba(255,159,10,.18),rgba(0,0,0,.2) 70%);overflow:hidden}
.model model-viewer{width:100%;height:300px;--poster-color:transparent}
.model .bd{padding:12px 16px 16px}.model p{margin:0;color:var(--mut);font-size:13px}
.ai{display:flex;flex-wrap:wrap;gap:8px}.ai span{padding:8px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:14px}
.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:12px}
.icons img{border-radius:16px;box-shadow:0 6px 16px rgba(0,0,0,.4);transition:transform .2s}.icons img:hover{transform:scale(1.12) rotate(-3deg)}
/* design: light/dark compare */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:30px}
.pair figure{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.pair figure:first-child{background:#eef1f5}.pair figure:last-child{background:#0b0f18}
.pair figcaption{font-size:13px;padding:8px 12px}.pair figure:first-child figcaption{color:#1b2230}
.pair img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top}
@media(max-width:560px){.pair{grid-template-columns:1fr}}
/* security: terminal */
.term{border-radius:16px;background:#020604;border:1px solid rgba(31,209,168,.35);box-shadow:0 0 40px rgba(31,209,168,.15);padding:18px;font:14px/1.7 "JetBrains Mono",monospace;color:#3dff9e;min-height:230px;overflow:hidden}
.term .ln{white-space:pre-wrap;word-break:break-word}.term .ln::before{content:"$ ";color:#1fd1a8}
.term .cur{display:inline-block;width:9px;height:16px;background:#3dff9e;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.p-security .card{border-color:rgba(61,255,158,.2)}.p-security .sh h1{color:#7dffbf}
.ticks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;list-style:none;padding:0}
.ticks li{padding:12px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:15px}
.ticks li::before{content:"✓ ";color:var(--mint);font-weight:700}
/* servers: flow */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:8px;margin:20px 0 30px}
.node{padding:16px;border-radius:14px;background:rgba(61,176,255,.08);border:1px solid rgba(61,176,255,.35);text-align:center;font-size:14px}
.node b{display:block;font:600 15px Unbounded,sans-serif;margin-bottom:4px}
.pipe{position:relative;width:70px;height:2px;background:rgba(61,176,255,.35)}
.pipe i{position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--sky);box-shadow:0 0 12px var(--sky);animation:run 1.8s linear infinite}
.pipe i+i{animation-delay:.9s}@keyframes run{from{left:0}to{left:calc(100% - 10px)}}
@media(max-width:700px){.flow{grid-template-columns:1fr}.pipe{width:2px;height:40px;margin:0 auto}.pipe i{left:-4px;top:0;animation-name:runv}@keyframes runv{from{top:0}to{top:calc(100% - 10px)}}}
.fns{display:flex;flex-wrap:wrap;gap:8px}.fns span{font:13px "JetBrains Mono",monospace;padding:6px 10px;border-radius:9px;background:rgba(61,176,255,.1);border:1px solid rgba(61,176,255,.3)}
/* bots: chat */
.chat{max-width:420px;border-radius:24px;background:#0e1d2e;border:1px solid rgba(61,176,255,.3);padding:16px;display:flex;flex-direction:column;gap:8px;min-height:300px}
.chat .top{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line);font-weight:600}
.chat .top i{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--sky),var(--mint));display:grid;place-items:center;font-style:normal}
.msg{max-width:80%;padding:8px 12px;border-radius:14px;font-size:14px;opacity:0;transform:translateY(8px);transition:.35s}
.msg.in{opacity:1;transform:none}.msg.u{align-self:flex-end;background:#2b5ea8}.msg.b{align-self:flex-start;background:#1a2c42}
.botsgrid{display:grid;grid-template-columns:420px 1fr;gap:24px;align-items:start}@media(max-width:860px){.botsgrid{grid-template-columns:1fr}}
/* websites: browser frames */
.browser{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0b1120}
.browser .url{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,.06);font:12px "JetBrains Mono",monospace;color:var(--mut)}
.browser .url span{flex:1;padding:4px 10px;border-radius:8px;background:rgba(0,0,0,.3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser .im{aspect-ratio:4/3;overflow:hidden}.browser .im img{width:100%;height:100%;object-fit:cover;object-position:top}
.browser .ph{aspect-ratio:4/3;display:grid;place-items:center;font:600 20px Unbounded,sans-serif;background:linear-gradient(135deg,rgba(130,190,80,.25),rgba(31,209,168,.15))}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.msg{opacity:1;transform:none}}