/* базовая секция */
.section{ padding: 48px 0; }
.hero--compact{ padding-top: 120px; } /* запас под фикс-хеддером */

/* заголовки страницы */
.page-title{ font-size: clamp(28px, 3.6vw, 44px); margin: 0 0 8px; color:#fff; }
.page-subtitle{ color:#cfcfcf; margin: 0 0 18px; }

/* табы */
.svc-tabs{ display:flex; gap:10px; margin-top:14px; }
.svc-tab{
  appearance:none; border:0; padding:10px 16px; border-radius:12px;
  font-weight:800; color:#fff; background:rgba(255,255,255,.08);
  cursor:pointer; transition:transform .15s ease, background .2s ease;
}
.svc-tab:hover{ transform: translateY(-1px); }
.svc-tab.is-active{ background:#ff8a1f; color:#111; }

/* панели вкладок */
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

/* фильтры */
.svc-filters{ display:flex; flex-wrap:wrap; gap:10px; margin: 10px 0 22px; }
.chip{
  appearance:none; border:0; padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,.08); color:#fff; cursor:pointer; font-weight:700;
}
.chip.is-active{ background:#ff8a1f; color:#111; }

/* сетка услуг */
.svc-list{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}
@media (max-width: 1024px){
  .svc-list{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .svc-list{ grid-template-columns: 1fr; }
}
.svc-card{
  background: rgba(255,255,255,.06);
  border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
.svc-card__img{ width:100%; aspect-ratio: 16/9; object-fit:cover; }
.svc-card__body{ padding:14px; display:grid; gap:8px; }
.svc-card__title{ color:#fff; margin:0; font-size:18px; }
.svc-card__text{ color:#d7d7d7; margin:0; }
.svc-card__more{ color:#ff8a1f; font-weight:800; text-decoration:none; }

/* лента кейсов */
.cases-list{
  display:grid; gap:18px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 900px){ .cases-list{ grid-template-columns: 1fr; } }
.case-card{
  background: rgba(255,255,255,.06);
  border-radius:16px; overflow:hidden;
  display:grid; grid-template-columns: 320px 1fr;
}
@media (max-width: 680px){ .case-card{ grid-template-columns: 1fr; } }
.case-card__img{ width:100%; height:100%; object-fit:cover; min-height:220px; }
.case-card__body{ padding:16px; display:grid; gap:10px; }
.case-card__title{ color:#fff; margin:0; font-size:20px; }
.case-card__meta{ margin:0; padding:0; list-style:none; display:flex; gap:16px; color:#cfcfcf; }
.case-card__toggle{
  appearance:none; border:0; padding:8px 12px; border-radius:10px;
  background:#ff8a1f; color:#111; font-weight:800; cursor:pointer;
}
.case-card__details{ color:#dcdcdc; }

/* CTA */
.section-cta .cta-wrap{
  background: rgba(255,255,255,.06);
  border-radius:18px; padding:20px;
  display:grid; gap:8px; text-align:center;
}
.section-cta h2{ color:#fff; margin:0; }
.section-cta p{ color:#cfcfcf; margin:0 0 6px; }
/* === HERO dynamic bg (только на странице услуг/работ) === */
/* чтобы не получать двойной эффект, сначала глушим возможный предыдущий */
.page--services-works .hero .hero__inner::before,
.page--services-works .hero .hero__inner::after,
.page--services-works .hero .hero__title::after{ content: none; }

.page--services-works .hero .hero__inner{
  position: relative;
  z-index: 1;
  isolation: isolate;
  border-radius: 28px;
}

/* «Аура» — те же тёплые пятна + плавное движение */
.page--services-works .hero .hero__inner::before{
  content: "";
  position: absolute;
  inset: -40px -60px;
  border-radius: 32px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 480px at var(--x1,15%) 25%, rgba(255,155,70,.28), transparent 60%),
    radial-gradient(700px 360px at 85% 70%, rgba(255,215,140,.18), transparent 60%),
    conic-gradient(from var(--a,0deg) at 70% 30%,
                   rgba(255,170,90,.10), transparent 25% 75%, rgba(255,170,90,.10));
  filter: blur(28px);
  opacity: .85;
  animation: rcc-aurora 20s linear infinite;
  mix-blend-mode: screen;
}

/* лёгкий шум/блики */
.page--services-works .hero .hero__inner::after{
  content: "";
  position: absolute;
  inset: -28px -40px;
  border-radius: 28px;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.03), rgba(255,255,255,.03) 2px,
      transparent 3px, transparent 6px),
    radial-gradient(80% 60% at 50% 40%, rgba(255,255,255,.05), transparent 60%);
  mix-blend-mode: overlay;
  animation: rcc-grain 8s steps(10) infinite;
  opacity: .9;
}

/* подсветка под заголовком */
.page--services-works .hero .hero__title{ position: relative; }
.page--services-works .hero .hero__title::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -18px;
  width: 62%;
  height: 8px;
  background: radial-gradient(closest-side, rgba(255,178,86,.65), rgba(255,178,86,0));
  filter: blur(6px);
  animation: rcc-pulse 3.6s ease-in-out infinite;
}

/* те же анимации (можно не дублировать, если уже подключены глобально) */
@keyframes rcc-aurora{
  0%   { --x1: 15%; --a: 0deg;   transform: translateY(0); }
  50%  { --x1: 85%; --a: 180deg; transform: translateY(-10px); }
  100% { --x1: 15%; --a: 360deg; transform: translateY(0); }
}
@keyframes rcc-grain{
  0%  { transform: translate(0,0); }
  10% { transform: translate(-1%, -1%); }
  20% { transform: translate(1%, -0.5%); }
  30% { transform: translate(0.5%, 1%); }
  40% { transform: translate(-0.7%, 0.4%); }
  50% { transform: translate(0.6%, -0.6%); }
  60% { transform: translate(-0.4%, 0.8%); }
  70% { transform: translate(0.8%, 0.3%); }
  80% { transform: translate(-0.3%, -0.8%); }
  90% { transform: translate(0.2%, 0.2%); }
  100%{ transform: translate(0,0); }
}
@keyframes rcc-pulse{
  0%,100% { opacity:.45; transform: translateX(-50%) scaleX(.95); }
  50%     { opacity:.9;  transform: translateX(-50%) scaleX(1.05); }
}

/* уважение к reduce motion */
@media (prefers-reduced-motion: reduce){
  .page--services-works .hero .hero__inner::before,
  .page--services-works .hero .hero__inner::after,
  .page--services-works .hero .hero__title::after{ animation:none !important; }
}
/* ——— заголовок раздела ——— */
.services-intro { padding-top: 28px; padding-bottom: 18px; }
.svc-h1{
  margin: 0 0 8px;
  text-align: center;
  font-size: clamp(26px, 3.2vw, 40px);
  color: #fff;
  font-weight: 900;
}
.svc-lead{
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
  color: #cfcfcf;
}

/* ——— последовательность блоков ——— */
.services-seq { padding-top: 10px; padding-bottom: 48px; }
.svc-row{
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: center;
  margin: 42px 0;
}
.svc-row.is-reverse{
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
}
.svc-row.is-reverse .svc-img{ order: 2; }
.svc-row.is-reverse .svc-content{ order: 1; }

/* картинка */
.svc-img{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(0,0,0,.35);
}
.svc-img img{
  width: 100%; height: 100%; display: block; object-fit: cover;
  aspect-ratio: 16/11;
  transform: scale(1.01);
  transition: transform .5s ease;
}
.svc-row:hover .svc-img img{ transform: scale(1.04); }

/* контент */
.svc-content{ color: #d9d9d9; }
.svc-kicker{
  font-weight: 800; letter-spacing:.02em; color:#ff8a1f; margin-bottom: 6px;
}
.svc-title{
  margin: 0 0 8px;
  color:#fff; font-weight: 900;
  font-size: clamp(20px, 2.2vw, 26px);
}
.svc-text{ margin: 0 0 10px; }
.svc-list{
  margin: 0 0 14px; padding-left: 18px; color:#cfcfcf;
}
.svc-list li{ margin: 4px 0; }

/* адаптив */
@media (max-width: 1100px){
  .svc-row,
  .svc-row.is-reverse{
    grid-template-columns: 1fr; gap: 18px; margin: 28px 0;
  }
  .svc-row.is-reverse .svc-img,
  .svc-row.is-reverse .svc-content{ order: initial; }
}

/* визуальная «нить» страницы */
.services-seq .container{
  position: relative;
}
.services-seq .container::before{
  content:"";
  position:absolute; left:50%; top:0; bottom:0;
  width:1px; transform:translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.08), transparent);
  pointer-events:none;
}
@media (max-width: 1100px){
  .services-seq .container::before{ display:none; }
}
/* ===== Dynamic page background for services (mesh + grain) ===== */

/* базовый тёмный фон на всякий случай */
.page--services-works{ background:#0e0e0e; position:relative; z-index:0; }

/* Плавный mesh: крупные мягкие цветовые пятна, фиксируются к вьюпорту */
.page--services-works::before{
  content:"";
  position:fixed;              /* не скроллится — создаёт «глубину» */
  inset:-25vmax;               /* шире экрана, чтобы без краёв */
  z-index:-2;                  /* ниже контента */
  pointer-events:none;
  background:
    radial-gradient(45vmax 35vmax at 12% 22%, rgba(255,140,60,.30), transparent 65%),
    radial-gradient(45vmax 35vmax at 85% 28%, rgba(255,200,120,.22), transparent 65%),
    radial-gradient(50vmax 40vmax at 70% 78%, rgba(255,110,60,.18), transparent 70%),
    radial-gradient(40vmax 32vmax at 22% 80%, rgba(255,90,40,.16), transparent 70%);
  filter: blur(70px) saturate(115%);
  opacity:.35;                 /* общий уровень заметности */
  animation: svcMesh 36s ease-in-out infinite alternate;
}

/* Лёгкий шум/зерно поверх — добавляет глубину */
.page--services-works::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    /* тонкая виньетка */
    radial-gradient(120% 100% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 65%, rgba(0,0,0,.22) 100%),
    /* «шум» без картинок */
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.015) 0 3deg,
      rgba(0,0,0,0) 3deg 6deg);
  mix-blend-mode: overlay;
  opacity:.9;
  animation: svcGrain 8s steps(8) infinite;
}

/* анимации */
@keyframes svcMesh{
  0%   { transform: translate3d(0,0,0) scale(1); }
  40%  { transform: translate3d(-2%, -1%, 0) scale(1.02); }
  70%  { transform: translate3d(1.6%,  1%, 0)  scale(1.015); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes svcGrain{
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(-0.5%, 0.6%, 0); }
  50%  { transform: translate3d(0.8%, -0.4%, 0); }
  75%  { transform: translate3d(-0.6%, -0.3%, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* уважение к reduce motion */
@media (prefers-reduced-motion: reduce){
  .page--services-works::before,
  .page--services-works::after{ animation:none !important; }
}
/* === УСИЛЕННАЯ версия динамического фона === */
.page--services-works::before{
  opacity: .55 !important;                  /* было .35 */
  filter: blur(54px) saturate(135%) !important;  /* меньше blur + больше насыщенность */
  background:
    radial-gradient(45vmax 35vmax at 12% 22%, rgba(255,140,60,.48), transparent 66%),
    radial-gradient(45vmax 35vmax at 85% 28%, rgba(255,200,120,.34), transparent 66%),
    radial-gradient(50vmax 40vmax at 70% 78%, rgba(255,110,60,.30), transparent 72%),
    radial-gradient(40vmax 32vmax at 22% 80%, rgba(255,90,40,.26),  transparent 72%);
  animation: svcMesh 28s ease-in-out infinite alternate !important; /* чуть быстрее */
}

/* сделаем «зерно» и виньетку контрастнее, но без перебора */
.page--services-works::after{
  opacity: 1 !important;
  background:
    radial-gradient(120% 100% at 50% 40%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.10) 62%,
      rgba(0,0,0,.28) 100%),
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.025) 0 3deg,
      rgba(0,0,0,0) 3deg 6deg);
}
/* мини-галерея в карточке услуги */
.svc-photos{ display:flex; flex-wrap:wrap; gap:8px; }
.svc-photos .svc-zoom{ display:block; width:132px; border-radius:10px; overflow:hidden; }
.svc-photos img{ width:100%; height:100%; display:block; object-fit:cover; aspect-ratio: 4/3; }

/* ===== Lightbox ===== */
.lb-overlay{
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.9);
  display: grid; grid-template-rows: 1fr auto;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.lb-overlay.is-open{ opacity: 1; pointer-events: auto; }

.lb-stage{
  display:grid; place-items:center; min-height:0; padding: 24px;
}
.lb-img{
  max-width: min(92vw, 1400px);
  max-height: 84vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transform: translateY(6px) scale(.985);
  opacity: 0; transition: transform .22s ease, opacity .22s ease;
}
.lb-overlay.is-open .lb-img{ transform: translateY(0) scale(1); opacity: 1; }

.lb-footer{
  display:flex; align-items:center; justify-content:center; gap:16px;
  color:#fff; padding: 10px 16px 16px;
  user-select:none;
}

.lb-btn{
  appearance:none; border:0; background: rgba(255,255,255,.12);
  color:#fff; padding:8px 12px; border-radius:10px; font-weight:800; cursor:pointer;
}
.lb-btn:hover{ background: rgba(255,255,255,.18); }

.lb-close{ position:absolute; top:12px; right:12px; }
.lb-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background: rgba(255,255,255,.14);
}
.lb-prev{ left:14px; } .lb-next{ right:14px; }
@media (max-width: 640px){
  .lb-arrow{ width:40px; height:40px; }
  .lb-stage{ padding: 12px; }
}
/* ===== slider for .svc-photos ===== */
.svc-photos.svc-slider{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 14px 38px rgba(0,0,0,.35);
}

/* полотно слайдами */
.svc-photos.svc-slider .svc-track{
  display: flex;
  gap: 0;
  width: 100%;
  height: 100%;
  transition: transform .4s ease;
}

/* каждый слайд */
.svc-photos.svc-slider .svc-zoom{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
.svc-photos.svc-slider .svc-zoom img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  aspect-ratio: 16/10; /* высота окна слайдера; поменяй при желании */
  transform: scale(1);
  transition: transform .35s ease;
}
@media (max-width: 640px){
  .svc-photos.svc-slider .svc-zoom img{ aspect-ratio: 4/3; }
}

/* стрелки */
.svc-photos.svc-slider .svc-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14);
  color:#fff; border:0; cursor:pointer;
  transition: background .2s ease, transform .2s ease;
}
.svc-photos.svc-slider .svc-arrow:hover{ background: rgba(255,255,255,.2); transform: translateY(-50%) scale(1.06); }
.svc-photos.svc-slider .svc-prev{ left: 10px; }
.svc-photos.svc-slider .svc-next{ right: 10px; }

/* точки */
.svc-photos.svc-slider .svc-dots{
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.svc-photos.svc-slider .svc-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.35); border:0; cursor:pointer;
}
.svc-photos.svc-slider .svc-dot.is-active{ background:#ff8a1f; }

/* hover-zoom сохраним чуть-чуть */
@media (hover:hover){
  .svc-photos.svc-slider .svc-zoom:hover img{ transform: scale(1.03); }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .svc-photos.svc-slider .svc-track{ transition: none !important; }
  .svc-photos.svc-slider .svc-zoom img{ transition: none !important; }
}
/* === ШАХМАТКА для .svc-row === */
.services-seq .svc-row{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  margin: clamp(22px, 5vw, 56px) 0;
}

/* чётные строки переворачиваем местами */
.services-seq .svc-row:nth-child(even) .svc-photos{ order: 2; }
.services-seq .svc-row:nth-child(even) .svc-content{ order: 1; }

/* аккуратнее на широких: визуальное выравнивание заголовков */
.services-seq .svc-title{ line-height: 1.1; margin: 4px 0 10px; }
.services-seq .svc-kicker{ opacity:.95; letter-spacing:.02em; }

/* слайдер: одинаковая высота, мягкие края */
:root{ --svc-slider-ratio: 16/10; }                /* поменяй на 4/3 если нужно выше */
.svc-photos.svc-slider{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  position: relative;
  isolation: isolate;
}
.svc-photos.svc-slider .svc-zoom img{
  aspect-ratio: var(--svc-slider-ratio);
  object-fit: cover;
}
.svc-photos.svc-slider::after{                     /* лёгкая тенюшка поверх для глубины */
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 100% at 50% 20%, transparent, rgba(0,0,0,.20));
  pointer-events:none; z-index:1;
}

/* точки/стрелки чуть компактнее */
.svc-photos.svc-slider .svc-arrow{ width:40px; height:40px; }
.svc-photos.svc-slider .svc-dots{ bottom:12px; }

/* мобилки — в одну колонку, сначала картинка, затем текст */
@media (max-width: 1100px){
  .services-seq .svc-row{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .services-seq .svc-row .svc-photos,
  .services-seq .svc-row .svc-content{ order: initial; }
  :root{ --svc-slider-ratio: 4/3; }
}
/* — футер в стиле главной — оверрайд на всякий случай — */
.page--services-works .rcc-footer{
  background: #0e0e0e;               /* как фон страницы */
  border-top: 1px solid rgba(255,255,255,.06);
  padding: clamp(24px, 4vw, 40px) 0;
}
.page--services-works .rcc-footer .footer-inner{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
}
.page--services-works .rcc-footer .footer-nav a{
  color:#d9d9d9;
}
.page--services-works .rcc-footer .footer-nav a:hover{
  color:#ff8a1f;
}
@media (max-width: 800px){
  .page--services-works .rcc-footer .footer-inner{
    grid-template-columns: 1fr;
  }
}
.services-seq .svc-row.is-reverse .svc-photos{ order:2; }
.services-seq .svc-row.is-reverse .svc-content{ order:1; }

/* ===== Живые заголовки для карточек услуг ===== */

/* Общие токены */
:root{
  /* золото → янтарь → апельсин (плавный металл) */
  --fx-c1: #fff2b0; /* pale gold */
  --fx-c2: #ffd36e; /* soft gold */
  --fx-c3: #ffb24d; /* amber */
  --fx-c4: #ff9a3c; /* orange */
  --fx-g1: rgba(255, 210, 120, .22);  /* тёплое свечение 1 */
  --fx-g2: rgba(255, 160, 60,  .18);  /* тёплое свечение 2 */
}


/* Заголовок карточки (H3) — компактный «неон» */
.fx-title-sm{
  font-family: "Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, "Manrope", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .3px;
  line-height: 1.08;
  margin: 2px 0 8px;
  background: conic-gradient(from 160deg at 50% 50%, var(--fx-c1), var(--fx-c2), var(--fx-c3), var(--fx-c1));
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(80,140,255,.18);
  animation:
  fxGoldShift 16s linear infinite,   /* скорость перелива градиента */
  fxGoldGlow 5s ease-in-out infinite alternate; /* пульс свечения */
}

/* Ещё более компактный для карточек «выполненные работы» */
.fx-title-xs{
  font-family: "Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, "Manrope", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
  background: linear-gradient(90deg, #cfe7ff 0%, #ffd5ea 50%, #cfe7ff 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 16px rgba(80,140,255,.12));
  animation: fxSub 9s linear infinite;
}

/* Кикер (адрес/подпись) — тонкий акцент */
.fx-kicker{
  font-family: "Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, "Manrope", Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .8rem;
  background: linear-gradient(90deg, #9fb8ff, #ff8a1f);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  opacity: .95;
}

/* Лид/подзаголовок в интро */
.fx-lead{
  color: var(--fx-light);
  text-shadow: 0 6px 24px rgba(42,123,255,.18);
}

/* Hover — лёгкое ускорение */
.fx-title-sm:hover{ animation-duration: 8s, 3.2s; }
.fx-title-xs:hover{ animation-duration: 5s; }

/* Анимации */
@keyframes fxShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes fxGlow{
  0%{ text-shadow: 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(80,140,255,.18); }
  100%{ text-shadow: 0 1px 0 rgba(255,255,255,.08), 0 20px 40px rgba(42,220,180,.22); }
}
@keyframes fxSub{
  0%{ filter: drop-shadow(0 6px 16px rgba(80,140,255,.12)); }
  50%{ filter: drop-shadow(0 10px 22px rgba(255,120,180,.16)); }
  100%{ filter: drop-shadow(0 6px 16px rgba(80,140,255,.12)); }
}

/* Уважение настроек пользователя */
@media (prefers-reduced-motion: reduce){
  .fx-title-sm, .fx-title-xs{ animation: none !important; }
}
.fx-title-sm{
  font-family: "Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, "Manrope", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .3px;
  line-height: 1.08;
  margin: 2px 0 8px;

  /* многослойный «металлический» градиент внутри текста */
  background:
    /* основной конусный перелив с тонкими бликами */
    conic-gradient(from 140deg at 50% 50%,
      var(--fx-c1) 0%,
      var(--fx-c2) 14%,
      var(--fx-c3) 28%,
      var(--fx-c4) 42%,
      var(--fx-c3) 58%,
      var(--fx-c2) 72%,
      var(--fx-c1) 86%,
      var(--fx-c1) 100%),
    /* мягкая «золотая пыль» сверху слева */
    radial-gradient(60% 100% at 0% 0%, rgba(255,255,255,.10) 0%, transparent 70%);
  background-size: 230% 230%, 140% 140%;
  background-position: 0% 50%, 0% 0%;
  background-repeat: no-repeat;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* тёплое свечение */
  text-shadow:
    0 1px 0 rgba(255,255,255,.06),
    0 12px 34px var(--fx-g1),
    0 26px 62px var(--fx-g2);

  /* плавный, дорогой ход градиента */
  animation:
    fxGoldShift 16s linear infinite,
    fxGoldGlow 5s ease-in-out infinite alternate;
  will-change: background-position, filter;
}

/* тонкий «блик» по тексту */
.fx-title-sm::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 35%,
            rgba(255,255,255,.22) 50%, transparent 65%);
  mix-blend-mode: screen;
  background-size: 220% 100%;
  animation: fxGoldSweep 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fxGoldShift{
  0%   { background-position: 0% 50%, 0% 0%; }
  50%  { background-position: 100% 50%, 20% 0%; }
  100% { background-position: 0% 50%, 0% 0%; }
}
@keyframes fxGoldGlow{
  0%  { text-shadow:
          0 1px 0 rgba(255,255,255,.06),
          0 12px 34px var(--fx-g1),
          0 26px 62px var(--fx-g2); }
  100%{ text-shadow:
          0 1px 0 rgba(255,255,255,.08),
          0 18px 44px rgba(255,210,120,.28),
          0 36px 84px rgba(255,160,60,.22); }
}
@keyframes fxGoldSweep{
  0%   { background-position: -120% 0; opacity: 0; }
  25%  { opacity: .65; }
  50%  { background-position: 120% 0; opacity: 0; }
  100% { background-position: 120% 0; opacity: 0; }
}

/* уважение настроек пользователя */
@media (prefers-reduced-motion: reduce){
  .fx-title-sm, .fx-title-sm::after{ animation: none !important; }
}
/* — отключаем прежние лучи/градиенты — */
.page--services-works::before,
.page--services-works::after { content: none !important; }

/* — новый фон — */
.lux-bg{
  position: fixed;
  inset: 0;
  z-index: -2;           /* ниже контента */
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 20%, #0b0f14 0%, #0a0e13 45%, #070a0f 100%);
}
.lux-bg canvas{
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(115%) contrast(105%) blur(0.2px);
}

/* мягкая виньетка поверх канваса для глубины */
.lux-bg::after{
  content:"";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 90% at 50% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 65%, rgba(0,0,0,.32) 100%),
    radial-gradient(60% 40% at 10% 10%, rgba(255,200,120,.08), transparent 60%),
    radial-gradient(60% 40% at 90% 80%, rgba(255,140,60,.06), transparent 60%);
  mix-blend-mode: overlay;
}

/* уважение к reduce motion: оставить только статические градиенты */
@media (prefers-reduced-motion: reduce){
  .lux-bg canvas{ display:none !important; }
}
/* мягкий тёмный градиент */
.lux-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 20%, #0b0f14 0%, #090d12 55%, #070a0f 100%);
}

/* меньше насыщенности/резкости */
.lux-bg canvas{
  width: 100%;
  height: 100%;
  display: block;
  filter: saturate(100%) contrast(98%) blur(0.8px) opacity(.85);
}

/* сильнее виньетка — лучше читабельность контента */
.lux-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(110% 90% at 50% 30%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.36) 100%),
    radial-gradient(60% 40% at 12% 8%, rgba(255,200,120,.04), transparent 60%),
    radial-gradient(60% 40% at 88% 84%, rgba(255,140,60,.03), transparent 60%);
  mix-blend-mode: normal;
  pointer-events:none;
}

/* дополнительно затемняем под заголовками, если нужно */
.page--services-works .section-title,
.page--services-works h1,h2,h3{
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
}

/* ===== компактная шапка на мобиле ===== */
@media (max-width: 560px){
  /* делаем шапку фиксированной и тоньше */
  .site-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
  .rcc-wrap, .rcc-capsule{ padding: 10px 12px; }
  .rcc-capsule{ border-radius: 18px; }

  /* кнопку справа убираем, чтобы не раздувала высоту */
  .caps-cta{ display: none !important; }

  /* контакты: 4 иконки в одну строку, без текста */
  .rcc-capsule .rcc-contacts.rcc-contacts--icons{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(34px, 1fr));
    gap: 8px;
    min-width: 0 !important;
  }
  .rcc-capsule .rcc-contacts--icons .rcc-ico{
    width: auto; padding: 8px; justify-content: center;
  }
  .rcc-capsule .rcc-contacts--icons .rcc-ico span{ display: none; }

  /* меню — чуть компактнее */
  .rcc-menu .rcc-row{ gap: 14px; }
}

/* планшеты: 2×2 */
@media (min-width: 561px) and (max-width: 900px){
  .rcc-capsule .rcc-contacts.rcc-contacts--icons{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 10px 12px;
    min-width: 0 !important;
  }
  .rcc-capsule .rcc-contacts--icons .rcc-ico{ width: 100%; justify-content: flex-start; padding: 8px 10px; }
}

/* === Fix: мобильный отступ под фикс-хеддер + корректный скролл к якорям === */
@media (max-width: 560px){
  :root{ --header-h: 64px; } /* дефолт на всякий случай, JS обновит точно */

  /* Контент не уезжает под шапку */
  body{ padding-top: var(--header-h, 64px); }

  /* Первый блок сверху (интро) — добавим небольшой дополнительный люфт */
  .services-intro{ padding-top: calc(var(--header-h, 64px) + 8px); }
}

/* Любой элемент с id (в том числе заголовки-якоря) не прячется под шапкой */
[id]{ scroll-margin-top: calc(var(--header-h, 64px) + 8px); }
/* === Anchor/scroll offset under fixed header (mobile) === */
@media (max-width: 560px){
  :root{
    --header-h: 64px; /* дефолт, JS уточнит фактическую высоту */
  }

  /* 1) Любые прокрутки/scrollIntoView/якоря учитывают высоту шапки */
  html{
    scroll-padding-top: calc(var(--header-h, 64px) + 8px);
  }

  /* 2) На всякий случай — для прямых переходов по #id */
  [id]{
    scroll-margin-top: calc(var(--header-h, 64px) + 8px);
  }

  /* 3) Контент не уезжает под шапку вообще */
  body{
    padding-top: calc(var(--header-h, 64px) + env(safe-area-inset-top, 0px));
  }
}
/* Мобила: учитываем реальный оффсет шапки (высота + top) */
@media (max-width: 560px){
  :root{ --hdr-off: 84px; } /* дефолт, JS уточнит */

  /* Якори и программная прокрутка не прячутся под шапку */
  html{ scroll-padding-top: calc(var(--hdr-off, 84px) + 8px); }
  [id]{  scroll-margin-top:  calc(var(--hdr-off, 84px) + 8px); }

  /* Контент стартует ниже плавающего хедера */
  body{ padding-top: calc(var(--hdr-off, 84px) + env(safe-area-inset-top, 0px)); }

  /* Первый блок страницы (если надо чуть больше воздуха) */
  .page--services-works .services-intro{
    padding-top: calc(var(--hdr-off, 84px) + 8px);
  }
}
/* === FINAL: не прячем заголовки под капсульный хеддер (мобила) === */
@media (max-width: 560px){
  :root{ --hdr-off: 84px; } /* дефолт; JS выше выставит точное значение */

  /* Любой авто-скролл и якоря учитывают высоту шапки */
  html{ scroll-padding-top: calc(var(--hdr-off) + 10px); }
  [id]{  scroll-margin-top:  calc(var(--hdr-off) + 10px); }

  /* Контент стартует ниже шапки */
  body{ padding-top: calc(var(--hdr-off) + env(safe-area-inset-top, 0px)); }

  /* Первый блок под шапкой — чуть больше воздуха */
  .services-intro{ padding-top: calc(var(--hdr-off) + 12px) !important; }
  /* На всякий случай, если где-то ещё был фиксированный запас */
  .hero--compact{ padding-top: calc(var(--hdr-off) + 20px) !important; }
}
@media (max-width: 560px){
  :root{ --hdr-off: 84px; } /* дефолт; JS выставит точное */

  html{ scroll-padding-top: calc(var(--hdr-off) + 10px); }
  [id]{  scroll-margin-top:  calc(var(--hdr-off) + 10px); }

  body{ padding-top: calc(var(--hdr-off) + env(safe-area-inset-top, 0px)); }
  .services-intro{ padding-top: calc(var(--hdr-off) + 12px) !important; }
  .hero--compact{  padding-top: calc(var(--hdr-off) + 20px) !important; }
}
@media (max-width:560px){
  /* сколько воздуха после шапки до первого заголовка */
  .services-intro{ padding-top: 20px; } /* было 0 или 12px — ставь своё */
}
/* spacer под фикс-хеддер (мобила) */
@media (max-width: 800px){
  :root{ --hdr-off: 100px; }              /* дефолт, JS уточнит */
  #headerSpacer{ height: var(--hdr-off); }/* реальный отступ под шапкой */
  html{ scroll-padding-top: calc(var(--hdr-off) + 10px); }
  [id]{  scroll-margin-top:  calc(var(--hdr-off) + 10px); }
}

/* если где-то раньше задавал body {padding-top: ...} — убери или переопредели: */
@media (max-width: 800px){
  body{ padding-top: 0 !important; }     /* чтобы не было двойного отступа */
}

/* === SERVICES: зелёный фон и стекло (без изменения текста) === */

/* 1) Базовый фон страницы услуг — тёмно-зелёный */
.page--services-works{
  background: #0f2d2a !important; /* было #0e0e0e */
  position: relative;
  z-index: 0;
}

/* 2) Включаем фоновые слои заново и перекрашиваем mesh в зелёный */
.page--services-works::before,
.page--services-works::after{
  content:"" !important; /* перекрываем возможное content:none */
}

/* Мягкие зелёно-бирюзовые пятна (вместо оранжевых) */
.page--services-works::before{
  position: fixed;
  inset: -25vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(45vmax 35vmax at 12% 22%, rgba(46, 210, 170, .30), transparent 65%),
    radial-gradient(45vmax 35vmax at 85% 28%, rgba(30, 190, 150, .22), transparent 65%),
    radial-gradient(50vmax 40vmax at 70% 78%, rgba(24, 160, 130, .18), transparent 70%),
    radial-gradient(40vmax 32vmax at 22% 80%, rgba(18, 120, 100, .16), transparent 70%);
  filter: blur(70px) saturate(115%);
  opacity: .42;
  animation: svcMesh 36s ease-in-out infinite alternate;
}

/* Зерно/виньетка оставляем, чтобы контент читался; можно не трогать */
.page--services-works::after{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 100% at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 65%, rgba(0,0,0,.22) 100%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.015) 0 3deg, rgba(0,0,0,0) 3deg 6deg);
  mix-blend-mode: overlay;
  opacity: .9;
  animation: svcGrain 8s steps(8) infinite;
}

/* 3) Hero-аура: оранжевое свечение → зелёное (только фон, текст не трогаем) */
.page--services-works .hero .hero__inner::before{
  content:"";
  position: absolute;
  inset: -40px -60px;
  border-radius: 32px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 480px at var(--x1,15%) 25%, rgba(46, 210, 170, .28), transparent 60%),
    radial-gradient(700px 360px at 85% 70%, rgba(30, 190, 150, .18), transparent 60%),
    conic-gradient(from var(--a,0deg) at 70% 30%,
                   rgba(24, 160, 130, .10), transparent 25% 75%, rgba(24, 160, 130, .10));
  filter: blur(28px);
  opacity: .85;
  animation: rcc-aurora 20s linear infinite;
  mix-blend-mode: screen;
}

/* подсветка под заголовком — в зелёный вместо янтарного */
.page--services-works .hero .hero__title::after{
  content:"";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -18px;
  width: 62%;
  height: 8px;
  background: radial-gradient(closest-side, rgba(46,210,170,.65), rgba(46,210,170,0));
  filter: blur(6px);
  animation: rcc-pulse 3.6s ease-in-out infinite;
}

/* 4) Карточки и CTA — зелёное «стекло» вместо серого */
.svc-card,
.case-card,
.section-cta .cta-wrap{
  background: linear-gradient(180deg, rgba(16, 41, 37, .85), rgba(13, 38, 34, .80)) !important; /* было rgba(255,255,255,.06) */
  border: 1px solid rgba(187,245,232,.12);
  box-shadow: 0 10px 30px rgba(7,32,29,.45) !important; /* зелёная тень вместо чёрной */
}

/* Тени под медиа — чуть в зелёный тон */
.svc-img,
.svc-photos.svc-slider,
.case-card{
  box-shadow: 0 14px 38px rgba(7,32,29,.40) !important;
}

/* 5) Если используешь .lux-bg (канвас-фон), перекрасим и его в зелёный */
.lux-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 20%, #0b1412 0%, #0a1311 55%, #07100d 100%);
}
.lux-bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(110% 90% at 50% 30%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.36) 100%),
    radial-gradient(60% 40% at 12% 8%, rgba(120,240,200,.05), transparent 60%),
    radial-gradient(60% 40% at 88% 84%, rgba(60,200,160,.04), transparent 60%);
  mix-blend-mode: normal;
  pointer-events:none;
}

/* базовая версия фоновых пятен */
.page--services-works::before{
  content:"";
  position:fixed;
  inset: -25vmax;
  z-index: -2;
  pointer-events:none;
  background:
    radial-gradient(45vmax 35vmax at 12% 22%, rgba(46, 210, 170, .30), transparent 65%),
    radial-gradient(45vmax 35vmax at 85% 28%, rgba(30, 190, 150, .22), transparent 65%),
    radial-gradient(50vmax 40vmax at 70% 78%, rgba(24, 160, 130, .18), transparent 70%),
    radial-gradient(40vmax 32vmax at 22% 80%, rgba(18, 120, 100, .16), transparent 70%);
  filter: blur(70px) saturate(115%);
  opacity:.42;
  animation: svcMesh 36s ease-in-out infinite alternate;
}

/* усиленная версия (если у тебя есть блок с “opacity: .55 !important;”) */
.page--services-works::before{
  opacity: .55 !important;
  filter: blur(54px) saturate(135%) !important;
  background:
    radial-gradient(45vmax 35vmax at 12% 22%, rgba(46, 210, 170, .48), transparent 66%),
    radial-gradient(45vmax 35vmax at 85% 28%, rgba(30, 190, 150, .34), transparent 66%),
    radial-gradient(50vmax 40vmax at 70% 78%, rgba(24, 160, 130, .30), transparent 72%),
    radial-gradient(40vmax 32vmax at 22% 80%, rgba(18, 120, 100, .26), transparent 72%);
}

.page--services-works .hero .hero__inner::before{
  content:"";
  position: absolute;
  inset: -40px -60px;
  border-radius: 32px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 480px at var(--x1,15%) 25%, rgba(46, 210, 170, .28), transparent 60%),
    radial-gradient(700px 360px at 85% 70%, rgba(30, 190, 150, .18), transparent 60%),
    conic-gradient(from var(--a,0deg) at 70% 30%,
                   rgba(24, 160, 130, .10), transparent 25% 75%, rgba(24, 160, 130, .10));
  filter: blur(28px);
  opacity: .85;
  animation: rcc-aurora 20s linear infinite;
  mix-blend-mode: screen;
}

.page--services-works{
  background: #0f2d2a !important; /* тёмно-зелёный фон страницы */
}
/* ====== SERVICES: GREEN THEME OVERRIDE (paste at EOF) ====== */

/* Базовый фон страницы */
.page--services-works{
  background: #0f2d2a !important;
  position: relative;
  z-index: 0;
}

/* Зелёный mesh-фон — фиксируется к вьюпорту */
.page--services-works::before{
  content: "" !important;
  position: fixed !important;
  inset: -25vmax !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(45vmax 35vmax at 12% 22%, rgba(46,210,170,.48), transparent 66%),
    radial-gradient(45vmax 35vmax at 85% 28%, rgba(30,190,150,.34), transparent 66%),
    radial-gradient(50vmax 40vmax at 70% 78%, rgba(24,160,130,.30), transparent 72%),
    radial-gradient(40vmax 32vmax at 22% 80%, rgba(18,120,100,.26), transparent 72%) !important;
  filter: blur(54px) saturate(135%) !important;
  opacity: .55 !important;
  animation: svcMesh 28s ease-in-out infinite alternate !important;
}

/* Лёгкое зерно/виньетка сверху — нейтральная */
.page--services-works::after{
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(120% 100% at 50% 40%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.10) 62%,
      rgba(0,0,0,.28) 100%),
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,.025) 0 3deg,
      rgba(0,0,0,0) 3deg 6deg) !important;
  mix-blend-mode: overlay !important;
  opacity: 1 !important;
  animation: svcGrain 8s steps(8) infinite !important;
}

/* Hero-аура — зелёная (только фон, текст не трогаем) */
.page--services-works .hero .hero__inner{ position: relative; z-index: 1; isolation: isolate; }
.page--services-works .hero .hero__inner::before{
  content: "" !important;
  position: absolute !important;
  inset: -40px -60px !important;
  border-radius: 32px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(900px 480px at var(--x1,15%) 25%, rgba(46,210,170,.28), transparent 60%),
    radial-gradient(700px 360px at 85% 70%, rgba(30,190,150,.18), transparent 60%),
    conic-gradient(from var(--a,0deg) at 70% 30%,
      rgba(24,160,130,.10), transparent 25% 75%, rgba(24,160,130,.10)) !important;
  filter: blur(28px) !important;
  opacity: .85 !important;
  mix-blend-mode: screen !important;
  animation: rcc-aurora 20s linear infinite !important;
}

/* Подсветка под заголовком — зелёная */
.page--services-works .hero .hero__title{ position: relative; }
.page--services-works .hero .hero__title::after{
  content: "" !important;
  position: absolute !important;
  left: 50% !important; transform: translateX(-50%) !important;
  bottom: -18px !important;
  width: 62% !important; height: 8px !important;
  background: radial-gradient(closest-side, rgba(46,210,170,.65), rgba(46,210,170,0)) !important;
  filter: blur(6px) !important;
  animation: rcc-pulse 3.6s ease-in-out infinite !important;
}

/* Карточки/CTA — зелёное «стекло» вместо серого */
.svc-card,
.case-card,
.section-cta .cta-wrap{
  background: linear-gradient(180deg, rgba(16,41,37,.85), rgba(13,38,34,.80)) !important;
  border: 1px solid rgba(187,245,232,.12) !important;
  box-shadow: 0 10px 30px rgba(7,32,29,.45) !important;
}

/* Тени у медиа — зелёный тон */
.svc-img,
.svc-photos.svc-slider,
.case-card{
  box-shadow: 0 14px 38px rgba(7,32,29,.40) !important;
}

/* Если используется .lux-bg — перекрасить в зелёный */
.lux-bg{
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  background: radial-gradient(120% 100% at 50% 20%, #0b1412 0%, #0a1311 55%, #07100d 100%) !important;
}
.lux-bg::after{
  content:"" !important;
  position:absolute !important; inset:0 !important;
  background:
    radial-gradient(110% 90% at 50% 30%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.36) 100%),
    radial-gradient(60% 40% at 12% 8%, rgba(120,240,200,.05), transparent 60%),
    radial-gradient(60% 40% at 88% 84%, rgba(60,200,160,.04), transparent 60%) !important;
  mix-blend-mode: normal !important;
  pointer-events:none !important;
}
/* ====== END OVERRIDE ====== */