/* ============================================================
   DDCom Engineering — dd.com.kz · Вариант 1 «Строгий минимализм»
   Off-white, графит, фирменный красный акцент. Швейцарская сетка.
   ============================================================ */

/* ---------- 1. Переменные ---------- */
:root{
  --bg:        #FAFAF8;
  --bg-soft:   #F1F0EB;
  --ink:       #16181D;
  --ink-soft:  #4A4E57;
  --muted:     #6B6F78;
  --line:      rgba(22, 24, 29, .14);
  --line-inv:  rgba(250, 250, 248, .18);
  --accent:    #D7261E;   /* фирменный красный — графика, крупные элементы */
  --accent-ink:#B01C14;   /* мелкий акцентный текст — контраст AA */
  --paper:     #FAFAF8;
  --paper-soft:rgba(250, 250, 248, .72);

  --font: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container: 1264px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 76px;
  --section-pad: clamp(88px, 11vw, 152px);

  --t-fast: .22s ease;
  --t-soft: .55s cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Базовые стили ---------- */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 300 17px/1.68 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.menu-open{ overflow: hidden; }

h1, h2, h3, p, dl, dd, figure{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
img, svg{ display: block; max-width: 100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; border-radius: 0; cursor: pointer; }

[id]{ scroll-margin-top: calc(var(--header-h) + 28px); }

::selection{ background: var(--ink); color: var(--paper); }

:focus-visible{
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

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

.skip-link{
  position: fixed;
  top: -100%;
  left: var(--gutter);
  z-index: 300;
  padding: .85em 1.6em;
  background: var(--ink);
  color: var(--paper);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: top var(--t-fast);
}
.skip-link:focus{ top: 10px; }

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

/* ---------- 3. Типографика разделов ---------- */
.section{ padding-block: var(--section-pad); }

.section-label{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 26px;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.section-label__num{
  color: var(--accent-ink);
  font-weight: 700;
  letter-spacing: .08em;
}

.section-head{
  max-width: 760px;
  margin-bottom: clamp(48px, 6vw, 88px);
}

.section-title{
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.015em;
}

/* ---------- 4. Кнопки ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 2.3em;
  border: 1px solid transparent;
  border-radius: 0;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.btn--solid{
  background: var(--ink);
  color: #FFFFFF;
}
.btn--solid:hover{ background: var(--accent-ink); }

.btn--ghost{
  border-color: var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn--ghost:hover{
  border-color: var(--accent-ink);
  color: var(--accent-ink);
}

/* ---------- 5. Шапка ---------- */
.header{
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(250, 250, 248, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t-fast);
}
.header.is-scrolled{ box-shadow: 0 1px 0 var(--line), 0 12px 32px -24px rgba(22, 24, 29, .35); }

.header__inner{
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
}

/* Логотип */
.logo{
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--ink); /* currentColor для тёмных частей SVG-логотипа */
}

.logo-mark{
  height: 48px;
  width: auto;
}

/* Навигация */
.nav{ margin-left: auto; }

.nav__list{
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 38px);
}

.nav__link{
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--t-fast);
}
.nav__link::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.nav__link:hover{ color: var(--ink); }
.nav__link:hover::after{ transform: scaleX(1); }

.nav__extra{ display: none; }

.nav__phone{
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .02em;
}

/* Телефон и CTA в шапке */
.header__actions{
  display: flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
}

.header__phone{
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--ink);
  transition: color var(--t-fast);
}
.header__phone:hover{ color: var(--accent-ink); }

.header__cta{ min-height: 46px; padding-inline: 1.8em; }

/* Бургер */
.burger{
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-right: -10px;
}
.burger__box{
  position: relative;
  display: block;
  width: 24px;
  height: 16px;
}
.burger__line{
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transition: transform .3s ease, opacity .2s ease;
}
.burger__line:nth-child(1){ top: 0; }
.burger__line:nth-child(2){ top: 7px; }
.burger__line:nth-child(3){ top: 14px; }

body.menu-open .burger__line:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.menu-open .burger__line:nth-child(2){ opacity: 0; }
body.menu-open .burger__line:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Переключатель языка / Language switcher */
.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
}

.lang-switch__item{
  position: relative;
  display: inline-block;
  padding: 6px 0;
  color: var(--ink-soft);
  transition: color var(--t-fast);
}

.lang-switch__item.is-current{
  color: var(--ink);
  font-weight: 700;
}

a.lang-switch__item::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
a.lang-switch__item:hover{ color: var(--ink); }
a.lang-switch__item:hover::after{ transform: scaleX(1); }

.lang-switch__sep{
  font-weight: 300;
  color: var(--muted);
}

/* ---------- 6. Главный экран ---------- */
.hero{
  padding-top: clamp(64px, 9vw, 128px);
  border-bottom: 1px solid var(--line);
}

.hero__inner{
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.hero__title{
  max-width: 15ch;
  font-size: clamp(2.55rem, 6.2vw, 5.3rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.02em;
}
.hero__title em{
  font-style: normal;
  color: var(--accent);
}

.hero__subline{
  max-width: 56ch;
  margin-top: clamp(24px, 3vw, 36px);
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: var(--ink-soft);
}

.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(32px, 4vw, 52px);
}

.hero__figure{
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}
.hero__figure svg{
  width: 100%;
  height: auto;
  font-family: var(--font);
}

/* Маркеры доверия */
.hero__trust{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(56px, 7vw, 104px);
  border-top: 1px solid var(--line);
}

.hero__trust-item{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 40px) clamp(28px, 3.4vw, 46px) 0;
}
.hero__trust-item + .hero__trust-item{
  border-left: 1px solid var(--line);
  padding-left: clamp(20px, 2.5vw, 40px);
}

.hero__trust-value{
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.1;
}

.hero__trust-label{
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ---------- 7. Услуги ---------- */
.services{ border-bottom: 1px solid var(--line); }

.services__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.service{
  background: var(--bg);
  padding: clamp(28px, 3vw, 44px) clamp(24px, 2.4vw, 36px) clamp(34px, 3.4vw, 52px);
  transition: background var(--t-fast);
}
.service:hover{ background: var(--bg-soft); }

.service__icon{
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: clamp(28px, 4vw, 56px);
  color: var(--ink);
  transition: color var(--t-fast);
}
.service:hover .service__icon{ color: var(--accent); }
.service__icon svg{ width: 100%; height: 100%; }

.service__title{
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
  min-height: 3.2em;
}

.service__text{
  margin-top: 14px;
  font-size: .94rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---------- 8. О компании ---------- */
.about{ border-bottom: 1px solid var(--line); }

.about__grid{
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}

.about__content .section-head{ margin-bottom: clamp(28px, 4vw, 48px); }

.about__text p{
  max-width: 58ch;
  color: var(--ink-soft);
}
.about__text p + p{ margin-top: 1.2em; }

/* Счётчики */
.stats{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.stat{
  display: flex;
  flex-direction: column-reverse; /* визуально: число сверху, подпись снизу */
  gap: 8px;
  padding: clamp(26px, 3vw, 42px) clamp(20px, 2.4vw, 36px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat__value{
  display: flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}

.stat__num{
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.stat__plus{
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 300;
  color: var(--accent);
}

.stat__label{
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 9. Проекты ---------- */
.projects{ border-bottom: 1px solid var(--line); }

.projects__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px);
}

.project__visual{
  overflow: hidden;
  border: 1px solid var(--line);
}
.project__visual svg{
  width: 100%;
  height: auto;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.project:hover .project__visual svg{ transform: scale(1.045); }

.project__meta{ padding-top: 22px; }

.project__tag{
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.project__title{
  margin-top: 10px;
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  transition: color var(--t-fast);
}
.project:hover .project__title{ color: var(--accent-ink); }

.project__facts{
  display: flex;
  gap: clamp(28px, 3vw, 48px);
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.project__fact dt{
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.project__fact dd{
  margin-top: 4px;
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* ---------- 10. Этапы (тёмная секция) ---------- */
.steps{
  background: var(--ink);
  color: var(--paper);
}

.steps .section-label{ color: var(--paper-soft); }
.steps .section-label__num{ color: var(--accent); }

.steps__list{
  border-top: 1px solid var(--line-inv);
}

.step{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(16px, 3vw, 64px);
  align-items: start;
  padding-block: clamp(28px, 3.6vw, 52px);
  border-bottom: 1px solid var(--line-inv);
}

.step__num{
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.step__title{
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.step__text{
  max-width: 56ch;
  margin-top: 12px;
  font-size: .97rem;
  line-height: 1.7;
  color: var(--paper-soft);
}

/* ---------- 11. Преимущества ---------- */
.benefits{ border-bottom: 1px solid var(--line); }

.benefits__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.benefit{
  background: var(--bg);
  padding: clamp(28px, 3.4vw, 52px) clamp(24px, 3vw, 48px) clamp(34px, 3.8vw, 56px);
  transition: background var(--t-fast);
}
.benefit:hover{ background: var(--bg-soft); }

.benefit__num{
  display: block;
  margin-bottom: clamp(24px, 3.4vw, 48px);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent-ink);
}

.benefit__title{
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  max-width: 22ch;
}

.benefit__text{
  margin-top: 14px;
  max-width: 50ch;
  font-size: .96rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---------- 12. Контакты ---------- */
.contacts__grid{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}

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

.contacts__row{
  display: grid;
  grid-template-columns: minmax(120px, 2fr) 3fr;
  gap: 16px;
  padding-block: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
}

.contacts__row dt{
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .35em;
}

.contacts__row dd{
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .01em;
}

.contacts__link{
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.contacts__link:hover{
  color: var(--accent-ink);
  border-bottom-color: var(--accent-ink);
}

/* Форма */
.form__intro{
  margin-bottom: clamp(24px, 3vw, 36px);
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 44ch;
}

.field{ margin-bottom: 26px; }

.field__label{
  display: block;
  margin-bottom: 6px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.field__input{
  display: block;
  width: 100%;
  padding: .75em 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font: 300 1.1rem/1.5 var(--font);
  color: var(--ink);
  transition: border-color var(--t-fast);
  resize: vertical;
}

.field__input::placeholder{ color: rgba(22, 24, 29, .38); }

.field__input:hover{ border-bottom-color: rgba(22, 24, 29, .4); }

.field__input:focus{
  outline: none;
  border-bottom-color: var(--ink);
  box-shadow: 0 1px 0 var(--ink);
}

.field.is-invalid .field__input{
  border-bottom-color: var(--accent-ink);
  box-shadow: 0 1px 0 var(--accent-ink);
}

.field__error{
  display: block;
  min-height: 1.3em;
  margin-top: 7px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--accent-ink);
}

.form__submit{ margin-top: 10px; width: 100%; max-width: 320px; }

.form__note{
  margin-top: 18px;
  font-size: .8rem;
  color: var(--muted);
  max-width: 40ch;
}

/* Сообщение об успехе */
.form__success{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: clamp(28px, 3.4vw, 44px);
  border: 1px solid var(--ink);
  background: var(--bg-soft);
}
.form__success[hidden]{ display: none; }

.form__success-mark{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  color: var(--accent-ink);
}
.form__success-mark svg{ width: 100%; height: 100%; }

.form__success-text{
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
}

/* ---------- 13. Подвал ---------- */
.footer{
  background: var(--ink);
  color: var(--paper);
}

.footer__inner{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: clamp(40px, 5vw, 80px);
  padding-block: clamp(56px, 7vw, 96px);
}

.logo--invert{
  color: var(--paper); /* тёмный фон подвала: тёмные части логотипа становятся светлыми */
}
.logo--invert .logo-mark{ height: 40px; }

.footer__line{
  margin-top: 24px;
  max-width: 40ch;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--paper-soft);
}

.footer__nav-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__nav-link{
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--paper-soft);
  transition: color var(--t-fast);
}
.footer__nav-link:hover{ color: var(--paper); }

.footer__contacts{
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-self: start;
}

.footer__contact{
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .01em;
  transition: color var(--t-fast);
}
.footer__contact:hover{ color: var(--accent); }

.footer__contact-note{
  margin-top: 6px;
  font-size: .9rem;
  color: var(--paper-soft);
}

.footer__bottom{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 26px;
  border-top: 1px solid var(--line-inv);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--paper-soft);
}

.footer__domain{
  font-weight: 700;
  color: var(--paper);
  transition: color var(--t-fast);
}
.footer__domain:hover{ color: var(--accent); }

/* ---------- 14. Появление при скролле ---------- */
html.js [data-reveal]{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
html.js [data-reveal].is-visible{
  opacity: 1;
  transform: none;
}

/* лёгкая «лесенка» внутри сеток */
html.js .services__grid [data-reveal]:nth-child(2),
html.js .projects__grid [data-reveal]:nth-child(3n-1),
html.js .benefits__grid [data-reveal]:nth-child(2){ transition-delay: .1s; }
html.js .services__grid [data-reveal]:nth-child(3),
html.js .projects__grid [data-reveal]:nth-child(3n),
html.js .benefits__grid [data-reveal]:nth-child(3){ transition-delay: .2s; }
html.js .services__grid [data-reveal]:nth-child(4),
html.js .benefits__grid [data-reveal]:nth-child(4){ transition-delay: .3s; }

/* ---------- 15. Адаптив ---------- */
@media (max-width: 1180px){
  .services__grid{ grid-template-columns: repeat(2, 1fr); }
  .service__title{ min-height: 0; }
  .projects__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px){
  .hero__inner{ grid-template-columns: 1fr; }
  .hero__figure{ display: none; }
  .about__grid{ grid-template-columns: 1fr; }
  .contacts__grid{ grid-template-columns: 1fr; gap: 56px; }
  .footer__inner{ grid-template-columns: 1fr 1fr; }
  .footer__contacts{ grid-column: 1 / -1; }
}

@media (max-width: 960px){
  :root{ --header-h: 64px; }

  .header__actions{ margin-left: auto; }
  .header__cta{ display: none; }
  .header__actions .lang-switch{ display: none; } /* на мобильных переключатель живёт в меню */
  .header .logo-mark{ height: 40px; }

  .burger{ display: inline-flex; }

  /* мобильная панель навигации */
  .nav{
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 99;
    margin: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 6px var(--gutter) 32px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  }
  body.menu-open .nav{
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s ease, transform .3s ease;
  }

  .nav__list{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__link{
    display: block;
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
    letter-spacing: .14em;
  }
  .nav__link::after{ content: none; }

  .nav__extra{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-top: 28px;
  }
  .nav__extra .btn{ width: 100%; }
}

@media (max-width: 720px){
  body{ font-size: 16px; }

  .projects__grid{ grid-template-columns: 1fr; }

  .step{ grid-template-columns: 1fr; gap: 18px; }

  .benefits__grid{ grid-template-columns: 1fr; }

  .hero__trust{ grid-template-columns: 1fr; border-bottom: 0; }
  .hero__trust-item{
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
  }
  .hero__trust-item + .hero__trust-item{
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-left: 0;
  }

  .footer__inner{ grid-template-columns: 1fr; gap: 44px; }
  .footer__bottom{ flex-direction: column; }
}

@media (max-width: 520px){
  .services__grid{ grid-template-columns: 1fr; }
  .stats{ grid-template-columns: 1fr 1fr; }
  .stat{ padding: 22px 16px; }
  .hero__actions .btn{ width: 100%; }
  .header__phone{ display: none; }
  .contacts__row{ grid-template-columns: 1fr; gap: 6px; }
  .form__submit{ max-width: none; }
}

/* ---------- 16. Уважение к prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.js [data-reveal]{
    opacity: 1;
    transform: none;
    transition: none;
  }
  .project:hover .project__visual svg{ transform: none; }
}