/* ============================================================
   V3 CREATIVE — Design System
   Dark (navy + gold + light beam)  ↔  Light (cream + stone)
   ============================================================ */

:root {
  /* Dark palette */
  --navy-900: #2A0B11;
  --navy-800: #230910;
  --navy-700: #1c0a0f;
  --navy-panel: rgba(74,22,32,0.82);   /* бордовые плашки — почти плотные (без backdrop-blur, ради плавности) */
  --navy-line: rgba(205,174,132,0.20);

  /* Light palette */
  --cream-100: #F7F3ED;
  --cream-200: #F0EAE0;
  --cream-300: #E8E0D2;
  --card-light: #FBF7F0;   /* тёплый off-white для светлых плашек (мягче чистого #fff) */
  --stone-line: rgba(26,20,17,0.12);

  /* Accent */
  --gold: #A9854F;
  --gold-soft: #CDAE84;
  --gold-deep: #8A6A38;
  --gold-ink: #6f5524; /* тёмное золото для мелкого текста на светлом (контраст AA) */

  /* Text */
  --ink: #1A1411;
  --ink-soft: #5F554E;
  --on-dark: #F1EAE0;
  --on-dark-soft: #B79A88;

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-sm: 10px;
  /* Action: BORDEAUX (CTA, ssylki) */
  --bordeaux: #6A1525;
  --bordeaux-bright: #8E2433;
  --salmon: #E89C81;        /* лосось — фон подвала */
  --salmon-deep: #C76A5A;   /* переходный тон вино→лосось */
  --header-h: 96px;        /* высота фикс-шапки; должен совпадать с offset в motion.js */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
html:not([data-motion="full"]) { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--navy-900);
  color: var(--on-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.16; letter-spacing: -0.01em; text-wrap: balance; }
.h-display { font-size: clamp(2.5rem, 6vw, 4.6rem); }
.h-section { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.h-card    { font-size: clamp(1.15rem, 2vw, 1.5rem); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: ""; width: 34px; height: 1px; background: var(--gold); opacity: 0.7;
}

.lead { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--on-dark-soft); max-width: 52ch; text-wrap: balance; }
.muted { color: var(--on-dark-soft); }

/* ---------- Layout helpers ---------- */
.section { padding: clamp(72px, 11vw, 140px) 0; position: relative; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section-head { margin-bottom: clamp(40px, 6vw, 72px); }
.section-head .h-section { margin: 18px 0 16px; }

/* ---------- Theme variants ---------- */
.theme-dark  { background: var(--navy-900); color: var(--on-dark); }
.theme-light { background: var(--cream-100); color: var(--ink); }
.theme-light .lead, .theme-light .muted { color: var(--ink-soft); }
.theme-light .eyebrow { color: var(--gold-ink); }
.theme-light .eyebrow::before { background: var(--gold-ink); }

/* Light beam — only on dark sections that opt in */
.with-beam { overflow: hidden; }
.with-beam::after {
  content: "";
  position: absolute; top: -10%; right: -5%;
  width: 38%; height: 130%;
  background: linear-gradient(105deg, transparent 0%, rgba(198,166,100,0.10) 45%, rgba(216,192,138,0.22) 60%, transparent 78%);
  filter: blur(8px);
  pointer-events: none;
  transform: rotate(8deg);
  animation: beamBreathe 10s ease-in-out infinite;
}

/* ============ Градиентные секции — фон всего сайта (CSS, без картинок) ============ */
/* Тёмные секции: глубокий вертикальный градиент. Края в navy-900 => стыки бесшовные. */
.section.theme-dark {
  background: linear-gradient(180deg,
    var(--navy-900) 0%, #230910 30%, #2f0d15 50%, #230910 70%, var(--navy-900) 100%);
  overflow: hidden;
}
/* Световой «слой» — мягкая аура, чередуется по сторонам (ощущение слоёв при скролле) */
.section.theme-dark::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -25%; width: 65%; height: 95%;
  background: radial-gradient(closest-side, rgba(198,166,100,0.12), transparent 75%);
  filter: blur(30px);
}
.section.theme-dark:nth-of-type(odd)::before  { right: -12%; }
.section.theme-dark:nth-of-type(even)::before {
  left: -12%;
  background: radial-gradient(closest-side, rgba(142,36,51,0.12), transparent 75%);
}
/* Контент — над световым слоем */
.section.theme-dark > * { position: relative; z-index: 1; }

/* Подвал — лососевый; верх прозрачный, чтобы фон страницы бесшовно втекал в него */
.site-footer { background: linear-gradient(180deg, transparent 0%, var(--salmon) 46%, #dd8c72 100%) !important; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  transition: background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(42,11,17,0.94);   /* плотный фон вместо backdrop-blur — плавнее скролл */
  border-bottom-color: var(--navy-line);
  padding: 12px var(--pad);
}
.brand { display: flex; align-items: baseline; gap: 2px; }
.brand .mark { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; color: var(--on-dark); line-height: 1; }
.brand .mark sup { font-size: 0.55em; color: var(--gold); top: -0.7em; }
/* Цельная объёмная буква V, вращается вокруг вертикальной оси — только в шапке.
   V = два прямых 3D-бруска (настоящие боковые грани), сборка в JS. */
.site-header .brand .mark { perspective: 620px; }
.site-header .brand .v-rot {
  display: inline-block;
  position: relative;
  width: 26px; height: 32px;
  vertical-align: -7px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
}
.site-header .brand .v3-bar {
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;        /* пивот в вершине V */
}
.site-header .brand .v3-face {
  position: absolute; top: 50%; left: 50%;
  backface-visibility: hidden;
}
/* тонкое золото: лицо — светлое шампанское, торец — глубокое золото */
.site-header .brand .v3-front,
.site-header .brand .v3-back  { background: linear-gradient(155deg, #f3e6c4 0%, #c6a664 100%); }
.site-header .brand .v3-left,
.site-header .brand .v3-right,
.site-header .brand .v3-top,
.site-header .brand .v3-bottom { background: linear-gradient(155deg, #a98a4e 0%, #6f5524 100%); }
@keyframes v-spin { to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .site-header .brand .v-rot { animation: none; }
}
.brand .word {
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.42em;
  text-transform: uppercase; color: var(--on-dark-soft); margin-left: 8px; align-self: center;
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: 0.9rem; color: var(--on-dark-soft); transition: color .2s; }
.nav a:hover { color: var(--on-dark); }
.nav a.active { color: var(--gold-soft); }
.nav-cta { display: inline-flex; }
/* Переключатель языка — компактный золотой пилл */
.nav a.nav-lang {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--gold-soft); border: 1px solid var(--navy-line);
  border-radius: 100px; padding: 5px 11px; line-height: 1;
  transition: border-color .25s ease, color .25s ease;
}
.nav a.nav-lang:hover { border-color: var(--gold); color: var(--gold); }
.nav a.nav-lang::after { display: none; }

/* ---------- Mobile nav (бургер) ---------- */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 11px; cursor: pointer;
  background: transparent; border: 1px solid var(--navy-line); border-radius: var(--radius-sm);
  z-index: 110;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: var(--gold-soft); transition: transform .3s ease, opacity .3s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(80vw, 320px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 24px;
    padding: 100px 34px 34px;
    background: rgba(42,11,17,0.98); backdrop-filter: blur(16px);
    border-left: 1px solid var(--navy-line);
    transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.2,1);
    z-index: 95;
  }
  .nav.open { transform: translateX(0); }
  .nav a { font-size: 1.15rem; color: var(--on-dark); }
  .nav .nav-cta { margin-top: 8px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 500;
  padding: 14px 26px; border-radius: 100px; cursor: pointer;
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  border: 1px solid transparent; white-space: nowrap;
}
.btn:active { transform: translateY(0) scale(0.99); }
.btn-primary { background: var(--bordeaux); color: #fff; }
.btn-primary:hover { background: var(--bordeaux-bright); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--on-dark); border-color: var(--navy-line); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-soft); }
.theme-light .btn-ghost { color: var(--ink); border-color: var(--stone-line); }
.theme-light .btn-ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh; display: flex; align-items: flex-end;
  padding-top: 90px; padding-bottom: clamp(56px, 9vh, 110px);
  /* Чёткий «золотой луч» в покое — резкий на любом экране, маскирует уход видео */
  background:
    radial-gradient(70% 100% at 80% 14%, rgba(216,192,138,0.20) 0%, rgba(198,166,100,0.07) 24%, transparent 50%),
    radial-gradient(120% 80% at 85% 30%, rgba(42,11,17,0.9) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 60%, #2a0b11 100%);
  position: relative; overflow: hidden;
}
/* Видео-фон hero (интро) */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none;
  transition: opacity 1.2s ease;
}
/* Тёмная закрытая дверь как подложка/фолбэк (если видео не загрузилось) */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/assets/img/bg/hero-closed.jpg") center / cover no-repeat;
}
/* Слоган проявляется после того, как дверь закрылась.
   hero-inner — только fade: его transform принадлежит pointer-параллаксу (motion.js),
   CSS-переход по transform сглаживал бы каждый кадр и ломал вход. */
.hero-top { transition: opacity 1s ease, transform 1s ease; }
.hero-inner { transition: opacity 1s ease; }
.hero:not(.intro-done) .hero-top { opacity: 0; transform: translateY(14px); }
.hero:not(.intro-done) .hero-inner { opacity: 0; }

/* Интро-вспышка по словам: Визуал. Смысл. Продажи. */
.hero-intro {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 3rem); letter-spacing: 0.04em;
  color: var(--on-dark); opacity: 1; transition: opacity 0.8s ease;
}
.hero-intro span { opacity: 0; transform: translateY(10px); will-change: opacity, transform; }
.hero.show-words .hero-intro span { animation: wordIn 0.85s cubic-bezier(.4,0,.2,1) forwards; }
.hero.show-words .hero-intro span:nth-child(1) { animation-delay: 0.05s; }
.hero.show-words .hero-intro span:nth-child(2) { animation-delay: 0.55s; }
.hero.show-words .hero-intro span:nth-child(3) { animation-delay: 1.05s; color: var(--gold-soft); }
@keyframes wordIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero.intro-done .hero-intro { opacity: 0; }

/* Строка доверия под CTA */
.hero-trust {
  margin-top: 22px; font-family: var(--sans); font-size: 0.72rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-soft);
}

/* Без JS: показываем контент сразу, интро прячем (SEO/доступность) */
html.no-js .hero-top, html.no-js .hero-inner { opacity: 1 !important; transform: none !important; }
html.no-js .hero-intro { display: none; }
/* Затемнение слева — читаемость текста поверх видео */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(42,11,17,0.92) 0%, rgba(42,11,17,0.58) 40%, rgba(42,11,17,0.14) 65%, transparent 85%),
    linear-gradient(0deg, rgba(42,11,17,0.85) 0%, rgba(42,11,17,0.22) 30%, transparent 52%);
}
@media (prefers-reduced-motion: reduce) { .hero-video { display: none; } }
.hero-inner { position: relative; z-index: 2; max-width: 880px; }
.hero h1 { margin: 26px 0 24px; }
.hero h1 .gold { color: var(--gold-soft); display: block; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .gold {
    background: linear-gradient(90deg, var(--gold-deep) 0%, var(--gold-soft) 30%, #f3e6c4 50%, var(--gold-soft) 70%, var(--gold-deep) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: goldShimmer 7s linear infinite;
  }
}
.hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 50ch; }
.hero-actions { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.hero-meta { position: absolute; bottom: 38px; right: var(--pad); font-size: 0.78rem; letter-spacing: 0.2em; color: var(--on-dark-soft); z-index: 2; }

/* ---------- Problem cards ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.problem-card {
  background: var(--navy-panel); border: 1px solid var(--navy-line);
  border-radius: var(--radius); padding: 28px 24px 30px;
  transition: transform .3s ease, border-color .3s ease;
}
.problem-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.problem-card .num { font-family: var(--serif); font-size: 1.4rem; color: var(--gold); display: block; margin-bottom: 14px; }
.problem-card p { font-size: 0.98rem; color: var(--on-dark); }
.problem-foot { margin-top: 40px; font-family: var(--serif); font-size: clamp(1.3rem,2.4vw,1.9rem); color: var(--on-dark); }

/* ---------- Solution chain ---------- */
.chain { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; margin-top: 20px; }
.chain-step { flex: 1 1 0; min-width: 150px; text-align: center; padding: 10px; position: relative; }
.chain-step .dot {
  width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%;
  border: 1px solid var(--gold); display: grid; place-items: center;
  color: var(--gold); font-family: var(--serif); font-size: 1.5rem;
  background: radial-gradient(circle at 50% 40%, rgba(198,166,100,0.16), transparent 70%);
}
.chain-step h3 { font-size: 1.12rem; margin-bottom: 6px; }
.chain-step p { font-size: 0.85rem; color: var(--on-dark-soft); }
.chain-step:not(:last-child)::after {
  content: "→"; position: absolute; top: 34px; right: -10px; color: var(--gold-deep); font-size: 1.25rem; opacity: 0.7;
}
.chain-foot { margin-top: 40px; color: var(--on-dark-soft); font-style: italic; font-family: var(--serif); font-size: 1.2rem; }

/* ---------- Services grid ---------- */
.grid-services { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.service-card {
  background: var(--card-light); border: 1px solid var(--stone-line); border-radius: var(--radius);
  padding: 30px 28px; transition: transform .3s ease, box-shadow .3s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(40,34,26,0.10); }
.service-card .num { font-family: var(--serif); font-size: 1.1rem; color: var(--gold-ink); letter-spacing: 0.1em; }
.service-card h3 { margin: 10px 0 8px; color: var(--ink); }
.service-card p { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Process timeline ---------- */
.timeline { position: relative; margin-top: 40px; }
.timeline::before {
  content: ""; position: absolute; left: 0; right: 0; top: 35px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
  opacity: 0.5;
}
.timeline-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tl-step { text-align: center; position: relative; }
.tl-step .node {
  width: 70px; height: 70px; margin: 0 auto 24px; border-radius: 50%;
  background: var(--navy-800); border: 1px solid var(--gold);
  display: grid; place-items: center; color: var(--gold); font-family: var(--serif); position: relative; z-index: 2;
}
.tl-step .node svg { width: 30px; height: 30px; }
.tl-step .step-no { font-size: 0.72rem; letter-spacing: 0.2em; color: var(--gold-deep); display: block; margin-bottom: 6px; }
.tl-step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.tl-step p { font-size: 0.82rem; color: var(--on-dark-soft); }

/* ---------- Audience grid ---------- */
.grid-audience { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.aud-card {
  background: var(--card-light); border: 1px solid var(--stone-line); border-radius: var(--radius);
  padding: 26px 22px; transition: border-color .3s, transform .3s;
}
.aud-card:hover { border-color: var(--gold-deep); transform: translateY(-3px); }
.aud-card .ic { width: 34px; height: 34px; margin-bottom: 14px; color: var(--gold-deep); }
.aud-card h3 { font-size: 1.08rem; color: var(--ink); }
.aud-foot { margin-top: 40px; font-family: var(--serif); font-size: clamp(1.3rem,2.4vw,1.8rem); color: var(--ink); }
.aud-foot .gold { color: var(--gold-ink); }

/* ---------- Deliverables / formats ---------- */
.formats { display: flex; flex-direction: column; gap: 14px; }
.format-row {
  display: flex; gap: 20px; align-items: flex-start; background: var(--card-light);
  border: 1px solid var(--stone-line); border-radius: var(--radius); padding: 24px 26px;
  transition: border-color .3s;
}
.format-row:hover { border-color: var(--gold-deep); }
.format-row .num { font-family: var(--serif); font-size: 1.6rem; color: var(--gold-ink); line-height: 1; flex: none; }
.format-row h3 { color: var(--ink); margin-bottom: 4px; }
.format-row p { font-size: 0.92rem; color: var(--ink-soft); }
.deliver-note { margin-top: 26px; font-size: 0.9rem; color: var(--ink-soft); font-style: italic; }

/* ---------- Cases ---------- */
.grid-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.case-card {
  background: var(--navy-panel); border: 1px solid var(--navy-line); border-radius: var(--radius);
  overflow: hidden; transition: transform .3s, border-color .3s;
}
.case-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.case-cover { aspect-ratio: 4/3; background-color: #2a0b11; background-image: linear-gradient(135deg, #3a1119, #2a0b11); background-size: cover; background-position: center; display: grid; place-items: center; color: var(--gold-deep); font-family: var(--serif); font-size: 2rem; }
.case-body { padding: 22px 24px 26px; }
.case-body .tag { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.case-body h3 { font-size: 1.2rem; margin: 10px 0 8px; }
.case-body .result { font-size: 0.9rem; color: var(--on-dark-soft); }

/* ---------- CTA ---------- */
.cta { background: linear-gradient(160deg, var(--navy-900), #2a0b11 70%, var(--navy-800)); position: relative; overflow: hidden; }
/* Луч в CTA — чистый CSS: резкий на любом экране, мягко «дышит» */
.cta::after {
  content: ""; position: absolute; top: -12%; right: -4%; bottom: -12%; width: 46%;
  background:
    radial-gradient(55% 60% at 72% 28%, rgba(243,222,160,0.18), transparent 70%),
    linear-gradient(105deg, transparent 38%, rgba(198,166,100,0.08) 52%, rgba(216,192,138,0.22) 60%, rgba(198,166,100,0.06) 68%, transparent 82%);
  transform: rotate(6deg); filter: blur(10px);
  animation: beamBreathe 9s ease-in-out infinite;
  opacity: 0.9; pointer-events: none;
}
.cta-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(34px,5vw,72px); position: relative; z-index: 2; align-items: start; }
.cta h2 { margin-bottom: 20px; }
.offer-box {
  margin: 30px 0; border: 1px solid var(--gold); border-radius: 14px; padding: 22px 26px;
  display: flex; gap: 16px; align-items: center; background: var(--bordeaux);
}
.offer-box .plus { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--gold-soft); display: grid; place-items: center; color: var(--gold-soft); font-size: 1.2rem; }
.offer-box p { color: var(--on-dark); font-size: 1rem; font-weight: 500; }
.contacts { margin-top: 30px; }
.contacts .eyebrow { margin-bottom: 14px; }
.contacts a { display: block; font-size: 1.05rem; color: var(--on-dark); margin-bottom: 8px; transition: color .2s; }
.contacts a:hover { color: var(--gold-soft); }

/* Form */
.form { background: var(--navy-panel); border: 1px solid var(--navy-line); border-radius: var(--radius); padding: 30px 28px; }
.form label { display: block; font-size: 0.82rem; color: var(--on-dark-soft); margin: 0 0 7px; letter-spacing: 0.04em; }
.form .field { margin-bottom: 18px; }
.form input, .form textarea {
  width: 100%; background: var(--navy-900); border: 1px solid var(--navy-line); border-radius: var(--radius-sm);
  padding: 13px 15px; color: var(--on-dark); font-family: var(--sans); font-size: 0.95rem; transition: border-color .2s;
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--gold); }
.form textarea { resize: vertical; min-height: 78px; }
.form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.8rem; line-height: 1.45; color: var(--on-dark-soft); margin: 2px 0 16px; cursor: pointer; }
.form .consent input { width: auto; flex: none; margin-top: 3px; accent-color: var(--gold); }
.form .consent a { color: var(--gold-soft); text-decoration: underline; }
.form .btn-primary { width: 100%; justify-content: center; margin-top: 6px; }

/* ---------- Prose (политика и текстовые страницы) ---------- */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 36px 0 12px; }
.prose h2:first-of-type { margin-top: 8px; }
.prose p, .prose li { color: var(--on-dark-soft); margin-bottom: 12px; }
.prose ul { padding-left: 22px; margin-bottom: 12px; }
.prose a { color: var(--gold-soft); text-decoration: underline; }
.form-status { margin-top: 14px; font-size: 0.9rem; min-height: 1.2em; }
.form-status.ok { color: var(--gold-soft); }
.form-status.err { color: #e08a7a; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); border-top: 1px solid var(--navy-line); padding: 96px var(--pad) 46px; }
.footer-inner { max-width: var(--maxw); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; }
.site-footer .muted { font-size: 0.85rem; }
/* Тёмный текст подвала — читаемость на лососевом фоне (AA) */
.site-footer .muted { color: #561f26; }
.site-footer .brand .mark { color: #3a1119; }
.site-footer .brand .mark sup { color: var(--bordeaux); }
.site-footer .brand .word { color: #6b2d33; }
.site-footer a { color: var(--bordeaux); }
.site-footer a:hover { color: var(--bordeaux-bright); }

/* ---------- Reveal animation ----------
   Скрываем элементы ТОЛЬКО если работает JS (html.js). Без JS контент виден. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
/* Элементы с параллаксом: transform принадлежит GSAP (scrub), reveal — только fade,
   иначе GSAP запекает стартовые 26px и карточки навсегда оседают ниже места. */
.js .reveal[data-speed] { transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .08s; }
.js .reveal[data-delay="2"] { transition-delay: .16s; }
.js .reveal[data-delay="3"] { transition-delay: .24s; }
.js .reveal[data-delay="4"] { transition-delay: .32s; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid-4, .grid-audience { grid-template-columns: repeat(2, 1fr); }
  .timeline-row { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .timeline::before { display: none; }
  .cta-grid { grid-template-columns: 1fr; }
  .nav .nav-link { display: none; }
}
@media (max-width: 560px) {
  .grid-4, .grid-audience, .timeline-row { grid-template-columns: 1fr; }
  .chain-step:not(:last-child)::after { content: "↓"; right: auto; left: 50%; transform: translateX(-50%); top: auto; bottom: -6px; }
  .grid-cases { grid-template-columns: 1fr; }
  .hero-meta { display: none; }
  .nav { gap: 14px; }
}

/* ---------- Case detail (структура) ---------- */
.case-detail { padding-top: 130px; }
.case-detail .case-lead { max-width: 60ch; }
.case-meta { display: flex; gap: 28px; flex-wrap: wrap; margin: 22px 0 0; color: var(--on-dark-soft); font-size: 0.9rem; }
.case-meta span b { color: var(--gold); font-weight: 500; }
.case-blocks { display: grid; gap: 26px; margin-top: 40px; }
.case-block h3 { font-size: 1.3rem; margin-bottom: 8px; }
.case-block p { color: var(--on-dark-soft); max-width: 70ch; }
.case-back { display: inline-block; margin-top: 40px; color: var(--gold-soft); }

/* ============================================================
   Анимации и полировка
   ============================================================ */

/* Hero: «дыхание» луча и дрейф блика */
@keyframes beamBreathe {
  0%, 100% { opacity: 0.82; }
  50%      { opacity: 1; }
}
@keyframes glowDrift {
  from { transform: translateY(-8%); opacity: 0.7; }
  to   { transform: translateY(12%); opacity: 1; }
}
/* Мерцание золотого заголовка */
@keyframes goldShimmer {
  to { background-position: 220% center; }
}

/* Кнопка: блик-проблеск при наведении */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
.btn-primary:hover::after { left: 150%; }

/* Плавность интерактивных элементов */
.problem-card, .service-card, .case-card, .aud-card, .format-row, .tl-step .node, .chain-step .dot {
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease, color .3s ease;
}
.case-card:hover .case-cover { transform: scale(1.04); }
.case-cover { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.case-card { overflow: hidden; }
/* Иконки-узлы слегка «оживают» при наведении на их секцию */
.tl-step:hover .node, .chain-step:hover .dot { transform: translateY(-3px); border-color: var(--gold-soft); }
.aud-card:hover .ic { color: var(--gold); }

/* Видимый фокус для клавиатуры */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.theme-light :focus-visible { outline-color: var(--gold-ink); }
.form input:focus-visible, .form textarea:focus-visible { outline-offset: 0; }

/* Утилиты отступов/фона (вместо инлайн-стилей) */
.pt-page { padding-top: 130px; }
.mt-0 { margin-top: 0; }
.mt-s { margin-top: 24px; }
.mt-m { margin-top: 34px; }
.bg-cream-2 { background: var(--cream-200); }
.h-page { font-size: clamp(2rem, 4vw, 3rem); margin: 18px 0 10px; }

/* Кейсы: единая обложка (рамка + скрим) и ховер-детали */
.case-cover { position: relative; box-shadow: inset 0 0 0 1px rgba(198,166,100,0.22); }
.case-cover::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(42,11,17,0.55), rgba(42,11,17,0.05) 52%, transparent 75%);
  transition: opacity .35s ease; opacity: 0.9;
}
.case-cover::before {
  content: "↗"; position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(42,11,17,0.5); border: 1px solid var(--gold);
  color: var(--gold-soft); font-size: 1rem; backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(-6px); transition: opacity .3s ease, transform .3s ease;
}
.case-card:hover .case-cover::before { opacity: 1; transform: none; }
.case-card:hover .case-cover::after { opacity: 0.65; }
.case-card:hover .case-body h3 { color: var(--gold-soft); }
.case-body h3 { transition: color .3s ease; }
.service-card .num, .format-row .num { transition: color .3s ease; }
.service-card:hover .num { color: var(--gold); }

/* Десктоп-меню: анимированное золотое подчёркивание */
@media (min-width: 901px) {
  .nav a:not(.nav-cta) { position: relative; }
  .nav a:not(.nav-cta)::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
    background: var(--gold); transform: scaleX(0); transform-origin: left;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .nav a:not(.nav-cta):hover::after,
  .nav a.active:not(.nav-cta)::after { transform: scaleX(1); }
}

/* Компактный hero: текст узкой полосой в самом низу (~1/6 экрана) */
.hero { padding-bottom: clamp(28px, 4vh, 52px); }
.hero .eyebrow { font-size: 0.7rem; }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); line-height: 1.1; margin: 14px 0 0; }
/* Якорный подзаголовок показываем: это крючок первого экрана (спек, Phase 4).
   Компактность сохраняем размером, а не скрытием. */
.hero .lead { font-size: 0.95rem; max-width: 44ch; margin-top: 10px; }
.hero-actions { margin-top: 16px; gap: 12px; }
.hero .btn { padding: 12px 24px; font-size: 0.88rem; }

/* A: кинетический заголовок + бегущая строка возможностей */
.hero h1 .gold.hero-cycle { display: inline-block; transition: opacity .35s ease, transform .35s ease; }
.hero h1 .gold.hero-cycle.swap { opacity: 0; transform: translateY(8px); }

/* Манифест «Сначала вас видят» */
.manifesto .lead { max-width: 54ch; }
.reads { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 26px; }
.reads span { border: 1px solid var(--navy-line); border-radius: 100px; padding: 8px 16px; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--gold-soft); }
.manifesto-line { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.95rem); line-height: 1.34; color: var(--on-dark); max-width: 46ch; margin: 40px 0 0; text-align: left; }

/* ====== Финал: карточки «Услуги» и «Для кого» — текст по центру, значки-бейджи ====== */
.service-card, .aud-card { text-align: center; }
.service-card .ic, .aud-card .ic {
  display: block; box-sizing: border-box;
  width: 58px; height: 58px; padding: 15px;
  margin: 0 auto 16px;
  border: 1px solid var(--gold-deep); border-radius: 50%;
  color: var(--gold-deep); stroke-width: 1.5;
  background: radial-gradient(closest-side, rgba(198,166,100,0.12), transparent 72%);
  transition: color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), background .3s ease;
}
.service-card:hover .ic, .aud-card:hover .ic {
  border-color: var(--gold); color: var(--gold); transform: translateY(-2px) scale(1.04);
  background: radial-gradient(closest-side, rgba(198,166,100,0.20), transparent 72%);
}
.aud-card { display: flex; flex-direction: column; align-items: center; }
.service-card .num { color: var(--gold-ink); }

.hero-marquee {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; padding: 13px 0;
  border-top: 1px solid var(--navy-line);
  background: linear-gradient(0deg, rgba(42,11,17,0.72), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.hero-marquee-track { display: flex; width: max-content; animation: heroMarquee 36s linear infinite; }
.hero-marquee-track span { padding: 0 26px; position: relative; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-soft); white-space: nowrap; }
.hero-marquee-track span::after { content: "·"; position: absolute; right: -2px; color: var(--gold-deep); }
@keyframes heroMarquee { to { transform: translateX(-50%); } }

/* низ hero сдвигаем, чтобы текст и метки не наезжали на бегущую строку */
.hero { padding-bottom: clamp(88px, 11vh, 122px); }
.hero-meta { bottom: 72px; }
@media (max-width: 768px) {
  .hero-meta { bottom: 64px; }
  .hero-marquee { padding: 10px 0; }
  .hero-marquee-track span { font-size: 0.66rem; padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track { animation: none; }
  .hero h1 .gold.hero-cycle { transition: none; }
}

/* Верхняя строка hero (eyebrow), растянутая на ~2/3 ширины */
.hero-top { position: absolute; top: 0; left: 0; right: 0; padding-top: clamp(92px, 13vh, 138px); z-index: 2; }
/* тексты hero — к левому краю (по линии лого), без центрирования контейнера */
.hero-top, .hero-inner { margin-left: 0; margin-right: 0; }
.eyebrow-wide { display: flex; align-items: center; gap: 16px; width: 66%; max-width: 780px; white-space: nowrap; }
.eyebrow-wide::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(198,166,100,0)); opacity: 0.6; }
.eyebrow-m { display: none; } /* короткий вариант строки — только на мобиле */
@media (max-width: 768px) {
  .hero-top { padding-top: 84px; }
  .eyebrow-d { display: none; }
  .eyebrow-m { display: flex; }
  .eyebrow-wide { width: 100%; white-space: normal; gap: 0; font-size: 0.58rem; letter-spacing: 0.14em; }
  .eyebrow-wide::before, .eyebrow-wide::after { display: none; }
  /* дверь со светом — в правой трети экрана; текст слева на тёмном */
  .hero-video { object-position: 72% center; }
}

/* Доступность: уважать отключённые анимации */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Финальная полировка: витрина студии
   ============================================================ */

/* Пространственный слой: над фонами секций, под контентом. Несёт зерно и слова-якоря,
   персистентен между страницами (view-transition-name, Phase 5). */
.space-bg {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  view-transition-name: v3-space;
}
.space-bg::after {
  content: ""; position: absolute; inset: 0; opacity: 0.03; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Контент — над пространственным слоем. Для theme-dark уже есть `.section.theme-dark > *`;
   это правило нужно theme-light/.cta/прочим секциям. */
.section > .container { position: relative; z-index: 1; }
.footer-inner { position: relative; z-index: 1; }

/* Слова-якоря: гигантские призраки в глубине. По умолчанию уведены за вьюпорт
   (для no-JS/static); GSAP в motion.js ведёт их сквозь экран по своей зоне. */
.anchor-word {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, 300vh);
  font-family: var(--serif); font-weight: 600; line-height: 0.9;
  font-size: clamp(5rem, 26vw, 30rem); letter-spacing: -0.02em;
  color: var(--gold); opacity: 0.05; white-space: nowrap;
}
[data-motion="static"] .anchor-word { display: none; }
@media (max-width: 700px) { .anchor-word { font-size: 30vw; opacity: 0.045; } }

/* Швы между тёмными и светлыми секциями — мягкий переход вместо жёсткого стыка */
main > .section.theme-dark + .section.theme-light::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 110px; pointer-events: none;
  background: linear-gradient(180deg, rgba(42,11,17,0.16), rgba(42,11,17,0.04) 55%, transparent);
}
@supports selector(:has(*)) {
  main > .section.theme-light:has(+ .section.theme-dark)::after,
  main > .section.theme-light:has(+ .section.cta)::after,
  main > .section.theme-light:last-child::after {
    content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 110px; pointer-events: none;
    background: linear-gradient(0deg, rgba(42,11,17,0.14), rgba(42,11,17,0.04) 55%, transparent);
  }
}

/* Светлые секции — тёплый градиент вместо плоского */
.section.theme-light { background: linear-gradient(180deg, var(--cream-100) 0%, #f0ebe1 50%, var(--cream-100) 100%); }
.section.theme-light.bg-cream-2 { background: linear-gradient(180deg, var(--cream-200) 0%, #ebe4d6 50%, var(--cream-200) 100%); }

/* Золотой штрих сверху карточек при наведении — единый жест по всему сайту.
   overflow:hidden — штрих обрезается по скруглению, не выступает за углы. */
.service-card, .aud-card, .format-row, .problem-card, .case-card { position: relative; overflow: hidden; }
.service-card::before, .aud-card::before, .format-row::before,
.problem-card::before, .case-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2,.7,.2,1);
  border-radius: 2px 2px 0 0; pointer-events: none;
}
.service-card:hover::before, .aud-card:hover::before, .format-row:hover::before,
.problem-card:hover::before, .case-card:hover::before { transform: scaleX(1); }

/* Hero после интро: тёплое «дыхание» света из дверной щели */
.hero-glow {
  position: absolute; z-index: 1; right: 6%; top: 4%; width: 36%; height: 74%;
  pointer-events: none; opacity: 0;
  background: radial-gradient(50% 60% at 70% 30%, rgba(243,222,160,0.20), rgba(198,166,100,0.06) 55%, transparent 78%);
  filter: blur(8px);
}
.hero.intro-done .hero-glow { animation: glowBreathe 8s ease-in-out infinite; }
@keyframes glowBreathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.95; } }

/* Прогресс прокрутки — тонкая золотая линия под шапкой */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .with-beam::after, .cta::after, .hero-glow { animation: none; }
  .hero.intro-done .hero-glow { opacity: 0.6; }
}

/* Левитация заголовков: каждое слово вылетает из своей обёртки-клипа.
   padding+отрицательный margin расширяют клип-бокс под диакритику (й, ё)
   и хвосты Cormorant, не сдвигая раскладку. */
.rw-outer {
  display: inline-block; overflow: hidden;
  padding: 0.14em 0.06em; margin: -0.14em -0.06em;
}
.rw { display: inline-block; }

/* ============================================================
   Бесшовные переходы между страницами (cross-document View Transitions)
   ============================================================ */
@view-transition { navigation: auto; }
/* Шапка, лого и пространственный слой живут «сквозь» навигацию — не мигают.
   ВАЖНО: имя должно быть уникальным на странице (в подвале тоже есть .brand),
   иначе браузер отменяет переход целиком — поэтому скоупим к шапке. */
.site-header { view-transition-name: v3-header; }
.site-header .brand { view-transition-name: v3-brand; }

/* Контент: старая страница уходит вверх с растворением, новая поднимается снизу */
::view-transition-old(root) {
  animation: vt-out 0.42s cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root) {
  animation: vt-in 0.55s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(20px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  @view-transition { navigation: none; } /* полный опт-аут: гасит и морфы именованных групп */
}

/* Иконки карточек: единый язык тонкой золотой линии (мотив звезды V³).
   Стили .ic/:hover заданы выше единым блоком .service-card/.aud-card — здесь не дублируем. */
.service-card .num { position: absolute; top: 24px; right: 26px; }
.contacts a { display: flex; align-items: center; gap: 10px; }
.contacts .ic { width: 17px; height: 17px; color: var(--gold-deep); flex: none; }

/* ============ Архитектурные фоновые мотивы (тонкая золотая линия, по смыслу страницы) ============ */
.bp { pointer-events: none; color: var(--gold); opacity: 0.09; }
/* Перебиваем `.section.theme-dark > *` (0,2,0): иначе чертёж становится relative и встаёт в поток. */
.section > .bp { position: absolute; z-index: 0; }
.theme-light .bp { color: var(--gold-ink); opacity: 0.07; }
.bp-services { top: 56px; right: -40px; width: clamp(220px, 34vw, 440px); }
.bp-cases    { top: 64px; right: -28px; width: clamp(240px, 36vw, 460px); }
.bp-about    { top: 80px; right: -18px; width: clamp(220px, 32vw, 420px); }
.bp-contacts { top: 64px; left: -34px;  width: clamp(220px, 32vw, 420px); }
@media (max-width: 760px) { .bp { display: none; } }

/* ============ Фиксированный анимированный фон на внутренних страницах ============
   Слой position:fixed (не скроллится). Тёмный вариант по умолчанию; в светлых секциях
   плавно перетекает в ivory. Все фоны секций на этих страницах — прозрачные. */
.v3bg-layer { display: none; }
body.page-inner { background: var(--navy-900); }
body.page-inner .v3bg-layer {
  display: block; position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
body.page-inner main, body.page-inner .site-footer { position: relative; z-index: 1; }
/* «только он»: гасим прочие фоновые слои и собственные фоны секций */
body.page-inner .space-bg { display: none !important; }
body.page-inner .section { background: transparent !important; }
body.page-inner .section::before { display: none !important; }
body.page-inner .with-beam::after { display: none !important; }
body.page-inner .bg-cream-2, body.page-inner .cta { background: transparent !important; }
body.page-inner .cta::after { display: none !important; }
/* Швы-затемнения между секциями не нужны на прозрачных страницах (фон непрерывный) — гасим, иначе тёмные полосы */
body.page-inner main > .section::after { display: none !important; }

.v3bg-base { position: absolute; inset: 0; }
/* Живой WebGL-градиент: над .v3bg-dark (CSS-фолбэк), под ghost/grain/glow */
.v3bg-shader { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.v3bg-bronze, .v3bg-sand { display: none; } /* сцены пути — только на главной (home-journey) */
.v3bg-dark {
  background:
    radial-gradient(70% 100% at 82% 16%, rgba(216,192,138,0.16) 0%, rgba(198,166,100,0.05) 24%, transparent 52%),
    radial-gradient(120% 80% at 88% 30%, rgba(42,11,17,0.85) 0%, transparent 55%),
    linear-gradient(160deg, #2A0B11 0%, #230910 60%, #2a0b11 100%);
}
.v3bg-dark::before {
  content: ""; position: absolute; top: -10%; right: -6%; width: 55%; height: 95%;
  background: radial-gradient(closest-side, rgba(216,192,138,0.14), rgba(198,166,100,0.04) 45%, transparent 72%);
  filter: blur(14px); animation: v3glow 9s ease-in-out infinite;
}
.v3bg-dark::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 13%; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(216,192,138,0.45) 30%, rgba(216,192,138,0.45) 70%, transparent);
  animation: v3beam 9s ease-in-out infinite;
}
.v3bg-ivory {
  opacity: 0; transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1);
  background:
    radial-gradient(70% 100% at 82% 16%, rgba(198,166,100,0.16) 0%, rgba(198,166,100,0.05) 24%, transparent 52%),
    radial-gradient(120% 80% at 88% 30%, rgba(231,223,208,0.92) 0%, transparent 55%),
    linear-gradient(160deg, #f5f1e9 0%, #efe9dd 55%, #e7dfd0 100%);
}
body.bg-ivory .v3bg-ivory { opacity: 1; }
.v3bg-ghost {
  position: absolute; right: -2%; top: 50%; transform: translateY(-50%);
  font-family: var(--serif); font-weight: 600; font-size: 42rem; line-height: 0.8;
  color: var(--gold); opacity: 0.055; user-select: none; transition: color 1.1s ease, opacity 1.1s ease;
  animation: v3float 13s ease-in-out infinite;
}
body.bg-ivory .v3bg-ghost { color: var(--gold-ink); opacity: 0.08; }
.v3bg-grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes v3glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes v3beam { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes v3float { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(-53%); } }
@media (max-width: 760px) { .v3bg-ghost { font-size: 22rem; } }
@media (prefers-reduced-motion: reduce) {
  .v3bg-dark::before, .v3bg-dark::after, .v3bg-ghost, .v3bg-ivory { animation: none; }
}

/* ===== Главная: путь navy -> ivory СЦЕНАМИ (кросс-фейд по opacity — тёплый, без серого) =====
   Базовый navy (.v3bg-dark) всегда снизу; поверх по очереди проступают bronze -> sand -> cream.
   Смешиваются только соседние тёплые тона -> серединного серого провала нет (тона выверены
   в OKLab, docs/verify_journey.py). opacity слоёв и контраст текста ведёт main.js (блок home-journey). */
body.home-journey { --ink-j: var(--on-dark); --gold-j: var(--gold); --halo-j: 0 0 0 rgba(0,0,0,0); }
body.home-journey .v3bg-bronze,
body.home-journey .v3bg-sand,
body.home-journey .v3bg-ivory { display: block; opacity: 0; transition: opacity .16s linear; }
body.home-journey .v3bg-bronze {
  background:
    radial-gradient(72% 90% at 82% 14%, rgba(216,192,138,0.10) 0%, rgba(198,166,100,0) 56%),
    linear-gradient(162deg, #1f1a14 0%, #2c241b 52%, #4a3b28 100%);
}
body.home-journey .v3bg-sand {            /* почти ровный тон у точки переключения текста (контраст-критичный слой) */
  background:
    radial-gradient(74% 92% at 80% 12%, rgba(255,250,236,0.16) 0%, rgba(216,192,138,0) 58%),
    linear-gradient(162deg, #806f51 0%, #867455 52%, #8d7b5c 100%);
}
/* gold-акценты на фоне */
body.home-journey .section-head .eyebrow,
body.home-journey .manifesto .eyebrow,
body.home-journey .aud-foot .gold,
body.home-journey .manifesto .reads span,
body.home-journey #cta .eyebrow { color: var(--gold-j); text-shadow: var(--halo-j); }
body.home-journey .section-head .eyebrow::before,
body.home-journey .manifesto .eyebrow::before { background: var(--gold-j); }
/* текст прямо на фоне (вне карточек) — адаптивный */
body.home-journey .section-head h2,
body.home-journey .section-head .lead,
body.home-journey .manifesto h2,
body.home-journey .manifesto .lead,
body.home-journey .manifesto-line,
body.home-journey .problem-foot,
body.home-journey .chain-foot,
body.home-journey .chain-step h3,
body.home-journey .chain-step p,
body.home-journey .tl-step .step-no,
body.home-journey .tl-step h3,
body.home-journey .tl-step p,
body.home-journey .aud-foot,
body.home-journey #cta h2,
body.home-journey #cta .lead { color: var(--ink-j); text-shadow: var(--halo-j); }
/* Контакты в CTA на низе пути (лосось) — тёмный текст для читаемости */
body.home-journey #cta .contacts a { color: var(--ink-j); text-shadow: var(--halo-j); }
body.home-journey #cta .contacts .ic { color: var(--gold-j); }

/* ===== «Что получает клиент» — глубокая тёплая плашка (эспрессо) поверх фон-пути =====
   id-специфичность перебивает прозрачность .section на главной; текст всегда светлый. */
body.page-inner #deliverables.deliver-deep {
  background:
    radial-gradient(82% 88% at 82% 10%, rgba(216,192,138,0.12), transparent 56%),
    linear-gradient(165deg, #251d15 0%, #1b1610 56%, #2c2118 100%) !important;
}
body.page-inner #deliverables .eyebrow { color: var(--gold-soft); }
body.page-inner #deliverables .eyebrow::before { background: var(--gold-soft); }
body.page-inner #deliverables h2,
body.page-inner #deliverables .lead { color: var(--on-dark); text-shadow: none; }
.value-ladder { list-style: none; margin: 52px 0 0; padding: 0; max-width: 800px; }
.value-ladder li {
  display: flex; gap: 28px; align-items: baseline; padding: 28px 8px;
  border-top: 1px solid rgba(216,192,138,0.16);
}
.value-ladder li:last-child { border-bottom: 1px solid rgba(216,192,138,0.16); }
.value-ladder .vl-no { font-family: var(--serif); font-size: 1.75rem; line-height: 1; color: var(--gold); min-width: 2.5ch; letter-spacing: 0.04em; flex: none; }
.value-ladder h3 { margin: 0 0 7px; font-size: 1.38rem; color: var(--on-dark); }
.value-ladder p { margin: 0; font-size: 1.03rem; color: var(--on-dark-soft); line-height: 1.65; }
@media (max-width: 760px) {
  .value-ladder li { gap: 16px; padding: 20px 2px; }
  .value-ladder .vl-no { font-size: 1.4rem; min-width: 2.3ch; }
  .value-ladder h3 { font-size: 1.18rem; }
  .value-ladder p { font-size: 0.95rem; }
}

/* «О нас»: ровная сетка 2×2 для «Подхода» (4 карточки без асимметричного 3+1) */
.about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .about-grid { grid-template-columns: 1fr; } }

/* ============ A11y ============ */
/* Skip-link: уводим за экран, показываем по фокусу с клавиатуры */
.skip-link {
  position: absolute; left: 12px; top: -56px; z-index: 200;
  background: var(--navy-panel); color: var(--on-dark);
  border: 1px solid var(--gold); padding: 10px 16px; border-radius: var(--radius-sm);
  font-size: 0.9rem; transition: top .2s ease;
}
.skip-link:focus { top: 12px; }
/* Лёгкий скрим под шапкой в покое — читаемость nav над светлой зоной hero (1.4.3) */
.site-header:not(.scrolled) { background: linear-gradient(180deg, rgba(42,11,17,0.55), rgba(42,11,17,0)); }
@media (prefers-reduced-motion: reduce) { .skip-link { transition: none; } }

/* Конец скролл-пути главной уходит в лосось — бесшовно к подвалу */
body.home-journey .v3bg-ivory {
  background:
    radial-gradient(70% 100% at 82% 16%, rgba(232,156,129,0.20) 0%, rgba(232,156,129,0.05) 24%, transparent 52%),
    radial-gradient(120% 80% at 88% 30%, rgba(244,214,200,0.92) 0%, transparent 55%),
    linear-gradient(160deg, #F6E4DC 0%, #F0CDBE 55%, #E8AC95 100%);
}

/* ============================================================
   3D-глубина: фон уходит вдаль, плашки парят стеклом над ним
   ============================================================ */
/* Фон-слой притемнён (без blur — он дорог на живом WebGL-слое) → ощущение глубины даёт fixed-позиция + тени плашек */
.v3bg-layer { filter: brightness(0.9); }

/* Тёмные плашки → объёмная тень (свет сверху = объём). Без backdrop-blur — он тяжёл на слабых GPU */
.problem-card, .case-card, .form {
  box-shadow:
    0 34px 64px -26px rgba(0,0,0,0.66),
    0 10px 22px -10px rgba(0,0,0,0.46),
    inset 0 1px 0 rgba(255,255,255,0.07);
}
.problem-card:hover, .case-card:hover {
  box-shadow:
    0 46px 88px -24px rgba(0,0,0,0.72),
    0 14px 28px -8px rgba(0,0,0,0.52),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
/* Светлые плашки — тоже приподняты над фоном-путём (тень тёплая, винная) */
.service-card, .aud-card, .format-row {
  box-shadow:
    0 26px 52px -28px rgba(40,12,16,0.50),
    0 8px 16px -10px rgba(40,12,16,0.28);
}
.service-card:hover, .aud-card:hover, .format-row:hover {
  box-shadow:
    0 40px 72px -26px rgba(40,12,16,0.55),
    0 12px 24px -10px rgba(40,12,16,0.34);
}
@media (prefers-reduced-motion: reduce) {
  .v3bg-layer { filter: brightness(0.92); }   /* без размытия щадим слабые GPU */
}

/* Наведение: тёплый блик-свет скользит за курсором по стеклу плашки */
.problem-card, .case-card, .service-card, .aud-card, .format-row { position: relative; }
.problem-card::after, .case-card::after,
.service-card::after, .aud-card::after, .format-row::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; mix-blend-mode: soft-light;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(216,192,138,0.22), rgba(216,192,138,0.07) 36%, transparent 62%);
  opacity: 0; transition: opacity .35s ease;
}
.problem-card:hover::after, .case-card:hover::after,
.service-card:hover::after, .aud-card:hover::after, .format-row:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .problem-card::after, .case-card::after,
  .service-card::after, .aud-card::after, .format-row::after { transition: none; }
}