:root{--bg:#07080a;--fg:#e9ecf0;--ease:cubic-bezier(.22,1,.36,1);--pad:clamp(20px,4vw,64px);--r:999px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font:400 clamp(15px,1.1vw,18px)/1.6 Onest,system-ui,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}ul{list-style:none}img{display:block;max-width:100%}
h1,h2,h3{font-weight:400;hyphens:none;text-wrap:balance}
h1{font-size:clamp(2.6rem,8vw,9rem);line-height:.9;letter-spacing:-.03em}
h2{font-size:clamp(2rem,5.5vw,5rem);line-height:.95;letter-spacing:-.025em}
p{max-width:56ch;text-wrap:pretty}
.label,.note,.side{font-size:12px;text-transform:uppercase;letter-spacing:.18em}
.label{opacity:.55;margin-bottom:20px}.note{opacity:.6;text-transform:none;letter-spacing:.02em;font-size:13px}
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.06;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* кнопки: два типа, hover с направлением */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;min-height:48px;padding:0 28px;border-radius:var(--r);font-weight:500;font-size:15px;cursor:pointer;isolation:isolate;transition:color 320ms var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ease)}
.btn:hover::before{transform:scaleX(1)}
.btn--solid{background:var(--fg);color:var(--bg)}.btn--solid::before{background:var(--bg)}.btn--solid:hover{color:var(--fg);box-shadow:inset 0 0 0 1px var(--fg)}
.btn--ghost{box-shadow:inset 0 0 0 1px rgba(233,236,240,.35)}.btn--ghost::before{background:var(--fg)}.btn--ghost:hover{color:var(--bg)}
/* навигация */
.nav{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:calc(18px + env(safe-area-inset-top)) var(--pad) 18px}
.nav__logo{font-weight:500;letter-spacing:.14em;font-size:14px}
.nav__links{display:flex;gap:32px;margin-left:auto}.nav__links a{opacity:.7;padding:12px 0;transition:opacity 320ms}.nav__links a:hover{opacity:1}
.nav__cta{min-height:44px}
/* первый экран */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero__media{position:absolute;inset:0;perspective:1400px;overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:50% calc(var(--fy,.6)*100%);transform:rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg)) scale(1.04);will-change:transform}
.hero__beam{position:absolute;inset:0;width:100%;height:100%;filter:blur(14px);mix-blend-mode:screen;pointer-events:none}
.fog{position:absolute;width:90%;height:50%;filter:blur(40px);pointer-events:none;background:radial-gradient(closest-side,rgba(215,225,240,.16),transparent)}
.fog--a{left:-20%;bottom:-8%;animation:drift 23s ease-in-out infinite alternate}
.fog--b{right:-25%;bottom:12%;animation:drift 31s ease-in-out -9s infinite alternate-reverse}
@keyframes drift{to{transform:translate3d(22%,-6%,0) scale(1.15)}}
.hero__shade{position:absolute;inset:0;pointer-events:none;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 40%);mask-image:linear-gradient(to top,#000 0%,transparent 40%)}
.hero__body{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom))}
.hero__name{--mx:-999px;--my:-999px;width:max-content;max-width:100%;text-shadow:0 0 40px rgba(0,0,0,.6);-webkit-mask-image:radial-gradient(circle 30vmax at var(--mx) var(--my),#000 20%,rgba(0,0,0,.16) 100%);mask-image:radial-gradient(circle 30vmax at var(--mx) var(--my),#000 20%,rgba(0,0,0,.16) 100%)}
.hero__sub{margin:20px 0 28px;opacity:.75;max-width:34ch;text-shadow:0 0 20px rgba(0,0,0,.8)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.side{position:absolute;z-index:3;top:50%;display:flex;gap:28px;opacity:.6;writing-mode:vertical-rl;transform:translateY(-50%)}
.side--l{left:var(--pad)}.side--r{right:var(--pad);transform:translateY(-50%) rotate(180deg)}
/* секции */
.sec{padding:clamp(80px,12vw,180px) var(--pad) 0}.sec--end{padding-bottom:clamp(48px,6vw,96px)}
.svc{margin-top:clamp(40px,6vw,80px)}
.svc li{display:grid;grid-template-columns:64px 1fr 1.4fr auto;gap:24px;align-items:baseline;padding:28px 0;border-top:1px solid rgba(233,236,240,.14);transition:padding 620ms var(--ease),opacity 320ms}
.svc li:hover{padding-left:16px}.svc h3{font-size:clamp(1.4rem,2.4vw,2.1rem);letter-spacing:-.02em;line-height:1.05}
.svc .n,.svc .pr{opacity:.55;font-size:14px}.svc p{opacity:.75}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,32px);margin-top:clamp(40px,6vw,80px)}
.work{position:relative;transition:transform 620ms var(--ease)}.work:hover{transform:translateY(-8px)}
.work__frame{aspect-ratio:1;overflow:hidden;background:#101216;display:grid;place-items:center;font-size:13px;opacity:.95}
.work__frame img{width:100%;height:100%;object-fit:cover;transition:transform 850ms var(--ease)}.work:hover .work__frame img{transform:scale(1.06)}
.work__empty{opacity:.4;text-align:center;padding:16px}
.work figcaption{display:flex;justify-content:space-between;margin-top:14px;font-size:14px}.work figcaption span:last-child{opacity:.55}
.work--pop{grid-column:span 2;grid-row:span 1}
.work--pop .work__frame{aspect-ratio:2/1;background:linear-gradient(120deg,#14161b,#0b0c0f)}
.work--pop .work__frame img{display:none}
.work__pop{position:absolute;left:50%;bottom:44px;width:min(62%,560px);aspect-ratio:1;object-fit:cover;transform:translate(-50%,-14%);-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent);transition:transform 850ms var(--ease);pointer-events:none}
.work--pop:hover .work__pop{transform:translate(-50%,-18%) scale(1.05)}
.meta{margin-top:56px;opacity:.6;font-size:14px;max-width:none}
/* появление */
.rise{opacity:0;transform:translateY(28px);filter:blur(14px)}
.is-in .rise{opacity:1;transform:none;filter:blur(0);transition:opacity 900ms var(--ease) var(--d,0ms),transform 900ms var(--ease) var(--d,0ms),filter 900ms var(--ease) var(--d,0ms)}
/* планшет и телефон */
@media(max-width:900px){.works{grid-template-columns:repeat(2,1fr)}.nav__links{display:none}.nav__cta{margin-left:auto}.svc li{grid-template-columns:44px 1fr auto}.svc li p{grid-column:2/4;grid-row:2}}
@media(max-width:600px){.side{display:none}.works{grid-template-columns:1fr}.work--pop{grid-column:auto}.work--pop .work__frame{aspect-ratio:1}.work__pop{width:86%;bottom:56px}.hero__sub{margin:16px 0 22px}.btn{padding:0 24px}}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;filter:none;transition:none!important}.fog{animation:none}html{scroll-behavior:auto}}