/* ============================================================
   БережноДом — дизайн-система 2026
   Премиальная стройка/ремонт/дизайн. Графит + тёплая бумага + терракота.
   Шрифты: Prata (заголовки) + Manrope (интерфейс).
   ============================================================ */

:root {
  /* Палитра — Майами / тропическое лето: закат, коралл, бирюза, золото */
  --bg: #fff5ec;
  --bg-deep: #ffe8dc;
  --surface: #ffffff;
  --ink: #23212b;            /* глубокий нейтральный (читается на всём пейзаже) */
  --ink-2: #55515f;
  --muted: #8b8794;
  --line: rgba(35, 33, 43, .12);
  --line-2: rgba(35, 33, 43, .06);
  --accent: #ff6a3d;         /* закатный оранж-коралл */
  --accent-2: #e8551f;
  --accent-soft: #ffe1d4;
  --sky: #2f8fd6;            /* небесно-синий (для акцентов неба) */
  --sky-deep: #1f6fb0;
  --aqua: #10c7c0;           /* тропическая бирюза */
  --aqua-2: #0aa39d;
  --sun: #ffc531;            /* солнце-золото */
  --sun-2: #ff8a3d;          /* закатный оранж */
  --palm: #23c17a;
  --sky-1: #fff8f2;
  --sky-2: #ffeede;
  /* Лаймовые блоки (там, где были тёмно-зелёные) — тёмный текст */
  --lime: #a8e05a;
  --lime-2: #c6f24a;
  --dark: #aee04f;           /* лаймовый блок */
  --dark-2: #c6f24a;
  --on-dark: #24311a;
  --on-dark-muted: #46551f;
  --ok: #23c17a;

  /* Форма */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --max: 1320px;
  --gutter: clamp(18px, 4vw, 48px);
  --shadow: 0 20px 60px rgba(30, 22, 12, .12);
  --shadow-sm: 0 6px 24px rgba(30, 22, 12, .08);
  --shadow-lg: 0 40px 100px rgba(30, 22, 12, .18);

  /* Типографика */
  --serif: "Prata", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  /* Пейзаж: синее небо (верх) → закат оранж-розовый (низ, у футера) */
  background: linear-gradient(to bottom,
    #9fd2ff 0%,
    #c4e6ff 14%,
    #e7f4fb 32%,
    #ffe7cf 56%,
    #ffb695 78%,
    #ff8fa0 100%);
  background-attachment: scroll;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
}
/* (дрейф-блики отключены — фон теперь единый пейзажный градиент) */

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
p { margin: 0 0 1em; }

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

.section { padding: clamp(44px, 6vw, 88px) 0; }
.section--tight { padding: clamp(32px, 4vw, 56px) 0; }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--deep { background: var(--bg-deep); }

/* Надзаголовок-«глазок» */
.eyebrow {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 1.1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: .6; }
.section--dark .eyebrow { color: var(--sun); }

.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-2); max-width: 62ch; }
.section--dark .lead { color: var(--on-dark-muted); }
.muted { color: var(--muted); }

/* ---------- Кнопки ---------- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--sans); font-weight: 700; font-size: .98rem;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn--accent { --btn-bg: var(--accent); --btn-fg: #fff; }
.btn--accent:hover { background: var(--accent-2); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--on-dark { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,.28); }
.btn--on-dark:hover { background: #fff; color: var(--ink); }
.btn--lg { padding: 18px 38px; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* ---------- Шапка ---------- */
.site-header { position: sticky; top: 0; z-index: 60; }
.hdr {
  background: #fff6ec;
  border-bottom: 1px solid var(--line-2);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled .hdr { border-color: var(--line); box-shadow: 0 6px 22px rgba(40,20,10,.06); }
.hdr__row { display: flex; align-items: center; gap: 28px; height: 76px; }
.brand { display: inline-flex; align-items: baseline; gap: .12em; font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.02em; }
.brand b { font-weight: 400; }
.brand .brand__dom { color: var(--accent); }
.brand__logo { display: block; height: clamp(48px, 6vw, 64px); width: auto; }
.hdr__nav { display: flex; gap: 26px; margin-inline: auto; }
.hdr__nav a { font-weight: 600; font-size: .97rem; color: var(--ink-2); position: relative; padding: 6px 0; transition: color .2s; white-space: nowrap; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width .25s var(--ease); }
.hdr__nav a:hover, .hdr__nav a.is-active { color: var(--ink); }
.hdr__nav a:hover::after, .hdr__nav a.is-active::after { width: 100%; }
.hdr__side { display: flex; align-items: center; gap: 18px; }
.hdr__quick { display: none; }   /* мини-навигация — только на мобильном */
.hdr__phone { font-weight: 800; font-size: 1.02rem; white-space: nowrap; }
.hdr__phone small { display: block; font-weight: 600; font-size: .68rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.hdr__burger { display: none; width: 44px; height: 44px; border: none; border-radius: 12px; background: transparent; cursor: pointer; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.hdr__burger span, .hdr__burger span::before, .hdr__burger span::after { content: ""; display: block; width: 25px; height: 2.5px; border-radius: 3px; background: var(--ink); position: relative; transition: .3s var(--ease); }
.hdr__burger span::before { position: absolute; top: -7.5px; } .hdr__burger span::after { position: absolute; top: 7.5px; }
body.menu-open .hdr__burger span { background: transparent; }
body.menu-open .hdr__burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .hdr__burger span::after { top: 0; transform: rotate(-45deg); }

/* Солнце в шапке (светит вниз) */
.sun { position: absolute; top: 8px; right: clamp(16px, 7vw, 90px); width: 74px; height: 74px; z-index: 2; pointer-events: none; }
.sun__core { position: absolute; inset: 18px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff2cf, var(--sun) 55%, var(--sun-2));
  box-shadow: 0 0 26px 6px rgba(255,178,62,.6), 0 0 60px 18px rgba(255,178,62,.28); }
.sun__rays { position: absolute; inset: 0; border-radius: 50%; animation: spin 60s linear infinite; }
.sun__rays::before { content: ""; position: absolute; inset: 0;
  background:
    conic-gradient(from 0deg,
      transparent 0 4deg, rgba(255,178,62,.6) 4deg 7deg, transparent 7deg 30deg,
      transparent 30deg 34deg, rgba(255,178,62,.6) 34deg 37deg, transparent 37deg 60deg,
      transparent 60deg 64deg, rgba(255,178,62,.6) 64deg 67deg, transparent 67deg 90deg,
      transparent 90deg 94deg, rgba(255,178,62,.6) 94deg 97deg, transparent 97deg 120deg,
      transparent 120deg 124deg, rgba(255,178,62,.6) 124deg 127deg, transparent 127deg 150deg,
      transparent 150deg 154deg, rgba(255,178,62,.6) 154deg 157deg, transparent 157deg 180deg,
      transparent 180deg 184deg, rgba(255,178,62,.6) 184deg 187deg, transparent 187deg 210deg,
      transparent 210deg 214deg, rgba(255,178,62,.6) 214deg 217deg, transparent 217deg 240deg,
      transparent 240deg 244deg, rgba(255,178,62,.6) 244deg 247deg, transparent 247deg 270deg,
      transparent 270deg 274deg, rgba(255,178,62,.6) 274deg 277deg, transparent 277deg 300deg,
      transparent 300deg 304deg, rgba(255,178,62,.6) 304deg 307deg, transparent 307deg 330deg,
      transparent 330deg 334deg, rgba(255,178,62,.6) 334deg 337deg, transparent 337deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%); mask: radial-gradient(circle, transparent 30%, #000 31%); }
@keyframes spin { to { transform: rotate(360deg); } }
.sky-glow { position: absolute; top: 0; right: clamp(-40px, 3vw, 60px); width: min(72vw, 760px); height: 640px; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 82% -22%, rgba(255,178,62,.30), rgba(255,178,62,.09) 34%, transparent 60%),
              radial-gradient(90% 70% at 88% -12%, rgba(14,165,196,.12), transparent 55%); }
@media (prefers-reduced-motion: reduce) { .sun__rays { animation: none; } }
@media (max-width: 560px) { .sun { width: 56px; height: 56px; top: 10px; } }

/* Мобильное меню */
.mobile-menu { position: fixed; inset: 76px 0 0; background: var(--bg); z-index: 55; padding: 30px var(--gutter) 50px; transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .3s var(--ease); overflow-y: auto; }
body.menu-open .mobile-menu { opacity: 1; transform: none; pointer-events: auto; }
.mobile-menu a { display: block; font-family: var(--serif); font-size: 1.7rem; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mobile-menu .btn { margin-top: 26px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(28px, 4vw, 64px) 0 clamp(32px, 5vw, 72px); }
.hero__grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(30px, 5vw, 72px); align-items: center; }
/* Правая колонка: видео + лаконичная строка цифр под ним, без панелей */
.hero__aside { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 26px); min-width: 0; }
.hero__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1vw, 16px); }
.hero__facts .fact { background: none; border: none; padding: 0; text-align: center; }
.hero__facts .fact:first-child { text-align: left; }
.hero__facts .fact:last-child { text-align: right; }
.hero__facts .fact__num { font-family: var(--serif); font-size: clamp(1.35rem, 1.9vw, 1.8rem); line-height: 1; color: var(--ink); }
.hero__facts .fact__label { margin-top: 5px; font-size: clamp(.68rem, .8vw, .78rem); line-height: 1.25; color: var(--muted); }

/* Рисованный мазок краски под заголовком — «провели кисточкой», оживляет */
.brush {
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 44' preserveAspectRatio='none'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='0.011 0.85' numOctaves='2' seed='7' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='12' xChannelSelector='R' yChannelSelector='G'/></filter><path filter='url(%23b)' fill='%23ff6a3d' d='M6 25 C 80 15 150 17 210 19 C 300 22 360 15 394 22 C 382 35 300 34 200 32 C 120 30 60 35 6 25 Z'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 94%;
  background-size: 100% 0.4em;
  padding-bottom: .1em;
}
/* Лаймовый вариант мазка */
.brush--lime {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 44' preserveAspectRatio='none'><filter id='bl'><feTurbulence type='fractalNoise' baseFrequency='0.011 0.85' numOctaves='2' seed='5' result='n'/><feDisplacementMap in='SourceGraphic' in2='n' scale='12' xChannelSelector='R' yChannelSelector='G'/></filter><path filter='url(%23bl)' fill='%23a4d61f' d='M6 25 C 80 15 150 17 210 19 C 300 22 360 15 394 22 C 382 35 300 34 200 32 C 120 30 60 35 6 25 Z'/></svg>");
}

/* Таблица цен на страницах услуг — спокойная, вместо «тарифов-карточек» */
.ptable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ptable table { width: 100%; border-collapse: collapse; min-width: 640px;
  background: rgba(255,255,255,.5); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.6); border-radius: var(--radius-lg); overflow: hidden; }
.ptable th, .ptable td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.ptable thead th { font-family: var(--sans); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ptable tbody tr:last-child td { border-bottom: none; }
.ptable td.ptable__name { font-family: var(--serif); font-size: 1.18rem; color: var(--ink); white-space: nowrap; }
.ptable td.ptable__desc { color: var(--ink-2); font-size: .96rem; line-height: 1.5; }
.ptable td.ptable__price { font-family: var(--serif); font-size: 1.18rem; color: var(--accent); white-space: nowrap; }
.price-note { color: var(--muted); font-size: .9rem; margin-top: 16px; }
/* Таблица цен на мобильном — вертикальные карточки, без бокового скролла */
@media (max-width: 560px) {
  .ptable { overflow: visible; }
  .ptable table, .ptable tbody, .ptable tr, .ptable td { display: block; width: 100%; }
  .ptable thead { display: none; }
  .ptable table { min-width: 0; }
  .ptable tr { padding: 4px 0 14px; border-bottom: 1px solid var(--line-2); }
  .ptable tbody tr:last-child { border-bottom: none; }
  .ptable td { border: none; padding: 3px 20px; white-space: normal; }
  .ptable td.ptable__name { padding-top: 16px; font-size: 1.25rem; }
  .ptable td.ptable__price { padding-bottom: 14px; font-size: 1.2rem; }
}

/* Заголовок на бетоне — нарисованный мазок с потёками (GPU). Блок во всю ширину:
   текст центрируется на плите, нижние ~42% высоты отданы под потёки. */
/* Заголовок на «мазке» (бетон/краска/ткань) — общий макет */
.concrete-h, .paint-h, .fabric-h {
  display: block; box-sizing: border-box; width: 100%;
  text-align: center;
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .012em;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  line-height: 1.14;
  padding: 2.8em 1.4em 4.1em;         /* текст на плите, картинка целиком, без обрезки */
  margin: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
/* Бетон — тёмный вдавленный текст */
.concrete-h {
  color: #3c3a38;
  text-shadow: 0 1.5px 0.5px rgba(255,255,255,.32), 0 -1px 1px rgba(0,0,0,.4);
  background-image: url("/assets/concrete-drip2.png");
}
/* Краска — белый текст на оранжевом мазке */
.paint-h {
  color: #c94f12;                     /* близко к краске — «дно» продавленной буквы */
  text-shadow: 0 2px 0 rgba(255,240,214,.85), 0 -1px 0 rgba(70,20,0,.55);  /* яркая нижняя кромка + тёмный верх = вдавлено */
  background-image: url("/assets/paint-drip.png");
  padding-top: 2.4em; padding-bottom: 4.5em;   /* текст чуть выше на мазке (сумма та же) */
}
/* Ткань — тёмный текст, будто вдавлен/вышит в мягкие обои; без потёков — симметрично */
.fabric-h {
  color: #4a3c2c;
  text-shadow: 0 1px 0 rgba(255,252,244,.55), 0 -1px 1px rgba(60,40,20,.3);
  background-image: url("/assets/fabric.png");
  padding: 2.5em 2.6em;
}
.hero h1 { margin-bottom: 1.6rem; }
.hero h1 em { font-style: normal; color: var(--sun-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.2rem; }
.hero__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 26/15; box-shadow: var(--shadow-lg); background: var(--bg-deep); }
.hero__media img, .hero__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__badge { position: absolute; left: 20px; bottom: 20px; background: color-mix(in srgb, var(--dark) 78%, transparent); color: #fff; backdrop-filter: blur(6px); padding: 14px 20px; border-radius: var(--radius); }
.hero__badge b { font-family: var(--serif); font-size: 1.8rem; display: block; }
.hero__badge span { font-size: .82rem; color: var(--on-dark-muted); }
/* Логотип-надпись на картинке «О компании» */
.about-wordmark { position: absolute; top: 6%; left: 0; right: 0; z-index: 2; text-align: center;
  font-family: var(--serif); font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1; letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(255,255,255,.75), 0 1px 2px rgba(255,255,255,.9); }
.about-wordmark span { color: var(--ink); }
.about-wordmark b { color: var(--accent); font-weight: inherit; }

/* Полоса статистики */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--radius-lg); overflow: hidden;
  background: rgba(255,255,255,.5); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.6); box-shadow: var(--shadow-sm); }
.stats__item { background: transparent; padding: 30px 26px; border-right: 1px solid var(--line-2); }
.stats__item:last-child { border-right: none; }
.stats .stats__num { color: var(--ink); }
.stats .stats__label { color: var(--ink-2); }
.stats__num { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; }
.stats__num em { font-style: normal; color: var(--sun-2); }
.stats__label { color: var(--muted); font-size: .92rem; margin-top: .5rem; }
.section--dark .stats__label { color: var(--on-dark-muted); }

/* Заголовок секции */
.section-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 60px); }
.section-head--between { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; }

/* ---------- Услуги (карточки) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.svc-card__media { aspect-ratio: 3/2; overflow: hidden; background: var(--bg-deep); }
.svc-card__media img, .svc-card__media video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc-card:hover .svc-card__media img, .svc-card:hover .svc-card__media video { transform: scale(1.05); }
.svc-card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { margin-bottom: .5rem; }
.svc-card p { color: var(--ink-2); font-size: .98rem; }
.svc-card__price { margin-top: auto; padding-top: 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.svc-card__price b { font-family: var(--serif); font-size: 1.35rem; color: var(--accent); }
.svc-card__price span { color: var(--muted); font-size: .85rem; }
.svc-card__link { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; color: var(--accent); margin-top: 16px; }
.svc-card__link::after { content: "→"; transition: transform .25s var(--ease); }
.svc-card:hover .svc-card__link::after { transform: translateX(5px); }

/* ---------- Процесс ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.process__item { counter-increment: step; padding: 30px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); position: relative; }
.section--dark .process__item { background: transparent; border-color: var(--line-2); }
.process__item::before { content: "0" counter(step); font-family: var(--serif); font-size: 2.4rem; color: var(--accent); display: block; margin-bottom: 14px; opacity: .9; }
.process__item h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.process__item p { font-size: .94rem; color: var(--ink-2); margin: 0; }
.section--dark .process__item p { color: var(--on-dark-muted); }

/* ---------- Проекты (сетка) ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.proj-grid--featured { grid-template-columns: repeat(3, 1fr); }
.proj-card { position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5;
  background: var(--bg-deep); border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 16px 38px rgba(45,28,22,.24), 0 3px 10px rgba(45,28,22,.14);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.proj-card:hover { transform: translateY(-8px); box-shadow: 0 34px 72px rgba(45,28,22,.36), 0 6px 16px rgba(45,28,22,.2); }
.proj-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.proj-card:hover img { transform: scale(1.07); }
.proj-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; background: linear-gradient(to top, rgba(15,12,8,.82) 0%, rgba(15,12,8,.15) 45%, transparent 70%); color: #fff; }
.proj-card__tag { align-self: flex-start; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; background: color-mix(in srgb, var(--accent) 90%, #000); padding: 5px 12px; border-radius: var(--radius-pill); margin-bottom: auto; }
.proj-card h3 { color: #fff; font-size: 1.35rem; }
.proj-card__meta { font-size: .88rem; color: rgba(255,255,255,.8); margin-top: 4px; }
.proj-card__count { position: absolute; top: 18px; right: 18px; background: rgba(20,18,24,.55); color: #fff; font-size: .78rem; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-pill); backdrop-filter: blur(6px); }

/* Фильтр-чипы */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.chip { padding: 10px 20px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: .95rem; cursor: pointer; transition: .2s var(--ease); color: var(--ink-2); }
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- CTA-полоса ---------- */
.cta-band { background: var(--dark); color: var(--on-dark); border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.cta-band__inner { padding: clamp(38px, 6vw, 68px); max-width: 640px; }
.cta-band h2 { color: #fff; margin-bottom: .6rem; }
.cta-band p { color: var(--on-dark-muted); }
.cta-band .btn { margin-top: 1.4rem; }
.cta-band::after { content: ""; position: absolute; right: -70px; top: -90px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255,193,49,.55), rgba(255,61,127,.28) 52%, transparent 72%); }

/* ---------- Формы ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 7px; color: var(--ink-2); }
.field input, .field textarea, .field select {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field textarea { min-height: 110px; resize: vertical; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.form-note { font-size: .82rem; color: var(--muted); }
.form-note a { color: var(--accent); }

/* ---------- Модалка заявки ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.is-open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(15,12,8,.55); backdrop-filter: blur(3px); animation: fade .3s var(--ease); }
.modal__card { position: relative; width: 100%; max-width: 460px; background: var(--surface); border-radius: var(--radius-lg); padding: clamp(28px, 5vw, 40px); box-shadow: var(--shadow-lg); animation: pop .35s var(--ease); max-height: 92vh; overflow-y: auto; }
.modal__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); cursor: pointer; font-size: 1.1rem; color: var(--ink-2); }
.modal__close:hover { background: var(--bg); }
.modal h3 { font-size: 1.7rem; margin-bottom: .4rem; }
.modal__sub { color: var(--muted); margin-bottom: 1.4rem; font-size: .96rem; }
.form-success { text-align: center; padding: 20px 0; }
.form-success__ic { width: 66px; height: 66px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 18px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(16px) scale(.97); } }

/* ---------- Плавающая кнопка звонка (моб.) ---------- */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: none; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: #fff; align-items: center; justify-content: center; box-shadow: var(--shadow); border: none; cursor: pointer; }

/* ---------- Подвал ---------- */
.site-footer { background: var(--dark); color: var(--on-dark); padding: clamp(50px, 7vw, 80px) 0 34px; }
.footer__grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 40px; }
.footer__brand { font-family: var(--serif); font-size: 1.7rem; margin-bottom: 14px; }
.footer__brand .brand__dom { color: var(--accent); }
.site-footer p, .site-footer li { color: var(--on-dark-muted); }
.footer__col h4 { font-family: var(--sans); font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; color: #fff; margin-bottom: 16px; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer__col a:hover { color: #fff; }
.footer__phone { font-size: 1.4rem; font-family: var(--serif); color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-size: .84rem; color: var(--on-dark-muted); }
.footer__born { display: inline-flex; align-items: flex-end; gap: 9px; line-height: 1; }
.footer__molochko { height: 40px; width: auto; display: block; }

/* ---------- Утилиты контента ---------- */
.prose { max-width: 72ch; }
.prose p { color: var(--ink-2); }
.prose h2 { margin: 1.6em 0 .5em; }
.prose h3 { margin: 1.4em 0 .4em; }
.prose ul { padding-left: 1.1em; color: var(--ink-2); }
.prose li { margin-bottom: .5em; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; box-shadow: 0 26px 54px rgba(35,45,70,.24), 0 10px 22px rgba(35,45,70,.16); background: var(--bg-deep); }
.split__media img, .split__media video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Список преимуществ */
.checks { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.checks li::before { content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; margin-top: 2px; }

/* Прайс-таблица */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px; display: flex; flex-direction: column; }
.price-card.is-featured { background: linear-gradient(160deg, #ff8f52 0%, #ff5f86 100%); color: #fff; border-color: transparent; }
.price-card.is-featured .btn--accent { --btn-bg: #fff; --btn-fg: #e8553c; }
.price-card__name { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; color: var(--muted); }
.price-card.is-featured .price-card__name { color: rgba(255,255,255,.88); }
.price-card__val { font-family: var(--serif); font-size: 2.4rem; margin: 12px 0 4px; }
.price-card.is-featured .price-card__val { color: #fff; }
.price-card ul { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 11px; font-size: .95rem; color: var(--ink-2); }
.price-card.is-featured ul { color: rgba(255,255,255,.92); }
.price-card .btn { margin-top: auto; }

/* ---------- Детальная проекта (SSR) ---------- */
.breadcrumbs { max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter) 0; color: var(--muted); font-size: .9rem; }
.breadcrumbs a:hover { color: var(--accent); }
.project-detail { padding: clamp(24px,4vw,44px) 0 0; }
.project-detail > * { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.pd-head { margin: 22px auto clamp(24px,4vw,40px); }
.pd-tag { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: 14px; }
.pd-lead { font-size: 1.15rem; color: var(--ink-2); max-width: 60ch; margin-top: 1rem; }
.pd-meta { display: flex; flex-wrap: wrap; gap: 44px; padding: 26px 0; border-block: 1px solid var(--line); margin-bottom: clamp(28px,4vw,44px); }
.pd-meta__item span { display: block; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 5px; }
.pd-meta__item b { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; }
.pd-text { max-width: 72ch; color: var(--ink-2); margin-bottom: clamp(30px,4vw,50px); font-size: 1.05rem; }
.pd-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: clamp(40px,6vw,70px); }
.pd-gallery__item { border-radius: var(--radius); overflow: hidden; background: var(--bg-deep); aspect-ratio: 3/2; }
.pd-gallery__item:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
.pd-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pd-gallery__item:hover img { transform: scale(1.04); }
.project-detail .cta-band { margin: 0 auto clamp(40px,6vw,80px); }

/* ---------- Реверс/анимации ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- Лайтбокс ---------- */
.lightbox { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; background: rgba(12,10,7,.92); padding: 30px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 94vw; max-height: 90vh; border-radius: 8px; object-fit: contain; }
.lightbox__close, .lightbox__nav { position: absolute; background: rgba(255,255,255,.1); border: none; color: #fff; cursor: pointer; border-radius: 50%; width: 52px; height: 52px; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.24); }
.lightbox__close { top: 22px; right: 22px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 22px; } .lightbox__nav--next { right: 22px; }

/* ---------- Адаптив ---------- */
@media (max-width: 1080px) {
  .svc-grid, .process, .proj-grid, .proj-grid--featured, .pricing { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
  .footer__col:last-child { grid-column: 1 / -1; }   /* Контакты — на всю ширину */
  .footer__bottom { flex-direction: column; gap: 8px; }
}
@media (max-width: 860px) {
  .hdr__nav, .hdr__phone, .hdr__side .btn { display: none; }
  .hdr__burger { display: flex; }
  .hdr__row { gap: 10px; }
  .hdr__side { margin-left: auto; }                /* бургер — к правому краю */
  .hdr__quick { display: flex; align-items: center; gap: clamp(10px, 3vw, 20px);
    font-size: clamp(.72rem, 3.3vw, .92rem); font-weight: 600; min-width: 0; }
  .hdr__quick a { color: var(--ink); white-space: nowrap; }
  .hdr__quick a:hover, .hdr__quick a:active { color: var(--accent); }
  .hero__grid, .split { grid-template-columns: 1fr; }
  .hero__media { aspect-ratio: 26/15; max-height: 60vh; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .section-head--between { flex-direction: column; align-items: flex-start; }
  .fab { display: flex; }
  .pd-gallery { grid-template-columns: 1fr; }
  .pd-gallery__item:first-child { aspect-ratio: 3/2; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .svc-grid, .process, .proj-grid, .proj-grid--featured, .pricing, .stats { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .hero__cta .btn { width: 100%; }
  /* Плашка на видео/фото — компактнее, чтобы не перекрывала пол-кадра */
  .hero__badge { left: 12px; bottom: 12px; padding: 8px 12px; border-radius: 12px; max-width: 80%; }
  .hero__badge b { font-size: 1.12rem; }
  .hero__badge span { font-size: .7rem; }
  /* Цифры в героe — 2×2 вместо тесных 4 в ряд */
  .hero__facts { grid-template-columns: 1fr 1fr; gap: 16px 12px; }
  .hero__facts .fact,
  .hero__facts .fact:first-child,
  .hero__facts .fact:last-child { text-align: center; }
}
@media (max-width: 360px) {
  .hdr__quick a:nth-child(3) { display: none; }     /* очень узкий экран — оставляем 2 раздела */
}

/* ============================================================
   Летние живые детали: трава на подвале, солнечный дождик, лужица
   ============================================================ */

/* Трава растёт на подвале */
.site-footer { position: relative; overflow: visible; }
.grass { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 3; pointer-events: none; }
.grass__blade { position: absolute; bottom: 0; transform-origin: bottom center;
  animation: sway var(--d,3.4s) ease-in-out infinite alternate; animation-delay: var(--sd,0s); }
.grass__blade::before { content: ""; display: block; width: var(--w,8px); height: var(--h,26px);
  background: linear-gradient(to top, var(--grass-2), var(--grass) 70%, #7fd06a);
  clip-path: polygon(50% 0, 100% 100%, 0 100%); transform-origin: bottom center;
  animation: grow 1.1s cubic-bezier(.22,.61,.36,1) backwards; animation-delay: var(--gd,0s); }
.grass__blade--flower::after { content: ""; position: absolute; top: calc(var(--h,26px) * -1 - 5px); left: 50%;
  width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: radial-gradient(circle, #fff 30%, var(--sun) 32%); box-shadow: 0 0 0 2px rgba(255,255,255,.5);
  animation: grow 1.1s cubic-bezier(.22,.61,.36,1) backwards; animation-delay: var(--gd,0s); }
@keyframes sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Солнечный дождик + лужица (в герое) */
.summer-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.raindrop { position: absolute; top: -14%; width: 2px; height: 58px; border-radius: 2px;
  background: linear-gradient(transparent, rgba(120,196,228,.65)); transform: rotate(11deg);
  animation: fall linear infinite; opacity: .5; }
@keyframes fall { to { transform: translateY(125vh) rotate(11deg); } }
.puddle { position: absolute; left: 6%; bottom: -6px; width: clamp(160px, 26vw, 300px); height: 26px; z-index: 0;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(14,165,196,.34), rgba(14,165,196,.10) 60%, transparent 72%);
  filter: blur(1px); }
.puddle::before { content: ""; position: absolute; inset: 6px 18%; border-radius: 50%;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%);
  background-size: 220% 100%; animation: shimmer 3.4s ease-in-out infinite; }
@keyframes shimmer { 0%,100% { background-position: 120% 0; opacity: .3; } 50% { background-position: -20% 0; opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .raindrop, .puddle::before, .grass__blade, .grass__blade::before { animation: none !important; } .grass__blade::before { transform: scaleY(1); } }

/* Радуга над проектами */
.rainbow { position: absolute; top: clamp(-70px, -6vw, -30px); left: 50%; transform: translateX(-50%);
  width: min(820px, 92%); height: 420px; z-index: 0; pointer-events: none; opacity: 0;
  animation: rainbow-in 1.6s var(--ease) .3s forwards;
  background: radial-gradient(circle at 50% 100%,
    transparent 0 54%,
    rgba(255,95,95,.85) 54% 57.5%,
    rgba(255,168,60,.85) 57.5% 61%,
    rgba(255,214,66,.85) 61% 64.5%,
    rgba(86,199,120,.85) 64.5% 68%,
    rgba(66,169,226,.85) 68% 71.5%,
    rgba(120,110,224,.82) 71.5% 75%,
    rgba(170,100,210,.8) 75% 78.5%,
    transparent 78.5%);
  -webkit-mask: linear-gradient(#000, transparent 92%); mask: linear-gradient(#000, transparent 92%);
  filter: saturate(1.05); }
@keyframes rainbow-in { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.98); } to { opacity: .58; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .rainbow { animation: none; opacity: .5; } }

/* ============================================================
   Летний декор — сгенерённая графика (PNG с прозрачностью)
   ============================================================ */
/* Солнце и радуга временно отключены по просьбе */
body::after { content: none; }

/* Радуга — правый верх блока услуг, анимированная */
.deco-rainbow { position: absolute; top: clamp(10px, 3vw, 44px); right: 3%; width: min(300px, 34%); z-index: 3; pointer-events: none;
  filter: drop-shadow(0 8px 20px rgba(120,90,200,.22));
  transform-origin: center bottom; animation: rainbowFloat 6s ease-in-out infinite alternate; }
@keyframes rainbowFloat {
  from { transform: translateY(0) scale(1); opacity: .82; }
  to   { transform: translateY(-9px) scale(1.03); opacity: 1; }
}
@media (max-width: 860px) { .deco-rainbow { width: 190px; right: 2%; top: -4px; } }
@media (prefers-reduced-motion: reduce) { .deco-rainbow { animation: none; opacity: .9; } }

/* Живая трава — анимированные травинки, растут из кромки и качаются */
.deco-grass { position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 5; pointer-events: none; }
.gblade { position: absolute; bottom: 0; transform-origin: bottom center;
  animation: gsway var(--d,3.4s) ease-in-out infinite alternate; animation-delay: var(--sd,0s); }
.gblade::before { content: ""; display: block; width: var(--w,5px); height: var(--h,40px);
  border-radius: 50% 50% 46% 46% / 62% 62% 12% 12%;
  background: linear-gradient(to top, var(--g1,#4ca62a), var(--g2,#8fd400) 55%, var(--g3,#c6f24a));
  transform-origin: bottom center; transform: rotate(var(--tilt,0deg));
  animation: ggrow 1s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: var(--gd,0s); }
@keyframes gsway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes ggrow { from { transform: rotate(var(--tilt,0deg)) scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .gblade { animation: none; } .gblade::before { animation: none; } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* ============================================================
   Светлая тема — переопределения бывших «тёмных» блоков
   ============================================================ */
/* Шапка — голубое небо (верх пейзажа) */
.hdr { background: rgba(190,224,255,.55); backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid rgba(60,110,160,.16); }
.site-header.is-scrolled .hdr { background: rgba(190,224,255,.78); box-shadow: 0 6px 22px rgba(40,70,120,.08); }

/* Средний блок — прозрачный (пейзаж просвечивает), тёмный текст, белые карточки */
.section--dark { background: transparent; color: var(--ink); }
.section--dark .eyebrow { color: var(--accent); }
.section--dark .eyebrow::before { background: var(--accent); }
.section--dark h2 { color: var(--ink); }
.section--dark .lead { color: var(--ink-2); }
.section--dark .process__item { color: var(--ink); }
.section--dark .process__item h3 { color: var(--ink); }
.section--dark .process__item p { color: var(--ink-2); }

/* CTA — закатный градиент (в тон пейзажу), светлый текст, белая кнопка */
.cta-band { background: linear-gradient(135deg, #ff9152 0%, #ff5f86 100%); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); }
.cta-band .eyebrow { color: #fff; }
.cta-band .eyebrow::before { background: rgba(255,255,255,.8); }
.cta-band::after { background: radial-gradient(circle, rgba(255,255,255,.42), transparent 70%); }
.cta-band .btn--accent { --btn-bg: #fff; --btn-fg: #e8553c; }
.cta-band .btn--accent:hover { background: #fff; color: #d4472f; }

/* Внутренние страницы под пейзаж: убрать непрозрачные тёплые блоки */
.section--deep { background: transparent; }

/* Подвал — без заливки (на градиенте страницы), картинка поляны — у самого низа */
.site-footer {
  background: transparent;
  color: var(--ink);
  margin-top: clamp(60px, 8vw, 120px);
  padding-bottom: clamp(190px, 23vw, 420px);
}
/* Контент футера — на прозрачной стеклянной панели (закат и поляна просвечивают) */
.site-footer > .container {
  position: relative; z-index: 2;
  max-width: min(1060px, 94%);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 26px;
  padding: clamp(26px, 3vw, 44px) clamp(22px, 3vw, 46px) clamp(20px, 2.4vw, 34px);
  box-shadow: 0 22px 54px rgba(120,60,50,.16);
}
.site-footer p, .site-footer li { color: var(--ink-2); }
.footer__col h4 { color: var(--ink); }
.footer__col a { color: var(--ink-2); }
.footer__col a:hover { color: var(--accent); }
.footer__phone { color: var(--ink); }
.footer__brand .brand__dom { color: var(--accent); }
.footer__bottom { border-top-color: rgba(35,33,43,.18); color: var(--muted); }
.site-footer .btn--on-dark { --btn-bg: var(--ink); --btn-fg: #fff; border-color: transparent; }
.site-footer .btn--on-dark:hover { background: #000; color: #fff; }
.site-footer .btn--on-dark:hover { background: var(--accent-2); color: #fff; }

/* Блок «процесс» — компактнее (убрать пустоту) */
.section--dark { padding-block: clamp(36px, 4vw, 58px); }
.section--dark .section-head { margin-bottom: clamp(18px, 2.6vw, 30px); max-width: 620px; }
.process { gap: 18px; }
.process__item { padding: 24px 22px; }

/* Футер — компактнее (не такой жирный) */
.site-footer { padding: clamp(30px, 3.4vw, 46px) 0 24px; }
.footer__grid { gap: clamp(22px, 2.6vw, 32px); }
.footer__brand { font-size: 1.35rem; margin-bottom: 10px; }
.footer__phone { font-size: 1.15rem; }
.footer__col ul { gap: 8px; }
.footer__col h4 { margin-bottom: 12px; }
.footer__bottom { margin-top: 26px; padding-top: 16px; }

/* Живая поляна: ёлочки и грибы */
.mdw-tree, .mdw-mushroom { position: absolute; bottom: 0; transform-origin: bottom center; z-index: 6; pointer-events: none; }
.mdw-tree { width: var(--tw, 44px); animation: ggrow 1s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: var(--gd,0s); }
.mdw-tree svg { display: block; width: 100%; height: auto; transform-origin: bottom center;
  animation: treeSway var(--d,5s) ease-in-out infinite alternate; animation-delay: var(--sd,0s);
  filter: drop-shadow(0 4px 5px rgba(20,45,15,.28)); }
.mdw-mushroom { width: var(--mw, 22px); animation: ggrow 1s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: var(--gd,0s); }
.mdw-mushroom svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 3px rgba(20,10,5,.28)); }
@keyframes treeSway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
@media (prefers-reduced-motion: reduce) { .mdw-tree svg { animation: none; } }

/* Домики на поляне (мы же строители) */
.mdw-house { position: absolute; bottom: 0; transform-origin: bottom center; width: var(--hw, 52px); z-index: 6; pointer-events: none;
  animation: ggrow 1s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: var(--gd,0s); }
.mdw-house svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 5px rgba(30,20,10,.28)); }

/* Поляна продолжается в футер: без отдельного стыка */
.site-footer { position: relative; }

/* Иллюстрация поляны — полосой поверх футера (во всю ширину, целиком, тает в зелёный) */
.site-footer > .container { position: relative; z-index: 2; }
.meadow-scene { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; z-index: 1; pointer-events: none; }
/* Светлячки, медленно летающие над поляной */
.fireflies { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: clamp(200px, 26vw, 440px); pointer-events: none; overflow: hidden; }
.firefly { position: absolute; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fffde7 0%, rgba(255,231,120,.95) 42%, rgba(255,214,80,0) 72%);
  box-shadow: 0 0 8px 2px rgba(255,236,140,.75), 0 0 3px rgba(255,240,170,.9);
  animation-name: fireDrift, fireFlicker; animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; animation-direction: alternate, normal; will-change: transform, opacity; }
@keyframes fireDrift { from { transform: translate(0, 0); } to { transform: translate(var(--dx, 20px), var(--dy, -32px)); } }
@keyframes fireFlicker { 0%, 100% { opacity: 0; } 18% { opacity: 1; } 45% { opacity: .3; } 72% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .firefly { animation: none; opacity: .7; } }

/* Облака — целиком (img) наверху сайта под шапкой, уезжают при скролле, мягко тают снизу */
.sky-clouds { position: absolute; top: -8px; left: 0; width: 100%; height: auto;
  z-index: -1; pointer-events: none; opacity: .95;
  animation: cloudFloat 34s ease-in-out infinite alternate;
  -webkit-mask: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
  mask: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%); }
@keyframes cloudFloat { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }
@media (prefers-reduced-motion: reduce) { .sky-clouds { animation: none; } }
/* На телефоне широкая панорама облаков иначе схлопывается в тонкую полоску */
@media (max-width: 860px) { .sky-clouds { height: clamp(210px, 56vw, 320px); object-fit: cover; object-position: center top; } }
/* Бумажные самолётики — ненавязчиво летают в небе (за контентом) */
.sky-planes { position: absolute; top: 0; left: 0; right: 0; height: 660px; z-index: -1; pointer-events: none; overflow: hidden; }
.plane { position: absolute; width: 40px; height: 32px; opacity: 0; pointer-events: none;
  animation-name: planeX; animation-timing-function: linear; animation-iteration-count: infinite; }
.plane > i { display: block; width: 100%; height: 100%;
  background: no-repeat center / contain url("/assets/paper-plane.png");
  filter: drop-shadow(0 3px 5px rgba(40,70,110,.22));
  animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
/* Горизонталь — постоянная скорость (линейно) + плавное появление/исчезание */
@keyframes planeX {
  0%   { transform: translateX(-16vw); opacity: 0; }
  7%   { opacity: .6; }
  92%  { opacity: .6; }
  100% { transform: translateX(118vw); opacity: 0; }
}
/* Справа налево */
@keyframes planeXrev {
  0%   { transform: translateX(118vw); opacity: 0; }
  7%   { opacity: .6; }
  92%  { opacity: .6; }
  100% { transform: translateX(-16vw); opacity: 0; }
}
/* Пологая ложбина: спуск в середине, подъём к концу (зелёная) */
@keyframes planeValley {
  0%   { transform: translateY(-8px) rotate(2deg); }
  32%  { transform: translateY(24px) rotate(9deg); }
  55%  { transform: translateY(46px) rotate(1deg); }
  80%  { transform: translateY(4px) rotate(-9deg); }
  100% { transform: translateY(-30px) rotate(-4deg); }
}
/* Мёртвая петля в середине — позиция идёт по кругу (красная с кольцом) */
@keyframes planeLoop {
  0%   { transform: translate(0, 0) rotate(3deg); }
  34%  { transform: translate(0, -6px) rotate(0deg); }
  42%  { transform: translate(16px, -38px) rotate(-55deg); }
  48%  { transform: translate(28px, -64px) rotate(-120deg); }
  52%  { transform: translate(12px, -76px) rotate(-180deg); }
  56%  { transform: translate(-16px, -56px) rotate(-240deg); }
  60%  { transform: translate(-10px, -22px) rotate(-305deg); }
  64%  { transform: translate(14px, -4px) rotate(-360deg); }
  100% { transform: translate(0, 30px) rotate(8deg); }
}
/* Горка-пик в середине (красная с бугром) */
@keyframes planePeak {
  0%   { transform: translateY(22px) rotate(-2deg); }
  36%  { transform: translateY(-50px) rotate(-16deg); }
  46%  { transform: translateY(-72px) rotate(0deg); }
  56%  { transform: translateY(-50px) rotate(16deg); }
  100% { transform: translateY(38px) rotate(6deg); }
}
/* Ровный набор высоты (жёлтая) */
@keyframes planeClimb {
  0%   { transform: translateY(44px) rotate(-3deg); }
  50%  { transform: translateY(0) rotate(-7deg); }
  100% { transform: translateY(-50px) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) { .plane { animation: none; opacity: .35; } }

/* Этапы процесса — компактная горизонтальная лента-таймлайн (флэт, на стекле) */
.process {
  grid-template-columns: repeat(4, 1fr); gap: 0; position: relative;
  background: rgba(255,255,255,.56);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.65); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.process__item {
  background: transparent; border: none; border-right: 1px solid var(--line-2);
  border-radius: 0; padding: clamp(22px,2.5vw,30px) clamp(18px,2vw,26px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0;
  text-decoration: none; transition: background .25s var(--ease);
}
.process__item:last-child { border-right: none; }
.process__item:hover { background: rgba(255,255,255,.42); }
.process__item::before {
  content: counter(step, decimal-leading-zero); margin: 0;
  font-family: var(--sans); font-weight: 800; font-size: .92rem; color: #fff;
  background: var(--accent); width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 14px rgba(255,106,61,.35);
}
.process__item h3 { margin: 0; color: var(--ink); font-size: clamp(1.05rem, 1.5vw, 1.24rem); }
@media (max-width: 860px) {
  .process { grid-template-columns: repeat(2, 1fr); }
  .process__item:nth-child(2) { border-right: none; }
  .process__item:nth-child(1), .process__item:nth-child(2) { border-bottom: 1px solid var(--line-2); }
}
@media (max-width: 560px) {
  .process { grid-template-columns: 1fr; }
  .process__item { border-right: none; border-bottom: 1px solid var(--line-2); }
  .process__item:last-child { border-bottom: none; }
}

/* Несколько плашек-тегов на карточке проекта */
.proj-card__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: auto; }
.proj-card__tags .proj-card__tag { margin-bottom: 0; }

/* ---------- Цифры-факты ---------- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--radius-lg); overflow: hidden;
  background: rgba(255,255,255,.5); backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.6); box-shadow: var(--shadow-sm); }
.fact { padding: 30px 24px; text-align: center; border-right: 1px solid var(--line-2); }
.fact:last-child { border-right: none; }
.fact__num { font-family: var(--serif); font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1; color: var(--ink); }
.fact__label { color: var(--ink-2); font-size: .95rem; margin-top: .55rem; }
.facts__note { text-align: center; color: var(--muted); font-size: .88rem; margin-top: 16px;
  display: flex; align-items: center; justify-content: center; gap: 9px; }
.facts__note::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ok);
  animation: livePulse 2s infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(35,193,122,.5); } 70% { box-shadow: 0 0 0 9px rgba(35,193,122,0); } 100% { box-shadow: 0 0 0 0 rgba(35,193,122,0); } }

/* ---------- Бренды ---------- */
.brands { display: flex; flex-wrap: wrap; gap: 12px 14px; justify-content: center; }
.brand-chip { font-family: var(--serif); font-size: clamp(1rem, 1.5vw, 1.3rem); letter-spacing: .01em; color: var(--ink);
  padding: 12px 22px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: rgba(255,255,255,.55); backdrop-filter: blur(6px); transition: .25s var(--ease); }
.brand-chip:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
a.brand-chip--link { cursor: pointer; }
a.brand-chip--link { border-color: var(--accent-soft); box-shadow: 0 2px 10px rgba(255,106,61,.12); }
a.brand-chip--link:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Процесс: кликабельные этапы ---------- */
.process__item { cursor: pointer; }
.process__go { color: var(--accent); font-weight: 700; font-size: .88rem; margin-top: auto; }

@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } .fact:nth-child(2) { border-right: none; } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .fact { border-right: none; border-bottom: 1px solid var(--line-2); } .fact:last-child { border-bottom: none; } }

/* ---------- Видео со стройки ---------- */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.video-card { border-radius: var(--radius-lg); overflow: hidden; background: #0c0c10; aspect-ratio: 9/16;
  box-shadow: 0 14px 34px rgba(30,45,15,.18); border: 1px solid rgba(255,255,255,.5); }
.video-card video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0c0c10; }
@media (max-width: 560px) { .videos { grid-template-columns: repeat(2, 1fr); gap: 12px; } }

/* ---------- Видео на странице проекта ---------- */
.pd-video { max-width: 560px; margin: 0 auto clamp(28px, 4vw, 48px); padding-inline: var(--gutter); }
.pd-video video { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); background: #000; display: block; }
/* Значок «видео» на карточке проекта */
.proj-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; padding-left: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.28); pointer-events: none; transition: transform .3s var(--ease); }
.proj-card:hover .proj-card__play { transform: translate(-50%,-50%) scale(1.08); }