/* ===== Илья любит Цукерберга — лендинг услуг ===== */
:root{
  --bg:#000;--ink:#fff;
  --muted:rgba(255,255,255,.55);--dim:rgba(255,255,255,.3);
  --blue:#0668E1;--blue-hi:#0080FB;--red:#FF3B30;
  --display:"Oswald",Impact,sans-serif;
  --body:"Inter",-apple-system,Segoe UI,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --wrap:1180px;--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px;position:relative;z-index:2}

/* ---- прелоадер ---- */
.boot{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#000;
  animation:bootOut .5s var(--ease) 1.15s forwards}
.boot__in{width:min(320px,72vw);text-align:center}
.boot__line{margin:0 0 16px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted)}
.boot__cur{display:inline-block;width:7px;height:13px;margin-left:6px;background:var(--blue-hi);
  vertical-align:-2px;animation:bootBlink .6s steps(1) infinite}
.boot__bar{height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.boot__bar i{display:block;height:100%;width:0;background:var(--blue-hi);box-shadow:0 0 12px var(--blue-hi);
  animation:bootFill 1.1s var(--ease) forwards}
@keyframes bootFill{to{width:100%}}
@keyframes bootBlink{50%{opacity:0}}
@keyframes bootOut{to{opacity:0;visibility:hidden}}

/* ---- спенд страницы ---- */
.spend{position:fixed;top:74px;right:26px;z-index:86;display:flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none}
.spend.on{opacity:1}
.spend b{font-family:var(--display);font-size:15px;letter-spacing:.06em;color:var(--blue-hi);
  text-shadow:0 0 18px rgba(0,128,251,.5)}

/* ---- нить, идущая через весь лендинг ---- */
.thread{position:absolute;top:0;left:0;width:100%;z-index:5;pointer-events:none;overflow:visible;opacity:0;
  transition:opacity .55s var(--ease)}
.thread--done{opacity:0!important;transition:opacity .45s var(--ease)}
.thread__base{fill:none;stroke:none}
.thread__lit{fill:none;stroke:rgba(0,128,251,.72);stroke-width:1.9;stroke-linecap:round}
.thread__head{fill:none;stroke:rgba(210,236,255,.9);stroke-width:2.6;stroke-linecap:round}
.stop{opacity:0;transition:opacity .45s var(--ease)}
.stop.on{opacity:1}
.stop__ring{fill:none;stroke:var(--blue-hi);stroke-width:1.2;transition:.5s var(--ease)}
.stop__core{fill:#fff;transition:.5s var(--ease)}
.stop__txt{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;fill:rgba(158,210,255,.85);
  transition:.5s var(--ease)}


/* ---- chrome ---- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:100;background:var(--blue-hi);box-shadow:0 0 14px var(--blue-hi)}
.grain{position:fixed;inset:-120%;z-index:97;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(5%,2%)}100%{transform:translate(0,0)}}
/* ---- искры за курсором ---- */
.sparks{position:fixed;inset:0;width:100%;height:100%;z-index:95;pointer-events:none;mix-blend-mode:screen}
@media (max-width:760px), (max-width:1024px) and (orientation:portrait){.sparks{display:none}}

/* ---- header ---- */
.header{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;gap:32px;padding:16px 28px;
  transition:padding .35s var(--ease),background .35s}
.header.stuck{padding:9px 28px;background:rgba(0,0,0,.7);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.brand{position:relative;padding-left:16px}
.brand::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:var(--blue-hi);box-shadow:0 0 14px var(--blue-hi);transition:.45s var(--ease)}
.brand:hover::before{transform:scale(1.6)}
.brand__txt{font-family:var(--display);font-size:12.5px;line-height:1.12;letter-spacing:.1em;text-transform:uppercase;
  transition:color .35s}
.brand:hover .brand__txt{color:var(--blue-hi)}
.nav{display:flex;gap:28px;font-size:13.5px;color:var(--muted)}
.nav a{position:relative;padding:4px 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--blue-hi);transition:width .35s var(--ease)}
.nav a:hover{color:#fff}.nav a:hover::after{width:100%}
.burger{display:none;width:40px;height:34px;background:none;border:0;cursor:pointer;flex-direction:column;
  justify-content:center;align-items:center;gap:6px}
.burger span{width:20px;height:1.5px;background:#fff;transition:.3s var(--ease)}
.burger.on span:first-child{transform:translateY(3.7px) rotate(45deg)}
.burger.on span:last-child{transform:translateY(-3.7px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:89;background:rgba(0,0,0,.97);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 28px;opacity:0;visibility:hidden;transition:.4s var(--ease)}
.mmenu.on{opacity:1;visibility:visible}
.mmenu a{font-family:var(--display);font-size:38px;text-transform:uppercase;letter-spacing:.02em}
.mmenu__cta{color:var(--blue-hi)}

/* ---- buttons ---- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;overflow:hidden;
  font-family:var(--display);font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 28px;border:1px solid rgba(255,255,255,.14);border-radius:2px;transition:.4s var(--ease);white-space:nowrap}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn--sm{padding:9px 18px;font-size:12px}
.header .btn--sm:hover{background:var(--blue);border-color:var(--blue)}
.btn--primary{background:var(--blue);border-color:var(--blue)}
.btn--primary::before{content:"";position:absolute;inset:0;background:var(--blue-hi);transform:translateY(101%);
  transition:transform .45s var(--ease)}
.btn--primary span,.btn--primary svg{position:relative;z-index:1}
.btn--primary:hover{box-shadow:0 14px 46px -10px rgba(6,104,225,.8);border-color:var(--blue-hi)}
.btn--primary:hover::before{transform:translateY(0)}
.btn--ghost{color:var(--muted)}
.btn--ghost:hover{color:#fff;border-color:rgba(255,255,255,.4)}
.btn--lg{padding:22px 46px;font-size:17px}
[data-magnet]{will-change:transform}

/* ---- типографика ---- */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--blue-hi);margin:0 0 20px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eyebrow i{font-style:normal;font-size:7px;opacity:.7}
.h-xxl{font-family:var(--display);font-weight:700;text-transform:uppercase;margin:0;
  font-size:clamp(42px,8vw,112px);line-height:.86;letter-spacing:-.015em}
.h-xxl .ln{display:block;white-space:nowrap}
.h-xxl em,.h-xl em,.quote em{font-style:normal;color:var(--blue-hi);text-shadow:0 0 46px rgba(0,128,251,.5)}
.h-xl{font-family:var(--display);font-weight:700;text-transform:uppercase;margin:0;
  font-size:clamp(46px,10vw,120px);line-height:.88;letter-spacing:-.01em}
.h-l{font-family:var(--display);font-weight:700;text-transform:uppercase;margin:0 0 44px;
  font-size:clamp(34px,5.6vw,72px);line-height:.92}
.knum{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--dim);margin:0 0 14px}
.sec{position:relative;padding:120px 0;z-index:2}

[data-reveal]{opacity:0;transform:translateY(26px);filter:blur(6px);
  transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s),filter .9s var(--ease) var(--d,0s)}
[data-reveal].in{opacity:1;transform:none;filter:none}

.off-screen .mn-motes circle,.off-screen .halo,
.off-screen .hero__cue i,.off-screen .shot__hint i{animation-play-state:paused}

/* ---- фоновые объекты ---- */
.floaters{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fl{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);
  transform:translate(-50%,-50%) rotate(var(--r));opacity:.5;will-change:transform;
  animation:bob calc(9s / var(--z)) ease-in-out infinite alternate}
.fl--blur{filter:blur(7px);opacity:.32}
@keyframes bob{from{translate:0 -10px}to{translate:0 12px}}

/* ---- hero ---- */
.hero{position:relative;min-height:88svh;display:flex;align-items:flex-start;padding:clamp(132px,21vh,220px) 0 96px;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.halo{position:absolute;right:9%;top:48%;width:min(620px,52vw);aspect-ratio:1;transform:translateY(-50%);
  background:radial-gradient(circle,rgba(6,104,225,.32),rgba(6,104,225,.05) 44%,transparent 66%);
  animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75;transform:translateY(-50%) scale(1)}50%{opacity:1;transform:translateY(-50%) scale(1.06)}}
.monument{position:absolute;right:3%;bottom:0;width:min(660px,54vw);height:min(96%,900px);will-change:transform;
  -webkit-mask-image:radial-gradient(72% 78% at 50% 52%,#000 46%,rgba(0,0,0,.72) 74%,rgba(0,0,0,.22) 90%,transparent 100%);
  mask-image:radial-gradient(72% 78% at 50% 52%,#000 46%,rgba(0,0,0,.72) 74%,rgba(0,0,0,.22) 90%,transparent 100%)}
.dust{position:absolute;inset:0;width:100%;height:100%}
.mn-layer{-webkit-mask-image:none;mask-image:none;pointer-events:none}
.mn-rays path{opacity:0;animation:mnRay var(--dur,8s) ease-in-out var(--del,0s) infinite}
@keyframes mnRay{
  0%,100%{opacity:0}
  14%{opacity:var(--o,.4)}
  46%{opacity:calc(var(--o,.4) * .4)}
  72%{opacity:0}
}
.mn-motes circle{opacity:0;animation:mnDrift var(--dur,13s) linear var(--del,0s) infinite}
@keyframes mnDrift{
  0%{transform:translate(0,0);opacity:0}
  8%{opacity:var(--o,.7)}
  30%{opacity:calc(var(--o,.7) * .5)}
  56%{opacity:0}
  100%{transform:translate(var(--dx,90px),var(--dy,-10px));opacity:0}
}
.hero__in{position:relative;z-index:3}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#000 4%,rgba(0,0,0,.86) 30%,rgba(0,0,0,.25) 58%,transparent 78%),
    linear-gradient(180deg,#000 0%,transparent 22%,transparent 58%,rgba(0,0,0,.45) 76%,rgba(0,0,0,.86) 90%,#000 100%)}
.hero__sub{max-width:460px;color:var(--muted);font-size:18px;margin:26px 0 32px}
.row{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.chips{list-style:none;display:flex;flex-wrap:nowrap;gap:10px;margin:42px 0 0;padding:0}
.chips li{display:flex;align-items:center;gap:11px;padding:13px 22px 13px 16px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  font-family:var(--display);font-size:15px;letter-spacing:.11em;text-transform:uppercase;
  transition:.4s var(--ease)}
.chips li:hover{background:rgba(6,104,225,.2);transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px -16px rgba(6,104,225,.9)}
.ic{width:21px;height:21px;flex:none}
.w-short{display:none}

/* ---- подсказка «листай» (только телефон) ---- */
.hero__cue{display:none;position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);
  width:22px;height:34px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hero__cue i{position:absolute;left:50%;top:8px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;
  background:var(--blue-hi);animation:cue 1.9s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}35%{opacity:1}100%{transform:translateY(12px);opacity:0}}

/* ---- marquee ---- */
.marq{position:relative;z-index:2;overflow:hidden;padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq--hero{display:none}
.marq__t{display:flex;width:max-content;will-change:transform}
.marq__t span{font-family:var(--display);font-size:17px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.32)}
.marq__t i{font-style:normal;color:var(--blue-hi);font-size:9px;margin:0 24px;vertical-align:middle}

/* ---- pains ---- */
.pains{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0;padding:0}
.pains li{position:relative;display:flex;align-items:center;gap:12px;padding:20px 18px;border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.035);font-family:var(--display);font-size:17px;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.7);transition:.45s var(--ease)}
.pains li::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--red);
  transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.pains li:hover{background:rgba(255,59,48,.1);color:#fff;transform:translateY(-4px)}
.pains li:hover::after{transform:scaleY(1)}
.pains b{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,59,48,.14);color:var(--red);font-size:11px}

/* ---- cards ---- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;perspective:1200px}
.c{--gx:8%;--gy:-8%;--gr:270px;--gi:.24;--ge:.09;--gs:.7;
  position:relative;padding:36px 30px 32px;border-radius:4px;overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 46%,rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,var(--ge)),0 22px 46px -34px rgba(6,104,225,var(--gs));
  transform-style:preserve-3d;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.c::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(var(--gr) circle at var(--gx) var(--gy),rgba(6,104,225,var(--gi)),transparent 64%)}

/* свет один на всю сетку: ближние карточки ярче, дальние ловят его вскользь */
.grid .c:nth-child(1){--gx:6%;--gy:-12%;--gr:260px;--gi:.34;--ge:.13;--gs:.9}
.grid .c:nth-child(2){--gx:-6%;--gy:-6%;--gr:300px;--gi:.22;--ge:.09;--gs:.7}
.grid .c:nth-child(3){--gx:-16%;--gy:4%;--gr:340px;--gi:.15;--ge:.07;--gs:.55}
.grid .c:nth-child(4){--gx:12%;--gy:-20%;--gr:280px;--gi:.25;--ge:.1;--gs:.75}
.grid .c:nth-child(5){--gx:-8%;--gy:-16%;--gr:320px;--gi:.18;--ge:.08;--gs:.6}
.grid .c:nth-child(6){--gx:-18%;--gy:-8%;--gr:360px;--gi:.13;--ge:.06;--gs:.5}
.c:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 26px -18px rgba(6,104,225,.9)}
.c::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(6,104,225,.22),transparent 70%)}
.c:hover{background:linear-gradient(158deg,rgba(255,255,255,.11),rgba(255,255,255,.04) 46%,rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 26px 60px -30px rgba(6,104,225,.9)}
.c:hover::before{opacity:1}
.c>*{position:relative;z-index:1}
.c__box{display:grid;place-items:center;width:62px;height:62px;margin-bottom:24px;border-radius:16px;
  background:linear-gradient(150deg,rgba(6,104,225,.36),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 12px 26px -16px rgba(6,104,225,.7);
  transition:.55s var(--ease)}
.c__ic{width:34px;height:34px;transition:transform .5s var(--ease)}
.c:hover .c__box{background:linear-gradient(150deg,rgba(6,104,225,.42),rgba(0,128,251,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 34px -14px rgba(6,104,225,.9);transform:translateZ(34px)}
.c:hover .c__ic{transform:scale(1.1) rotate(-6deg)}
.c h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:25px;margin:0 0 6px;letter-spacing:.02em}
.c p{margin:0;color:var(--muted);font-size:15px}
.c{cursor:pointer}
.c:focus-visible{outline:2px solid var(--blue-hi);outline-offset:4px}
.c__more{display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8598ab;
  transition:color .4s var(--ease)}
.c__more i{position:relative;display:block;width:22px;height:22px;border-radius:50%;font-size:0;
  background:rgba(6,104,225,.34);color:#cfe6ff;box-shadow:inset 0 0 0 1px rgba(158,210,255,.22);
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.c__more i::before,.c__more i::after{content:"";position:absolute;left:50%;top:50%;
  background:currentColor;border-radius:1px}
.c__more i::before{width:10px;height:2px;margin:-1px 0 0 -5px}
.c__more i::after{width:2px;height:10px;margin:-5px 0 0 -1px}
.c:hover .c__more,.c:focus-visible .c__more{color:#9ed2ff}
.c:hover .c__more i{background:var(--blue);color:#fff;transform:scale(1.12)}

/* ---- раскрытая карточка услуги ---- */
body.svc-open{overflow:hidden}
.svc{position:fixed;inset:0;z-index:140}
.svc[hidden]{display:none}
.svc__back{position:absolute;inset:0;background:rgba(2,4,8,.86);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .42s var(--ease)}
.svc.is-on .svc__back{opacity:1}
.svc__stage{position:relative;width:100%;height:100%;display:grid;place-items:center;
  padding:24px;perspective:1600px}
.svc__card{position:relative;width:min(880px,94vw);max-height:88vh;overflow-y:auto;border-radius:6px;
  background:linear-gradient(158deg,#0e141c,#05080c);transform-origin:50% 50%;will-change:transform,opacity;
  box-shadow:0 50px 130px -50px rgba(6,104,225,.85),inset 0 1px 0 rgba(255,255,255,.08)}
.svc__in{padding:clamp(30px,4vw,56px);opacity:0;transition:opacity .32s ease .16s}
.svc.is-on .svc__in{opacity:1}
.svc__x{position:absolute;right:16px;top:16px;z-index:2;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.07);color:#fff;font-size:14px;cursor:pointer;
  transition:background .3s var(--ease),transform .3s var(--ease)}
.svc__x:hover{background:var(--blue);transform:rotate(90deg)}
.svc__box{display:grid;place-items:center;width:74px;height:74px;margin-bottom:26px;border-radius:19px;
  background:linear-gradient(150deg,rgba(6,104,225,.4),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 18px 40px -18px rgba(6,104,225,.9)}
.svc__ic{width:40px;height:40px}
.svc h3{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(28px,4.2vw,44px);margin:0 0 20px}
.svc__body p{margin:0 0 26px;color:var(--muted);font-size:17px;line-height:1.6}
.svc__body ul{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:12px}
.svc__body li{position:relative;padding-left:26px;color:#c6d2de;font-size:15.5px}
.svc__body li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;
  background:var(--blue);transform:rotate(45deg)}


/* ---- process ---- */
.track{position:relative;height:2px;background:rgba(255,255,255,.07);margin:0 0 8px;border-radius:2px;overflow:hidden}
.track span{position:absolute;left:0;top:0;height:100%;width:0;background:var(--blue-hi);box-shadow:0 0 12px var(--blue-hi)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0;padding:26px 0 0}
.steps li{position:relative;padding:34px 30px 30px;border-radius:6px;overflow:hidden;
  background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
.steps li::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at 8% 0%,rgba(6,104,225,.2),transparent 70%)}
.steps li:hover{transform:translateY(-6px);background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 26px 60px -34px rgba(6,104,225,.9)}
.steps li:hover::before{opacity:1}
.steps li>*{position:relative;z-index:1}
.steps b{display:block;font-family:var(--display);font-size:64px;line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);transition:.5s var(--ease)}
.steps li:hover b{-webkit-text-stroke-color:var(--blue-hi)}
.steps h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:26px;margin:20px 0 8px;letter-spacing:.02em}
.steps p{margin:0;color:var(--muted);font-size:15.5px}
.steps__out{display:block;margin-top:18px;padding:2px 0 2px 13px;border-left:2px solid rgba(6,104,225,.55);
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#7f93a8}
.steps__note{margin:26px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}

/* ---- quote ---- */
.quote{position:relative;padding:170px 0;text-align:center;overflow:hidden;z-index:2}
.quote__glow{position:absolute;left:50%;top:50%;width:min(900px,110vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(6,104,225,.24),transparent 62%)}
.quote__idol{position:absolute;left:50%;top:50%;width:min(660px,100vw);transform:translate(-50%,-50%);
  filter:grayscale(1) brightness(.4) contrast(1.05);
  -webkit-mask-image:radial-gradient(44% 48% at 50% 46%,#000 28%,rgba(0,0,0,.5) 62%,transparent 90%);
  mask-image:radial-gradient(44% 48% at 50% 46%,#000 28%,rgba(0,0,0,.5) 62%,transparent 90%)}
.quote__tag{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--blue-hi);margin:0 0 26px}
.quote blockquote{position:relative;font-family:var(--display);font-weight:500;text-transform:uppercase;
  font-size:clamp(26px,4.2vw,56px);line-height:1.08;margin:0 auto;max-width:900px;color:rgba(255,255,255,.5)}
.quote__hi{display:block;margin-top:18px;color:#fff}
.quote__sign{position:relative;margin:28px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
.quote__sign::before{content:"";display:inline-block;width:26px;height:1px;margin:0 12px 4px 0;background:var(--blue-hi);vertical-align:middle}
.quote em{color:var(--blue-hi);text-shadow:0 0 44px rgba(0,128,251,.5)}

/* ---- faq ---- */
.ai{border-radius:3px;overflow:hidden;margin-bottom:6px;background:rgba(255,255,255,.03);transition:background .4s}
.ai.on{background:rgba(6,104,225,.1)}
.ai__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;background:none;border:0;
  cursor:pointer;text-align:left;color:#fff;padding:24px 24px;font-family:var(--display);font-weight:500;
  text-transform:uppercase;font-size:clamp(18px,2vw,24px);letter-spacing:.02em;transition:.4s var(--ease)}
.ai__q:hover,.ai.on .ai__q{color:var(--blue-hi)}
.ai__i{position:relative;flex:none;width:20px;height:20px}
.ai__i::before,.ai__i::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transform:translate(-50%,-50%);transition:.4s var(--ease)}
.ai__i::before{width:16px;height:1.5px}
.ai__i::after{width:1.5px;height:16px}
.ai.on .ai__i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.ai__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.ai__a p{margin:0 24px 24px;color:var(--muted);font-size:16px}
.ai__note{margin-top:-8px!important;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:#9ed2ff}
.ai__note b{color:#fff;font-weight:500}
.ai__ex{margin-top:-10px!important;padding-left:16px;border-left:2px solid rgba(6,104,225,.55);
  font-size:15px!important;color:#8ea1b4!important;font-style:italic}

/* ---- cta: кнопка загорается, когда до неё доходит линия ---- */
.cta--wait .btn--primary{background:transparent;border-color:rgba(255,255,255,.16);
  color:rgba(255,255,255,.45);box-shadow:none;transition:.55s var(--ease)}
.cta--wait .btn--primary::before{opacity:0}
.cta--wait .btn--primary:hover{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.8);box-shadow:none}
.cta--wait.cta--lit .btn--primary{background:var(--blue);border-color:var(--blue);color:#fff;
  box-shadow:0 20px 70px -16px rgba(6,104,225,.95);animation:ctaPop .7s var(--ease)}
.cta--wait.cta--lit .btn--primary::before{opacity:1}
@keyframes ctaPop{
  0%{transform:scale(.97)}
  45%{transform:scale(1.04);box-shadow:0 26px 90px -14px rgba(0,128,251,1)}
  100%{transform:scale(1)}}

/* ---- cta ---- */
.cta{position:relative;padding:150px 0 110px;text-align:center;overflow:hidden;z-index:2}
.cta__glow{position:absolute;left:50%;bottom:-45%;width:min(980px,120vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(6,104,225,.3),transparent 62%);animation:pulse 7s ease-in-out infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 20%,#000 42%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.45) 20%,#000 42%)}
@keyframes pulse{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.07)}}
.cta__in p{color:var(--muted);margin:20px 0 40px;font-size:18px}
.cta__in .h-xl{margin-bottom:44px}

/* ---- footer ---- */
.foot{padding:26px 0 30px;position:relative;z-index:2}
.foot__in{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.foot__in div{display:flex;gap:24px}
.foot a:hover{color:var(--blue-hi)}

/* ---- адаптив ---- */
@media (max-width:900px){
  .w-full{display:none}
  .w-short{display:inline}
  .chips{gap:5px;justify-content:space-between}
  .chips li{font-size:11.5px;letter-spacing:.04em;gap:6px;padding:10px 11px 10px 8px}
  .ic{width:15px;height:15px}
}
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .pains{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px), (max-width:1024px) and (orientation:portrait){
  /* --- база --- */
  body{font-size:16px}
  .wrap,.header{padding-left:20px;padding-right:20px}
  .nav,.header .btn--sm{display:none}
  .burger{display:flex}
  .grain{opacity:.03}
  .thread{display:none}
  .spend{display:flex;align-items:center;top:56px;right:16px;gap:7px;font-size:8.5px;letter-spacing:.16em;
    padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.82);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
  .spend b{font-size:12.5px}
  .stop__txt{display:none}
  .marq{display:none}
  .marq--hero{display:block;margin:auto -20px 4px;width:calc(100% + 40px);padding:16px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
  .marq--hero .marq__t span{font-size:19px;letter-spacing:.16em;color:rgba(255,255,255,.5)}
  .marq--hero .marq__t i{margin:0 20px;font-size:10px}
  .sec{padding:62px 0}
  .h-l{font-size:clamp(30px,8.4vw,44px);margin-bottom:24px}
  .knum{margin-bottom:10px}
  .fl{opacity:.22}
  .fl--blur,.fl.d{display:none}

  /* --- телефон: ничего дорогого во время скролла --- */
  [data-reveal]{transform:translateY(18px);filter:none;
    transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)}
  [data-reveal].in{filter:none}
  .header.stuck{backdrop-filter:none;background:rgba(0,0,0,.92)}
  .mmenu{backdrop-filter:none}
  .dust{display:none}
  .monument{will-change:auto}
  .mn-motes circle:nth-child(3n+2),.mn-motes circle:nth-child(3n+3){display:none}
  .mn-glow-wide{display:none}
  .halo{opacity:1}

  /* --- первый экран --- */
  .hero{padding:100px 0 74px;min-height:var(--heroH,100svh);align-items:stretch}
  .hero__in{display:flex;flex-direction:column}
  .hero__cue{display:block}
  .halo{right:auto;left:50%;top:56%;width:104vw;transform:translate(-50%,-50%)}
  .mn-grain{display:none}
  .monument{right:auto;left:50%;bottom:0;width:min(520px,96vw);height:64%;
    transform:translateX(-50%);opacity:.9;
    -webkit-mask-image:radial-gradient(74% 80% at 50% 54%,#000 44%,rgba(0,0,0,.66) 72%,rgba(0,0,0,.18) 90%,transparent 100%);
    mask-image:radial-gradient(74% 80% at 50% 54%,#000 44%,rgba(0,0,0,.66) 72%,rgba(0,0,0,.18) 90%,transparent 100%)}
  .hero::after{background:
    linear-gradient(180deg,#000 3%,rgba(0,0,0,.7) 17%,rgba(0,0,0,.45) 33%,rgba(0,0,0,.3) 52%,rgba(0,0,0,.62) 72%,rgba(0,0,0,.93) 88%,#000 100%),
    radial-gradient(120% 44% at 50% 11%,rgba(0,0,0,.78),transparent 70%)}
  .hero .h-xxl{font-size:clamp(40px,11.2vw,112px);text-align:center}
  .row{width:100%;max-width:var(--fitW,100%);margin:34px auto 0;gap:10px}
  .btn{width:100%;justify-content:center;padding:16px 22px}
  .cta__in .btn--lg{width:100%;max-width:var(--fitW,100%)}
  .btn--ghost{background:rgba(0,0,0,.62)}
  .chips{display:none}

  /* --- боли: две колонки --- */
  .pains{grid-template-columns:repeat(2,1fr);gap:7px}
  .pains li{font-size:13px;line-height:1.25;letter-spacing:.03em;padding:14px 12px;gap:9px;align-items:flex-start}
  .pains b{width:19px;height:19px;font-size:9px;margin-top:-1px}

  /* --- услуги: строкой, а не столбиком --- */
  .grid{grid-template-columns:1fr;gap:8px}
  .c{display:grid;grid-template-columns:auto 1fr;column-gap:15px;row-gap:3px;align-items:center;padding:16px 15px}
  .c{box-shadow:inset 0 1px 0 rgba(255,255,255,var(--ge)),0 14px 30px -24px rgba(6,104,225,var(--gs))}
  .grid .c:nth-child(1){--gx:5%;--gy:-34%;--gr:210px;--gi:.34;--ge:.13;--gs:1}
  .grid .c:nth-child(2){--gx:1%;--gy:-26%;--gr:230px;--gi:.27;--ge:.11;--gs:.85}
  .grid .c:nth-child(3){--gx:-3%;--gy:-20%;--gr:250px;--gi:.22;--ge:.1;--gs:.75}
  .grid .c:nth-child(4){--gx:-6%;--gy:-16%;--gr:265px;--gi:.19;--ge:.09;--gs:.65}
  .grid .c:nth-child(5){--gx:-9%;--gy:-13%;--gr:280px;--gi:.16;--ge:.08;--gs:.58}
  .grid .c:nth-child(6){--gx:-12%;--gy:-10%;--gr:295px;--gi:.14;--ge:.07;--gs:.5}
  .c__box{grid-row:span 2;width:48px;height:48px;margin:0;border-radius:13px}
  .c__ic{width:26px;height:26px}
  .c h3{font-size:19px;margin:0;align-self:end}
  .c__more{margin-top:3px;font-size:9px;gap:7px;align-self:start}
  .c__more i{width:17px;height:17px;font-size:11px}
  .svc__stage{padding:14px}
  .svc__card{width:100%;max-height:92vh}
  .svc__body p{font-size:15.5px;margin-bottom:20px}
  .svc__body li{font-size:14px}
  .svc__box{width:58px;height:58px;margin-bottom:18px;border-radius:15px}
  .svc__ic{width:31px;height:31px}
  .c p{font-size:13px;align-self:start}

  /* --- скрины --- */
  .shots{gap:12px}
  .shot,.shot--a,.shot--b{transform:none;padding:8px 8px 10px}
  .shot__bar{padding:2px 3px 8px;gap:5px}
  .shot__bar i{width:7px;height:7px}
  .shot__view{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .shot img{width:620px;max-width:none}
  .shots__joke{font-size:14px;margin-top:14px}

  /* --- шаги: номер слева --- */
  .steps{grid-template-columns:1fr;gap:8px;padding-top:18px}
  .steps li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:2px;padding:18px 15px}
  .steps b{grid-row:span 3;align-self:start;font-size:38px;line-height:.9}
  .steps h3{font-size:19px;margin:0}
  .steps p{font-size:13.5px}
  .steps__out{margin-top:9px;padding:1px 0 1px 9px;font-size:9.5px;letter-spacing:.08em}
  .steps__note{margin-top:16px;font-size:10.5px}

  /* --- цитата --- */
  .quote{padding:92px 0}
  .quote blockquote{font-size:clamp(22px,6.6vw,32px)}
  .quote__hi{margin-top:12px}
  .quote__tag{margin-bottom:18px}
  .quote__sign{margin-top:20px;font-size:10.5px}

  /* --- кто я и канал --- */
  .about__grid{gap:26px}
  .about__txt{font-size:16px}
  .about__txt--2{margin-top:14px}
  .links{gap:8px}
  .link{padding:18px 16px;gap:14px}
  .link__body b{font-size:20px}
  .link__body i{font-size:13.5px}
  .link__posts{margin-top:12px;gap:5px}
  .link__posts li{font-size:12.5px}
  .link__posts li:nth-child(n+4){display:none}
  .link__go{font-size:19px}

  /* --- вопросы --- */
  .ai__q{padding:18px 16px;font-size:16.5px;gap:14px}
  .ai__a p{margin:0 16px 18px;font-size:14.5px}
  .ai__note{font-size:12px;padding-top:11px}
  .ai__ex{font-size:13.5px!important;padding-left:12px}
  .ai__i{width:17px;height:17px}
  .ai__i::before{width:14px}
  .ai__i::after{height:14px}

  /* --- финал --- */
  .cta{padding:80px 0 60px}
  .cta__in p{font-size:16px;margin:14px 0 28px}
  .cta__in .h-xl{margin-bottom:30px}
  .btn--lg{padding:18px 26px;font-size:15px}
  .cta__mini{font-size:10.5px;margin-top:18px}

  /* --- низ --- */
  .dock{display:flex}
  .foot{padding:20px 0 92px}
  .foot__in{font-size:10px;gap:12px}
}

@media (max-width:400px){
  .pains li{font-size:12px;padding:12px 10px}
  .c h3{font-size:18px}
  .steps b{font-size:34px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;filter:none}
  .mn-motes,.mn-rays{display:none}
}

/* ================= СКРИНЫ ================= */
.shots{position:relative;display:flex;flex-direction:column;gap:26px;perspective:1600px}
.shot{position:relative;margin:0;padding:12px 12px 14px;border-radius:10px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.028));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 70px -40px rgba(0,0,0,.9);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:10px;
  background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 32%);opacity:.7}
.shot--a{transform:rotate(-1.1deg) translateX(-1.5%)}
.shot--b{transform:rotate(1deg) translateX(1.5%)}
.shots:hover .shot{transform:rotate(0) translateX(0)}
.shot:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 90px -44px rgba(6,104,225,.95);
  transform:rotate(0) translateX(0) translateY(-6px) scale(1.012)}
.shot__bar{display:flex;gap:6px;padding:4px 4px 12px}
.shot__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.14)}
.shot__bar i:first-child{background:rgba(255,59,48,.5)}
.shot__bar i:nth-child(2){background:rgba(255,255,255,.2)}
.shot__bar i:last-child{background:rgba(0,128,251,.55)}
.shot__view{display:block;border-radius:5px;overflow:hidden;background:#05070a}
.shot__hint{display:none}
.shot img{width:100%;display:block;filter:invert(1) hue-rotate(180deg) contrast(.9) brightness(.92)}
.shots__joke{margin:22px 0 0;font-size:15px;color:var(--dim)}

/* ================= КТО Я + КАНАЛ ================= */
.about__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch}
.about__me{position:relative}
.about__me .h-l{margin-bottom:26px}
.about__txt{max-width:470px;color:var(--muted);font-size:18px;margin:0}
.about__txt--2{margin-top:18px;color:var(--dim)}
.about__txt b{color:#fff}
.links{display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.link{display:flex;align-items:flex-start;gap:18px;padding:26px 24px;border-radius:6px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:.45s var(--ease)}
.link::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s;
  background:radial-gradient(420px circle at 12% 0%,rgba(6,104,225,.22),transparent 70%)}
.link:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 56px -30px rgba(6,104,225,.85)}
.link:hover::before{opacity:1}
.link>*{position:relative;z-index:1}
.link__n{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--dim);padding-top:5px}
.link__body{flex:1}
.link__body b{display:block;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:24px;letter-spacing:.02em}
.link__body i{display:block;margin-top:5px;font-style:normal;font-size:14.5px;color:var(--muted)}
.link__posts{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.link__posts li{position:relative;padding-left:16px;font-size:13.5px;color:var(--dim)}
.link__posts li::before{content:"◆";position:absolute;left:0;top:0;font-size:7px;color:var(--blue-hi);line-height:2.2}
.link__go{font-size:22px;color:var(--blue-hi);transition:transform .45s var(--ease)}
.link:hover .link__go{transform:translateX(6px)}
.link--cta{background:rgba(6,104,225,.14)}
.link--cta:hover{background:rgba(6,104,225,.22)}

/* ================= ЛИПКАЯ ПАНЕЛЬ (телефон) ================= */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:88;display:none;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.96) 40%);
  transform:translateY(120%);transition:transform .45s var(--ease)}
.dock.on{transform:none}
.dock a{flex:1;display:grid;place-items:center;padding:15px 10px;border-radius:4px;
  font-family:var(--display);font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.dock__ghost{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85)}
.dock__cta{flex:1.4;background:var(--blue);color:#fff;box-shadow:0 10px 34px -12px rgba(6,104,225,.9)}

@media (max-width:1024px){
  .nums{grid-template-columns:repeat(2,1fr)}
  .about__grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:760px), (max-width:1024px) and (orientation:portrait){
  .dock{display:flex}
  .foot{padding-bottom:96px}
  .nums{grid-template-columns:repeat(2,1fr);gap:10px}
  .num{padding:18px 16px}
  .num span{font-size:12px}
  .shots{gap:16px}
  .shot,.shot--a,.shot--b{transform:none;padding:9px 9px 10px}
  .shot__view{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .shot img{width:620px;max-width:none}
  .about__txt{font-size:16.5px}
  .link{padding:22px 18px;gap:14px}
  .link__body b{font-size:21px}
}


/* ================= ПОДСКАЗКА О ПРОКРУТКЕ СКРИНОВ ================= */
@media (max-width:760px), (max-width:1024px) and (orientation:portrait){
  .shot{position:relative}
  .shot__view{position:relative;overscroll-behavior-x:contain}
  .shot::after{content:"";position:absolute;top:8px;left:auto;right:8px;bottom:34px;width:52px;pointer-events:none;
    border-radius:0 5px 5px 0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.8));
    opacity:1;transition:opacity .45s var(--ease)}
  .shot.is-end::after{opacity:0}
  .shot__hint{display:flex;align-items:center;gap:9px;margin:10px 2px 0;
    font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
    transition:opacity .45s var(--ease)}
  .shot__hint i{font-style:normal;font-size:14px;line-height:1;color:var(--blue-hi);
    animation:hintNudge 1.9s var(--ease) infinite}
  .shot.is-end .shot__hint{opacity:.25}
  @keyframes hintNudge{0%,100%{transform:translateX(-3px)}50%{transform:translateX(4px)}}
}

/* ================= НОУТБУКИ И БОЛЬШИЕ МОНИТОРЫ ================= */
/* маленькие ноутбуки: монумент уже, заголовок мельче — иначе они наезжают друг на друга */
@media (min-width:761px) and (max-width:1279px) and (orientation:landscape){
  .wrap{padding:0 40px}
  .hero .h-xxl{font-size:clamp(42px,6.4vw,84px)}
  .hero{padding:clamp(112px,17vh,170px) 0 84px}
  .monument{right:.5%;width:min(360px,30vw);height:min(72%,620px)}
  .halo{right:6%;width:min(420px,34vw)}
  .chips li{padding:11px 18px 11px 14px;font-size:14px}
  .c{padding:30px 24px 26px}
  .c h3{font-size:22px}
}
@media (min-width:1280px) and (max-width:1439px){
  .hero .h-xxl{font-size:clamp(42px,6.6vw,92px)}
  .monument{right:1%;width:min(430px,33vw)}
  .halo{right:8%;width:min(470px,36vw)}
}
@media (min-width:1440px) and (max-width:1599px){
  .monument{right:2%;width:min(520px,36vw)}
  .halo{right:9%;width:min(500px,34vw)}
}
/* широкие мониторы: колонка контента растёт вместе с экраном */
@media (min-width:1600px){
  :root{--wrap:1320px}
  .monument{right:4%;width:min(600px,38vw)}
  .halo{right:10%;width:min(560px,34vw)}
}
@media (min-width:1920px){
  :root{--wrap:1420px}
  .hero .h-xxl{font-size:clamp(96px,6.7vw,128px)}
  .hero{padding:clamp(150px,22vh,240px) 0 110px}
  .monument{right:5%;width:min(660px,34vw);height:min(82%,880px)}
  .halo{right:11%;width:min(620px,32vw)}
  .sec{padding:clamp(110px,11vh,170px) 0}
  .h-l{font-size:clamp(46px,4.4vw,88px)}
}
@media (min-width:2400px){
  :root{--wrap:1560px}
  .hero .h-xxl{font-size:140px}
  .monument{right:7%;width:min(760px,30vw);height:min(84%,1000px)}
  .btn{padding:17px 34px;font-size:15px}
  .btn--lg{padding:24px 52px;font-size:19px}
  .chips li{font-size:16px;padding:15px 26px 15px 20px}
  .chips .ic{width:23px;height:23px}
  .halo{right:13%;width:min(680px,28vw)}
  body{font-size:18px}
}
/* низкие экраны ноутбуков: первый экран не должен упираться в края */
@media (min-width:761px) and (max-height:820px) and (orientation:landscape){
  .hero{padding-top:clamp(104px,15vh,150px);padding-bottom:70px;min-height:92svh}
  .monument{height:min(74%,600px);bottom:5%}
}

/* ---- планшеты вертикально: мобильная раскладка, но без растянутых элементов ---- */
@media (min-width:761px) and (max-width:1024px) and (orientation:portrait){
  .hero .h-xxl{font-size:clamp(56px,8.6vw,88px)}
  .hero .row{max-width:min(var(--fitW,100%),560px)}
  .cta__in .btn--lg{max-width:min(var(--fitW,100%),420px)}
  .monument{width:min(440px,60vw);height:42%;top:32%;bottom:auto}
  .halo{width:70vw;top:52%}
  .pains{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .about__txt{max-width:none}
  .marq--hero .marq__t span{font-size:22px}
}