*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;overflow-x:hidden;background:#050505;color:#f2f2f2;font:15px/1.55 Arial,sans-serif}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #f2f2f2;outline-offset:4px}
.skip{position:fixed;left:18px;top:10px;z-index:20;padding:10px 14px;background:#f2f2f2;color:#050505;font-weight:800;transform:translateY(-150%)}
.skip:focus{transform:none}
.w{width:min(1180px,calc(100% - 36px));margin:auto}
header{position:sticky;top:0;z-index:5;background:#050505e6;border-bottom:1px solid #222;backdrop-filter:blur(14px)}
nav{height:68px;display:flex;align-items:center;justify-content:space-between;position:relative}
.logo{font-size:22px;font-weight:900;letter-spacing:-2px}
.links{display:flex;gap:28px;color:#999;font-size:12px}
.menu{display:none;border:1px solid #333;padding:10px 12px;background:#080808;color:#f2f2f2;font-size:11px;font-weight:800}
.cta,.btn{border:1px solid #333;padding:12px 16px;font-weight:700}
.hero{min-height:92vh;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center}
.k{color:#888;text-transform:uppercase;letter-spacing:2px;font-size:11px}
h1{font-size:clamp(64px,8vw,120px);line-height:.82;letter-spacing:-8px;margin:16px 0 28px;text-transform:uppercase}
h1 span{display:block;color:#858585}
.lead{max-width:650px;color:#aaa;font-size:17px}
.actions{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.btn.main{background:#f2f2f2;color:#050505}
.pic{width:min(420px,100%);aspect-ratio:.86;overflow:hidden;border:1px solid #292929;position:relative}
.pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transform:scale(1.02)}
.pic:after{content:"ELBO";position:absolute;left:20px;bottom:15px;font-size:42px;font-weight:900;letter-spacing:-4px}
section{padding:110px 0;border-top:1px solid #1d1d1d;content-visibility:auto;contain-intrinsic-size:1px 800px}
.head{display:flex;gap:14px;align-items:center;color:#888;text-transform:uppercase;letter-spacing:2px;font-size:11px;margin-bottom:45px}
.num{border:1px solid #292929;padding:5px 8px}
h2{font-size:clamp(44px,6vw,84px);line-height:.9;letter-spacing:-5px;text-transform:uppercase;margin:0 0 30px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.about p{color:#aaa;font-size:18px}
.about .big{font-size:28px;color:#ddd}
.projects{display:grid;grid-template-columns:1fr 1fr;gap:48px 20px}
.p{display:block}
.thumb{aspect-ratio:16/9;overflow:hidden;border:1px solid #222;background:#111;transition:transform .28s ease,border-color .28s ease;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;transition:.45s}
.p:hover .thumb img{transform:scale(1.045)}
.meta{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-top:14px}
.meta strong{display:block;font-size:18px;line-height:1.2}
.meta small{display:block;color:#777;margin-top:5px;text-transform:uppercase;letter-spacing:1px}
.meta>span{color:#999;font-size:11px;font-weight:800;letter-spacing:1px;white-space:nowrap;padding-top:3px}
.skills{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #222}
.skill{min-height:250px;padding:24px;border-right:1px solid #222;display:flex;flex-direction:column;justify-content:space-between}
.skill:last-child{border:0}
.ico{width:56px;height:56px;display:grid;place-items:center;border:1px solid #333;background:#0a0a0a}
.ico img{width:36px;height:36px;object-fit:contain;display:block}
.skill h3{font-size:24px;margin:0 0 8px}
.skill p{color:#999;margin:0}
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px}
.channels{display:grid;gap:10px;margin-top:28px}
.ch{width:100%;border:1px solid #252525;padding:14px;display:flex;align-items:center;gap:14px;background:#080808;color:#f2f2f2;text-align:left}
.ch img,.ch .ii{width:46px;height:46px;display:grid;place-items:center;border:1px solid #333;background:#0b0b0b;overflow:hidden}
.ii img{width:27px;height:27px;object-fit:contain}
.ch b{display:block}
.ch small{color:#888}
form{border:1px solid #252525;padding:26px;background:#080808}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;color:#999;font-size:12px;margin-bottom:12px}
input,select,textarea{width:100%;margin-top:7px;padding:13px;border:1px solid #383838;background:#050505;color:#fff}
textarea{min-height:130px;resize:vertical}
button{cursor:pointer}
.send{width:100%;padding:15px;background:#eee;color:#070707;border:0;font-weight:800}
.send:disabled{cursor:wait;opacity:.65}
.form-status{min-height:24px;margin:14px 0 0;color:#aaa;font-size:13px}
.form-status.ok{color:#8ee6aa}
.form-status.error{color:#ff9b9b}
.hp{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
footer{border-top:1px solid #222;padding:28px 0;color:#888}

.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .78s cubic-bezier(.2,.7,.2,1),transform .78s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}
.reveal-delay-4{transition-delay:.32s}
.reveal-delay-5{transition-delay:.40s}
.thumb:after{content:"";position:absolute;left:50%;top:50%;width:58px;height:58px;border:1px solid #ffffff66;border-radius:50%;background:#050505b8;box-shadow:0 8px 28px #0008;transform:translate(-50%,-50%);transition:transform .28s ease,background .28s ease}
.thumb:before{content:"";position:absolute;z-index:1;left:calc(50% + 3px);top:50%;border-left:14px solid #f2f2f2;border-top:9px solid transparent;border-bottom:9px solid transparent;transform:translate(-50%,-50%)}
.p:hover .thumb:after,.p:focus-visible .thumb:after{background:#f2f2f2;transform:translate(-50%,-50%) scale(1.08)}
.p:hover .thumb:before,.p:focus-visible .thumb:before{border-left-color:#050505}
.thumb:hover{border-color:#444}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1!important;transform:none!important;transition:none!important}}
@media(max-width:800px){
  .menu{display:inline-flex}
  .links{position:absolute;left:0;right:0;top:68px;display:grid;gap:0;padding:8px;border:1px solid #292929;background:#080808;box-shadow:0 18px 50px #000b;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .links.open{opacity:1;visibility:visible;transform:none}
  .links a{padding:14px;border-bottom:1px solid #222}
  .links a:last-child{border-bottom:0}
  .cta{padding:10px 12px;font-size:11px}
  .hero,.about,.contact{grid-template-columns:1fr}
  .hero{padding:72px 0 50px;min-height:auto}
  .pic{margin:auto}
  .projects,.skills,.two{grid-template-columns:1fr}
  .skill{border-right:0;border-bottom:1px solid #222}
  section{padding:82px 0}
  h1{font-size:clamp(48px,15vw,68px);line-height:.88;letter-spacing:-5px}
}
@media(max-width:480px){.w{width:min(1180px,calc(100% - 28px))}.cta{display:none}form{padding:18px}h2{letter-spacing:-3px}.meta{gap:12px}.meta strong{font-size:16px}.meta>span{display:none}}