*{box-sizing:border-box;margin:0;padding:0}
body{background:#fff;color:#0b0b0c;font:400 16px/1.55 Onest,system-ui;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;padding:6px 6px 6px 16px;border:1px solid rgba(0,0,0,.08);border-radius:999px;background:rgba(255,255,255,.85);backdrop-filter:blur(14px);box-shadow:0 10px 30px -18px rgba(0,0,0,.25);z-index:20;font-size:14px;color:#52525b}
.nav b{color:#000;font-weight:700;margin-right:12px}.nav a{padding:6px 12px;border-radius:999px;transition:background .2s,color .2s}
.nav a:hover{background:rgba(0,0,0,.05);color:#000}.nav a.on{color:#000;background:rgba(0,0,0,.06)}
.nav .go{background:#0b0b0c;color:#fff!important;margin-left:6px}
main{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:150px 32px 120px}
.eyebrow{font-size:13px;color:#52525b;font-weight:500;margin-bottom:18px;display:flex;gap:8px;align-items:center}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:#ff3651}
h1{font-size:60px;font-weight:700;letter-spacing:-.045em;line-height:1.03;max-width:16ch}
h1 .g{background:linear-gradient(100deg,#ff3651,#d6249f 45%,#4f5bd5);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:18px;color:#3f3f46;max-width:52ch;margin-top:20px}
.ch{display:inline-block;white-space:pre;animation:chin .7s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--d)*22ms)}
@keyframes chin{from{opacity:0;transform:translateY(.4em) rotateX(-90deg)}}
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;border-radius:12px;font-weight:500;font-size:15px;transition:transform .15s,background .2s}
.btn:active{transform:scale(.97)}.btn-b{background:#0b0b0c;color:#fff}.btn-b:hover{background:#27272a}.btn-l{background:#ededef}.btn-l:hover{background:#e2e2e5}
footer{position:relative;z-index:1;border-top:1px solid rgba(0,0,0,.08);padding:28px 32px;display:flex;justify-content:space-between;color:#52525b;font-size:13px;max-width:1120px;margin:0 auto}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
@media (max-width:760px){h1{font-size:38px}main{padding-top:120px}.nav a:not(.go){display:none}}

/* светлые «плиты» поверх серого чертежа */
:root{--card:#fff;--edge:rgba(0,0,0,.07);--lift:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(0,0,0,.05),0 24px 50px -30px rgba(0,0,0,.28)}
.btn:focus-visible,.nav a:focus-visible{outline:2px solid #ff3651;outline-offset:2px}