/* ============================================================
   ТИРЕ — студия. Стили.
   ============================================================ */

:root{
  /* палитра (из фирменного стиля) */
  --ink:        #131313;
  --ink-2:      #1b1b1b;
  --ink-3:      #232323;
  --line:       rgba(244,244,242,.12);
  --line-soft:  rgba(244,244,242,.07);
  --paper:      #f4f4f2;
  --muted:      rgba(244,244,242,.52);
  --muted-2:    rgba(244,244,242,.34);

  --lime:       #dcf264;
  --pink:       #e9a0d6;
  --violet:     #5b2bef;
  --mint:       #a0ffd9;

  /* сетка и ритм */
  --pad:        clamp(20px, 5vw, 90px);
  --gap:        clamp(24px, 3vw, 48px);
  --sec:        clamp(110px, 15vh, 220px);

  /* движение */
  --e:          cubic-bezier(.22,1,.36,1);
  --e-in:       cubic-bezier(.7,0,.28,1);
  --t:          .9s var(--e);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Golos Text','Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.55;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

h1,h2,h3{
  font-family:'Onest','Golos Text',sans-serif;
  font-weight:600;
  letter-spacing:-.045em;
  line-height:.92;
  margin:0;
  text-wrap:balance;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--lime); color:var(--ink); }

/* тонкий шум поверх всего — «дорогая» текстура */
.grain{
  position:fixed; inset:-50%;
  z-index:60; pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%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(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}

/* ------------------------------------------------------------
   ЗАГРУЗЧИК
------------------------------------------------------------ */
.loader{
  position:fixed; inset:0; z-index:100;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--pad);
  transition:clip-path 1.1s var(--e) .15s;
  clip-path:inset(0 0 0 0);
}
.loader.is-done{ clip-path:inset(0 0 100% 0); pointer-events:none; }
.loader__inner{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:26px;
}
.loader__mark{ display:flex; align-items:center; }
.loader__dash{
  display:block; height:6px; width:0; background:var(--lime); border-radius:99px;
  animation:dashGrow 1.4s var(--e) forwards;
}
@keyframes dashGrow{ to{ width:min(46vw,520px);} }
.loader__count{
  font-family:'Onest',sans-serif; font-weight:600;
  font-size:clamp(46px,9vw,120px); line-height:.85; letter-spacing:-.05em;
  display:flex; align-items:baseline; gap:2px;
}
.loader__pct{ font-size:.32em; color:var(--muted); letter-spacing:0; }
.loader__bar{ height:1px; background:var(--line-soft); overflow:hidden; }
.loader__bar i{ display:block; height:100%; width:0; background:var(--paper); }

/* ------------------------------------------------------------
   КУРСОР
------------------------------------------------------------ */
.cursor{ position:fixed; inset:0; z-index:90; pointer-events:none; display:none; }
@media (hover:hover) and (pointer:fine){ .cursor{ display:block; } }
.cursor__dot,.cursor__ring{
  position:absolute; top:0; left:0;
  transform:translate3d(-50%,-50%,0);
  border-radius:99px;
}
.cursor__dot{ width:6px; height:6px; background:var(--paper); margin:-3px 0 0 -3px; }
.cursor__ring{
  width:36px; height:36px; margin:-18px 0 0 -18px;
  border:1px solid rgba(244,244,242,.34);
  display:grid; place-items:center;
  transition:width .45s var(--e),height .45s var(--e),margin .45s var(--e),
             background .45s var(--e),border-color .45s var(--e);
}
.cursor__label{
  font-size:11px; letter-spacing:.02em; color:var(--ink);
  opacity:0; transform:scale(.7); transition:opacity .3s,transform .45s var(--e);
  white-space:nowrap; font-weight:500;
}
.cursor.is-hover .cursor__ring{
  width:64px; height:64px; margin:-32px 0 0 -32px;
  background:var(--lime); border-color:transparent;
}
.cursor.is-hover .cursor__dot{ opacity:0; }
.cursor.is-label .cursor__ring{ width:92px; height:92px; margin:-46px 0 0 -46px; }
.cursor.is-label .cursor__label{ opacity:1; transform:scale(1); }

/* ------------------------------------------------------------
   ШАПКА
------------------------------------------------------------ */
.head{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(16px,2vw,26px) var(--pad);
  mix-blend-mode:normal;
  transition:transform .8s var(--e),opacity .5s;
}
.head.is-hidden{ transform:translateY(-120%); opacity:0; }

.brand{ display:flex; align-items:center; gap:10px; }
.brand__word{
  font-family:'Onest',sans-serif; font-weight:600;
  font-size:clamp(19px,1.6vw,24px); letter-spacing:-.05em;
}
.brand__dash{
  height:3px; width:22px; background:var(--lime); border-radius:99px;
  transition:width .6s var(--e);
}
.brand:hover .brand__dash{ width:48px; }

.burger{
  display:flex; align-items:center; gap:12px;
  padding:9px 16px 9px 13px; border-radius:99px;
  border:1px solid var(--line);
  background:rgba(19,19,19,.5); backdrop-filter:blur(14px);
  transition:background .5s var(--e),border-color .5s var(--e),color .4s;
}
.burger:hover{ background:var(--paper); color:var(--ink); border-color:transparent; }
.burger__lines{ display:grid; gap:4px; width:18px; }
.burger__lines i{
  display:block; height:2px; background:currentColor; border-radius:99px;
  transition:width .5s var(--e),transform .5s var(--e),opacity .3s;
}
.burger__lines i:nth-child(1){ width:18px; }
.burger__lines i:nth-child(2){ width:12px; }
.burger__lines i:nth-child(3){ width:16px; }
.burger:hover .burger__lines i{ width:18px; }
/* оба слова лежат в одной ячейке грида: ширина кнопки берётся по длинному
   («закрыть»), поэтому оно не обрезается и кнопка не прыгает при открытии */
.burger__txt{ display:grid; overflow:hidden; font-size:13.5px; line-height:1.25; }
.burger__txt span{
  grid-area:1 / 1; display:block; white-space:nowrap;
  transition:transform .55s var(--e);
}
.burger__txt [data-close]{ transform:translateY(100%); }
body.menu-open .burger__txt [data-open]{ transform:translateY(-100%); }
body.menu-open .burger__txt [data-close]{ transform:none; }
body.menu-open .burger__lines i:nth-child(1){ transform:translateY(6px) rotate(45deg); width:18px; }
body.menu-open .burger__lines i:nth-child(2){ opacity:0; transform:scaleX(0); }
body.menu-open .burger__lines i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); width:18px; }

/* ------------------------------------------------------------
   РЕЛЬС-НАВИГАЦИЯ ИЗ ТИРЕ (нестандартная навигация)
------------------------------------------------------------ */
.rail{
  position:fixed; z-index:65;
  right:clamp(14px,2vw,30px); top:50%; transform:translateY(-50%);
  display:none; flex-direction:column; align-items:flex-end; gap:14px;
  opacity:0; transition:opacity .8s var(--e);
}
@media (min-width:1024px){ .rail{ display:flex; } }
.rail.is-ready{ opacity:1; }
body.menu-open .rail{ opacity:0; pointer-events:none; }

.rail__item{
  display:flex; align-items:center; gap:14px;
  cursor:pointer; background:none; border:0; padding:0;
}
.rail__label{
  font-size:12px; letter-spacing:.02em; color:var(--muted);
  opacity:0; transform:translateX(10px);
  transition:opacity .45s var(--e),transform .55s var(--e),color .3s;
  white-space:nowrap;
}
.rail__dash{
  display:block; height:2px; width:18px; border-radius:99px;
  background:rgba(244,244,242,.28);
  transition:width .6s var(--e),background .5s var(--e),height .4s var(--e);
}
.rail__item:hover .rail__label{ opacity:1; transform:none; color:var(--paper); }
.rail__item:hover .rail__dash{ width:34px; background:var(--paper); }
.rail__item.is-active .rail__dash{ width:46px; height:3px; background:var(--lime); }
.rail__item.is-active .rail__label{ opacity:1; transform:none; color:var(--paper); }

/* ------------------------------------------------------------
   ОВЕРЛЕЙ-МЕНЮ
------------------------------------------------------------ */
.menu{
  position:fixed; inset:0; z-index:69;
  pointer-events:none; visibility:hidden;
}
.menu.is-open{ pointer-events:auto; visibility:visible; }
.menu__bg{ position:absolute; inset:0; display:flex; }
.menu__bg i{
  flex:1; background:var(--ink-2);
  transform:translateY(-101%);
  transition:transform .85s var(--e);
}
.menu__bg i:nth-child(1){ transition-delay:0s; }
.menu__bg i:nth-child(2){ transition-delay:.05s; }
.menu__bg i:nth-child(3){ transition-delay:.1s; }
.menu__bg i:nth-child(4){ transition-delay:.15s; }
.menu__bg i:nth-child(5){ transition-delay:.2s; }
.menu.is-open .menu__bg i{ transform:none; }
.menu.is-closing .menu__bg i{ transform:translateY(101%); }

.menu__body{
  position:relative; height:100%;
  padding:calc(var(--pad) + 60px) var(--pad) var(--pad);
  display:flex; flex-direction:column; justify-content:space-between; gap:40px;
}
.menu__list{ display:flex; flex-direction:column; gap:clamp(2px,.6vh,10px); }
.menu__list li{ overflow:hidden; }
.menu__list a{
  position:relative; display:flex; align-items:baseline; gap:clamp(14px,2vw,34px);
  font-family:'Onest',sans-serif; font-weight:600;
  font-size:clamp(42px,9.2vw,132px); line-height:1.02; letter-spacing:-.05em;
  transform:translateY(105%);
  transition:transform .9s var(--e),color .5s var(--e);
  width:max-content;
}
.menu.is-open .menu__list a{ transform:none; }
.menu__list li:nth-child(1) a{ transition-delay:.26s; }
.menu__list li:nth-child(2) a{ transition-delay:.32s; }
.menu__list li:nth-child(3) a{ transition-delay:.38s; }
.menu__list li:nth-child(4) a{ transition-delay:.44s; }
.menu__list li:nth-child(5) a{ transition-delay:.50s; }
.menu.is-closing .menu__list a{ transform:translateY(-105%); transition-duration:.5s; transition-delay:0s; }
.menu__list a::before{
  content:attr(data-n);
  font-family:'Golos Text',sans-serif; font-weight:500;
  font-size:clamp(11px,.9vw,14px); letter-spacing:.01em;
  color:var(--muted-2); align-self:flex-start; padding-top:.7em;
  transition:color .4s;
}
.menu__list a::after{
  content:''; position:absolute; left:0; right:0; bottom:.18em; height:clamp(3px,.5vw,7px);
  background:currentColor; border-radius:99px;
  transform:scaleX(0); transform-origin:left; opacity:.9;
  transition:transform .6s var(--e);
}
.menu__list a:hover::after{ transform:scaleX(1); }
.menu__list a[data-c="lime"]:hover{ color:var(--lime); }
.menu__list a[data-c="pink"]:hover{ color:var(--pink); }
.menu__list a[data-c="violet"]:hover{ color:#8f6cff; }
.menu__list a[data-c="mint"]:hover{ color:var(--mint); }

.menu__side{
  display:grid; gap:30px; grid-template-columns:1fr;
  border-top:1px solid var(--line); padding-top:26px;
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--e) .55s,transform .8s var(--e) .55s;
}
@media (min-width:760px){ .menu__side{ grid-template-columns:1fr 1fr; max-width:820px; } }
.menu.is-open .menu__side{ opacity:1; transform:none; }
.menu.is-closing .menu__side{ opacity:0; transition-delay:0s; }
.menu__col{ display:flex; flex-direction:column; gap:7px; }
.menu__link{ font-size:clamp(16px,1.5vw,21px); width:max-content; position:relative; }
.menu__link::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--e);
}
.menu__link:hover::after{ transform:scaleX(1); transform-origin:left; }
.menu__time{ font-family:'Onest',sans-serif; font-size:clamp(16px,1.5vw,21px); }
.menu__note{ color:var(--muted); font-size:14px; }

.lbl{
  font-size:13.5px; letter-spacing:-.01em;
  color:var(--muted-2); margin-bottom:6px;
}

/* ------------------------------------------------------------
   ОБЩИЕ ЭЛЕМЕНТЫ
------------------------------------------------------------ */
/* подпись раздела — тире плюс слово в нижнем регистре.
   Без капслока, разрядки и номерных кружков. */
.sec-label{
  display:flex; align-items:center; gap:12px;
  font-size:clamp(14px,1.05vw,16px); letter-spacing:-.012em;
  color:var(--muted);
  margin-bottom:clamp(26px,4vw,56px);
}
.sec-label::before{
  content:''; flex:0 0 auto;
  width:clamp(22px,2.2vw,38px); height:2px; border-radius:99px;
  background:var(--lime);
}

.h-big{
  font-size:clamp(38px,6.4vw,104px);
  max-width:16ch;
}

.btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:16px 26px; border-radius:99px;
  font-size:15px; font-weight:500; letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden;
  transition:color .45s var(--e),transform .5s var(--e);
  will-change:transform;
}
.btn svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .55s var(--e); }
.btn:hover svg{ transform:translateX(5px); }
.btn span{ position:relative; z-index:2; }
.btn svg{ position:relative; z-index:2; }
.btn::before{
  content:''; position:absolute; inset:0; border-radius:99px; z-index:1;
  transition:transform .6s var(--e);
}
.btn--lime{ color:var(--ink); }
.btn--lime::before{ background:var(--lime); }
.btn--lime::after{
  content:''; position:absolute; inset:0; z-index:1; border-radius:99px; background:var(--paper);
  transform:translateY(101%); transition:transform .6s var(--e);
}
.btn--lime:hover::after{ transform:none; }
.btn--big{ padding:21px 34px; font-size:16.5px; }
.btn--ghost{ border:1px solid var(--line); color:var(--paper); }
.btn--ghost::before{ background:var(--paper); transform:translateY(101%); }
.btn--ghost:hover{ color:var(--ink); }
.btn--ghost:hover::before{ transform:none; }

/* появление */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--e),transform 1.05s var(--e);
}
[data-reveal].in{ opacity:1; transform:none; }

.split-line{ display:block; overflow:hidden; }
.split-line > span{
  display:block;
  transform:translateY(102%);
  transition:transform 1.05s var(--e);
}
.split-line.in > span{ transform:none; }

/* ------------------------------------------------------------
   ГЕРОЙ
------------------------------------------------------------ */
.hero{
  position:relative; min-height:100svh;
  padding:clamp(96px,14vh,150px) var(--pad) var(--pad);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(90vw,1000px); aspect-ratio:1;
  top:-22%; right:-14%;
  background:radial-gradient(circle at 50% 50%,rgba(91,43,239,.32),rgba(91,43,239,0) 62%);
  filter:blur(30px);
}
.hero__grid{ position:relative; z-index:1; }

.hero__eyebrow{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--muted); letter-spacing:.01em;
  margin-bottom:clamp(24px,4vh,48px);
}
.tick{ width:26px; height:2px; background:var(--lime); border-radius:99px; }

.hero__title{
  font-size:clamp(56px,11vw,190px);
  line-height:.86;
  letter-spacing:-.055em;
  margin-bottom:clamp(30px,4.6vh,62px);
}
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line--pill{
  display:flex; align-items:center; gap:clamp(10px,1.4vw,28px);
  overflow:visible; flex-wrap:wrap;
}
.hero__title .line__in{
  display:inline-block;
  transform:translateY(102%);
  transition:transform 1.15s var(--e);
}
.is-loaded .hero__title .line__in{ transform:none; }
.hero__title .line:nth-child(1) .line__in{ transition-delay:.1s; }
.hero__title .line:nth-child(2) .line__in{ transition-delay:.2s; }
.hero__title .line:nth-child(3) .line__in{ transition-delay:.3s; }
.hero__and{ color:var(--muted-2); }

.hero__rule{
  display:inline-block; vertical-align:middle;
  height:clamp(6px,1vw,16px); width:0; border-radius:99px; background:var(--mint);
  margin-left:clamp(14px,2vw,36px);
  transition:width 1.3s var(--e) .75s;
}
.is-loaded .hero__rule{ width:clamp(60px,16vw,300px); }

/* ротатор-плашка */
.rotator{
  display:inline-flex; align-items:center;
  padding:.1em clamp(14px,1.6vw,34px) .16em;
  border-radius:clamp(14px,1.6vw,30px);
  background:var(--lime); color:var(--ink);
  height:1.06em; overflow:hidden;
  transition:background .7s var(--e),width .8s var(--e);
  transform:scale(.86); opacity:0;
  transition:transform 1s var(--e) .38s,opacity .7s var(--e) .38s,background .7s var(--e),width .8s var(--e);
}
.is-loaded .rotator{ transform:none; opacity:1; }
.rotator[data-c="lime"]{ background:var(--lime); color:var(--ink); }
.rotator[data-c="pink"]{ background:var(--pink); color:var(--ink); }
.rotator[data-c="violet"]{ background:var(--violet); color:var(--paper); }
.rotator[data-c="mint"]{ background:var(--mint); color:var(--ink); }
.rotator__box{ position:relative; display:block; height:1.06em; }
.rotator__item{
  display:block; position:absolute; top:0; left:0; white-space:nowrap;
  transform:translateY(105%); opacity:0;
  transition:transform .85s var(--e),opacity .5s;
}
.rotator__item.is-on{ transform:none; opacity:1; position:relative; }
.rotator__item.is-out{ transform:translateY(-105%); opacity:0; }

.hero__foot{
  display:grid; gap:clamp(26px,3vw,60px);
  grid-template-columns:1fr;
  align-items:end;
  padding-top:clamp(18px,3vh,34px);
  border-top:1px solid var(--line-soft);
}
@media (min-width:900px){
  .hero__foot{ grid-template-columns:minmax(0,42ch) 1fr; }
  .hero__cta{ justify-self:end; }
}
.hero__lead{ color:var(--muted); font-size:clamp(15px,1.15vw,18px); max-width:46ch; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; }

/* ------------------------------------------------------------
   БЕГУЩАЯ СТРОКА
------------------------------------------------------------ */
.ticker{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:clamp(14px,1.6vw,22px) 0;
  overflow:hidden; white-space:nowrap;
}
.ticker__track{ display:flex; width:max-content; animation:tick 38s linear infinite; }
.ticker__track span{
  font-family:'Onest',sans-serif; font-weight:500;
  font-size:clamp(26px,3.6vw,58px); letter-spacing:-.04em;
  color:var(--muted-2); padding-right:.4em;
}
.ticker__track i{ color:var(--lime); font-style:normal; padding:0 .35em; }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ------------------------------------------------------------
   ЦИФРЫ
------------------------------------------------------------ */
.stats{ padding:clamp(60px,9vw,130px) var(--pad); }
.stats__row{
  display:grid; gap:clamp(28px,3vw,20px);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:860px){ .stats__row{ grid-template-columns:repeat(4,1fr); } }
.stat{ display:flex; flex-direction:column; gap:8px; }
.stat:nth-child(2){ transition-delay:.08s; }
.stat:nth-child(3){ transition-delay:.16s; }
.stat:nth-child(4){ transition-delay:.24s; }
.stat__num{
  font-family:'Onest',sans-serif; font-weight:600;
  font-size:clamp(52px,7.4vw,124px); line-height:.85; letter-spacing:-.06em;
}
.stat:nth-child(1) .stat__num{ color:var(--lime); }
.stat:nth-child(2) .stat__num{ color:var(--pink); }
.stat:nth-child(3) .stat__num{ color:var(--mint); }
.stat__lbl{ color:var(--muted); font-size:14px; }

/* ------------------------------------------------------------
   МАНИФЕСТ
------------------------------------------------------------ */
.manifest{ padding:var(--sec) var(--pad); }
.manifest__txt{
  font-size:clamp(30px,5vw,78px);
  line-height:1.02; letter-spacing:-.045em;
  max-width:16ch;
  margin-bottom:clamp(34px,5vw,64px);
}

/* пары «слово — слово»: тире растягивается на всю свободную ширину,
   поэтому связь видна глазом, а не вычитывается */
.pairs{ border-top:1px solid var(--line); margin-bottom:clamp(30px,4vw,52px); }
.pair{
  display:flex; align-items:center; gap:clamp(14px,2vw,32px);
  padding:clamp(16px,2.2vw,30px) 0;
  border-bottom:1px solid var(--line);
}
.pair:nth-child(2){ transition-delay:.1s; }
.pair:nth-child(3){ transition-delay:.2s; }
.pair span{
  font-family:'Onest',sans-serif; font-weight:600;
  font-size:clamp(22px,3.4vw,54px); line-height:1;
  letter-spacing:-.045em; white-space:nowrap;
}
.pair span:last-child{ text-align:right; }
.pair__dash{
  flex:1 1 auto; min-width:24px;
  height:clamp(3px,.42vw,6px); border-radius:99px;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1.1s var(--e) .15s;
}
.pair__dash--lime{ background:var(--lime); }
.pair__dash--pink{ background:var(--pink); }
.pair__dash--mint{ background:var(--mint); }
.pair.in .pair__dash{ transform:none; }

.manifest__note{
  color:var(--muted);
  font-size:clamp(17px,1.95vw,30px);
  line-height:1.35; letter-spacing:-.02em;
  /* ширину не режем: фраза короткая и на десктопе укладывается в строку.
     balance — чтобы там, где перенос всё-таки нужен, не повисало одно слово */
  text-wrap:balance;
  margin-bottom:clamp(56px,8vw,120px);
}

@media (max-width:520px){
  .pair{ gap:12px; }
  .pair span{ font-size:clamp(19px,5.4vw,26px); }
}
.manifest__cards{
  display:grid; gap:clamp(14px,1.4vw,20px);
  grid-template-columns:1fr;
}
@media (min-width:820px){ .manifest__cards{ grid-template-columns:repeat(3,1fr); } }
.mcard{
  position:relative; overflow:hidden;
  padding:clamp(26px,2.6vw,42px);
  border-radius:clamp(20px,2vw,32px);
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  min-height:clamp(240px,26vw,330px);
  display:flex; flex-direction:column;
  transition:transform .7s var(--e),background .6s var(--e),border-color .6s;
  will-change:transform;
}
.mcard:nth-child(2){ transition-delay:.08s; }
.mcard:nth-child(3){ transition-delay:.16s; }
.mcard__n{
  font-size:12.5px; letter-spacing:.01em; color:var(--muted-2); margin-bottom:auto;
  transition:color .5s;
}
.mcard h3{
  font-size:clamp(22px,2.1vw,32px); margin-bottom:12px; letter-spacing:-.035em;
  transition:color .5s;
}
.mcard p{ color:var(--muted); font-size:15px; max-width:34ch; transition:color .5s; }
.mcard::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  transform:translateY(101%); transition:transform .75s var(--e);
}
.mcard--lime::before{ background:var(--lime); }
.mcard--pink::before{ background:var(--pink); }
.mcard--violet::before{ background:var(--violet); }
.mcard > *{ position:relative; z-index:2; }
.mcard:hover::before{ transform:none; }
.mcard--lime:hover,.mcard--pink:hover{ color:var(--ink); border-color:transparent; }
.mcard--lime:hover p,.mcard--pink:hover p{ color:rgba(19,19,19,.72); }
.mcard--lime:hover .mcard__n,.mcard--pink:hover .mcard__n{ color:rgba(19,19,19,.55); }
.mcard--violet:hover{ border-color:transparent; }
.mcard--violet:hover p{ color:rgba(244,244,242,.78); }
.mcard--violet:hover .mcard__n{ color:rgba(244,244,242,.6); }

/* ------------------------------------------------------------
   УСЛУГИ — ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ
------------------------------------------------------------ */
.hscroll{ position:relative; }
.hscroll__stick{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
  padding:clamp(90px,12vh,140px) 0 clamp(48px,7vh,80px);
}
.hscroll__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:0 var(--pad); margin-bottom:clamp(22px,3vh,44px);
}
.hscroll__head .sec-label{ margin-bottom:0; }
.hscroll__hint{ font-size:13.5px; letter-spacing:-.01em; color:var(--muted-2); }

.hscroll__track{
  display:flex; gap:clamp(14px,1.4vw,22px);
  padding:0 var(--pad);
  width:max-content;
  will-change:transform;
}
.svc{
  width:clamp(285px,28vw,400px);
  flex:0 0 auto;
  background:var(--ink-2);
  border:1px solid var(--line-soft);
  border-radius:clamp(20px,2vw,30px);
  padding:clamp(26px,2.4vw,40px);
  display:flex; flex-direction:column;
  min-height:clamp(400px,54vh,560px);
  position:relative; overflow:hidden;
  transition:border-color .5s;
}
.svc__n{
  font-family:'Onest',sans-serif; font-weight:600;
  font-size:clamp(40px,4.4vw,74px); line-height:.8; letter-spacing:-.06em;
  color:rgba(244,244,242,.11);
  margin-bottom:auto;
  transition:color .6s var(--e);
}
.svc--lime .svc__n{ color:rgba(220,242,100,.24); }
.svc--pink .svc__n{ color:rgba(233,160,214,.26); }
.svc--violet .svc__n{ color:rgba(140,110,255,.4); }
.svc--mint .svc__n{ color:rgba(160,255,217,.24); }
.svc__t{ font-size:clamp(23px,2.2vw,34px); margin:26px 0 12px; letter-spacing:-.035em; }
.svc__d{ color:var(--muted); font-size:14.5px; margin-bottom:22px; }
/* пункты списка отбиты тире — тем же знаком, что и в названии студии */
.svc__list{ display:flex; flex-direction:column; gap:9px; margin-bottom:24px; }
.svc__list li{
  position:relative; padding-left:22px;
  font-size:14px; line-height:1.4; color:var(--paper);
}
.svc__list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:12px; height:2px; border-radius:99px; background:var(--lime);
}
.svc__price{
  font-size:13px; color:var(--muted-2); padding-top:16px;
  border-top:1px solid var(--line-soft); margin-top:auto;
}
.svc--lime{ border-color:rgba(220,242,100,.22); }
.svc--pink{ border-color:rgba(233,160,214,.22); }
.svc--violet{ background:var(--violet); border-color:transparent; }
.svc--violet .svc__d{ color:rgba(244,244,242,.76); }
.svc--pink .svc__list li::before{ background:var(--pink); }
.svc--mint .svc__list li::before{ background:var(--mint); }
.svc--violet .svc__list li::before{ background:var(--paper); }
.svc--violet .svc__price{ color:rgba(244,244,242,.62); border-color:rgba(244,244,242,.2); }
.svc--mint{ border-color:rgba(160,255,217,.22); }
.svc--end{
  background:transparent;
  border:1px dashed rgba(244,244,242,.2);
  justify-content:flex-end;
}
.svc--end .svc__n{ color:var(--muted-2); font-size:clamp(30px,3vw,52px); }
.svc--end .btn{ align-self:flex-start; margin-top:8px; }

.hscroll__bar{
  margin:clamp(26px,4vh,46px) var(--pad) 0;
  height:2px; background:var(--line-soft); border-radius:99px; overflow:hidden;
}
.hscroll__bar i{
  display:block; height:100%; width:100%; background:var(--lime); border-radius:99px;
  transform:scaleX(.14); transform-origin:left;
}

@media (max-width:760px){
  .hscroll__stick{ position:static; height:auto; padding:var(--sec) 0; }
  .hscroll__track{ flex-direction:column; width:auto; transform:none !important; }
  .svc{ width:auto; min-height:0; }
  .hscroll__bar{ display:none; }
  .hscroll__hint{ display:none; }
}

/* ------------------------------------------------------------
   РАБОТЫ
------------------------------------------------------------ */
.work{ padding:var(--sec) var(--pad); }
.work__head{ margin-bottom:clamp(40px,6vw,80px); }
/* номера строк считает CSS: добавили кейс сверху — нумерация сама сдвинулась */
.work__list{ border-top:1px solid var(--line); counter-reset:work; }

.wrow{
  counter-increment:work;
  position:relative; display:grid; align-items:center;
  grid-template-columns:auto 1fr auto;
  gap:14px 20px;
  padding:clamp(22px,3vw,42px) 0;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  transition:padding .6s var(--e);
}
.wrow::before{
  content:''; position:absolute; inset:0; z-index:0;
  transform:translateY(101%); transition:transform .7s var(--e);
}
.wrow[data-c="lime"]::before{ background:var(--lime); }
.wrow[data-c="pink"]::before{ background:var(--pink); }
.wrow[data-c="violet"]::before{ background:var(--violet); }
.wrow[data-c="mint"]::before{ background:var(--mint); }
.wrow:hover::before{ transform:none; }
.wrow > *{ position:relative; z-index:1; transition:color .5s var(--e),transform .7s var(--e); }
.wrow:hover{ padding-left:clamp(14px,2vw,34px); padding-right:clamp(14px,2vw,34px); }
.wrow[data-c="lime"]:hover,.wrow[data-c="pink"]:hover,.wrow[data-c="mint"]:hover{ color:var(--ink); }

.wrow__n{ font-size:12.5px; letter-spacing:.01em; color:var(--muted-2); align-self:start; padding-top:.7em; }
.wrow__n::before{ content:counter(work,decimal-leading-zero); }
.wrow__t{
  font-family:'Onest',sans-serif; font-weight:600;
  font-size:clamp(30px,4.4vw,66px); line-height:.98; letter-spacing:-.045em;
  grid-column:2;
  overflow-wrap:break-word; hyphens:manual;   /* длинные названия переносятся, а не вылезают */
}
.wrow__d{ grid-column:2; color:var(--muted); font-size:15px; }
.wrow[data-c="lime"]:hover .wrow__d,.wrow[data-c="pink"]:hover .wrow__d,.wrow[data-c="mint"]:hover .wrow__d{ color:rgba(19,19,19,.66); }
.wrow[data-c="violet"]:hover .wrow__d{ color:rgba(244,244,242,.75); }
.wrow__tag{ display:none; color:var(--muted); font-size:13px; }
.wrow__y{ font-size:13px; color:var(--muted-2); }
.wrow[data-c="lime"]:hover .wrow__y,.wrow[data-c="pink"]:hover .wrow__y,.wrow[data-c="mint"]:hover .wrow__y{ color:rgba(19,19,19,.6); }
.wrow__ar{ display:none; }
.wrow__ar svg{ width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

@media (min-width:900px){
  .wrow{ grid-template-columns:56px minmax(0,1.45fr) minmax(0,.55fr) 74px 40px; gap:22px; }
  .wrow__n{ align-self:center; padding-top:0; }
  .wrow__t{ grid-column:2; }
  .wrow__d{ display:none; }
  .wrow__tag{ display:block; grid-column:3; }
  .wrow__ar{ display:block; opacity:0; transform:translateX(-14px); }
  .wrow:hover .wrow__ar{ opacity:1; transform:none; }
  .wrow[data-c="lime"]:hover .wrow__tag,.wrow[data-c="pink"]:hover .wrow__tag,.wrow[data-c="mint"]:hover .wrow__tag{ color:rgba(19,19,19,.66); }
}

/* ------------------------------------------------------------
   ПРОЦЕСС
------------------------------------------------------------ */
.proc{
  padding:var(--sec) var(--pad);
  display:grid; gap:clamp(40px,5vw,80px);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:960px){ .proc{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); } }
@media (min-width:960px){
  .proc__left{ position:sticky; top:clamp(120px,18vh,200px); }
}
.proc__title{ font-size:clamp(34px,4.6vw,76px); margin-bottom:24px; max-width:12ch; }
.proc__note{ color:var(--muted); max-width:38ch; font-size:15px; }

.proc__steps{ display:flex; flex-direction:column; }
.step{
  position:relative;
  padding:clamp(26px,3vw,40px) 0 clamp(26px,3vw,40px) clamp(18px,2vw,34px);
  border-top:1px solid var(--line);
  opacity:.36;
  transition:opacity .7s var(--e);
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step::before{
  content:''; position:absolute; left:0; top:clamp(30px,3.2vw,46px);
  width:0; height:3px; border-radius:99px; background:var(--lime);
  transition:width .8s var(--e);
}
.step.is-on{ opacity:1; }
.step.is-on::before{ width:clamp(10px,1.2vw,18px); }
.step__d{
  display:inline-block; font-size:13.5px; letter-spacing:-.01em;
  color:var(--muted-2); margin-bottom:12px;
}
.step h3{ font-size:clamp(24px,2.6vw,40px); margin-bottom:10px; letter-spacing:-.035em; }
.step p{ color:var(--muted); max-width:48ch; font-size:15px; }

/* ------------------------------------------------------------
   FAQ
------------------------------------------------------------ */
.faq{ padding:0 var(--pad) var(--sec); }
.faq__list{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(22px,2.4vw,34px) 0;
  font-family:'Onest',sans-serif; font-weight:500;
  font-size:clamp(19px,2.2vw,32px); letter-spacing:-.035em;
  transition:color .4s,padding-left .6s var(--e);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--lime); padding-left:clamp(8px,1vw,16px); }
.qa summary i{
  position:relative; flex:0 0 auto; width:16px; height:16px;
}
.qa summary i::before,.qa summary i::after{
  content:''; position:absolute; left:50%; top:50%; background:currentColor; border-radius:99px;
  transform:translate(-50%,-50%); transition:transform .5s var(--e),opacity .4s;
}
.qa summary i::before{ width:16px; height:2px; }
.qa summary i::after{ width:2px; height:16px; }
.qa[open] summary i::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.qa[open] summary{ color:var(--lime); }
.qa > div{ overflow:hidden; }
.qa > div p{
  color:var(--muted); max-width:62ch; font-size:15.5px;
  padding-bottom:clamp(22px,2.4vw,32px);
}

/* ------------------------------------------------------------
   КОНТАКТ
------------------------------------------------------------ */
.cta{
  position:relative; overflow:hidden;
  padding:var(--sec) var(--pad);
  border-top:1px solid var(--line);
}
.cta__glow{
  position:absolute; z-index:0; pointer-events:none;
  width:min(110vw,1200px); aspect-ratio:1; left:-20%; bottom:-60%;
  background:radial-gradient(circle at 50% 50%,rgba(220,242,100,.14),rgba(220,242,100,0) 60%);
  filter:blur(20px);
}
/* :not(...) обязателен — иначе правило перебивает absolute у подсветки
   (одинаковая специфичность, а это правило ниже по файлу) */
.cta > *:not(.cta__glow){ position:relative; z-index:1; }
.cta__title{
  font-size:clamp(50px,11vw,180px); line-height:.88; letter-spacing:-.055em;
  margin-bottom:clamp(48px,7vw,96px);
}
.cta__title .line{ display:block; overflow:hidden; }
.cta__title .line:nth-child(2){ display:flex; align-items:center; gap:clamp(10px,1.4vw,26px); flex-wrap:wrap; overflow:visible; }
.cta__title .line__in{ display:inline-block; transform:translateY(102%); transition:transform 1.1s var(--e); }
.cta__title.in .line__in{ transform:none; }
.cta__title.in .line:nth-child(2) .line__in{ transition-delay:.1s; }
.cta__pill{
  display:inline-block; padding:.06em clamp(16px,1.8vw,36px) .14em;
  border-radius:clamp(14px,1.6vw,30px);
  background:var(--pink); color:var(--ink);
  transform:scale(.85) rotate(-2deg); opacity:0;
  transition:transform 1s var(--e) .3s,opacity .7s .3s;
}
.cta__title.in .cta__pill{ transform:rotate(-2deg); opacity:1; }

.cta__body{
  display:grid; gap:clamp(40px,5vw,90px);
  grid-template-columns:1fr;
}
@media (min-width:940px){ .cta__body{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); } }

.form{ display:grid; gap:clamp(6px,1vw,10px); grid-template-columns:1fr 1fr; }
@media (max-width:620px){ .form{ grid-template-columns:1fr; } }
.field{ position:relative; }
.field--wide{ grid-column:1 / -1; }
.field input,.field textarea{
  width:100%; background:var(--ink-2); color:var(--paper);
  border:1px solid var(--line-soft); border-radius:16px;
  padding:30px 20px 16px;
  font:inherit; font-size:16px; resize:none;
  transition:border-color .45s var(--e),background .45s var(--e);
  outline:none;
}
.field textarea{ min-height:130px; }
.field input:focus,.field textarea:focus{ border-color:var(--lime); background:var(--ink-3); }
.field label{
  position:absolute; left:21px; top:22px;
  color:var(--muted); font-size:15px; pointer-events:none;
  transition:transform .45s var(--e),font-size .45s var(--e),color .4s;
  transform-origin:left top;
}
.field input:focus + label,.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-13px) scale(.76); color:var(--muted-2);
}
.field.is-bad input,.field.is-bad textarea{ border-color:var(--pink); }

.chips{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 6px; }
.chip{
  padding:11px 18px; border-radius:99px; border:1px solid var(--line);
  font-size:14px; color:var(--muted);
  transition:background .45s var(--e),color .4s,border-color .4s,transform .45s var(--e);
}
.chip:hover{ color:var(--paper); border-color:var(--paper); }
.chip.is-on{ background:var(--lime); color:var(--ink); border-color:transparent; }
.form .btn{ grid-column:1 / -1; justify-self:start; margin-top:10px; }
/* ---- галочка согласия на обработку персональных данных ---- */
.agree{
  grid-column:1 / -1;
  display:flex; align-items:flex-start; gap:12px;
  cursor:pointer; margin:6px 0 2px;
  font-size:13.5px; line-height:1.45; color:var(--muted);
}
.agree input{ position:absolute; opacity:0; width:0; height:0; }
.agree__box{
  flex:0 0 auto; width:22px; height:22px; margin-top:1px;
  border:1px solid var(--line); border-radius:7px;
  display:grid; place-items:center;
  background:var(--ink-2);
  transition:background .35s var(--e),border-color .35s var(--e);
}
.agree__box svg{
  width:14px; height:14px; fill:none; stroke:var(--ink);
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:scale(.5);
  transition:opacity .25s,transform .4s var(--e);
}
.agree:hover .agree__box{ border-color:var(--paper); }
.agree input:checked + .agree__box{ background:var(--lime); border-color:transparent; }
.agree input:checked + .agree__box svg{ opacity:1; transform:none; }
.agree input:focus-visible + .agree__box{ outline:2px solid var(--lime); outline-offset:3px; }
.agree__txt a{ color:var(--paper); text-decoration:underline; text-underline-offset:3px; }
.agree__txt a:hover{ color:var(--lime); }
.agree.is-bad .agree__box{ border-color:var(--pink); }
.agree.is-bad .agree__txt{ color:var(--pink); }

/* ---- панель после отправки ---- */
.sent{
  grid-column:1 / -1; margin-top:14px;
  padding:20px 22px; border-radius:16px;
  background:var(--ink-2); border:1px solid rgba(160,255,217,.3);
}
.sent__t{ color:var(--mint); font-size:16px; margin-bottom:6px; }
.sent__d{ color:var(--muted); font-size:14px; }
.sent__row{ margin-top:12px; }
.sent__link{ font-size:13.5px; color:var(--muted-2); text-decoration:underline; text-underline-offset:3px; }
.sent__link:hover{ color:var(--paper); }
/* если браузер заблокировал новое окно — ссылка становится главной */
.sent.is-blocked{ border-color:rgba(233,160,214,.45); }
.sent.is-blocked .sent__t{ color:var(--pink); }
.sent.is-blocked .sent__link{ color:var(--paper); font-size:15px; }

.cta__side{ display:flex; flex-direction:column; justify-content:space-between; gap:36px; }
.big-link{
  display:block; position:relative; width:max-content;
  font-family:'Onest',sans-serif; font-weight:500;
  font-size:clamp(22px,2.6vw,38px); letter-spacing:-.04em; line-height:1.3;
  transition:color .4s;
}
.big-link::after{
  content:''; position:absolute; left:0; right:0; bottom:.16em; height:2px; background:currentColor;
  transform:scaleX(0); transform-origin:right; transition:transform .55s var(--e);
}
.big-link:hover{ color:var(--lime); }
.big-link:hover::after{ transform:scaleX(1); transform-origin:left; }
.cta__small{ color:var(--muted); font-size:14.5px; max-width:34ch; }

/* ------------------------------------------------------------
   ПОДВАЛ
------------------------------------------------------------ */
.foot{ padding:0 var(--pad) clamp(22px,3vw,36px); }
.foot__top{ overflow:hidden; padding-bottom:clamp(10px,1.5vw,20px); }
.foot__mark{
  display:flex; justify-content:space-between; gap:2%;
  font-family:'Onest',sans-serif; font-weight:600;
  font-size:clamp(80px,26vw,420px); line-height:.78; letter-spacing:-.06em;
  color:var(--ink-3);
  user-select:none;
}
.foot__mark span{ transition:color .6s var(--e),transform .8s var(--e); display:block; }
.foot__mark:hover span:nth-child(1){ color:var(--lime); }
.foot__mark:hover span:nth-child(2){ color:var(--pink); }
.foot__mark:hover span:nth-child(3){ color:var(--violet); }
.foot__mark:hover span:nth-child(4){ color:var(--mint); }

.foot__bottom{
  display:flex; flex-wrap:wrap; gap:16px 30px; justify-content:space-between;
  border-top:1px solid var(--line-soft); padding-top:clamp(16px,2vw,26px);
  font-size:13px; color:var(--muted-2);
}
.foot__links{ display:flex; gap:22px; }
.foot__links a{ transition:color .35s; }
.foot__links a:hover{ color:var(--paper); }

/* мелочи */
@media (max-width:520px){
  .hero__title{ font-size:clamp(46px,14vw,80px); }
  .cta__title{ font-size:clamp(44px,13vw,90px); }
}

/* ------------------------------------------------------------
   СТРАНИЦА ДОКУМЕНТА (политика конфиденциальности)
------------------------------------------------------------ */
.head--doc{ position:static; }
.doc__back{ font-size:13.5px; color:var(--muted); transition:color .35s; }
.doc__back:hover{ color:var(--lime); }

.doc{
  max-width:74ch;
  margin:0 auto;
  padding:clamp(30px,6vh,70px) var(--pad) clamp(60px,10vh,110px);
}
.doc__title{
  font-size:clamp(30px,4.4vw,60px);
  line-height:1.02;
  margin-bottom:14px;
}
.doc__date{ color:var(--muted-2); font-size:14px; margin-bottom:clamp(34px,5vh,60px); }
.doc section{ margin-bottom:clamp(28px,4vh,46px); }
.doc h2{
  font-size:clamp(19px,2vw,26px);
  margin-bottom:12px;
  letter-spacing:-.03em;
}
.doc p{ color:var(--muted); margin-bottom:12px; }
.doc p:last-child{ margin-bottom:0; }
.doc strong{ color:var(--paper); font-weight:500; }
.doc a{ color:var(--lime); text-decoration:underline; text-underline-offset:3px; }
.doc__list{ display:flex; flex-direction:column; gap:9px; margin:0 0 14px; }
.doc__list li{
  position:relative; padding-left:22px;
  color:var(--muted);
}
.doc__list li::before{
  content:''; position:absolute; left:0; top:.68em;
  width:12px; height:2px; border-radius:99px; background:var(--lime);
}
.foot--doc{ border-top:1px solid var(--line-soft); padding-top:0; }