/* ============================================================
   Даниил Ломаев — первый экран
   ЧБ, белый лист, кадр проявляется из бумаги,
   имя проходит сквозь кадр и меняет цвет внутри него
   ============================================================ */

:root{
  --ink:#0b0b0b;
  --paper:#ffffff;
  --mute:#8c8c8c;
  --line:rgba(11,11,11,.14);
  --pad:clamp(18px, 4.4vw, 56px);
  --font:"Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --display:"Oswald", "Golos Text", Impact, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}

/* ---------- каркас первого экрана ---------- */

.hero{
  position:relative;
  min-height:100svh;
  background:var(--paper);      /* фон внутри группы смешивания — иначе difference не сработает */
  isolation:isolate;            /* difference не пробивает за пределы секции */
  overflow:hidden;
}

/* ---------- верхняя строка ---------- */

.bar{
  position:absolute;
  inset:0 0 auto 0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:clamp(16px,2.6vw,30px) var(--pad);
}

.bar__mark{
  font-size:13px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}

.bar__reg{
  font-size:9px;
  vertical-align:super;
  margin-left:3px;
  color:var(--mute);
}

.bar__nav{
  display:flex;
  gap:clamp(18px,2.4vw,34px);
}

.bar__nav a{
  font-size:13px;
  font-weight:500;
  letter-spacing:.01em;
  position:relative;
  padding-bottom:2px;
}

.bar__nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}

.bar__nav a:hover::after{transform:scaleX(1);transform-origin:left}

.burger{
  display:none;
  width:34px; height:34px;
  margin-right:-6px;
  background:none;
  border:0;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  align-items:flex-end;
}

.burger span{
  display:block;
  height:1.5px;
  background:currentColor;
  transition:width .35s cubic-bezier(.22,1,.36,1);
}

.burger span:nth-child(1){width:26px}
.burger span:nth-child(2){width:17px}
.burger:hover span:nth-child(2){width:26px}

/* ---------- кадр ---------- */
/* Кадр лежит в чёрном поле: его тёмные края растворяются в чёрном
   незаметно, а само поле мягко уходит в белый лист.
   Пропорция снимка сохранена — ничего не режется. */

.stage{
  position:absolute;
  right:0; top:0; bottom:0;
  width:74vw;
  z-index:1;
  background:#050505;
  pointer-events:none;

  -webkit-mask-image:linear-gradient(to right,
      rgba(0,0,0,0) 0%,   rgba(0,0,0,.06) 10%, rgba(0,0,0,.18) 18%,
      rgba(0,0,0,.38) 26%, rgba(0,0,0,.62) 33%, rgba(0,0,0,.85) 40%,
      rgba(0,0,0,.97) 47%, #000 54%);
  mask-image:linear-gradient(to right,
      rgba(0,0,0,0) 0%,   rgba(0,0,0,.06) 10%, rgba(0,0,0,.18) 18%,
      rgba(0,0,0,.38) 26%, rgba(0,0,0,.62) 33%, rgba(0,0,0,.85) 40%,
      rgba(0,0,0,.97) 47%, #000 54%);

  animation:stage-in 1.4s cubic-bezier(.22,1,.36,1) both;
}

.shot{
  position:absolute;
  right:0;
  top:50%;
  width:100%;
  transform:translateY(-50%);
}

.shot img{
  display:block;
  width:100%;
  height:auto;
  animation:shot-in 1.8s cubic-bezier(.22,1,.36,1) both;
}

/* верх и низ кадра гаснут в чёрное поле — стыка не видно */
.shot::before,
.shot::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:24%;
  z-index:2;
  pointer-events:none;
}

.shot::before{
  top:-1px;
  background:linear-gradient(to bottom, #050505 0%, rgba(5,5,5,.86) 22%, rgba(5,5,5,.45) 55%, rgba(5,5,5,0) 100%);
}

.shot::after{
  bottom:-1px;
  background:linear-gradient(to top, #050505 0%, rgba(5,5,5,.86) 22%, rgba(5,5,5,.45) 55%, rgba(5,5,5,0) 100%);
}

@keyframes stage-in{from{opacity:0}to{opacity:1}}

@keyframes shot-in{
  from{opacity:0; transform:scale(1.045)}
  to  {opacity:1; transform:scale(1)}
}

/* ---------- имя ---------- */
/* mix-blend-mode:difference — буквы сами инвертируются там,
   где входят в тёмную часть кадра. Никаких подложек и затемнений. */

.name{
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  top:47vh;
  z-index:3;
  margin:0;
  color:#fff;
  mix-blend-mode:difference;
  font-family:var(--display);
  font-weight:600;
  font-size:calc((100vw - 2 * var(--pad)) / 8.75);   /* строка ложится ровно по ширине листа */
  line-height:.84;
  white-space:nowrap;
  letter-spacing:-.012em;
  text-transform:uppercase;
  pointer-events:none;
}

.name__line{
  display:block;
  animation:name-in 1.15s .18s cubic-bezier(.22,1,.36,1) both;
}

@keyframes name-in{
  from{opacity:0; transform:translateY(.16em)}
  to  {opacity:1; transform:translateY(0)}
}

/* ---------- подпись и кнопка ---------- */

.meta{
  position:absolute;
  left:var(--pad);
  bottom:clamp(28px,6vh,64px);
  z-index:4;
  display:flex;
  align-items:flex-end;
  gap:clamp(26px,5vw,72px);
  animation:soft-in 1s .5s ease both;
}

.meta__role{
  font-size:13px;
  line-height:1.5;
  color:var(--mute);
  max-width:30ch;
}

.meta__role b{
  display:block;
  margin-bottom:4px;
  font-size:clamp(15px,1.25vw,18px);
  font-weight:600;
  color:var(--ink);
}

.meta__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 22px;
  border:1px solid var(--ink);
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:background .35s ease, color .35s ease;
}

.meta__cta svg{width:17px;height:17px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.meta__cta:hover{background:var(--ink);color:var(--paper)}
.meta__cta:hover svg{transform:translateX(4px)}

.status{
  position:absolute;
  right:var(--pad);
  bottom:clamp(28px,6vh,64px);
  z-index:4;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--mute);
  animation:soft-in 1s .62s ease both;
}

.status i{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--ink);
  animation:pulse 2.6s ease-in-out infinite;
}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes soft-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   кадр = весь экран, поверх минимум: имя, роль, бургер
   ============================================================ */

@media (max-width:780px){

  .hero{background:#0b0b0b}

  .bar{color:#fff}
  .bar__nav{display:none}
  .burger{display:flex}
  .bar__reg{color:rgba(255,255,255,.55)}

  .stage{
    inset:0;
    width:100%;
    background:none;
    -webkit-mask-image:none;
    mask-image:none;
  }

  .shot{
    position:absolute;
    inset:0;
    top:0;
    transform:none;
    width:100%;
    height:100%;
  }

  .shot::before,
  .shot::after{display:none}

  .shot img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 42%;
    -webkit-mask-image:none;
    mask-image:none;
  }

  .name{
    top:auto;
    bottom:clamp(112px,18vh,170px);
    left:var(--pad);
    right:var(--pad);
    color:#fff;
    mix-blend-mode:normal;   /* кадр внизу почти чёрный — инверсия не нужна */
    font-size:clamp(52px,17vw,86px);
    line-height:.92;
    white-space:normal;
    letter-spacing:-.03em;
  }

  .meta{
    right:var(--pad);
    bottom:clamp(30px,5vh,48px);
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .meta__role{
    color:rgba(255,255,255,.6);
    font-size:12px;
  }

  .meta__role b{color:#fff;font-size:16px}

  .meta__cta{
    border-color:rgba(255,255,255,.5);
    color:#fff;
  }

  .meta__cta:hover{background:#fff;color:var(--ink)}

  .status{display:none}
}

/* очень узкие экраны */
@media (max-width:380px){
  .name{font-size:clamp(46px,15.5vw,64px)}
}

/* ---------- доступность ---------- */

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}


/* ============================================================
   РАБОТЫ
   белый лист, тонкий заголовок со стрелкой, неровная сетка
   ============================================================ */

.works{
  padding:clamp(72px,11vh,140px) var(--pad) clamp(80px,12vh,150px);
}

.sec{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  margin-bottom:clamp(34px,5vw,64px);
}

.sec__title{
  display:flex;
  align-items:center;
  gap:clamp(10px,1.4vw,20px);
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(38px,6.4vw,92px);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
}

.sec__arrow{
  width:.52em;
  height:.52em;
  transform:rotate(90deg);
  flex:none;
}

.sec__note{
  font-size:13px;
  line-height:1.55;
  color:var(--mute);
  max-width:34ch;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,1.6vw,26px) clamp(14px,1.8vw,30px);
  align-items:start;
}

.card{display:block}

.card--a{grid-column:1 / span 7}
.card--b{grid-column:9 / span 4; margin-top:clamp(28px,7vw,110px)}
.card--c{grid-column:6 / span 7; margin-top:clamp(20px,4vw,64px)}
.card--d{grid-column:1 / span 4; margin-top:clamp(28px,6vw,96px)}

.card__frame{
  display:block;
  overflow:hidden;
  background:#eee;
}

.card__frame img{
  display:block;
  width:100%;
  height:auto;
  filter:grayscale(1) contrast(1.02);
  transition:transform .8s cubic-bezier(.22,1,.36,1), filter .5s ease;
}

.card:hover .card__frame img{transform:scale(1.035)}

.card__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-top:12px;
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
}

.card__name{
  font-size:clamp(14px,1.15vw,17px);
  font-weight:600;
  letter-spacing:-.01em;
}

.card__tag{
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mute);
  white-space:nowrap;
}

.card:hover .card__row{border-bottom-color:var(--ink)}

.works__all{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(40px,6vw,80px);
  padding:14px 26px;
  border:1px solid var(--ink);
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  transition:background .35s ease, color .35s ease;
}

.works__all svg{width:17px;height:17px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.works__all:hover{background:var(--ink);color:var(--paper)}
.works__all:hover svg{transform:translateX(4px)}

@media (max-width:780px){
  .card--a,.card--c{grid-column:1 / span 12; margin-top:0}
  .card--b{grid-column:1 / span 7; margin-top:clamp(18px,5vw,40px)}
  .card--d{grid-column:6 / span 7; margin-top:clamp(18px,5vw,40px)}
  .sec{margin-bottom:26px}
}

/* ---------- страница «Все работы» ---------- */

.page{background:var(--paper)}

.bar--solid{
  position:sticky;
  top:0;
  inset-inline:auto;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  z-index:10;
}

.bar__back{
  display:none;
  font-size:13px;
  font-weight:600;
}

.works--page{padding-top:clamp(46px,7vh,92px)}

.sec--page{align-items:flex-end}

.grp{
  margin:clamp(38px,5vw,72px) 0 clamp(16px,2vw,28px);
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}

.grp:first-of-type{margin-top:0}

.works--page .grid > .card--a{grid-column:1 / span 7; margin-top:0}
.works--page .grid > .card--c{grid-column:8 / span 5; margin-top:clamp(24px,5vw,80px)}
.works--page .grid > .card--a:nth-of-type(3){grid-column:1 / span 5}
.works--page .grid > .card--c:nth-of-type(4){grid-column:6 / span 7; margin-top:clamp(16px,3vw,48px)}

.grid--links > .card{grid-column:span 4}
.grid--links > .card:nth-child(2){margin-top:clamp(20px,4vw,64px)}
.grid--links > .card:nth-child(3){margin-top:clamp(10px,2vw,32px)}

@media (max-width:780px){
  .bar--solid .bar__nav{display:flex;gap:16px}
  .bar--solid .bar__nav a:not(:first-child){display:none}
  .bar__back{display:block}
  .works--page .grid > .card--a,
  .works--page .grid > .card--c,
  .works--page .grid > .card--a:nth-of-type(3),
  .works--page .grid > .card--c:nth-of-type(4){grid-column:1 / span 12; margin-top:0}
  .grid--links > .card{grid-column:span 6; margin-top:0}
}

/* ============================================================
   ПРОЦЕСС — тёмная секция, карточки складываются стопкой
   ============================================================ */

.process{
  background:#050505;
  color:#fff;
  padding:clamp(72px,11vh,140px) var(--pad) clamp(120px,18vh,220px);
}

.sec--dark .sec__note{color:rgba(255,255,255,.5)}

.steps{
  max-width:1100px;
  margin:0 auto;
}

.step{
  position:sticky;
  padding:clamp(28px,3.4vw,48px) clamp(24px,3.2vw,52px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:#050505;
  margin-bottom:clamp(22px,3vw,44px);
}

.step:nth-child(1){top:96px}
.step:nth-child(2){top:110px}
.step:nth-child(3){top:124px}
.step:nth-child(4){top:138px}
.step:nth-child(5){top:152px}

.step__num{
  display:block;
  margin-bottom:clamp(20px,3vw,44px);
  font-size:11px;
  letter-spacing:.16em;
  color:rgba(255,255,255,.4);
}

.step__title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(28px,3.6vw,52px);
  line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin-bottom:14px;
}

.step__text{
  max-width:56ch;
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.62;
  color:rgba(255,255,255,.7);
}

/* ============================================================
   ЧТО НУЖНО ОТ ТЕБЯ
   ============================================================ */

.need{padding:clamp(70px,10vh,130px) var(--pad)}

.need__title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(26px,3vw,44px);
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin-bottom:clamp(26px,3.4vw,48px);
}

.need__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  border-top:1px solid var(--line);
}

.need__item{
  padding:clamp(22px,2.6vw,38px) clamp(16px,2vw,28px) clamp(22px,2.6vw,38px) 0;
  border-bottom:1px solid var(--line);
}

.need__val{
  display:block;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(30px,3.6vw,52px);
  line-height:1;
  letter-spacing:-.02em;
}

.need__lbl{
  display:block;
  margin-top:10px;
  font-size:13px;
  line-height:1.5;
  color:var(--mute);
  max-width:24ch;
}

.need__item--sum .need__val{color:var(--ink)}
.need__item--sum .need__lbl{color:var(--ink)}

.need__note{
  margin-top:clamp(26px,3vw,44px);
  max-width:62ch;
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.62;
  color:#3a3a3a;
}

/* ============================================================
   ЦЕНЫ
   ============================================================ */

.price{padding:clamp(70px,10vh,130px) var(--pad)}

.tiers{border-top:1px solid var(--line)}

.tier{
  position:relative;
  display:block;
  padding:clamp(24px,2.8vw,40px) 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .45s cubic-bezier(.22,1,.36,1);
}

.tier:hover{padding-left:clamp(10px,1.4vw,24px)}

.tier__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.tier__name{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(26px,3.4vw,48px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.01em;
}

.tier__cost{
  font-size:clamp(15px,1.4vw,20px);
  font-weight:600;
  white-space:nowrap;
}

.tier__desc{
  display:block;
  margin-top:12px;
  max-width:62ch;
  font-size:clamp(13px,1vw,15px);
  line-height:1.6;
  color:var(--mute);
}

.tier__mark{
  position:absolute;
  top:clamp(24px,2.8vw,40px);
  right:0;
  transform:translateY(-135%);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}

.addon__title{
  margin:clamp(46px,6vw,80px) 0 clamp(14px,1.6vw,22px);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mute);
}

.addons{list-style:none;max-width:720px}

.addons li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(13px,1vw,15px);
}

.addons b{font-weight:600;white-space:nowrap}

/* ============================================================
   ВОПРОСЫ
   ============================================================ */

.faq{padding:clamp(70px,10vh,130px) var(--pad)}

.qa{border-top:1px solid var(--line);max-width:900px}

.q{border-bottom:1px solid var(--line)}

.q summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:clamp(17px,1.9vw,26px) 0;
  cursor:pointer;
  list-style:none;
  font-size:clamp(15px,1.25vw,19px);
  font-weight:500;
  letter-spacing:-.005em;
}

.q summary::-webkit-details-marker{display:none}

.q summary::after{
  content:"";
  flex:none;
  width:13px; height:13px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}

.q[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}

.q__body{padding-bottom:clamp(18px,2vw,28px)}

.q__body p{
  max-width:66ch;
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.65;
  color:#3a3a3a;
}

.q[open] .q__body{animation:q-open .45s cubic-bezier(.22,1,.36,1) both}

@keyframes q-open{
  from{opacity:0; transform:translateY(-8px)}
  to  {opacity:1; transform:translateY(0)}
}

/* ============================================================
   ОТЗЫВЫ
   ============================================================ */

.reviews{padding:clamp(70px,10vh,130px) var(--pad)}

.rev{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2vw,30px);
  align-items:start;
}

.rev__voice{
  grid-column:1 / span 5;
  padding:clamp(24px,2.6vw,36px);
  background:#050505;
  color:#fff;
  border-radius:20px;
}

.rev__label{
  display:block;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

.rev__who{
  margin:14px 0 22px;
  font-size:clamp(18px,1.8vw,26px);
  font-weight:600;
  letter-spacing:-.01em;
}

.rev__who em{
  display:block;
  margin-top:4px;
  font-style:normal;
  font-size:12px;
  font-weight:400;
  color:rgba(255,255,255,.5);
}

.rev__voice audio{width:100%;height:38px}

.rev__link{
  display:inline-block;
  margin-top:20px;
  font-size:12px;
  color:rgba(255,255,255,.65);
  border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:2px;
}

.rev__link:hover{color:#fff;border-bottom-color:#fff}

.rev__quote{
  grid-column:7 / span 6;
  padding:clamp(22px,2.4vw,34px);
  border:1px solid var(--line);
  border-radius:20px;
}

.rev__quote--short{
  grid-column:7 / span 4;
  margin-top:clamp(10px,1.4vw,22px);
}

.rev__quote p{
  font-size:clamp(14px,1.15vw,17px);
  line-height:1.6;
  color:#2a2a2a;
}

.rev__quote footer{
  margin-top:18px;
  font-size:13px;
  font-weight:600;
}

.rev__quote footer em{
  font-style:normal;
  font-weight:400;
  color:var(--mute);
  margin-left:8px;
}

.rev__more{
  grid-column:1 / span 5;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(10px,1.6vw,24px);
  padding:14px 24px;
  border:1px solid var(--ink);
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  transition:background .35s ease,color .35s ease;
}

.rev__more svg{width:17px;height:17px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.rev__more:hover{background:var(--ink);color:var(--paper)}
.rev__more:hover svg{transform:translateX(4px)}

/* ============================================================
   КОНТАКТЫ
   ============================================================ */

.contact{
  background:#050505;
  color:#fff;
  padding:clamp(80px,13vh,170px) var(--pad) clamp(34px,5vh,60px);
}

.contact__title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(38px,7vw,104px);
  line-height:.94;
  letter-spacing:-.02em;
  text-transform:uppercase;
}

.contact__sub{
  margin-top:clamp(20px,2.4vw,32px);
  max-width:56ch;
  font-size:clamp(14px,1.1vw,17px);
  line-height:1.6;
  color:rgba(255,255,255,.6);
}

.contact__links{
  margin-top:clamp(40px,5vw,72px);
  border-top:1px solid rgba(255,255,255,.16);
}

.contact__links a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:20px;
  padding:clamp(18px,2vw,28px) 0;
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:padding-left .45s cubic-bezier(.22,1,.36,1);
}

.contact__links a:hover{padding-left:clamp(8px,1.2vw,20px)}

.contact__lbl{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}

.contact__val{
  font-size:clamp(16px,1.7vw,24px);
  font-weight:500;
  letter-spacing:-.01em;
}

.contact__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-top:clamp(46px,7vw,90px);
  font-size:11px;
  color:rgba(255,255,255,.4);
}

.contact__foot a{border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
.contact__foot a:hover{color:#fff}

/* ============================================================
   ЛИПКАЯ КНОПКА — только мобильная
   ============================================================ */

.sticky{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translate(-50%,140%);
  z-index:40;
  display:none;
  padding:14px 26px;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}

.sticky.is-on{transform:translate(-50%,0)}

@media (max-width:780px){
  .sticky{display:block}

  .rev__voice,
  .rev__quote,
  .rev__quote--short,
  .rev__more{grid-column:1 / span 12; margin-top:0}

  .step{border-radius:18px}
  .step:nth-child(1){top:76px}
  .step:nth-child(2){top:86px}
  .step:nth-child(3){top:96px}
  .step:nth-child(4){top:106px}
  .step:nth-child(5){top:116px}

  .contact{padding-bottom:96px}
  .tier__mark{position:static;display:block;transform:none;margin-top:10px}
}

/* ============================================================
   ПРОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   ============================================================ */

.rise{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.rise.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  .step{position:static}
}


/* ---------- полноэкранное меню ---------- */

.menu{
  position:fixed;
  inset:0;
  visibility:hidden;
  opacity:1;
  z-index:30;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(10px,2vh,20px);
  padding:var(--pad);
  background:#050505;
  color:#fff;
  transform:translateY(-100%);
  transition:transform .62s cubic-bezier(.76,0,.24,1), visibility 0s .62s;
}

.menu.is-open{transform:translateY(0);visibility:visible;transition:transform .62s cubic-bezier(.76,0,.24,1)}

.menu a{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(34px,10vw,64px);
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:-.01em;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);
}

.menu.is-open a{opacity:1;transform:none}
.menu.is-open a:nth-child(1){transition-delay:.16s}
.menu.is-open a:nth-child(2){transition-delay:.22s}
.menu.is-open a:nth-child(3){transition-delay:.28s}
.menu.is-open a:nth-child(4){transition-delay:.34s}
.menu.is-open a:nth-child(5){transition-delay:.40s}

.burger{z-index:35;position:relative}
.burger.is-open{color:#fff}
.burger.is-open span:nth-child(1){width:26px;transform:translateY(3.75px) rotate(45deg)}
.burger.is-open span:nth-child(2){width:26px;transform:translateY(-3.75px) rotate(-45deg)}
.burger span{transition:width .35s cubic-bezier(.22,1,.36,1), transform .35s cubic-bezier(.22,1,.36,1)}

/* ---------- юридическая страница ---------- */

.legal{
  max-width:760px;
  margin:0 auto;
  padding:clamp(50px,8vh,100px) var(--pad) clamp(70px,10vh,130px);
}

.legal__title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(30px,4.6vw,60px);
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:-.01em;
}

.legal__date{margin-top:12px;font-size:12px;color:var(--mute)}

.legal h2{
  margin:clamp(30px,4vw,50px) 0 10px;
  font-size:clamp(15px,1.3vw,19px);
  font-weight:600;
  letter-spacing:-.005em;
}

.legal p{
  margin-bottom:12px;
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.65;
  color:#3a3a3a;
}

.legal__back{margin-top:clamp(36px,5vw,60px)}
.legal__back a{border-bottom:1px solid var(--line);padding-bottom:2px;color:var(--ink);font-weight:600}
.legal__back a:hover{border-bottom-color:var(--ink)}

.contact__foot i{
  display:inline-block;
  margin-top:6px;
  font-style:normal;
  font-size:10px;
  line-height:1.5;
  color:rgba(255,255,255,.3);
  max-width:70ch;
}

/* ---------- правки: навигация поверх чёрного поля ---------- */

html{scroll-behavior:smooth}

section[id], footer[id]{scroll-margin-top:80px}

.hero .bar__nav a{color:#fff}
.hero .bar__nav a::after{background:#fff}

/* ---------- уточнение под тарифами ---------- */

.price__note{
  margin-top:clamp(26px,3vw,40px);
  max-width:60ch;
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.62;
  color:#3a3a3a;
}

/* ---------- заметнее проявление при скролле ---------- */

.rise{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 1s cubic-bezier(.22,1,.36,1), transform 1.05s cubic-bezier(.22,1,.36,1);
  will-change:opacity, transform;
}

.rise.is-in{opacity:1;transform:none;will-change:auto}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
}

/* ---------- предоплата ---------- */

.price__prepay{
  margin-top:clamp(24px,3vw,38px);
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(18px,2vw,28px);
  text-transform:uppercase;
  letter-spacing:-.01em;
}

/* ---------- цвет в превью работ: по наведению, а на мобиле — у активной ---------- */

.card:hover .card__frame img,
.card:focus-visible .card__frame img,
.card.is-live .card__frame img{filter:grayscale(0) contrast(1)}

.card__frame img{transition:transform .8s cubic-bezier(.22,1,.36,1), filter .55s ease}

/* ---------- правки: вордмарк обычным регистром ---------- */

.bar__mark{
  text-transform:none;
  letter-spacing:.01em;
  font-size:14px;
  font-weight:600;
}

/* ---------- шестой шаг в стопке ---------- */

.step:nth-child(6){top:166px}

@media (max-width:780px){
  .step:nth-child(6){top:126px}
}

/* ---------- метка тарифа рядом с ценой ---------- */

.tier__mark{
  position:static;
  display:block;
  transform:none;
  margin-top:10px;
  color:var(--mute);
}

/* ---------- кнопки: расчёт стоимости и контакт ---------- */

.price__cta,
.contact__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(22px,2.6vw,34px);
  padding:14px 26px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}

.price__cta{border:1px solid var(--ink)}
.price__cta:hover{background:var(--ink);color:var(--paper)}

.contact__cta{
  background:#fff;
  color:var(--ink);
  border:1px solid #fff;
}

.contact__cta:hover{background:transparent;color:#fff}

.price__cta svg,
.contact__cta svg{width:17px;height:17px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.price__cta:hover svg,
.contact__cta:hover svg{transform:translateX(4px)}

/* ---------- 404 ---------- */

.nf{
  max-width:640px;
  margin:0 auto;
  padding:clamp(80px,16vh,180px) var(--pad) clamp(80px,14vh,160px);
}

.nf__code{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(64px,12vw,150px);
  line-height:.9;
  letter-spacing:-.02em;
  color:var(--line);
}

.nf__title{
  margin-top:clamp(14px,2vw,24px);
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(26px,3.4vw,46px);
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:-.01em;
}

.nf__text{
  margin-top:14px;
  max-width:48ch;
  font-size:clamp(14px,1.05vw,16px);
  line-height:1.62;
  color:#3a3a3a;
}

.nf__cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:clamp(24px,3vw,38px);
  padding:14px 26px;
  border:1px solid var(--ink);
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  transition:background .35s ease,color .35s ease;
}

.nf__cta svg{width:17px;height:17px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.nf__cta:hover{background:var(--ink);color:var(--paper)}
.nf__cta:hover svg{transform:translateX(4px)}

.legal__note{
  margin-top:clamp(28px,4vw,44px);
  font-size:11px;
  line-height:1.5;
  color:var(--mute);
}

/* ============================================================
   ИСПРАВЛЕНИЯ: слои шапки, цвет бургера, мобильный первый экран
   ============================================================ */

/* шапка должна быть НАД полноэкранным меню, иначе бургер не нажать */
.bar{z-index:40}
.menu{z-index:30}
.burger{z-index:41; color:inherit}

@media (max-width:780px){

  .bar{color:#fff}
  .burger{color:#fff}
  .burger span{background:#fff}

  /* первый экран: имя и подпись в потоке — налезать друг на друга нечему */
  .hero{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:0 var(--pad) clamp(26px,4.5vh,44px);
  }

  .name{
    position:static;
    order:1;
    bottom:auto;
    left:auto;
    right:auto;
    margin-bottom:clamp(14px,2.4vh,22px);
    font-size:clamp(44px,15vw,74px);
  }

  .meta{
    position:static;
    order:2;
    left:auto;
    right:auto;
    bottom:auto;
    gap:clamp(14px,2.4vh,20px);
  }

  .menu{z-index:30}
}

@media (max-width:380px){
  .name{font-size:clamp(38px,13.5vw,56px)}
}

/* ============================================================
   ЛОУДЕР
   ============================================================ */

.loader{
  position:fixed;
  inset:0;
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#050505;
  transition:opacity .6s ease .15s, visibility 0s .75s;
}

.loader__bar{
  position:relative;
  width:min(190px,46vw);
  height:1px;
  background:rgba(255,255,255,.18);
  overflow:hidden;
}

.loader__bar i{
  position:absolute;
  inset:0 auto 0 0;
  width:100%;
  background:#fff;
  transform:scaleX(0);
  transform-origin:left;
  animation:load-fill 1.15s cubic-bezier(.4,0,.15,1) both;
}

@keyframes load-fill{
  0%   {transform:scaleX(0)}
  62%  {transform:scaleX(.72)}
  100% {transform:scaleX(1)}
}

.loader.is-done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .loader{display:none}
}