/* ==========================================================================
   Altego Media — платформа управления брендом и рекламными кампаниями

   Дизайн держится на трёх вещах, и больше ни на чём:

     1. СРЕЗ 45° НА МАСШТАБЕ СТРАНИЦЫ. Фирменный угол режет не карточку, а
        целую секцию: чёрное поле входит в белое диагональю, красное — тоже.
        Тот же приём, что у логотипа, увеличенный до размера экрана.
     2. ТИПОГРАФИКА ВО ВСЮ ШИРИНУ. Заголовки упираются в поля; акцент —
        цветом слова. Никаких подложек под текстом, надзаголовков и нумерации:
        владелец прямо назвал это клише.
     3. ПЛАШКА КАК КОНТЕЙНЕР ДЛЯ ТЕКСТА — прямая цитата слайда «Графика».
        Текст живёт внутри скошенной фигуры, а лента таких фигур служит
        ритмической паузой между секциями (вместо бегущей строки).

   Палитра ровно из четырёх цветов брендбука. Ни градиентов, ни теней,
   ни скруглений, ни серых наполнителей.
   ========================================================================== */

@font-face {
  font-family: "Tektur";
  src: url("../fonts/tektur.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("../fonts/onest.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --red: #ff0340;
  --black: #000000;
  --gray: #dcdadb;
  --white: #ffffff;

  --muted: rgba(0, 0, 0, 0.6);
  --muted-light: rgba(255, 255, 255, 0.62);

  /* Цвет подложки секции — нужен обводкам: рамка со срезом собирается
     двумя слоями, и нижний обязан совпасть с фоном. */
  --surface: #ffffff;

  --font-display: "Tektur", system-ui, sans-serif;
  --font-text: "Onest", system-ui, sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --pad: max(clamp(1.15rem, 4vw, 5rem), env(safe-area-inset-left, 0px));
  --max: 88rem;

  /* Толщина ЛЮБОЙ линии на сайте: обводки, разделители, штрих в графике. */
  --line: 2px;

  /* Шкала вертикальных отступов — одна на весь сайт. */
  --space-section: clamp(4.5rem, 9vw, 9.5rem);   /* поле секции сверху и снизу */
  --space-block: clamp(2.6rem, 5vw, 4.5rem);     /* от заголовка до содержимого */
  --space-gap: clamp(1rem, 1.6vw, 1.4rem);       /* между плашками в сетке */
  --space-plate: clamp(1.8rem, 3.4vw, 3rem);     /* внутреннее поле плашки */
  --space-strip: clamp(1.6rem, 3vw, 2.4rem);     /* полоса подвала и шапки */

  /* Малый срез — у кнопок, полей ввода и плашек.

     ⚠ Полигон НЕЛЬЗЯ держать в пользовательском свойстве :root: var()
     внутри custom property подставляется в момент ОБЪЯВЛЕНИЯ, то есть
     корневым --cut. Переопределения --cut у компонентов тогда не работают
     (проверено: у кнопки и у ряда получался один и тот же срез 22px).
     Поэтому clip-path задаётся обычным свойством в правилах ниже —
     там var(--cut) резолвится на самом элементе. */
  --cut: 22px;

  /* Большой срез — у целых секций. Величина одна по обеим осям,
     иначе угол перестанет быть ровно 45°. */
  --cut-xl: 11vw;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --stagger: 60ms;
}

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

html {
  scroll-behavior: smooth;
  background: var(--white);
}

body {
  margin: 0;
  color: var(--black);
  background: var(--white);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 300;
  padding: 0.8rem 1.2rem;
  color: var(--white);
  background: var(--red);
  transform: translateY(-260%);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Огранка: единственная форма проекта

   clip-path — обычное свойство, поэтому var(--cut) берётся у самого элемента,
   и переопределения размера среза работают.
   -------------------------------------------------------------------------- */

.skip-link,
.btn,
.slab,
.case,
.rowplate,
.faq__q i {
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
}

/* Обводка со срезом: рамка из двух слоёв, потому что clip-path режет border.
   Внутренний срез уменьшен на --line·(2−√2) ≈ 0.586·--line: наивное
   «срез минус отступ» давало на диагонали толщину --line/√2, то есть срез
   выходил тоньше прямых сторон. */
.outline {
  position: relative;
  isolation: isolate;
  background: none;
  clip-path: none;
}

.outline::before,
.outline::after {
  position: absolute;
  content: "";
  z-index: -1;
}

.outline::before {
  inset: 0;
  background: var(--black);
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
}

.outline::after {
  inset: var(--line);
  background: var(--surface);
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut) + var(--line) * 0.586) 0,
    100% calc(var(--cut) - var(--line) * 0.586),
    100% 100%,
    calc(var(--cut) - var(--line) * 0.586) 100%,
    0 calc(100% - var(--cut) + var(--line) * 0.586)
  );
}

.outline--light::before { background: var(--white); }

/* --------------------------------------------------------------------------
   Типографика
   -------------------------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 0.86;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(3rem, 9vw, 9.5rem);
}

.huge {
  font-size: clamp(2.3rem, 6.2vw, 6.2rem);
  line-height: 0.88;
}

.huge--center {
  max-width: 26ch;
  margin-inline: auto;
  text-align: center;
}

h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 0.96;
}

/* Акцент — цветом слова, без подложки. */
h1 em,
h2 em,
h3 em {
  font-style: normal;
  color: var(--red);
}

.field--red em {
  color: var(--black);
}

.lead {
  max-width: 42ch;
  margin: 0;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--muted);
}

.field--black .lead,
.field--red .lead {
  color: rgba(255, 255, 255, 0.78);
}

.section {
  max-width: calc(var(--max) + var(--pad) * 2);
  margin-inline: auto;
  padding: var(--space-section) var(--pad);
}

/* --------------------------------------------------------------------------
   Поля секций и срез 45° на масштабе страницы
   -------------------------------------------------------------------------- */

.field {
  position: relative;
  padding: var(--space-section) var(--pad);
}

.field--black {
  --surface: #000000;
  color: var(--white);
  background: var(--black);
}

.field--red {
  --surface: #ff0340;
  color: var(--white);
  background: var(--red);
}

.field--cut-br {
  padding-bottom: calc(var(--space-section) + var(--cut-xl));
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cut-xl)),
    calc(100% - var(--cut-xl)) 100%,
    0 100%
  );
}

.field--cut-tl {
  margin-top: calc(var(--cut-xl) * -1);
  padding-top: calc(var(--space-section) + var(--cut-xl));
  clip-path: polygon(
    var(--cut-xl) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--cut-xl)
  );
}

/* --------------------------------------------------------------------------
   Шапка — часть первого экрана: логотип и одна кнопка

   Не плавает и не липнет: уезжает вместе с чёрным полем. Навигации нет —
   решение владельца.
   -------------------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--max);
  margin: 0 auto var(--space-block);
}

.brand img {
  width: auto;
  height: clamp(32px, 3.4vw, 46px);
}

/* На юридических страницах поле чёрное отсутствует — шапка тёмная на белом. */
.topbar--plain {
  padding: var(--space-strip) var(--pad);
  margin-bottom: 0;
  max-width: calc(var(--max) + var(--pad) * 2);
  border-bottom: var(--line) solid var(--black);
}

/* --------------------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-text);
  font-size: 0.96rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 180ms var(--ease), background-color 180ms ease,
    color 180ms ease;
  will-change: transform;
  --cut: 14px;
}

.btn--lg {
  padding: 1.15rem 2.1rem;
  font-size: 1.05rem;
  --cut: 18px;
}

.btn__arrow {
  font-size: 1.1em;
  line-height: 1;
}

.btn--red { color: var(--white); background: var(--red); }
.btn--red:hover { color: var(--red); background: var(--white); }

.btn--black { color: var(--white); background: var(--black); }
.btn--black:hover { color: var(--black); background: var(--white); }


.btn--outline { color: var(--black); }
.btn--outline:hover { color: var(--white); }
.btn--outline:hover::after { background: var(--red); }

.btn--outline-light { color: var(--white); }
.btn--outline-light:hover { color: var(--black); }
.btn--outline-light:hover::after { background: var(--white); }

/* --------------------------------------------------------------------------
   Первый экран
   -------------------------------------------------------------------------- */

.hero {
  padding-top: calc(clamp(2rem, 4vw, 3.4rem) + var(--safe-top));
}

.hero__foot {
  display: grid;
  gap: 2.2rem;
  margin-top: var(--space-block);
}

@media (min-width: 940px) {
  .hero__foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
  }
}

.hero__act {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* --------------------------------------------------------------------------
   Четыре опоры — одни слова
   -------------------------------------------------------------------------- */

.words {
  max-width: calc(var(--max) + var(--pad) * 2);
  margin-inline: auto;
  /* Запас снизу ровно на величину среза: следующее поле подтягивается
     вверх на --cut-xl, и диагональ обязана врезаться в пустоту, а не в текст. */
  padding: var(--space-section) var(--pad)
           calc(var(--space-section) + var(--cut-xl));
}

.words__grid {
  display: grid;
  gap: var(--space-block);
}

@media (min-width: 700px) {
  .words__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .words__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.word h2 {
  margin-bottom: 1.2rem;
  font-size: clamp(1.9rem, 3vw, 2.8rem);
}

.word p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Лента плашек — пауза вместо бегущей строки
   -------------------------------------------------------------------------- */

.strip {
  overflow: hidden;
}

.strip img {
  width: 100%;
  min-width: 1100px;
  height: auto;
}

.strip--red {
  margin-top: var(--space-block);
}

/* Лента на белом поле — пауза между секциями. */
.strip--white {
  padding-block: var(--space-strip);
}

/* --------------------------------------------------------------------------
   Проблема
   -------------------------------------------------------------------------- */

.slabs {
  display: grid;
  gap: var(--space-gap);
  margin-top: var(--space-block);
}

@media (min-width: 860px) {
  .slabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.slab {
  margin: 0;
  padding: var(--space-plate);
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--white);
  background: var(--black);
  --cut: 30px;
}

/* --------------------------------------------------------------------------
   Как устроено — три плашки во всю ширину
   -------------------------------------------------------------------------- */

.rows {
  display: grid;
  gap: var(--space-gap);
  margin-top: var(--space-block);
}

.rowplate {
  display: grid;
  gap: 1.4rem;
  padding: var(--space-plate);
  --cut: 44px;
}

@media (min-width: 940px) {
  .rowplate {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 3rem;
    align-items: start;
  }
}

.rowplate p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.rowplate--red {
  color: var(--white);
  background: var(--red);
}

.rowplate--red p { color: rgba(255, 255, 255, 0.86); }

.rowplate--black {
  color: var(--white);
  background: var(--black);
}

.rowplate--black p { color: var(--muted-light); }

.rowplate.outline { clip-path: none; }
.rowplate.outline p { color: var(--muted); }


.rowplate--outline p { color: var(--muted); }

/* --------------------------------------------------------------------------
   Кому — блок, который владелец принял
   -------------------------------------------------------------------------- */

.cases {
  display: grid;
  gap: var(--space-gap);
  margin-top: var(--space-block);
}

@media (min-width: 780px) {
  .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.case {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  padding: var(--space-plate);
  --cut: 40px;
}

.case--red { color: var(--white); background: var(--red); }
.case--black { color: var(--white); background: var(--black); }
.case.outline { clip-path: none; }


.case p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.case--red p { color: rgba(255, 255, 255, 0.86); }
.case--black p { color: var(--muted-light); }
.case.outline p { color: var(--muted); }

/* --------------------------------------------------------------------------
   Вопросы
   -------------------------------------------------------------------------- */

.faq {
  max-width: 62rem;
  margin: var(--space-block) auto 0;
  border-top: var(--line) solid var(--black);
}

.faq__item {
  border-bottom: var(--line) solid var(--black);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  width: 100%;
  padding: 1.8rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  text-align: left;
  text-transform: uppercase;
  transition: color 180ms ease;
}

.faq__q:hover { color: var(--red); }

.faq__q i {
  position: relative;
  width: 38px;
  height: 38px;
  background: var(--black);
  flex: none;
  --cut: 9px;
  transition: background-color 200ms ease;
}

.faq__q i::before,
.faq__q i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 2px;
  background: var(--white);
  content: "";
  translate: -50% -50%;
  transition: rotate 280ms var(--ease);
}

.faq__q i::after { rotate: 90deg; }

.faq__item.is-open .faq__q { color: var(--red); }
.faq__item.is-open .faq__q i { background: var(--red); }
.faq__item.is-open .faq__q i::after { rotate: 0deg; }

/* Высота переключается мгновенно (display), анимируются только
   opacity/transform: высота — свойство раскладки, её анимация тормозит. */
.faq__a {
  display: none;
  max-width: 60ch;
  padding-bottom: 1.8rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 240ms ease, transform 280ms var(--ease);
}

.faq__item.is-open .faq__a {
  opacity: 1;
  transform: translateY(0);
}

.faq__a p {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Финал и подвал
   -------------------------------------------------------------------------- */

.cta {
  padding-bottom: 0;
  overflow: hidden;
}

.cta .lead {
  margin-top: 1.8rem;
}

.cta .hero__act {
  margin-top: 2.6rem;
}

.footer {
  padding: var(--space-block) var(--pad) var(--space-strip);
  padding-bottom: max(var(--space-strip), var(--safe-bottom));
  color: var(--white);
  background: var(--black);
}

.footer__top,
.footer__mid,
.footer__bottom {
  max-width: var(--max);
  margin-inline: auto;
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  padding-bottom: var(--space-block);
}

.footer-language {
  display: grid;
  gap: 0.5rem;
  color: var(--muted-light);
}

.footer-language > span {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.footer-language select {
  width: 10rem;
  min-height: 2.75rem;
  padding: 0 0.8rem;
  border: var(--line) solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  color: var(--white);
  background: var(--black);
  font: 600 0.9rem/1 var(--font-text);
  color-scheme: dark;
}

.footer-language select:focus-visible {
  border-color: var(--red);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.8rem;
  font-size: 0.94rem;
  font-weight: 500;
}

.footer__legal a:hover { color: var(--red); }

.footer__mid {
  display: grid;
  gap: 1.8rem;
  padding-bottom: var(--space-strip);
}

@media (min-width: 940px) {
  .footer__mid {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
  }
}

/* Подпись бренда в подвале — логотипом, не набором. */
.footer__logo {
  width: auto;
  height: clamp(24px, 2.4vw, 34px);
  margin-bottom: 1.1rem;
}

.footer__org p:last-child {
  margin: 0;
  font-size: 0.94rem;
  color: var(--muted-light);
}

/* Гигантская почта во всю ширину. */
.footer__mail {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6.6vw, 5.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.88;
  text-transform: uppercase;
  text-align: right;
  overflow-wrap: anywhere;
  transition: color 200ms ease;
}

.footer__mail:hover { color: var(--red); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  padding-top: 1.4rem;
  font-size: 0.86rem;
  color: var(--muted-light);
  border-top: var(--line) solid rgba(255, 255, 255, 0.22);
}

/* --------------------------------------------------------------------------
   Юридические страницы
   -------------------------------------------------------------------------- */

.legal-main {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: var(--space-block) var(--pad) var(--space-section);
}

.legal-main h1 {
  margin-bottom: 1.8rem;
  font-size: clamp(1.9rem, 5vw, 3.4rem);
}

.legal-main h2 {
  margin-top: 2.8rem;
  margin-bottom: 0.9rem;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
}

.legal-main p,
.legal-main li {
  color: var(--muted);
  line-height: 1.6;
}

.legal-main p { margin: 0 0 1rem; }

.legal-main a:not(.btn) {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-main .eyebrow {
  margin: 0 0 1rem;
  font-family: var(--font-text);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
}

.legal-main ul {
  margin: 0 0 1.2rem;
  padding-left: 1.15rem;
}

.legal-main li { margin-bottom: 0.5rem; }

/* --------------------------------------------------------------------------
   Появление блоков
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 600ms var(--ease), translate 740ms var(--ease);
}

.js [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

.js [data-stagger] > * {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 540ms var(--ease) calc(var(--i, 0) * var(--stagger)),
    translate 660ms var(--ease) calc(var(--i, 0) * var(--stagger));
}

.js [data-stagger].is-visible > * {
  opacity: 1;
  translate: 0 0;
}

/* Страховка: скрипт не доехал — контент виден как есть. */
.js.motion-fallback [data-reveal],
.js.motion-fallback [data-stagger] > * {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js [data-reveal],
  .js [data-stagger] > * {
    opacity: 1 !important;
    translate: none !important;
  }
}

/* --------------------------------------------------------------------------
   Узкие экраны
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  :root {
    --cut: 16px;
    --cut-xl: 14vw;
  }

  .footer__mail { text-align: left; }
}