/* ==========================================================================
   Эко-Кухни
   Палитра: графит #282828 / золото #d5ac63 / кремовый #f8f6f0
   Типографика: Golos Text, 1rem = 10px
   ========================================================================== */

:root {
  --font: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-s: 1rem;
  --radius-m: 2.6rem;
  --radius-l: 3.8rem;
  --radius-xl: 6rem;
  --speed: .3s;
  --speed-slow: .6s;
  --ease: cubic-bezier(.23, .65, .74, 1.09);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: 3rem;
  --gap: 3rem;

  --gold: #d5ac63;
  --graphite: #282828;
  --cream: #f8f6f0;
  --sand: #c0b6ac;
}

/* Тёмная тема (по умолчанию) */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --base: #1c1c1c;
  --base-rgb: 28, 28, 28;
  --base-tint: #282828;
  --base-shade: #141414;
  --base-opp: #f8f6f0;
  --accent: #d5ac63;
  --additional: #c0b6ac;
  --st-medium: #5c5a57;
  --st-muted: #353432;
  --t-bright: #ffffff;
  --t-medium: #b4b0aa;
  --t-muted: #8a8681;
  --t-muted-extra: #4a4845;
  --t-opp-bright: #1c1c1c;
  --t-opp-medium: #414141;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
}

/* Светлая тема */
:root[data-theme="light"] {
  color-scheme: light;
  --base: #f8f6f0;
  --base-rgb: 248, 246, 240;
  --base-tint: #ffffff;
  --base-shade: #e6e2d8;
  --base-opp: #282828;
  --accent: #d5ac63;
  --additional: #c0b6ac;
  --st-medium: #948c85;
  --st-muted: #e0dbd0;
  --t-bright: #1c1c1c;
  --t-medium: #414141;
  --t-muted: #737373;
  --t-muted-extra: #c9c2b6;
  --t-opp-bright: #ffffff;
  --t-opp-medium: #c9c5bf;
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-semibold: 700;
}

/* --- База ---------------------------------------------------------------- */

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

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--base);
  color: var(--t-medium);
  font-family: var(--font);
  font-size: 1.8rem;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  overflow-x: hidden;
  transition: background-color var(--speed), color var(--speed);
}

body.loading, body.menu-open { overflow: hidden; }

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: #1c1c1c; }

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

.t-bright { color: var(--t-bright); }

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

.section { padding: 8rem 0; position: relative; }
.section--tight { padding: 3rem 0; }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 3rem;
}
.col-5 { grid-column: span 5; }
.col-7 { grid-column: span 7; }

/* --- Заголовки ----------------------------------------------------------- */

.section-title {
  color: var(--t-bright);
  font-size: clamp(3.6rem, 5.4vw, 8rem);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
}

.section-descr {
  font-size: 2.2rem;
  max-width: 46rem;
}

.section-head { margin-bottom: 6rem; max-width: 120rem; }
.section-head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 3rem; max-width: none;
}

.point-subtitle {
  display: inline-flex; align-items: center; gap: 1.2rem;
  color: var(--t-bright);
  font-size: 2.2rem;
  font-weight: var(--fw-medium);
}
.point-subtitle::before {
  content: ""; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--accent); flex: none;
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 1rem;
  height: 5.6rem; padding: 0 2.8rem;
  border-radius: 10rem;
  font-size: 1.8rem; font-weight: var(--fw-medium); line-height: 1;
  white-space: nowrap;
  transition: background-color var(--speed), color var(--speed), border-color var(--speed);
}

.btn__caption {
  position: relative; display: block; overflow: hidden;
  height: 1.2em; line-height: 1.2;
}
/* сам текст прозрачный (остаётся для скринридеров и ширины), видны две копии из data-text */
.btn__caption { -webkit-text-fill-color: transparent; }
.btn__caption::before, .btn__caption::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0;
  -webkit-text-fill-color: currentColor;
  transition: transform var(--speed-slow) var(--ease-out);
}
.btn__caption::after { top: 100%; }
.btn:hover .btn__caption::before, .btn:hover .btn__caption::after { transform: translateY(-100%); }

.btn__icon { width: 1.8rem; height: 1.8rem; transition: transform var(--speed) var(--ease); flex: none; }
.btn:hover .btn__icon { transform: translate(.3rem, -.3rem); }

.btn-outline { border: 1px solid var(--st-medium); color: var(--t-bright); }
.btn-outline:hover { background: var(--base-opp); border-color: var(--base-opp); color: var(--t-opp-bright); }

.btn-outline--dark { border-color: rgba(28, 28, 28, .45); color: #1c1c1c; }
.btn-outline--dark:hover { background: #1c1c1c; border-color: #1c1c1c; color: #fff; }

.btn-outline--light { border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn-outline--light:hover { background: #fff; border-color: #fff; color: #1c1c1c; }

.btn-solid { background: var(--accent); color: #1c1c1c; }
.btn-solid:hover { background: #fff; }
.btn-solid--dark { background: #1c1c1c; color: #fff; }
.btn-solid--dark:hover { background: #fff; color: #1c1c1c; }

.btn-round {
  display: grid; place-items: center;
  width: 8rem; height: 8rem; border-radius: 50%;
  transition: transform var(--speed) var(--ease), background-color var(--speed);
}
.btn-round svg { width: 3rem; height: 3rem; transition: transform var(--speed) var(--ease); }
.btn-round:hover { transform: scale(1.08); }
.btn-round:hover svg { transform: rotate(45deg); }
.btn-round--accent { background: var(--accent); color: #1c1c1c; }
.btn-round--base { background: #1c1c1c; color: #fff; }
.btn-round--opp { background: var(--base-opp); color: var(--t-opp-bright); }

.tag {
  display: inline-flex; align-items: center;
  height: 3.6rem; padding: 0 1.6rem;
  border: 1px solid currentColor; border-radius: 10rem;
  font-size: 1.5rem; font-weight: var(--fw-medium); line-height: 1; white-space: nowrap;
}
.tag--glass {
  border-color: transparent; color: #fff;
  background: rgba(20, 20, 20, .45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* --- Прелоадер ----------------------------------------------------------- */

.loader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 3rem var(--gutter);
  background: var(--base);
  transition: transform .9s var(--ease-out), visibility 0s .9s;
}
.loader__count {
  color: var(--t-bright);
  font-size: clamp(8rem, 18vw, 26rem);
  font-weight: var(--fw-medium);
  line-height: .85; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.loader__percent { color: var(--accent); }
body:not(.loading) .loader { transform: translateY(-100%); visibility: hidden; }

/* --- Шапка и меню -------------------------------------------------------- */

.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 2rem var(--gutter);
  pointer-events: none;
}
.header > * { pointer-events: auto; }

.logo { display: inline-flex; align-items: center; gap: 1.2rem; }
.logo__mark {
  display: grid; place-items: center;
  width: 5.6rem; height: 5.6rem; border-radius: 50%;
  background: var(--accent); color: #1c1c1c;
  transition: transform var(--speed-slow) var(--ease);
}
.logo__mark svg { width: 2.6rem; height: 2.6rem; }
.logo:hover .logo__mark { transform: rotate(-20deg); }
.logo__text {
  color: var(--t-bright);
  font-size: 2.4rem; font-weight: var(--fw-semibold); letter-spacing: -.03em;
  transition: opacity var(--speed), transform var(--speed);
}
body.scrolled .logo__text { opacity: 0; transform: translateX(-1rem); pointer-events: none; }

.header__controls { display: flex; align-items: center; gap: 1rem; }
.header .btn-outline, .theme-switch {
  background: rgba(var(--base-rgb), .6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.header .btn-outline:hover { background: var(--base-opp); }

.theme-switch {
  display: grid; place-items: center;
  width: 5.6rem; height: 5.6rem; border-radius: 50%;
  border: 1px solid var(--st-medium); color: var(--t-bright);
  transition: transform var(--speed) var(--ease), border-color var(--speed);
}
.theme-switch:hover { transform: rotate(30deg); border-color: var(--accent); }
.theme-switch svg { width: 2.2rem; height: 2.2rem; }
:root[data-theme="dark"] .icon-moon, :root[data-theme="light"] .icon-sun { display: none; }

.hamburger {
  position: fixed; top: 2rem; left: 50%; z-index: 110;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
  width: 9.6rem; height: 5.6rem; margin-left: -4.8rem;
  border-radius: 10rem;
  background: var(--base-opp);
  transition: transform var(--speed) var(--ease), background-color var(--speed);
}
.hamburger:hover { transform: scale(1.06); }
.hamburger__line {
  width: 3.2rem; height: 2px; border-radius: 2px; background: var(--t-opp-bright);
  transition: transform var(--speed) var(--ease);
}
body.menu-open .hamburger { background: var(--accent); }
body.menu-open .hamburger__line { background: #1c1c1c; }
body.menu-open .hamburger__line:first-child { transform: translateY(.45rem) rotate(20deg); }
body.menu-open .hamburger__line:last-child { transform: translateY(-.45rem) rotate(-20deg); }

.menu {
  position: fixed; inset: 0; z-index: 100;
  padding: 1rem;
  visibility: hidden;
  transition: visibility 0s .7s;
}
.menu::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .5); opacity: 0;
  transition: opacity var(--speed-slow);
}
.menu__inner {
  position: relative; height: 100%;
  display: grid; grid-template-columns: 7fr 5fr; gap: 3rem;
  padding: 10rem 5rem 4rem;
  border-radius: var(--radius-l);
  background: var(--base-tint);
  overflow-y: auto;
  transform: translateY(-105%);
  transition: transform .7s var(--ease-out);
}
body.menu-open .menu { visibility: visible; transition-delay: 0s; }
body.menu-open .menu::before { opacity: 1; }
body.menu-open .menu__inner { transform: none; }

.menu__left { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; }
.menu__caption { font-size: 1.8rem; color: var(--t-medium); }
.main-menu { display: flex; flex-direction: column; }
.main-menu__link {
  display: inline-flex; align-items: center; gap: 2rem; align-self: flex-start;
  color: var(--t-bright);
  font-size: clamp(4rem, 6.4vw, 9rem);
  font-weight: var(--fw-medium); line-height: 1.08; letter-spacing: -.04em;
  opacity: 0; transform: translateY(3rem);
  transition: opacity var(--speed-slow), transform var(--speed-slow) var(--ease-out), color var(--speed);
}
.main-menu__link:hover { color: var(--accent); }
body.menu-open .main-menu__link { opacity: 1; transform: none; }
body.menu-open .main-menu__link:nth-child(1) { transition-delay: .25s, .25s, 0s; }
body.menu-open .main-menu__link:nth-child(2) { transition-delay: .3s, .3s, 0s; }
body.menu-open .main-menu__link:nth-child(3) { transition-delay: .35s, .35s, 0s; }
body.menu-open .main-menu__link:nth-child(4) { transition-delay: .4s, .4s, 0s; }
body.menu-open .main-menu__link:nth-child(5) { transition-delay: .45s, .45s, 0s; }
body.menu-open .main-menu__link:nth-child(6) { transition-delay: .5s, .5s, 0s; }
.main-menu__badge {
  padding: .8rem 1.4rem; border-radius: 10rem;
  background: var(--accent); color: #1c1c1c;
  font-size: 1.4rem; font-weight: 600; letter-spacing: 0; line-height: 1;
}

.menu__right { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; }
.menu-promo { position: relative; border-radius: var(--radius-m); overflow: hidden; flex: 1; min-height: 24rem; }
.menu-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.menu-promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0, 0, 0, .7)); }
.menu-promo__caption {
  position: absolute; left: 3rem; right: 3rem; bottom: 3rem; z-index: 1;
  color: #fff; font-size: 2.2rem; font-weight: 500; line-height: 1.25; max-width: 40rem;
}
.menu__data { display: flex; flex-wrap: wrap; gap: 1rem 3rem; font-size: 1.8rem; }
.menu__data a { color: var(--t-bright); }
.menu__data a:hover { color: var(--accent); }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: 13rem var(--gutter) 3rem;
}
.hero__top { flex: 1; display: flex; align-items: center; }

.hero__title {
  width: 100%;
  display: flex; flex-direction: column; gap: .4rem;
  color: var(--t-bright);
  font-size: clamp(4.6rem, 9.4vw, 19rem);
  font-weight: var(--fw-medium);
  line-height: .98; letter-spacing: -.05em;
}
.hero__row { display: flex; align-items: center; flex-wrap: wrap; gap: 0 .28em; overflow: hidden; padding-bottom: .08em; }
.hero__row:nth-child(2) { justify-content: flex-end; }
.hero__row:nth-child(3) { justify-content: center; }
.hero__item {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
}
.hero__row:nth-child(2) .hero__item { transition-delay: .1s; }
.hero__row:nth-child(3) .hero__item { transition-delay: .2s; }
body:not(.loading) .hero__item { transform: none; }
.hero__item--muted { color: var(--t-muted); }
.hero__item--accent { color: var(--accent); }
.hero__item--image {
  width: 1.9em; height: .78em;
  border-radius: 10rem; overflow: hidden;
}
.hero__item--image img { width: 100%; height: 100%; object-fit: cover; }

.hero__bottom {
  display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap);
  align-items: stretch;
  margin-top: 4rem;
}
.hero__data {
  display: grid; grid-template-columns: auto 1fr; gap: 3rem 4rem; align-content: space-between;
  padding-top: 3rem;
  border-top: 1px dashed var(--st-medium);
}
.hero__descr { display: flex; flex-direction: column; gap: 1.4rem; font-size: 2rem; max-width: 50rem; }
.hero__descr .t-bright { font-size: 2.4rem; line-height: 1.3; }
.hero__cred {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 1rem 4rem;
  font-size: 1.6rem; color: var(--t-muted);
}
.hero__cred span { color: var(--t-bright); font-weight: var(--fw-semibold); }

.btn-rotating {
  position: relative; display: block; flex: none;
  width: 16rem; height: 16rem; border-radius: 50%;
  color: var(--t-bright);
}
.btn-rotating__text { width: 100%; height: 100%; animation: spin 18s linear infinite; }
.btn-rotating__text text { fill: currentColor; font-size: 12px; font-weight: 500; text-transform: uppercase; }
.btn-rotating__icon {
  position: absolute; inset: 3.4rem;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: #1c1c1c;
  transition: transform var(--speed) var(--ease);
}
.btn-rotating__icon svg { width: 3.2rem; height: 3.2rem; }
.btn-rotating:hover .btn-rotating__icon { transform: scale(1.1); }
@keyframes spin { to { transform: rotate(360deg); } }

.hero__media {
  position: relative; overflow: hidden;
  min-height: 34rem;
  border-radius: var(--radius-l);
  background: var(--base-tint);
}
.hero__media img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; will-change: transform; }
.hero__media .btn-round { position: absolute; right: 2.4rem; bottom: 2.4rem; }
.hero__media-tag { position: absolute; left: 2.4rem; top: 2.4rem; }

/* --- Манифест ------------------------------------------------------------ */

.manifest {
  color: var(--t-bright);
  font-size: clamp(2.8rem, 3.5vw, 5.6rem);
  font-weight: var(--fw-medium);
  line-height: 1.12; letter-spacing: -.03em;
}
.manifest__controls { margin-top: 4rem; }

.reveal-type .word { opacity: .16; transition: opacity .25s linear; }
.reveal-type .word.is-on { opacity: 1; }

/* --- Цифры --------------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.stats__card {
  grid-column: span 5;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 3rem;
  min-height: 46rem; padding: 4rem;
  border-radius: var(--radius-m);
  background: var(--base-tint);
}
.stats__card--wide { grid-column: span 7; }
.stats__card--accent { background: var(--accent); color: #1c1c1c; }
.stats__card--accent .stats__number, .stats__card--accent .stats__descr { color: #1c1c1c; }
.stats__card--image { color: #fff; }
.stats__card--image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.stats__card--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(20, 20, 20, .15), rgba(20, 20, 20, .82)); }
.stats__card--image:hover > img { transform: scale(1.05); }
.stats__card--image .stats__number, .stats__card--image .stats__descr { color: #fff; }
.stats__card > * { position: relative; z-index: 1; }
.stats__card > img { z-index: 0; position: absolute; }
.stats__content { margin-top: auto; order: 2; }
.stats__card .btn { order: 1; align-self: flex-end; }
.stats__number {
  color: var(--t-bright);
  font-size: clamp(6rem, 8vw, 12rem);
  font-weight: var(--fw-medium); line-height: 1; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.stats__descr { margin-top: 1.6rem; max-width: 38rem; color: var(--t-bright); font-size: 2.2rem; line-height: 1.3; }

/* --- Бегущие строки ------------------------------------------------------ */

.marquee-section { overflow: hidden; }
.marquee { display: flex; overflow: hidden; }
.marquee__track {
  display: flex; align-items: center; flex: none;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee--big { padding: 4rem 0; }
.marquee--big span {
  color: var(--t-muted-extra);
  font-size: clamp(7rem, 13vw, 22rem);
  font-weight: var(--fw-medium); line-height: 1; letter-spacing: -.05em; white-space: nowrap;
}
.marquee--big i {
  flex: none; width: .9em; height: .9em; margin: 0 6rem; border-radius: 50%;
  font-size: clamp(3rem, 5vw, 8rem);
  background: var(--accent);
}

.marquee--cards { margin-top: 3rem; }
.marquee--cards + .marquee--cards { margin-top: 2rem; }
.marquee--cards .marquee__track { animation-duration: 32s; }
.marquee--cards span {
  display: grid; place-items: center; flex: none;
  min-width: 30rem; height: 16rem; margin-right: 2rem; padding: 0 5rem;
  border-radius: var(--radius-m);
  background: var(--base-tint); color: var(--t-bright);
  font-size: 4rem; font-weight: var(--fw-semibold); letter-spacing: -.03em; white-space: nowrap;
}
.marquee--reverse span { background: transparent; border: 1px solid var(--st-muted); font-weight: var(--fw-regular); color: var(--t-medium); }

/* --- Проекты (закреплённый заголовок) ------------------------------------ */

.pinned { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap); align-items: start; }
.pinned__static { position: sticky; top: 12rem; }
.pinned__static-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 3rem; padding-right: 4rem; }
.pinned__scroll { display: flex; flex-direction: column; gap: 6rem; }

.project__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  background: var(--base-tint);
}
.project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.project__media:hover img { transform: scale(1.05); }
.project__tags { position: absolute; left: 2.4rem; bottom: 2.4rem; right: 2.4rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.project__promo { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap; padding: 2.4rem 1rem 0; }
.project__name { color: var(--t-bright); font-size: 3.6rem; font-weight: var(--fw-medium); line-height: 1.1; letter-spacing: -.03em; }
.project__price { color: var(--accent); font-size: 2.4rem; font-weight: var(--fw-medium); white-space: nowrap; }
.project__price small { color: var(--t-muted); font-size: 1.6rem; font-weight: var(--fw-regular); }

/* --- Стопка услуг -------------------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: 3rem; }
.stack__item {
  position: sticky; top: 10rem;
  display: grid; grid-template-columns: 7fr 5fr; gap: 3rem;
  min-height: 56rem; padding: 4rem;
  border-radius: var(--radius-l);
  overflow: hidden;
}
.stack__item:nth-child(2) { top: 12rem; }
.stack__item:nth-child(3) { top: 14rem; }
.stack__item:nth-child(4) { top: 16rem; }

.stack__item--opp { background: var(--cream); color: #414141; --card-title: #1c1c1c; }
.stack__item--accent { background: var(--gold); color: #2e2a22; --card-title: #1c1c1c; }
.stack__item--tint { background: var(--graphite); color: #b4b0aa; --card-title: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.stack__item--add { background: var(--sand); color: #2e2e2e; --card-title: #1c1c1c; }

.stack__body { display: flex; flex-direction: column; justify-content: space-between; gap: 4rem; }
.stack__title {
  color: var(--card-title);
  font-size: clamp(3.4rem, 4.6vw, 7rem);
  font-weight: 500; line-height: 1; letter-spacing: -.04em;
  max-width: 14em;
}
.stack__info { display: flex; flex-direction: column; gap: 2.4rem; max-width: 62rem; font-size: 2rem; }
.stack__tags { display: flex; flex-wrap: wrap; gap: .8rem; color: var(--card-title); }
.stack__image { position: relative; border-radius: var(--radius-m); overflow: hidden; min-height: 28rem; }
.stack__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack__item .btn-round { position: absolute; top: 5.6rem; right: 5.6rem; }

/* --- Этапы --------------------------------------------------------------- */

.approach__item {
  position: relative;
  display: grid; grid-template-columns: 2fr 4fr 6fr; gap: var(--gap); align-items: center;
  padding: 4.4rem 0;
  border-top: 1px solid var(--st-muted);
}
.approach__item:last-child { border-bottom: 1px solid var(--st-muted); }
.approach__item::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
  background: var(--accent);
  transition: width .8s var(--ease-out);
}
.approach__item:hover::before { width: 100%; }
.approach__num {
  color: var(--t-muted-extra);
  font-size: clamp(5rem, 6vw, 9rem); font-weight: var(--fw-medium); line-height: 1; letter-spacing: -.05em;
  transition: color var(--speed);
}
.approach__item:hover .approach__num { color: var(--accent); }
.approach__title { color: var(--t-bright); font-size: clamp(2.8rem, 3vw, 4.4rem); font-weight: var(--fw-medium); line-height: 1.1; letter-spacing: -.03em; }
.approach__descr { font-size: 2.2rem; max-width: 64rem; }

/* --- Условия ------------------------------------------------------------- */

.awards__item {
  display: grid; grid-template-columns: 3fr 4fr 4fr 1fr; gap: var(--gap); align-items: center;
  padding: 3.6rem 2rem;
  border-top: 1px solid var(--st-muted);
  border-radius: 0;
  transition: background-color var(--speed), border-radius var(--speed), border-color var(--speed), padding var(--speed);
}
.awards__item:last-child { border-bottom: 1px solid var(--st-muted); }
.awards__item:hover { background: var(--base-tint); border-radius: var(--radius-m); border-color: transparent; padding-left: 4rem; padding-right: 4rem; }
.awards__item:hover + .awards__item { border-top-color: transparent; }
.awards__tag { font-size: 1.8rem; color: var(--t-muted); }
.awards__title { color: var(--t-bright); font-size: clamp(3rem, 3.4vw, 5rem); font-weight: var(--fw-medium); line-height: 1; letter-spacing: -.04em; }
.awards__descr { font-size: 1.8rem; }
.awards__arrow {
  justify-self: end; display: grid; place-items: center;
  width: 6rem; height: 6rem; border-radius: 50%;
  border: 1px solid var(--st-medium); color: var(--t-bright);
  transition: background-color var(--speed), color var(--speed), border-color var(--speed), transform var(--speed) var(--ease);
}
.awards__arrow svg { width: 2.4rem; height: 2.4rem; }
.awards__item:hover .awards__arrow { background: var(--accent); border-color: var(--accent); color: #1c1c1c; transform: rotate(45deg); }

/* --- Калькулятор --------------------------------------------------------- */

.calc { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); }
.calc__form, .calc__result { padding: 5rem; border-radius: var(--radius-l); }
.calc__form { background: var(--base-tint); display: flex; flex-direction: column; gap: 4rem; }
.calc__form .section-title { margin-top: -2rem; font-size: clamp(3.4rem, 4.4vw, 6.4rem); }

.calc__group legend {
  display: flex; align-items: baseline; justify-content: space-between; width: 100%;
  margin-bottom: 1.6rem;
  color: var(--t-muted); font-size: 1.8rem;
}
.calc__length { color: var(--t-bright); font-size: 3rem; font-weight: var(--fw-medium); letter-spacing: -.03em; }

.chips { display: flex; flex-wrap: wrap; gap: 1rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; height: 5.6rem; padding: 0 2.6rem;
  border: 1px solid var(--st-medium); border-radius: 10rem;
  color: var(--t-bright); font-size: 1.8rem; font-weight: var(--fw-medium);
  transition: background-color var(--speed), color var(--speed), border-color var(--speed);
}
.chip:hover span { border-color: var(--accent); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #1c1c1c; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

.range { -webkit-appearance: none; appearance: none; width: 100%; height: 3.2rem; background: transparent; cursor: pointer; margin: 0; }
.range::-webkit-slider-runnable-track { height: .4rem; border-radius: 1rem; background: linear-gradient(90deg, var(--accent) var(--fill, 23%), var(--st-muted) var(--fill, 23%)); }
.range::-moz-range-track { height: .4rem; border-radius: 1rem; background: var(--st-muted); }
.range::-moz-range-progress { height: .4rem; border-radius: 1rem; background: var(--accent); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 3.2rem; height: 3.2rem; margin-top: -1.4rem; border-radius: 50%; background: var(--accent); border: .6rem solid var(--base-tint); box-shadow: 0 0 0 1px var(--accent); }
.range::-moz-range-thumb { width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); border: .6rem solid var(--base-tint); box-shadow: 0 0 0 1px var(--accent); }
.range__scale { display: flex; justify-content: space-between; font-size: 1.5rem; color: var(--t-muted); }

.calc__result { background: var(--accent); color: #2e2a22; display: flex; flex-direction: column; }
.calc__label { font-size: 1.8rem; font-weight: 500; }
.calc__price {
  margin-top: 1.6rem; color: #1c1c1c;
  font-size: clamp(4.4rem, 5.2vw, 8rem); font-weight: 500; line-height: 1; letter-spacing: -.05em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.calc__note { margin: 2.4rem 0 4rem; font-size: 1.7rem; }
.calc__result .form { margin-top: auto; }

/* --- Формы --------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: .8rem; font-size: 1.5rem; }
.field input {
  width: 100%; height: 6.4rem; padding: 0 2.6rem;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 10rem;
  background: rgba(255, 255, 255, .08); color: #fff;
  font-size: 1.8rem;
  transition: border-color var(--speed), background-color var(--speed);
}
.field input::placeholder { color: rgba(255, 255, 255, .5); }
.field input:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, .14); }
.field input.is-invalid { border-color: #e2725b; }
.form .btn { height: 6.4rem; width: 100%; }
.form__status { min-height: 2.2rem; font-size: 1.5rem; }
.form__status:empty { display: none; }
.form__policy { font-size: 1.3rem; opacity: .7; }
.form__policy a { text-decoration: underline; text-underline-offset: 3px; }

.form--compact .field input { border-color: rgba(28, 28, 28, .35); background: rgba(255, 255, 255, .35); color: #1c1c1c; }
.form--compact .field input::placeholder { color: rgba(28, 28, 28, .55); }
.form--compact .field input:focus { border-color: #1c1c1c; background: rgba(255, 255, 255, .6); }
.form--compact .field input.is-invalid { border-color: #a3321c; }
.form--compact .form__status { color: #1c1c1c; font-weight: 500; }

/* --- CTA ----------------------------------------------------------------- */

.cta {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap); align-items: end;
  min-height: 62rem; padding: 6rem;
  border-radius: var(--radius-l);
  background: #141414; color: #d9d5cf;
}
.cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(20, 20, 20, .85) 20%, rgba(20, 20, 20, .35)); }
.cta > * { position: relative; z-index: 1; }
.cta > .cta__bg { position: absolute; z-index: 0; }
.cta__title { color: #fff; font-size: clamp(4rem, 6.4vw, 11rem); font-weight: 500; line-height: .98; letter-spacing: -.05em; text-wrap: balance; }
.cta__descr { margin-top: 3rem; max-width: 54rem; font-size: 2.2rem; }
.cta__form {
  padding: 3rem; border-radius: var(--radius-m);
  background: rgba(40, 40, 40, .55);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .1);
}
.cta__form .form__status { color: var(--accent); }

/* --- Футер --------------------------------------------------------------- */

.footer { padding: 4rem 0 3rem; }
.footer__top {
  display: grid; grid-template-columns: 4fr 5fr 3fr; gap: var(--gap);
  padding: 6rem 0;
  border-top: 1px solid var(--st-muted);
}
.footer__nav { display: flex; flex-direction: column; align-items: flex-start; }
.footer__nav a {
  color: var(--t-bright);
  font-size: clamp(3rem, 3.4vw, 5rem); font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: -.04em;
  transition: color var(--speed), transform var(--speed) var(--ease);
}
.footer__nav a:hover { color: var(--accent); transform: translateX(1rem); }
.footer__nav sup { font-size: .35em; color: var(--accent); letter-spacing: 0; vertical-align: top; position: relative; top: .5em; }
.footer__contacts { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; color: var(--t-muted); }
.footer__big {
  color: var(--t-bright);
  font-size: clamp(2.4rem, 2.6vw, 3.8rem); font-weight: var(--fw-medium); letter-spacing: -.03em; line-height: 1.2;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--speed-slow) var(--ease-out), color var(--speed);
  overflow-wrap: anywhere;
}
.footer__big:hover { background-size: 100% 1px; color: var(--accent); }
.footer__card { padding: 3rem; border-radius: var(--radius-m); background: var(--base-tint); align-self: start; }
.footer__card-title { margin-bottom: 1.6rem; color: var(--t-bright); font-size: 2.2rem; font-weight: var(--fw-medium); }
.footer__card address { display: flex; flex-direction: column; gap: 1.2rem; font-size: 1.6rem; }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 3rem;
  padding-top: 3rem; border-top: 1px solid var(--st-muted);
  font-size: 1.4rem; color: var(--t-muted);
}
.footer__bottom a:hover { color: var(--accent); }

/* --- Появление при скролле ----------------------------------------------- */

.anim { opacity: 0; transform: translateY(4rem); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.anim.is-visible { opacity: 1; transform: none; }
.stats__card.anim { transform: translateY(4rem) scale(.96); }
.stats__card.anim.is-visible { transform: none; }

/* --- Адаптив ------------------------------------------------------------- */

@media (min-width: 1600px) {
  :root { --gutter: 6rem; }
}

@media (max-width: 1199px) {
  .col-5, .col-7 { grid-column: 1 / -1; }
  .hero__bottom { grid-template-columns: 1fr; }
  .hero__media { min-height: 0; aspect-ratio: 16 / 9; }
  .stats__card, .stats__card--wide { grid-column: span 6; min-height: 40rem; }
  .pinned { grid-template-columns: 1fr; gap: 5rem; }
  .pinned__static { position: static; }
  .pinned__static-inner { padding-right: 0; }
  .stack__item { grid-template-columns: 1fr; min-height: 0; }
  .stack__image { aspect-ratio: 16 / 9; min-height: 0; }
  .stack__title { padding-right: 10rem; }
  .approach__item { grid-template-columns: 10rem 1fr; }
  .approach__descr { grid-column: 2; }
  .awards__item { grid-template-columns: 1fr auto; gap: 1.2rem 3rem; }
  .awards__tag, .awards__title, .awards__descr { grid-column: 1; }
  .awards__arrow { grid-column: 2; grid-row: 1 / span 3; }
  .calc, .cta { grid-template-columns: 1fr; }
  .cta { align-items: start; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__card { grid-column: 1 / -1; }
  .menu__inner { grid-template-columns: 1fr; padding: 10rem 3rem 3rem; }
  .menu-promo { display: none; }
}

@media (max-width: 767px) {
  :root { --gutter: 1.6rem; --gap: 1.6rem; --radius-m: 2rem; --radius-l: 2.6rem; }
  body { font-size: 1.6rem; }
  .section { padding: 5rem 0; }
  .section--tight { padding: 2rem 0; }
  .section-head { margin-bottom: 3.6rem; }
  .section-head--row { flex-direction: column; align-items: flex-start; }
  .section-descr, .approach__descr, .cta__descr { font-size: 1.8rem; }
  .point-subtitle { font-size: 1.8rem; }

  .header { padding: 1.2rem var(--gutter); }
  .logo__text { display: none; }
  .logo__mark, .theme-switch { width: 4.8rem; height: 4.8rem; }
  .hamburger { top: 1.2rem; width: 7.6rem; height: 4.8rem; margin-left: -3.8rem; }
  .hamburger__line { width: 2.6rem; }
  .header .btn { height: 4.8rem; padding: 0 1.8rem; font-size: 1.5rem; }
  .header .btn .btn__icon { display: none; }
  .menu { padding: .6rem; }
  .menu__inner { padding: 8rem 2rem 2.4rem; }
  .main-menu__link { gap: 1rem; }
  .main-menu__badge { font-size: 1.1rem; padding: .6rem 1rem; }
  .menu__data { flex-direction: column; font-size: 1.6rem; }

  .hero { padding-top: 9rem; }
  .hero__title { font-size: clamp(3.2rem, 11.4vw, 7rem); gap: .6rem; }
  .hero__row:nth-child(2) { justify-content: flex-start; }
  .hero__row:nth-child(3) { justify-content: flex-start; }
  .hero__bottom { margin-top: 3rem; }
  .hero__data { grid-template-columns: 1fr; gap: 2.4rem; padding-top: 2.4rem; }
  .btn-rotating { width: 12rem; height: 12rem; order: 3; }
  .btn-rotating__icon { inset: 2.6rem; }
  .hero__descr { font-size: 1.7rem; }
  .hero__descr .t-bright { font-size: 2rem; }
  .hero__media { aspect-ratio: 4 / 3; }
  .btn-round { width: 6rem; height: 6rem; }
  .btn-round svg { width: 2.4rem; height: 2.4rem; }

  .stats { grid-template-columns: 1fr; }
  .stats__card, .stats__card--wide { grid-column: auto; min-height: 30rem; padding: 2.4rem; }
  .stats__descr { font-size: 1.8rem; }

  .marquee--big { padding: 2rem 0; }
  .marquee--big i { margin: 0 2.4rem; }
  .marquee--cards span { min-width: 18rem; height: 10rem; padding: 0 3rem; font-size: 2.4rem; margin-right: 1.2rem; }

  .pinned__scroll { gap: 4rem; }
  .project__name { font-size: 2.6rem; }
  .project__price { font-size: 2rem; }
  .project__tags { left: 1.4rem; right: 1.4rem; bottom: 1.4rem; }
  .tag { height: 3.2rem; padding: 0 1.2rem; font-size: 1.3rem; }

  .stack { gap: 1.6rem; }
  .stack__item, .stack__item:nth-child(n) { position: relative; top: auto; padding: 2.4rem; gap: 2.4rem; }
  .stack__item .btn-round { top: 2rem; right: 2rem; }
  .stack__title { padding-right: 7rem; }
  .stack__info { font-size: 1.7rem; }
  .stack__image { aspect-ratio: 4 / 3; }

  .approach__item { grid-template-columns: 1fr; gap: 1rem; padding: 3rem 0; }
  .approach__descr { grid-column: 1; }
  .awards__item { padding: 2.6rem 0; }
  .awards__item:hover { padding-left: 1.6rem; padding-right: 1.6rem; }
  .awards__arrow { width: 4.8rem; height: 4.8rem; }

  .calc__form, .calc__result { padding: 2.4rem; }
  .calc__form { gap: 3rem; }
  .calc__form .section-title { margin-top: -1rem; }
  .chip span { height: 4.8rem; padding: 0 1.8rem; font-size: 1.6rem; }

  .cta { padding: 2.4rem; min-height: 0; }
  .cta__form { padding: 2rem; }
  .field input, .form .btn { height: 5.6rem; }

  .footer__top { grid-template-columns: 1fr; padding: 4rem 0; gap: 4rem; }
  .footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .anim, .hero__item { opacity: 1; transform: none; }
  .reveal-type .word { opacity: 1; }
}