/* ==========================================================================
   Зуммервунд — вёрстка по макету (Frame 5, 1440 px)
   Типографика: Montserrat, трекинг -4% в заголовках, -3% в тексте
   ========================================================================== */

:root{
  --dark:#1F1F1F;
  --dark-salfetka:#252525;
  --dark-footer:#1B1B1B;
  --gray:#828282;
  --gray-body:#BCBCBC;
  --gray-time:#717171;
  --card:#0D0D0D;
  --card-line:#2E2E2E;
  /* боковое поле первого экрана: тянется вместе с окном */
  --pad:clamp(20px,5.5vw,80px);
}

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

/* scroll-padding — чтобы закреплённая шапка не накрывала заголовки по якорям */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

body{
  margin:0;
  background:#fff;
  color:#000;
  font-family:'Montserrat',-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:32px;
  line-height:39px;
  font-weight:400;
  letter-spacing:-0.03em;
  -webkit-font-smoothing:antialiased;
}

p,h1,h2,h3,figure,ol{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit}

.wrap{
  max-width:1440px;
  margin:0 auto;
  padding-left:80px;
  padding-right:80px;
}

.gray{color:var(--gray)}

/* Текст для скринридеров и поисковика: убран из макета, но не из документа.
   Не display:none — иначе его не читают ни те, ни другие. */
.vh{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
/* <picture> — обёртка в потоке, картинка внутри центруется как раньше.
   В шапке обёртка не должна становиться flex-элементом: фото там абсолютное. */
picture{display:block}
.hero__top>picture{display:contents}

.h2{
  font-size:80px;
  line-height:80px;
  font-weight:700;
  letter-spacing:-0.04em;
}

/* ---------------------------------------------------------------- кнопки */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:303px;
  height:70px;
  border-radius:10px;
  font-size:24px;
  line-height:1;
  font-weight:600;
  letter-spacing:-0.03em;
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn--white{background:#fff;color:#1F1F1F}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.28)}
.btn:active{transform:translateY(0)}

/* ----------------------------------------------------------------- хедер */
/* На первом экране в шапке только меню. Логотип выезжает вместе со стеклом,
   когда первый экран пролистан. */
.header{
  position:absolute;
  top:0;left:0;right:0;
  z-index:50;
  color:#fff;
}
.header__inner{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:clamp(16px,3vw,40px);
  padding:clamp(26px,4.2vh,52px) var(--pad) 0;
  transition:padding .35s cubic-bezier(.22,.61,.36,1);
}
.header.is-fixed{
  position:fixed;
  background:rgba(18,18,18,.55);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 34px rgba(0,0,0,.3);
  animation:header-drop .45s cubic-bezier(.22,.61,.36,1) both;
}
/* тонкий блик сверху — чтобы стекло читалось объёмным */
.header.is-fixed::after{
  content:'';
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.header.is-fixed .header__inner{padding-top:16px;padding-bottom:16px}
@keyframes header-drop{
  from{transform:translateY(-100%);opacity:0}
  to{transform:none;opacity:1}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header.is-fixed{background:rgba(15,15,15,.94)}
}
.logo{
  display:flex;
  align-items:center;
  gap:clamp(7px,0.8vw,11px);
  font-size:clamp(20px,1.9vw,28px);
  line-height:1;
  font-weight:600;
  letter-spacing:-0.04em;
  /* на первом экране приглушён, в закреплённой шапке — в полную силу */
  opacity:.5;
  transition:opacity .35s ease;
}
/* знак — салфетка с «З», та же метафора, что и у блока квиза */
.logo__mark{
  flex:none;
  width:clamp(22px,2.1vw,31px);
  height:auto;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.logo:hover .logo__mark{transform:rotate(7deg)}
.logo:hover{opacity:.8}
.header.is-fixed .logo{opacity:1}
.nav{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:clamp(14px,1.6vw,23px);
  margin-left:auto;
  font-size:clamp(13px,1.35vw,20px);
  line-height:1;
  font-weight:550;
  letter-spacing:-0.03em;
}
.nav a{transition:opacity .18s ease}
.nav a:hover{opacity:.65}
/* переключатель языка — таблетка, видна и на телефоне */
.nav__lang{
  display:inline-flex;
  align-self:center;
  align-items:center;
  justify-content:center;
  min-width:38px;
  padding:5px 10px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:99px;
  font-size:clamp(11px,1.05vw,14px);
  font-weight:700;
  letter-spacing:.06em;
  line-height:1;
  transition:background .18s ease,border-color .18s ease;
}
.nav__lang:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);opacity:1}
.nav__accent{
  position:relative;
  display:inline-block;
  font-weight:700;
}
.nav__accent::after{
  content:'';
  position:absolute;
  left:0;right:0;
  top:100%;
  margin-top:7px;
  height:1px;
  background:currentColor;
}

/* До 768 px в шапке остаётся только знак-салфетка: со словом «Зуммервунд»
   меню, переключатель языка и кнопка не помещаются в строку и меню ломается
   на две. Имя всё равно стоит гигантом на первом экране. */
@media (max-width:767px){
  .logo__word{display:none}
  .logo__mark{width:26px}
  .nav{gap:clamp(10px,1.8vw,16px)}
}

/* ----------------------------------------------------------------- герой
   Первый экран: слева текст, справа фото, внизу «Илья Зуммервунд» во всю
   ширину и полоса-кнопка. Высота — ровно экран, всё на flex + clamp. */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100svh;
  background:var(--dark);
  color:#fff;
  overflow:hidden;
}
.hero__top{
  position:relative;
  flex:1 1 auto;
  display:flex;
  align-items:flex-end;
  padding:clamp(110px,17vh,210px) var(--pad) clamp(26px,4.6vh,64px);
}
.hero__text{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:clamp(14px,1.7vw,24px);
  max-width:min(620px,50%);
}
/* промежуточная ступень между гигантской фамилией и мелким текстом */
.hero__lead{
  font-size:clamp(22px,2.5vw,40px);
  line-height:1.18;
  font-weight:500;
  letter-spacing:-0.03em;
  text-wrap:balance;
}
.hero__body{
  font-size:clamp(16px,1.45vw,23px);
  line-height:1.5;
  letter-spacing:-0.02em;
  color:#A6A6A6;
}
/* цитату выделяем подложкой и начертанием, без цвета */
.hero__mark{
  display:inline;
  padding:.08em .26em;
  margin:0 -.16em;
  background:rgba(255,255,255,.13);
  color:#fff;
  font-weight:600;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hero__photo{
  position:absolute;
  right:0;
  bottom:0;
  z-index:1;
  /* оставляем 50 px воздуха между меню и макушкой */
  height:calc(100% - clamp(26px,4.2vh,52px) - 22px - 56px);
  /* шире рамка + cover — человек в кадре крупнее, лишнее снизу срезается */
  width:min(40vw,520px);
  max-width:none;
  object-fit:cover;
  object-position:top center;
  pointer-events:none;
  /* низ растворяем, чтобы не было жёсткого среза по фамилии */
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
}

/* ------------------------------------------- салфетка-набросок на 1 экране
   Даёт слову «салфетка» картинку сразу, а не только в финале страницы.
   От 821 px лежит поверх, у нижней кромки фото: в потоке она добавляла
   ~350 px и первый экран переставал помещаться в экран. */
.hero__napkin{
  --paper:#F6F3EA;
  --ink:#1B1B1B;
  position:relative;
  z-index:2;
  align-self:flex-start;
  width:min(74%,280px);
  margin:clamp(16px,2.6vh,32px) 0 0;
  padding:clamp(14px,1.5vw,22px) clamp(16px,1.7vw,24px) clamp(13px,1.4vw,20px);
  background:var(--paper);
  color:var(--ink);
  transform:rotate(-4deg);
  transform-origin:left bottom;
  box-shadow:
    0 1px 1px rgba(0,0,0,.22),
    0 3px 5px rgba(0,0,0,.19),
    0 9px 12px rgba(0,0,0,.18),
    0 19px 27px rgba(0,0,0,.20),
    0 36px 52px rgba(0,0,0,.28);
  overflow:hidden;
}
.hero__napkin::after{
  content:'';
  position:absolute;
  inset:clamp(6px,0.7vw,10px);
  border:1px dashed rgba(27,27,27,.16);
  pointer-events:none;
}
.hero__napkin-folds{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(27,27,27,.07) 50%,transparent calc(50% + 1px)),
    linear-gradient(180deg,transparent calc(50% - 1px),rgba(27,27,27,.06) 50%,transparent calc(50% + 1px));
}
.hero__napkin-eyebrow{
  font-size:clamp(9px,0.72vw,11px);
  line-height:1.4;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#A79E8B;
}
.hero__napkin-list{
  display:flex;
  flex-direction:column;
  gap:clamp(1px,0.3vh,4px);
  margin:clamp(8px,1vh,13px) 0 0;
  padding:0;
  list-style:none;
  font-family:'Caveat','Montserrat',cursive;
  font-size:clamp(20px,1.9vw,27px);
  line-height:1.18;
  font-weight:600;
  letter-spacing:0;
}
.hero__napkin-arrow{color:#A79E8B}
.hero__napkin-rule{
  margin:clamp(8px,1vh,13px) 0 0;
  border:0;
  border-top:1px dashed rgba(27,27,27,.28);
}
/* итог обведён от руки: эллипс неровный за счёт разных радиусов */
.hero__napkin-sum{
  display:inline-block;
  margin:clamp(9px,1.1vh,14px) 0 4px;
  padding:.16em .5em .2em;
  font-family:'Caveat','Montserrat',cursive;
  font-size:clamp(20px,1.9vw,27px);
  line-height:1.1;
  font-weight:600;
  letter-spacing:0;
  white-space:nowrap;
  border:2px solid rgba(27,27,27,.55);
  border-radius:48% 52% 47% 53% / 58% 42% 58% 42%;
  transform:rotate(-1.5deg);
}
@media (min-width:821px){
  /* привязка по left в процентах, а не по right: с правым отступом на узких
     экранах салфетка наезжала на текстовую колонку */
  .hero__napkin{
    position:absolute;
    left:56%;
    bottom:clamp(16px,3.2vh,48px);
    width:min(290px,24vw);
    margin:0;
    transform:rotate(-6deg);
    transform-origin:center bottom;
  }
  .hero__text{max-width:min(620px,46%)}
}

.hero__name{
  position:relative;
  z-index:2;
  margin:0;
  padding:0 var(--pad);
  font-weight:800;
}
.hero__first{
  display:block;
  margin-bottom:clamp(3px,0.6vw,10px);
  font-size:clamp(12px,1.15vw,18px);
  line-height:1;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:#8A8A8A;
}
/* пока скрипт не подогнал кегль, фамилию не показываем — иначе на загрузке
   видно, как она скачет с запасного размера на точный */
.js .hero__last{visibility:hidden}
.js.is-fitted .hero__last{visibility:visible}
.hero__last{
  display:block;
  /* запасной кегль почти равен итоговому: если скрипта нет, разницы не видно */
  font-size:calc((100vw - 2 * var(--pad)) / 7.5);
  line-height:.78;
  /* запас под ножки «Д», иначе их срезает полоса-кнопка */
  padding-bottom:.07em;
  letter-spacing:-0.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero__last-fit{display:inline-block;padding-right:.04em}

.hero__cta{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:clamp(16px,2.6vh,36px);
  padding:clamp(16px,2.4vh,28px) var(--pad);
  background:#fff;
  color:#111;
  font-size:clamp(16px,1.55vw,24px);
  font-weight:600;
  letter-spacing:-0.02em;
  transition:color .3s cubic-bezier(.22,.61,.36,1);
}
/* стрелку поднимаем над заливкой, иначе при наведении она под ней теряется */
.hero__cta::after{
  content:'→';
  position:relative;
  z-index:1;
  font-size:1.05em;
  line-height:1;
}
.hero__cta.btn-swap::before{background:#0D0D0D}
.hero__cta:hover{color:#fff}

/* --------------------------------------------------- герой: узкие экраны */
@media (max-width:820px){
  .hero{min-height:0}
  .hero__top{
    flex-direction:column;
    align-items:stretch;
    padding-top:clamp(92px,15vh,130px);
    padding-bottom:0;
  }
  .hero__text{max-width:none}
  .hero__photo{
    position:static;
    height:auto;
    width:min(78%,340px);
    max-width:none;
    /* отрицательное поле вытягивает фото за паддинг секции — на любом
       телефоне оно упирается точно в правый край экрана */
    margin:clamp(18px,4vw,32px) calc(-1 * var(--pad)) 0 auto;
  }
  .hero__name{margin-top:clamp(14px,3vw,24px)}
  .hero__last{font-size:14.2vw}
}

/* -------------------------------------------------- «Что для меня главное?» */
.main{padding-top:129px}
.main__lead{
  margin-top:44px;
  max-width:800px;
  font-size:32px;
  line-height:39px;
}

.eto{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  gap:46px;
  margin-top:89px;
}
.eto__word{
  display:block;
  flex:none;
  font-size:178px;
  line-height:91px;
  font-weight:900;
  letter-spacing:-0.04em;
  color:var(--gray);
}
.eto__list{
  flex:none;
  font-size:32px;
  line-height:39px;
}

/* ------------------------------------------------------------ партнёрство */
.partner{padding-top:118px}
.partner__title{line-height:99px;max-width:1010px}
/* Ряды сами выравнивают левую и правую колонку: «Тильда или вайб-кодинг»
   и «Гомбо — бренд-технолог» всегда стартуют с одной линии. */
.partner__grid{
  display:grid;
  /* Все три колонки фиксированные, сетка целиком центрируется. Так зазор
     до фото одинаковый слева и справа и при этом не разъезжается: на 1fr
     боковые колонки растягивались и воздуха становилось вдвое больше. */
  grid-template-columns:300px 470px 300px;
  grid-template-rows:repeat(3,auto);
  justify-content:center;
  column-gap:60px;
  row-gap:clamp(48px,5vw,72px);
  margin-top:92px;
}
.partner__cell--l1{grid-column:1;grid-row:1}
.partner__cell--l2{grid-column:1;grid-row:2}
.partner__cell--l3{grid-column:1;grid-row:3}
.partner__figure{grid-column:2;grid-row:1 / span 3}
.partner__cell--r1{grid-column:3;grid-row:1}
.partner__cell--r2{grid-column:3;grid-row:2}
.partner__cell--r3{grid-column:3;grid-row:3}
.partner__cell{max-width:none}
/* текст здесь мельче основного: три колонки одного кегля читались стеной */
.partner__lead{
  font-size:18px;
  line-height:24px;
  font-weight:700;
  letter-spacing:-0.03em;
}
.partner__body{
  margin-top:16px;
  font-size:18px;
  line-height:25px;
  letter-spacing:-0.02em;
}
/* первый абзац в ячейке лепится к её верху — иначе ряды разъезжаются */
.partner__cell>*:first-child{margin-top:0}
/* В последнем ряду слева над текстом есть подзаголовок, справа его нет.
   Добавляем справа ровно его высоту (строка 24 px + отбивка 16 px), чтобы
   обе колонки заканчивались на одной линии — у нижней кромки фото. */
.partner__cell--r3{padding-top:40px}
/* Последняя строка обеих колонок должна стоять НА нижней кромке фото, а не
   пересекаться ею. Блок текста заканчивается ниже базовой линии на величину
   свеса и полуинтерлиньяжа — приподнимаем на неё. В em, чтобы держалось
   при любом кегле. */
.partner__cell--l3,
.partner__cell--r3{transform:translateY(-0.34em)}
.partner__figure img{width:420px;height:auto;margin:0 auto}
.partner__figure figcaption{
  margin-top:20px;
  width:100%;
  font-size:17px;
  line-height:24px;
  letter-spacing:-0.02em;
  color:var(--gray);
  text-align:center;
  text-wrap:balance;
}

/* --------------------------------------------------------------- салфетка */
.salfetka{
  margin-top:15px;
  padding:168px 0 122px;
  background:var(--dark-salfetka);
  color:#fff;
  -webkit-clip-path:polygon(0 114px,100% 0,100% calc(100% - 70px),75% 100%,50% calc(100% - 70px),25% 100%,0 calc(100% - 70px));
  clip-path:polygon(0 114px,100% 0,100% calc(100% - 70px),75% 100%,50% calc(100% - 70px),25% 100%,0 calc(100% - 70px));
}
.salfetka__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.salfetka__price{
  margin-right:8px;
  font-size:60px;
  line-height:60px;
  font-weight:400;
  letter-spacing:-0.03em;
  color:var(--gray-body);
}
.salfetka__rule{
  height:3px;
  margin:26px 0 0;
  border:0;
  background:#7C7C7C;
}
.salfetka__sub{
  margin-top:59px;
  font-size:42px;
  line-height:42px;
  font-weight:400;
  letter-spacing:-0.03em;
}

.steps{
  margin-top:77px;
  padding:0;
  list-style:none;
}
.step{
  display:grid;
  grid-template-columns:229px 1fr;
  margin-bottom:59px;
}
.step__time{
  font-size:18px;
  line-height:56px;
  font-weight:500;
  letter-spacing:-0.03em;
  color:var(--gray-time);
}
.step__title{
  font-size:35px;
  line-height:42px;
  font-weight:500;
  letter-spacing:-0.03em;
}
.step__text{
  margin-top:23px;
  max-width:1014px;
  font-size:24px;
  line-height:29px;
  letter-spacing:-0.03em;
  color:var(--gray-body);
}
/* цвет описаний одинаковый у всех шагов — приглушать «Прототип» не надо */
.step--final{margin-bottom:0}
.step--final .step__time{font-weight:700;color:#fff}
.step--final .step__title{font-weight:750}
.step--final .step__text{max-width:1040px;font-weight:500}

.salfetka__quote{
  margin:105px auto 0;
  max-width:1240px;
  font-size:32px;
  line-height:38px;
  font-weight:400;
  text-align:center;
}
.salfetka__cta{
  margin-top:54px;
  text-align:center;
}

/* ----------------------------------------------- «Ваше участие», белая полоса */
.quiz-section{padding-top:clamp(44px,6.9vw,100px)}
/* цифра — крупно, расшифровка — мелко: воздух вокруг работает на акцент,
   а не выглядит забытой строкой */
.participation__num{
  font-size:clamp(30px,3.6vw,52px);
  line-height:1.1;
  font-weight:700;
  letter-spacing:-0.04em;
  text-align:center;
}
.participation{
  margin:clamp(10px,1.2vw,18px) auto 0;
  max-width:min(680px,100%);
  font-size:clamp(16px,1.6vw,23px);
  line-height:1.42;
  font-weight:400;
  letter-spacing:-0.02em;
  text-align:center;
  text-wrap:balance;
}

/* =========================================================================
   Финальный блок: квиз и подвал одним тёмным полотном.
   Вся раскладка на flex/grid + clamp — тянется под любую ширину без ломки.
   ========================================================================= */
/* отступы держим в общем ритме сайта — 140 px на десктопе */
.final{
  margin-top:clamp(56px,9.7vw,140px);
  /* тот же тон, что у секции «Салфетка», — тёмная часть сайта единая */
  background:var(--dark-salfetka);
  color:#fff;
}
.final__inner{
  display:flex;
  flex-direction:column;
  gap:clamp(56px,9.7vw,140px);
  /* 48 px на телефоне — тот же шаг, что у .main и .partner */
  padding-top:clamp(48px,11.7vw,140px);
  padding-bottom:clamp(44px,6.9vw,100px);
}


/* --------------------------------------------------------------- поп-ап */
.modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 20px;
  overflow-y:auto;
}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(8,8,8,.78);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  animation:modal-fade .2s ease both;
}
.modal__card{
  position:relative;
  width:100%;
  max-width:620px;
  margin:auto;
  /* верх с запасом — под кнопкой закрытия 48 px, заголовок не должен под неё лезть */
  padding:68px 48px 44px;
  background:var(--card);
  border:1px solid #1C1C1C;
  border-radius:12px;
  color:#fff;
  letter-spacing:-0.03em;
  animation:modal-rise .26s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes modal-fade{from{opacity:0}to{opacity:1}}
@keyframes modal-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* 48×48 — минимальная цель для пальца; кружок, чтобы читалось как кнопка */
.modal__close{
  position:absolute;
  z-index:2;
  top:10px;right:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;height:48px;
  background:rgba(255,255,255,.06);
  border:0;
  border-radius:50%;
  color:#9A9A9A;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:color .15s,background .15s;
}
.modal__close:hover{color:#fff;background:rgba(255,255,255,.12)}
.modal__title{
  font-size:34px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-0.04em;
  text-align:center;
}
.modal__sub{
  margin-top:12px;
  font-size:19px;
  line-height:1.45;
  color:#8E8E8E;
  text-align:center;
}

.lead__label{
  margin-top:32px;
  font-size:19px;
  line-height:1.3;
}
.lead__channels{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.lead__ch{
  padding:11px 20px;
  background:transparent;
  border:1px solid var(--card-line);
  border-radius:8px;
  color:#fff;
  font-size:17px;
  line-height:1;
  letter-spacing:-0.03em;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
}
.lead__ch:hover{border-color:#fff}
.lead__ch.is-active{background:#fff;border-color:#fff;color:#0D0D0D;font-weight:600}
.lead__input{
  display:block;
  width:100%;
  height:60px;
  margin-top:12px;
  padding:0 18px;
  background:transparent;
  border:1px solid var(--card-line);
  border-radius:8px;
  color:#fff;
  font-family:inherit;
  font-size:18px;
  letter-spacing:-0.03em;
  transition:border-color .15s;
}
.lead__input:first-of-type{margin-top:20px}
.lead__input::placeholder{color:#6A6A6A}
.lead__input:focus{outline:0;border-color:#fff}
.lead__error{
  margin-top:14px;
  font-size:16px;
  line-height:1.4;
  color:#E0806F;
}
.lead__submit{
  width:100%;
  max-width:none;
  height:64px;
  margin-top:20px;
}
.lead__done{text-align:center}
.lead__done-title{
  font-size:32px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:-0.04em;
}
.lead__done-text{
  margin:12px 0 26px;
  font-size:19px;
  line-height:1.45;
  color:#8E8E8E;
}

/* ==========================================================================
   Адаптив. Макет задан для 1440 — ниже раскладка пересобирается по ступеням.
   ========================================================================== */

/* 960—1439: тот же макет, пропорционально сжатый (1 px макета = 1/14.4 vw) */
@media (max-width:1439px) and (min-width:960px){
  /* только боковые — см. комментарий у мобильного .wrap */
  .wrap{padding-left:5.5556vw;padding-right:5.5556vw}


  .btn{
    width:21.0417vw;height:4.8611vw;
    border-radius:0.6944vw;font-size:1.6667vw;
  }


  .h2{font-size:5.5556vw;line-height:5.5556vw}
  .main{padding-top:8.9583vw}
  .main__lead{
    margin-top:3.0556vw;max-width:55.5556vw;
    font-size:2.2222vw;line-height:2.7083vw;
  }
  .eto{margin-top:6.1806vw;gap:3.1944vw}
  .eto__word{font-size:12.3611vw;line-height:6.3194vw}
  .eto__list{font-size:2.2222vw;line-height:2.7083vw}

  .partner{padding-top:8.1944vw}
  .partner__title{line-height:6.875vw;max-width:70.1389vw}
  .partner__grid{
    grid-template-columns:20.8333vw 32.6389vw 20.8333vw;
    column-gap:4.1667vw;
    margin-top:6.3889vw;
  }
  .partner__cell{max-width:none}
  .partner__lead{font-size:1.25vw;line-height:1.6667vw}
  .partner__cell--r3{padding-top:2.7778vw}
  .partner__body{font-size:1.25vw;line-height:1.7361vw;margin-top:1.1111vw}
  .partner__figure img{width:29.1667vw}
  .partner__figure figcaption{margin-top:1.3889vw;font-size:1.1806vw;line-height:1.6667vw}

  .salfetka{
    margin-top:1.0417vw;
    padding:11.6667vw 0 8.4722vw;
    -webkit-clip-path:polygon(0 7.9167vw,100% 0,100% calc(100% - 4.8611vw),75% 100%,50% calc(100% - 4.8611vw),25% 100%,0 calc(100% - 4.8611vw));
    clip-path:polygon(0 7.9167vw,100% 0,100% calc(100% - 4.8611vw),75% 100%,50% calc(100% - 4.8611vw),25% 100%,0 calc(100% - 4.8611vw));
  }
  .salfetka__price{margin-right:0.5556vw;font-size:4.1667vw;line-height:4.1667vw}
  .salfetka__rule{margin-top:1.8056vw;height:0.2083vw}
  .salfetka__sub{margin-top:4.0972vw;font-size:2.9167vw;line-height:2.9167vw}
  .steps{margin-top:5.3472vw}
  .step{grid-template-columns:15.9028vw 1fr;margin-bottom:4.0972vw}
  .step__time{font-size:1.25vw;line-height:3.8889vw}
  .step__title{font-size:2.4306vw;line-height:2.9167vw}
  .step__text{
    margin-top:1.5972vw;max-width:70.4167vw;
    font-size:1.6667vw;line-height:2.0139vw;
  }
  .step--final .step__text{max-width:72.2222vw}
  .salfetka__quote{
    margin-top:7.2917vw;max-width:86.1111vw;
    font-size:2.2222vw;line-height:2.6389vw;
  }
  .salfetka__cta{margin-top:3.75vw}

}

/* -------------------------------------------------------- планшеты 900 */
@media (max-width:959px){

  .h2{font-size:46px;line-height:48px}
  .partner__title{line-height:56px;max-width:none}


  .main{padding-top:70px}
  .main__lead{font-size:21px;line-height:28px;max-width:560px;margin-top:26px}
  .eto{display:block;margin-top:40px}
  .eto__word{font-size:110px;line-height:76px;transform:none;text-align:left}
  .eto__list{font-size:21px;line-height:28px;margin-top:14px}

  .partner{padding-top:70px}
  /* одна колонка: ячейки идут стопкой в порядке чтения, фото между ними */
  .partner__grid{display:flex;flex-direction:column;gap:36px;margin-top:40px}
  .partner__cell{max-width:none}
  /* колонки сложились в столбец — выравнивать нечего */
  .partner__cell--r3{padding-top:0}
  .partner__figure{margin:4px 0}
  .partner__figure img,
  .partner__figure figcaption{width:100%;max-width:485px}
  .partner__figure figcaption{text-align:left;margin-top:16px}
  .partner__lead,.partner__body{font-size:18px;line-height:25px}
  .partner__body{margin-top:14px}
  .partner__figure figcaption{font-size:16px;line-height:23px}

  /* padding-top = скос + 70 px общего шага, чтобы заголовок не лип к кромке;
     padding-bottom = 40 px зубца + 24 px под кнопкой + строчный свес */
  .salfetka{
    margin-top:40px;
    padding:114px 0 90px;
    -webkit-clip-path:polygon(0 44px,100% 0,100% calc(100% - 40px),75% 100%,50% calc(100% - 40px),25% 100%,0 calc(100% - 40px));
    clip-path:polygon(0 44px,100% 0,100% calc(100% - 40px),75% 100%,50% calc(100% - 40px),25% 100%,0 calc(100% - 40px));
  }
  .salfetka__title{font-size:46px}
  .salfetka__price{font-size:32px;line-height:32px;margin-right:0}
  .salfetka__rule{height:2px;margin-top:18px}
  .salfetka__sub{margin-top:32px;font-size:24px;line-height:32px}
  .steps{margin-top:44px}
  .step{display:block;margin-bottom:36px}
  .step__time{display:block;line-height:1;font-size:15px}
  .step__title{margin-top:10px;font-size:24px;line-height:30px}
  .step__text,.step--final .step__text{margin-top:12px;font-size:17px;line-height:24px}
  .salfetka__quote{margin-top:56px;font-size:21px;line-height:28px}
  .salfetka__cta{margin-top:32px}


  .modal__card{padding:64px 28px 32px}
  .modal__title{font-size:26px}
  .modal__sub{font-size:17px}
  .lead__label{margin-top:24px;font-size:17px}
  .lead__ch{padding:10px 16px;font-size:15px}
  .lead__input{height:52px;font-size:16px}
  .lead__submit{height:56px}
  .lead__done-title{font-size:24px}
  .lead__done-text{font-size:17px}

  br.br-d{display:none}
}

/* --------------------------------------------------------- телефоны 600 */
@media (max-width:599px){
  /* только боковые: шорткат padding здесь сбрасывал вертикальные отступы
     у .final__inner — тёмный блок прилипал к салфетке */
  .wrap{padding-left:20px;padding-right:20px}
  .nav a:not(.nav__accent):not(.nav__lang){display:none}
  .nav{gap:10px}
  .nav__lang{min-width:0;padding:4px 8px;font-size:11px}


  .h2{font-size:32px;line-height:36px}
  .partner__title{line-height:38px}
  .main{padding-top:48px}
  .main__lead,.eto__list{font-size:17px;line-height:24px}
  .eto__word{font-size:74px;line-height:52px}

  .partner{padding-top:48px}
  .partner__lead,.partner__body{font-size:17px;line-height:23px}
  .partner__figure figcaption{font-size:15px;line-height:21px}

  /* скос 30 px — тот же угол, что на десктопе (114/1440 ≈ 30/390),
     сверху 48 px чистого поля до заголовка, снизу 16 px под кнопкой до зубца */
  .salfetka{
    margin-top:32px;
    padding:78px 0 56px;
    -webkit-clip-path:polygon(0 30px,100% 0,100% calc(100% - 40px),75% 100%,50% calc(100% - 40px),25% 100%,0 calc(100% - 40px));
    clip-path:polygon(0 30px,100% 0,100% calc(100% - 40px),75% 100%,50% calc(100% - 40px),25% 100%,0 calc(100% - 40px));
  }
  .salfetka__head{display:block}
  .salfetka__title{font-size:32px}
  .salfetka__price{display:block;margin-top:6px;font-size:24px;line-height:24px}
  .salfetka__sub{font-size:19px;line-height:26px}
  .step__title{font-size:20px;line-height:26px}
  .step__text,.step--final .step__text{font-size:15px;line-height:22px}
  .salfetka__quote{font-size:17px;line-height:24px}
  .btn{width:100%;max-width:303px;height:56px;font-size:18px}


  .modal{padding:16px 12px}
  .modal__card{padding:60px 20px 26px}
  .modal__title{font-size:22px}
  .modal__sub{font-size:16px}
  .lead__ch{flex:1;padding:10px 8px;font-size:14px;text-align:center}
}