* {
  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: #ff6f00;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  transition: background 0.3s ease;
}

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


/* Контейнер внутри каждого слайда */
.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: #ff6f00;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 50px;
  transition: background 0.3s ease;
  margin-top: 1rem;
}

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



/* === Услуги === */
.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: #ff6f00;
}




.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: #ff6f00;
  text-decoration: none;
  font-weight: 700;
}

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

/* === Контакты === */
.contact a {
  color: #ffa733;
  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:#ff7a1a}
.dot.yellow{background:#f2c462}

/* 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: #ff7a1a;
  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:#ff7a1a; 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,#ff7a1a,#f2c462);
  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; /* регулируй значение под вкус */
  }
}