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

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #0d0d0d;
  color: #fff;
  line-height: 1.6;
}

h1, h2, h3 {
  font-weight: 900;
  text-transform: uppercase;
}

h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* === Шапка === */
.hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}


.hero-overlay {
  background: rgba(0, 0, 0, 0.7);
  padding: 2rem;
  border-radius: 10px;
  animation: fadeIn 2s ease-out;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background-color: #ffffff;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  transition: background 0.3s ease;
}

.btn:hover {
  background-color: #cccccc;
}


/* Контейнер внутри каждого слайда */
.swiper-slide .content {
  display: flex;
  flex-direction: column;
  align-items: center; /* центрирует по горизонтали */
  justify-content: center;
  text-align: center;
  height: 100%; /* на случай, если нужно выравнивание по высоте */
  padding: 2rem;
  box-sizing: border-box;
}

/* Кнопка (cta) */
.cta {
  display: inline-block;
  padding: 0.8rem 1.6rem;
  background-color: #ffffff;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  transition: background 0.3s ease;
  margin-top: 1rem;
}

.cta:hover {
  background-color: #cccccc;
}



/* === Услуги === */
.services .service-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}

.service {
  background-color: #1a1a1a;
  padding: 1.5rem;
  border-radius: 12px;
  flex: 1 1 300px;
  box-shadow: 0 0 10px rgba(255, 111, 0, 0.2);
  transition: transform 0.3s ease;
}

.service:hover {
  transform: translateY(-5px);
}

.service h3 {
  margin-bottom: 0.5rem;
  color: #ffffff;
}




.portfolio-note {
  color: #a0a0a0;
  font-size: 15px;
  margin-top: -30px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 400;
  letter-spacing: 0.02em;
}


/* === Статьи === */
.articles ul {
  list-style: none;
  padding: 0;
}

.articles li {
  margin: 0.8rem 0;
}

.articles a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
}

.articles a:hover {
  text-decoration: underline;
}

/* === Контакты === */
.contact a {
  color: #cccccc;
  text-decoration: none;
}

.contact a:hover {
  text-decoration: underline;
}

/* === Подвал === */
footer {
  background-color: #111;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  color: #aaa;
}

/* === Анимации === */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Адаптив === */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .btn {
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.appear {
  opacity: 1;
  transform: translateY(0);
}

/* ====== SERVICES SECTION (hero + cards) ====== */
.services-section{padding:80px 0 40px;background:#0d0d0d}
.services-hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:40px;padding:40px 8vw 20px;border-top:1px solid rgba(255,255,255,.12)}
.services-hero h2{font-size:clamp(34px,7vw,84px);line-height:.95;margin:0}
.services-hero .divider{margin-top:26px;width:180px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:999px;display:flex;align-items:center;justify-content:center;opacity:.6}
.services-hero .right{position:relative}
.services-hero .right img{width:100%;height:420px;object-fit:cover;border-radius:8px;filter:saturate(1.05)}
.services-hero .dots{position:absolute;right:18px;bottom:18px;display:flex;flex-direction:column;gap:16px}
.dot{width:64px;height:64px;border-radius:50%}
.dot.orange{background:#ffffff}
.dot.yellow{background:#dcdcdc}

/* cards grid */
.services-grid{padding:10px 8vw 0;display:grid;grid-template-columns:1fr 1fr;gap:36px}
.svc-card{border:1px solid rgba(255,255,255,.25);border-radius:6px;background:#121212;padding:24px 22px;position:relative}
.svc-top{display:flex;align-items:flex-start;gap:28px}
.svc-price{min-width:160px;border-right:1px solid rgba(255,255,255,.15);padding-right:18px}
.svc-price .from{font-size:12px;color:#cfcfcf;opacity:.8;margin-bottom:6px;display:block}
.svc-price .val{font-weight:900;font-size:22px}
.svc-price .unit{font-weight:700;margin-left:6px}
.svc-price .tag{margin-top:14px;font-size:12px;color:#a9a9a9}
.svc-body h3{font-size:24px;margin:0 0 10px}
.svc-body ul{list-style:none;margin:0;padding:0}
.svc-body li{font-size:14px;color:#d8d8d8;margin:6px 0}
.svc-actions{margin-top:18px;display:flex;gap:12px}
.btn-outline,.btn-ghost{font-size:13px;padding:10px 16px;border-radius:6px;text-decoration:none;display:inline-block}
.btn-outline{border:1px solid #fff;color:#fff}
.btn-outline:hover{background:#fff;color:#0d0d0d}
.btn-ghost{border:1px solid rgba(255,255,255,.25);color:#fff;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.svc-code{position:absolute;left:18px;bottom:10px;font-size:12px;color:#9a9a9a;opacity:.8}

.services-note{padding:10px 8vw 0;color:#a8a8a8;font-size:12px}

/* Adaptive */
@media (max-width:1024px){
  .services-hero{grid-template-columns:1fr;gap:22px}
  .services-hero .right img{height:320px}
  .services-grid{grid-template-columns:1fr}
}


/* ===== Выпадающее меню ===== */
.nav-item { position: relative; }
.has-dropdown .dropdown {
  position: absolute; top: 100%; right: 0;
  min-width: 260px; background: #111;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px; display: none; flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,.5); padding: 8px 0; z-index: 50;
}
.has-dropdown:hover .dropdown { display: flex; }
.dropdown a { padding: 10px 14px; font-size: 14px; white-space: nowrap; color: #eee; text-decoration: none; }
.dropdown a:hover { background: #1b1b1b; }

/* ===== Страницы (router) ===== */
.page { display: none; }
.page.active { display: block; }

.page-services { padding: 40px 0 80px; background: #0d0d0d; }
.page-services .container { padding: 0 8vw; }
.page-services h1 { font-size: clamp(30px,5.6vw,56px); margin: 20px 0 30px; }

/* сетка карточек на странице «Все услуги» */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cards .svc-card { background: #121212; }

/* Хиро и тело детальных страниц */
.service-page { background: #0d0d0d; }
.service-hero {
  height: 52vh; display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 0 8vw 30px; background-size: cover; background-position: center; position: relative;
}
.service-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(13,13,13,0.8) 100%);
}
.service-hero h1 { position: relative; z-index: 2; font-size: clamp(28px,6vw,72px); margin: 0; }
.breadcrumbs { padding: 16px 8vw; color: #bfbfbf; font-size: 14px; }
.service-body { padding: 28px 8vw 64px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 36px; }
.service-body .panel {
  border: 1px solid rgba(255,255,255,.18); background: #121212; border-radius: 6px; padding: 20px;
}
.service-body h3 { margin: 0 0 12px; }
.service-cta { display: flex; gap: 12px; margin-top: 16px; }

/* Когда открыта «страница», скрываем домашние секции */
body.showing-page .hero,
body.showing-page .about,
body.showing-page .services,
body.showing-page .portfolio,
body.showing-page .articles,
body.showing-page .contact,
body.showing-page footer { display: none; }

@media (max-width: 960px) {
  .cards { grid-template-columns: 1fr; }
  .service-body { grid-template-columns: 1fr; }
}

/* Скрывать блоки с классом home-only на внутренних страницах */
body.showing-page .home-only {
  display: none !important;
}


.brand .logo {
  width: 32px;
  height: 32px;
  border-radius: 6px;
}
.brand .studio-name {
  font-weight: 900;
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.5px;
}


/* Общий герой-блок для внутренних страниц */
.page-hero{
  position:relative;
  min-height:48vh;                /* высота шапки-баннера */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:flex-end;           /* заголовок снизу слева */
  padding:80px 8vw 36px;
}
.page-hero::before{               /* тёмная вуаль поверх фото */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55));
}
.page-hero h1{
  position:relative; z-index:2;
  margin:0;
  font-size:clamp(32px,6vw,72px);
  line-height:.95;
}
.page-body{                       /* контент после баннера */
  padding:32px 8vw 60px;
}

/* Если хочешь чуть ниже/компактнее на мобилках */
@media (max-width:768px){
  .page-hero{min-height:38vh; padding:60px 6vw 24px;}
  .page-body{padding:24px 6vw 48px;}
}


.releases-swiper .swiper-wrapper { transition-timing-function: linear !important; }

.nav-item.open .dropdown {
  display: flex !important;
}
.releases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  padding: 40px 20px;
  justify-items: center;
  background-color: #111;
}

.release {
  position: relative;
  width: 100%;
  max-width: 220px;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
}

.release img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.release-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.85));
  color: #fff;
  padding: 12px;
  font-size: 15px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  text-align: center;
  font-weight: 500;
  pointer-events: none;
}

.release:hover img {
  transform: scale(1.05);
}

.release:hover .release-title {
  opacity: 1;
  transform: translateY(0);
}






.articles-section {
  margin: 60px 0 0 0;
  padding: 0 0 60px 0;
}
.articles-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 32px;
  margin-left: 14vw;
}
.articles-header h2 {
  font-family: 'Montserrat', Arial, sans-serif;
  color: #fff;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.05;
  margin: 0;
  letter-spacing: 1px;
}
.decor-line {
  width: 110px;
  height: 3px;
  background: #ffffff;
  margin: 20px 0 0 0;
  border-radius: 2px;
}
.articles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 36px;
  max-width: 1250px;
  margin: 0 auto;
}
.article-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 220px;
  box-shadow: 0 6px 30px 0 rgba(0,0,0,0.19);
  cursor: pointer;
}
.article-img {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(.2,.67,.31,1.16);
}
.article-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, rgba(15,15,15,0) 30%, rgba(15,15,15,0.92) 95%);
  padding: 34px 28px 30px 28px;
  z-index: 2;
  transition: background 0.35s;
}
.article-date {
  color: #f7f7f7c2;
  font-size: 15px;
  letter-spacing: 0.8px;
  margin-bottom: 7px;
  font-weight: 600;
}
.article-title {
  color: #fff;
  font-size: 1.32rem;
  font-weight: 800;
  line-height: 1.18;
  margin-bottom: 22px;
}
.article-btn {
  display: inline-block;
  padding: 11px 32px;
  background: #fff;
  color: #181818;
  font-weight: 800;
  font-size: 1.07rem;
  border-radius: 50px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.36s cubic-bezier(.3,.76,.32,1.24);
  text-decoration: none;
  box-shadow: 0 2px 14px 0 rgba(0,0,0,0.08);
}
.article-card:hover .article-img {
  transform: scale(1.06);
}
.article-card:hover .article-btn {
  opacity: 1;
  transform: translateY(0);
}
.article-card:hover .article-overlay {
  background: linear-gradient(180deg, rgba(15,15,15,0.25) 15%, rgba(15,15,15,0.94) 90%);
}

@media (max-width: 900px) {
  .articles-grid {
    grid-template-columns: 1fr;
    grid-gap: 24px;
  }
  .articles-header {
    margin-left: 0;
  }
}

.article-img {
  width: 100%;
  height: 220px;
  background-size: cover;
  background-position: center;
  /* ЭФФЕКТ: изначально черно-белое */
  filter: grayscale(1);
  transition: 
    filter 0.45s cubic-bezier(.27,.93,.35,1.11),
    transform 0.6s cubic-bezier(.2,.67,.31,1.16);
}

/* При наведении на карточку — цветное */
.article-card:hover .article-img {
  filter: grayscale(0);
  transform: scale(1.06);
}



.articles-section {
  position: relative;
  overflow: hidden;
  background: #131313; /* Цвет основного фона */
  padding-bottom: 64px; /* не забывай отступы */
}

.articles-bg {
  position: absolute;
  left: 0; right: 0;
  top: 0px; /* Поднимаем фон выше секции */
  height: 120%; /* Чтобы fade ушёл за секцию */
  background: 
    linear-gradient(to bottom, rgba(19,19,19,0) 75%, #131313 100%),
    url('DSC_0453.JPG') center/cover no-repeat;

  filter: grayscale(1) brightness(0.7) contrast(1.18);
  z-index: 0;
  pointer-events: none;
}


.articles-header, .articles-grid {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 14px rgba(0,0,0,0.36);
}




/* ——— ARTICLE LAYOUT ——— */

/* компактная тонкая линия-разделитель */
.hairline{border:0;height:1px;background:rgba(255,255,255,.12);margin:18px 6vw 36px}

/* INTRO 3-колонки */
.intro-3col{
  display:grid;grid-template-columns:220px 1fr 320px;gap:40px;
  align-items:start;padding:42px 6vw 28px;
}
.intro-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#d2d2d2}
.intro-label .label-top{line-height:1.6;margin-bottom:16px}
.intro-label .label-meta{display:flex;flex-direction:column;gap:6px;opacity:.75}
.intro-text h2{font-family:'Montserrat',sans-serif;font-weight:900;letter-spacing:.02em;
  font-size: clamp(22px,3.2vw,32px);margin:2px 0 14px}
.intro-text .lead{color:#d8d8d8}
.intro-text .muted{color:#bdbdbd}
.intro-circle{display:flex;justify-content:center}
.circle-big{width:320px;height:320px;border:1px solid rgba(255,255,255,.16);border-radius:50%;
  position:relative;background:radial-gradient(ellipse at 60% 40%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%)}
.arrow-down{position:absolute;inset:0;display:grid;place-items:center;font-size:80px;opacity:.9}

/* Секция: фото слева + шаги справа (как в макете) */
.section-grid{
  padding:36px 6vw 18px;display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:48px;position:relative;
}
.section-title{font-family:'Montserrat',sans-serif;font-weight:900;text-transform:uppercase;
  font-size: clamp(22px,3.4vw,34px);margin:0 0 18px;letter-spacing:.02em}
.section-photo{position:relative;margin:0}
.section-photo img{width:100%;display:block;border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,.35);object-fit:cover}
.v-label{
  position:absolute;left:-48px;bottom:50%;transform:rotate(-90deg) translateY(50%);
  transform-origin:left bottom;color:#aaa;font-size:12px;letter-spacing:.24em;text-transform:uppercase;opacity:.6
}

/* Шаги: нумерация + коробочки */
.steps-wrap{padding-top:4px}
.steps-list{counter-reset:step;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.steps-list li{position:relative;padding-left:56px}
.steps-list li::before{
  counter-increment:step;content:counter(step) ")";
  position:absolute;left:0;top:2px;font-weight:800;font-family:'Montserrat',sans-serif;opacity:.95
}
.step-title{font-weight:700;margin-bottom:8px;letter-spacing:.02em}
.step-box{border:1px solid rgba(255,255,255,.14);background:#121212;border-radius:6px;padding:14px 16px;color:#e5e5e5}
.steps-list.dense .step-box{background:#141414}

/* Широкая полоса с фото и кнопкой справа */
.wide-band{padding:30px 6vw 14px}
.wide-band img{width:100%;display:block;border-radius:8px;filter:grayscale(1) contrast(1.1)}
.wide-band .wide-cta{display:flex;justify-content:flex-end;margin-top:12px}

/* Второй блок (“что потребуется”) — та же сетка, чуть плотнее */
.section-grid.second{gap:42px;margin-top:8px}

/* Адаптив */
@media (max-width:1080px){
  .intro-3col{grid-template-columns:180px 1fr 240px}
  .circle-big{width:260px;height:260px}
}
@media (max-width:860px){
  .intro-3col{grid-template-columns:1fr;gap:22px}
  .circle-big{width:220px;height:220px;margin-top:6px}
  .section-grid{grid-template-columns:1fr;gap:26px}
  .v-label{left:0;bottom:-18px;transform:none}
}

.section-photo video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  object-fit: cover;
}




/* ===== FAQ accordion ===== */
.acc .acc-item{
  border:1px solid rgba(255,255,255,.18);
  border-radius:6px;
  background:#121212;
  margin:10px 0;
  overflow:hidden;
}
.acc .acc-item > summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  font-weight:700;
}
.acc .acc-item[open] > summary{ background:#151515; }
.acc .acc-a{
  padding:14px 16px;
  color:#e5e5e5;
  border-top:1px solid rgba(255,255,255,.12);
}
.acc .acc-item > summary::-webkit-details-marker{ display:none; }



/* ===== FAQ look ===== */
.faq-tabs{
  display:flex;
  gap:26px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.18);
  overflow-x:auto;   /* только горизонтальный скролл при переполнении */
  overflow-y:hidden; /* вертикальный скролл отключен */
  padding:0 8vw 8px;
  margin:0 0 22px;
}

.faq-tabs button{
  background:transparent; border:none; color:#dcdcdc; opacity:.75;
  font: 700 13px/1.2 'Montserrat', sans-serif;
  letter-spacing:.08em; text-transform:uppercase; padding:12px 0; cursor:pointer;
  position:relative; white-space:nowrap;
}
.faq-tabs button:hover{ opacity:1 }
.faq-tabs button.active{ color:#fff; opacity:1 }
.faq-tabs button.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-9px; height:2px; background:#ffffff; border-radius:2px;
}

.faq-groups{ padding:0 8vw 40px }
.faq-group{ max-width:1100px; margin:0 auto }

.faq-item{
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:18px 0; position:relative;
}
.faq-item:last-child{ border-bottom:1px solid rgba(255,255,255,.14) }

.faq-item > summary{
  list-style:none; cursor:pointer; outline:none;
  font: 900 clamp(16px, 2.2vw, 28px)/1.25 'Montserrat', sans-serif;
  text-transform:uppercase; letter-spacing:.02em; padding-right:56px;
  color:#fff;
}
.faq-item > summary::-webkit-details-marker{ display:none }

.faq-item > summary::after{
  content:""; position:absolute; right:0; top:50%; width:36px; height:36px;
  border:1px solid rgba(255,255,255,.28); border-radius:50%; transform:translateY(-50%);
  background:
    radial-gradient(circle at 50% 50%, transparent 15px, transparent 15px) padding-box,
    conic-gradient(from 90deg at 50% 50%, transparent 0deg, transparent 180deg, rgba(255,255,255,.7) 180deg, rgba(255,255,255,.7) 360deg) border-box;
  mask: radial-gradient(circle 14px at center, transparent 13px, #000 14px);
  transition: transform .25s ease, opacity .25s ease;
}
.faq-item[open] > summary::after{
  transform: translateY(-50%) rotate(90deg);
}

.faq-a{
  color:#e6e6e6; padding:12px 0 6px 0; max-width:90ch;
  /* плавное раскрытие */
  display:grid; grid-template-rows: 0fr; transition:grid-template-rows .28s ease;
}
.faq-item[open] .faq-a{ grid-template-rows: 1fr }
.faq-a > *{ overflow:hidden }

@media (max-width: 720px){
  .faq-tabs{ gap:18px; }
  .faq-item > summary{ padding-right:48px }
  .faq-item > summary::after{ width:32px; height:32px }
}


.faq-contacts {
  background: #000;
  color: #fff;
  padding: 40px 20px;
  text-align: center;
}

.faq-contacts h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 20px;
}

.faq-contacts a {
  color: #fff;
  text-decoration: none;
}

.faq-contacts .contacts-social img {
  width: 28px;
  margin: 0 8px;
  transition: 0.3s;
}

.faq-contacts .contacts-social img:hover {
  transform: scale(1.1);
}



/* ===== FAQ Contacts (scoped) ===== */
#faq-page .faq-contacts{
  background:#0f0f0f;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-top:40px;
}
#faq-page .faqc-wrap{
  display:grid;
  grid-template-columns: 280px 1fr 320px;
  gap:36px;
  align-items:start;
  padding:48px 8vw;
}
#faq-page .faqc-brand{
  display:flex; flex-direction:column; gap:14px;
}
#faq-page .faqc-logo{
  width:140px; height:140px; object-fit:cover; border-radius:12px;
  background:#111; box-shadow:0 8px 30px rgba(0,0,0,.35);
}
#faq-page .faqc-mark{
  font-weight:900; letter-spacing:.04em; line-height:1.05; opacity:.9;
}
#faq-page .faqc-title{
  margin:0 0 16px; font-size: clamp(26px,3.4vw,40px);
  font-weight:900; letter-spacing:.02em;
}
#faq-page .faqc-list{ list-style:none; margin:0 0 18px; padding:0; }
#faq-page .faqc-list li{
  display:flex; align-items:flex-start; gap:10px; margin:10px 0; color:#eaeaea;
}
#faq-page .faqc-list .dot{
  width:8px; height:8px; border-radius:50%; margin-top:8px;
  background:linear-gradient(180deg,#ffffff,#dcdcdc);
  box-shadow:0 0 0 3px rgba(255,122,26,.15);
}
#faq-page .faqc-list .muted{ color:#bdbdbd; font-size:12px; margin-left:6px; }

#faq-page .faqc-cards{ display:flex; gap:12px; flex-wrap:wrap; }
#faq-page .card{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:#121212;
}
#faq-page .card-icon{ font-size:18px; line-height:1; }
#faq-page .card-main{ color:#fff; text-decoration:none; font-weight:700; }

#faq-page .faqc-side{
  border-left:1px solid rgba(255,255,255,.12);
  padding-left:24px; display:flex; flex-direction:column; gap:14px;
}
#faq-page .faqc-mails{ margin:0; }
#faq-page .faqc-mails dt{
  font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#cfcfcf;
}
#faq-page .faqc-mails dd{ margin:2px 0 12px; }
#faq-page .faqc-mails a{ color:#fff; text-decoration:none; border-bottom:1px dashed rgba(255,255,255,.35); }
#faq-page .faqc-mails a:hover{ border-bottom-color:transparent; }

#faq-page .faqc-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:999px; text-decoration:none;
  font-weight:800; text-transform:lowercase; letter-spacing:.02em;
  border:1px solid #fff; color:#fff; background:transparent;
}
#faq-page .faqc-cta:hover{ background:#fff; color:#0d0d0d; }

#faq-page .faqc-socials{ display:flex; gap:10px; margin-top:6px; }
#faq-page .sbtn{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.18); border-radius:10px;
  color:#fff; text-decoration:none; font-weight:800; font-size:13px;
}
#faq-page .sbtn:hover{ background:rgba(255,255,255,.08); }

/* adaptive */
@media (max-width: 980px){
  #faq-page .faqc-wrap{ grid-template-columns: 1fr; }
  #faq-page .faqc-side{ border-left:none; padding-left:0; }
  #faq-page .faqc-brand{ flex-direction:row; align-items:center; gap:16px; }
}

/* Fix: выравнивание лого и названия в FAQ-контактах */
#faq-page .faqc-brand{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;      /* центрируем всё внутри колонки */
}

#faq-page .faqc-logo{
  display:block;
  width:132px;
  height:132px;
  object-fit:contain;      /* логотип не обрезается */
  border-radius:14px;
  background:#151515;      /* аккуратная «плитка» под логотип */
  box-shadow:0 8px 26px rgba(0,0,0,.30);
  padding:18px;            /* чтобы знак не прилипал к краям плитки */
}

#faq-page .faqc-mark{
  text-align:center;       /* подпись строго под логотипом */
  font-weight:900;
  letter-spacing:.08em;
  line-height:1.1;
  opacity:.92;
}

/* ===== ARTICLES: HERO ===== */
.articles-hero {
  position: relative;
  min-height: 44vh;
  background: 
      url("DSC_0583.JPG") center/cover no-repeat,
      radial-gradient(1200px 380px at 20% -10%, rgba(255,255,255,.05), transparent 55%),
      linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.8)); /* можно затемнить */
  display: flex;
  align-items: flex-end;
  padding: 86px 8vw 36px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}


.ah-wrap{position:relative; z-index:2; margin-left:6vw}
.ah-eyebrow{letter-spacing:.16em; font-size:12px; color:#ddd; text-transform:uppercase; margin-bottom:10px}
.articles-hero h1{font-family:'Montserrat',sans-serif;font-weight:900;line-height:.95;
  font-size:clamp(32px,6.2vw,64px); margin:0}
.ah-barcode{width:140px;height:6px;background:repeating-linear-gradient(90deg,#fff 0 3px,transparent 3px 6px);
  margin-top:14px;opacity:.7}

/* ===== ARTICLES: GRID ===== */
.wrap{padding:0 6vw}
.posts{display:grid; grid-template-columns: 1fr 1fr; gap:22px; margin:28px 0 46px}
@media (max-width:900px){ .posts{grid-template-columns:1fr} }

.post-card{
  display:grid; grid-template-columns: 1.2fr 1fr; background:#121212; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; overflow:hidden;
}
@media (max-width:700px){ .post-card{grid-template-columns:1fr} }

.pc-media{position:relative; display:block; overflow:hidden}
.pc-media img{width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .5s}
.post-card:hover .pc-media img{transform:scale(1.06)}
.pc-date{
  position:absolute; left:14px; top:14px; display:flex; flex-direction:column; align-items:center;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.28); border-radius:8px; padding:6px 8px;
  font-size:11px; letter-spacing:.08em;
}
.pc-date b{font-size:18px; line-height:1;}

/* right side */
.pc-body{padding:18px 18px 18px 16px; display:flex; flex-direction:column; gap:10px}
.pc-title{font-weight:900; font-size:clamp(18px,3vw,22px); margin:0; text-transform:none}
.pc-meta{color:#bdbdbd; font-size:12px}
.pc-btn{align-self:flex-start; padding:9px 18px; border-radius:999px; background:#fff; color:#121212;
  text-decoration:none; font-weight:800; letter-spacing:.02em}
.pc-btn:hover{filter:brightness(0.9)}

/* ===== CONTACTS: only for articles page ===== */
.only-articles{display:none}
#articles-page.page.active + .only-articles,
#articles-page.page.active ~ .only-articles{ display:block } /* подстраховка для расположения внизу файла */

.articles-contacts{background:#0f0f0f; border-top:1px solid rgba(255,255,255,.12); padding:42px 0}
.ac-wrap{display:grid; grid-template-columns:280px 1fr 360px; gap:28px; align-items:flex-start}
@media (max-width:1000px){ .ac-wrap{grid-template-columns:1fr} }

.ac-left{display:flex; flex-direction:column; align-items:flex-start; gap:12px}
.ac-logo img{width:96px; height:96px; object-fit:cover; border-radius:14px; background:#151515}
.ac-brand{font-weight:900; letter-spacing:.06em}

.ac-mid h2{font-weight:900; margin:0 0 10px}
.ac-list{list-style:none; margin:0 0 12px 0; padding:0}
.ac-list li{margin:6px 0}
.chip{display:inline-flex; gap:10px; align-items:center; padding:10px 14px; border:1px solid rgba(255,255,255,.22);
  border-radius:10px; text-decoration:none; color:#fff; margin-right:10px}
.chip.ghost{background:transparent}

.ac-right{border-left:1px solid rgba(255,255,255,.12); padding-left:24px}
@media (max-width:1000px){ .ac-right{border:none; padding:0} }
.ac-label{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#d0d0d0}
.ac-label.mt{margin-top:10px}
.ac-mail{display:block; font-weight:700; margin:6px 0 10px}
.ac-cta{display:inline-block; margin-top:10px; padding:12px 26px; border-radius:999px; background:#fff; color:#121212;
  font-weight:800; text-decoration:none}
.ac-socials{display:flex; gap:8px; margin-top:12px}
.ac-socials a{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.24); border-radius:10px}


/* ===== ARTICLES PAGE ===== */
.articles-page{background:#0d0d0d}
.articles-hero{
  padding:86px 8vw 36px;
  background: radial-gradient(1200px 380px at 20% -10%, rgba(255,255,255,.05), transparent 55%),
              linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.0));
  border-bottom:1px solid rgba(255,255,255,.12);
}
.articles-hero .ah-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.articles-hero .ah-breadcrumb{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#cfcfcf}
.articles-hero .ah-barcode{opacity:.45;font-size:22px;letter-spacing:.2em}
.articles-hero h1{
  font-family:'Montserrat',sans-serif;font-weight:900;line-height:.96;
  font-size: clamp(34px,7.2vw,72px); margin:0 0 10px;
}
.articles-hero .ah-lead{color:#d3d3d3;max-width:720px}

.articles-wrap{padding:26px 8vw 80px;display:flex;flex-direction:column;gap:18px}

/* строка-пост */
.post-row{
  display:grid; align-items:center;
  grid-template-columns: 220px 160px 1fr;
  gap:22px; padding:14px; background:#111; border:1px solid rgba(255,255,255,.12);
  border-radius:12px; position:relative; overflow:hidden;
}
.post-row::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.02));
  pointer-events:none;
}

/* превью слева */
.post-thumb{
  display:block; width:100%; aspect-ratio:16/9; border-radius:8px; background-size:cover; background-position:center;
  box-shadow:0 6px 26px rgba(0,0,0,.35); transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.post-row:hover .post-thumb{ transform: scale(1.03); }

/* мета по центру */
.post-meta{display:flex; flex-direction:column; gap:6px}
.pm-date{color:#e8e8e8; font-weight:700}
.pm-tags{display:flex; gap:6px; flex-wrap:wrap}
.pm-tags span{
  font-size:12px; color:#cfcfcf; border:1px solid rgba(255,255,255,.18);
  padding:4px 8px; border-radius:999px;
}

/* контент справа */
.post-main{display:flex; align-items:center; justify-content:space-between; gap:20px}
.pm-title{margin:0; font-size: clamp(18px,2.2vw,24px)}
.pm-title a{color:#fff; text-decoration:none}
.pm-title a:hover{text-decoration:underline}

.pm-btn{
  display:inline-block; padding:10px 18px; border-radius:999px;
  border:1px solid #fff; color:#fff; text-decoration:none; font-weight:800;
  transition: background .2s ease, color .2s ease;
}
.pm-btn:hover{ background:#fff; color:#111 }

/* адаптив */
@media (max-width: 960px){
  .post-row{ grid-template-columns: 160px 1fr; gap:14px }
  .post-meta{ order:2; flex-direction:row; align-items:center; gap:10px }
  .post-main{ grid-column:1 / -1; }
}
@media (max-width: 560px){
  .post-row{ grid-template-columns: 1fr; }
  .post-meta{ order:2 }
  .post-main{ flex-direction:column; align-items:flex-start; gap:12px }
  .pm-btn{ width:100%; text-align:center }
}

.articles-hero {
  position: relative;
  min-height: 44vh;
  display: flex;
  align-items: flex-end;
  padding: 86px 8vw 36px;
  background: url("DSC_0583.JPG") center/cover no-repeat;
  border-bottom: 1px solid rgba(255,255,255,.12);
  overflow: hidden; /* чтобы слой не вылезал */
}

.articles-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 380px at 20% -10%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.92) 100%);
  pointer-events: none; /* не мешает кликам */
  z-index: 1;
}

.articles-hero .ah-top,
.articles-hero h1,
.articles-hero .ah-lead {
  position: relative;
  z-index: 2; /* контент поверх градиента */
}


/* Фон */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  inset: 0;
  background: rgba(0,0,0,0.75);
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.3s ease;
}

/* Контент */
.modal-content {
  background: linear-gradient(135deg, #111, #1a1a1a);
  padding: 30px;
  border-radius: 14px;
  text-align: center;
  max-width: 340px;
  width: 90%;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 0 25px rgba(255,255,255,0.1);
  transform: translateY(-20px);
  animation: slideDown 0.35s ease forwards;
  position: relative;
}

/* Крестик */
.close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 28px;
  cursor: pointer;
  color: #fff;
  opacity: 0.7;
}
.close:hover {
  opacity: 1;
  color: #f33;
}

/* Текст */
.modal-lead {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 20px;
}

/* Кнопки */
.modal-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.modal-btn {
  display: block;
  padding: 12px;
  background: linear-gradient(90deg, #ffcc00, #ff6600);
  border-radius: 999px;
  font-weight: bold;
  color: #121212;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.modal-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(255,204,0,0.6);
}

/* Анимации */
@keyframes fadeIn {
  from { background: rgba(0,0,0,0); }
  to { background: rgba(0,0,0,0.75); }
}
@keyframes slideDown {
  to { transform: translateY(0); }
}

.button, .cta {
  cursor: pointer;
}


button.btn-outline {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
  padding: 8px 16px;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border-radius: 6px; /* под твой дизайн */
}

button.btn-outline:hover {
  background: #fff; /* или твой цвет при наведении */
  color: #000;      /* или твой текстовый цвет */
}



/* выровнять все пункты меню по центру по вертикали */
.topbar .nav { 
  display: flex; 
  gap: 26px; 
  align-items: center;        /* ключевая строка */
}


/* NEW FOR PHONES */

/* ===== NAV: базовое (десктоп) ===== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:18px;
  padding:14px 5vw; border-bottom:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(13,13,13,.85) 0%, rgba(13,13,13,.35) 100%);
  backdrop-filter: blur(6px);
}
.brand{display:flex; align-items:center; gap:12px; flex:0 0 auto; min-width:0;}
.brand img{width:28px; height:28px; border-radius:8px;}
.brand .studio-name{font-weight:900; font-size:16px; letter-spacing:.5px; white-space:nowrap;}
.nav{display:flex; gap:26px; margin-left:auto; min-width:0;}
.nav a{color:#e9e9e9; text-decoration:none; font-size:14px; opacity:.85; white-space:nowrap;}
.nav a:hover{opacity:1}

/* Кнопка бургера скрыта на десктопе */
.nav-toggle{display:none}

/* ===== NAV: мобильная версия ===== */
@media (max-width: 900px){
  /* компактнее бренд, чтобы не ехал */
  .brand .studio-name{font-size: clamp(14px, 4vw, 16px);}
  .nav{display:none;}                /* прячем горизонтальное меню */
  .nav-toggle{
    display:inline-flex; margin-left:auto;
    width:38px; height:32px; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.28); border-radius:8px;
    background:transparent;
  }
  .nav-toggle span{
    display:block; width:18px; height:2px; background:#fff; margin:2px 0;
  }

  /* Выезжающая панель меню */
  body.nav-open .nav{
    display:flex;
    position:fixed; top:58px; left:0; right:0;
    flex-direction:column; gap:8px;
    padding:12px 5vw 16px;
    background:#111; border-bottom:1px solid rgba(255,255,255,.14);
  }

  /* Дропдауны внутри мобильного меню: делаем их статичными, столбиком */
  .has-dropdown { position: static; }
  .has-dropdown > .dropdown{
    position: static; display:none; min-width:0;
    background:transparent; border:none; box-shadow:none; padding:0; margin-left:8px;
  }
  .has-dropdown.open > .dropdown{ display:flex; }
  .dropdown a{ padding:8px 0; font-size:14px; }
}



/* бургер по умолчанию скрыт (на десктопе) */
.nav-toggle{ display:none; }

/* красивый бургер */
.nav-toggle{
  background:transparent;border:none;outline:none;cursor:pointer;
  width:38px;height:34px;display:flex;flex-direction:column;justify-content:space-between;
  padding:6px;margin-left:auto;border-radius:6px;
}
.nav-toggle span{
  display:block;height:2px;width:100%;background:#fff;opacity:.9;transition:transform .25s,opacity .25s;
  border-radius:2px;
}
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Мобильное меню */
@media (max-width:768px){
  .topbar{ padding:12px 4vw; }                /* чтобы логотип и бургер поместились */
  .nav-toggle{ display:flex; }                /* показать бургер */
  .nav{                                       /* прячем список навигации по умолчанию */
    position:fixed; left:0; right:0; top:64px; /* под шапкой */
    display:none; flex-direction:column; gap:0;
    background:#111; border-top:1px solid rgba(255,255,255,.12);
    max-height:calc(100vh - 64px); overflow:auto;
    padding:8px 0; z-index:49;
  }
  .nav.open{ display:flex; }

  .nav a{ display:block; padding:14px 18px; font-size:16px; opacity:1; }
  /* дропдауны на мобилке — как обычный список внутри */
  .has-dropdown .dropdown{
    position:static; display:none; border:none; box-shadow:none; padding:0; background:transparent;
  }
  .has-dropdown.open .dropdown{ display:flex; flex-direction:column; }
  .dropdown a{ padding:12px 26px; font-size:15px; }
}



/* Бургер */
.burger{
  display:none; /* на десктопе скрыт */
  width:44px;height:34px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:8px;
  background:transparent;
  padding:6px 8px;
  align-items:center;justify-content:center;
}
.burger .bar{
  display:block;height:2px;width:22px;
  background:#fff;opacity:.9;
  margin:3px 0;transition:transform .2s, opacity .2s;
}
.burger[aria-expanded="true"] .bar:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(5px) rotate(45deg) }
.burger[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }

/* Моб. меню */
.mobile-menu{
  position:fixed; top:60px; /* под топбаром */
  left:0; right:0; bottom:0;
  background:#111;
  border-top:1px solid rgba(255,255,255,.12);
  padding:14px 6vw 28px;
  display:flex; flex-direction:column;
  gap:14px; overflow:auto; z-index:49;
}
.mobile-menu a{
  color:#e6e6e6; text-decoration:none; font-size:16px;
  padding:10px 2px; display:block;
}
.mobile-menu details{ border:1px solid rgba(255,255,255,.18); border-radius:6px; overflow:hidden }
.mobile-menu summary{ list-style:none; padding:12px 14px; cursor:pointer; font-weight:700 }
.mobile-menu details[open] summary{ background:#151515 }
.mobile-menu details a{ padding:10px 14px; border-top:1px solid rgba(255,255,255,.12) }

/* Блокируем прокрутку под меню */
body.no-scroll{ overflow:hidden }

/* Мобильное поведение: скрываем десктоп-меню, показываем бургер */
@media (max-width: 960px){
  .nav{ display:none; }              /* это убирает "На главную" справа */
  .burger{ display:inline-flex; }    /* показываем бургер */
}

/* Чуть-лучше паддинги у топбара на мобилках */
@media (max-width: 960px){
  .topbar{ padding:12px 4vw; }
}



/* по умолчанию моб-меню отключено */
.mobile-menu{ display:none; }

/* открыто только с классом */
.mobile-menu.is-open{
  display:flex;
  position:fixed; top:60px; left:0; right:0; bottom:0;
  background:#111; border-top:1px solid rgba(255,255,255,.12);
  padding:14px 6vw 28px; flex-direction:column; gap:14px;
  overflow:auto; z-index:49;
}

/* десктоп: на всякий пожарный скрыть */
@media (min-width: 961px){
  .mobile-menu{ display:none !important; }
  .nav{ display:flex; }         /* гарантируем показ десктоп-меню */
  .burger{ display:none; }
}

/* кнопка-бургер */
.burger{
  display:none; /* включим на мобилке */
  width:36px;height:28px;border:1px solid rgba(255,255,255,.35);
  border-radius:8px;background:transparent;cursor:pointer;
  margin-left:auto; /* прижмёт вправо между brand и .nav */
  display:none;align-items:center;justify-content:center;gap:4px;
}
.burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* мобильное меню-оверлей */
.mobile-menu{display:none;}
.mobile-menu.is-open{
  display:flex;flex-direction:column;gap:12px;
  position:fixed;inset:60px 0 0 0;
  background:#111;z-index:49;padding:16px 6vw 26px;
  border-top:1px solid rgba(255,255,255,.12);overflow:auto;
}
.mobile-menu a{color:#eee;text-decoration:none;padding:10px 0;display:block}
.mobile-menu details{border-top:1px solid rgba(255,255,255,.12);padding-top:10px;margin-top:8px}
.mobile-menu summary{cursor:pointer;color:#fff;font-weight:700;list-style:none}

/* отключаем прокрутку под меню */
body.no-scroll{overflow:hidden;}

/* правила отображения по брейкпоинту */
@media (max-width:960px){
  .nav{display:none;}        /* прячем десктоп-меню */
  .burger{display:inline-flex;}
}
@media (min-width:961px){
  .mobile-menu{display:none!important;}
  .burger{display:none!important;}
}



.burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
}

.burger .bar {
  width: 25px;
  height: 3px;
  background: #fff;
}

@media (max-width: 900px) {
  .burger {
    display: flex;
  }
  .nav {
    display: none;
  }
  .mobile-menu[hidden] {
    display: none;
  }
  .mobile-menu {
    display: flex;
    flex-direction: column;
    background: #111;
    padding: 10px;
  }
}



/* Бэкдроп */
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.menu-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Мобильное меню с анимацией */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100%;
  background: #111;
  z-index: 100;
  padding: 20px;
  transition: right 0.3s ease;
}

.mobile-menu.open {
  right: 0;
}

/* Блокировка скролла при открытом меню */
body.menu-open {
  overflow: hidden;
}

/* Кнопка бургера поверх всего */
.burger{ background:transparent;border:0;display:none;cursor:pointer; }
.burger .bar{ display:block;width:24px;height:2px;margin:5px 0;background:#fff; }

/* Само меню */
.mobile-menu[hidden]{ display:none !important; }
.mobile-menu{
  position:fixed; inset:64px 0 0 0; /* ниже топбара */
  background:#0f0f0f; z-index:1000; padding:16px;
  display:flex; flex-direction:column; gap:10px;
}
.mobile-menu a, .mobile-menu summary{ color:#fff; text-decoration:none; padding:10px 6px; }

/* Показывать бургер только на узких экранах */
@media (max-width: 900px){
  .burger{ display:block; }
  .topbar .nav{ display:none; } /* прячем десктоп-меню */
}




/* Скрывать [hidden] корректно */
[hidden] { display: none !important; }

/* Блокировка скролла, когда меню открыто */
body.no-scroll { overflow: hidden; }

/* Кнопка-бургер (минимум) */
.burger {
  display: none; /* покажем на мобилках */
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.burger .bar { display:block; width:24px; height:2px; background:#fff; margin:5px 0; }

/* Мобильное меню */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 12px;
}
.mobile-menu > * {
  display: block;
  background: #111;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 12px;
  max-width: 540px;
  margin: 0 auto;
}
.mobile-menu a {
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 8px;
  border-radius:6px;
}
.mobile-menu a:hover { background:#1b1b1b; }

/* Аккордеоны в меню */
.mobile-menu details { border-top:1px solid rgba(255,255,255,.08); padding-top:8px; margin-top:8px; }
.mobile-menu summary { cursor:pointer; padding:10px 8px; color:#fff; font-weight:700; list-style:none; }
.mobile-menu summary::-webkit-details-marker { display:none; }

/* Показать бургер и спрятать десктоп-меню на узких экранах */
@media (max-width: 900px) {
  .burger { display:block; }
  .topbar .nav { display:none; } /* твоя десктопная навигация */
}



/* Кнопка-бургер */
.burger{display:none;gap:6px;background:transparent;border:0;padding:8px;cursor:pointer}
.burger .bar{display:block;width:24px;height:2px;background:#fff;border-radius:2px}
@media (max-width:900px){
  .burger{display:flex}
  .topbar .nav{display:none}          /* прячем десктоп-меню */
}

/* Мобильное меню-панель */
.mobile-menu{
  position:fixed; top:60px; right:0; left:0;
  background:#111; border-top:1px solid rgba(255,255,255,.15);
  display:flex; flex-direction:column; padding:10px 14px; z-index:60;
}
.mobile-menu a{color:#eee; text-decoration:none; padding:12px 8px; display:block}
.mobile-menu details > summary{cursor:pointer; padding:12px 8px; color:#eee; list-style:none}
.mobile-menu[hidden]{display:none !important}



/* Кнопка-бургер (пример) */
.burger {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.burger .bar { width: 24px; height: 2px; background: #fff; }

/* Мобильное меню-оверлей */
.mobile-menu[hidden] { display: none !important; }
.mobile-menu {
  position: fixed; inset: 64px 0 0 0; /* ниже топбара */
  background: rgba(17,17,17,.98);
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  z-index: 60;
}
.mobile-menu a, .mobile-menu summary {
  color: #fff; text-decoration: none; padding: 12px 8px; font-size: 16px;
}
.mobile-menu details { border-top: 1px solid rgba(255,255,255,.12); padding-top: 8px; }




/* ===== Burger button ===== */
.burger{
  display:none; /* покажем только на мобилке */
  position:relative;
  width:30px;height:22px;
  border:0;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;
}
.burger .bar{
  position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:2px;
  transform-origin:center;transition:transform .25s, opacity .2s, top .25s;
}
.burger .bar:nth-child(1){ top:3px; }
.burger .bar:nth-child(2){ top:10px; }
.burger .bar:nth-child(3){ top:17px; }

/* Состояние крестика */
.burger[aria-expanded="true"] .bar:nth-child(1){ top:10px; transform:rotate(45deg); }
.burger[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] .bar:nth-child(3){ top:10px; transform:rotate(-45deg); }

/* ===== Mobile drawer ===== */
.mobile-menu{
  position:fixed; inset:0 auto 0 24%;
  /* панель будет выезжать справа; на большую часть экрана */
  right:0; width:76vw; max-width:420px; height:100vh;
  background:#0f0f0f; border-left:1px solid rgba(255,255,255,.12);
  padding:22px 22px 28px; overflow:auto; z-index:9999;
  transform:translateX(100%); transition:transform .28s ease;
}
.mobile-menu a{
  display:block; color:#fff; text-decoration:none; font-size:18px;
  padding:12px 4px;
}
.mobile-menu details{ margin:8px 0; }
.mobile-menu summary{
  list-style:none; cursor:pointer; font-weight:800; padding:12px 4px; 
}
.mobile-menu summary::-webkit-details-marker{ display:none; }

/* открытое состояние */
.mobile-menu.open{ transform:translateX(0); }

/* ===== Backdrop ===== */
.menu-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:9998;
}
.menu-backdrop.show{ opacity:1; pointer-events:auto; }

/* ===== Responsive: десктоп/мобилка ===== */
@media (max-width: 960px){
  .nav{ display:none; }          /* прячем десктоп-меню */
  .burger{ display:inline-flex; }
}
@media (min-width: 961px){
  /* на десктопе панель не нужна */
  .mobile-menu{ display:none !important; }
  .menu-backdrop{ display:none !important; }
}


/* Скрыть маркеры у summary/details в десктопной навигации */
.nav details,
.nav summary { list-style: none; }

.nav summary::-webkit-details-marker { display: none; } /* Chrome/Safari */
.nav summary::marker { content: ""; }                  /* Firefox/современные */

.nav ul { list-style: none; margin: 0; padding: 0; }   /* на всякий случай */







/* ===== Новая эстетика мобильного меню ===== */
.mobile-menu{
  /* фон — глубокий чёрный с мягким градиентом и лёгким шумом */
  background: radial-gradient(110% 80% at 0% 0%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 55%) #0c0c0c;
  box-shadow: -10px 0 24px rgba(0,0,0,.45);
  border-left: 1px solid rgba(255,255,255,.06);
  padding: 0; /* переносим внутренние отступы в .mm-wrap */
}

.mm-wrap{
  display:flex; flex-direction:column; min-height:100%;
  padding: 28px 24px 24px;
}

/* шапка с логотипом */
.mm-brand{ margin: 8px 0 28px; }
.mm-logo{ width: 140px; height:auto; display:block; }

/* навигация */
.mm-nav{ display:flex; flex-direction:column; gap: 14px; }

.mm-link,
.mm-summary{
  color:#fff; text-decoration:none;
  font-weight:800; letter-spacing:.02em;
  font-size: 28px; line-height:1.15;
  padding: 10px 0;
  position:relative;
}

/* аккуратные разделители */
.mm-link:not(:last-child),
.mm-group:not(:last-child){ border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:14px; }

/* кастомная стрелка у summary */
.mm-summary{ list-style:none; cursor:pointer; }
.mm-summary::-webkit-details-marker{ display:none; }
.mm-summary::after{
  content:""; position:absolute; right:2px; top:50%; translate:0 -50%;
  width:8px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff;
  rotate:45deg; transition:transform .2s ease;
  opacity:.9;
}
.mm-group[open] > .mm-summary::after{ transform: translate(0,-50%) rotate(225deg); }

/* подменю */
.mm-sub{ padding: 10px 0 4px 2px; display:flex; flex-direction:column; gap:10px; }
.mm-sublink{
  color:rgba(255,255,255,.88); text-decoration:none;
  font-weight:600; font-size:16.5px; letter-spacing:.01em;
  padding:6px 0 6px 10px; border-left:2px solid rgba(255,255,255,.12);
  transition:opacity .15s ease, border-color .15s ease, transform .15s ease;
}
.mm-sublink:active{ transform:translateX(2px); }
.mm-sublink:hover{ opacity:.95; border-color:rgba(255,255,255,.22); }

/* Низ */


/* Лёгкая поочерёдная анимация пунктов при открытии */
.mobile-menu.open .mm-link,
.mobile-menu.open .mm-summary{ animation: mmFadeUp .25s ease forwards; opacity:0; transform:translateY(4px); }
.mobile-menu.open .mm-link:nth-child(1){ animation-delay:.06s; }
.mobile-menu.open .mm-group:nth-of-type(1) .mm-summary{ animation-delay:.09s; }
.mobile-menu.open .mm-group:nth-of-type(2) .mm-summary{ animation-delay:.12s; }
.mobile-menu.open .mm-group:nth-of-type(3) .mm-summary{ animation-delay:.15s; }

@keyframes mmFadeUp{
  to{ opacity:1; transform:none; }
}



.mobile-menu .burger{
  position:absolute; top:18px; right:18px;
  z-index:1; /* над контентом меню */
}






/* new css for menu */

/* базово, чтобы паддинги/бордеры считались корректно */
.mobile-menu, .mobile-menu * { box-sizing: border-box; }

/* карточки-группы */
.mm-group{
  margin: 10px 0 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  overflow: hidden;            /* <— чтобы ничего не вылезало за рамку */
}

/* шапка карточки (summary) — как кнопка */
.mm-summary{
  display: flex;
  align-items: center;
  justify-content: space-between;  /* текст слева, стрелка справа */
  gap: 12px;
  padding: 18px 18px;              /* одинаковый внутренний отступ */
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
  list-style: none;
  cursor: pointer;
}
.mm-summary::-webkit-details-marker{ display: none; }

/* аккуратная стрелка внутри рамки */
.mm-summary::after{
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  opacity: .9;
  flex: 0 0 10px;              /* фикс ширины, не прыгать */
}

/* при открытии поворачиваем стрелку */
.mm-group[open] > .mm-summary::after{
  transform: rotate(225deg);
}

/* подменю */
.mm-sub{
  padding: 8px 10px 14px;      /* внутренние отступы */
  display: grid;
  gap: 10px;
}
.mm-sublink{
  display:block;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
}

/* одиночные большие ссылки (не details) */
.mm-link{
  display:block;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
  margin: 4px 0 18px;
}





/* --- BRAND (логотип + подпись) --- */
.mm-brand{
  display:flex; flex-direction:column; align-items:center;
  gap:12px; margin: 6px 0 20px;
}
.mm-logo{ width:120px; height:auto; display:block; }
.mm-title{
  font-weight:800; font-size:18px; letter-spacing:.06em;
  color:rgba(255,255,255,.9);
}

/* --- КАРТОЧКИ ГРУПП (details) --- */
.mm-group{
  margin: 10px 0 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  overflow: hidden; /* ничего не вылезает за рамку */
}

/* Шапка карточки: делаем без flex — стрелка будет absolute */
.mm-summary{
  position:relative;
  padding: 18px 48px 18px 18px; /* место под стрелку справа */
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
  white-space: normal;      /* можно переносить */
  word-break: break-word;   /* длинные слова не выламывают макет */
}
.mm-summary::-webkit-details-marker{ display:none; }

/* Стрелка: аккуратная, внутри рамки */
.mm-summary::after{
  content:"";
  position:absolute; right:16px; top:50%; transform: translateY(-50%) rotate(-45deg);
  width:10px; height:10px;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  opacity:.9;
}
/* При открытии поворачиваем вниз */
.mm-group[open] > .mm-summary::after{
  transform: translateY(-50%) rotate(135deg);
}

/* Подменю */
.mm-sub{
  padding: 8px 10px 14px;
  display: grid;
  gap: 10px;
}
.mm-sublink{
  display:block;
  padding: 12px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:700; font-size:20px;
}

/* Большая одиночная ссылка */
.mm-link{
  display:block;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.2;
  margin: 4px 0 18px;
}





/* Заголовок карточки */
.mm-summary{
  position:relative;
  padding:18px 72px 18px 18px;   /* больше места под стрелку */
  font-weight:800;
  font-size:24px;
  line-height:1.2;
  list-style:none;
  cursor:pointer;
  white-space:normal;            /* перенос разрешён */
  word-break:break-word;
}
.mm-summary::-webkit-details-marker{ display:none; }

/* Стрелка-треугольник ВНИЗ */
.mm-summary::after{
  content:"";
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right:7px solid transparent;
  border-top: 8px solid #fff;    /* маленький caret */
  opacity:.95; pointer-events:none;
}
/* При открытии — caret ВВЕРХ */
.mm-group[open] > .mm-summary::after{
  transform: translateY(-50%) rotate(180deg);
}

/* На очень узких экранах чуть компактнее */
@media (max-width:360px){
  .mm-summary{ font-size:22px; padding:16px 68px 16px 16px; }
}


/* Кнопка-крест в правом верхнем углу панели */
.mm-close{
  position:absolute; top:12px; right:12px;
  width:44px; height:44px;
  border:0; background:transparent; cursor:pointer;
}
.mm-close::before, .mm-close::after{
  content:""; position:absolute; left:50%; top:50%;
  width:22px; height:2px; background:#fff; border-radius:2px;
  transform-origin:center;
}
.mm-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.mm-close::after { transform:translate(-50%,-50%) rotate(-45deg); }




/* Переписываем summary, чтобы текст и стрелка не мешали друг другу */
.mm-summary {
  display: grid;
  grid-template-columns: 1fr 24px; /* текст и отдельная колонка под стрелку */
  align-items: center;
  gap: 12px;
  padding: 18px;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
  white-space: normal;     /* разрешаем перенос */
  word-break: break-word;  /* переносим длинные слова */
}

.mm-summary::-webkit-details-marker {
  display: none;
}

/* Стрелка в отдельной колонке */
.mm-summary::after {
  content: "";
  justify-self: center; /* центрируем в своей колонке */
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #fff;
  opacity: 0.95;
  transition: transform 0.2s ease;
}

.mm-group[open] > .mm-summary::after {
  transform: rotate(180deg);
}


/* Единая высота для всех больших кнопок */
.mm-link,
.mm-summary {
  min-height: 64px;                /* фиксируем минимальную высоту */
  display: grid;
  grid-template-columns: 1fr 24px; /* текст + стрелка */
  align-items: center;             /* вертикальное выравнивание */
  gap: 12px;
  padding: 0 18px;                  /* убираем паддинги сверху/снизу, пусть центровка делает дело */
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  list-style: none;
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
}

.mm-link {
  grid-template-columns: 1fr; /* без стрелки */
  justify-content: center;
}

/* Стрелка у summary */
.mm-summary::after {
  content: "";
  justify-self: center;
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #fff;
  opacity: 0.95;
  transition: transform 0.2s ease;
}
.mm-group[open] > .mm-summary::after {
  transform: rotate(180deg);
}

/* Адаптив под узкие экраны */
@media (max-width: 360px) {
  .mm-link,
  .mm-summary {
    min-height: 58px;
    font-size: 22px;
    grid-template-columns: 1fr 20px;
  }
}



/* ===== компактные карточки, один стиль для ссылок и summary ===== */
.mm-link,
.mm-summary{
  position: relative;
  display: flex;
  align-items: center;          /* вертикальный центр текста */
  gap: 10px;
  padding: 12px 48px 12px 16px; /* слева чуть, справа запас под стрелку */
  min-height: 56px;             /* единая высота */
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  font-weight: 800;
  font-size: 22px;              /* ЧУТЬ меньше — визуально чище */
  line-height: 1.15;
  color: #fff;
  text-decoration: none;
  white-space: normal;          /* разрешаем перенос */
  word-break: break-word;       /* длинные слова не ломают разметку */
}

/* чуть меньше «подушек» между карточками */
.mm-group,
.mm-link { margin: 8px 0 14px; }

.mm-group{ overflow: hidden; border-radius:14px; }
.mm-summary::-webkit-details-marker{ display:none; }

/* аккуратная треугольная стрелка, всегда внутри рамки */
.mm-summary::after{
  content:"";
  position:absolute; right:16px; top:50%;
  transform: translateY(-50%);  /* идеально по центру по вертикали */
  width:0; height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:7px solid #fff;    /* caret вниз */
  opacity:.95; pointer-events:none;
  transition: transform .2s ease;
}
.mm-group[open] > .mm-summary::after{
  transform: translateY(-50%) rotate(180deg); /* caret вверх */
}

/* подменю — компактно */
.mm-sub{
  padding: 8px 10px 12px;
  display: grid; gap: 8px;
}
.mm-sublink{
  display:block;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:700; font-size:18px; line-height:1.2;
}

/* бренд сверху — компактнее, чтобы не висел «в воздухе» */
.mm-brand{ align-items:center; gap:8px; margin: 2px 0 12px; }
.mm-logo{ width:92px; }
.mm-title{ font-size:17px; letter-spacing:.06em; }




/* Убираем двойные рамки: рамка только у самой "кнопки", а не у details */
.mm-group{
  margin: 8px 0 14px;
  border: 0;              /* <— раньше тут была рамка, из-за неё и виделась «вторая» */
  background: transparent;
}

/* Кнопка-голова карточки как grid: текст | стрелка */
.mm-summary{
  display: grid;
  grid-template-columns: 1fr 28px;  /* текст + фиксированная колонка под стрелку */
  align-items: center;
  gap: 12px;

  padding: 12px 16px;               /* компактные отступы */
  min-height: 56px;                  /* одинаковая высота у всех */
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.04);

  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  color: #fff;
  list-style: none;
  cursor: pointer;

  white-space: normal;               /* разрешаем перенос */
  overflow-wrap: anywhere;           /* длинные слова не ломают сетку */
}
.mm-summary::-webkit-details-marker{ display:none; }

/* Стрелка — ДИТЯ grid, сидит во 2-й колонке, строго по центру */
.mm-summary::after{
  content:"";
  grid-column: 2; grid-row: 1;
  justify-self: center; align-self: center;

  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right:7px solid transparent;
  border-top: 8px solid #fff;       /* caret вниз */
  opacity:.95;
  transition: transform .2s ease;
}
.mm-group[open] > .mm-summary::after{
  transform: rotate(180deg);        /* caret вверх при открытии */
}

/* Подменю компактно */
.mm-sub{
  padding: 8px 10px 12px;
  display: grid; gap: 8px;
}
.mm-sublink{
  display:block;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:700; font-size:18px; line-height:1.2;
}

/* Одиночная большая ссылка без стрелки — та же высота и стиль */
.mm-link{
  display:flex; align-items:center;
  padding:12px 16px; min-height:56px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  font-weight:800; font-size:22px; line-height:1.15;
  color:#fff; text-decoration:none;
  white-space:normal; overflow-wrap:anywhere;
  margin: 8px 0 14px;
}

/* На очень узких экранах чуть компактнее */
@media (max-width: 360px){
  .mm-summary, .mm-link{ min-height:52px; font-size:20px; }
  .mm-summary{ grid-template-columns: 1fr 24px; }
  .mm-summary::after{ border-left-width:6px; border-right-width:6px; border-top-width:7px; }
}

/* Лого в шапке мобильного меню — фиксированный размер */
#mobileMenu .mm-brand {
  display:flex; flex-direction:column; align-items:center;
  gap:8px; margin: 2px 0 12px;
}
#mobileMenu .mm-brand .mm-logo{
  width:96px !important;
  height:auto !important;
  max-width:96px !important;
  max-height:96px !important;
  object-fit:contain;
  display:block;
}

/* Перебиваем возможную глобалку img{width:100%} ТОЛЬКО для блока с логотипом */
#mobileMenu .mm-brand img{ width:96px !important; height:auto !important; }




/* бля попробую убрать прокрутку и ширину починить на мобилках. Ебал я в рот ваши телефоны */


@media (max-width: 900px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Сбрасываем опасные отступы на мобилках */
  .articles-header {
    margin-left: 0;
    padding: 0 6vw;
  }

  /* Любые большие картинки вписываем */
  img, video {
    max-width: 100%;
    height: auto;
  }

  /* Перестраховка для гридов/секций */
  .hero,
  .services-hero,
  .services-grid,
  .page-hero,
  .page-body,
  .articles-section,
  .articles-grid,
  .releases-grid {
    overflow-x: hidden;
  }
}








/* ===== FIX: услуги не должны расползаться на мобилках ===== */
@media (max-width: 820px) {

  /* Глобально — чтобы бордеры/паддинги не раздували ширину */
  *, *::before, *::after { box-sizing: border-box; }

  /* Заголовочный блок с фото: делаем колонкой и ничего шире 100% */
  .services-section .services-hero{
    display: block;            /* на случай, если где-то стоит flex row */
    padding: 0 16px;
  }
  .services-section .services-hero .right img{
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
  }

  /* Сетка карточек на главной — одна колонка, без боковых сдвигов */
  .services-section .services-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 16px;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Сама карточка — не шире экрана */
  .services-section .services-grid .svc-card{
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Внутри карточки: вместо 2 колонок — в столбик */
  .services-section .svc-card .svc-top{
    display: block !important;          /* перебиваем возможный grid/flex */
  }
  .services-section .svc-card .svc-price,
  .services-section .svc-card .svc-body{
    width: 100%;
  }

  /* Убираем вертикальный разделитель между колонками, если он есть */
  .services-section .svc-card .svc-top::before,
  .services-section .svc-card .svc-top::after{
    display: none !important;
    content: none !important;
  }
  .services-section .svc-card .svc-body{
    border-left: 0 !important;          /* на случай бордера-делителя */
    padding-left: 0 !important;
  }

  /* Кнопки внизу пусть переносятся и не распирают ширину */
  .services-section .svc-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Перестраховка: ни одна картинка/видео не шире контейнера */
  .services-section img, 
  .services-section video{ 
    max-width: 100%; 
    height: auto; 
  }
}



/* ===== УСЛУГИ И ЦЕНЫ — мобильная компоновка без "сжатия" ===== */
@media (max-width: 820px){

  /* Отделяем секцию от соседей */
  .services-section{
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* Хедер секции: делаем аккуратную колонку с зазором */
  .services-section .services-hero{
    display: grid;                 /* вместо block: даёт управляемый gap */
    grid-template-columns: 1fr;
    row-gap: 16px;                 /* расстояние между заголовком и фото */
    padding: 0 16px;
    margin: 0;                     /* без наружных смещений */
  }
  .services-section .services-hero .left{
    margin: 0;                     /* на всякий обнулим «старые» отступы */
  }
  .services-section .services-hero .right{
    position: relative;
    margin: 0;
  }
  .services-section .services-hero .right img{
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 12px;           /* чтобы картинка не выглядела "прилипшей" */
  }

  /* Отступ между хедером и сеткой карточек */
  .services-section .services-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 0 16px;
    margin-top: 16px;              /* <- добавляем воздух сверху */
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Сама карточка — нормальные внутренние отступы и радиусы */
  .services-section .services-grid .svc-card{
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 14px;                 /* если в десктопе паддинги были на внутренних обёртках */
    border-radius: 16px;
  }

  /* Внутри карточки не две колонки, а столбик */
  .services-section .svc-card .svc-top{
    display: block !important;
  }
  .services-section .svc-card .svc-price,
  .services-section .svc-card .svc-body{ width:100%; }

  /* Отступы внутри текста/кнопок, чтобы не "липло" к краям */
  .services-section .svc-card .svc-body h3{ margin-top: 10px; margin-bottom: 8px; }
  .services-section .svc-card .svc-actions{
    display:flex; flex-wrap:wrap; gap:10px; margin-top: 10px;
  }

  /* Убираем вертикальный делитель, если рисовался псевдоэлементом/бордером */
  .services-section .svc-card .svc-top::before,
  .services-section .svc-card .svc-top::after{ display:none !important; content:none !important; }
  .services-section .svc-card .svc-body{ border-left:0 !important; padding-left:0 !important; }
}



/* ==== Мобильные правки секции "Услуги и цены" ==== */
@media (max-width: 820px){

  /* Больше воздуха сверху секции */
  .services-section{
    margin-top: 28px;              /* отрываем от предыдущего блока */
  }

  /* Карточка: гарантируем столбик и нормальные отступы */
  .services-section .svc-card{
    padding: 14px;
  }
  .services-section .svc-card .svc-top{
    display: block !important;
  }
  .services-section .svc-card .svc-price,
  .services-section .svc-card .svc-body{
    width: 100%;
  }

  /* Кнопки — переносятся и не упираются в подписи */
  .services-section .svc-card .svc-actions{
    display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;
  }

  /* ВОТ ГЛАВНОЕ: код релиза выводим обычным блоком ниже кнопок */
  .services-section .svc-code{
    position: static !important;   /* убираем абсолют */
    display: block;
    margin-top: 10px;              /* отступ от кнопок */
    opacity: .6;
  }
}

@media (max-width: 820px) {
  .services-section h2 {
    margin-top: 36px; /* регулируй значение под вкус */
  }
}



/* ===== MOBILE FIX: секция "Все услуги" ===== */
@media (max-width: 992px){
  /* базовая защита от переполнений именно в секции услуг */
  #services-page, #services-page * { box-sizing: border-box; }
  #services-page img, #services-page video, #services-page svg { max-width: 100%; height: auto; }
  #services-page { overflow-x: hidden; }
  #services-page .container { padding-inline: 16px; }

  /* список карточек = одна колонка */
  #services-page .cards{
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  /* каждая карточка не шире экрана, аккуратные отступы */
  #services-page .svc-card{
    width: 100%;
    max-width: 100%;
    margin-inline: 0 !important;
    padding: 16px;
    border-radius: 16px;
    overflow: hidden;
  }

  /* внутри карточки: левая цена + правая часть встают столбиком */
  #services-page .svc-top{
    display: grid;
    grid-template-columns: 1fr;   /* было 2 — делаем 1 */
    gap: 12px;
    width: 100%;
    max-width: 100%;
  }

  /* убираем любые случайные фикс-ширины */
  #services-page .svc-price,
  #services-page .svc-body,
  #services-page .svc-card > *,
  #services-page .svc-top > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* кнопки не шире контейнера */
  #services-page .svc-actions .btn-outline,
  #services-page .svc-actions .btn-ghost {
    width: 100%;
    text-align: center;
  }
}



@media (max-width: 992px){
  /* карточка = столбик */
  #services-page .svc-card{
    display: flex;
    flex-direction: column;
  }

  /* кнопки одна под другой, с зазором */
  #services-page .svc-actions{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* код карточки – всегда снизу, не абсолютный */
  #services-page .svc-code{
    position: static !important;
    float: none !important;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: 12px;
    opacity: .7;
    align-self: flex-start; /* не растягивать на всю ширину */
  }

  /* на всякий случай снимаем абсолют у внутренних блоков */
  #services-page .svc-top,
  #services-page .svc-body{
    position: static !important;
  }
}



/* === MOBILE FIX: "Все статьи" — заголовок и раскладка === */
@media (max-width: 992px){
  #articles-page { overflow-x: hidden; }

  /* сам хидер со статьями */
  #articles-page .articles-hero{
    padding: 24px 16px 28px;
    display: block;                 /* вместо возможной сетки/флекса */
  }

  /* СБРОСИМ всё, что делает заголовок узким/вертикальным */
  #articles-page .articles-hero h1{
    display: block !important;
    width: auto !important;
    inline-size: auto !important;
    max-inline-size: 100% !important;

    writing-mode: horizontal-tb !important;
    transform: none !important;
    white-space: normal !important;
    word-break: keep-all !important;     /* переносы только по пробелам и <br> */
    overflow-wrap: normal !important;

    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.05;
    letter-spacing: .5px;
    margin: 0 0 10px 0;
    text-align: left;
    hyphens: auto;
    text-wrap: balance;                  /* красиво балансирует строки (если поддерживается) */
  }

  /* подпись справа — под заголовком, на всю ширину */
  #articles-page .articles-hero .ah-lead{
    margin-top: 6px;
    max-width: 100%;
  }

  /* на всякий случай: служебная строка и декор не «толкают» заголовок */
  #articles-page .ah-top,
  #articles-page .ah-barcode{
    max-width: 100%;
    overflow: hidden;
  }
}



@media (max-width: 992px){
  #articles-page .articles-hero{
    padding-top: 150px;  /* регулируй значение под вкус */
  }
}






/* === COOKIE BANNER === */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  background: rgba(0,0,0,0.88);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 14px 16px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10000;
  animation: fadeIn .4s ease;
}

.cb-content a {
  color: #fff;
  text-decoration: underline;
  opacity: .9;
}

.cb-btn {
  align-self: flex-end;
  padding: 8px 22px;
  border-radius: 999px;
  font-weight: 700;
  background: linear-gradient(180deg, #fff, #dcdcdc);
  color: #121212;
  border: none;
  cursor: pointer;
  transition: background .25s;
}
.cb-btn:hover { background: linear-gradient(180deg,#f5f5f5,#bdbdbd); }

/* таймер */
.cb-timer {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,.15);
  border-radius: 3px;
  overflow: hidden;
}
.cb-timer span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,#ff7a1a,#ffb15a);
  animation: timerFill 5s linear forwards;
}

/* Анимации */
@keyframes fadeIn { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:none;} }
@keyframes timerFill { from{width:0%} to{width:100%} }

@media(max-width:480px){
  .cookie-banner{ font-size:13px; padding:12px 12px 18px; }
}






/* ===== CUSTOM BUNDLE (Calculator) ===== */
.custom-bundle-section{
  padding: 56px 8vw 40px;
  background: #0d0d0d;
  border-top: 1px solid rgba(255,255,255,.10);
}
.custom-bundle-wrap{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 980px){
  .custom-bundle-wrap{ grid-template-columns: 1fr; gap: 28px; }
}

.blur-reveal{
  font: 900 clamp(28px,6vw,64px)/1 'Montserrat',sans-serif;
  letter-spacing: .02em;
  margin: 0 0 12px;
  position: relative;
  display: inline-block;
  filter: blur(10px);
  opacity: 0;
  transform: translateY(26px);
  will-change: filter, transform, opacity;
}
.blur-reveal.revealed{
  filter: blur(0);
  opacity: 1;
  transform: translateY(0);
  transition: filter .7s ease, opacity .7s ease, transform .7s ease;
}
.cb-lead{
  color: #cfcfcf;
  margin: 8px 0 24px;
  max-width: 60ch;
}

.bundle{
  border: 1px solid rgba(255,255,255,.16);
  background: #121212;
  border-radius: 10px;
  padding: 18px;
}
.bundle-row{ display:flex; gap: 16px; align-items: center; margin: 10px 0; }
.bundle-label{ min-width: 220px; font-weight: 800; letter-spacing: .02em; }
.bundle-field{ display:flex; align-items:center; flex-wrap: wrap; gap: 12px; }
.bundle-sep{ border:0; height:1px; background:rgba(255,255,255,.12); margin: 16px 0; }

#hours{
  width: 100px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2);
  background:#0f0f0f; color:#fff; font-weight: 700; text-align: center;
}
.hint{ color:#bdbdbd; font-size: 12px; }

.switch{ position: relative; display: inline-block; width: 52px; height: 28px; }
.switch input{ display:none; }
.slider{
  position:absolute; inset:0; background:#2a2a2a; border-radius:999px; transition: .25s;
}
.slider::before{
  content:""; position:absolute; width:22px; height:22px; left:4px; top:3px; background:#fff; border-radius:50%;
  transition:.25s;
}
.switch input:checked + .slider{ background:#fff; }
.switch input:checked + .slider::before{ transform: translateX(24px); background:#0d0d0d; }

.extras{ gap: 16px; }
.check{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.check input{ transform: scale(1.2); }

.bundle-total{
  display:flex; align-items: center; justify-content: space-between; gap: 20px;
}
.sum-title{ font-weight:900; letter-spacing:.02em; }
.sum-vals{ text-align: right; }
.sum-line{ display:flex; align-items:center; gap: 16px; }
.sum-line strong{ font-size: 1.6rem; }
.sum-muted{ color:#bdbdbd; font-size:12px; margin-top:4px; }

.bundle-cta{ margin-top: 12px; display:flex; justify-content:flex-end; }
.cta-btn{
  padding: 12px 20px; border:1px solid #fff; background:#fff; color:#0d0d0d; border-radius: 999px;
  font-weight: 900; letter-spacing: .02em; cursor:pointer;
}
.cta-btn:hover{ filter: brightness(1.05); }

/* Right: circular spinning text */
.cb-right{ display:flex; align-items:center; justify-content:center; }
.circle-spin{
  width: 260px; height: 260px; border-radius: 50%;
  display:grid; place-items:center; position:relative;
  background: radial-gradient(ellipse at 60% 40%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%);
}
.circle-svg{ width: 220px; height: 220px; }
.circle-text{
  font: 900 16px/1 'Montserrat', sans-serif;
  fill: #fff;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.circle-spin::after{
  content:""; position:absolute; inset: 0;
  border:1px solid rgba(255,255,255,.16); border-radius:50%;
}

/* Бесконечное вращение — скорость можно менять CSS-переменной */
.circle-spin{ --speed: 18s; }
.circle-svg{ will-change: transform; }

/* тонкая адаптация */
@media (max-width:560px){
  .bundle-label{ min-width: 160px; }
}



/* ===== CUSTOM BUNDLE v2 (UI как на макете) ===== */
.custom-bundle-section{
  padding:64px 0 56px;     /* секция без боковых отступов */
  background:#0c0c0c;
}
.custom-bundle-wrap{
  padding: 0 8vw;          /* как .services-grid */
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:48px;
  align-items:start;
}
.blur-reveal{
  font: 900 clamp(32px,6.8vw,84px)/1 'Montserrat',sans-serif;
  letter-spacing:.02em; margin:0 0 12px;
  filter: blur(14px); opacity:0; transform: translateY(28px);
  will-change: filter, transform, opacity;
  background: linear-gradient(180deg,#fff,#cfcfcf 65%,#bdbdbd);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-transform: uppercase;
}
.blur-reveal.revealed{ filter: blur(0); opacity:1; transform:translateY(0); transition: all .8s ease; }

.cb-lead{ color:#cfcfcf; margin:8px 0 26px; max-width:70ch; }
.cb-lead strong{ color:#fff; }
.cb-lead em{ color:#dcdcdc; font-style: normal; }

.bundle--card{
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border-radius:18px; padding:22px; box-shadow: 0 10px 30px rgba(0,0,0,.25) inset;
}

.bundle{ }
.bundle-row{ margin:16px 0; }
.bundle-row--slider{ margin-top:6px; }

.bundle-row-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.bundle-label{ font-weight:900; letter-spacing:.02em; }
.price-unit{ color:#bdbdbd; font-weight:700; }

.range-wrap{ padding: 8px 2px 0; }
#hoursRange{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px;
  background: linear-gradient(90deg,#fff,#dcdcdc); outline:none;
}
#hoursRange::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
  background:#fff; border:2px solid #0c0c0c; box-shadow: 0 2px 12px rgba(0,0,0,.45);
  cursor:pointer; margin-top:-10px;
}
#hoursRange::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%; background:#fff; border:2px solid #0c0c0c; cursor:pointer;
}
.range-scale{ display:flex; justify-content:space-between; color:#9e9e9e; font-weight:700; font-size:12px; padding:6px 2px 0; }

.hours-readout{ margin-top:8px; font-weight:900; color:#fff; }

.included-pill{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
  border-radius:999px; background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16); color:#e8e8e8; font-weight:800;
}

.hint{ color:#a8a8a8; font-size:12px; font-weight:700; }

.pills{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
.pill{
  display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
  color:#fff; font-weight:800; cursor:pointer; transition: transform .12s ease, background .2s ease;
}
.pill:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }
.pill[aria-pressed="true"]{ background:#fff; color:#0c0c0c; border-color:#fff; }
.pill .pill-price{ color:currentColor; opacity:.8; font-weight:900; }

.bundle-total{ display:grid; grid-template-columns: 1fr auto; align-items:center; gap:16px; margin-top:16px; }
.sum-caption{ color:#bdbdbd; font-weight:800; }
.sum-value{ font: 900 clamp(26px,4.5vw,40px)/1 'Montserrat',sans-serif; }
.bundle-cta{ grid-column: 1 / -1; display:flex; justify-content:flex-end; }

.cta-btn{
  padding:12px 22px; border:1px solid #fff; background:#fff; color:#0c0c0c;
  border-radius:999px; font-weight:900; letter-spacing:.02em; cursor:pointer;
  box-shadow: 0 8px 24px rgba(255,255,255,.08);
}
.cta-btn:hover{ filter:brightness(1.06); }

/* Right block */
.cb-right{ display:flex; align-items:center; justify-content:center; }
.circle-spin{
  position:relative; width:320px; height:320px; display:grid; place-items:center;
}
.circle-svg{ width: 320px; height:320px; animation: spin var(--speed,18s) linear infinite; }
.circle-text{
  font: 900 18px/1 'Montserrat', sans-serif;
  fill:#fff; letter-spacing:.18em; text-transform:uppercase;
}
.circle-core{
  position:absolute; width:120px; height:120px; border-radius:50%;
  display:grid; place-items:center; background: radial-gradient(circle at 50% 50%, #eee, #bbb);
  color:#0c0c0c; font: 900 28px/1 'Montserrat', sans-serif;
  box-shadow: inset 0 0 0 8px #0c0c0c, 0 10px 30px rgba(0,0,0,.45);
}
.circle-hint{
  position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  color:#9d9d9d; font-size:12px;
}
.circle-spin:hover .circle-svg{ animation-duration: 4.5s; }

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width:560px){
  .bundle--card{ padding:18px; }
  .included-pill{ font-size:14px; }
}




/* === FIX: выравнивание "Дополнительные" + "выбери нужное" === */

/* Вариант 1: когда в разметке есть .bundle-row-head */
.bundle .bundle-row .bundle-row-head{
  display:grid !important;
  grid-template-columns: 220px 1fr;    /* слева лейбл фикс. ширины, справа подсказка */
  align-items:baseline;
  column-gap:14px;
}
.bundle .bundle-row .bundle-row-head .hint{
  justify-self:end;
  white-space:nowrap;
  transform:translateY(1px);
}

/* Вариант 2 (fallback): когда .bundle-label и .hint просто идут подряд в .bundle-row */
.bundle .bundle-row > .bundle-label + .hint{
  margin-left:auto;                 /* уезжает вправо в той же строке */
  white-space:nowrap;
  transform:translateY(1px);
  display:inline-block;
}

/* Узкие экраны: ставим в столбик и прижимаем подсказку влево */
@media (max-width: 720px){
  .bundle .bundle-row .bundle-row-head{
    grid-template-columns: 1fr !important;
    row-gap:6px;
  }
  .bundle .bundle-row .bundle-row-head .hint{
    justify-self:start;
    transform:none;
  }
  .bundle .bundle-row > .bundle-label + .hint{
    margin-left:0;
    display:block;
    transform:none;
    margin-top:6px;
  }
}

/* === Горизонтальная строка: "Дополнительные | выбери нужное | [пилюли]" === */

.bundle-row.extras-row{
  display:flex !important;
  align-items:center;
  flex-wrap:wrap;            /* если не влезает — перенос */
  gap:18px;                  /* расстояние между элементами */
}

.bundle-row.extras-row .bundle-label{
  flex:0 0 auto;
  font-weight:900;
}

.bundle-row.extras-row .hint{
  flex:0 0 auto;
  white-space:nowrap;
  font-size:13px;
  color:#aaa;
}

.bundle-row.extras-row .pills{
  flex:1 1 auto;
  display:flex;
  gap:12px;
  flex-wrap:wrap;            /* только сами пилюли могут переноситься */
  margin:0;
}

/* на очень узких экранах сваливаемся в столбик */
@media(max-width:720px){
  .bundle-row.extras-row{
    flex-direction:column;
    align-items:flex-start;
    gap:8px 0;
  }
  .bundle-row.extras-row .pills{
    width:100%;
    justify-content:flex-start;
  }
}

/* === Одна линия: "Дополнительные | выбери нужное | [пилюли]" === */

/* 1) Делаем саму строку двухколоночной: слева — лейбл+хинт, справа — пилюли */
.bundle .bundle-row:has(.pills){
  display: grid !important;
  grid-template-columns: auto 1fr;   /* слева — контент по ширине, справа — оставшееся */
  align-items: center;
  column-gap: 18px;
}

/* 2) Лейбл и подсказку склеиваем в одну строку и поджимаем расстояние */
.bundle .bundle-row:has(.pills) .bundle-row-head{
  display: inline-flex !important;
  align-items: baseline;
  gap: 12px;               /* подгони, если нужно ближе/дальше */
  white-space: nowrap;     /* не переносить "выбери нужное" */
  margin: 0;               /* убираем внешние отступы, чтобы не роняли строку */
}

/* 3) Пилюли тянутся вправо и могут ПЕРЕНОСИТЬСЯ, не трогая левую часть */
.bundle .bundle-row:has(.pills) .pills{
  display: flex !important;
  flex-wrap: wrap;         /* при нехватке места переносятся пилюли, не лейбл/хинт */
  gap: 12px;
  justify-content: flex-start;
  margin: 0;               /* чтобы не ломали высоту первой строки */
}

/* 4) Мобилка — всё в столбик аккуратно */
@media (max-width: 720px){
  .bundle .bundle-row:has(.pills){
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .bundle .bundle-row:has(.pills) .bundle-row-head{
    white-space: normal;   /* можно переносить на телефоне */
  }
}

/* ===== PRESETS (Lite/Plus/Pro) ===== */
.presets-row{ margin-top: 8px; }
.presets{
  display:flex; flex-wrap:wrap; gap:12px;
}
.preset{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:12px 16px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  cursor:pointer; transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.preset:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }
.preset:active{ transform: translateY(0); }
.preset .preset-name{ font-weight:900; }
.preset .preset-desc{ color:#bdbdbd; font-size:12px; margin-top:2px; }
.preset.is-active{
  background:#fff; color:#0c0c0c; border-color:#fff;
}

/* ===== ПРУЖИНКА ДЛЯ ПИЛЮЛЬ (extra) ===== */
@keyframes pill-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.pill.bump, .preset.bump {
  animation: pill-pop .22s cubic-bezier(.2,.8,.2,1);
}

/* чётче состояние выбранной пилюли */
.pill[aria-pressed="true"]{ background:#fff; color:#0c0c0c; border-color:#fff; }

/* (если ещё не добавлял) горизонтальная линия extras — оставляем твои текущие правила */

/* Preset buttons — читаемость */
.preset{ color:#fff; }                       /* базовый цвет текста белый */
.preset .preset-name{ color:#fff; }
.preset .preset-desc{ color:#cfcfcf; }

.preset.is-active{
  background:#fff; color:#0c0c0c; border-color:#fff;
}
.preset.is-active .preset-name{ color:#0c0c0c; }
.preset.is-active .preset-desc{ color:#333; }



/* Preset buttons — читаемые цвета */
.preset{ color:#fff; }
.preset .preset-name{ color:#fff; }
.preset .preset-desc{ color:#cfcfcf; }
.preset.is-active{
  background:#fff; color:#0c0c0c; border-color:#fff;
}
.preset.is-active .preset-name{ color:#0c0c0c; }
.preset.is-active .preset-desc{ color:#333; }


/* --- ВЫКЛЮЧАЕМ CSS-анимацию у круга (чтобы не конфликтовала с JS) --- */
.circle-svg{ animation: none !important; }
.circle-spin:hover .circle-svg{ animation: none !important; }

/* --- Цвета пресетов (чтобы названия не были тёмными) --- */
.preset{ color:#fff; }
.preset .preset-name{ color:#fff; font-weight:900; }
.preset .preset-desc{ color:#cfcfcf; font-size:12px; }
.preset.is-active{
  background:#fff; color:#0c0c0c; border-color:#fff;
}
.preset.is-active .preset-name{ color:#0c0c0c; }
.preset.is-active .preset-desc{ color:#333; }

/* микро-анимация на клик (если уже есть — можно не дублировать) */
@keyframes pill-pop{ 0%{transform:scale(1)}50%{transform:scale(1.06)}100%{transform:scale(1)} }
.pill.bump,.preset.bump{ animation:pill-pop .22s cubic-bezier(.2,.8,.2,1); }





















/* ===== Tilted Card (releases) ===== */
.tilt-card {
  position: relative;
  perspective: 900px;
  display: grid;
  place-items: center;
  width: var(--tc-container-w, 300px);
  height: var(--tc-container-h, 300px);
}

.tilt-card__inner {
  position: relative;
  width: var(--tc-image-w, 300px);
  height: var(--tc-image-h, 300px);
  transform-style: preserve-3d;
  will-change: transform;
}

.tilt-card__img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%; height: 100%;
  border-radius: 16px;
  transform: translateZ(0);
}

.tilt-card__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(30px);
  z-index: 2;
}

.tilt-card__tooltip {
  pointer-events: none;
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  background:#fff; color:#2d2d2d;
  font-size: 10px; padding: 4px 10px;
  border-radius: 4px;
  opacity: 0; z-index: 3;
  will-change: transform, opacity;
}

.tilt-card__mobile-note {
  position: absolute; top: 10px;
  font-size: 12px; opacity: .9;
  display: none; color:#fff;
}

@media (max-width: 640px){
  .tilt-card__mobile-note { display: block; }
  .tilt-card__tooltip { display: none; }
}

/* опционально: сетка релизов — чтобы карточки красиво становились */
.releases-grid .tilt-card {
  width: 100%;
  --tc-container-w: 100%;
  --tc-image-w: 100%;
  --tc-container-h: 300px;   /* подгони под свой ряд */
  --tc-image-h: 300px;
}


/* Releases grid — комфортные отступы */
.releases-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;                /* было слишком близко */
}

/* Карточка */
.tilt-card{
  --tc-radius: 18px;
  border-radius: var(--tc-radius);
}
.tilt-card__img{ border-radius: var(--tc-radius); }

/* НОВЫЙ ЛЕЙБЛ (вместо бегущего tooltip) */
.tilt-card__label{
  position:absolute;
  top: 12px; left: 12px;
  z-index:3;
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 12px;
  color:#fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
  pointer-events: none;           /* чтобы клик проходил на карточку */
  opacity: 1;                     /* всегда видно, как на примере */
}

/* старый tooltip — на всякий скрываем */
.tilt-card__tooltip{ display:none !important; }

/* лёгкий подскок картинки при ховере уже есть в JS; тут — плавность */
.tilt-card__inner{ transition: transform .18s ease; }



/* Скрыть старые названия у релизов, когда используем tilt-card */
.releases-grid .release .release-title{ display:none !important; }

/* Пилюля-лейбл: по умолчанию тёмное стекло (видно на светлых обложках) */
.tilt-card__label{
  position:absolute; top:12px; left:12px; z-index:3;
  padding:6px 12px; border-radius:12px; font-weight:800; font-size:12px;
  color:#fff; background: rgba(12,12,12,.60);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  pointer-events:none;
}

/* Светлая тема (если обложка очень тёмная) — включается через data-label-theme="light" */
.tilt-card__label--light{
  background: rgba(255,255,255,.88);
  color:#111;
  border:1px solid rgba(255,255,255,.9);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}


/* Спрятать старые заголовки релизов в этой секции при использовании tilt-card */
.releases-grid .release-title,
.tilt-card .release-title {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}






/* ===== PROMO MODAL: EXCLUSIVE BEAT (Lightning) ===== */

/* Оверлей */
.promo-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;

  display: none;              /* управляем через JS */
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,0.05), transparent 55%),
    radial-gradient(circle at 90% 100%, rgba(255,255,255,0.04), transparent 55%),
    rgba(0,0,0,0.94);
  backdrop-filter: blur(18px) saturate(1.2);

  pointer-events: none;
  opacity: 0;
}

/* открытое состояние */
.promo-modal.is-open {
  pointer-events: auto;
  animation: promoOverlayIn .45s ease forwards;
}

/* когда начинаем закрывать */
.promo-modal.is-open.is-closing {
  animation: promoOverlayOut .35s ease forwards;
}

/* Карточка */

.promo-card {
  position: relative;
  width: min(540px, 94vw);
  padding: 26px 26px 22px;
  border-radius: 22px;
  overflow: hidden;

  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,0.16), transparent 55%),
    linear-gradient(135deg, #050505, #111111);
  border: 1px solid rgba(255,255,255,0.26);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.95),
    0 0 40px rgba(255,255,255,0.09);

  transform-origin: center;
  opacity: 0;
}

/* Вход: 3D pop + blur */
.promo-modal.is-open .promo-card {
  animation: promoEnter .6s cubic-bezier(0.19, 1, 0.22, 1.05) forwards;
}

/* Выход: схлопывание вниз */
.promo-modal.is-open.is-closing .promo-card {
  animation: promoExit .4s cubic-bezier(0.4, 0, 0.8, 0.8) forwards;
}

/* Световой след ("молния") внутри карточки – мягкий, без границ */
.promo-card::before {
  content: "";
  position: absolute;
  inset: -55%;
  background: linear-gradient(
    120deg,
    transparent 35%,
    rgba(255, 214, 0, 0.55) 50%,
    transparent 65%
  );
  filter: blur(32px);
  opacity: 0.45;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateX(-8%);
  animation: promoStrike 8s ease-in-out infinite;
}

/* Контент поверх */
.promo-body {
  position: relative;
  z-index: 1;
  color: #f5f5f5;
}

/* Крестик */

.promo-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.8);
  color: #ffffff;
  font-size: 18px;
  line-height: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0.9;
  transition: background .18s, opacity .18s, transform .18s, box-shadow .18s;
  z-index: 2;
}

.promo-close:hover {
  opacity: 1;
  background: #ffffff;
  color: #111;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 14px rgba(255,255,255,0.7);
}

/* Чип, заголовок, список, кнопки — как были */
.promo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e5e5e5;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  margin-bottom: 16px;
}

.promo-chip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd600 0%, #ffb800 55%, #806400 100%);
  box-shadow: 0 0 12px rgba(255,214,0,0.8);
}

.promo-title {
  font-family: 'Montserrat', sans-serif;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.promo-title-top {
  display: block;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: .16em;
}

.promo-title-price {
  display: inline-block;
  margin-top: 6px;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: .2em;
  padding: 4px 12px 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff, #dcdcdc);
  color: #111111;
  box-shadow:
    0 0 18px rgba(0,0,0,1),
    0 0 32px rgba(255,255,255,0.35);
}

.promo-title-sub {
  display: block;
  margin-top: 9px;
  font-weight: 600;
  font-size: 13px;
  text-transform: none;
  opacity: .9;
}

.promo-list {
  list-style: none;
  margin: 16px 0 18px;
  padding: 0;
  font-size: 13px;
  color: #e3e3e3;
}

.promo-list li + li {
  margin-top: 4px;
}

.promo-list strong {
  font-weight: 800;
}

.promo-note {
  font-size: 11px;
  color: #d0d0d0;
  max-width: 420px;
}

/* CTA кнопки */

.promo-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 10px;
}

.promo-btn-primary,
.promo-btn-secondary {
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: .12em;
  border: none;
}

/* основная — металлический белый */
.promo-btn-primary {
  background: linear-gradient(135deg, #ffffff, #e2e2e2);
  color: #111111;
  box-shadow:
    0 0 22px rgba(0,0,0,0.9),
    0 0 30px rgba(255,255,255,0.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.promo-btn-primary:hover {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.08);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.95),
    0 0 40px rgba(255,255,255,0.5),
    0 0 20px rgba(255,214,0,0.7);
}

/* вторичная — чёрная */
.promo-btn-secondary {
  background: rgba(0,0,0,0.85);
  color: #f3f3f3;
  border: 1px solid rgba(255,255,255,0.45);
}

.promo-btn-secondary:hover {
  background: rgba(255,255,255,0.06);
}

/* Анимации overlay / карточки / блика */

@keyframes promoOverlayIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes promoOverlayOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes promoEnter {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(0.9) rotateX(10deg);
    filter: blur(12px) brightness(1.2);
  }
  40% {
    opacity: 1;
    transform: translateY(-8px) scale(1.03) rotateX(0deg);
    filter: blur(0px) brightness(1.4);
  }
  70% {
    transform: translateY(2px) scale(0.99);
    filter: brightness(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

@keyframes promoExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
  20% {
    filter: brightness(1.3);
  }
  100% {
    opacity: 0;
    transform: translateY(26px) scale(0.88) rotateX(8deg);
    filter: blur(12px);
  }
}

/* мягкое “дыхание” светового пятна */
@keyframes promoStrike {
  0%   { transform: translateX(-8%); opacity: 0.35; }
  50%  { transform: translateX(8%);  opacity: 0.7;  }
  100% { transform: translateX(-8%); opacity: 0.35; }
}

/* Адаптив */

@media (max-width: 600px) {
  .promo-card {
    padding: 22px 18px 18px;
    border-radius: 18px;
  }

  .promo-title-top {
    font-size: 20px;
    letter-spacing: .14em;
  }

  .promo-title-price {
    font-size: 24px;
    letter-spacing: .16em;
  }

  .promo-cta-row {
    flex-direction: column;
  }

  .promo-btn-primary,
  .promo-btn-secondary {
    width: 100%;
  }
}








/* ===== СЕКЦИЯ СКИДОК ДЛЯ АРТИСТОВ ЯНДЕКС.МУЗЫКИ ===== */
.creator-discount {
  padding: 60px 0 70px;
}

.creator-discount .cd-head {
  text-align: left;
  margin-bottom: 26px;
}

.creator-discount .cd-head h2 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.creator-discount .cd-head p {
  max-width: 520px;
  color: #c9c9c9;
  font-size: 14px;
}

.cd-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.cd-tier {
  position: relative;
  border-radius: 18px;
  padding: 18px 18px 16px;
  background: radial-gradient(circle at 0% 0%, rgba(255,255,255,.06) 0, transparent 50%),
              rgba(9,9,9,.95);
  border: 1px solid rgba(255,255,255,.08);
}

.cd-tier-pro {
  background: radial-gradient(circle at 100% 0%, rgba(255,255,255,.12) 0, transparent 55%),
              rgba(9,9,9,.98);
  border-color: rgba(255,255,255,.18);
}

.cd-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}

.cd-badge-pro {
  border-color: #ffffff;
  background: #ffffff;
  color: #000;
}

.cd-tier h3 {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
}

.cd-percent {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 4px;
}

.cd-note {
  font-size: 13px;
  color: #b8b8b8;
}

.cd-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cd-cta .btn-outline {
  align-self: flex-start;
}

.cd-footnote {
  font-size: 11px;
  color: #8f8f8f;
  max-width: 520px;
}

/* адаптив */
@media (max-width: 768px) {
  .cd-grid {
    grid-template-columns: 1fr;
  }
}





/* ====== ФОТО СТУДИИ • TOP-1 MINIMAL ====== */
.spm{ background:#0d0d0d; padding:84px 0 70px; }
.spm-wrap{ width:min(1300px, 92vw); margin:0 auto; }

.spm-head{ margin-bottom:26px; }
.spm-kicker{
  font:800 12px/1 'Montserrat',sans-serif;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.70);
}
.spm-title{
  margin:10px 0 10px;
  font-size:clamp(30px, 4.4vw, 52px);
  line-height:1.02; letter-spacing:.02em;
}
.spm-sub{ margin:0; color:rgba(255,255,255,.68); max-width:70ch; }

.spm-layout{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap:20px;
  align-items:stretch;
}

.spm-item{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#101010;
  box-shadow: 0 12px 44px rgba(0,0,0,.55);
  cursor:pointer;
}
.spm-item img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transform:scale(1.03);
  transition: transform .7s cubic-bezier(.2,.75,.2,1), filter .7s cubic-bezier(.2,.75,.2,1);
  filter: saturate(1.05) contrast(1.06);
}
.spm-item::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.80) 100%);
  opacity:.85;
  pointer-events:none;
}

.spm-item:hover img{ transform:scale(1.10); }

.spm-hero{ min-height:520px; }
.spm-cap{
  position:absolute; left:16px; bottom:14px;
  padding:12px 12px;
  border-radius:14px;
  background: rgba(10,10,10,.42);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  display:flex; flex-direction:column; gap:6px;
}
.spm-cap .t{ font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:14px; }
.spm-cap .d{ color:rgba(255,255,255,.72); font-size:12px; }

.spm-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}
.spm-grid .spm-item{ min-height: 250px; }

/* Responsive */
@media (max-width: 980px){
  .spm-layout{ grid-template-columns:1fr; }
  .spm-hero{ min-height:420px; }
}
@media (max-width: 640px){
  .spm-grid{ grid-template-columns:1fr; }
  .spm-grid .spm-item{ min-height: 220px; }
}

/* Lightbox */
.spm-lightbox{ position:fixed; inset:0; display:none; z-index:9999; }
.spm-lightbox.on{ display:block; }
.spm-bg{ position:absolute; inset:0; background: rgba(0,0,0,.92); }

.spm-lb{ position:absolute; inset:0; display:grid; place-items:center; padding:24px 16px; }
.spm-media{
  width:min(1180px, 92vw);
  max-height:84vh;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#0f0f0f;
  box-shadow: 0 18px 70px rgba(0,0,0,.70);
  position:relative;
}
#spmImg{
  width:100%;
  max-height:84vh;
  height:100%;
  object-fit:contain;
  display:block;
  background:#0b0b0b;
}
.spm-caption{
  position:absolute; left:12px; right:12px; bottom:12px;
  padding:12px 14px;
  border-radius:14px;
  background: rgba(10,10,10,.42);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.82);
  font-size: 13px;
}

.spm-x{
  position:absolute; top:18px; right:18px;
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(10,10,10,.32);
  color:#fff; font-size:28px; line-height:1;
  cursor:pointer;
}
.spm-nav{
  position:absolute; top:50%;
  transform: translateY(-50%);
  width:54px; height:54px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(10,10,10,.32);
  color:#fff; font-size:34px; line-height:1;
  cursor:pointer;
}
.spm-nav.prev{ left:18px; }
.spm-nav.next{ right:18px; }


/* ===== Studio Zones ===== */

.spm-zones {
  margin-top: 12px;
  font: 700 14px/1.4 'Montserrat', sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
}

/* На мобилке перенос */
@media (max-width: 640px) {
  .spm-zones {
    font-size: 12px;
    letter-spacing: .18em;
  }
}




/* ====== СВЕДЕНИЕ ДО / ПОСЛЕ (A/B) ====== */
.abx{ background:#0d0d0d; padding:84px 0 72px; }
.abx-wrap{ width:min(1300px, 92vw); margin:0 auto; }

.abx-head{ margin-bottom:26px; }
.abx-kicker{
  font:800 12px/1 'Montserrat',sans-serif;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.70);
}
.abx-title{
  margin:10px 0 10px;
  font-size:clamp(30px, 4.4vw, 52px);
  line-height:1.02; letter-spacing:.02em;
}
.abx-sub{ margin:0; color:rgba(255,255,255,.68); max-width:74ch; }

.abx-grid{
  margin-top:26px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

.abx-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(500px 280px at 18% 18%, rgba(255,255,255,.06), transparent 60%),
    #101010;
  box-shadow: 0 12px 44px rgba(0,0,0,.55);
  padding:18px 18px 16px;
}

.abx-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.abx-name{ font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:14px; }
.abx-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.abx-tag{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.72);
  background: rgba(10,10,10,.22);
}

.abx-ctrl{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:14px; }

.abx-btn{
  width:46px; height:46px; border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(10,10,10,.28);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  display:grid; place-items:center;
}

.abx-ab{
  display:flex;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,10,10,.22);
  border-radius:999px;
  overflow:hidden;
}

.abx-pill{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  font:800 12px/1 'Montserrat',sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:12px 16px;
  cursor:pointer;
}
.abx-pill.is-active{
  background:#fff;
  color:#0d0d0d;
}

.abx-bar{ margin-top:14px; }
.abx-seek{ width:100%; }
.abx-time{
  margin-top:10px;
  display:flex; justify-content:space-between;
  font-size:12px;
  color:rgba(255,255,255,.62);
  letter-spacing:.06em;
}

.abx-note{
  margin-top:12px;
  color:rgba(255,255,255,.56);
  font-size:12px;
  line-height:1.45;
  max-width:70ch;
}

/* Mobile */
@media (max-width: 980px){
  .abx-grid{ grid-template-columns:1fr; }
}




/* ===== Общая громкость для секции A/B ===== */

.abx-head-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
}

.abx-master-volume{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(10,10,10,.22);
  min-width:170px;
}

.abx-master-vol-btn{
  border:none;
  background:transparent;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  padding:0;
  line-height:1;
  width:18px;
  text-align:center;
  flex:0 0 auto;
}

.abx-master-volume-slider{
  -webkit-appearance:none;
  appearance:none;
  width:120px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  outline:none;
  cursor:pointer;
}

.abx-master-volume-slider::-webkit-slider-runnable-track{
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}

.abx-master-volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  margin-top:-4px;
  border:none;
  box-shadow:0 0 0 4px rgba(255,255,255,.08);
}

.abx-master-volume-slider::-moz-range-track{
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}

.abx-master-volume-slider::-moz-range-thumb{
  width:12px;
  height:12px;
  border:none;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.08);
}

@media (max-width: 700px){
  .abx-head-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .abx-master-volume{
    width:100%;
    max-width:260px;
  }

  .abx-master-volume-slider{
    width:100%;
  }
}




.seo-links {
  padding: 80px 0;
}

.seo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.seo-card {
  display: block;
  padding: 25px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  text-decoration: none;
  color: #fff;
  transition: 0.2s;
  background: rgba(255,255,255,0.02);
}

.seo-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.05);
}

.seo-card h3 {
  margin-bottom: 10px;
}






.directions-section {
  position: relative;
  padding: 30px 0 70px;
  background: #131313;
}

.directions-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 32px;
  margin-left: 14vw;
}

.directions-header h2 {
  font-family: 'Montserrat', Arial, sans-serif;
  color: #fff;
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1.05;
  margin: 0;
  letter-spacing: 1px;
}

.directions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
  max-width: 1250px;
  margin: 0 auto;
}

.direction-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  min-height: 260px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 6px 30px 0 rgba(0,0,0,0.19);
}

.direction-img {
  width: 100%;
  height: 260px;
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  transition: filter 0.45s cubic-bezier(.27,.93,.35,1.11),
              transform 0.6s cubic-bezier(.2,.67,.31,1.16);
}

.direction-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, rgba(15,15,15,0.08) 18%, rgba(15,15,15,0.95) 92%);
  padding: 28px;
  z-index: 2;
  transition: background 0.35s;
}

.direction-label {
  color: #f7f7f7c2;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 700;
}

.direction-title {
  color: #fff;
  font-size: 1.38rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
}

.direction-text {
  color: #d8d8d8;
  font-size: 14px;
  line-height: 1.5;
  max-width: 430px;
  margin-bottom: 20px;
}

.direction-btn {
  display: inline-block;
  width: fit-content;
  padding: 11px 28px;
  background: #fff;
  color: #181818;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 50px;
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.36s cubic-bezier(.3,.76,.32,1.24);
  box-shadow: 0 2px 14px 0 rgba(0,0,0,0.08);
}

.direction-card:hover .direction-img {
  filter: grayscale(0);
  transform: scale(1.06);
}

.direction-card:hover .direction-btn {
  opacity: 1;
  transform: translateY(0);
}

.direction-card:hover .direction-overlay {
  background: linear-gradient(180deg, rgba(15,15,15,0.22) 14%, rgba(15,15,15,0.96) 90%);
}

@media (max-width: 900px) {
  .directions-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .directions-header {
    margin-left: 0;
    padding: 0 20px;
  }
}



/* ===== МИНИМАЛЬНАЯ НАВИГАЦИЯ ПО ГЛАВНОЙ С НАЗВАНИЯМИ ===== */
.section-dots-nav {
  position: fixed;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 38;

  display: flex;
  align-items: center;
  gap: 6px;

  max-width: calc(100vw - 44px);
  padding: 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;

  background: rgba(13,13,13,.46);
  backdrop-filter: blur(12px);

  opacity: .82;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;

  box-shadow:
    0 12px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05);

  transition: opacity .25s ease, background .25s ease, border-color .25s ease;
}

.section-dots-nav::-webkit-scrollbar {
  display: none;
}

.section-dots-nav:hover {
  opacity: 1;
  background: rgba(13,13,13,.72);
  border-color: rgba(255,255,255,.16);
}

.section-dots-nav a {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-width: 34px;
  height: 34px;
  padding: 0 11px;

  border: 1px solid transparent;
  border-radius: 999px;

  color: #ededed;
  text-decoration: none;

  transition:
    background .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .22s ease;
}

.section-dots-nav a:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.section-dots-nav a.is-active {
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045)),
    rgba(18,18,18,.92);
  border-color: rgba(255,255,255,.28);
  color: #ffffff;
}

.section-dots-nav .nav-dot {
  width: 5px;
  min-width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.42);
  transition: background .22s ease, box-shadow .22s ease;
}

.section-dots-nav a.is-active .nav-dot {
  background: #ffffff;
  box-shadow: 0 0 12px rgba(255,255,255,.24);
}

.section-dots-nav b {
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Первая кнопка — вверх */
.section-dots-nav a:first-child .nav-dot {
  position: relative;
  width: 9px;
  min-width: 9px;
  height: 9px;
  background: transparent;
}

.section-dots-nav a:first-child .nav-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;

  width: 6px;
  height: 6px;
  border-left: 1.5px solid rgba(255,255,255,.78);
  border-top: 1.5px solid rgba(255,255,255,.78);

  transform: translate(-50%, -30%) rotate(45deg);
}

/* На внутренних страницах скрываем */
body.showing-page .section-dots-nav {
  display: none;
}

/* Чтобы нижняя капсула не закрывала самый низ страницы */
body {
  padding-bottom: 64px;
}

/* Планшеты и маленькие ноутбуки */
@media (max-width: 1100px) {
  .section-dots-nav {
    max-width: calc(100vw - 24px);
    bottom: 16px;
  }

  .section-dots-nav a {
    height: 32px;
    padding: 0 9px;
  }

  .section-dots-nav b {
    font-size: 9px;
  }
}

/* Мобилка — оставляем названия, но делаем горизонтальный скролл */
@media (max-width: 768px) {
  .section-dots-nav {
    left: 10px;
    right: 10px;
    bottom: 12px;
    transform: none;

    max-width: none;
    justify-content: flex-start;

    padding: 7px;
    gap: 5px;
    opacity: .92;
  }

  .section-dots-nav a {
    height: 34px;
    padding: 0 10px;
  }

  .section-dots-nav b {
    font-size: 9px;
    letter-spacing: .035em;
  }

  body {
    padding-bottom: 62px;
  }
}