:root{--text:#ddeffd;--bg:#040709;--primary:#9ac6e4;--secondary:#2d516d;--accent:#5b9ccf;--glass:rgba(45,81,109,.18);--line:rgba(154,198,228,.16);--r:28px}
*{box-sizing:border-box;margin:0}
html{font-size:18px}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;overflow-x:hidden;animation:pg .7s both}
@keyframes pg{from{opacity:0}}
a{color:inherit;text-decoration:none}
#bg,#fg{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh}
#bg{z-index:-2}
#fg{z-index:5;pointer-events:none}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 20% 0%,rgba(45,81,109,.45),transparent 55%),radial-gradient(ellipse at 90% 100%,rgba(91,156,207,.18),transparent 50%)}
nav{position:sticky;top:0;z-index:10;backdrop-filter:blur(18px);background:rgba(4,7,9,.5);border-bottom:1px solid var(--line)}
nav div{max-width:1400px;margin:auto;padding:16px 40px;display:flex;justify-content:space-between;align-items:center}
nav b{font-weight:700;letter-spacing:.02em}
nav ul{display:flex;gap:6px;list-style:none;padding:0}
nav a{padding:8px 16px;border-radius:99px;font-size:.9rem;opacity:.7;transition:.3s}
nav a:hover,nav a.on{opacity:1;background:var(--glass)}
main{max-width:1400px;margin:auto;padding:0 40px}
.screen{min-height:92vh;display:flex;flex-direction:column;justify-content:center;padding:90px 0}
.screen.center{align-items:center;min-height:calc(100vh - 64px)}
.head{min-height:58vh;display:flex;flex-direction:column;justify-content:center}
h1{font-size:clamp(3rem,8vw,6.5rem);font-weight:800;line-height:1;letter-spacing:-.03em}
h2{font-size:clamp(2rem,4.5vw,3.4rem);font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.sub{opacity:.6;font-size:1.1rem;margin-bottom:44px;max-width:600px}
.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(16px);transition:transform .8s cubic-bezier(.35,.05,.2,1),border-color .8s,box-shadow .8s}
.card{translate:0 calc(var(--sv,0)*var(--k,1)*1px)}
.card:hover{transform:translateY(-8px);border-color:rgba(154,198,228,.4);box-shadow:0 30px 70px -30px var(--accent)}
.reveal{opacity:0;transform:translateY(32px);transition:opacity .9s,transform .9s,border-color .4s,box-shadow .4s}
.reveal.in{opacity:1;transform:none}
.reveal.done{transition:transform .8s cubic-bezier(.35,.05,.2,1),border-color .8s,box-shadow .8s}
.card:hover,.reveal.done:hover{transition-duration:.22s;transition-timing-function:cubic-bezier(.2,.8,.2,1)}
.reveal.in:hover{transform:translateY(-8px)}
.steam{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:80px 60px;width:min(100%,900px)}
.avatar{width:170px;height:170px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--secondary));border:3px solid var(--primary);background-size:cover;box-shadow:0 0 80px -10px var(--accent)}
.steam p{opacity:.65;font-size:1.2rem}
.btn{margin-top:14px;padding:16px 34px;border-radius:99px;background:var(--primary);color:var(--bg);font-weight:600;transition:.3s}
.steam:hover .btn{background:var(--text);letter-spacing:.03em}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:24px}
.stat{padding:44px;min-height:280px;display:flex;flex-direction:column;justify-content:space-between}
.stat small{opacity:.6;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem}
.stat strong{font-size:clamp(3rem,6vw,4.6rem);font-weight:700;color:var(--primary);line-height:1}
.stat span{opacity:.5}
.big{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px}
.big a{padding:48px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end}
.big a b{font-size:2.2rem;font-weight:700}.big a span{opacity:.55}
.big a i{font-style:normal;font-size:1.6rem;color:var(--primary);margin-bottom:auto;transition:.3s}
.big a:hover i{transform:translateX(8px)}
.socials a{min-height:200px}
.skins{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));padding-bottom:120px}
.skin{overflow:hidden}
.skin .img{aspect-ratio:16/10;background:radial-gradient(circle at 30% 30%,var(--accent),var(--secondary) 60%,#0a1620);background-size:cover;background-position:center;transition:transform .8s}
.skin:hover .img{transform:scale(1.05)}
.skin .t{padding:28px 34px;position:relative;background:rgba(4,7,9,.55)}
.skin b{display:block;font-size:1.5rem}.skin span{opacity:.6}
.masonry{columns:2 460px;column-gap:28px;padding-bottom:120px}
.art{break-inside:avoid;margin-bottom:28px;overflow:hidden;cursor:zoom-in}
.art .img{background:linear-gradient(160deg,var(--secondary),#0a1620);background-size:cover;background-position:center;transition:transform .8s}
.art:hover .img{transform:scale(1.04)}
.art p{padding:22px 30px;font-size:1.1rem;position:relative;background:rgba(4,7,9,.55)}
.photo{min-height:78vh;background:linear-gradient(150deg,var(--secondary),#0a1620);background-size:cover;background-position:center;display:grid;place-items:center;color:var(--primary);font-size:1.4rem;margin-bottom:28px}
.specs{padding:16px 48px;margin-bottom:120px}
.specs div{display:flex;justify-content:space-between;gap:20px;padding:30px 0;border-bottom:1px solid var(--line);font-size:1.3rem}
.specs div:last-child{border:0}
.specs small{opacity:.55;text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;align-self:center}
footer{text-align:center;opacity:.4;padding:60px 0 50px;font-size:.85rem}
.lb{position:fixed;inset:0;background:rgba(4,7,9,.82);backdrop-filter:blur(14px);display:none;place-items:center;z-index:20;cursor:zoom-out;padding:30px}
.lb.on{display:grid;animation:pg .3s}
.lb div{width:min(92vw,1100px);height:85vh;border-radius:var(--r);background:linear-gradient(160deg,var(--secondary),#0a1620) center/contain no-repeat}
@media(max-width:760px){main,nav div{padding:0 20px}nav ul a{padding:6px 10px}.steam{padding:50px 26px}.specs{padding:10px 24px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
