/* Стили публичного лендинга. Перенесены из согласованного прототипа
   design/index.html; комментарии там же объясняют каждое решение.
   Правки вёрстки теперь делаются здесь — прототип заморожен как эталон. */
:root{
  /* Ровно фон портрета: любое расхождение проявляет прямоугольник фотографии. */
  --cream:#FBF2EA;
  --beige:#EDE4D3;
  --gold:#B8922A;
  --dark:#2B2118;
  --ink:#3A3128;
  --rule:#E0D5C0;
  --serif:'Cormorant Garamond',Cormorant,Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --header-h:76px;
  --pad:clamp(20px,5vw,64px);
  --gap:clamp(56px,9vw,128px);
}
*{box-sizing:border-box}
/* clip, а не hidden: hidden на html/body ломает position:sticky у шапки */
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;overflow-x:clip;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--dark);margin:0;line-height:1.15}
h1{font-size:clamp(38px,5.4vw,72px);line-height:1.03}
h2{font-size:clamp(30px,3.8vw,50px)}
h3{font-size:clamp(20px,2vw,26px)}
p{margin:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.overline{
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  font-weight:600;display:flex;align-items:center;gap:16px;
}
.overline::before{content:"";width:44px;height:1px;background:var(--gold);flex:none}
.lede{font-family:var(--serif);font-style:italic;color:var(--gold);
      font-size:clamp(22px,2.6vw,32px);line-height:1.35}

/* ---------- header ---------- */
/* Шапка лежит поверх hero-фотографии прозрачной, а при скролле наливается
   кремом. Класс `is-solid` вешает скрипт внизу страницы. */
.site-header{
  position:sticky;top:0;z-index:50;background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,backdrop-filter .25s ease;
}
/* Три состояния. В самом верху — полностью прозрачная, чтобы фотография
   начиналась от края. Стоит тронуть скролл — тёмная подложка (текст в шапке
   светлый, ему нужен контраст на любом участке кадра). Ушли за hero —
   кремовая, как у всей остальной страницы. */
.site-header.is-dark{
  background:rgba(38,29,20,.72);
  backdrop-filter:blur(10px);border-bottom-color:rgba(251,242,234,.14);
}
.site-header.is-solid{
  background:rgba(250,246,239,.92);
  backdrop-filter:blur(8px);border-bottom-color:var(--rule);
}
.site-header .wrap{display:flex;align-items:center;gap:28px;height:var(--header-h)}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:34px;width:auto;display:block}
/* Два лого вместо перекраски: над фото — светлое, на кремовой шапке — тёмное. */
.brand .on-dark{display:block}
.brand .on-light{display:none}
.is-solid .brand .on-dark{display:none}
.is-solid .brand .on-light{display:block}
/* Пока шапка прозрачная — весь её текст читается по фотографии. */
.site-header:not(.is-solid) .nav a{color:var(--cream)}
.site-header:not(.is-solid) .lang a{color:rgba(251,242,234,.6)}
.site-header:not(.is-solid) .lang a[aria-current="page"],
.site-header:not(.is-solid) .lang a:hover{color:#E4C46A}
.site-header:not(.is-solid) .lang span{color:rgba(251,242,234,.35)}
.nav{margin-inline:auto;display:flex;gap:38px}
.nav a{
  text-decoration:none;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink);padding-block:6px;border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--gold);border-color:var(--gold)}
.head-actions{display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);flex:none}
.head-tg{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);transition:.18s ease;
}
.head-tg svg{width:19px;height:19px;display:block}
.head-tg:hover{background:var(--gold);color:var(--cream)}
.site-header:not(.is-solid) .head-tg{border-color:rgba(228,196,106,.55);color:#E4C46A}
.site-header:not(.is-solid) .head-tg:hover{background:#E4C46A;color:var(--dark)}
.lang{display:flex;align-items:center;gap:6px;font-size:13px;letter-spacing:.1em;font-weight:600;flex:none}
/* Переключатель — обычные ссылки на /, /en: язык живёт в адресе, а не
   в JS-состоянии страницы, поэтому каждую версию видит поисковик и ей
   можно поделиться. */
.lang a{
  padding:2px 4px;text-decoration:none;color:#A79C8B;
}
.lang a:hover{color:var(--gold)}
.lang a[aria-current="page"]{color:var(--gold)}
.lang span{color:var(--rule)}

/* ---------- hero ---------- */
/* Фотография на вылет: секция шире контейнера и всегда во всю ширину вьюпорта,
   на любом разрешении. Шапка втянута внутрь отрицательным margin — она лежит
   поверх кадра, а не над ним, поэтому hero занимает ровно экран. */
.hero{
  position:relative;isolation:isolate;
  margin-top:calc(-1 * var(--header-h));
  min-height:100svh;
  display:grid;align-items:center;
  padding-block:calc(var(--header-h) + clamp(24px,4vw,56px)) clamp(48px,7vw,96px);
}
/* picture не должен становиться грид-элементом — позиционируется сам img. */
.hero picture{display:contents}
.hero-bg{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:78% 50%;
}
/* Затемнение слева — «собственная тень кадра», а не прямоугольная плашка.
   Второй слой сверху вниз держит читаемость шапки на светлых фотографиях. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(43,33,24,.55) 0,rgba(43,33,24,0) 24%),
    linear-gradient(96deg,
      rgba(30,22,15,.90) 0%,
      rgba(35,26,18,.74) 30%,
      rgba(43,33,24,.34) 52%,
      rgba(43,33,24,.06) 70%,
      rgba(43,33,24,0) 82%);
}
/* width:100% обязателен: `.wrap` держит `margin:0 auto`, а auto-поля у грид-
   элемента съедают свободное место и ужимают контейнер по контенту — колонка
   текста уезжала в центр и наползала на няню. */
.hero-grid{position:relative;z-index:1;display:grid;width:100%}
.hero-copy{display:flex;flex-direction:column;gap:26px;max-width:600px}
.hero-intro{max-width:48ch;color:rgba(244,235,222,.82)}
/* Текст поверх фотографии — кремовый; золото поднято до #E4C46A,
   иначе #B8922A на тёмном кадре уходит в грязь. */
.hero h1{color:var(--cream)}
.hero .overline{color:#E4C46A}
.hero .overline::before{background:#E4C46A}
.hero .lede{color:#E4C46A}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:17px 32px;border-radius:3px;text-decoration:none;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  transition:.18s ease;
}
.btn-solid{background:var(--gold);color:#FFFDF8;border:1px solid var(--gold)}
.btn-solid:hover{background:#A07E1F;border-color:#A07E1F}
.btn-ghost{border:1px solid var(--dark);color:var(--dark)}
.btn-ghost:hover{background:var(--dark);color:var(--cream)}
/* На фотографии тёмная обводка пропадает — та же кнопка, вывернутая. */
.hero .btn-ghost{border-color:rgba(251,242,234,.6);color:var(--cream)}
.hero .btn-ghost:hover{background:var(--cream);border-color:var(--cream);color:var(--dark)}

/* Лотос-водяной знак из hero убран: на фотографии он читался как грязь,
   а не как орнамент. Знак остался в шапке и в подвале — этого достаточно. */

/* ---------- metrics ---------- */
/* Без отступа: портрет должен упираться в полосу метрик, а не висеть над ней. */
.metrics{background:var(--beige)}
/* Ячейки без gap и с волосяными разделителями: сетка растягивает их до
   высоты самой длинной подписи, и равная высота становится видимой —
   иначе три колонки разной длины читались как случайные обрезки.
   Отступы внутри ячейки: сверху-снизу заметно больше, чем по бокам,
   иначе полоса теряет воздух. */
.metrics .wrap{display:grid;grid-template-columns:repeat(3,1fr);padding-block:0}
.metric{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(34px,4.4vw,56px) clamp(14px,1.8vw,26px);
}
.metric + .metric{border-left:1px solid rgba(184,146,42,.22)}
.metric-num{font-family:var(--serif);font-size:clamp(40px,4.6vw,60px);color:var(--gold);line-height:1}
.metric-cap{margin-top:12px;font-size:13.5px;line-height:1.5;color:#5A5044;max-width:30ch}

/* ---------- sections ---------- */
section{scroll-margin-top:76px}
.block{padding-block:var(--gap)}
.block--beige{background:var(--beige)}
/* Две секции подряд на одном фоне складывали свои отступы: 112px пустого
   крема между «Обо мне» и «Подходом» против 56px внутри секций — шов
   читался как дыра. Смена фона такой стык прячет, одинаковый фон — нет,
   поэтому у второй секции верхний отступ снимается. */
section + section.block:not(.block--beige){padding-top:0}
.head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(36px,5vw,64px);max-width:760px}

/* Философия — центрированный акцент на всю ширину. Раньше цитата жила в
   левой колонке с мерой в 20 знаков, и справа зияла пустота. */
.philosophy{
  margin:0 auto clamp(56px,8vw,104px);display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:clamp(18px,3vw,28px);
}
/* Знак рисуется из viewBox 240px, поэтому на 48px обводка вырождалась
   в 0.4 реального пикселя и при opacity .45 читалась как шум. Крупнее
   и почти непрозрачный — теперь это тонкая золотая линия, как задумано. */
.philosophy-mark{width:clamp(64px,7.5vw,92px);opacity:.9}
.quote{
  margin:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(26px,3.6vw,44px);line-height:1.3;color:var(--dark);max-width:22ch;
}
.strengths{margin-bottom:clamp(44px,6vw,76px)}
.strengths .overline{margin-bottom:clamp(18px,2.5vw,28px)}

/* Ровно две колонки: пунктов четыре, при auto-fit они вставали в три
   и последний оставался сиротой во втором ряду. */
.cols{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,4vw,56px)}
.cols li{
  padding:26px 28px 26px 0;border-top:1px solid var(--rule);
  display:flex;gap:16px;align-items:flex-start;
}
.cols li::before{content:"";flex:none;width:7px;height:7px;margin-top:11px;border:1px solid var(--gold);transform:rotate(45deg)}

.guarantees{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(36px,5vw,56px)}
.guarantee{border-top:1px solid var(--gold);padding-top:20px}
.guarantee h3{font-size:19px;margin-bottom:8px}

/* ---------- timeline ----------
   Линия сплошная и проходит ЗА кружками: у кружка непрозрачный фон секции,
   поэтому стыков не видно и нет обрубленных отрезков. Позиция считается от
   диаметра, а не забита пикселями — иначе на другом размере кружка уезжает. */
.timeline{--dot:46px;--dot-pad:22px;position:relative;display:flex;flex-direction:column;max-width:900px}
.timeline li{
  position:relative;display:grid;gap:22px;padding-block:var(--dot-pad);
  grid-template-columns:var(--dot) 1fr;
}
.timeline li::before{
  content:"";position:absolute;left:calc(var(--dot) / 2);top:0;bottom:0;
  width:1px;background:var(--rule);transform:translateX(-50%);
}
.timeline li:first-child::before{top:calc(var(--dot-pad) + var(--dot) / 2)}
.timeline li:last-child::before{bottom:calc(100% - var(--dot-pad) - var(--dot) / 2)}
.step-num{
  width:var(--dot);height:var(--dot);border:1px solid var(--gold);border-radius:50%;
  display:grid;place-items:center;font-family:var(--serif);font-size:16px;color:var(--gold);
  background:var(--cream);position:relative;z-index:2;
}
.block--beige .step-num{background:var(--beige)}
.step-text{padding-top:calc((var(--dot) - 1.65em) / 2)}

/* ---------- две колонки: таймлайн + панели ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.5vw,72px);align-items:start}
/* Таймлайн из девяти шагов вдвое длиннее правой колонки. Без залипания
   под панелями оставалась пустая половина экрана. */
.split-side{position:sticky;top:100px}
.panel{background:var(--beige);border-radius:4px;padding:clamp(26px,3vw,42px)}
.panel + .panel{margin-top:clamp(20px,2.4vw,32px)}
.panel-title{font-size:clamp(25px,2.8vw,36px);text-align:center;margin-bottom:clamp(22px,2.6vw,32px)}

/* Шесть выгод, сетка 3x2. Без разделителей: панель уже выделена заливкой,
   линии внутри неё — лишний слой, а их края приходилось чинить отдельно
   под каждое число колонок. Группировку держит расстояние. */
.gains{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:clamp(16px,2vw,28px);row-gap:clamp(26px,3.2vw,40px);
}
.gains li{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  font-size:14.5px;line-height:1.45;
}
.gain-ico{width:32px;height:32px;color:var(--gold);flex:none}

.panel--pay{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.panel--pay .note{font-size:14px;color:#7A6E5D}
.panel--pay .btn{margin-top:6px}

.formats{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(20px,3vw,40px);margin-top:clamp(32px,4vw,52px)}
/* Панель стоит на бежевом, где контурная рамка цвета --rule почти не
   читалась. Заливка кремом даёт настоящее отделение фигуры от фона,
   золотая кромка сверху — тот же приём, что у блока гарантий. */
.format{
  background:var(--cream);border:0;border-top:2px solid var(--gold);
  border-radius:0 0 4px 4px;padding:clamp(24px,3vw,34px);
}
.format h3{margin-bottom:10px}
.format p{color:#5A5044}
.outcome{
  margin-top:clamp(40px,5vw,64px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--gold);
  font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);line-height:1.4;color:var(--dark);
  /* Было 26ch — при 32px это ~380px из 1240, треть ширины, справа зияло.
     60ch держит меру в комфортных для крупного шрифта пределах и на 1440
     занимает ~70% контейнера. На узких экранах контейнер сам уже 60ch,
     поэтому отдельного мобильного правила не нужно. */
  max-width:60ch;
}

/* ---------- contacts ---------- */
/* Только значки. Подпись «Telegram» рядом с логотипом Telegram и хэндл под
   ней ничего не сообщали — жать всё равно будут по значку. Без подписей
   четыре ссылки встают в одну строку, и разделители между ними не нужны:
   это они давали разнобой отступов (26px паддинга сверху и снизу у каждой
   строки плюс линия между). Имя ссылки живёт в aria-label, хэндл — в title. */
.contacts{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,18px)}
.contact{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(184,146,42,.45);color:#E4C46A;
  text-decoration:none;transition:.18s ease;
}
.contact svg{width:23px;height:23px;display:block}
.contact:hover{background:var(--gold);border-color:var(--gold);color:var(--dark)}

/* ---------- footer (он же секция «Контакты») ---------- */
.site-footer{background:var(--dark);color:#CBBFA8;padding-block:clamp(56px,7vw,96px);scroll-margin-top:76px}
.site-footer h2{color:#F0E6D2}
/* Заголовок слева, значки справа: столбец иконок сам по себе занимал бы
   четверть ширины, а остальные три четверти зияли пустотой. */
.footer-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(28px,5vw,64px);flex-wrap:wrap;
}
.footer-top .head{margin-bottom:0}
.footer-bottom{
  margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid rgba(184,146,42,.3);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer-bottom img{height:34px}
.copy{font-size:12.5px;letter-spacing:.12em;color:#8C7F68}


/* ---------- responsive ---------- */
@media (max-width:960px){
  /* Планшет: кадр остаётся горизонтальным, но няня уводится правее, чтобы
     колонка текста её не задевала. */
  .hero-bg{object-position:88% 50%}
  .hero-copy{max-width:min(560px,62%)}
  .split{grid-template-columns:1fr}
  .split-side{position:static}
  /* В одну колонку цифра и подпись встают в строку по базовой линии —
     иначе справа от коротких подписей остаётся мёртвое поле. Разделители
     из вертикальных становятся горизонтальными. Центрирование то же, что
     на десктопе: цифра по центру своей колонки, подпись — своей. */
  .metrics .wrap{grid-template-columns:1fr;padding-block:clamp(32px,5vw,48px)}
  .metric{
    display:grid;grid-template-columns:minmax(104px,auto) 1fr;align-items:center;
    gap:clamp(16px,4vw,32px);padding:20px 0;
    border-left:0;border-top:1px solid rgba(184,146,42,.25);
  }
  .metric + .metric{border-left:0}
  .metric:first-child{border-top:0;padding-top:0}
  .metric:last-child{padding-bottom:0}
  /* Цифра — по центру своей колонки. Подпись — по левому краю: это связный
     текст в несколько строк, по центру он рвётся с обеих сторон. Оба блока
     выровнены по вертикали относительно друг друга (align-items:center),
     раньше стояли по базовой линии и подпись висела вверху ячейки. */
  .metric-num{text-align:center}
  .metric-cap{margin-top:0;max-width:none;text-align:left}
}
@media (max-width:760px){
  /* Бургера нет: одностраничник, три якоря — по ним и так листают, а
     написать можно кнопкой Telegram, она в шапке всегда. Осталось лого
     слева и действия справа. */
  .nav{display:none}
  .site-header .wrap{height:66px}
  .brand img{height:25px}
  .head-actions{margin-left:auto;gap:12px}
  .head-tg{width:34px;height:34px}
  .head-tg svg{width:17px;height:17px}
  .cols{grid-template-columns:1fr}
  /* Шесть выгод в две колонки — снова без остатка, сирот нет. */
  .gains{grid-template-columns:repeat(2,1fr)}
  .timeline{--dot:36px;--dot-pad:18px}
  .timeline li{gap:16px}
  .step-num{font-size:14px}
  .btn{width:100%}

  /* ---------- мобильный hero ----------
     Здесь же <picture> подменяет кадр на вертикальный: пара стоит в нижних
     двух третях, верхняя треть — открытое боке. Экран делится на три:
     заголовок сверху на затемнении, лица посередине в чистом кадре,
     кнопки прижаты к низу на второй, короткой подложке. */
  /* Флекс, а не грид: одиночный auto-трек грида не растягивался по высоте
     секции и прижимал копию к низу — заголовок съезжал на лица. */
  .hero{display:flex;flex-direction:column;padding-block:calc(var(--header-h) + 18px) clamp(26px,7vw,40px)}
  .hero-grid{flex:1;display:flex}
  .hero-bg{object-position:50% 50%}
  .hero::before{
    background:
      /* Гаснет сразу за нижней строкой лида (~36% высоты). Раньше хвост
         тянулся до 78% и притушивал лица — ради текста, которого там уже
         нет. Ниже 47% фотография идёт нетронутой. */
      linear-gradient(180deg,
        rgba(28,21,14,.88) 0%,
        rgba(32,24,16,.82) 22%,
        rgba(38,29,20,.66) 30%,
        rgba(43,33,24,.46) 36%,
        rgba(43,33,24,.18) 40%,
        rgba(43,33,24,.04) 44%,
        rgba(43,33,24,0) 47%),
      linear-gradient(0deg,
        rgba(28,21,14,.86) 0%,
        rgba(33,25,17,.70) 12%,
        rgba(38,29,20,.48) 22%,
        rgba(43,33,24,.22) 32%,
        rgba(43,33,24,.05) 42%,
        rgba(43,33,24,0) 50%);
  }
  /* Текст разведён к краям экрана: сверху надзаголовок, заголовок и лид,
     снизу — абзац и кнопка. Между ними остаётся чистая фотография: лица
     не перекрыты и не притушены затемнением. */
  .hero-copy{max-width:none;flex:1;gap:12px}
  .hero h1{font-size:36px}
  .hero .lede{font-size:19px}
  .hero-intro{margin-top:auto;font-size:15px;line-height:1.55}
  .btn-row{margin-top:0;gap:10px}
  /* «Мой подход» — просто якорь вниз, а вниз человек и так листает. На
     первом экране остаётся одно действие: написать. */
  .hero .btn-ghost{display:none}
}