/* ─────────────────────────────────────────────────────────────
   Вечер — контент-агентство
   Чистый CSS, без зависимостей. Готов к интеграции в WordPress.
   ───────────────────────────────────────────────────────────── */

/* ─── Палитра (по умолчанию: Закат) ─── */
:root{
  /* ── Шрифты ──
     H1   → Body Grotesque (подключите в WP @font-face и раскомментируйте основной family)
     H2   → Syne
     H3 + body → Inter
     Mono → JetBrains Mono
     Bricolage Grotesque стоит fallback'ом для превью — снимите его, когда подключите Body Grotesque. */
  --font-h1:   "Body Grotesque", "Bricolage Grotesque", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-h2:   "Syne", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-h3:   "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --paper: oklch(0.96 0.018 80);
  --ink:   oklch(0.18 0.05 265);
  --ink-2: oklch(0.32 0.06 265);
  --night: oklch(0.22 0.07 265);
  --sun:   oklch(0.74 0.16 55);
  --blush: oklch(0.66 0.18 28);
  --hor:   oklch(0.55 0.14 35);
  --deep:  oklch(0.28 0.09 270);
  --line:  oklch(0.18 0.05 265 / .14);
  --muted: oklch(0.18 0.05 265 / .58);
  --on-night: oklch(0.97 0.02 80);
}
body[data-palette="ember"]{
  --paper: oklch(0.95 0.025 70);
  --ink:   oklch(0.20 0.06 30);
  --ink-2: oklch(0.36 0.08 30);
  --night: oklch(0.24 0.08 25);
  --sun:   oklch(0.76 0.18 60);
  --blush: oklch(0.62 0.20 22);
  --hor:   oklch(0.50 0.16 28);
  --deep:  oklch(0.26 0.10 25);
  --line:  oklch(0.20 0.06 30 / .14);
  --muted: oklch(0.20 0.06 30 / .58);
}
body[data-palette="night"]{
  --paper: oklch(0.15 0.04 270);
  --ink:   oklch(0.95 0.02 80);
  --ink-2: oklch(0.78 0.04 80);
  --night: oklch(0.10 0.05 270);
  --sun:   oklch(0.78 0.16 50);
  --blush: oklch(0.68 0.18 25);
  --hor:   oklch(0.42 0.14 30);
  --deep:  oklch(0.08 0.06 270);
  --line:  oklch(0.95 0.02 80 / .14);
  --muted: oklch(0.95 0.02 80 / .58);
}
body[data-palette="amber"]{
  --paper: oklch(0.97 0.03 90);
  --ink:   oklch(0.22 0.07 45);
  --ink-2: oklch(0.38 0.09 45);
  --night: oklch(0.30 0.10 50);
  --sun:   oklch(0.80 0.17 70);
  --blush: oklch(0.68 0.16 35);
  --hor:   oklch(0.55 0.13 50);
  --deep:  oklch(0.32 0.10 45);
  --line:  oklch(0.22 0.07 45 / .14);
  --muted: oklch(0.22 0.07 45 / .60);
}

/* ─── Fallback для Safari < 15.4 / iOS 15 (нет поддержки oklch) ───────────
   Браузер войдёт в этот блок только если oklch не поддерживается.
   Цвета — приближённые hex-эквиваленты, достаточные для читаемости. ──── */
@supports not (color: oklch(0 0 0)){
  :root{
    --paper:    #F4EEE0;
    --ink:      #191C2B;
    --ink-2:    #313650;
    --night:    #1B2035;
    --sun:      #C78A10;
    --blush:    #C76040;
    --hor:      #A05030;
    --deep:     #1C2240;
    --line:     rgba(25, 28, 43, 0.14);
    --muted:    rgba(25, 28, 43, 0.58);
    --on-night: #F6F1E7;
  }
  body[data-palette="ember"]{
    --paper:  #F2E9D5;
    --ink:    #241606;
    --ink-2:  #4A2E12;
    --night:  #281508;
    --sun:    #C8851A;
    --blush:  #C04020;
    --hor:    #983010;
    --deep:   #1C1005;
    --line:   rgba(36, 22, 6, 0.14);
    --muted:  rgba(36, 22, 6, 0.58);
  }
  body[data-palette="night"]{
    --paper:  #101320;
    --ink:    #EEE9E0;
    --ink-2:  #B5B0A8;
    --night:  #070A14;
    --sun:    #D09020;
    --blush:  #C05A30;
    --hor:    #7A3015;
    --deep:   #030610;
    --line:   rgba(238, 233, 224, 0.14);
    --muted:  rgba(238, 233, 224, 0.58);
  }
  body[data-palette="amber"]{
    --paper:  #F8F3E0;
    --ink:    #281A06;
    --ink-2:  #4E3510;
    --night:  #342010;
    --sun:    #D09520;
    --blush:  #C05830;
    --hor:    #884015;
    --deep:   #261805;
    --line:   rgba(40, 26, 6, 0.14);
    --muted:  rgba(40, 26, 6, 0.58);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background: transparent;
  color: var(--on-night);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  letter-spacing: -0.005em;
}
/* Базовый фон ниже неба, чтобы при overscroll/elastic не было белого */
html { background: oklch(0.10 0.05 270); }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
::selection{ background: var(--sun); color: var(--night); }

.serif{ font-family: var(--font-h2); font-weight: 600; letter-spacing: -0.02em; }
.mono{  font-family: var(--font-mono); font-weight: 400; }
.ital{  font-style: italic; }

.wrap{ max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 700px){ .wrap{ padding: 0 20px; } }

/* ─── Кнопки ─── */
.btn{
  display: inline-flex; align-items: center; gap: 12px;
  appearance: none; border: 0; cursor: pointer;
  font: 500 14px/1 var(--font-body);
  letter-spacing: .02em;
  padding: 16px 22px;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{ transform: translateY(-1px); background: var(--ink); color: var(--paper); }
.btn .arrow{ font-family: var(--font-h2); font-weight: 500; font-size: 18px; line-height: 0; }
.btn--ghost{ background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--light{ background: var(--on-night); color: var(--night); }
.btn--light:hover{ background: var(--night); color: var(--on-night); }
.btn--light-ghost{ background: transparent; color: var(--on-night); border: 1px solid oklch(0.97 0.02 80 / .35); }
.btn--light-ghost:hover{ background: var(--blush); color: var(--on-night); border-color: var(--blush); }

/* ─── HEADER ─── */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 32px;
  color: oklch(0.12 0.05 270);
  pointer-events: none;
  transition: background .35s ease, backdrop-filter .35s ease, color .35s ease, border-color .35s ease, padding .35s ease;
}
.site-header > *{ pointer-events: auto; }

/* Режим "Прозрачная" — mix-blend для адаптации к фону */
.site-header.is-blend{
  mix-blend-mode: difference;
  color: var(--on-night);
}

/* Состояние "со стеклом" — для is-scrolled и is-always-glass */
.site-header.is-scrolled,
.site-header.is-always-glass{
  mix-blend-mode: normal;
  background: oklch(0.96 0.018 80 / .08);
  color: var(--ink);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid oklch(0.18 0.05 265 / .06);
  padding: 14px 32px;
}
/* Тёмная палитра — плашка соответственно тёмная */
body[data-palette="night"] .site-header.is-scrolled,
body[data-palette="night"] .site-header.is-always-glass{
  background: oklch(0.13 0.04 270 / .08);
  color: var(--on-night);
  border-bottom-color: oklch(0.97 0.02 80 / .06);
}
/* Старые правила для .dot — луна теперь полноценная SVG-иконка ниже */
.site-header nav{
  display: flex; gap: 28px;
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
/* Навигация: подчёркивание-рассвет, выезжающее слева направо */
.site-header nav a{
  position: relative;
  opacity: .8;
  padding-bottom: 4px;
  transition: opacity .35s ease, color .35s ease;
}
.site-header nav a::after{
  content: "";
  position: absolute;
  left: 0; right: auto; bottom: 0;
  height: 1px;
  width: 0;
  background: currentColor;
  transition: width .45s cubic-bezier(.22, .61, .36, 1);
}
.site-header nav a:hover{ opacity: 1; }
.site-header nav a:hover::after{ width: 100%; }
.site-header nav a.is-active{ opacity: 1; }
.site-header nav a.is-active::after{ width: 100%; }

/* Логотип — луна реагирует на ховер */
.site-header .logo{
  display: flex; align-items: center; gap: 10px;
  transition: opacity .3s ease;
}
.site-header .logo-img{
  display: block;
  height: 36px;
  width: auto;
  transition: transform .35s ease;
}
/* Цвета логотипа — управляем через SVG fill, не через filter */
.logo-text{
  fill: #1F271B;
  transition: fill .35s ease;
}
.logo-moon{
  fill: #FFB951;
}
/* В «стеклянной» шапке и в футере — текст логотипа светлый */
.site-header.is-scrolled .logo-text,
.site-header.is-always-glass .logo-text,
.foot-mark .logo-text{
  fill: oklch(0.97 0.02 80);
}
/* Свечение при ховере */
.site-header .logo:hover .logo-img{
  filter: drop-shadow(0 0 10px rgba(255, 185, 81, .55));
}
/* Контейнер для логотипа */
.site-header .logo-wrap{
  position: relative;
  display: inline-block;
  line-height: 0;
}
/* Halo вокруг луны — почти невидим в покое, разгорается на ховере */
.site-header .logo .moon-glow{
  opacity: .35;
  transform-origin: 30px 30px;
  transform: scale(.7);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}
.site-header .logo .moon-disk{
  transform-origin: 30px 30px;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.site-header .logo .moon-craters{
  transform-origin: 30px 30px;
  transition: opacity .5s ease;
}
/* Звёздочки-спутники — мерцают всегда, ускоряются на ховере */
.site-header .logo .logo-star{
  transform-origin: center;
  transform-box: fill-box;
  animation: logoStarTwinkle 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 2px rgba(255, 185, 81, .9));
}
.site-header .logo .logo-star.s1{ animation-delay: 0s; }
.site-header .logo .logo-star.s2{ animation-delay: -1.1s; }
.site-header .logo .logo-star.s3{ animation-delay: -2.3s; }

@keyframes logoStarTwinkle{
  0%, 100% { opacity: .55; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.35); }
}

/* === Ховер: луна оживает === */
.site-header .logo:hover .moon-glow{
  opacity: 1;
  transform: scale(1.15);
}
.site-header .logo:hover .moon-disk{
  transform: scale(1.08);
}
.site-header .logo:hover .moon-craters{
  opacity: .85;
}
.site-header .logo:hover .logo-star{
  animation-duration: 1.2s;
}
.site-header .nav-cta{
  font-family: var(--font-mono); font-size: 12px;
  font-weight: 700;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid currentColor;
  letter-spacing: .06em; text-transform: uppercase;
  background: transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
/* Стандартный инверсионный ховер — аналогично .btn--light. */
.site-header .nav-cta:hover{
  background: var(--on-night);
  color: var(--night);
  border-color: var(--on-night);
}
/* В скролл-режиме ховер ведёт себя так же, как в герое:
   светлая заливка + тёмный текст. Никаких лишних цветов. */
@media (max-width: 900px){
  .site-header nav{ display: none; }
}

/* ─── HERO ─── */
.hero{
  position: relative;
  min-height: 100vh;
  color: var(--on-night);
}
.hero-sky, .hero-stars, .hero-sun, .hero-horizon { display: none; }

/* ─── PAGE-WIDE SKY (story arc: dawn → sunset → night → sunrise) ─── */
.page-sky{
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.page-sky .sky-bg{
  position: absolute; inset: 0;
  /* CSS-переменные --sky-c1/--sky-c2/--sky-c3/--sky-c4 ставит JS на основе прогресса скролла */
  background: linear-gradient(180deg,
    var(--sky-c1, oklch(0.32 0.10 270)) 0%,
    var(--sky-c2, oklch(0.42 0.13 30)) 35%,
    var(--sky-c3, oklch(0.58 0.16 40)) 75%,
    var(--sky-c4, oklch(0.74 0.16 55)) 100%);
  transition: background 0.6s ease;
}
.page-sky .sky-stars{
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--stars-op, 0);
  transition: opacity .8s ease;
}
.page-sky .sky-stars .star{
  position: absolute;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 4px rgba(255,255,255,.9),
    0 0 10px rgba(255,235,200,.45);
  animation: starTwinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
.page-sky .sky-stars .star.lg{
  box-shadow:
    0 0 6px rgba(255,255,255,1),
    0 0 16px rgba(255,235,200,.65),
    0 0 28px rgba(255,200,150,.35);
}
@keyframes starTwinkle{
  0%, 100%   { opacity: var(--min, .25); transform: scale(.85); }
  50%        { opacity: 1; transform: scale(1.15); }
}
.page-sky .sky-sun{
  position: absolute;
  left: var(--sun-cx, 50%);
  top: var(--sun-cy, 100%);
  width: 52vmin; height: 52vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Однотонный солнечный диск — только тёплые тона, без перехода */
  background: radial-gradient(circle,
    oklch(0.88 0.18 65) 0%,
    oklch(0.82 0.20 60) 55%,
    oklch(0.78 0.21 55) 78%,
    transparent 100%);
  box-shadow:
    0 0 80px 20px oklch(0.78 0.21 55 / .8),
    0 0 200px 80px oklch(0.72 0.20 50 / .55);
  opacity: var(--sun-op, 1);
  transition: opacity .6s ease;
  will-change: top, left, opacity;
}
.page-sky .sky-horizon{
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 28vh;
  background: linear-gradient(to bottom,
    transparent 0%,
    oklch(0.10 0.05 285 / var(--horizon-op, 0)) 80%,
    oklch(0.06 0.05 280 / var(--horizon-op, 0)) 100%);
  pointer-events: none;
  transition: opacity .6s ease;
}

/* ── Hero контент ── */
.hero-inner{
  position: relative; z-index: 5;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.hero-body{
  flex: 1; display: flex; align-items: center;
  padding: 120px 0 16vh;
}
.hero-eyebrow{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  opacity: .92; margin-bottom: 32px;
}
.hero-eyebrow .pulse{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--on-night);
  box-shadow: 0 0 14px var(--on-night);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.hero h1{
  font-family: var(--font-h1);
  font-weight: 500;
  font-size: clamp(58px, 9.4vw, 168px);
  line-height: .95;
  letter-spacing: -0.035em;
  margin: 0 0 30px;
  text-wrap: pretty;
  /* Оптическое выравнивание: у «П» в Body Grotesque заметный левый
     side-bearing, из-за которого она уезжает вправо относительно «К»
     в моноширинном eyebrow. Подтягиваем text-indent'ом. */
  text-indent: -0.045em;
}
.hero h1 em{
  font-style: italic;
  font-weight: 400;
  color: oklch(0.94 0.10 80);
}
.hero-sub{
  max-width: 580px;
  font-size: 19px;
  line-height: 1.5;
  opacity: .92;
  margin: 0 0 40px;
  font-weight: 500;
}
@media (min-width: 901px){
  .hero-sub{ max-width: 714px; width: 714px; }
}
.hero-actions{
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.hero-foot{
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 0 28px;
  font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase;
  opacity: .8;
}
.hero-foot .scroll{ display: inline-flex; gap: 10px; align-items: center; }
/* Ряд внутри .hero-foot — раньше был инлайном */
.hero-foot-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-foot .scroll .arrow{
  display:inline-block; transform-origin: center;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* Вариант "split" — текст слева, маркетинговый бокс справа */
.hero[data-variant="split"] .hero-body{ align-items: stretch; padding: 130px 0 14vh; }
.hero[data-variant="split"] .hero-body > .wrap{ display: grid; grid-template-columns: 1.4fr .9fr; gap: 64px; align-items: center; }
.hero[data-variant="split"] h1{ font-size: clamp(54px, 7.2vw, 132px); }
@media (max-width: 1000px){
  .hero[data-variant="split"] .hero-body > .wrap{ grid-template-columns: 1fr; }
}
.hero-card{
  border: 1px solid oklch(0.97 0.02 80 / .25);
  border-radius: 18px;
  padding: 28px;
  background: oklch(0.18 0.05 270 / .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-card h3{
  font-family: var(--font-h3); font-weight: 600;
  font-size: 26px; letter-spacing: -0.02em; margin: 0 0 14px;
}
.hero-card p{ font-size: 15px; line-height: 1.55; opacity: .82; margin: 0 0 18px; }
.hero-card ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.hero-card li{ display: flex; gap: 12px; align-items: baseline; font-size: 14px; opacity: .9; }
.hero-card li::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--sun); flex: 0 0 6px; transform: translateY(-2px);
}

/* Вариант "cinema" — кинематографичный широкий горизонт */
.hero[data-variant="cinema"]{ text-align: center; }
.hero[data-variant="cinema"] .hero-eyebrow{ justify-content: center; }
.hero[data-variant="cinema"] h1{ font-size: clamp(64px, 11vw, 200px); margin-left: auto; margin-right: auto; }
.hero[data-variant="cinema"] .hero-sub{ margin-left: auto; margin-right: auto; }
.hero[data-variant="cinema"] .hero-actions{ justify-content: center; }
.hero[data-variant="cinema"] .hero-letterbox{
  position: absolute; left: 0; right: 0; height: 56px; z-index: 6;
  background: oklch(0.05 0.04 270);
  pointer-events: none;
}
.hero[data-variant="cinema"] .hero-letterbox.top{ top: 0; }
.hero[data-variant="cinema"] .hero-letterbox.bot{ bottom: 0; }

/* ─── MARQUEE ─── */
.marquee{
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  overflow: hidden;
  position: relative;
}
.marquee-track{
  display: flex; gap: 56px; white-space: nowrap;
  animation: marq 70s linear infinite;
  font-family: var(--font-h2);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 44px);
  color: var(--ink-2); letter-spacing: -0.02em;
}
.marquee-track .sep{ color: var(--sun); }
.marquee-track em{ color: var(--blush); }
@keyframes marq{
  from{ transform: translateX(0) }
  to  { transform: translateX(-50%) }
}

/* ─── Общий заголовок секции ─── */
.section{ padding: 130px 0; position: relative; }
.section + .section{ border-top: 1px solid var(--line); }
.sec-head{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: end;
  margin-bottom: 72px;
}
@media (max-width: 900px){ .sec-head{ grid-template-columns: 1fr; gap: 24px; } }
.sec-eyebrow{
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 12px;
}
.sec-eyebrow::before{
  content: ""; width: 28px; height: 1px; background: currentColor;
}
.sec-title{
  font-family: var(--font-h2); font-weight: 600;
  font-size: clamp(44px, 6.2vw, 104px);
  line-height: 1; letter-spacing: -0.03em;
  margin: 16px 0 0;
}
.sec-title em{ font-style: italic; color: var(--blush); }
.sec-aside{
  font-size: 16px; line-height: 1.55; max-width: 380px;
  color: var(--ink-2);
  align-self: end;
}

/* ─── Варианты «aside»-абзацев в заголовках секций ─── */
/* Раньше эти стили лежали инлайнами в HTML — перенесли сюда, чтобы они
   применялись только на десктопе, а на мобиле абзац оставался fluid. */
@media (min-width: 901px){
  .manifest-aside{
    color: oklch(0.97 0.02 80 / .7);
    font-weight: 500;
    align-self: end;
    max-width: 320px;
  }
  .cases-aside{
    width: 482px;
    max-width: 482px;
  }
}
.manifest-aside{ font-weight: 500; }

/* ─── МАНИФЕСТ ─── */
.manifesto{
  background: var(--night);
  color: var(--on-night);
}
.manifesto .sec-eyebrow{ color: oklch(0.97 0.02 80 / .55); }
.manifesto .sec-title em{ color: var(--sun); }

.manifest-statement{
  font-family: var(--font-h2);
  font-weight: 500;
  font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1.12; letter-spacing: -0.025em;
  margin: 0 0 64px; max-width: 22ch;
}
.manifest-statement em{ font-style: italic; color: var(--sun); }

/* Подзаголовок над сеткой — прижимаем к линии-разделителю,
   чтобы он читался как ярлык секции под ним. */
.manifest-grid-eyebrow{
  display: block;
  margin: -32px 0 14px;
}

.manifest-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  border-top: 1px solid oklch(0.97 0.02 80 / .18);
  padding-top: 20px;
}
@media (max-width: 900px){ .manifest-grid{ grid-template-columns: 1fr; gap: 36px; } }
.manifest-item .num{
  font-family: var(--font-h2); font-weight: 700;
  font-size: 44px; color: var(--sun); line-height: 1; margin-bottom: 16px;
  letter-spacing: -0.03em;
}
.manifest-item h3{
  font-family: var(--font-h3); font-weight: 600;
  font-size: 22px; letter-spacing: -0.02em; margin: 0 0 14px; line-height: 1.2;
}
.manifest-item p{ font-size: 15px; line-height: 1.55; opacity: .78; margin: 0; }

/* ─── УСЛУГИ (аккордеон) ─── */
.services{ background: var(--paper); }
.svc-list{ border-top: 1px solid var(--line); }
.svc{
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.svc-row{
  display: grid; grid-template-columns: 64px 1.2fr 1.6fr 40px;
  gap: 32px; align-items: center;
  padding: 32px 0;
  transition: padding .3s ease, color .3s ease;
}
.svc:hover .svc-row{ padding-left: 16px; }
.svc-num{
  font-family: var(--font-mono); font-size: 12px;
  color: var(--blush); letter-spacing: .12em;
}
.svc-title{
  font-family: var(--font-h3); font-weight: 600;
  font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -0.025em; line-height: 1.1;
}
.svc-lede{ font-size: 15px; line-height: 1.5; color: var(--muted); }
.svc-toggle{
  font-family: var(--font-h2); font-weight: 500; font-size: 30px;
  text-align: right; opacity: .55; transition: transform .3s ease, opacity .3s ease, color .3s ease;
}
.svc:hover .svc-toggle{ opacity: 1; color: var(--blush); transform: translateX(4px); }
.svc.is-open .svc-toggle{ transform: rotate(45deg); color: var(--blush); opacity: 1; }

.svc-detail{
  max-height: 0; overflow: hidden;
  transition: max-height .45s ease;
  padding-left: 96px;
}
.svc.is-open .svc-detail{ max-height: 480px; }
.svc-detail-inner{
  padding: 8px 0 36px;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 48px;
}
@media (max-width: 900px){
  .svc-row{ grid-template-columns: 48px 1fr 32px; }
  .svc-lede{ display: none; }
  .svc-detail{ padding-left: 0; }
  .svc-detail-inner{ grid-template-columns: 1fr; gap: 24px; }
}
.svc-detail h4{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 16px;
}
.svc-detail ul{ list-style: none; margin: 0; padding: 0; }
.svc-detail li{
  padding: 8px 0; font-size: 15px; line-height: 1.5;
  border-bottom: 1px dashed var(--line);
}
.svc-detail li:last-child{ border-bottom: 0; }
.svc-detail li strong{ font-weight: 500; color: var(--ink); }
.svc-detail .meta{
  background: var(--cream, oklch(0.93 0.025 80));
  background: oklch(0.93 0.025 80);
  border-radius: 14px;
  padding: 24px;
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
}
body[data-palette="night"] .svc-detail .meta{ background: oklch(0.22 0.05 270); color: var(--ink-2); }
.svc-detail .meta .row{
  display: grid;
  grid-template-columns: 112px 1fr;
  column-gap: 20px;
  align-items: baseline;
  padding: 6px 0; border-top: 1px solid var(--line);
}
.svc-detail .meta .row > span{ color: var(--ink-2); }
.svc-detail .meta .row > b{ text-align: left; }
.svc-detail .meta .row:first-of-type{ border-top: 0; }
.svc-detail .meta .row b{ font-family: var(--font-h3); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; }
/* «Тонкий» вариант для подписи-ссылки на презентацию */
.svc-detail .meta .row b.thin-link{
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: none;
}
/* Строка без подписи слева — значение занимает обе колонки и прижимается вправо */
.svc-detail .meta .row--full{ grid-template-columns: 1fr; }
.svc-detail .meta .row--full > b{ text-align: right; }

/* ─── ПРОЦЕСС ─── */
.process{
  background: oklch(0.93 0.025 80);
  position: relative;
  overflow: hidden;
}
/* Декоративная луна на фоне — перевёрнута, цвет «как у звёзд»,
   тихое мерцание, не перетягивает внимание */
.process > .process-moon{
  position: absolute;
  top: 60px;
  right: 40px;
  left: auto;
  width: 180px;
  height: auto;
  color: oklch(0.97 0.02 80);
  opacity: .08;
  transform: scaleX(-1) rotate(-22deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
  animation: processMoonTwinkle 11s ease-in-out infinite;
  will-change: opacity, filter;
}
@media (max-width: 900px){
  .process > .process-moon{ width: 120px; top: 30px; right: 24px; }
}
@keyframes processMoonTwinkle{
  0%, 100% { opacity: .04; filter: drop-shadow(0 0 0 transparent); }
  50%      { opacity: .22; filter: drop-shadow(0 0 28px rgba(255,235,200,.55)); }
}
/* Контент секции — поверх луны */
.process > .wrap{ position: relative; z-index: 1; }
body[data-palette="ember"] .process{ background: oklch(0.92 0.03 60); }
body[data-palette="night"] .process{ background: oklch(0.19 0.05 270); }
body[data-palette="amber"] .process{ background: oklch(0.94 0.04 80); }

.proc-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 900px){ .proc-grid{ grid-template-columns: 1fr; } }
.proc-step{
  padding: 36px 24px 36px 0;
  border-right: 1px solid var(--line);
  position: relative;
}
.proc-step:last-child{ border-right: 0; }
.proc-step:not(:first-child){ padding-left: 24px; }
@media (max-width: 900px){
  .proc-step{ border-right: 0; border-bottom: 1px solid var(--line); padding: 28px 0 !important; }
  .proc-step:last-child{ border-bottom: 0; }
}
.proc-time{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; color: var(--blush); margin-bottom: 24px;
}
.proc-step h4{
  font-family: var(--font-h3); font-weight: 600;
  font-size: 24px; letter-spacing: -0.02em; line-height: 1.15;
  margin: 0 0 14px;
}
.proc-step p{ font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ─── КЕЙСЫ ─── */
.cases{ background: var(--paper); }
.case-grid{
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 28px;
}
.case{
  grid-column: span 3;
  cursor: pointer;
  transition: transform .3s ease;
}
.case:hover{ transform: translateY(-4px); }
.case:nth-child(3){ grid-column: span 6; }
@media (max-width: 900px){ .case, .case:nth-child(3){ grid-column: span 6; } }
.case-art{
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  margin-bottom: 20px;
  position: relative; overflow: hidden;
  background: var(--night);
}
.case:nth-child(3) .case-art{ aspect-ratio: 3 / 1; }
/* Картинка-обложка кейса заполняет всю плитку, под ней — градиент-fallback */
.case-art .case-image{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.case-art::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, oklch(0.05 0.04 270 / .55));
}
.case-art .badge{
  position: absolute; left: 18px; top: 18px; z-index: 1;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-night);
  padding: 6px 10px; border-radius: 999px;
  background: oklch(0.10 0.05 270 / .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.case-art .art-num{
  position: absolute; right: 22px; bottom: 18px; z-index: 1;
  font-family: var(--font-h2); font-weight: 700; font-style: italic;
  font-size: 56px; line-height: 1; color: oklch(0.97 0.02 80);
  opacity: .88; letter-spacing: -0.04em;
}
.gradient-a{ background:
  radial-gradient(ellipse 60% 80% at 70% 110%, var(--sun) 0%, transparent 50%),
  radial-gradient(ellipse 50% 60% at 30% 90%, var(--blush) 0%, transparent 60%),
  linear-gradient(180deg, var(--night) 0%, var(--deep) 60%, var(--blush) 100%); }
.gradient-b{ background:
  radial-gradient(circle at 50% 70%, var(--sun) 0%, var(--blush) 25%, var(--deep) 60%, var(--night) 100%); }
.gradient-c{ background:
  linear-gradient(180deg, var(--night) 0%, var(--deep) 25%, var(--blush) 65%, var(--sun) 88%, oklch(0.94 0.07 80) 100%); }
.gradient-d{ background:
  conic-gradient(from 200deg at 60% 80%,
    var(--sun) 0deg, var(--blush) 60deg, var(--deep) 160deg, var(--night) 240deg, var(--sun) 360deg); }

.case-meta{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.case-tag{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.case-stat{
  font-family: var(--font-h2); font-weight: 600;
  color: var(--blush); font-size: 16px; letter-spacing: -0.01em;
}
.case h3{
  font-family: var(--font-h3); font-weight: 600;
  font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -0.02em;
  line-height: 1.2; margin: 0 0 8px;
}
.case p{ font-size: 14.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ─── ОБ АНДРЕЕ ─── */
.about{
  background: oklch(0.93 0.025 80);
}
body[data-palette="ember"] .about{ background: oklch(0.92 0.03 60); }
body[data-palette="night"] .about{ background: oklch(0.19 0.05 270); }
body[data-palette="amber"] .about{ background: oklch(0.94 0.04 80); }

.about-grid{
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center;
}
@media (max-width: 900px){ .about-grid{ grid-template-columns: 1fr; gap: 40px; } }
.about-portrait{
  aspect-ratio: 4 / 5;
  border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, var(--sun) 0%, var(--blush) 35%, var(--deep) 75%, var(--night) 100%);
  position: relative;
}
.about-portrait::after{
  content: ""; position: absolute; inset: 0;
}
.about-portrait img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  z-index: 1;
}
.about h2{
  font-family: var(--font-h2); font-weight: 600;
  font-size: clamp(36px, 4.5vw, 64px); line-height: 1.05; letter-spacing: -0.03em;
  margin: 0 0 24px;
}
.about h2 em{ font-style: italic; font-weight: 500; color: var(--blush); }
.about p{ font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 0 18px; max-width: 56ch; }
.about .signature{
  margin-top: 36px;
  font-family: var(--font-h2); font-weight: 500; font-style: italic; font-size: 22px;
  color: var(--blush); letter-spacing: -0.01em;
}

/* ─── КОНТАКТ ─── */
.contact{
  background: var(--ink);
  color: var(--on-night);
  padding: 200px 0 140px;
}
body[data-palette="night"] .contact{ background: oklch(0.08 0.04 270); }
.contact .sec-eyebrow{ color: oklch(0.97 0.02 80 / .55); }

/* Шапка секции — на всю ширину, текст не зажат */
.contact-head{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px 80px;
  align-items: end;
  margin-bottom: 72px;
}
.contact-head .sec-eyebrow{ grid-column: 1 / -1; }
.contact-head h2{ margin: 0; }
.contact-head .lede{ margin: 0; max-width: 44ch; }
@media (max-width: 900px){
  .contact-head{ grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
}

.contact h2{
  font-family: var(--font-h2); font-weight: 600;
  font-size: clamp(48px, 7vw, 104px); line-height: .95; letter-spacing: -0.03em;
  margin: 16px 0 28px; text-wrap: balance;
}
.contact h2 em{ font-style: italic; font-weight: 500; color: var(--sun); }
.contact .lede{
  font-family: var(--font-h3); font-weight: 400;
  font-size: clamp(20px, 1.8vw, 24px); line-height: 1.45;
  opacity: .82; max-width: 480px; margin: 0 0 56px;
  letter-spacing: -0.01em;
}
.contact-links{
  border-top: 1px solid oklch(0.97 0.02 80 / .22);
  border-bottom: 1px solid oklch(0.97 0.02 80 / .22);
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 96px;
}
@media (max-width: 900px){
  .contact-links{ grid-template-columns: 1fr; margin-top: 64px; }
}
.contact-link{
  display: grid; grid-template-columns: 90px 1fr auto; gap: 20px;
  align-items: baseline;
  padding: 24px 28px;
  border-right: 1px solid oklch(0.97 0.02 80 / .14);
  transition: padding .3s ease, background-color .3s ease;
}
.contact-link:last-child{ border-right: 0; }
@media (max-width: 900px){
  .contact-link{
    border-right: 0;
    border-bottom: 1px solid oklch(0.97 0.02 80 / .14);
    padding: 20px 0;
  }
  .contact-link:last-child{ border-bottom: 0; }
}
.contact-link:hover{ padding-left: 36px; background: oklch(0.97 0.02 80 / .04); }
@media (max-width: 900px){
  .contact-link:hover{ padding-left: 12px; background: transparent; }
}
.contact-link .key{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; opacity: .9;
  color: var(--on-night);
  text-shadow: 0 1px 12px oklch(0.08 0.05 270 / .6);
}
.contact-link .val{
  font-family: var(--font-h2); font-weight: 500; font-size: 26px;
  color: var(--on-night); letter-spacing: -0.02em;
  text-shadow: 0 2px 18px oklch(0.08 0.05 270 / .8);
}
.contact-link .arr{
  font-family: var(--font-h2); font-weight: 500; font-size: 20px; opacity: .9;
  color: var(--sun);
  transition: transform .3s ease, opacity .3s ease, color .3s ease;
  text-shadow: 0 2px 14px oklch(0.08 0.05 270 / .7);
}
.contact-link:hover .arr{ transform: translateX(8px); opacity: 1; color: var(--sun); }

/* Форма */
.form{ display: flex; flex-direction: column; gap: 28px; }
.form-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px;
}
@media (max-width: 900px){
  .form-grid{ grid-template-columns: 1fr; gap: 28px; }
}
.form-row{ display: flex; flex-direction: column; gap: 8px; }
.form label{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; opacity: .6;
}
.form input, .form textarea, .form select{
  appearance: none;
  background: transparent;
  border: 0; border-bottom: 1px solid oklch(0.97 0.02 80 / .3);
  color: var(--on-night);
  padding: 12px 0;
  font: 400 18px/1.4 var(--font-body);
  outline: none;
  transition: border-color .25s ease;
}
.form textarea{ resize: vertical; min-height: 80px; font-family: inherit; }
.form input:focus, .form textarea:focus, .form select:focus{
  border-color: var(--sun);
}
.form input::placeholder,
.form textarea::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{ color: oklch(0.97 0.02 80 / .52) !important; font-style: italic; }
.form .form-tags{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.form .form-tags label{
  display: inline-flex; align-items: center;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid oklch(0.97 0.02 80 / .28);
  cursor: pointer; transition: background .2s, color .2s, border-color .2s;
  font-family: var(--font-body); font-size: 13px;
  text-transform: none; letter-spacing: 0; opacity: 1;
}
.form .form-tags input{ display: none; }
.form .form-tags input:checked + span{ }
.form .form-tags label:has(input:checked){
  background: var(--sun); color: var(--night); border-color: var(--sun);
}
.form .submit-row{
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-top: 14px;
}
.form .submit-row .fine{
  font-size: 12px; opacity: .55; max-width: 28ch;
}

/* ─── Contact Form 7 ─── */
.wpcf7-form-control-wrap{
  display: block; width: 100%;
}
/* Чекбоксы — флекс */
.form-tags .wpcf7-checkbox{
  display: flex; flex-wrap: wrap; gap: 8px;
}
/* Сам .wpcf7-list-item — это пилюля */
.form-tags .wpcf7-list-item{
  position: relative;
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid oklch(0.97 0.02 80 / .35);
  background: oklch(0.97 0.02 80 / .04);
  color: var(--on-night);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.form-tags .wpcf7-list-item:has(input:checked){
  background: var(--sun);
  color: var(--night);
  border-color: var(--sun);
}
/* Инпут — невидим, клик ловит JS на .wpcf7-list-item */
.form-tags .wpcf7-list-item input[type="checkbox"]{
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Текст пилюли — отменяем uppercase от .form label */
.form-tags .wpcf7-list-item .wpcf7-list-item-label{
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}
/* Кнопка отправки — высокая специфичность чтоб перебить .form input */
.form input[type="submit"].wpcf7-submit{
  display: inline-flex;
  align-items: center;
  appearance: none;
  border: 0;
  cursor: pointer;
  font: 500 14px/1 var(--font-body);
  padding: 16px 32px;
  border-radius: 999px;
  background: var(--on-night);
  color: var(--night);
  transition: transform .25s ease, background .25s ease, color .25s ease;
  width: auto;
}
.form input[type="submit"].wpcf7-submit:hover{
  transform: translateY(-1px);
  background: var(--night);
  color: var(--on-night);
  border: 0;
}
/* Строка с кнопкой и дисклеймером */
.wpcf7 .submit-row{
  display: flex; justify-content: space-between;
  align-items: center; gap: 16px; margin-top: 14px;
}
/* Ошибки валидации */
.wpcf7-not-valid-tip{
  display: block; margin-top: 4px;
  font-size: 12px; color: oklch(0.97 0.02 80);
}
/* Сообщение после отправки */
.wpcf7-response-output{
  margin-top: -16px !important; padding: 0 !important;
  font-size: 13px;
  border: 0 !important; outline: 0 !important;
  box-shadow: none !important;
}
.wpcf7-form.sent .wpcf7-response-output{
  display: none;
}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output{
  color: oklch(0.97 0.02 80 / .85);
}
.wpcf7-spinner{ display: none; }

/* ─── Куки-баннер ─── */
.cookie-bar{
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 9000;
  display: flex; align-items: center; gap: 24px;
  background: oklch(0.12 0.05 270 / .96);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: oklch(0.97 0.02 80 / .85);
  padding: 14px 20px 14px 24px;
  border-radius: 999px;
  border: 1px solid oklch(0.97 0.02 80 / .10);
  box-shadow: 0 8px 32px oklch(0 0 0 / .35);
  max-width: calc(100vw - 48px);
  transition: opacity .4s ease, transform .4s ease;
}
.cookie-bar.is-hidden{
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) translateY(16px);
}
.cookie-bar__text{
  font-family: var(--font-h3); font-size: 13px; line-height: 1.5;
  margin: 0;
}
.cookie-bar__link{
  color: var(--sun); text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-bar__link:hover{ opacity: .8; }
.cookie-bar__btn{
  flex-shrink: 0;
  appearance: none; border: 0; cursor: pointer;
  background: var(--sun); color: oklch(0.15 0.05 270);
  font: 500 12px/1 var(--font-h3);
  padding: 8px 18px; border-radius: 999px;
  transition: opacity .2s;
  white-space: nowrap;
}
.cookie-bar__btn:hover{ opacity: .85; }

/* ─── Обычные страницы (page.php) ─── */
.page-content{
  padding: 160px 0 80px;
  min-height: 60vh;
}
.page-content__title{
  font-family: var(--font-h1); font-size: clamp(28px, 4vw, 48px);
  font-weight: 700; letter-spacing: -0.03em;
  margin: 0 0 48px;
}
.page-content__body{
  max-width: 68ch;
  font-family: var(--font-h3); font-size: 16px; line-height: 1.75;
  color: var(--ink-2);
}
.page-content__body h2{ font-family: var(--font-h2); font-size: 20px; font-weight: 600; margin: 40px 0 12px; color: var(--ink); }
.page-content__body p{ margin: 0 0 16px; }
.page-content__body a{ color: var(--sun); text-decoration: underline; }

/* ─── FOOTER ─── */
.site-footer{
  background: oklch(0.10 0.05 270);
  color: oklch(0.97 0.02 80);
  padding: 64px 0 32px;
}
body[data-palette="night"] .site-footer{ background: oklch(0.06 0.04 270); }
.foot-grid{
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  align-items: start;
  padding-bottom: 56px;
  border-bottom: 1px solid oklch(0.97 0.02 80 / .14);
}
@media (max-width: 900px){ .foot-grid{ grid-template-columns: 1fr 1fr; gap: 32px; } }
.foot-mark{
  font-family: var(--font-h1); font-weight: 600; font-size: 40px; letter-spacing: -0.04em;
  margin-bottom: 14px;
  line-height: 0;
}
.foot-mark .logo-wrap{
  position: relative;
  display: inline-block;
  line-height: 0;
}
.foot-mark .logo-img{
  display: block;
  height: 64px;
  width: auto;
}
.foot-mark .logo-star{
  transform-origin: center;
  transform-box: fill-box;
  animation: logoStarTwinkle 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 2px rgba(255, 185, 81, .9));
}
.foot-mark .logo-star.s1{ animation-delay: 0s; }
.foot-mark .logo-star.s2{ animation-delay: -1.1s; }
.foot-mark .logo-star.s3{ animation-delay: -2.3s; }
.foot-tag{
  font-size: 14px; line-height: 1.5; opacity: .65; max-width: 38ch;
}
.foot-col h5{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
  margin: 0 0 16px; opacity: .55;
}
.foot-col ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.foot-col a{ opacity: .85; font-size: 14.5px; }
.foot-col a:hover{ color: var(--sun); opacity: 1; }
.foot-bot{
  padding-top: 24px;
  display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; opacity: .55;
}


/* ═══════════════════════════════════════════════════════════════
   STORY ARC OVERRIDES — секции «парят» над сквозным небом.
   Все секции — полупрозрачные тёмные пластины. Текст — светлый.
   ═══════════════════════════════════════════════════════════════ */

/* Текст по умолчанию — светлый */
:root {
  --ink: oklch(0.97 0.02 80);
  --ink-2: oklch(0.97 0.02 80 / .78);
  --muted: oklch(0.97 0.02 80 / .58);
  --line: oklch(0.97 0.02 80 / .14);
}
body[data-palette="dusk"],
body[data-palette="ember"],
body[data-palette="amber"]{
  --ink: oklch(0.97 0.02 80);
  --ink-2: oklch(0.97 0.02 80 / .78);
  --muted: oklch(0.97 0.02 80 / .58);
  --line: oklch(0.97 0.02 80 / .14);
}

/* Базовый «дым» под секциями: тёмный полупрозрачный слой */
.marquee,
.manifesto,
.services,
.process,
.cases,
.about,
.contact,
.site-footer{
  background: transparent !important;
  position: relative;
}
/* Скрим — псевдоэлемент под содержимым каждой секции */
.marquee::before,
.manifesto::before,
.services::before,
.process::before,
.cases::before,
.about::before,
.contact::before,
.site-footer::before{
  content: "";
  position: absolute; inset: 0;
  background: oklch(0.10 0.05 270 / .58);
  pointer-events: none;
  z-index: 0;
}
.marquee > *, .manifesto > *, .services > *, .process > *,
.cases > *, .about > *, .contact > *, .site-footer > *{
  position: relative; z-index: 1;
}
/* Hero — без скрима, чтобы солнце дышало. Без теней, чисто. */
.hero{ background: transparent !important; }
.hero::before{ content: none; }

/* Скримы по фазам путешествия */
.marquee::before{      background: oklch(0.18 0.08 25 / .18); }    /* тёплый сумрак, чтобы не пачкать зарево */
.manifesto::before{    background: oklch(0.10 0.05 270 / .58); }   /* deep dusk */
.services::before{     background: oklch(0.08 0.05 270 / .70); }   /* night */
.process::before{      background: oklch(0.07 0.05 270 / .76); }   /* deepest night */
.cases::before{        background: oklch(0.10 0.05 285 / .65); }   /* night → pre-dawn */
.about::before{        background: oklch(0.18 0.09 340 / .38); }   /* pre-dawn warm pink */
.contact::before{      background: oklch(0.18 0.10 20 / .22); }    /* sunrise warm coral */
.site-footer::before{  background: oklch(0.20 0.10 35 / .25); }    /* morning warm */

/* Линии разделителей секций — светлые тонкие */
.section + .section{ border-top: 1px solid oklch(0.97 0.02 80 / .08); }

/* Аккордеон услуг — линии светлые */
.svc-list, .svc{ border-color: oklch(0.97 0.02 80 / .14); }

/* Услуги: meta-карточка тёмная полупрозрачная */
.svc-detail .meta{
  background: oklch(0.97 0.02 80 / .07) !important;
  color: oklch(0.97 0.02 80 / .78);
}
.svc-detail .meta .row{ border-top-color: oklch(0.97 0.02 80 / .12); }
.svc-detail .meta .row b{ color: var(--on-night); }
.svc-detail li strong{ color: var(--on-night); }
.svc-detail li{ border-bottom-color: oklch(0.97 0.02 80 / .08); }

/* Процесс: вертикальные разделители светлые */
.proc-grid{ border-top-color: oklch(0.97 0.02 80 / .14); }
.proc-step{ border-right-color: oklch(0.97 0.02 80 / .14); }

/* Кнопки — основной CTA остаётся светлым, ghost — прозрачный */
.btn--light{ background: var(--on-night); color: oklch(0.18 0.05 265); }
.btn--light:hover{ background: oklch(0.18 0.05 265); color: var(--on-night); }
.btn--ghost{ background: transparent; color: var(--on-night); border: 1px solid oklch(0.97 0.02 80 / .35); }
.btn--ghost:hover{ background: var(--on-night); color: oklch(0.18 0.05 265); border-color: var(--on-night); }

/* Marquee — текст светлый */
.marquee-track{ color: oklch(0.97 0.02 80 / .82); }
.marquee-track em{ color: var(--sun); }
.marquee{ border-top-color: oklch(0.97 0.02 80 / .14); border-bottom-color: oklch(0.97 0.02 80 / .14); }

/* About-portrait — становится тёмным с золотым солнцем (не сливается со скримом) */
.about-portrait{
  background:
    radial-gradient(circle at 50% 35%, var(--sun) 0%, var(--blush) 30%, oklch(0.20 0.07 290) 70%, oklch(0.08 0.05 270) 100%) !important;
}

/* Случай: меняем хедер-логотип в is-scrolled на светлый, потому что все скримы тёмные */
.site-header.is-scrolled,
.site-header.is-always-glass{
  background: oklch(0.10 0.05 270 / .18) !important;
  color: var(--on-night) !important;
  border-bottom: 1px solid oklch(0.97 0.02 80 / .08);
}
/* Форма — инпуты светлые */
.form input, .form textarea, .form select{
  border-bottom-color: oklch(0.97 0.02 80 / .25);
  color: var(--on-night);
}
.form input::placeholder,
.form textarea::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder{ color: oklch(0.97 0.02 80 / .52) !important; font-style: italic; }
.form .form-tags label{ border-color: oklch(0.97 0.02 80 / .28); color: var(--on-night); }

/* Footer кейсы / cases — линии светлые */
.case-art{ background: oklch(0.08 0.05 270); }

/* sec-eyebrow — светлая */
.sec-eyebrow{ color: oklch(0.97 0.02 80 / .58); }
.sec-aside{ color: oklch(0.97 0.02 80 / .72); }

/* Tweaks-панель и шапка остаются как были — это отдельные UI элементы */

/* Финальный override для ховера ghost-кнопки — тёмная ночная заливка со звёздами */
.btn.btn--light-ghost{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Замедленный переход — атмосферное «погружение в ночь» */
  transition:
    transform 1.4s cubic-bezier(.22, .61, .36, 1),
    background 1.6s cubic-bezier(.22, .61, .36, 1),
    color 1.4s ease,
    border-color 1.6s cubic-bezier(.22, .61, .36, 1) !important;
}
.btn.btn--light-ghost > *:not(.btn-stars){
  position: relative;
  z-index: 2;
}
.btn.btn--light-ghost:hover{
  background: oklch(0.20 0.07 265) !important; /* ночной синий, но не чёрный */
  color: var(--on-night) !important;
  border-color: oklch(0.30 0.09 265) !important;
}

/* Слой звёзд — невидим, проявляется на ховере */
.btn-stars{
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
  z-index: 1;
  border-radius: inherit;
}
.btn.btn--light-ghost:hover .btn-stars{
  opacity: 1;
}
.btn-star{
  position: absolute;
  background: #fff;
  border-radius: 50%;
  box-shadow:
    0 0 3px rgba(255,255,255,.9),
    0 0 8px rgba(255,235,200,.4);
  animation: btnStarTwinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: opacity, transform;
}
.btn-star.lg{
  box-shadow:
    0 0 4px rgba(255,255,255,1),
    0 0 12px rgba(255,210,160,.7),
    0 0 22px rgba(255,200,150,.4);
}
/* Более выраженное мерцание для звёзд внутри кнопки:
   полностью гаснут на минимуме и резко вспыхивают на максимуме */
@keyframes btnStarTwinkle{
  0%, 100%  { opacity: 0;     transform: scale(.4); }
  45%       { opacity: 1;     transform: scale(1.25); }
  55%       { opacity: 1;     transform: scale(1.25); }
}

/* ─── CF7 попап успешной отправки ─── */
.form-popup{
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  visibility: hidden; opacity: 0;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.form-popup.is-visible{
  visibility: visible; opacity: 1;
}
.form-popup-backdrop{
  position: absolute; inset: 0;
  background: oklch(0.06 0.04 270 / 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.form-popup-card{
  position: relative; z-index: 1;
  background: oklch(0.96 0.018 80);
  color: oklch(0.18 0.05 265);
  border-radius: 20px; padding: 56px 48px;
  max-width: 420px; width: 100%;
  text-align: center;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.4s cubic-bezier(.22, .61, .36, 1);
  box-shadow:
    0 4px 24px oklch(0 0 0 / 0.18),
    0 32px 80px oklch(0 0 0 / 0.45);
}
.form-popup.is-visible .form-popup-card{
  transform: translateY(0) scale(1);
}
.form-popup-icon{
  display: block;
  font-size: 36px; color: oklch(0.74 0.16 55);
  font-family: var(--font-h2);
  line-height: 1; margin-bottom: 24px;
}
.form-popup-title{
  font-family: var(--font-h2); font-size: 28px; font-weight: 600;
  color: oklch(0.18 0.05 265); margin: 0 0 12px; letter-spacing: -0.02em;
  line-height: 1.1;
}
.form-popup-text{
  font-family: var(--font-h3); font-size: 16px; line-height: 1.6;
  color: oklch(0.32 0.06 265); margin: 0 0 36px;
}
.form-popup .form-popup-close{
  justify-content: center;
  min-width: 160px;
  background: oklch(0.18 0.05 265);
  color: oklch(0.96 0.018 80);
  border-color: oklch(0.18 0.05 265);
}

/* ─── Доступность: уважаем prefers-reduced-motion ───
   Пользователи с включённой настройкой «уменьшить движение» (iOS Settings →
   Accessibility → Motion, macOS / Windows аналоги) видят сайт без анимаций.
   Скролл-история неба остаётся (она не «движется», это смена цвета),
   но мерцание звёзд, бегущая строка, bob-стрелки, kawaii-эффекты — отключаем. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .star,
  .btn-star{
    opacity: .6;                 /* статичный мягкий блик */
    animation: none !important;
  }
  .marquee-track{
    animation: none !important;
    transform: none !important;
  }
  .hero-foot .scroll .arrow{
    animation: none !important;
  }
  html{ scroll-behavior: auto; }
}