/* =======================
   ТЕМА / ПЕРЕМЕННЫЕ
   ======================= */
:root{
  --bg:#0e0e0f;
  --panel:#131416;
  --text:#eae9e7;
  --muted:#a9a7a3;
  --brand:#cb6e17;
  --brand-2:#f5a45d;
  --radius:20px;
  --shadow:0 8px 30px rgba(0,0,0,.35);

  /* Типографика (fluid) */
  --ff-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --ff-alt: var(--ff-sans);
  --leading: 1.55;
  --fs-xxl: clamp(40px, 6vw, 88px);
  --fs-xl:  clamp(28px, 4vw, 52px);
  --fs-lg:  clamp(20px, 2.4vw, 28px);
  --fs-md:  clamp(16px, 1.4vw, 18px);
  --fs-sm:  clamp(13px, 1vw, 15px);

  /* Интенсивность затемнения героя */
  --veil:.55;
}

/* =======================
   БАЗА
   ======================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--ff-sans);
  color:var(--text);
  background:var(--bg);
  line-height:var(--leading);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:.01em;
  text-wrap:pretty;
  hanging-punctuation:first last;
}
img,video{max-width:100%;display:block}
.container{width:min(1200px, 92vw); margin-inline:auto}

/* =======================
   ХЕДЕР
   ======================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(14,14,15,.9), rgba(14,14,15,.2));
  backdrop-filter:saturate(120%) blur(6px);
  transition:box-shadow .3s ease;
  --logo-size:44px;
}
@media (min-width:900px){ .site-header{ --logo-size:64px; } }
.site-header[data-elevated]{box-shadow:0 2px 20px rgba(0,0,0,.35)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; gap:10px; align-items:center; color:var(--text); text-decoration:none}
.brand__logo{height:var(--logo-size); width:auto; object-fit:contain; display:block}
.brand__name{font-weight:900; letter-spacing:.06em; font-size:clamp(14px,1.8vw,18px)}

.nav{position:relative}
.nav__toggle{display:none; width:44px; height:44px; border:0; border-radius:12px; background:var(--panel); box-shadow:var(--shadow); cursor:pointer; padding:10px}
.nav__bar{display:block; height:2px; background:#fff; margin:6px 0}
.nav__menu{display:flex; gap:24px; align-items:center; list-style:none; margin:0; padding:0}
.nav__menu a{color:var(--text); text-decoration:none; opacity:.9}

/* — подсветка-линиЯ под пунктами меню — */
.nav__menu a{
  position:relative;
  padding-bottom:6px;               /* место под линию */
}
.nav__menu a::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:60%; height:2px;
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--brand) 20%, var(--brand-2) 80%, transparent);
  box-shadow:0 0 12px rgba(203,110,23,.55);
  opacity:0;
  transition:transform .28s ease, opacity .28s ease;
}
.nav__menu a:hover,
.nav__menu a:focus-visible{color:#fff}
.nav__menu a:hover::after,
.nav__menu a:focus-visible::after,
.nav__menu a[aria-current="page"]::after{
  transform:translateX(-50%) scaleX(1);
  opacity:1;
}

/* =======================
   КНОПКИ
   ======================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
   padding:14px 22px; border-radius:1200px; text-decoration:none; font-weight:700; letter-spacing:.02em; font-size:18px;
  border:2px solid transparent; transition:transform .15s ease, background .2s ease, border .2s ease; cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#111}
.btn--primary:hover{filter:brightness(1.05)}
.btn--ghost{border-color:rgba(255,255,255,.6); color:var(--text); background:rgba(0,0,0,.25)}
.btn--ghost:hover{background: rgb(197, 98, 16)
}
.w-100{width:100%}.center{text-align:center}.mt-40{margin-top:40px}

/* — подсветка-линия под кнопками — */
.btn{ position:relative; overflow:visible; }
.btn::after{
  content:"";
  position:absolute; left:10%; right:10%; bottom:-6px;
  height:3px; border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--brand) 15%, var(--brand-2) 85%, transparent);
  box-shadow:0 0 14px rgba(203,110,23,.55);
  transform:scaleX(0);
  transform-origin:center;
  opacity:0;
  transition:transform .28s ease, opacity .28s ease;
}
.btn:hover::after,
.btn:focus-visible::after{ transform:scaleX(1); opacity:1; }

/* =======================
   ТИПОГРАФИКА БЛОКОВ
   ======================= */
h1,h2,h3,h4{ font-family: var(--ff-alt); line-height:1.12; margin:.12em 0 .35em }
h1{ font-size: var(--fs-xxl); font-weight:900; letter-spacing:.005em }
h2{ font-size: var(--fs-xl);  font-weight:800 }
h3{ font-size: var(--fs-lg);  font-weight:800 }
.lead{ font-size: var(--fs-lg); color: var(--muted) }
small,.caption{ font-size: var(--fs-sm); color: var(--muted) }

.kicker{
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand-2); text-shadow:0 2px 18px rgba(203,110,23,.15);
}

/* =======================
   HERO + СЛАЙДЕР
   ======================= */
.hero{ position:relative; min-height:86vh; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.hero__inner{ text-align:center; position:relative; z-index:1 }
.hero--left .hero__inner{ text-align:left; align-items:flex-start }
@media (min-width:900px){ .hero__inner{ display:flex; flex-direction:column; align-items:center } }

/* фон для мобилы (если нужен постер) */
.hero__bg{
  position:absolute; inset:0; z-index:-3;
  background:
    radial-gradient(1200px 600px at 70% 10%, rgba(203,110,23,.25), transparent 60%),
    linear-gradient(180deg, rgba(14,14,15,.2), rgba(14,14,15,.85)),
    var(--bg-image) center/cover no-repeat;
}

/* СЛАЙДЕР */
.hero-slider{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:#0b0b0c; }
.hero-slider::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(0,0,0,.25), transparent 60%),
    linear-gradient(180deg, rgba(14,14,15,.55), rgba(14,14,15,.35) 40%, rgba(14,14,15,.65));
  opacity: var(--veil);
}

.hero-nav{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.08); backdrop-filter:blur(6px); }
.hero-nav--prev{ left:14px } .hero-nav--next{ right:14px }
.hero-nav::before{ content:""; display:block; width:10px; height:10px; border:2px solid #fff; border-left:0; border-top:0; margin:auto; transform:rotate(-45deg); }
.hero-nav--prev::before{ transform:rotate(135deg) }
.hero-nav:hover{ background:rgba(255,255,255,.14) }
.hero-dots{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; gap:8px }
.hero-dots i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45) }
.hero-dots i[aria-current="true"]{ background:var(--brand); box-shadow:0 0 0 6px rgba(203,110,23,.16) }
@media (max-width:768px){ .hero-nav{ width:40px; height:40px } .hero-slide.is-active img{ animation-duration:12s } }
@media (prefers-reduced-motion:reduce){ .hero-slide,.hero-slide img{ transition:none!important; animation:none!important } }

/* Текстовые элементы героя */
.hero__tag{
  display:inline-block; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  font-size:clamp(14px,1.8vw,22px); padding:10px 16px; border-radius:999px;
  color:#fff; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px); box-shadow:0 8px 26px rgba(0,0,0,.25), inset 0 0 0 2px rgba(203,110,23,.15);
}
.hero__title{
  font-size: var(--fs-xxl);
  text-wrap: balance;
  background: linear-gradient(135deg, #fff, #f1e9df);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 12px 42px rgba(0,0,0,.45);
  -webkit-text-stroke:1.2px rgba(0,0,0,.25);
  position:relative;
}
.hero__title::after{
  content:""; display:block; width:min(520px,60vw); height:4px; margin:.45em auto 0;
  background:linear-gradient(90deg, transparent, var(--brand), transparent);
  filter:drop-shadow(0 0 10px rgba(203,110,23,.45));
}
.hero__subtitle{
  font-size:var(--fs-lg); color:#f3f3f3; text-shadow:0 2px 18px rgba(0,0,0,.35);
  display:inline-block; padding:10px 16px; border-radius:12px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(6px);
}
.hero__cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:.4rem }
.hero__timeline{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:18px; opacity:.85; font-weight:700; color:#d8d6d1 }
.hero__timeline i{ width:8px; height:8px; background:var(--brand); border-radius:50%; box-shadow:0 0 0 8px rgba(203,110,23,.15) }

/* =======================
   ОБЩИЕ СЕКЦИИ
   ======================= */
.section{padding:80px 0}
.grid-2{display:grid; gap:36px}
@media (min-width:900px){ .grid-2{grid-template-columns:1.1fr 1fr} }
.about__media img{width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow)}
.about__content h2{margin:.1em 0 .4em}
.ticks{margin:18px 0 0; padding:0; list-style:none}
.ticks li{margin:10px 0; padding-left:28px; position:relative}
.ticks li::before{content:""; position:absolute; left:0; top:8px; width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow:0 0 0 6px rgba(203,110,23,.15)}
/* ===== Dynamic FX for About ===== */
.about{ position: relative; overflow: hidden; }

.about__fx{
  position:absolute; inset:0; z-index:0; /* под контентом */
  pointer-events:none;
}

/* Две «ауроры» (цветные мягкие пятна) */
.about__fx::before,
.about__fx::after{
  content:"";
  position:absolute;
  width:60vmax; height:60vmax;
  filter: blur(60px);
  opacity:.35;
  will-change: transform;
  mix-blend-mode: screen;
}
.about__fx::before{
  left:-10%; top:-20%;
  background: radial-gradient(35% 35% at 50% 50%, rgba(245,164,93,.65), transparent 70%),
              radial-gradient(45% 45% at 20% 80%, rgba(203,110,23,.55), transparent 70%);
  animation: blobA 26s ease-in-out infinite alternate;
}
.about__fx::after{
  right:-15%; bottom:-25%;
  background: radial-gradient(40% 40% at 50% 50%, rgba(203,110,23,.5), transparent 70%),
              radial-gradient(55% 55% at 80% 20%, rgba(245,164,93,.4), transparent 70%);
  animation: blobB 32s ease-in-out infinite alternate;
}

/* Тонкая сетка с вращением */
.about__fx .fx-grid{
  position:absolute; inset:-20%; /* чуть больше секции, чтобы не обрезалось при повороте */
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 40px);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 40%, transparent 100%); /* затухание к краям */
  opacity:.25;
  animation: gridRotate 48s linear infinite;
  will-change: transform;
}

/* Ключевые кадры */
@keyframes blobA{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(6%,10%,0) scale(1.12) rotate(8deg); }
}
@keyframes blobB{
  0%{ transform: translate3d(0,0,0) scale(1.05); }
  100%{ transform: translate3d(-8%,-6%,0) scale(1.18) rotate(-10deg); }
}
@keyframes gridRotate{
  0%{ transform: rotate(0deg) scale(1); }
  100%{ transform: rotate(360deg) scale(1); }
}

/* Небольшой параллакс для картинки при скролле уже есть через [data-parallax] — оставляем.
   Поднимаем контент поверх фона: */
.about .container{ position: relative; z-index: 1; }

/* Меньше анимации на слабых устройствах / по настройкам пользователя */
@media (prefers-reduced-motion: reduce){
  .about__fx::before, .about__fx::after, .about__fx .fx-grid{ animation: none !important; }
}

/* =======================
   СТАТИСТИКА
   ======================= */
.strip{background:linear-gradient(180deg,#111,#0c0c0c)}
.strip__inner{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; padding:26px 0}
@media (min-width:860px){ .strip__inner{grid-template-columns:repeat(4,1fr)} }
.stat{background:var(--panel); border-radius:16px; padding:22px; text-align:center; box-shadow:var(--shadow)}
.stat strong{font-size:clamp(28px,4vw,40px); background:linear-gradient(135deg,#fff,#cfcfcf); -webkit-background-clip:text; background-clip:text; color:transparent; display:block}
.stat span{color:var(--muted)}

/* =======================
   СЛАЙДЕР УСЛУГ (карточки)
   ======================= */
.slider{position:relative; display:grid; grid-auto-flow:column; gap:18px; overflow:hidden; margin-top:26px}
.slider .card{min-width:clamp(260px,46vw,320px); background:var(--panel); border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.card__media img{width:100%; height:200px; object-fit:cover}
.card__body{padding:16px}
.slider__btn{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.08); backdrop-filter:blur(4px); cursor:pointer}
.slider__btn--prev{left:-6px}.slider__btn--next{right:-6px}
.slider__dots{display:flex; gap:8px; justify-content:center; margin-top:12px}
.slider__dots i{width:8px; height:8px; border-radius:50%; background:#555; opacity:.6}
.slider__dots i[aria-current="true"]{background:var(--brand)}

/* =======================
   CTA / ФОРМА
   ======================= */
.cta{background:
  radial-gradient(900px 600px at 10% -10%, rgba(203,110,23,.2), transparent 60%),
  radial-gradient(900px 600px at 110% 110%, rgba(203,110,23,.2), transparent 60%)}
.form{display:grid; gap:16px; background:var(--panel); border-radius:20px; padding:20px; box-shadow:var(--shadow)}
.field{display:grid; gap:6px}
.field input,.field textarea{ width:100%; padding:14px; border-radius:12px; border:1px solid #2a2a2b; background:#0b0b0c; color:var(--text) }
.field input:focus,.field textarea:focus{outline:none; border-color:var(--brand)}
.error{display:none; color:#ffb4b4; font-size:.85rem}
.form__note{margin:8px 0 0; color:var(--muted)}

/* =======================
   ФУТЕР
   ======================= */
.site-footer{padding:26px 0; background:#0b0b0c; border-top:1px solid #1a1a1b}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:#fff}

/* =======================
   АНИМАЦИИ / REVEAL
   ======================= */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease, filter .7s ease; transition-delay:var(--delay,0s) }
[data-reveal].is-visible{ opacity:1; transform:none; filter:none }
[data-reveal][data-reveal-type="fade"]{ transform:none }
[data-reveal][data-reveal-type="blur"]{ filter:blur(8px) }
[data-reveal].is-visible[data-reveal-type="blur"]{ filter:blur(0) }
[data-reveal][data-reveal-type="scale"]{ transform:scale(.96) }
[data-reveal][data-reveal-type="up"]{ transform:translateY(26px) }

/* Посимвольная анимация */
.ch{
  display:inline-block; opacity:0; transform:translateY(18px) scale(.98);
  animation:chUp .65s cubic-bezier(.2,.65,.2,1) both;
  animation-delay:calc(var(--i,0)*45ms + var(--base-delay,0ms));
  will-change:transform,opacity;
}
@keyframes chUp{ to{ opacity:1; transform:translateY(0) scale(1) } }

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .nav__menu a::after, .btn::after{ transition:none }
}
/* ===== HERO entrance timeline ===== */
@keyframes tagIn{ from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none} }
@keyframes titleKick{ 0%{opacity:0; transform:translateY(18px)} 60%{opacity:1; transform:translateY(-4px)} 100%{transform:none} }
@keyframes glassIn{ from{opacity:0; filter:blur(8px); transform:translateY(12px)} to{opacity:1; filter:blur(0); transform:none} }
@keyframes btnPop{ 0%{opacity:0; transform:translateY(14px) scale(.96)} 70%{opacity:1; transform:translateY(-2px) scale(1.02)} 100%{transform:none} }
@keyframes timelineUp{ from{opacity:0; transform:translate(-50%, 12px)} to{opacity:.85; transform:translate(-50%,0)} }
@keyframes floatSoft{ from{ transform:translateY(0) } to{ transform:translateY(-6px) } }

/* запускаем, когда JS добавит .is-anim */
[data-animate-hero].is-anim .hero__tag{
  animation: tagIn .9s cubic-bezier(.2,.8,.2,1) .05s both;
}
[data-animate-hero].is-anim .hero__title{
  /* базовый удар заголовка (дополняет посимвольные .ch) */
  animation: titleKick .1s cubic-bezier(.2,.8,.2,1) .15s both;
  /* лёгкое «плавание» после входа */
  animation: titleKick .6s cubic-bezier(.2,.8,.2,1) .15s both,
             floatSoft 6s ease-in-out 1.2s infinite alternate;
}
[data-animate-hero].is-anim .hero__subtitle{
  animation: glassIn .6s ease .28s both;
}
[data-animate-hero].is-anim .hero__cta .btn{
  animation: btnPop .55s cubic-bezier(.2,.8,.2,1) both;
}
[data-animate-hero].is-anim .hero__cta .btn:nth-child(1){ animation-delay:.36s }
[data-animate-hero].is-anim .hero__cta .btn:nth-child(2){ animation-delay:.46s }

[data-animate-hero].is-anim .hero__timeline{
  animation: timelineUp .6s ease .55s both;
}

/* ===== Shine на заголовке (аккуратный отблеск) ===== */
.hero__title{
  position:relative;
  --shine: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.6) 18%, transparent 36%);
  -webkit-mask-image: none; /* для совместимости */
}
.hero__title::before{
  content:""; position:absolute; inset:0;
  background: var(--shine);
  transform: translateX(-120%);
  mix-blend-mode: overlay; pointer-events:none;
  opacity:.65; filter: blur(1px);
}
[data-animate-hero].is-anim .hero__title::before{
  animation: titleShine 1.2s ease .25s 1 both;
}
@keyframes titleShine{
  0%{ transform:translateX(-120%) }
  100%{ transform:translateX(120%) }
}

/* уважение к настройкам пользователя */
@media (prefers-reduced-motion: reduce){
  [data-animate-hero].is-anim .hero__tag,
  [data-animate-hero].is-anim .hero__title,
  [data-animate-hero].is-anim .hero__subtitle,
  [data-animate-hero].is-anim .hero__cta .btn,
  [data-animate-hero].is-anim .hero__timeline{ animation:none !important; opacity:1; transform:none; }
  .hero__title::before{ display:none }
}
/* ===== Capsule Header ===== */
.site-header--caps{
  position:fixed; top:14px; left:0; right:0; z-index:60;
  background:transparent; box-shadow:none;
}
.site-header--caps .header-wrap{
  position:relative; display:flex; align-items:center; justify-content:center;
}
.capsule{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:22px; padding:12px 18px;
  border-radius:24px;
  background: rgba(40, 34, 34, 0.38);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 8px 30px rgba(0,0,0,.35) inset 0 0 0 1px rgba(255,255,255,.06);
}
.logo-badge{
  width:64px; height:64px; border-radius:18px; overflow:hidden; display:grid; place-items:center;
  background: rgba(203,110,23,.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.logo-badge img{ width:70%; height:auto; }

.caps-nav{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 24px}
.caps-nav__col{display:flex; gap:24px; list-style:none; margin:0; padding:0}
.caps-nav__col a{
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.04em; opacity:.95;
  position:relative; padding-bottom:6px;
}
.caps-nav__col a::after{
  content:""; position:absolute; left:50%; bottom:0; width:60%; height:2px;
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--brand),var(--brand-2),transparent);
  border-radius:999px; box-shadow:0 0 10px rgba(203,110,23,.4); opacity:0;
  transition:transform .28s ease, opacity .28s ease;
}
.caps-nav__col a:hover::after, .caps-nav__col a:focus-visible::after{opacity:1; transform:translateX(-50%) scaleX(1)}

.caps-contacts{display:grid; gap:6px; text-align:right}
.caps-contacts__row{color:#fff; text-decoration:none; font-weight:700; letter-spacing:.03em; opacity:.9}
.caps-contacts__row:hover{opacity:1}

.caps-cta{
  position:absolute; right:0; top:0;
  transform: translate(100%, -10%);
  display:grid; place-items:center; text-align:center;
  width:68px; height:68px; border-radius:18px;
  background:rgba(203,110,23,.85);
  color:#111; font-weight:900; letter-spacing:.06em; text-decoration:none;
  line-height:1.05; box-shadow:0 8px 24px rgba(203,110,23,.35);
}

/* адаптив */
@media (max-width: 1024px){
  .caps-nav{ grid-template-columns:1fr; }
  .capsule{ grid-template-columns:auto 1fr; }
  .caps-contacts{ display:none; }
  .caps-cta{ transform:none; position:static; margin-left:12px; }
  .site-header--caps .header-wrap{ justify-content:space-between; }
}

/* ===== Hero frame + dock ===== */
.hero--dock{
  padding-top:112px;            /* отступ под фикс-хедер */
  --hero-radius: 56px;          /* радиус нижних углов (подгони по вкусу) */
}
.hero-frame{
  width:min(1400px, 94vw);
  margin-inline:auto;
  position:relative;
  overflow:hidden;

  /* только низ скруглён */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: var(--hero-radius);
  border-bottom-right-radius: var(--hero-radius);

  box-shadow: 0 25px 60px rgba(0,0,0,.45);
}
/* перекрываем базовые стили слайдера */
.hero--dock .hero-slider{ position:relative; inset:auto; z-index:0; background:#000; }
.hero--dock .hero-slide{ position:absolute; inset:0; }
.hero--dock .hero-slide img{ object-position:center; }

/* док-панель */
.hero-dock{
  position:absolute; left:20px; right:20px; bottom:20px; z-index:2;
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px;
  padding:14px 16px;
  border-top-left-radius:22px;
  border-top-right-radius:22px;
  border-bottom-left-radius:22px;
  border-bottom-right-radius: calc(var(--hero-radius) - 8px); /* аккуратный стык */
  background: rgba(20,20,22,.55);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
}
.hero--dock .hero-slider::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.0) 60%, rgba(0,0,0,.25)),
    radial-gradient(120% 160% at 50% 100%, rgba(0,0,0,.35), transparent 60%);
  mix-blend-mode:multiply;
}
.hero-caption{
  color:#fff; font-weight:800; letter-spacing:.04em;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:16px; padding:10px 14px; display:inline-block;
}
.hero-thumbs{
  display:flex; gap:10px; list-style:none; margin:0; padding:0;
}
.hero-thumbs li{
  width:66px; height:44px; border-radius:10px; overflow:hidden; cursor:pointer;
  opacity:.7; outline:1px solid rgba(255,255,255,.15); transition:opacity .2s ease, transform .2s ease;
}
.hero-thumbs li.is-active{ opacity:1; transform:translateY(-2px); outline-color: var(--brand) }
.hero-thumbs img{ width:100%; height:100%; object-fit:cover; display:block }

.hero-arrows{ display:flex; gap:10px }
.dock-btn{
  width:56px; height:56px; border-radius:14px; border:0; cursor:pointer;
  background: rgba(255,255,255,.08); color:#fff; font-weight:900; font-size:20px;
  backdrop-filter: blur(6px); transition:transform .15s ease, background .2s ease;
}
.dock-btn:hover{ background:rgba(255,255,255,.14); transform:translateY(-1px) }

@media (max-width: 760px){
  .hero-dock{ grid-template-columns: 1fr auto; row-gap:12px }
  .hero-thumbs{ order:3; grid-column: 1 / -1; justify-content:center }
}

/* чуть успокоим фейд/зум */
.hero-slide{ transition: opacity .8s ease, transform 10s ease; }
.hero-slide.is-active img{ animation: kb 22s ease-in-out both; }

/* --- FIX: размеры рамки и слайдов --- */
.hero-frame{
  height: clamp(420px, 72vh, 860px);        /* задаём реальную высоту */
}

.hero--dock .hero-slider{
  position: relative;
  height: 100%;
}

.hero--dock .hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;                               /* по умолчанию скрыт */
  transform: scale(1.02);                   /* лёгкий зум для фейда */
  transition: opacity .8s ease, transform 10s ease;
}

.hero--dock .hero-slide.is-active{
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.hero--dock .hero-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- FIX: анимация Ken Burns (если её нет) --- */
@keyframes kb {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.hero--dock .hero-slide.is-active img{
  animation: kb 22s ease-in-out both;
}
/* === HERO FRAME: full width + big radius + viewport height === */
.hero--dock{ padding-top:112px; } /* место под фикс-хедер */

.hero-frame{
  /* почти на всю ширину, оставим 32px поля по краям */
  width: calc(100vw - 48px);
  max-width: 1900px;
  margin-inline: auto;

  /* высота под экран */
  height: clamp(480px, 78vh, 920px);

  position: relative;
  border-radius: 36px;            /* БОЛЬШОЕ скругление */
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.45);
}

/* сам слайдер должен занять всю рамку */
.hero--dock .hero-slider{
  position: relative;
  inset: 0;
  height: 100%;
  background:#000;
}

/* слайды — стопкой друг на друге */
.hero--dock .hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .8s ease, transform 10s ease;
}
.hero--dock .hero-slide.is-active{
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.hero--dock .hero-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Ken Burns (если выше не определён) */
@keyframes kb { from{transform:scale(1)} to{transform:scale(1.06)} }
.hero--dock .hero-slide.is-active img{ animation: kb 22s ease-in-out both; }

/* === DOCK PANEL: ширина и скругления под рамку === */
.hero-dock{
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;

  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;

  padding: 14px 16px;
  border-radius: 22px;                          /* скругление как у дока на рефе */
  background: rgba(20,20,22,.55);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* мини-адаптация */
@media (max-width: 900px){
  .hero-frame{
    width: calc(100vw - 24px);
    height: clamp(420px, 64vh, 760px);
    border-radius: 28px;
  }
  .hero-dock{
    left: 14px; right: 14px; bottom: 14px;
    border-radius: 18px;
    grid-template-columns: 1fr auto;
    row-gap: 12px;
  }
}
/* === Компактный док как во 2-м скрине === */
.hero-frame{
  border-radius: 44px;             /* чуть больше скругление рамки */
}

/* док: фиксируем ширину и прижимаем к левому краю */
.hero-dock{
  left: 24px;
  right: auto;                      /* не растягиваемся на всю ширину */
  max-width: min(920px, calc(100% - 48px));
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 20px;
  background: rgba(20,20,22,.55);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
}

/* подпись — компактная «таблетка» слева */
.hero-caption{
  font-weight: 800;
  letter-spacing: .04em;
  color:#fff;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* превью — маленькие, с лёгким обводом */
.hero-thumbs{ display: flex; gap: 10px; }
.hero-thumbs li{
  width: 64px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  opacity:.8;
  outline:1px solid rgba(255,255,255,.15);
  transition: opacity .2s ease, transform .2s ease, outline-color .2s ease;
}
.hero-thumbs li.is-active{
  opacity:1;
  transform: translateY(-2px);
  outline-color: var(--brand);
}
.hero-thumbs img{ width:100%; height:100%; object-fit:cover; }

/* кнопки-капсулы справа */
.hero-arrows{ display:flex; gap:10px; }
.dock-btn{
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 0;
  cursor: pointer;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .2s ease;
}
.dock-btn:hover{ background: rgba(255,255,255,.14); transform: translateY(-1px); }

/* адаптив — док ещё компактнее и не уходит за край */
@media (max-width: 760px){
  .hero-frame{ border-radius: 32px; }
  .hero-dock{
    left: 14px;
    bottom: 14px;
    max-width: calc(100% - 28px);
    grid-template-columns: 1fr auto; /* превью вниз */
    row-gap: 10px;
  }
  .hero-thumbs{ order: 3; grid-column: 1 / -1; justify-content: center; }
  .dock-btn{ width: 56px; height: 56px; border-radius: 14px; font-size: 18px; }
}
/* ===== HEADER: layout как у примера ===== */

/* сам хедер фиксируем и растягиваем, отступ сверху/сбоку – как на макете */
.site-header--caps{
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  box-shadow: none;
}

/* контейнер шапки: капсула у левого края, CTA у правого */
.site-header--caps .header-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;   /* ← главное изменение */
  gap: 16px;
  width: min(1400px, 96vw);
  margin-inline: auto;
}

/* капсула слева — в одну строку: логотип, меню (2 колонки), контакты */
.capsule{
  margin-left: 8px;                 /* чуть отступаем от края */
  display: flex;                    /* ← вместо grid привязываем в ряд */
  align-items: center;
  gap: 22px;
  padding: 12px 18px;
  border-radius: 22px;
  background: rgba(40, 0, 0, .38);  /* можно ослабить/усилить под фон */
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* бейдж логотипа слева */
.logo-badge{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(203,110,23,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* двухрядное меню по центру капсулы */
.caps-nav{
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px 28px;                    /* расстояние между пунктами */
}
.caps-nav__col{
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.caps-nav__col a{
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.04em;
  position:relative; padding-bottom:6px;
}
.caps-nav__col a::after{
  content:""; position:absolute; left:50%; bottom:0; width:60%; height:2px;
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--brand),var(--brand-2),transparent);
  opacity:0; transition:transform .28s ease, opacity .28s ease;
}
.caps-nav__col a:hover::after,
.caps-nav__col a:focus-visible::after{ opacity:1; transform:translateX(-50%) scaleX(1); }

/* контакты в правой части капсулы + вертикальный разделитель */
.caps-contacts{
  display: grid;
  gap: 6px;
  padding-left: 24px;
  margin-left: 8px;
  border-left: 1px solid rgba(255,255,255,.08);
}
.caps-contacts__row{
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.03em; opacity:.92;
}
.caps-contacts__row:hover{ opacity:1; }

/* круглая кнопка справа, отдельно от капсулы */
.caps-cta{
  position: fixed;                 /* чтобы висела у правого края как в рефе */
  right: 24px;
  top: 16px;
  width: 68px; height: 68px;
  border-radius: 18px;
  display: grid; place-items: center;
  text-align: center; line-height: 1.05;
  font-weight: 900; letter-spacing:.06em; text-decoration:none;
  background: rgba(203,110,23,.9);
  color:#111;
  box-shadow: 0 8px 24px rgba(203,110,23,.35);
}

/* адаптив — на планшете собираем компактнее */
@media (max-width: 1024px){
  .capsule{ gap: 16px; padding: 10px 14px; }
  .logo-badge{ width: 52px; height: 52px; border-radius: 14px; }
  .caps-nav{ grid-template-columns: 1fr; gap: 6px 18px; }
  .caps-contacts{ display:none; }    /* как в референсе — прячем контакты */
  .caps-cta{ right: 12px; top: 12px; width: 60px; height: 60px; }
}

/* мобилка — капсула тянется на ширину, кнопка рядом */
@media (max-width: 640px){
  .site-header--caps .header-wrap{ width: 94vw; }
  .capsule{ margin-left: 0; flex: 1; }
}
/* === HEADER: три колонки (меню слева, слоган центр, лого справа) === */
.site-header--caps { position: fixed; top: 14px; left: 0; right: 0; z-index: 60; background: transparent; box-shadow: none; }
.site-header--caps .header-wrap { display: flex; justify-content: center; }

.capsule.caps--three{
  width: min(1300px, 96vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto; /* лево / центр / право */
  align-items: center;
  gap: 22px;
  padding: 14px 18px;
  border-radius: 22px;
  background: rgba(20, 10, 8, .6);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* — левый столбец: 2 строки меню — */
.caps-left{ display: grid; gap: 8px; }
.caps-left__row{ display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.caps-left__row a{
  color:#fff; text-decoration: none; font-weight: 800; letter-spacing: .04em; opacity: .95;
  position: relative; padding-bottom: 6px;
}
.caps-left__row a::after{
  content:""; position:absolute; left:50%; bottom:0; width:60%; height:2px;
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--brand),var(--brand-2),transparent);
  border-radius: 999px; box-shadow: 0 0 10px rgba(203,110,23,.45); opacity:0;
  transition: transform .28s ease, opacity .28s ease;
}
.caps-left__row a:hover::after,
.caps-left__row a:focus-visible::after{ transform:translateX(-50%) scaleX(1); opacity:1; }

/* — центр: слоган — */
.caps-slogan{
  text-align: center;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
  line-height: 1.15;
  font-size: clamp(14px, 1.4vw, 18px);
  opacity: .95;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}

/* — право: лого — */
.logo-badge{ width: 64px; height: 64px; border-radius: 18px; display:grid; place-items:center;
  background: rgba(203,110,23,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.logo-badge img{ width:70%; height:auto; }
.logo-badge--right{ justify-self: end; }

/* — адаптив — */
@media (max-width: 1200px){
  .capsule.caps--three{ grid-template-columns: auto 1fr auto; gap: 16px; }
  .caps-left__row{ gap: 18px; }
}
@media (max-width: 920px){
  .capsule.caps--three{
    grid-template-columns: 1fr auto; /* меню + лого */
    grid-template-rows: auto auto;   /* слоган на вторую строку */
    row-gap: 10px;
  }
  .caps-left{ grid-column: 1 / 2; grid-row: 1 / 2; }
  .caps-slogan{ grid-column: 1 / 3; grid-row: 2 / 3; font-size: clamp(13px, 3.4vw, 16px); }
  .logo-badge--right{ grid-column: 2 / 3; grid-row: 1 / 2; }
}
@media (max-width: 600px){
  .caps-left__row{ flex-wrap: wrap; gap: 14px; }
  .caps-slogan{ background: transparent; border: 0; padding: 0; }
}

/* === Капсула: три области (контакты слева, слоган центр, лого справа) === */
.capsule.caps--three{
  width:min(1300px,96vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:14px 18px;
  border-radius:22px;
  background:rgba(20,10,8,.6);
  backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* — ЛЕВО: две кнопки, прижаты к левому краю — */
.caps-contacts-left{display:flex; gap:10px; justify-self:start}
.contact-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:14px;
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.03em;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);
  transition:transform .15s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  white-space:nowrap;
}
.contact-btn svg{ width:18px; height:18px; fill:#fff; opacity:.9 }
.contact-btn:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22); transform:translateY(-1px) }
.contact-btn--tel{ border-color:rgba(203,110,23,.35) }
.contact-btn--mail{ border-color:rgba(245,164,93,.35) }

/* — ЦЕНТР: динамичный слоган — */
.caps-slogan{
  text-align:center; justify-self:center;
  padding:8px 12px; border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff; font-weight:900; letter-spacing:.04em;
  line-height:1.15; min-width:min(420px, 60vw);
}
.caps-slogan__text{
  display:inline-block;
  opacity:1; transform:translateY(0);
  transition:opacity .45s ease, transform .45s ease;
  will-change:opacity, transform;
}
.caps-slogan__text.is-out{ opacity:0; transform:translateY(8px) }
.caps-slogan__text.is-in{ opacity:1; transform:translateY(0) }

/* — ПРАВО: лого прижато к правому краю — */
.logo-badge--right{ justify-self:end }

/* Адаптив */
@media (max-width:1024px){
  .capsule.caps--three{ grid-template-columns:1fr auto; grid-template-rows:auto auto; row-gap:10px }
  .caps-contacts-left{ grid-column:1/2; grid-row:1/2; flex-wrap:wrap }
  .caps-slogan{ grid-column:1/3; grid-row:2/3; min-width:unset }
  .logo-badge--right{ grid-column:2/3; grid-row:1/2 }
}
@media (max-width:640px){
  .contact-btn{ padding:8px 10px; font-weight:800; font-size:14px }
  .contact-btn svg{ width:16px; height:16px }
  .caps-slogan{ font-size:14px; padding:6px 10px; background:transparent; border:0 }
}

/* уважение к reduced-motion */
@media (prefers-reduced-motion:reduce){
  .caps-slogan__text{ transition:none }
}
/* ===== КАПСУЛА: упрощённый, ровный layout ===== */
.capsule.caps--three{
  width:min(1300px, 96vw);
  margin:0 auto;
  display:grid;
  /* центр действительно по центру, края прижаты */
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:14px;
  padding:10px 12px;          /* меньше «воздуха» */
  border-radius:18px;
  background:rgba(20,10,8,.55);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* левая группа прижата к левому краю капсулы */
.caps-contacts-left{
  justify-self:start;
  display:flex; gap:8px; flex-wrap:wrap;
}

/* компактные кнопки контактов */
.contact-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:12px;
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.03em;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(4px);
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.contact-btn svg{ width:16px; height:16px; fill:#fff; opacity:.9 }
.contact-btn:hover{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.20); transform:translateY(-1px) }

/* центр — строгая ширина, чтобы ничего не толкать */
.caps-slogan{
  justify-self:center; text-align:center;
  max-width:min(820px, 68vw);
  padding:8px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff; font-weight:900; letter-spacing:.04em; line-height:1.15;
}

/* правый край — лого-бейдж прижат к правому */
.logo-badge--right{ justify-self:end }
.logo-badge--right img{ display:block; width:auto; height:48px; } /* чтоб не было «пустой коробки» */

/* чуть меньше на планшете/мобилке */
@media (max-width: 1024px){
  .capsule.caps--three{ grid-template-columns: 1fr auto; grid-template-rows:auto auto; row-gap:10px }
  .caps-contacts-left{ grid-column:1/2; grid-row:1/2 }
  .caps-slogan{ grid-column:1/3; grid-row:2/3; max-width:unset }
  .logo-badge--right{ grid-column:2/3; grid-row:1/2 }
}
@media (max-width: 640px){
  .contact-btn{ padding:7px 9px; font-size:14px }
  .contact-btn svg{ width:15px; height:15px }
  .caps-slogan{ font-size:14px; padding:6px 10px; background:transparent; border:0 }
}
/* ====== FIX: контейнер шапки, чтобы не разъезжалось ====== */
.site-header--caps{ position:fixed; top:14px; left:0; right:0; z-index:100; background:transparent; box-shadow:none }
.site-header--caps .header-wrap{
  display:flex; justify-content:center; align-items:center; /* центрируем «капсулу» */
  padding:0; /* убираем старые отступы */
}

/* ====== КАПСУЛА (3 зоны: слева контакты, центр слоган, справа логотип) ====== */
.capsule.caps--three{
  width:min(1300px,96vw);
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* левый — растягивается, центр — авто, правый — растягивается */
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border-radius:18px;
  background:rgba(20,10,8,.55);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow:0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* ====== ЛЕВЫЙ БЛОК: контактные кнопки, прижаты влево ====== */
.caps-contacts-left{
  justify-self:start;
  display:flex; gap:8px; flex-wrap:wrap;
  min-width:0; /* чтобы не давили центр */
}

.contact-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:12px;
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.03em;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(4px);
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
}
.contact-btn:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); transform:translateY(-1px) }
.contact-btn svg{ width:16px; height:16px; fill:#fff; opacity:.9 }

/* ====== ЦЕНТР: слоган, строго по центру, чтобы ничего не толкал ====== */
.caps-slogan{
  justify-self:center; text-align:center;
  max-width:min(820px, 68vw);
  padding:8px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff; font-weight:900; letter-spacing:.04em; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; /* чтобы не ломало капсулу */
}

/* ====== ПРАВЫЙ: логотип, прижат вправо ====== */
.logo-badge--right{ justify-self:end; display:grid; place-items:center; width:58px; height:58px; border-radius:16px; background:rgba(203,110,23,.18) }
.logo-badge--right img{ display:block; height:38px; width:auto }

/* ====== Отступ под фикс-хедер, чтобы слайдер не прятался ====== */
.hero.hero--dock{ padding-top:110px }

/* ====== Адаптив ====== */
@media (max-width:1024px){
  .capsule.caps--three{
    grid-template-columns: 1fr auto; grid-template-rows:auto auto; row-gap:10px;
  }
  .caps-contacts-left{ grid-column:1/2; grid-row:1/2 }
  .logo-badge--right{ grid-column:2/3; grid-row:1/2 }
  .caps-slogan{ grid-column:1/3; grid-row:2/3; max-width:100%; white-space:normal }
}
@media (max-width:640px){
  .contact-btn{ padding:7px 9px; font-size:14px }
  .contact-btn svg{ width:15px; height:15px }
  .caps-slogan{ font-size:14px; padding:6px 10px; background:transparent; border:0 }
}
/* Левый столбец в капсуле: меню + компактные контакты */
.capsule.caps--three{ grid-template-columns: 1fr auto 1fr } /* уже есть, но пусть будет */
.caps-left{
  justify-self:start;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}

/* Две строки меню */
.caps-nav{ display:flex; flex-direction:column; gap:6px }
.caps-nav__row{
  display:flex; gap:18px; align-items:center;
  list-style:none; margin:0; padding:0;
}
.caps-nav__row a{
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.04em;
  padding:6px 10px; border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  transition: background .2s ease, transform .15s ease;
  white-space:nowrap;
}
.caps-nav__row a:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px) }

/* Мини-контакты под меню (не кричащие) */
.caps-mini-contacts{ display:flex; gap:10px; flex-wrap:wrap }
.contact-mini{
  display:inline-flex; align-items:center; gap:8px;
  color:#ddd; text-decoration:none; font-weight:700; letter-spacing:.02em;
  padding:6px 8px; border-radius:10px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.contact-mini:hover{ color:#fff; background:rgba(255,255,255,.10) }
.contact-mini svg{ width:14px; height:14px; fill:currentColor; opacity:.9 }

/* Центр — слоган жёстко по центру; правый — лого прижат вправо */
.caps-slogan{ justify-self:center }
.logo-badge--right{ justify-self:end }

/* Адаптив: переносим слоган на вторую строку и делаем меню более компактным */
@media (max-width: 1060px){
  .capsule.caps--three{
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap:10px;
  }
  .caps-left{ grid-column:1/2; grid-row:1/2 }
  .logo-badge--right{ grid-column:2/3; grid-row:1/2 }
  .caps-slogan{ grid-column:1/3; grid-row:2/3; max-width:100%; white-space:normal }
}
@media (max-width: 640px){
  .caps-nav__row{ gap:12px; flex-wrap:wrap }
  .caps-nav__row a{ padding:5px 8px; font-size:14px }
  .contact-mini{ font-size:13px }
}
/* === RCC header layout (как на картинке) === */
.rcc-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* капсула из 3 колонок: логотип – меню – контакты */
.rcc-capsule{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap:24px;
  padding:12px 18px;
  border-radius:22px;
  background:rgba(20,20,22,.65);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* логотип слева — тот же бейдж, но фиксированный размер */
.rcc-logo{
  width:64px; height:64px; border-radius:16px; overflow:hidden;
  display:grid; place-items:center;
  background: rgba(203,110,23,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.rcc-logo img{ width:70%; height:auto }

/* меню по центру — две строки */
.rcc-menu{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.rcc-row{
  display:flex; gap:24px; align-items:center;
  list-style:none; margin:0; padding:0;
}
.rcc-row a{
  color: #ffffff; text-decoration:none; font-weight:800; letter-spacing:.04em;
  opacity:.95; white-space:nowrap;
  position:relative; padding-bottom:6px;
}
.rcc-row a::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:60%; height:2px; border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--brand),var(--brand-2),transparent);
  transform:translateX(-50%) scaleX(0); opacity:0;
  transition:transform .25s ease,opacity .25s ease;
}
.rcc-row a:hover::after{ transform:translateX(-50%) scaleX(1); opacity:1 }

/* контакты справа внутри капсулы */
.rcc-contacts{
  display:flex; flex-direction:column; gap:6px; text-align:right;
}
.rcc-link{
  color:#fff; text-decoration:none; font-weight:700; letter-spacing:.03em;
  opacity:.9;
}
.rcc-link:hover{ opacity:1 }

/* кнопка CLUB CARD справа вне капсулы (как раньше) */
.rcc-cta{ margin-left:8px }

/* адаптив */
@media (max-width:1100px){
  .rcc-row{ gap:16px }
}
@media (max-width:900px){
  .rcc-capsule{
    grid-template-columns: auto 1fr; grid-template-rows: auto auto;
    row-gap:10px;
  }
  .rcc-logo{ grid-column:1/2; grid-row:1/3 }
  .rcc-menu{ grid-column:2/3; grid-row:1/2 }
  .rcc-contacts{ grid-column:2/3; grid-row:2/3; text-align:left }
}
@media (max-width:620px){
  .rcc-row{ flex-wrap:wrap; gap:12px }
  .rcc-row a{ font-size:14px }
  .rcc-link{ font-size:13px }
  .rcc-logo{ width:56px; height:56px }
}
/* ===== RCC header overrides ===== */
.rcc-header {
  /* фон страницы под шапкой можешь оставить свой */
  padding-top: 12px;
  padding-bottom: 12px;
  position: relative;
  z-index: 20;
}

/* контейнер всего хедера: капсула + кнопка справа */
.rcc-header .header-wrap {
  display: flex;
  align-items: center;
  justify-content: center;   /* капсулу держим по центру */
  gap: 16px;
}

/* сама «капсула» */
.rcc-header .rcc-capsule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 1180px;                 /* не растягиваемся больше этого */
  min-height: 72px;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(22, 22, 22, 0.75); /* полупрозрачная «плашка» как на примере */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* логотип слева */
.rcc-header .rcc-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  flex: 0 0 auto;
}
.rcc-header .rcc-logo img { width: 100%; height: 100%; object-fit: cover; }

/* меню по центру — две строки */
.rcc-header .rcc-menu {
  display: grid;
  grid-auto-rows: min-content;
  gap: 6px;                          /* расстояние между строками меню */
  text-align: center;
  flex: 1 1 auto;                    /* центр занимает остаток */
}
.rcc-header .rcc-menu .rcc-row {
  display: inline-flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rcc-header .rcc-menu a {
  color: #f1eeee;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  transition: opacity .2s ease;
  white-space: nowrap;
}
.rcc-header .rcc-menu a:hover { opacity: .8; }

/* контакты справа внутри капсулы */
.rcc-header .rcc-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}
.rcc-header .rcc-contacts .rcc-link {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.1;
  transition: opacity .2s ease;
}
.rcc-header .rcc-contacts .rcc-link:hover { opacity: .8; }

/* кнопка справа вне капсулы */
.rcc-header .rcc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 12px;
  line-height: 1.05;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: rgba(22, 22, 22, 0.75);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  height: 56px;
  min-width: 56px;
  flex: 0 0 auto;
  transition: transform .15s ease, opacity .2s ease;
}
.rcc-header .rcc-cta:hover { transform: translateY(-1px); opacity: .92; }

/* чтобы ссылки/текст всегда были читаемыми на любых фонах */
.rcc-header .rcc-capsule,
.rcc-header .rcc-cta { color: #fff; }

/* ===== адаптив ===== */
@media (max-width: 1200px) {
  .rcc-header .rcc-capsule { max-width: 1000px; }
}
@media (max-width: 992px) {
  .rcc-header .rcc-capsule {
    gap: 16px;
    padding: 10px 14px;
    min-height: 64px;
  }
  .rcc-header .rcc-menu .rcc-row { gap: 16px; }
  .rcc-header .rcc-contacts .rcc-link:nth-child(2) { /* прячем почту, если тесно */
    display: none;
  }
}
@media (max-width: 768px) {
  .rcc-header .header-wrap { gap: 12px; }
  .rcc-header .rcc-capsule {
    flex-wrap: wrap;
    justify-content: center;     /* меню выходит в центр, логотип/контакты по краям */
    row-gap: 10px;
  }
  .rcc-header .rcc-logo { order: 1; }
  .rcc-header .rcc-menu { order: 2; width: 100%; }
  .rcc-header .rcc-contacts { order: 3; width: 100%; align-items: center; }
  .rcc-header .rcc-cta { height: 48px; padding: 8px 10px; }
}
/* 1) Капсулу влево, кнопку вправо */
.rcc-header .header-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between; /* левый и правый края */
  gap:16px;
}
.rcc-header .rcc-capsule{
  flex:1 1 auto;      /* занимает всю доступную ширину слева */
  max-width:none;     /* больше не ограничиваем */
  margin-right:0;
}
.rcc-header .rcc-cta{
  margin-left:54px;   /* небольшой отступ от капсулы */
  flex:0 0 auto;
}

/* 2) Меню — две колонки (под Услуги — Личный кабинет, под Контакты — О компании) */
.rcc-header .rcc-menu{
  display:grid;
  grid-template-columns:auto auto;   /* 2 колонки */
  grid-template-rows:auto auto;      /* 2 строки */
  align-items:center;
  justify-items:start;
  column-gap:32px;
  row-gap:6px;
}

/* убираем встроенный флекс и отступы внутри списков, чтобы grid работал чисто */
.rcc-header .rcc-menu .rcc-row{
  display:contents;  /* li попадают непосредственно в grid */
  margin:0; padding:0; list-style:none;
}

/* Раскладываем конкретные элементы по сетке */
.rcc-header .rcc-menu .rcc-row:first-child li:first-child{  /* Услуги */
  grid-column:1; grid-row:1;
}
.rcc-header .rcc-menu .rcc-row:last-child li:first-child{   /* Личный кабинет */
  grid-column:1; grid-row:2;
}
.rcc-header .rcc-menu .rcc-row:first-child li:last-child{   /* О компании */
  grid-column:2; grid-row:2;
}

/* 3) Заголовок "КОНТАКТЫ" над правым блоком контактов */
.rcc-header .rcc-contacts{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}
.rcc-header .rcc-contacts::before{
  content:"КОНТАКТЫ";
  font-weight:800;
  letter-spacing:.02em;
  color:#fff;
  margin-bottom:2px;
  line-height:1;
  opacity:.95;
}

/* на узких экранах — слегка упрощаем */
@media (max-width: 992px){
  .rcc-header .rcc-menu{
    column-gap:20px;
  }
  .rcc-header .rcc-contacts::before{ font-size:0.95rem; }
}
@media (max-width: 768px){
  .rcc-header .header-wrap{ gap:12px; }
  .rcc-header .rcc-capsule{ row-gap:8px; }
  .rcc-header .rcc-menu{ grid-template-columns:1fr 1fr; justify-items:center; }
  .rcc-header .rcc-contacts{ align-items:center; }
}
/* ===== 1) Прижать капсулу слева, кнопку вправо ===== */
.rcc-header {
  padding-inline: 24px; /* общий отступ слева/справа у хедера */
}

.rcc-header .header-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between; /* левый и правый края */
  gap:16px;
}

.rcc-header .rcc-capsule{
  flex:1 1 auto;      /* занимает доступное слева */
  max-width:none;     /* без центровки и ограничений ширины */
  margin-left:0 !important;
}

.rcc-header .rcc-cta{
  flex:0 0 auto;
  margin:0;           /* вплотную к правому краю области хедера */
}

/* ===== 2) Убрать лишний "КОНТАКТЫ" в центре и оставить его только над правым блоком ===== */
/* Если ранее добавлялся заголовок через ::before у .rcc-contacts — выключаем */
.rcc-header .rcc-contacts::before{ content:none !important; }

/* Добавим заголовок к первому линку (телефону), чтобы он точно жил в блоке контактов */
.rcc-header .rcc-contacts {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.rcc-header .rcc-contacts .rcc-link:first-child{
  position:relative;
  display:block;
  padding-top:18px; /* место под заголовок */
}

.rcc-header .rcc-contacts .rcc-link:first-child::before{
  content:"КОНТАКТЫ";
  position:absolute;
  top:0; right:0;
  font-weight:800;
  line-height:1;
  color:#fff;
}

/* ===== 3) Меню — две колонки (услуги/личный кабинет, контакты/о компании) ===== */
.rcc-header .rcc-menu{
  display:grid;
  grid-template-columns:auto auto;
  grid-auto-rows:auto;
  align-items:center;
  justify-items:start;
  column-gap:32px;
  row-gap:6px;
}

.rcc-header .rcc-menu .rcc-row{ display:contents; margin:0; padding:0; list-style:none; }

/* Услуги (col1,row1) и Личный кабинет (col1,row2) */
.rcc-header .rcc-menu .rcc-row:first-child li:first-child{ grid-column:1; grid-row:1; }
.rcc-header .rcc-menu .rcc-row:last-child  li:first-child{ grid-column:1; grid-row:2; }

/* О компании (col2,row2) */
.rcc-header .rcc-menu .rcc-row:first-child li:last-child{  grid-column:2; grid-row:2; }

/* На всякий случай: запретим любым "заголовкам" появляться в меню */
.rcc-header .rcc-menu::before{ content:none !important; }

/* ===== адаптив ===== */
@media (max-width: 992px){
  .rcc-header { padding-inline:16px; }
  .rcc-header .rcc-menu{ column-gap:20px; }
}
@media (max-width: 768px){
  .rcc-header { padding-inline:12px; }
  .rcc-header .rcc-menu{ grid-template-columns:1fr 1fr; justify-items:center; }
  .rcc-header .rcc-contacts{ align-items:center; }
  .rcc-header .rcc-contacts .rcc-link:first-child::before{ right:50%; transform:translateX(50%); }
}

/* ================= RCC HEADER — ФИНАЛЬНЫЕ ОВЕРРАЙДЫ ================= */

/* контейнер шапки: капсула слева, CTA справа */
.rcc-header .rcc-wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;   /* ← капсула влево, кнопка вправо */
  gap:16px;
}

/* капсула (логотип + меню + контакты) — в один ряд, без центровки */
.rcc-header .rcc-capsule{
  margin-left:0 !important;
  flex:1 1 auto;
  display:flex;
  align-items:center;
  gap:22px;
  padding:12px 18px;
  border-radius:18px;
  background:rgba(20,20,22,.65);
  backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* логотип */
.rcc-header .rcc-logo{
  width:56px; height:56px; border-radius:16px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.rcc-header .rcc-logo img{ width:70%; height:auto; }

/* ------- МЕНЮ: 2 колонки (под Услуги — Личный кабинет; под Контакты — О компании) ------- */
.rcc-header .rcc-menu{
  display:grid;
  grid-template-columns:auto auto;
  grid-auto-rows:auto;
  column-gap:28px;
  row-gap:6px;
  flex:1 1 auto;                /* занимает центр */
  justify-items:start;
}
.rcc-header .rcc-menu .rcc-row{
  display:contents;             /* чтобы li легли прямо в grid */
  margin:0; padding:0; list-style:none;
}
.rcc-header .rcc-menu a{
  color:#fff; text-decoration:none; font-weight:800; letter-spacing:.02em;
  position:relative; padding-bottom:6px;
}
.rcc-header .rcc-menu a::after{
  content:""; position:absolute; left:50%; bottom:0; width:60%; height:2px;
  transform:translateX(-50%) scaleX(0); transform-origin:center;
  background:linear-gradient(90deg,transparent,#cb6e17,#f5a45d,transparent);
  border-radius:999px; opacity:0;
  transition:transform .28s ease, opacity .28s ease;
}
.rcc-header .rcc-menu a:hover::after{ transform:translateX(-50%) scaleX(1); opacity:1; }

/* раскладка пунктов по ячейкам */
.rcc-header .rcc-menu .rcc-row:first-child li:nth-child(1){ grid-column:1; grid-row:1; } /* Услуги */
.rcc-header .rcc-menu .rcc-row:last-child  li:nth-child(1){ grid-column:1; grid-row:2; } /* Личный кабинет */
.rcc-header .rcc-menu .rcc-row:first-child li:nth-child(2){ grid-column:2; grid-row:1; } /* КОНТАКТЫ */
.rcc-header .rcc-menu .rcc-row:first-child li:nth-child(3){ grid-column:2; grid-row:2; } /* О компании */

/* контакты справа внутри капсулы + заголовок "КОНТАКТЫ" только здесь */
.rcc-header .rcc-contacts{
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  padding-left:22px; margin-left:6px;
  border-left:1px solid rgba(255,255,255,.08);
  position:relative;
}
.rcc-header .rcc-contacts::before{
  content:"КОНТАКТЫ";
  position:absolute; top:-18px; right:0;
  font-weight:800; letter-spacing:.02em; color:#fff;
}
.rcc-header .rcc-contacts .rcc-link{
  color:#fff; text-decoration:none; font-weight:700; line-height:1.1;
}

/* кнопка справа вне капсулы — обычный поток, без position: fixed */
.rcc-header .rcc-cta{
  flex:0 0 auto;
  display:grid; place-items:center; text-align:center; line-height:1.05;
  width:68px; height:68px; border-radius:18px;
  background:rgba(203,110,23,.9); color:#111; font-weight:900; letter-spacing:.06em;
  text-decoration:none; box-shadow:0 8px 24px rgba(203,110,23,.35);
}

/* -------- адаптив -------- */
@media (max-width:1024px){
  .rcc-header .rcc-contacts{ display:none; }       /* как в рефе — убираем тесноту */
  .rcc-header .rcc-cta{ width:60px; height:60px; }
  .rcc-header .rcc-menu{ column-gap:20px; }
}
@media (max-width:720px){
  .rcc-header .rcc-capsule{ gap:14px; padding:10px 12px; }
  .rcc-header .rcc-menu{ grid-template-columns:1fr 1fr; justify-items:center; }
}
/* ====== FIXED компактная шапка, прилипшая к краям окна ====== */
:root{
  --rcc-h: 64px;   /* высота капсулы */
  --rcc-pad: 10px; /* внутренние отступы капсулы */
}

/* даём месту контенту, т.к. шапка fixed */
body{ padding-top: calc(var(--rcc-h) + var(--rcc-pad)*2 + 12px); }

/* сама шапка фиксируется сверху и растягивается по ширине окна */
.rcc-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 8px 12px;            /* тонкая «подложка» вокруг капсулы */
  background: transparent;      /* фон страницы не скрываем */
  pointer-events: auto;
}

/* убираем ограничения контейнера внутри шапки */
.rcc-header .rcc-wrap,
.rcc-header .container{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* капсула слева, CTA справа */
  gap: 12px;
  overflow: visible;
}

/* капсула прижата к ЛЕВОМУ краю вьюпорта и компактная */
.rcc-header .rcc-capsule{
  flex: 1 1 auto;
  min-height: var(--rcc-h);
  padding: var(--rcc-pad) 14px;
  margin-left: 0 !important;
  border-radius: 14px;
  background: rgba(20,20,22,.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  gap: 18px;
}

/* компактный логотип */
.rcc-header .rcc-logo{
  width: 48px; height: 48px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
}
.rcc-header .rcc-logo img{ width: 70%; height: auto; }

/* меню – остаётся твоим 2-колоночным вариантом */
.rcc-header .rcc-menu{
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-rows: auto;
  column-gap: 24px; row-gap: 4px;
  flex: 1 1 auto;
  justify-items: start;
}
.rcc-header .rcc-menu .rcc-row{ display: contents; margin:0; padding:0; list-style:none; }
.rcc-header .rcc-menu .rcc-row:first-child li:nth-child(1){ grid-column:1; grid-row:1; } /* Услуги */
.rcc-header .rcc-menu .rcc-row:last-child  li:nth-child(1){ grid-column:1; grid-row:2; } /* Личный кабинет */
.rcc-header .rcc-menu .rcc-row:first-child li:nth-child(2){ grid-column:2; grid-row:1; } /* Контакты */
.rcc-header .rcc-menu .rcc-row:first-child li:nth-child(3){ grid-column:2; grid-row:2; } /* О компании */
.rcc-header .rcc-menu a{ color:#fff; text-decoration:none; font-weight:800; }

/* контакты справа внутри капсулы + заголовок */
.rcc-header .rcc-contacts{
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  padding-left:18px; margin-left:6px;
  border-left:1px solid rgba(255,255,255,.08);
  position:relative;
}
.rcc-header .rcc-contacts::before{
  content:"КОНТАКТЫ";
  position:absolute; top:-16px; right:0;
  font-weight:800; color:#fff; line-height:1;
}
.rcc-header .rcc-contacts .rcc-link{ color:#fff; text-decoration:none; font-weight:700; }

/* кнопка справа — полностью видимая, в обычном потоке, без фиксации */
.rcc-header .rcc-cta{
  flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center; text-align: center;
  background: rgba(203,110,23,.95); color:#111; font-weight:900; letter-spacing:.06em;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(204, 112, 25, 0.35);
}

/* на случай, если где-то было overflow скрывающий кнопку */
.rcc-header, .rcc-header .rcc-wrap{ overflow: visible !important; }

/* ===== адаптив ===== */
@media (max-width: 1024px){
  :root{ --rcc-h: 58px; }
  .rcc-header .rcc-contacts{ display:none; } /* как в референсе — компактнее */
  .rcc-header .rcc-cta{ width:52px; height:52px; }
}
@media (max-width: 720px){
  :root{ --rcc-h: 54px; }
  .rcc-header{ padding: 6px 8px; }
  .rcc-header .rcc-capsule{ gap: 12px; padding: var(--rcc-pad) 10px; }
  .rcc-header .rcc-menu{ grid-template-columns: 1fr 1fr; justify-items: center; column-gap: 16px; }
}
/* ==== компактная фикс-шапка: узкая капсула слева, CTA справа ==== */
:root{
  --rcc-h: 56px;         /* высота капсулы */
  --rcc-pad-x: 12px;     /* горизонтальные отступы в капсуле */
  --rcc-gap: 14px;       /* расстояние между блоками внутри */
  --capsule-max: 900px;  /* МАКСИМАЛЬНАЯ ширина капсулы (сделай 760–960 по вкусу) */
}

body{ padding-top: calc(var(--rcc-h) + 18px); } /* место под fixed-хеддер */

.rcc-header{
  position: fixed; top:0; left:0; right:0; z-index:9999;
  padding: 8px 12px; background: transparent;
}
.rcc-header .rcc-wrap{
  display:flex; align-items:center; justify-content:space-between;
}

/* ——— КАПСУЛА КОМПАКТНАЯ И ПРИЖАТА СЛЕВА ——— */
.rcc-header .rcc-capsule{
  flex: 0 1 auto;                 /* НЕ растягиваем! */
  width: fit-content;             /* по содержимому */
  max-width: var(--capsule-max);  /* ограничение сверху */
  min-height: var(--rcc-h);
  display:flex; align-items:center; gap: var(--rcc-gap);
  padding: 8px var(--rcc-pad-x);
  border-radius: 14px;
  background: rgba(79, 72, 67, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.06);
  margin-left: 0 !important;      /* прижата к левому краю окна */
}

/* логотип компактнее */
.rcc-header .rcc-logo{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.06); }
.rcc-header .rcc-logo img{ width:70%; height:auto; }

/* меню — две колонки */
.rcc-header .rcc-menu{
  display:grid; grid-template-columns:auto auto; grid-auto-rows:auto;
  column-gap:22px; row-gap:4px; justify-items:start;
}
.rcc-header .rcc-menu .rcc-row{ display:contents; margin:0; padding:0; list-style:none; }
.rcc-header .rcc-menu .rcc-row:first-child li:nth-child(1){ grid-column:1; grid-row:1; } /* Услуги */
.rcc-header .rcc-menu .rcc-row:last-child  li:nth-child(1){ grid-column:1; grid-row:2; } /* Личный кабинет */
.rcc-header .rcc-menu .rcc-row:first-child li:nth-child(2){ grid-column:2; grid-row:1; } /* Контакты */
.rcc-header .rcc-menu .rcc-row:first-child li:nth-child(3){ grid-column:2; grid-row:2; } /* О компании */
.rcc-header .rcc-menu a{ color:#fff; text-decoration:none; font-weight:800; }

/* контакты вправо внутри капсулы */
.rcc-header .rcc-contacts{
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  padding-left:16px; margin-left:6px; border-left:1px solid rgba(255,255,255,.08);
  position:relative;
}
.rcc-header .rcc-contacts::before{
  content:"КОНТАКТЫ"; position:absolute; top:-14px; right:0;
  font-weight:800; color:#fff; line-height:1;
}
.rcc-header .rcc-contacts .rcc-link{ color:#fff; text-decoration:none; font-weight:700; }

/* ——— КНОПКА СПРАВА, ПОЛНОСТЬЮ ВИДИМА ——— */
.rcc-header .rcc-cta{
  flex:0 0 auto; width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center; text-align:center;
  background: rgba(203,110,23,.95); color:#111; font-weight:900; letter-spacing:.06em;
  text-decoration:none; box-shadow:0 10px 24px rgba(203,110,23,.35);
}

/* адаптив: ещё компактнее и прячем контакты, если тесно */
@media (max-width: 1024px){
  :root{ --capsule-max: 760px; --rcc-h: 52px; }
  .rcc-header .rcc-contacts{ display:none; }
}
@media (max-width: 720px){
  :root{ --capsule-max: 640px; --rcc-h: 50px; }
  .rcc-header{ padding:6px 8px; }
  .rcc-header .rcc-menu{ grid-template-columns:1fr 1fr; justify-items:center; column-gap:14px; }
}

/* Кнопку чуть отодвинуть от правого края и не обрезать тенью */
.rcc-header .rcc-cta{
  margin-right: 42px;          /* подправь 12–24px по вкусу */
}

/* на всякий случай — ничего не режем по правому краю */
.rcc-header,
.rcc-header .rcc-wrap,
.rcc-header .container{
  overflow: visible !important;
}

/* если вдруг обрезает из-за маленького внешнего паддинга шапки,
   добавим запас по правому краю */
@media (min-width: 721px){
  .rcc-header{ padding-right: 20px; }  /* можно увеличить/уменьшить */
}
/* Кнопка растягивается по содержимому */
.rcc-header .rcc-cta{
  width: auto !important;        /* вместо фикс. ширины */
  height: auto !important;       /* вместо фикс. высоты */
  min-width: 48px;
  margin-right: 120px;     /* чуть-чуть запаса */
  min-height: 48px;              /* чтобы не становилась слишком низкой */
  padding: 10px 16px;            /* внутренние отступы */
  display: inline-flex;          /* центрируем текст по двум строкам */
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;           /* позволяем переносы (у тебя <br> уже есть) */
  box-sizing: border-box;
  border-radius: 14px;           /* можно оставить как было */
}

/* если на узких экранах нужно компактнее */
@media (max-width: 720px){
  .rcc-header .rcc-cta{
    padding: 8px 12px;
    min-width: 44px;
    min-height: 44px;
  }
}
:root{
  --rcc-extra-gap: 30px; /* <-- увеличивай/уменьшай расстояние */
}

/* у тебя уже есть padding-top у body — просто прибавим наш зазор */
body{
  padding-top: calc( var(--rcc-h, 56px) + 34px + var(--rcc-extra-gap) ) !important;
}

/* на мобилках можно сделать чуть меньше */
@media (max-width: 720px){
  :root{ --rcc-extra-gap: 18px; }
}

/* расстояние между блоком с кнопками (hero) и слайдером */
:root { --hero2slider-gap: 300px; } /* ← подбери 32–96px по вкусу */

/* 1) даём отступ снизу у первого экрана */
.hero, .first-screen, .promo-hero, .intro, .lead {
  margin-bottom: var(--hero2slider-gap) !important;
}

/* 2) на случай, если хочешь двигать сам слайдер — добавим сверху */
.slider, .main-slider, .swiper, .swiper-container, .carousel {
  margin-top: var(--hero2slider-gap) !important;
}

/* чуть меньше зазор на мобильных, чтобы всё помещалось */
@media (max-width: 720px){
  :root { --hero2slider-gap: 28px; }
}

:root { --hero2slider-gap: 70px; } /* подбери число по вкусу */

/* вариант 1: даём отступ снизу блоку с заголовком/кнопками */
.hero.hero--dock .hero__inner{
  margin-bottom: var(--hero2slider-gap) !important;
}

/* вариант 2 (если margin где-то сбрасывается) — отступ сверху у обёртки слайдера */
.hero.hero--dock .hero-frame{
  margin-top: var(--hero2slider-gap) !important;
}
/* ===== HERO dynamic background (за .hero__inner) ===== */
.hero .hero__inner{
  position: relative;
  z-index: 1;                 /* контент поверх фона */
  isolation: isolate;         /* чтобы смешивание не трогало всё вокруг */
  border-radius: 28px;        /* повторим скругление, если нужно */
}

/* «Аура» — плавные тёплые пятна, двигаются и переливаются */
.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;     /* мягкое свечение на тёмном фоне */
}

/* Лёгкий «кинематографичный» шум/блики поверх ауры */
.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;
}

/* Подсветка под заголовком — лёгкий «неоновый» шлейф */
.hero .hero__title{
  position: relative;
}
.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;
}

/* ===== Animations ===== */
@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){
  .hero .hero__inner::before,
  .hero .hero__inner::after,
  .hero .hero__title::after{
    animation: none !important;
  }
}
/* логотип над слоганом в hero */
.hero .hero__logo{
  position: relative;
  z-index: 2;                  /* поверх фоновых эффектов hero */
  display: flex;
  justify-content: center;
  margin: 0 0 12px;            /* отступ вниз до слогана */
}
.hero .hero__logo img{
  width: 72px;                 /* подгони при желании: 64–84px */
  height: 72px;
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255,255,255,.06);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* лёгкая «аура» вокруг логотипа (аккуратно) */
.hero .hero__logo::after{
  content:"";
  position:absolute; inset:-10px;
  border-radius:22px;
  pointer-events:none;
  background: radial-gradient(closest-side, rgba(255,160,70,.25), transparent 70%);
  filter: blur(10px);
  opacity:.7;
}

/* компактнее на мобилках */
@media (max-width: 640px){
  .hero .hero__logo img{ width:60px; height:60px; border-radius:14px; }
  .hero .hero__logo{ margin-bottom:10px; }
}
/* маленький логотип над слоганом — жёсткий оверрайд */
.hero .hero__logo{ display:flex; justify-content:center; margin-bottom:8px; }
.hero .hero__logo > img{
  width: 200px !important;
  height: 200px !important;
  flex: 0 0 44px !important;
  object-fit: contain !important;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
}
@media (max-width: 480px){
  .hero .hero__logo > img{
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }
}
/* компактный логотип над слоганом внутри hero */
.hero .hero__logo{
  display:flex; justify-content:center; margin-bottom:8px;
  position: relative; z-index: 3; /* выше фон-эффектов и слайдера */
}
.hero .hero__logo .hero-logo-img{
  width: 300px !important; height: 300px !important; /* подгони при желании */
  object-fit: contain !important; border-radius: 10px;
  background: rgba(255,255,255,.06);
  box-shadow: 0 8px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
}
@media (max-width: 480px){
  .hero .hero__logo .hero-logo-img{ width:36px !important; height:36px !important; }
}
/* логотип в hero — поверх анимации и БЕЗ фона/тени */
.hero .hero__logo{
  position: relative;
  z-index: 100;          /* выше ::before/::after и слайдера */
  display: flex;
  justify-content: center;
  margin-bottom: 3px;   /* отступ до слогана */
  pointer-events: none;  /* чтобы не перехватывал клики */
}

.hero .hero__logo img{
  width: 44px;           /* подгони: 36–48px */
  height: 44px;
  object-fit: contain;
  border-radius: 0;      /* без скругления — как чистый знак */
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  mix-blend-mode: normal !important; /* не смешиваемся с фоном */
}

@media (max-width: 480px){
  .hero .hero__logo img{ width: 36px; height: 36px; }
}
/* Сжать расстояние под шапкой для первого экрана */
.site-header + main .hero.hero--dock{
  margin-top: 10px !important;         /* было больше */
  padding-top: 8px !important;        /* внутренняя прокладка поменьше */
}

/* сам контейнер геро — ближе к верху */
.site-header + main .hero.hero--dock .hero__inner{
  padding-top: 4px !important;
}

/* если верхняя рамка/слайдер даёт ещё зазор — уберём */
.site-header + main .hero.hero--dock .hero-frame{
  margin-top: 1px !important;
}

/* на очень маленьких экранах оставим чуть больше, чтобы не прилипало */
@media (max-width: 560px){
  .site-header + main .hero.hero--dock{
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
}
/* ── Ужимаем зазор под шапкой на главной (hero) ── */
.site-header + main .hero.hero--dock{ margin-top: 0 !important; }
.site-header + main .hero.hero--dock .hero__inner{ padding-top: 4px !important; }
.site-header + main .hero.hero--dock .hero-frame{ margin-top: 2px !important; }

/* ── Ужимаем зазор на странице услуг ── */
.page--services-works .services-intro{
  margin-top: 0 !important;
  padding-top: 1px !important;   /* небольшой внутренний отступ вместо схлопывающегося margin */
}
.page--services-works .services-intro .svc-h1{ margin-top: 0 !important; } /* убираем верхний margin заголовка */

/* На всякий случай: любой самый первый блок под хеддером */
.site-header + main > *:first-child{ margin-top: 0 !important; padding-top: 8px !important; }

/* styles.css */
.form__note {
    display: none;
    padding: 10px;
    border-radius: 4px;
    margin-top: 15px;
}

.form__note--success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form__note--error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.form__note--info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.field.error input,
.field.error textarea {
    border-color: #dc3545;
}

.field .error {
    display: none;
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 5px;
}

.field.error .error {
    display: block;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.rcc-contacts--icons{
  display:flex; gap:10px; align-items:center;
}
.rcc-ico{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,20,26,.6);
  backdrop-filter: blur(6px);
  font-weight:700; font-size:.95rem; line-height:1;
  color:#e6ebf5; transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.rcc-ico svg{ width:18px; height:18px; display:block; }
.rcc-ico:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.22); box-shadow: 0 8px 20px rgba(0,0,0,.25); }

/* брендовые оттенки — деликатно */
.rcc-ico.whatsapp svg path{ fill:#25D366; }
.rcc-ico.telegram svg path{ fill:#2AABEE; }
.rcc-ico.phone svg path{ fill:#FF9A3C; }
.rcc-ico.mail svg path{ fill:#FFB84D; }

/* на узких — только иконки */
@media (max-width: 900px){
  .rcc-ico span{ display:none; }
  .rcc-ico{ padding:8px; }
}
/* блок с иконками в 2 столбца */
.rcc-contacts--icons{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 столбца */
  gap: 10px 12px;                         /* строки × колонки */
  align-content: center;
  align-items: center;
  min-width: 260px;                        /* чтобы не ломалось */
}

/* кнопки растягиваем по ширине ячейки */
.rcc-contacts--icons .rcc-ico{
  width: 100%;
  justify-content: flex-start;
}

/* на узких экранах — обратно в один столбец */
@media (max-width: 900px){
  .rcc-contacts--icons{
    grid-template-columns: 1fr;           /* 1 столбец */
  }
  .rcc-contacts--icons .rcc-ico span{ display:none; } /* только иконки */
  .rcc-contacts--icons .rcc-ico{ padding:8px; }
}

/* если хочется более компактно в капсуле на десктопе */
@media (min-width: 901px){
  .rcc-contacts--icons .rcc-ico{ padding:8px 12px; }
}
/* --- Контакты 2×2 в шапке --- */
.rcc-capsule .rcc-contacts.rcc-contacts--icons{
  display: grid !important;                       /* перебиваем старый flex */
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px 12px;
  align-items: center;
  align-content: center;
  min-width: 280px;                               /* чтобы реально было место для 2 столбцов */
}

/* сами «пилюли» растягиваем на всю ячейку */
.rcc-capsule .rcc-contacts--icons .rcc-ico{
  width: 100%;
  justify-content: flex-start;
}

/* если капсула узкая — падаем в один столбец (мобилки/узкие экраны) */
@media (max-width: 1100px){
  .rcc-capsule .rcc-contacts.rcc-contacts--icons{
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .rcc-capsule .rcc-contacts--icons .rcc-ico span{ display:none; } /* оставляем только иконки */
  .rcc-capsule .rcc-contacts--icons .rcc-ico{ padding:8px; }
}

/* если нужно жёстко зафиксировать ширину правого столбца капсулы */
@media (min-width: 1101px){
  .rcc-capsule{
    /* если у тебя капсула сделана grid'ом с 3 колонками, зафиксируй правую */
    grid-template-columns: auto 1fr minmax(300px, 320px);
  }
}
/* === Контакты-иконки в капсуле: сетка 2×2 / 4 в ряд на очень узких === */

/* десктоп: 2×2 */
.rcc-capsule .rcc-contacts.rcc-contacts--icons{
  display: grid !important;                        /* перебиваем старый flex */
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px 12px;
  align-items: center;
  align-content: center;
  min-width: 280px;
}
.rcc-capsule .rcc-contacts--icons .rcc-ico{
  width: 100%;
  justify-content: flex-start;
}

/* планшеты: тоже 2×2, немного ужимаем отступы */
@media (max-width: 900px){
  .rcc-capsule .rcc-contacts.rcc-contacts--icons{
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
    min-width: 0 !important;
  }
  .rcc-capsule .rcc-contacts--icons .rcc-ico{ padding: 8px 10px; }
}

/* очень узкие телефоны: в один ряд по 4 ИКОНКИ (без текста) */
@media (max-width: 560px){
  .rcc-capsule .rcc-contacts.rcc-contacts--icons{
    grid-template-columns: repeat(4, minmax(34px, 1fr)) !important;
    gap: 8px;
  }
  .rcc-capsule .rcc-contacts--icons .rcc-ico{
    width: auto;
    padding: 8px;
  }
  .rcc-capsule .rcc-contacts--icons .rcc-ico span{ display: none; } /* только иконки */
}

/* уменьшить общую высоту капсулы на мобилках */
@media (max-width: 560px){
  .rcc-capsule{ padding: 10px 12px; }
  .caps-cta{ display: none; } /* убираем огромную кнопку, чтобы не перекрывала экран */
}

/* ===== компактная шапка на мобиле ===== */
@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; }
}
.hidden {
  display: none;
}

/* ===== Премиальная типографика About (без фонов и переливаний) ===== */

/* базовые цвета/ритм */
.about__content {
  color:#e9edf3;
  line-height:1.65;
  letter-spacing:.01em;
}
.about-title{
  margin:0 0 12px;
  font-weight:900;
  font-size:clamp(1.5rem, 2.6vw, 2.2rem);
  line-height:1.15;
  color:#fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.t-lead{
  color:#f4f7fb;
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  margin:0 0 12px;
}
.about__content p{ margin:0 0 12px; }

/* аккуратный акцент на strong без ядовитых градиентов */
.t-ink{
  position:relative;
  font-weight:900;
  color:#fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* — маленькая «полоска-блик» по hover: быстрый, 600ms, только когда навёл */
.t-ink::after{
  content:"";
  position:absolute; inset:-2px -4px;
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 35%,
                           rgba(255,255,255,.6) 50%,
                           rgba(255,255,255,0) 65%);
  transform: translateX(-120%) skewX(-12deg);
  opacity:.0;
  pointer-events:none;
}
.t-ink:hover::after,
.t-ink:focus-visible::after{
  animation: inkGlint .6s ease forwards;
}
@keyframes inkGlint {
  0%   { transform:translateX(-120%) skewX(-12deg); opacity:.0; }
  30%  { opacity:.35; }
  100% { transform:translateX(120%)  skewX(-12deg); opacity:.0; }
}

/* — лёгкий блик у заголовка по hover (не постоянно) */
.t-glint{
  position:relative;
}
.t-glint::after{
  content:"";
  position:absolute; inset:-4px -6px;
  background:
    linear-gradient(100deg, rgba(255,255,255,0) 45%,
                           rgba(255,255,255,.75) 52%,
                           rgba(255,255,255,0) 59%);
  mix-blend-mode: soft-light;
  transform: translateX(-120%) skewX(-10deg);
  opacity:0;
  pointer-events:none;
}
.t-glint:hover::after,
.t-glint:focus-visible::after{
  animation: titleGlint .7s ease-out forwards;
}
@keyframes titleGlint{
  0%   { transform:translateX(-120%) skewX(-10deg); opacity:0; }
  20%  { opacity:.25; }
  100% { transform:translateX(120%)  skewX(-10deg); opacity:0; }
}

/* подчёркивание ссылок в тексте — тонкая «умная» линия */
.about__content a{
  color:#fff;
  text-decoration:none;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .18s ease;
}
.about__content a:hover{ background-size: 100% 1px; }

/* уважение к reduced-motion — отключаем анимации бликов */
@media (prefers-reduced-motion: reduce){
  .t-ink::after,
  .t-glint::after{ animation:none !important; }
}
html { scroll-behavior: smooth; }

/* чтобы секция не уезжала под липкий хедер */
#top,
#about,
#services,
#cta {
  scroll-margin-top: var(--header-h, 80px); /* h задаём из JS ниже */
}

.slider__btn::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-left: 0;
  border-top: 0;
  margin: auto;
  transform: rotate(-45deg);
}
.slider__btn--prev::before { transform: rotate(135deg); }
/* контейнер слайдера */
.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 20px; /* отступы между карточками */
  padding: 10px;
}

/* отдельная карточка */
.slider .card {
  flex: 0 0 calc(33.333% - 20px); /* три карточки в строку */
  scroll-snap-align: start;
  border-radius: 12px;
  background: #1a1b1f;
}
.slider {
  display: flex;
  overflow: hidden;         /* убираем полоску */
  scroll-behavior: smooth;
  gap: 20px;
}

.slider .card {
  flex: 0 0 calc(33.333% - 20px); /* три карточки влезают */
}
.slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
  z-index: 5;
}

.slider__btn--prev {
  left: 10px;
}

.slider__btn--next {
  right: 10px;
}

.slider {
  position: relative; /* чтобы кнопки позиционировались внутри */
  display: flex;
  overflow: hidden;
  scroll-behavior: smooth;
  gap: 20px;
}
.slider-wrap {
  position: relative;
}

.slider {
  display: flex;
  overflow: hidden;
  gap: 20px;
  scroll-behavior: smooth;
}

.slider .card {
  flex: 0 0 calc(33.333% - 20px); /* три карточки */
}

.slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
  z-index: 5;
}

.slider__btn--prev { left: 10px; }
.slider__btn--next { right: 10px; }

/* === SERVICES slider: mobile — 1 карточка, нативный свайп === */
@media (max-width: 768px){
  /* даём горизонтальный скролл и snap */
  .slider{
    display: flex;                 /* поверх grid — проще для свайпа */
    overflow-x: auto;              /* включаем прокрутку */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; /* щёлкаем по карточкам */
    gap: 12px;
    padding: 2px 12px 14px;        /* небольшой отступ, чтоб не резало по краю */
  }

  /* ровно одна карточка на экран */
  .slider .card{
    flex: 0 0 calc(100% - 24px);   /* 1 карточка в вьюпорт с учётом отступов */
    scroll-snap-align: center;     /* центрируем попадание */
  }

  /* кнопки на мобиле не нужны — свайп удобнее */
  .slider__btn{ display:none; }
  /* при желании можно скрыть точки
  .slider__dots{ display:none; } */

  /* чтобы медиа не прыгало по высоте */
  .card__media img{
    height: clamp(220px, 56vw, 360px);
    object-fit: cover;
    width: 100%;
    display: block;
  }
}
:root {
  /* базовый фон и слои */
  --bg: #0f2d2a;          /* тёмно-зелёный фон страницы */
  --bg-2: #123632;        /* второй слой/панели на фоне */
  --glass: rgba(7, 32, 29, 0.35);  /* тёмно-зелёная вуаль для стекла */
  --border: rgba(187, 245, 232, 0.12); /* тонкая зелёная окантовка стекла */

  /* текст */
  --text: #eaf6f3;        /* почти белый в зелёный */
  --muted: #b6cec8;       /* приглушённый */

  /* тени и разделители */
  --shadow: 0 10px 30px rgba(7, 32, 29, 0.45);
  --divider: rgba(186, 230, 215, 0.14);

  /* если есть брендовые градиенты — оставь, не трогаем */
}
html, body { background: var(--bg); color: var(--text); }

/* оттенки для ленты достижений */
:root {
  --strip-bg: #143f3a;                    /* на полтона светлее, чем --bg/#0f2d2a */
  --strip-grad-1: rgba(20, 63, 58, 0.95);
  --strip-grad-2: rgba(13, 46, 41, 0.85);
  --strip-border: rgba(187, 245, 232, 0.14);
  --strip-text: #f0fbf8;
  --strip-muted: #c1d9d3;
}

.strip--accent {
  background:
    linear-gradient(180deg, var(--strip-grad-1), var(--strip-grad-2));
  border-top: 1px solid var(--strip-border);
  border-bottom: 1px solid var(--strip-border);
  position: relative;
}

.strip--accent .strip__inner {
  padding-block: clamp(28px, 5vw, 56px);
}

.strip--accent .stat {
  display: grid;
  gap: 6px;
  align-items: baseline;
  justify-items: center;
  text-align: center;
  padding: 8px 12px;
}

.strip--accent .stat strong {
  color: var(--strip-text);
  font-weight: 700;
  font-size: clamp(28px, 5.2vw, 48px);
  line-height: 1.05;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

.strip--accent .stat span {
  color: var(--strip-muted);
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: 0.2px;
  opacity: 0.95;
}

/* колонки + разделители */
.strip--accent .strip__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(12px, 2.5vw, 24px);
}

.strip--accent .stat:not(:last-child) {
  border-right: 1px solid var(--strip-border);
}

/* мобильная адаптация */
@media (max-width: 768px) {
  .strip--accent .strip__inner {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px 16px;
  }
  .strip--accent .stat:not(:last-child) {
    border-right: none;
  }
}