:root{
  --c-text:#0f172a;
  --c-muted:#64748b;
  --c-border:#e5e7eb;
  --c-soft:#f6f7fb;
  --c-primary:#2563eb;
  --c-primary2:#1d4ed8;
  --radius:16px;
  --shadow: 0 18px 40px rgba(15, 23, 42, .10);
}

.lp-section{ padding:72px 0; }

.lp-hero{
  background: #fff;
}

.lp-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:1px solid var(--c-border);
  border-radius:999px;
  color:var(--c-muted);
  font-size:14px;
  background: #fff;
}

.lp-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background: var(--c-primary);
  display:inline-block;
}

.lp-title{
  font-size:46px;
  line-height:1.08;
  margin:16px 0 14px;
  color:var(--c-text);
  letter-spacing:-0.02em;
}

.lp-subtitle{
  font-size:18px;
  line-height:1.6;
  color:var(--c-muted);
  margin:0 0 22px;
  max-width:52ch;
}

.lp-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 18px;
}

.lp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
}

.lp-btn--primary{
  background: linear-gradient(180deg, var(--c-primary), var(--c-primary2));
  color:#fff;
  border:1px solid rgba(0,0,0,.05);
}

.lp-btn--outline{
  background:#fff;
  color:var(--c-text);
  border:1px solid var(--c-border);
}

.lp-trust{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
  color:var(--c-muted);
  font-size:14px;
}

.lp-trust li{
  position:relative;
  padding-left:18px;
}

.lp-trust li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(37, 99, 235, .25);
  border:1px solid rgba(37, 99, 235, .35);
}

.lp-hero-visual{
  background: #fff;
  border:1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
}

.lp-hero-visual img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* Mobile */
@media (max-width: 992px){
  .lp-section{ padding:56px 0; }
  .lp-title{ font-size:36px; }
}
/* =========================
   SERVICES BLOCK
========================= */

.lp-services{
  background: var(--c-soft);
}

/* Заголовок секции */
.lp-section-head{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:32px;
}

.lp-h2{
  margin:0;
  font-size:34px;
  line-height:1.15;
  letter-spacing:-0.015em;
  color:var(--c-text);
}

.lp-lead{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--c-muted);
  max-width:70ch;
}

/* Сетка */
.lp-grid{
  display:grid;
  gap:24px;
}

.lp-grid--3{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

/* Карточка сервиса */
.svc-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:26px;
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--radius);
  text-decoration:none;
  color:inherit;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.svc-card:hover{
  transform:translateY(-4px);
  box-shadow: 0 28px 60px rgba(15,23,42,.14);
  border-color: rgba(37,99,235,.35);
}

/* Иконка (плейсхолдер) */
.svc-icon{
  width:44px;
  height:44px;
  border-radius:12px;
  background:
    linear-gradient(180deg,
      rgba(37,99,235,.18),
      rgba(37,99,235,.06)
    );
  border:1px solid rgba(37,99,235,.25);
}

/* Заголовок карточки */
.svc-title{
  margin:6px 0 0;
  font-size:18px;
  line-height:1.3;
  color:var(--c-text);
}

/* Текст */
.svc-text{
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--c-muted);
}

/* Ссылка "Подробнее" */
.svc-more{
  margin-top:auto;
  font-size:14px;
  font-weight:600;
  color:var(--c-primary);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.svc-more::after{
  content:"→";
  transition:transform .2s ease;
}

.svc-card:hover .svc-more::after{
  transform:translateX(4px);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1200px){
  .lp-grid--3{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 768px){
  .lp-h2{
    font-size:28px;
  }

  .lp-grid--3{
    grid-template-columns:1fr;
  }

  .svc-card{
    padding:22px;
  }
}
/* =========================
   CITIES BLOCK
========================= */

.lp-cities{
  background:#fff;
}

.cities-grid{
  display:grid;
  gap:24px;
  grid-template-columns: repeat(4, minmax(0,1fr));
  margin-top:24px;
}

.city-card{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.city-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.city-title{
  margin:0;
  font-size:18px;
  line-height:1.25;
  color:var(--c-text);
}

.city-tag{
  font-size:12px;
  color:var(--c-muted);
  border:1px solid var(--c-border);
  border-radius:999px;
  padding:6px 10px;
  background:#fff;
  white-space:nowrap;
}

.city-text{
  margin:0;
  font-size:14.5px;
  line-height:1.65;
  color:var(--c-muted);
}

.cities-note{
  margin-top:22px;
}

.cities-note__card{
  background: var(--c-soft);
  border:1px solid var(--c-border);
  border-radius: var(--radius);
  padding:18px 20px;
  color: var(--c-text);
}

/* Responsive */
@media (max-width: 1200px){
  .cities-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 768px){
  .cities-grid{ grid-template-columns: 1fr; }
  .city-card{ padding:20px; }
}
/* =========================
   CTA + FORM
========================= */

.lp-cta{
  background: linear-gradient(180deg, var(--c-primary), var(--c-primary2));
  color:#fff;
}

.cta-box{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:32px;
  align-items:center;
}

.cta-title{
  margin:0 0 12px;
  font-size:34px;
  line-height:1.15;
}

.cta-text{
  margin:0 0 16px;
  color:rgba(255,255,255,.85);
}

.cta-points{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}

.cta-points li{
  position:relative;
  padding-left:18px;
}

.cta-points li::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#fff;
}

/* FORM */
.cta-form{
  background:#fff;
  color:var(--c-text);
  border-radius: var(--radius);
  padding:24px;
  box-shadow: var(--shadow);
}

.cta-form__title{
  margin:0 0 14px;
  font-size:20px;
}

.cta-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}

.cta-field label{
  font-size:13px;
  color:var(--c-muted);
}

.cta-field input,
.cta-field textarea{
  border:1px solid var(--c-border);
  border-radius:10px;
  padding:10px 12px;
  font-size:14px;
}

.cta-btn{
  width:100%;
  border:none;
  border-radius:12px;
  padding:12px 16px;
  font-weight:600;
  background: linear-gradient(180deg, var(--c-primary), var(--c-primary2));
  color:#fff;
  cursor:pointer;
}

/* Responsive */
@media (max-width: 992px){
  .cta-box{
    grid-template-columns:1fr;
  }
}
/* =========================
   DARK FAQ
========================= */

.lp-faq{
  background: var(--c-dark);
  color:#fff;
}

.lp-section-head--dark{
  margin-bottom:28px;
}

.lp-h2--dark{
  color:#fff;
}

.lp-lead--dark{
  color: rgba(255,255,255,.78);
}

/* Сетка FAQ */
.faq-grid{
  display:grid;
  gap:12px;
}

/* Item */
.faq-item{
  border:1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  overflow:hidden;
}

.faq-q{
  list-style:none;
  cursor:pointer;
  padding:18px 18px;
  font-weight:600;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.faq-q::-webkit-details-marker{ display:none; }

/* “+ / –” */
.faq-q::after{
  content:"+";
  font-size:18px;
  line-height:1;
  opacity:.9;
  transform: translateY(-1px);
}

.faq-item[open] .faq-q::after{
  content:"–";
}

.faq-a{
  padding:0 18px 18px;
  color: rgba(255,255,255,.78);
  line-height:1.65;
  font-size:14.5px;
}

/* Hover */
.faq-item:hover{
  border-color: rgba(255,255,255,.24);
}

/* Mobile */
@media (max-width: 768px){
  .faq-q{ padding:16px; }
  .faq-a{ padding:0 16px 16px; }
}
/* =========================
   DARK FAQ – HARD OVERRIDE
   (ставить В КОНЕЦ home.css)
========================= */

body .lp-faq{
  background: #0b1020 !important;
}

body .lp-faq,
body .lp-faq h1,
body .lp-faq h2,
body .lp-faq h3,
body .lp-faq p,
body .lp-faq span,
body .lp-faq strong,
body .lp-faq summary,
body .lp-faq .faq-q,
body .lp-faq .faq-a{
  color: #ffffff !important;
}

body .lp-faq .lp-lead{
  color: rgba(255,255,255,.85) !important;
}

body .lp-faq details{
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.02) !important;
}

body .lp-faq summary{
  background: transparent !important;
}

/* Маркер +/- */
body .lp-faq .faq-q::after{
  color:#fff !important;
}
/* =========================
   FOOTER
========================= */

.lp-footer{
  background:#0b1020;
  padding:56px 0 0;
  color:#fff;
}

.lp-footer *{
  color:#fff;
}

.lp-footer__grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap:28px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.lp-footer__brand{
  font-size:18px;
  font-weight:700;
  margin:0 0 10px;
  letter-spacing:-0.01em;
}

.lp-footer__text{
  margin:0 0 16px;
  color:rgba(255,255,255,.78);
  line-height:1.7;
  font-size:14.5px;
}

.lp-footer__meta{
  display:grid;
  gap:8px;
  margin-top:10px;
}

.lp-footer__meta-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius:12px;
  padding:10px 12px;
}

.lp-footer__meta-label{
  color:rgba(255,255,255,.65);
  font-size:12.5px;
}

.lp-footer__meta-value{
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
}

.lp-footer__title{
  font-size:14px;
  font-weight:700;
  margin:0 0 12px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
}

.lp-footer__title--spaced{
  margin-top:18px;
}

.lp-footer__links{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
  color:rgba(255,255,255,.78);
  font-size:14.5px;
}

.lp-footer__links--small{
  font-size:13.5px;
  gap:8px;
}

.lp-footer__links li{
  color:rgba(255,255,255,.78);
}

.lp-footer__bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px 0;
  font-size:13px;
  color:rgba(255,255,255,.65);
}

.lp-footer__bottom-right{
  color:rgba(255,255,255,.65);
  white-space:nowrap;
}

/* Responsive */
@media (max-width: 1200px){
  .lp-footer__grid{
    grid-template-columns: 1.2fr 1fr 1fr;
  }
  .lp-footer__col:last-child{
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px){
  .lp-footer__grid{
    grid-template-columns: 1fr;
  }
  .lp-footer__bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .lp-footer__bottom-right{
    white-space:normal;
  }
}
/* =========================
   REMOVE CASSIOPEIA CARD BORDER AROUND MAIN CONTENT
========================= */

/* Убираем бордер/фон/тень у обёрток Cassiopeia (card) в основной зоне */
body .container-component .card,
body .container-component .card-body{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Снимаем внутренние отступы, чтобы секции “дышали” сами */
body .container-component .card-body{
  padding: 0 !important;
}
.lp-section--soft,
.lp-cta,
.lp-faq,
.lp-footer{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* ==================================================
   GLOBAL FULL-BLEED BACKGROUNDS (SAFE)
   - no negative margins
   - works inside Cassiopeia wrappers
================================================== */

/* 0) На всякий случай выключаем прошлые отрицательные марджины */
.lp-section--soft,
.lp-cta,
.lp-faq,
.lp-footer{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 1) Разрешаем псевдо-элементам выходить за контейнер */
.site-grid,
.grid-child,
.container-component,
footer.container-footer,
footer.container-footer .grid-child{
  overflow: visible !important;
}

/* 2) Базовая настройка секций: фон рисуем ::before на 100vw */
.lp-section,
.lp-footer{
  position: relative;
}

.lp-section > .container,
.lp-footer > .container{
  position: relative;
  z-index: 2;
}

/* Универсальный full-bleed слой */
.lp-section::before,
.lp-footer::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  z-index:1;
  pointer-events:none;
}

/* 3) Фоны */
.lp-section--soft::before{ background: #f6f7fb; }
.lp-cta::before{ background: linear-gradient(180deg, #2563eb, #1d4ed8); }
.lp-faq::before{ background: #0b1020; }
.lp-footer::before{ background: #0b1020; }

/* 4) Убираем системный фон footer Cassiopeia, чтобы не было “полос” */
footer.container-footer{
  background: transparent !important;
  padding: 0 !important;
}

footer.container-footer .grid-child{
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* ==================================================
   REMOVE CASSIOPEIA "CARD" WRAPPERS IN CONTENT AREA (GLOBAL)
================================================== */

.container-component .main-top.card,
.container-component .main-top.card .card-body,
.container-component .main-bottom.card,
.container-component .main-bottom.card .card-body{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.container-component .main-top.card .card-body,
.container-component .main-bottom.card .card-body{
  padding: 0 !important;
}
/* =========================
   HERO (Galicia)
========================= */

.lp-hero{
  padding: 72px 0;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font-size: 13px;
  color: #475569;
  background: #fff;
}

.hero-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#2563eb;
}

.hero-h1{
  margin: 16px 0 10px;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #0b1020;
}

.hero-lead{
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.7;
  color: #475569;
  max-width: 56ch;
}

.hero-actions{
  display:flex;
  gap:12px;
  margin: 18px 0 18px;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 12px;
  background: #2563eb;
  color:#fff !important;
  text-decoration:none !important;
  font-weight: 600;
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  color:#0b1020 !important;
  text-decoration:none !important;
  background:#fff;
  font-weight: 600;
}

.hero-bullets{
  margin: 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 8px;
  color:#475569;
  font-size: 14.5px;
}

.hero-bullets li{
  position: relative;
  padding-left: 18px;
}

.hero-bullets li::before{
  content:"";
  position:absolute;
  left:0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background:#93c5fd;
}

/* Small keyword strip (subtle) */
.hero-proof{
  margin-top: 16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hero-proof span{
  font-size: 12.5px;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e5e7eb;
  padding: 6px 10px;
  border-radius: 999px;
}

/* Visual */
.hero-visual{
  background: #fff;
  border-radius: 18px;
  padding: 10px;
  border: 1px solid #eef2f7;
}

.hero-svg{
  width: 100%;
  height: auto;
  display:block;
}

/* Responsive */
@media (max-width: 992px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-h1{ font-size: 40px; }
}
.svc-icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(180deg,#eef2ff,#f8fafc);
  border: 1px solid rgba(37,99,235,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.svc-icon svg{
  width: 26px;
  height: 26px;
  stroke: #2563eb;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc-card:hover .svc-icon{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
  transition: .2s ease;
}
/* =========================
   CITY CTA BUTTON
========================= */

.city-card{
  display: flex;
  flex-direction: column;
}

.city-text{
  flex-grow: 1;
}

.city-btn{
  margin-top: 18px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid rgba(37,99,235,.25);
  background: #fff;
  color: #2563eb;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all .2s ease;
}

.city-btn::after{
  content: "→";
  font-size: 15px;
  transition: transform .2s ease;
}

.city-btn:hover{
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.city-btn:hover::after{
  transform: translateX(3px);
}
.main-top.card, main {
    margin-top: 0px!important;
}
footer.container-footer.footer.full-width .grid-child, footer.container-footer.footer.full-width {
    padding-top: 0px !important;
    margin-top: 0px;
    padding-bottom: 0px !important;	
}
a.brand-logo img {
    width: auto!important;
    max-height: 80px!important;
}
header.header.container-header.full-width {
    background: #0E162B;
}
/* SEO A Coruña — CSS (acoplable к стилям главной)
   Если на главной уже есть часть этих классов — оставьте только недостающее. */

:root{
  --lp-bg: #0b1220;
  --lp-ink: #0e1526;
  --lp-muted: rgba(14,21,38,.72);
  --lp-line: rgba(14,21,38,.10);
  --lp-card: #ffffff;
  --lp-soft: #f5f7fb;
  --lp-primary: #2563eb;
  --lp-primary-2: #1d4ed8;
  --lp-radius: 16px;
  --lp-shadow: 0 12px 28px rgba(2,6,23,.08);
  --lp-shadow-2: 0 10px 24px rgba(2,6,23,.14);
  --lp-max: 1320px;
}

.container{
  width: min(100% - 32px, var(--lp-max));
  margin-inline: auto;
}

.lp-section{ padding: 64px 0; background: #fff; }
.lp-section:nth-of-type(even){ background: var(--lp-soft); }

.lp-section-head{ max-width: 920px; margin: 0 0 28px; }
.lp-h1{ font-size: clamp(30px, 3vw, 44px); line-height: 1.12; margin: 0 0 10px; color: var(--lp-ink); }
.lp-h2{ font-size: clamp(24px, 2.2vw, 34px); line-height: 1.18; margin: 0 0 10px; color: var(--lp-ink); }
.lp-h2--inverse{ color: #fff; }
.lp-h3{ font-size: 16px; line-height: 1.25; margin: 10px 0 8px; color: var(--lp-ink); }
.lp-lead{ font-size: 15px; line-height: 1.6; margin: 0; color: var(--lp-muted); }
.lp-lead--inverse{ color: rgba(255,255,255,.78); }
.lp-text{ font-size: 14px; line-height: 1.65; margin: 0; color: var(--lp-muted); }

/* Buttons */
.lp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: .18s ease;
  cursor: pointer;
  white-space: nowrap;
}
.lp-btn--primary{
  background: var(--lp-primary);
  color: #fff;
  box-shadow: 0 10px 20px rgba(37,99,235,.18);
}
.lp-btn--primary:hover{ background: var(--lp-primary-2); }
.lp-btn--ghost{
  background: #fff;
  color: var(--lp-ink);
  border-color: var(--lp-line);
}
.lp-btn--ghost:hover{ border-color: rgba(14,21,38,.18); }
.lp-btn--wide{ width: 100%; }

/* Hero */
.lp-hero{ padding-top: 76px; padding-bottom: 56px; background: #fff; }
.lp-hero__grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 34px;
  align-items: center;
}
@media (max-width: 980px){
  .lp-hero__grid{ grid-template-columns: 1fr; }
}

.lp-hero__actions{ display:flex; gap: 12px; margin: 16px 0 14px; flex-wrap: wrap; }

.lp-bullets{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: var(--lp-muted);
  font-size: 13px;
}
.lp-bullets li{
  position: relative;
  padding-left: 18px;
}
.lp-bullets li::before{
  content:"";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lp-primary);
  position: absolute;
  left: 0; top: 9px;
}
.lp-bullets--inverse{ color: rgba(255,255,255,.78); }
.lp-bullets--inverse li::before{ background: #93c5fd; }

.lp-kws{ margin-top: 14px; display:flex; flex-wrap: wrap; gap: 8px; }
.lp-chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37,99,235,.08);
  color: rgba(14,21,38,.86);
  border: 1px solid rgba(37,99,235,.16);
}

/* Mock block (вместо иллюстрации) */
.lp-hero__media{ position: relative; }
.lp-mock{
  background: linear-gradient(180deg, #f8fbff, #ffffff);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  box-shadow: var(--lp-shadow);
  overflow: hidden;
  min-height: 270px;
}
.lp-mock__top{ height: 44px; background: rgba(37,99,235,.06); border-bottom: 1px solid rgba(15,23,42,.06); }
.lp-mock__body{ padding: 18px; display: grid; grid-template-columns: 1fr .9fr; gap: 14px; }
.lp-mock__chart{
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(37,99,235,.04));
  min-height: 160px;
}
.lp-mock__cards{ display:grid; gap: 12px; }
.lp-mock__card{
  border-radius: 14px;
  background: rgba(15,23,42,.04);
  min-height: 74px;
}
.lp-badge{
  position: absolute;
  right: 14px;
  bottom: -14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--lp-shadow-2);
}
.lp-badge__title{ font-weight: 700; font-size: 13px; color: var(--lp-ink); }
.lp-badge__sub{ font-size: 12px; color: var(--lp-muted); }

/* Cards grid */
.lp-cards{
  display: grid;
  gap: 18px;
}
.lp-cards--6{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .lp-cards--6{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .lp-cards--6{ grid-template-columns: 1fr; } }

.lp-card{
  background: var(--lp-card);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--lp-radius);
  padding: 18px 18px 16px;
  box-shadow: 0 10px 22px rgba(2,6,23,.05);
}
.lp-card__icon{
  width: 34px; height: 34px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(37,99,235,.08);
  color: var(--lp-primary);
  font-weight: 700;
}

/* Split panels */
.lp-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 980px){ .lp-split{ grid-template-columns: 1fr; } }

.lp-panel{
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--lp-radius);
  padding: 18px;
  box-shadow: 0 10px 22px rgba(2,6,23,.05);
}

.lp-list{ margin: 10px 0 0; padding-left: 18px; color: var(--lp-muted); line-height: 1.65; font-size: 14px; }
.lp-list li{ margin: 8px 0; }

/* Metrics */
.lp-metrics{ display:grid; gap: 12px; margin-top: 10px; }
.lp-metric{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(37,99,235,.03);
}
.lp-metric__kpi{ font-weight: 800; color: var(--lp-ink); }
.lp-metric__desc{ font-size: 13px; color: var(--lp-muted); margin-top: 2px; }

/* CTA (blue block like main) */
.lp-cta{
  background: linear-gradient(180deg, #2b67f6 0%, #1e4fd4 100%);
  padding: 74px 0;
}
.lp-cta__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 980px){ .lp-cta__grid{ grid-template-columns: 1fr; } }

.lp-form{
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 34px rgba(2,6,23,.18);
  padding: 18px;
}
.lp-form__head{ font-weight: 800; color: var(--lp-ink); margin-bottom: 12px; }
.lp-field{ display:block; margin-bottom: 12px; }
.lp-field span{ display:block; font-size: 12px; color: rgba(14,21,38,.74); margin-bottom: 6px; }
.lp-field input,
.lp-field textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  padding: 10px 12px;
  outline: none;
  font-size: 14px;
}
.lp-field input:focus,
.lp-field textarea:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.lp-form__note{ font-size: 12px; color: rgba(14,21,38,.62); margin-top: 10px; }

/* FAQ (accordion) */
.lp-accordion{ display:grid; gap: 10px; }
.lp-qa{
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px 12px;
}
.lp-qa summary{
  cursor:pointer;
  font-weight: 700;
  color: var(--lp-ink);
  list-style: none;
}
.lp-qa summary::-webkit-details-marker{ display:none; }
.lp-qa__body{
  margin-top: 10px;
  color: var(--lp-muted);
  font-size: 14px;
  line-height: 1.65;
}
/* ===== HEADER: 1 ряд, контент max 1320, logo 30% + menu 70% ===== */

/* Шапка: фон на всю ширину, контент центрируем padding'ами */
header.header.container-header.full-width{
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  /* держим контент в 1320, но фон остаётся на всю ширину */
  padding-left: max(16px, calc((100vw - 1320px) / 2)) !important;
  padding-right: max(16px, calc((100vw - 1320px) / 2)) !important;
}

/* Перебиваем шаблонное .grid-child { width:100%; max-width:1320px; margin:auto; } */
header.header.container-header.full-width > .grid-child{
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* Лого-блок = 30% */
header.header.container-header.full-width > .grid-child:first-child{
  flex: 0 0 30% !important;
  max-width: 30% !important;
  justify-content: flex-start !important;
}

/* Меню-блок = 70% и прижать вправо */
header.header.container-header.full-width > .grid-child.container-nav{
  flex: 0 0 70% !important;
  max-width: 70% !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* UL меню в одну линию */
header.header.container-header.full-width .container-nav ul.mod-menu{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  white-space: nowrap !important;
}

/* чтобы пункты не переносились */
header.header.container-header.full-width .container-nav ul.mod-menu > li,
header.header.container-header.full-width .container-nav ul.mod-menu > li > a{
  white-space: nowrap !important;
}

/* Мобилка: можно в 2 ряда */
@media (max-width: 900px){
  header.header.container-header.full-width{
    flex-wrap: wrap !important;
  }
  header.header.container-header.full-width > .grid-child:first-child,
  header.header.container-header.full-width > .grid-child.container-nav{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  header.header.container-header.full-width > .grid-child.container-nav{
    justify-content: flex-start !important;
  }
}
/* =========================
   HEADER: 1 row + max-width 1320
   ========================= */

/* Фон шапки (у вас сейчас похож на #081020) */
header.container-header.full-width{
  background: #081020;
}

/* Делаем шапку flex и центрируем содержимое */
header.container-header.full-width{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
}

/* Внутреннее ограничение по ширине (1320) */
header.container-header.full-width > .grid-child,
header.container-header.full-width > .grid-child.container-nav{
  max-width: 1320px !important;
}

/* Ключевой момент:
   превращаем шапку в "двухколоночную" раскладку, даже если у вас 2 отдельных grid-child */
header.container-header.full-width{
  /* создаём "внутренний контейнер" через padding и ограничение по ширине детей */
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ЛОГО-блок: первый grid-child */
header.container-header.full-width > .grid-child:not(.container-nav){
  flex: 0 0 30% !important;
  min-width: 240px; /* чтобы лого не ломалось */
  display: flex !important;
  align-items: center !important;
}

/* НАВИГАЦИЯ: второй grid-child */
header.container-header.full-width > .grid-child.container-nav{
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* Убираем любые фоны/рамки вокруг логотипа, если контейнер их рисует */
header.container-header.full-width .site-logo,
header.container-header.full-width .site-logo a,
header.container-header.full-width .brand,
header.container-header.full-width .brand a{
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================
   TOP MENU: красивое горизонтальное
   ========================= */

header.container-header.full-width ul#mod-menu1.mod-menu{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

header.container-header.full-width ul#mod-menu1.mod-menu > li{
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

header.container-header.full-width ul#mod-menu1.mod-menu > li > a{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 6px !important;
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
  font-weight: 600;
  border-radius: 10px;
  transition: background .15s ease, color .15s ease;
}

header.container-header.full-width ul#mod-menu1.mod-menu > li > a:hover{
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}

/* Активный пункт — аккуратная подсветка */
header.container-header.full-width ul#mod-menu1.mod-menu > li.active > a,
header.container-header.full-width ul#mod-menu1.mod-menu > li.current > a{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

/* =========================
   SUBMENU (dropdown): красиво "под меню"
   ========================= */

/* Ваше подменю: ul#mod-menu1-submenu1.mod-menu__sub ...  */
header.container-header.full-width ul#mod-menu1 li.deeper{
  position: relative !important;
}

/* Скрыто по умолчанию */
header.container-header.full-width ul#mod-menu1 ul.mod-menu__sub{
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;               /* выпадение под пунктом */
  min-width: 240px !important;
  padding: 10px !important;
  margin: 0 !important;
  list-style: none !important;

  background: rgba(8,16,32,.98) !important; /* в тон шапки */
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45) !important;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 2000 !important;
}

/* Показываем при hover (desktop) */
@media (min-width: 992px){
  header.container-header.full-width ul#mod-menu1 li.deeper:hover > ul.mod-menu__sub{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Пункты в подменю */
header.container-header.full-width ul#mod-menu1 ul.mod-menu__sub > li{
  margin: 0 !important;
}

header.container-header.full-width ul#mod-menu1 ul.mod-menu__sub > li > a{
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
  font-weight: 500;
  white-space: nowrap;
}

header.container-header.full-width ul#mod-menu1 ul.mod-menu__sub > li > a:hover{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

/* Если Joomla/шаблон открывает подменю через aria-hidden="false" — поддержим это */
header.container-header.full-width ul#mod-menu1 ul.mod-menu__sub.show-menu,
header.container-header.full-width ul#mod-menu1 ul.mod-menu__sub[aria-hidden="false"]{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =========================
   На всякий случай: не даём шапке переносить меню на 2 ряд
   ========================= */
header.container-header.full-width{
  flex-wrap: nowrap !important;
}
header.container-header.full-width > .grid-child.container-nav{
  overflow: visible !important;
}
/* HERO “Base + % Performance” — автономный стиль (не конфликтует с вашими lp-*)
   Если у вас уже есть .container, удалите её ниже. */

:root{
  --p-max: 1320px;
  --p-ink: #0f172a;
  --p-muted: rgba(15,23,42,.72);
  --p-line: rgba(15,23,42,.10);
  --p-soft: #f5f7fb;
  --p-card: #ffffff;
  --p-primary: #2563eb;
  --p-primary2:#1d4ed8;
  --p-r: 22px;
  --p-shadow: 0 18px 42px rgba(2,6,23,.12);
  --p-shadow2: 0 24px 56px rgba(2,6,23,.14);
}

.container{ width: min(100% - 32px, var(--p-max)); margin-inline:auto; }

/* Layout */
.lp-heroP{ padding: 78px 0 58px; background:#fff; }
.lp-heroP__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 38px;
  align-items:center;
}
@media (max-width: 980px){ .lp-heroP__grid{ grid-template-columns: 1fr; } }

/* Eyebrow */
.lp-heroP__eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom: 10px; }
.lp-heroP__tag{
  height: 28px; padding: 0 10px; border-radius: 999px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  font-size: 12px; font-weight: 900; color: rgba(15,23,42,.86);
  display:inline-flex; align-items:center;
}
.lp-heroP__dot{ width: 6px; height: 6px; border-radius: 50%; background: rgba(37,99,235,.85); }
.lp-heroP__sub{ font-size: 12px; font-weight: 800; color: rgba(15,23,42,.62); }

/* Text */
.lp-heroP__h1{
  margin: 0 0 10px;
  font-size: clamp(30px, 3.1vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--p-ink);
}
.lp-heroP__lead{
  margin: 0;
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--p-muted);
}
.lp-heroP__lead strong{ color: rgba(15,23,42,.86); font-weight: 900; }

/* Buttons */
.lp-heroP__actions{ display:flex; gap:12px; margin: 18px 0 14px; flex-wrap: wrap; }
.lp-btnP{
  display:inline-flex; align-items:center; justify-content:center;
  height: 44px; padding: 0 16px; border-radius: 12px;
  font-weight: 900; font-size: 14px; text-decoration:none;
  border: 1px solid transparent; transition: .18s ease; white-space: nowrap;
}
.lp-btnP--primary{ background: var(--p-primary); color:#fff; box-shadow: 0 12px 22px rgba(37,99,235,.18); }
.lp-btnP--primary:hover{ background: var(--p-primary2); }
.lp-btnP--ghost{ background:#fff; color: var(--p-ink); border-color: var(--p-line); }
.lp-btnP--ghost:hover{ border-color: rgba(15,23,42,.22); }
.lp-btnP--sm{ height: 40px; padding: 0 14px; font-size: 13px; }

/* Proof */
.lp-heroP__proof{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 12px;
}
@media (max-width: 680px){ .lp-heroP__proof{ grid-template-columns: 1fr; } }

.lp-proof{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: 0 12px 22px rgba(2,6,23,.06);
}
.lp-proof__kpi{ font-weight: 950; color: rgba(15,23,42,.90); }
.lp-proof__txt{ margin-top: 2px; font-size: 12px; color: rgba(15,23,42,.62); }

/* Bullets */
.lp-heroP__bullets{
  margin: 0; padding: 0; list-style: none;
  display:grid; gap: 9px;
  font-size: 13px; color: var(--p-muted);
}
.lp-heroP__bullets li{ position: relative; padding-left: 18px; }
.lp-heroP__bullets li::before{
  content:""; width:6px; height:6px; border-radius: 999px;
  background: var(--p-primary); position:absolute; left:0; top:9px;
}

/* Chips */
.lp-heroP__chips{ margin-top: 16px; display:flex; flex-wrap:wrap; gap:10px; }
.lp-chipP{
  display:inline-flex; align-items:center;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(37,99,235,.18);
  background: rgba(37,99,235,.07);
  color: rgba(15,23,42,.86);
  font-size: 12px;
}

/* Visual */
.lp-heroP__visual{ position: relative; min-height: 420px; }

/* Main card */
.lp-payCard{
  width: min(680px, 100%);
  margin-left: auto;
  border-radius: var(--p-r);
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--p-shadow2);
  overflow: hidden;
}
.lp-payCard__head{
  display:flex; align-items:center; gap: 12px;
  padding: 14px 16px;
  background: rgba(37,99,235,.06);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.lp-payCard__dots{ display:flex; gap:6px; }
.lp-payCard__dots i{ width: 8px; height: 8px; border-radius: 999px; background: rgba(15,23,42,.18); }
.lp-payCard__dots i:nth-child(1){ background: rgba(239,68,68,.55); }
.lp-payCard__dots i:nth-child(2){ background: rgba(245,158,11,.55); }
.lp-payCard__dots i:nth-child(3){ background: rgba(34,197,94,.55); }
.lp-payCard__title{ display:flex; flex-direction:column; gap:2px; }
.lp-payCard__title strong{ font-weight: 950; font-size: 13px; color: rgba(15,23,42,.86); }
.lp-payCard__title span{ font-size: 12px; color: rgba(15,23,42,.62); }
.lp-payCard__pill{
  margin-left:auto;
  font-size: 12px; font-weight: 900;
  padding: 7px 10px; border-radius: 999px;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: rgba(15,23,42,.78);
}
.lp-payCard__body{ padding: 16px; }

/* Split pricing */
.lp-splitPay{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 560px){ .lp-splitPay{ grid-template-columns: 1fr; } }

.lp-splitPay__left,
.lp-splitPay__right{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.78);
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.lp-splitPay__right{
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(37,99,235,.04));
  border-color: rgba(37,99,235,.18);
}

.lp-badgePay{
  display:inline-flex; align-items:center;
  height: 26px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.80);
  font-size: 12px; font-weight: 900; color: rgba(15,23,42,.78);
}
.lp-badgePay--alt{
  border-color: rgba(37,99,235,.20);
  color: rgba(37,99,235,.92);
}

.lp-pricePay{ margin-top: 10px; }
.lp-pricePay__big{
  display:block;
  font-weight: 980;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.90);
  font-size: 16px;
}
.lp-pricePay__small{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(15,23,42,.62);
}
.lp-payList{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(15,23,42,.72);
  font-size: 13px;
  line-height: 1.55;
}
.lp-payList li{ margin: 6px 0; }

/* Chart */
.lp-perfChart{
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(37,99,235,.03));
  border: 1px solid rgba(37,99,235,.14);
  padding: 12px;
  overflow: hidden;
}
.lp-perfChart__legend{
  display:flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.lp-legP{
  display:inline-flex; align-items:center; gap: 8px;
  font-size: 12px; font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.72);
}
.lp-legP i{ width: 10px; height: 10px; border-radius: 50%; display:inline-block; }
.lp-legP--a i{ background: rgba(37,99,235,.86); box-shadow: 0 0 0 4px rgba(37,99,235,.18); }
.lp-legP--b i{ background: rgba(59,130,246,.55); box-shadow: 0 0 0 4px rgba(59,130,246,.14); }
.lp-legP--c i{ background: rgba(15,23,42,.35); box-shadow: 0 0 0 4px rgba(15,23,42,.10); }

.lp-perfChart__svg{ width: 100%; height: 230px; display:block; }

.lp-perfGrid line{ stroke: rgba(255,255,255,.90); stroke-width: 1; }

.lp-areaP{ fill: rgba(37,99,235,.12); }
.lp-lineP{ fill:none; stroke-linecap: round; }
.lp-lineP--a{ stroke: rgba(37,99,235,.86); stroke-width: 3; }
.lp-lineP--b{ stroke: rgba(59,130,246,.55); stroke-width: 3; stroke-dasharray: 8 8; }
.lp-lineP--c{ stroke: rgba(15,23,42,.35); stroke-width: 3; stroke-dasharray: 3 8; }

.lp-pointsP circle{ fill:#fff; stroke: rgba(37,99,235,.86); stroke-width: 2.4; }

.lp-perfChart__note{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(15,23,42,.62);
}

/* Micro CTA */
.lp-payCta{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
}
.lp-payCta__txt strong{ display:block; font-weight: 950; color: rgba(15,23,42,.88); font-size: 13px; }
.lp-payCta__txt span{ display:block; margin-top: 2px; font-size: 12px; color: rgba(15,23,42,.62); }

/* Badge outside */
.lp-heroP__badge{
  position: absolute;
  right: 18px;
  bottom: -12px;
  display:inline-flex;
  gap: 10px;
  align-items:center;
  padding: 10px 14px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--p-shadow);
  font-size: 13px;
}
.lp-heroP__badge strong{ font-weight: 980; color: rgba(15,23,42,.88); }
.lp-heroP__badge span{ color: rgba(15,23,42,.66); }

/* Responsive */
@media (max-width: 980px){
  .lp-payCard{ width: 100%; }
  .lp-heroP__badge{ right: 14px; }
}
@media (max-width: 560px){
  .lp-perfChart__svg{ height: 210px; }
  .lp-payCta{ flex-direction: column; align-items: flex-start; }
}
/* Стили "Cómo funciona" — под ваш стиль карточек */
.lp-how .lp-cards--3{
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){
  .lp-how .lp-cards--3{ grid-template-columns: 1fr; }
}

.lp-card--step{
  position: relative;
  padding: 18px 18px 16px;
}

.lp-step{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.lp-step__n{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  color: rgba(15,23,42,.86);
}

.lp-step__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.78);
  font-weight: 900;
}

/* mini list inside cards */
.lp-miniList{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: rgba(15,23,42,.70);
}
.lp-miniList li{
  position: relative;
  padding-left: 16px;
}
.lp-miniList li::before{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(37,99,235,.75);
  position: absolute;
  left: 0;
  top: 8px;
}

/* bottom CTA bar */
.lp-how__cta{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(37,99,235,.06);
  border: 1px solid rgba(37,99,235,.14);
}
.lp-how__ctaText strong{
  display:block;
  font-weight: 900;
  color: rgba(15,23,42,.88);
  font-size: 14px;
}
.lp-how__ctaText span{
  display:block;
  margin-top: 2px;
  font-size: 13px;
  color: rgba(15,23,42,.62);
}
@media (max-width: 680px){
  .lp-how__cta{ flex-direction: column; align-items: flex-start; }
}
/* =========================
   HEADER LAYOUT (topbar + logo/menu) without HTML changes
   ========================= */

/* 0) Ensure header is the flex wrapper and can wrap to 2 rows */
header.header.container-header.full-width{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
}

/* 1) Limit content to 1320px while keeping background full width */
header.header.container-header.full-width{
  /* 1320px content + responsive side padding */
  padding-left: max(16px, calc((100vw - 1320px) / 2)) !important;
  padding-right: max(16px, calc((100vw - 1320px) / 2)) !important;
}

/* 2) TOPBAR: always first row, full width */
header.header.container-header.full-width > .container-topbar{
  order: -10 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  align-self: stretch !important;

  /* optional cosmetics */
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* If inside topbar you have an inner container — keep it aligned */
header.header.container-header.full-width > .container-topbar > *{
  width: 100%;
}

/* 3) LOGO block: second row, 30% */
header.header.container-header.full-width > .grid-child:not(.container-nav){
  order: 0 !important;
  flex: 0 0 30% !important;
  max-width: 30% !important;
  min-width: 240px; /* prevents ugly break on narrow screens */
}

/* 4) MENU block: second row, 70%, align to right */
header.header.container-header.full-width > .grid-child.container-nav{
  order: 1 !important;
  flex: 1 1 70% !important;
  max-width: 70% !important;

  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* Ensure the UL is in one line */
header.header.container-header.full-width .grid-child.container-nav ul.mod-menu{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* 5) Mobile: stack logo + menu if needed */
@media (max-width: 900px){
  header.header.container-header.full-width > .grid-child:not(.container-nav),
  header.header.container-header.full-width > .grid-child.container-nav{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  header.header.container-header.full-width > .grid-child.container-nav{
    justify-content: flex-start !important;
  }
}
/* SEO TEXT block — стилистически как ваши карточки */
.lp-seotext__grid{
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 980px){
  .lp-seotext__grid{ grid-template-columns: 1fr; }
}

.lp-seotext__main{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
  padding: 18px 18px 16px;
}

.lp-seotext__side{ position: relative; }

.lp-seotext__card{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(2,6,23,.08);
  padding: 16px;
  position: sticky;
  top: 92px;
}
@media (max-width: 980px){
  .lp-seotext__card{ position: static; top: auto; }
}

.lp-seotext__cardHead strong{
  display:block;
  font-weight: 900;
  color: rgba(15,23,42,.88);
}
.lp-seotext__cardHead span{
  display:block;
  margin-top: 2px;
  font-size: 13px;
  color: rgba(15,23,42,.62);
}

.lp-seotext__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 12px;
}

.lp-seotext__mini{
  border-top: 1px solid rgba(15,23,42,.08);
  padding-top: 12px;
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.lp-miniRow{
  display:flex;
  gap: 10px;
  align-items: baseline;
}
.lp-miniRow strong{
  font-weight: 950;
  color: rgba(37,99,235,.92);
}
.lp-miniRow span{
  font-size: 13px;
  color: rgba(15,23,42,.72);
}

.lp-seotext__btn{
  width: 100%;
  justify-content: center;
}

.lp-seotext__note{
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(15,23,42,.62);
  text-align: center;
}

/* списки в тексте */
.lp-list{
  margin: 10px 0 12px;
  padding-left: 18px;
  color: rgba(15,23,42,.75);
  line-height: 1.7;
  font-size: 14px;
}
.lp-text{
  color: rgba(15,23,42,.74);
  line-height: 1.75;
  font-size: 14.5px;
}
/* =========================
   TOPBAR (topbar-global / topbar-inner) – premium look
   ========================= */

/* background + bottom border, full width already */
.topbar-global{
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* inner container -> max 1320px with responsive padding */
.topbar-global .topbar-inner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* left/right blocks – if you don’t have wrappers, this still helps inline links */
.topbar-global,
.topbar-global a,
.topbar-global span{
  color: rgba(255,255,255,.85);
  font-size: 13px;
  line-height: 1;
}

/* links */
.topbar-global a{
  text-decoration: none;
  color: rgba(255,255,255,.9);
}
.topbar-global a:hover{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Make phone + email + whatsapp sit nicely even if they are plain text/anchors */
.topbar-global .topbar-inner{
  flex-wrap: wrap;
}

/* items look like chips */
.topbar-global .topbar-inner a,
.topbar-global .topbar-inner span{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}

/* remove chip style from the CTA button only */
.topbar-global .topbar-inner .topbar-cta,
.topbar-global .topbar-inner a.topbar-cta{
  background: linear-gradient(180deg, rgba(59,130,246,.95), rgba(37,99,235,.95));
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 600;
  padding: 8px 14px;
  box-shadow: 0 10px 25px rgba(37,99,235,.25);
}
.topbar-global .topbar-inner .topbar-cta:hover,
.topbar-global .topbar-inner a.topbar-cta:hover{
  text-decoration: none;
  filter: brightness(1.05);
}

/* WhatsApp chip in green-ish accent (subtle) */
.topbar-global .topbar-inner a[href*="wa.me"],
.topbar-global .topbar-inner a[href*="whatsapp"]{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.22);
}

/* Small separators if you use | or bullets: make them subtle */
.topbar-global .topbar-inner .sep,
.topbar-global .topbar-inner .separator{
  background: transparent !important;
  border: 0 !important;
  padding: 0 6px !important;
  color: rgba(255,255,255,.35) !important;
}

/* If you have icons as <i> or svg inside topbar */
.topbar-global .topbar-inner i,
.topbar-global .topbar-inner svg{
  opacity: .9;
}

/* On very small screens – stack and keep CTA visible */
@media (max-width: 720px){
  .topbar-global .topbar-inner{
    justify-content: center;
  }
  .topbar-global .topbar-inner .topbar-cta,
  .topbar-global .topbar-inner a.topbar-cta{
    width: 100%;
    justify-content: center;
  }
}
/* НОВЫЙ СТИЛЬ (очень отличается): светлый hero + изометрический “mapa de intención” + лестница ROI */

:root{
  --pw2-max: 1320px;

  --pw2-ink: #0f172a;
  --pw2-muted: rgba(15,23,42,.72);
  --pw2-line: rgba(15,23,42,.10);

  --pw2-bg: #ffffff;
  --pw2-soft: #f6f7fb;

  --pw2-a: #2563eb;
  --pw2-b: #7c3aed;

  --pw2-r: 22px;
  --pw2-shadow: 0 18px 42px rgba(2,6,23,.10);
  --pw2-shadow2: 0 26px 58px rgba(2,6,23,.14);
}

.container{ width: min(100% - 32px, var(--pw2-max)); margin-inline:auto; }

/* HERO */
.pw2-hero{
  background:
    radial-gradient(900px 520px at 18% 15%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(820px 520px at 82% 28%, rgba(124,58,237,.09), transparent 60%),
    linear-gradient(180deg, #fff, var(--pw2-soft));
  padding: 86px 0 62px;
}

.pw2-hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items:center;
}
@media (max-width: 980px){ .pw2-hero__grid{ grid-template-columns: 1fr; } }

.pw2-hero__kicker{ display:flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.pw2-pill{
  height: 30px;
  display:inline-flex;
  align-items:center;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.86);
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
}
.pw2-pill--soft{
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.08);
}

.pw2-h1{
  margin: 0 0 12px;
  font-size: clamp(32px, 3.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--pw2-ink);
}
.pw2-lead{
  margin: 0;
  max-width: 66ch;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--pw2-muted);
}
.pw2-lead strong{ color: rgba(15,23,42,.88); font-weight: 950; }

.pw2-actions{ display:flex; gap: 12px; margin: 18px 0 16px; flex-wrap: wrap; }
.pw2-btn{
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 14px;
  text-decoration:none;
  border: 1px solid transparent;
  transition: .18s ease;
  white-space: nowrap;
}
.pw2-btn--primary{
  color:#fff;
  background: linear-gradient(135deg, var(--pw2-a), var(--pw2-b));
  box-shadow: 0 14px 30px rgba(37,99,235,.18);
}
.pw2-btn--primary:hover{ transform: translateY(-1px); }
.pw2-btn--ghost{
  color: var(--pw2-ink);
  background: rgba(255,255,255,.75);
  border-color: rgba(15,23,42,.10);
}
.pw2-btn--ghost:hover{ border-color: rgba(15,23,42,.18); }

.pw2-trust{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 680px){ .pw2-trust{ grid-template-columns: 1fr; } }
.pw2-trust__item{
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 24px rgba(2,6,23,.06);
  padding: 10px 12px;
}
.pw2-trust__item strong{ display:block; font-weight: 950; color: rgba(15,23,42,.90); }
.pw2-trust__item span{ display:block; margin-top: 2px; font-size: 12.5px; color: rgba(15,23,42,.62); }

/* MAP CARD */
.pw2-mapCard{
  border-radius: var(--pw2-r);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--pw2-shadow2);
  overflow: hidden;
}

.pw2-mapCard__head{
  padding: 14px 16px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(37,99,235,.02));
}
.pw2-mapCard__title strong{
  display:block;
  font-weight: 950;
  color: rgba(15,23,42,.90);
  font-size: 14px;
}
.pw2-mapCard__title span{
  display:block;
  margin-top: 2px;
  font-size: 12px;
  color: rgba(15,23,42,.62);
}
.pw2-badge{
  height: 28px;
  display:inline-flex;
  align-items:center;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.78);
  background: rgba(124,58,237,.10);
  border: 1px solid rgba(124,58,237,.18);
}

/* Map layout */
.pw2-map{
  position: relative;
  height: 380px;
  padding: 18px;
  background:
    radial-gradient(380px 220px at 55% 45%, rgba(37,99,235,.10), transparent 70%),
    radial-gradient(360px 240px at 45% 55%, rgba(124,58,237,.09), transparent 70%);
}

.pw2-links{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events:none;
}
.pw2-links path{
  fill:none;
  stroke: rgba(15,23,42,.16);
  stroke-width: 2;
  stroke-dasharray: 6 10;
}

/* Nodes */
.pw2-node{
  position:absolute;
  width: 240px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 14px 28px rgba(2,6,23,.08);
  padding: 12px 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}
.pw2-node__dot{
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(37,99,235,.85);
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
  margin-top: 3px;
}
.pw2-node__txt strong{
  display:block; font-weight: 950; color: rgba(15,23,42,.90); font-size: 13px;
}
.pw2-node__txt span{
  display:block; margin-top: 2px; font-size: 12px; color: rgba(15,23,42,.62);
}

/* Center */
.pw2-node--center{
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 260px;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.08));
  border-color: rgba(37,99,235,.16);
}
.pw2-node--center .pw2-node__dot{
  background: rgba(124,58,237,.90);
  box-shadow: 0 0 0 4px rgba(124,58,237,.18);
}

/* Around */
.pw2-node--a{ left: 36px; top: 46px; }
.pw2-node--b{ right: 36px; top: 46px; }
.pw2-node--c{ left: 36px; bottom: 46px; }
.pw2-node--d{ right: 36px; bottom: 46px; }

.pw2-node--b .pw2-node__dot{ background: rgba(124,58,237,.90); box-shadow: 0 0 0 4px rgba(124,58,237,.18); }
.pw2-node--c .pw2-node__dot{ background: rgba(37,99,235,.65); box-shadow: 0 0 0 4px rgba(37,99,235,.14); }
.pw2-node--d .pw2-node__dot{ background: rgba(15,23,42,.55); box-shadow: 0 0 0 4px rgba(15,23,42,.10); }

.pw2-mapNote{
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  font-size: 12px;
  color: rgba(15,23,42,.62);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  padding: 8px 12px;
  text-align: center;
}

/* Sections */
.pw2-section{ padding: 72px 0; background: #fff; }
.pw2-head{ margin-bottom: 16px; }
.pw2-h2{ margin: 0 0 8px; font-size: 30px; letter-spacing: -0.02em; color: var(--pw2-ink); }
.pw2-sub{ margin:0; max-width: 80ch; color: rgba(15,23,42,.72); line-height: 1.75; }

/* ROI ladder */
.pw2-ladder{
  margin-top: 18px;
  display: grid;
  gap: 12px;
}
.pw2-step{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 28px rgba(2,6,23,.06);
  padding: 16px;
}
@media (max-width: 980px){ .pw2-step{ grid-template-columns: 1fr; } }

.pw2-step__left{
  display:flex;
  align-items:center;
  gap: 12px;
  border-radius: 18px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(124,58,237,.06));
  border: 1px solid rgba(37,99,235,.12);
}
.pw2-step__num{
  width: 44px; height: 44px; border-radius: 18px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 980;
  color: rgba(15,23,42,.90);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.10);
}
.pw2-step__title strong{ display:block; font-weight: 980; color: rgba(15,23,42,.92); }
.pw2-step__title span{ display:block; margin-top: 2px; font-size: 12.5px; color: rgba(15,23,42,.62); }

.pw2-step__right p{ margin: 0; color: rgba(15,23,42,.74); line-height: 1.7; }
.pw2-step__right ul{ margin: 10px 0 0; padding-left: 18px; color: rgba(15,23,42,.74); line-height: 1.7; }

/* CTA */
.pw2-cta{
  margin-top: 16px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  background: var(--pw2-soft);
  border: 1px solid rgba(15,23,42,.10);
}
.pw2-cta__txt strong{ display:block; font-weight: 950; color: rgba(15,23,42,.90); }
.pw2-cta__txt span{ display:block; margin-top: 2px; font-size: 13px; color: rgba(15,23,42,.62); }
@media (max-width: 680px){ .pw2-cta{ flex-direction: column; align-items: flex-start; } }
/* =========================
   TOPBAR — full width фон + центр 1320
   ========================= */

/* ФОН на всю ширину */
.topbar-global{
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: #5f83a6; /* или твой цвет */
  border-bottom: 1px solid rgba(255,255,255,.15);
}

/* ВНУТРЕННИЙ КОНТЕНТ — строго 1320 */
.topbar-inner{
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 10px 16px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

/* Левая группа (телефон + email) */
.topbar-inner .topbar-left{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}

/* Правая группа (WhatsApp + CTA) */
.topbar-inner .topbar-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Кнопки */
.topbar-inner .btn-whatsapp{
  background: #25d366;
  color: #fff;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
}

.topbar-inner .btn-audit{
  background: #e5e5e5;
  color: #111;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
}

/* Адаптив */
@media (max-width: 768px){
  .topbar-inner{
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}
/* FULL WIDTH SEO BLOCK */
.pw2-seoBottom--full{
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: linear-gradient(
    180deg,
    rgba(37,99,235,.06),
    rgba(124,58,237,.04)
  );
  border-top: 1px solid rgba(15,23,42,.08);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.pw2-seoInner{
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px 24px;
  color: rgba(15,23,42,.78);
  line-height: 1.85;
}

.pw2-seoInner h2{
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 950;
  color: rgba(15,23,42,.92);
}

.pw2-seoInner p{
  max-width: 980px;
  margin: 0 0 12px;
}

.pw2-seoInner p:last-child{
  margin-bottom: 0;
}
/* =========================
   HERO full-width background
   ========================= */

.pw2-hero{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* твой текущий фон */
  background:
    radial-gradient(900px 520px at 18% 15%, rgba(93, 105, 110, 0.6) 0%, transparent 60%),
    radial-gradient(820px 520px at 82% 28%, rgba(124, 58, 237, 0.09) 0%, transparent 60%),
    linear-gradient(180deg, #f8fbff, #ffffff);

  padding: 86px 0 62px;
}
/* HERO (новый стиль) */
.slx-hero{
  padding: 88px 0 64px;
  background:
    radial-gradient(900px 520px at 15% 10%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 520px at 80% 35%, rgba(124,58,237,.08), transparent 60%),
    linear-gradient(180deg, #ffffff, #f6f7fb);
}

.slx-grid{
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 980px){
  .slx-grid{ grid-template-columns: 1fr; }
}

.slx-kicker{
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.slx-tag{
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.86);
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
}
.slx-tag--soft{
  background: rgba(15,23,42,.04);
  border-color: rgba(15,23,42,.08);
}

.slx-h1{
  margin: 0 0 12px;
  font-size: clamp(34px, 3.2vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.slx-lead{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(15,23,42,.74);
  max-width: 72ch;
}
.slx-lead strong{ color: rgba(15,23,42,.90); font-weight: 950; }

.slx-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 14px;
}

.slx-btn{
  height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 950;
  font-size: 14px;
  border: 1px solid transparent;
  transition: .18s ease;
}
.slx-btn--primary{
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  box-shadow: 0 14px 30px rgba(37,99,235,.18);
}
.slx-btn--primary:hover{ transform: translateY(-1px); }
.slx-btn--ghost{
  color: #0f172a;
  background: rgba(255,255,255,.78);
  border-color: rgba(15,23,42,.12);
}
.slx-btn--ghost:hover{ border-color: rgba(15,23,42,.20); }

/* SEO TEXT внутри hero */
.slx-seotext{
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 26px rgba(2,6,23,.06);
  color: rgba(15,23,42,.74);
  line-height: 1.85;
}
.slx-seotext p{ margin: 0 0 10px; }
.slx-seotext p:last-child{ margin-bottom: 0; }
.slx-seotext strong{ color: rgba(15,23,42,.92); font-weight: 950; }

.slx-bullets{
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  color: rgba(15,23,42,.72);
  font-size: 14px;
}
.slx-bullets li{
  position: relative;
  padding-left: 18px;
}
.slx-bullets li:before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(37,99,235,.85);
  position: absolute;
  left: 0;
  top: 8px;
}

/* RIGHT PANEL */
.slx-panel{
  position: sticky;
  top: 92px;
  border-radius: 22px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 22px 50px rgba(2,6,23,.10);
  overflow: hidden;
}
@media (max-width: 980px){
  .slx-panel{ position: static; top: auto; }
}

.slx-panel__head{
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(37,99,235,.02));
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.slx-panel__head strong{
  font-weight: 980;
  color: rgba(15,23,42,.92);
}
.slx-panel__head span{
  font-size: 12px;
  color: rgba(15,23,42,.58);
  font-weight: 700;
}

.slx-checks{
  padding: 14px 16px 6px;
  display: grid;
  gap: 10px;
}
.slx-check{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 10px;
  border-radius: 16px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
}
.slx-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(124,58,237,.85);
  box-shadow: 0 0 0 4px rgba(124,58,237,.16);
  margin-top: 4px;
}
.slx-check strong{
  display: block;
  font-weight: 950;
  color: rgba(15,23,42,.88);
  font-size: 13px;
}
.slx-check p{
  margin: 2px 0 0;
  font-size: 12.5px;
  color: rgba(15,23,42,.62);
  line-height: 1.4;
}

.slx-timeline{
  padding: 10px 16px 14px;
  display: grid;
  gap: 8px;
}
.slx-titem{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.70);
}
.slx-titem span{
  font-size: 12px;
  color: rgba(15,23,42,.58);
  font-weight: 800;
}
.slx-titem strong{
  font-size: 13px;
  color: rgba(15,23,42,.86);
  font-weight: 950;
}

.slx-panel__cta{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin: 0 16px;
  border-radius: 14px;
  background: #2563eb;
  color: #fff;
  font-weight: 950;
  text-decoration: none;
}
.slx-panel__cta:hover{ filter: brightness(.98); }

.slx-panel__note{
  padding: 12px 16px 16px;
  font-size: 12px;
  color: rgba(15,23,42,.60);
  text-align: center;
}
/* CREATIVE SECTORS BLOCK */
.slx-sectors{
  padding: 72px 0;
  background: linear-gradient(180deg, #ffffff, #f6f7fb);
  border-top: 1px solid rgba(15,23,42,.06);
}

.slx-sectors__head{
  max-width: 900px;
  margin-bottom: 22px;
}
.slx-sectors__head h2{
  margin: 0 0 10px;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: #0f172a;
}
.slx-sectors__head p{
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(15,23,42,.72);
}

.slx-sectors__grid{
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  align-items: start;
}
@media(max-width: 980px){
  .slx-sectors__grid{ grid-template-columns: 1fr; }
}

/* Picker */
.slx-sectors__picker{
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
}

.slx-chip{
  width: 100%;
  text-align: left;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
  color: rgba(15,23,42,.86);
  padding: 12px 12px;
  border-radius: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: .16s ease;
}
.slx-chip:hover{ transform: translateY(-1px); }
.slx-chip.is-active{
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(124,58,237,.12));
  border-color: rgba(37,99,235,.22);
}

/* Panel */
.slx-sectors__panel{
  border-radius: 26px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 26px 60px rgba(2,6,23,.12);
  overflow: hidden;
}

.slx-panelTop{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 16px 16px 12px;
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(37,99,235,.02));
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.slx-pill{
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  font-size: 12px;
  font-weight: 900;
  color: #2563eb;
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.16);
}
.slx-panelTitle{
  font-weight: 980;
  color: rgba(15,23,42,.92);
}

.slx-panelText{
  margin: 0;
  padding: 14px 16px 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(15,23,42,.74);
}
.slx-panelText strong{ color: rgba(15,23,42,.92); font-weight: 950; }

.slx-panelCols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px 16px 16px;
}
@media(max-width: 680px){
  .slx-panelCols{ grid-template-columns: 1fr; }
}

.slx-mini{
  border-radius: 18px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
  padding: 12px 12px;
}
.slx-mini span{
  display:block;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.70);
  margin-bottom: 8px;
}
.slx-mini ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(15,23,42,.74);
  line-height: 1.7;
  font-size: 13.5px;
}

.slx-panelFooter{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.70);
}
@media(max-width: 820px){
  .slx-panelFooter{ flex-direction: column; align-items: flex-start; }
}

.slx-hint{
  font-size: 13px;
  color: rgba(15,23,42,.68);
  line-height: 1.6;
}
.slx-hint strong{ color: rgba(15,23,42,.90); font-weight: 950; }
/* СЕКЦИИ НА ВСЮ ШИРИНУ */
.slx-hero,
.slx-sectors{
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
@media (max-width: 992px) {

  /* Жёстко прячем меню в шапке (перебивает любые display:flex !important) */
  header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1.mod-menu.mod-list.nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Показываем только когда nav-open */
  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1.mod-menu.mod-list.nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    pointer-events: auto !important;

    position: fixed !important;
    inset: 0 !important;
    padding: 96px 16px 20px !important;
    background: rgba(7, 12, 26, 0.92);
    backdrop-filter: blur(10px);
    z-index: 9999 !important;
    overflow: auto !important;
  }
}
/* --- MOBILE: avoid duplicated menu, show only in overlay when nav-open --- */
@media (max-width: 992px) {

  /* по умолчанию на мобиле прячем UL меню */
  ul#mod-menu1.mod-menu.mod-list.nav {
    display: none !important;
  }

  /* когда открыт бургер — показываем как оверлей */
  body.nav-open ul#mod-menu1.mod-menu.mod-list.nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;

    position: fixed !important;
    inset: 0 !important;
    padding: 96px 16px 20px !important;
    margin: 0 !important;

    background: rgba(7, 12, 26, 0.92);
    backdrop-filter: blur(10px);
    overflow: auto !important;
    z-index: 9999 !important;
  }

  body.nav-open ul#mod-menu1.mod-menu.mod-list.nav > li.nav-item > a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    text-decoration: none;
  }

  /* блокируем прокрутку страницы */
  body.nav-open {
    overflow: hidden;
  }

  /* сам бургер (если ещё нет стилей) */
  .mob-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-burger span,
  .mob-burger span::before,
  .mob-burger span::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    position: relative;
    transition: transform .2s ease, opacity .2s ease, top .2s ease;
  }
  .mob-burger span::before { position: absolute; top: -7px; left: 0; }
  .mob-burger span::after  { position: absolute; top: 7px; left: 0; }

  body.nav-open .mob-burger span { background: transparent; }
  body.nav-open .mob-burger span::before { top: 0; transform: rotate(45deg); }
  body.nav-open .mob-burger span::after  { top: 0; transform: rotate(-45deg); }
}
@media (max-width: 992px) {

  /* 0) фикс: не даём хедеру жить своей сеткой */
  header.header.container-header.full-width {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    gap: 12px !important;
  }

  /* логотипный блок (первый grid-child) */
  header.header.container-header.full-width > .grid-child:first-of-type {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* если в логотипном блоке есть ссылка/бренд — поджимаем */
  header.header.container-header.full-width > .grid-child:first-of-type a,
  header.header.container-header.full-width > .grid-child:first-of-type .navbar-brand,
  header.header.container-header.full-width > .grid-child:first-of-type .brand-logo {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
  }

  header.header.container-header.full-width > .grid-child:first-of-type img {
    max-height: 44px;
    width: auto;
    height: auto;
  }

  /* блок nav (второй grid-child) */
  header.header.container-header.full-width > .grid-child.container-nav {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
  }

  /* 1) бургер */
  .mob-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 10001; /* выше меню */
  }

  .mob-burger span {
    position: relative;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    display: block;
    transition: background .2s ease;
  }
  .mob-burger span::before,
  .mob-burger span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, top .2s ease;
  }
  .mob-burger span::before { top: -7px; }
  .mob-burger span::after  { top: 7px; }

  /* 2) меню UL — скрыто по умолчанию */
  header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1.mod-menu.mod-list.nav {
    display: none !important;
  }

  /* 3) Открыто: меню оверлей + крестик фикс справа сверху */
  body.nav-open .mob-burger {
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    z-index: 10002 !important;
  }

  body.nav-open .mob-burger span { background: transparent; }
  body.nav-open .mob-burger span::before { top: 0; transform: rotate(45deg); }
  body.nav-open .mob-burger span::after  { top: 0; transform: rotate(-45deg); }

  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1.mod-menu.mod-list.nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;

    position: fixed !important;
    inset: 0 !important;
    padding: 90px 16px 24px !important; /* место под крестик */
    margin: 0 !important;

    background: rgba(7, 12, 26, 0.94);
    backdrop-filter: blur(10px);
    overflow: auto !important;
    z-index: 10000 !important;
  }

  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 > li.nav-item > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    text-decoration: none;
  }

  /* 4) блокируем скролл страницы */
  body.nav-open { overflow: hidden; }
}
@media (max-width: 750px) {
    header.header.container-header.full-width > .grid-child:not(.container-nav), header.header.container-header.full-width > .grid-child.container-nav {
        flex: 0;
        max-width: 70% !important;
    }
}
@media (max-width: 750px) {
    header.header.container-header.full-width {
        padding: 0px 14px !important;
    }
}
@media (max-width: 992px) {

  /* 1) Панель меню: меньше скругление + меньше внутренние отступы */
  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 {
    border-radius: 14px !important;
    padding: 12px !important;
  }

  /* 2) Пункты меню: компактнее */
  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 > li.nav-item > a {
    padding: 11px 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    min-height: 44px !important;
  }

  /* 3) Убираем “лишние большие стрелки” под пунктами (у Cassiopeia/Bootstrap они часто рисуются через span/caret) */
  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 span.caret,
  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 .dropdown-toggle::before,
  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 .dropdown-toggle + .dropdown-menu-toggle,
  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 .nav-item .mm-toggler,
  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 .nav-item .toggle-submenu {
    display: none !important;
  }

  /* 4) Стрелка только на 1 уровне, справа внутри пункта */
  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 > li.deeper.parent > a {
    position: relative !important;
    padding-right: 38px !important; /* место под стрелку */
  }


  /* 5) Подменю делаем аккуратнее и компактнее */
  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 li.deeper.parent > ul {
    border-radius: 12px !important;
    padding: 8px !important;
    margin-top: 6px !important;
  }

  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 li.deeper.parent > ul > li > a {
    padding: 9px 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
  }

  /* 6) Сам крестик можно сделать компактнее */
  body.nav-open .mob-burger {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }
}
@media (max-width: 992px) {

  /* === ОВЕРЛЕЙ === */
  body.nav-open header.header.container-header.full-width
  .grid-child.container-nav > ul#mod-menu1 {
    width: 100vw !important;
    max-width: 100vw !important;

    margin: 0 !important;
    padding: 90px 16px 24px !important;

    border-radius: 0 !important;
    background: rgba(7, 12, 26, 0.95) !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* === ПУНКТЫ 1 УРОВНЯ — НА ВСЮ ШИРИНУ === */
  body.nav-open header.header.container-header.full-width
  .grid-child.container-nav > ul#mod-menu1 > li.nav-item {
    width: 100% !important;
  }

  body.nav-open header.header.container-header.full-width
  .grid-child.container-nav > ul#mod-menu1 > li.nav-item > a {
    width: 100% !important;
    max-width: none !important;

    padding: 14px 18px !important;
    border-radius: 14px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
  }

  /* === СТРЕЛКА В ОДНОЙ ЛИНИИ === */
  body.nav-open header.header.container-header.full-width
  .grid-child.container-nav > ul#mod-menu1 > li.deeper.parent > a {
    padding-right: 48px !important;
  }


  /* === ВЫПАДАЮЩЕЕ МЕНЮ — ТОЖЕ 100% === */
  body.nav-open header.header.container-header.full-width
  .grid-child.container-nav > ul#mod-menu1 li.deeper.parent > ul {
    width: 100% !important;
    max-width: none !important;

    margin: 8px 0 0 0 !important;
    padding: 8px !important;

    border-radius: 14px !important;
    background: rgba(0,0,0,.22) !important;
    border: 1px solid rgba(255,255,255,.10) !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* === ПУНКТЫ ВНУТРИ ВЫПАДАЮЩЕГО === */
  body.nav-open header.header.container-header.full-width
  .grid-child.container-nav > ul#mod-menu1 li.deeper.parent > ul > li > a {
    width: 100% !important;
    max-width: none !important;

    padding: 12px 16px !important;
    border-radius: 12px !important;

    font-size: 14px !important;
    font-weight: 500 !important;

    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
  }

  /* === ХОВЕР / АКТИВ === */
  body.nav-open header.header.container-header.full-width
  .grid-child.container-nav > ul#mod-menu1 a:hover {
    background: rgba(255,255,255,.10) !important;
  }
}
/* ПК и большие экраны */
@media (min-width: 993px) {
  button.mob-burger {
    display: none !important;
  }
}
@media (max-width: 756px){
  header.container-header.full-width ul#mod-menu1 ul.mod-menu__sub.show-menu{
    position: static !important;
    width: 100%;

  }
  body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 > li.nav-item{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

    body.nav-open header.header.container-header.full-width .grid-child.container-nav > ul#mod-menu1 > li.nav-item > button{
        position: absolute;
        right: 0;
        top: 0;
        z-index: 99;
        height: 48px;
        width: 40px;

  }
}