:root{
  --navy:#000030;
  --green:#00A060;
  --bg:#ffffff;
  --muted:#5b6472;
  --line:rgba(0,0,48,.10);
  --card:#ffffff;
  --soft:rgba(0,0,48,.04);
  --radius:18px;
}
html {
  overflow-y: scroll;
}

body {
  overflow-y: visible;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--navy);
  background:var(--bg);
  line-height:1.5;
}
.hp{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1180px,92%);margin:0 auto}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 999px;
    padding: 0.5rem 1.05rem;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    cursor: pointer;
    transition: .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg, var(--green), #22c27a);
  border-color:transparent;color:#fff;
}
.btn-ghost {
    background: #00002c;
    color: white;
}
.btn-sm{padding:.55rem .85rem;font-size:.92rem}

.muted{color:var(--muted)}
.small {
    font-size: .8rem;
}
.link{color:var(--green);font-weight:650}
.section {
    padding: 40px 0;
}
.section-alt{background:linear-gradient(180deg, var(--soft), transparent)}
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}
.section-head h2{margin:0;font-size:1.6rem}
.prose h2{margin:.2rem 0 1rem}
.prose p {
    margin: 5px 0;
}

.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{display:flex;align-items:center;gap:18px;padding:14px 0}
.brand-logo{height:34px;width:auto}
.nav{margin-left:auto}
.nav-toggle{display:none}
.nav-menu {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    align-items: center;
}
.nav-menu a {
    padding: 5px 8px;
    border-radius: 10px;
}
.nav-menu a:hover{background:var(--soft)}

.has-dropdown{position:relative}
.dropdown{
  position:absolute;top:110%;left:0;min-width:240px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:10px;display:none;box-shadow:0 18px 45px rgba(0,0,48,.10);
}
.has-dropdown:hover .dropdown{display:block}
.dropdown{list-style:none;margin:0}
.dropdown a{display:block;border-radius:10px}

.header-cta{display:flex;align-items:center;gap:10px}
.phone{font-weight:700}

.hero{
  padding:26px 0 44px;
  background:
    radial-gradient(900px 380px at 12% 10%, rgba(0,160,96,.18), transparent 60%),
    radial-gradient(900px 380px at 88% 0%, rgba(0,0,48,.12), transparent 60%);
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:26px;align-items:stretch}
.badge{display:inline-flex;gap:.5rem;align-items:center;padding:.35rem .7rem;border-radius:999px;background:rgba(0,160,96,.10);color:var(--navy);font-weight:650}
.hero h1{margin:.7rem 0 0;font-size:2rem;line-height:1.15}
.lead{color:var(--muted);font-size:1.05rem;margin:.9rem 0 1.2rem}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-kpis{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;min-width:140px}
.kpi strong{display:block;font-size:1.05rem}
.kpi span{color:var(--muted);font-size:.92rem}

.hero-slider{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}
.slides {
    position: relative;
    height: 100%;
}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}
.slide.is-active{opacity:1}
.slide img {
    width: 100%;
    height: 100%;
    object-position: center;
}
.slide-caption {
    position: absolute;
    left: 14px;
    bottom: 60px;
    background: rgba(0, 0, 48, .78);
    color: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    max-width: 80%;
}
.slide-caption strong{display:block}
.slider-controls {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;

    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;

    background: rgba(255,255,255,.73);
    backdrop-filter: blur(4px);
}
.dot{width:10px;height:10px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer}
.dot.is-active{background:var(--green);border-color:transparent}

.grid{display:grid;gap:14px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-5{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* центрируем строки */
  gap: 32px 40px;
}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 14px 40px rgba(0,0,48,.06);
}

.card-body{padding:14px}
.card-title{margin:0 0 10px;font-size:1.02rem}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}
.card-catalog{display:flex;align-items:center}
.note{margin-top:10px}

.icon-card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(0,0,48,.02), #fff);
  padding:16px;min-height:132px;
}
.icon-card h3{margin:0 0 8px}
.icon-card p{margin:0;color:var(--muted)}

.bubble{
  border:1px solid var(--line);border-radius:999px;padding:12px 12px;
  display:flex;align-items:center;gap:10px;background:#fff;
}
.bubble-dot{width:14px;height:14px;border-radius:999px;background:var(--green);box-shadow:0 0 0 6px rgba(0,160,96,.14)}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:start}
.side-figure {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 40px rgba(0, 0, 48, .06);
    height: 100%;
}
.side-figure img {
    height: 100%;
    object-fit: cover;
    object-position: right;
}
.side-badge{padding:12px;color:var(--muted);border-top:1px solid var(--line)}

.reason-box{
  border:1px solid var(--line);border-radius:var(--radius);
  background:
    radial-gradient(700px 200px at 10% 0%, rgba(0,160,96,.16), transparent 60%),
    #fff;
  padding:18px;
}
.reasons{margin:0;padding-left:18px}
.reasons li{margin:10px 0;color:var(--muted)}
.reasons strong{color:var(--navy)}

.app-card{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
  box-shadow:0 14px 40px rgba(0,0,48,.06);
  padding-bottom:14px;
}
.app-card img{height:170px;width:100%;object-fit:cover}
.app-card h3{margin:12px 14px 6px}
.app-card p{margin:0 14px 10px}
.app-card .link{margin-left:14px}

.lead-form{
  border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  background:
    radial-gradient(900px 260px at 0% 0%, rgba(0,160,96,.22), transparent 55%),
    radial-gradient(900px 260px at 100% 0%, rgba(0,0,48,.14), transparent 55%),
    #fff;
  padding:18px;box-shadow:0 14px 40px rgba(0,0,48,.08);
}
.lead-form-head h2{margin:0 0 6px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}
.form-grid .span-2{grid-column:span 2}
label span{display:block;font-size:.92rem;color:var(--muted);margin:0 0 6px}
input,select{
  width:100%;padding:.85rem .9rem;border-radius:14px;border:1px solid var(--line);
  outline:none;background:#fff
}
input:focus,select:focus{border-color:rgba(0,160,96,.55);box-shadow:0 0 0 5px rgba(0,160,96,.12)}
.form-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}

.faq-item{
  border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:10px 12px;margin:10px 0
}
.faq-item summary{cursor:pointer;font-weight:700}
.faq-body{padding:10px 0 0;color:var(--muted)}

.site-footer{
  background:var(--navy);
  color:#fff;
  padding:44px 0 26px;
  margin-top:30px;
}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.14)}
.site-footer h3,.site-footer h4{margin:0 0 10px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:8px 0}
.site-footer a{color:rgba(255,255,255,.86)}
.site-footer a:hover{color:#fff}

.map-thumb {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    height: 100%;
}
.footer-bottom{display:grid;grid-template-columns:1.2fr 1fr .8fr;gap:18px;padding:18px 0}
.footer-logo {
    width: 22%;
}
.footer-bottom-left{display:flex;gap:12px;align-items:flex-start}
.footer-address{color:rgba(255,255,255,.82)}
.cities-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.social{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.footer-copy{display:flex;justify-content:space-between;gap:10px;color:rgba(255,255,255,.72);font-size:.92rem;border-top:1px solid rgba(255,255,255,.14);padding-top:14px}



.services-grid { gap: 18px; }

.service-card{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  min-height: 280px;
}

.service-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
}

.service-card:focus-visible{
  outline:2px solid rgba(90,153,255,.9);
  outline-offset:3px;
}

.service-card-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.service-card-body {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #00002e;
}

.service-card-title {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    color: white;
}

.service-card-text{
  margin:0;
  color: rgba(255,255,255,.75);
  font-size: 14px;
  line-height: 1.5;
  flex:1;
}

.service-card-more {
    font-weight: 600;
    font-size: 14px;
    opacity: .9;
    color: white;
}
.bubble-icon {
    width: 120px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
    color: #7aa2ff;
    margin-bottom: 2px;
    margin-left: -25px;
}
.section-head.kasthead {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

/* FAQ wrapper */
.faq{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* item card */
.faq-item{
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  overflow: hidden;
}

/* question button */
.faq-q{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  
  font: inherit;
  line-height: 1.35;
}

.faq-q span[itemprop="name"]{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .1px;
}

/* caret */
.faq-q::after{
  content:"";
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-right: 2px solid rgba(255,255,255,.70);
  border-bottom: 2px solid rgba(255,255,255,.70);
  transform: rotate(45deg);
  transition: transform .18s ease, opacity .18s ease;
  opacity: .85;
}

/* hover */
.faq-item:hover{
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.05);
}

/* focus (keyboard) */
.faq-q:focus-visible{
  outline: 2px solid rgba(122,162,255,.85);
  outline-offset: 2px;
}

/* expanded state: rotate caret */
.faq-q[aria-expanded="true"]::after{
  transform: rotate(-135deg);
  opacity: 1;
}

/* answer */
.faq-a{
  padding: 0 18px 16px;
 
  font-size: 14px;
  line-height: 1.65;

  /* анимация раскрытия */
  transform-origin: top;
  animation: faqIn .18s ease;
}

.faq-a div[itemprop="text"]{
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* subtle accent line on the left */
.faq-item{
  position: relative;
}
.faq-item::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 3px;
  background: linear-gradient(180deg, rgba(34, 209, 156, .85), rgba(122,162,255,.65));
  opacity: .0;
  transition: opacity .18s ease;
}
.faq-q[aria-expanded="true"] ~ .faq-a,
.faq-q[aria-expanded="true"]{
  /* nothing, just for readability */
}
.faq-q[aria-expanded="true"]{
  background: rgba(255,255,255,.03);
}
.faq-q[aria-expanded="true"] + .faq-a{
  /* show accent line only when open */
}
.faq-item:has(.faq-q[aria-expanded="true"])::before{
  opacity: .95;
}

/* animation */
@keyframes faqIn{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* mobile */
@media (max-width: 600px){
  .faq-q{ padding: 14px 14px; }
  .faq-a{ padding: 0 14px 14px; }
  .faq-q span[itemprop="name"]{ font-size: 15px; }
}
.section-tight {
    padding: 14px 0;
    background: #00002e;
}

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, .70);
    flex-wrap: wrap;
}

.breadcrumbs .crumb{
  color: rgba(255,255,255,.78);
  text-decoration:none;
}

.breadcrumbs .crumb:hover{ color:#fff; }

.breadcrumbs .crumb-sep{
  opacity:.45;
}

.breadcrumbs .current{
  color: rgba(255,255,255,.95);
}
.apps-grid{ gap: 18px; }

.app-hub-card{
  text-decoration:none;
  color: inherit;
  display:block;
}

.app-card.is-hub{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.app-card.is-hub:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.app-card.is-hub img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}
.app-card-body{
  padding: 14px 16px 16px;
}

.app-card-title{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.2;
}



.catalog-layout{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  align-items:start;
}

.catalog-filter .filter-box{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  padding: 14px;
}

.filter-title{
  font-weight:700;
  margin-bottom: 10px;
}

.filter-group{ margin-top: 14px; }
.filter-group-title{
  font-weight:600;
  margin-bottom: 8px;
  color: rgba(255,255,255,.85);
}

.filter-item, .filter-sub-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  text-decoration:none;
  color: rgba(255,255,255,.82);
}

.filter-item:hover, .filter-sub-item:hover{
  background: rgba(255,255,255,.06);
  color:#fff;
}

.filter-item.is-active, .filter-sub-item.is-active{
  background: rgba(122,162,255,.14);
  border:1px solid rgba(122,162,255,.22);
}

.filter-sub{
  margin: 6px 0 10px 10px;
  border-left: 1px solid rgba(255,255,255,.10);
  padding-left: 10px;
}

.count{
  opacity:.7;
  font-size: 12px;
}

.catalog-topbar{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:center;
  margin-bottom: 14px;
}

.catalog-search{
  display:flex;
  gap: 10px;
  align-items:center;
  flex: 1;
}

.catalog-search input{
  flex:1;
  min-width: 180px;
}

@media (max-width: 980px){
  .catalog-layout{ grid-template-columns: 1fr; }
}


.product-page{ display:block; }

.product-top{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items:start;
}

.product-gallery{
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}



.product-thumbs{
  display:flex;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow:auto;
}

.thumb{
  width: 78px;
  height: 56px;
  border-radius: 12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding:0;
  cursor:pointer;
  flex: 0 0 auto;
}

.thumb.is-active{
  border-color: rgba(122,162,255,.45);
  box-shadow: 0 0 0 2px rgba(122,162,255,.15);
}

.thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.product-side{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  padding: 16px;
}

.product-title{ margin: 0 0 8px; font-size: 26px; line-height: 1.15; }

.product-short{ margin: 0 0 10px; }

.product-tags{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; }

.tag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-size: 12px;
  color: rgba(255,255,255,.85);
}

.tag-link{ text-decoration:none; }
.tag-link:hover{ background: rgba(255,255,255,.08); color:#fff; }

.product-actions{
  display:flex;
  gap: 10px;
  margin: 14px 0;
  flex-wrap: wrap;
}

.product-specs-mini{
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 12px;
}

.mini-title{
  font-weight: 700;
  margin-bottom: 10px;
}

.mini-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,.80);
  line-height: 1.6;
}

.product-tabs{
  margin-top: 22px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  overflow:hidden;
}

.tab-bar{
  display:flex;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

.tab{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.85);
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 600;
}

.tab.is-active{
  background: rgba(122,162,255,.14);
  border-color: rgba(122,162,255,.22);
  color:#fff;
}

.tab-panels{ padding: 16px; }

.tab-panel[hidden]{ display:none; }

@media (max-width: 980px){
  .product-top{ grid-template-columns: 1fr; }
  .product-gallery-main img{ height: 320px; }
}



/* =========================
   FIX: Каталог / Карточки товаров (светлая тема)
   Вставь в конец CSS, чтобы переопределить конфликтные стили
========================= */

/* карточки/каталог — всегда тёмный текст по умолчанию */
.product-grid,
.product-grid .card,
.product-grid .card-body,
.product-grid .card-title,
.product-grid .muted,
.product-grid .btn,
.catalog-content,
.catalog-topbar{
  color: var(--navy);
}

/* Карточка товара в каталоге */
.product-card{
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0,0,48,.06);
}

.product-card .card-body{
  background: #fff;
}

.product-card .muted{
  color: var(--muted);
}

.product-card .btn.btn-ghost{
  border-color: var(--line);
  background: transparent;
  color: var(--navy);
}

/* hover — лёгкий подъём без “инверсии” */
.product-card:hover{
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border-color: rgba(0,0,48,.18);
  box-shadow: 0 18px 54px rgba(0,0,48,.10);
}

/* media */
.card-media{
  display:block;
}
.card-media img {
    height: 190px;
    width: 100%;
    object-fit: contain;
    background: rgb(255 255 255 / 4%);
    margin-top: 10px;
}

/* мета-строка в карточке */
.product-card .card-meta{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* =========================
   FIX: Поиск в каталоге
========================= */
.catalog-search .etinp{
  background:#fff;
  color: var(--navy);
  border: 1px solid var(--line);
}
.catalog-search .etinp::placeholder{
  color: rgba(0,0,48,.45);
}

/* =========================
   Фильтр слева (оставляем тёмным, но аккуратно)
========================= */
.catalog-filter .filter-box{
  background: var(--navy);                      /* как у тебя #00002e */
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

.catalog-filter .filter-title{
  color:#fff;
}

.catalog-filter .filter-item,
.catalog-filter .filter-sub-item{
  color: rgba(255,255,255,.82);
}

.catalog-filter .filter-item:hover,
.catalog-filter .filter-sub-item:hover{
  background: rgba(255,255,255,.06);
  color:#fff;
}

.catalog-filter .filter-item.is-active,
.catalog-filter .filter-sub-item.is-active{
  background: rgba(0,160,96,.16);              /* зелёный в тему бренда */
  border: 1px solid rgba(0,160,96,.22);
}

/* =========================
   FIX: Страница товара (product page) — светлая
   (у тебя тут тоже темная стеклянность с белым текстом)
========================= */

.product-gallery,
.product-side,
.product-tabs{
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0,0,48,.06);
  color: var(--navy);
}

.product-gallery{
  overflow:hidden;
}

.product-gallery-main img {
    width: 100%;
    height: 430px;
    object-fit: contain;
    background: white;
    margin-top: 10px;
}

.product-thumbs{
  border-top: 1px solid var(--line);
  background: #fff;
}

.thumb{
  border: 1px solid var(--line);
  background: #fff;
}

.thumb.is-active{
  border-color: rgba(0,160,96,.55);
  box-shadow: 0 0 0 4px rgba(0,160,96,.14);
}

.product-title{
  color: var(--navy);
}

.product-short,
.product-side .muted,
.product-specs-mini .mini-list{
  color: var(--muted);
}

.tag{
  background: rgba(0,0,48,.04);
  border: 1px solid var(--line);
  color: var(--navy);
}

.tag-link:hover{
  background: rgba(0,0,48,.06);
  color: var(--navy);
}

.product-specs-mini{
  border-top: 1px solid var(--line);
}

.product-tabs .tab-bar{
  background: rgba(0,0,48,.02);
  border-bottom: 1px solid var(--line);
}

.product-tabs .tab{
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
}

.product-tabs .tab.is-active{
  background: rgba(0,160,96,.14);
  border-color: rgba(0,160,96,.22);
  color: var(--navy);
}

/* =========================
   BUGFIX: object-fit пустой в слайдере
========================= */
.slide img{
  object-fit: cover;
}




/* =========================
   Big table (specifications)
========================= */
.big-table {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    box-shadow: 0 14px 40px rgba(0, 0, 48, .06);
    width: 100%;
    border-radius: 10px;
}

.big-table table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 980px;
    width: 100%;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 2px solid;
    margin-bottom: 10px;
}

.big-table td, .big-table th {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    vertical-align: top;
    font-size: 14px;
    color: var(--navy);
    background: #fff;
    text-align: center;
}

.big-table tr:nth-child(even) td,
.big-table tr:nth-child(even) th{
  background: rgba(0,0,48,.02);
}

.big-table tr:first-child td,
.big-table tr:first-child th{
  background: rgba(0,160,96,.08);
  font-weight: 700;
}

.big-table tr td:first-child,
.big-table tr th:first-child{
  font-weight: 650;
}

.big-table tr:last-child td,
.big-table tr:last-child th{
  border-bottom: 0;
}

.big-table td:last-child,
.big-table th:last-child{
  border-right: 0;
}

/* слегка “липкий” первый столбец на широких экранах (по желанию) */
@media (min-width: 980px){
  .big-table table td:first-child,
  .big-table table th:first-child{
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
  }
  .big-table tr:nth-child(even) td:first-child,
  .big-table tr:nth-child(even) th:first-child{
    background: rgba(0,0,48,.02);
  }
  .big-table tr:first-child td:first-child,
  .big-table tr:first-child th:first-child{
    background: rgba(0,160,96,.08);
  }
}

.card-meta .muted.small {
    font-size: 10px;
}

.lead-actions-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.captcha {
    display: flex;
    flex-direction: row;
    gap: 6px;
    min-width: 220px;
}

.captcha-q{
  display:flex;
  align-items:center;
  gap:8px;
  color: var(--muted);
  font-size: 12px;
}

.captcha-label{
  font-weight:700;
  color: var(--navy);
}

.captcha-question {
    font-weight: 700;
    border-radius: 14px;
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--navy);
    min-width: 90px;
    padding: .85rem .9rem;
}

.captcha-refresh{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background:#fff;
  cursor:pointer;
  transition:.18s ease;
}
.captcha-refresh:hover{ transform: translateY(-1px); }

.captcha-input{
  padding:.85rem .9rem;
  border-radius:14px;
  border:1px solid var(--line);
  outline:none;
  background:#fff;
}

.form-error{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,0,0,.18);
  background: rgba(255,0,0,.06);
  color: #7a1b1b;
}



.reviews-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-bottom:10px; }
.reviews-title h3{ margin:0 0 8px; }

.reviews-list{ display:flex; flex-direction:column; gap:12px; margin-top:12px; }

.review-item{
  border:1px solid var(--line);
  border-radius: 16px;
  background:#fff;
  padding: 14px 14px;
  box-shadow: 0 14px 34px rgba(0,0,48,.06);
}

.review-top{ display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:6px; }
.review-author{ font-weight:800; }
.review-stars{ color: var(--green); font-weight:800; letter-spacing:.6px; margin-bottom:6px; }
.review-text{ color: var(--muted); line-height:1.65; }

.review-form-wrap{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.review-form-wrap h3{ margin:0 0 10px; }


.form-grid-tres {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.form-grid-tres label {
    width: 100%;
}


.download-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}

.download-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
    text-decoration: none;
    color: rgb(0 0 44);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.download-item:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
}

.download-name{
  font-weight:650;
}

.download-meta{
  opacity:.85;
  flex:0 0 auto;
}
section.tab-panel h2 {
    margin: 10px 0px;
    text-align: center;
}


.prose {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
.product-apps h3 {
    text-align: center;
}

.prose ul {
    width: 100%;
}
ul.premu {
    width: auto;
}
.reviews-title {
    width: 100%;
}

.lp-tab-under-text {
    margin-left: 16px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.big-table h3 {
    text-align: center;
}

@media (max-width: 560px){
	p {
    font-size: 12px;
}
    li {
        font-size: 12px;
      
    }
	
	
	
	
 }


.row {
    display: flex;
    gap: 2%;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy);
    padding: 20px;
    margin: 10px 0px;
    border-radius: 10px;
    align-items: center;
}

.col-md-8 {
    width: 58%;
}
.col-md-4 {
    width: 40%;
}


.infomap{
  --c1:#0b1220;
  --c2:#42f5c5;
  --txt:#fff;
  --muted:rgba(255,255,255,.85);

  max-width: 1000px;
  margin: 0 auto;
}

.infomap__image {
    position: relative;
    border-radius: 18px;
}

.infomap__image img{
  display:block;
  width:100%;
  height:auto;
}

/* Точка */
.infomap__item {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 9;
}

.infomap__point {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: #48d47b;
    box-shadow: 0 0 0 6px rgb(255 255 255);
    transition: transform .2s ease;
}
.infomap__point:hover{
  transform: scale(1.15);
}

/* Tooltip */
.infomap__tooltip {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 280px;
    background: #00002c;
    color: var(--txt);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 5;
}

.infomap__item.is-active .infomap__tooltip{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.infomap__tooltip-img{
  border-radius:10px;
  overflow:hidden;
  margin-bottom:10px;
}

.infomap__tooltip-img img{
  width:100%;
  height:auto;
  display:block;
}

.infomap__tooltip-title{
  margin:0 0 6px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
}

.infomap__tooltip-text{
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
}


@media (max-width:960px){
.row {
    display: flex;
    gap: 2%;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy);
    padding: 20px;
    margin: 10px 0px;
    border-radius: 10px;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: column;
}
	
	.col-md-4 {
    width: 100%;
}
	.col-md-8 {
    width: 100%;
}
}
/* мобильная адаптация */
@media (max-width:768px){
  .infomap__tooltip{
    width:240px;
  }
}

p.center {
    text-align: center;
    font-weight: 600;
}


/* Тултип, который живёт в <body> */
.infomap-portal{
  position: fixed;
  z-index: 2147483647; /* максимум */
  width: 280px;
  background: var(--c1, #0b1220);
  color: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.infomap-portal.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.infomap-portal__img{
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}
.infomap-portal__img img{ display:block; width:100%; height:auto; }

.infomap-portal__title{
  margin:0 0 6px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
}
.infomap-portal__text{
  font-size:14px;
  line-height:1.5;
  color: rgba(255,255,255,.85);
}

.product-apps-list {
    gap: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.feature-card {
    padding: 15px;
    background: #00002c;
    border: 1px solid var(--line);
    box-shadow: 0 14px 40px rgba(0, 0, 48, .06);
    color: #ffffff;
    border-radius: 10px;
    width: 100%;
}

section.features-grid {
    display: flex;
    gap: 10px;
}

h4.feature-card__title {
    text-align: center;
}

/* =========================
   City selector (header + modal) — style in site theme
   Replace old city styles with this block
========================= */

/* header: logo + city button */
.brand-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.city-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;

  height:36px;
  padding:0 12px;

  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.72);
  color: var(--navy);
  cursor:pointer;

  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 26px rgba(0,0,48,.06);
}

.city-btn:hover{
  transform: translateY(-1px);
  background:#fff;
  border-color: rgba(0,0,48,.18);
  box-shadow: 0 14px 34px rgba(0,0,48,.10);
}

.city-btn:focus-visible{
  outline: 2px solid rgba(0,160,96,.35);
  outline-offset: 3px;
}

.city-btn__label{
  font-size:12px;
  color: rgba(0,0,48,.55);
  font-weight:650;
}

.city-btn__value{
  font-weight:800;
  letter-spacing:.1px;
}

/* small green dot (accent) */
.city-btn::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(0,160,96,.12);
}

/* modal overlay */
.city-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.city-modal[aria-hidden="false"]{ display:block; }

.city-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,48,.50);
  backdrop-filter: blur(6px);
}

/* modal panel */
.city-modal__panel{
  position:relative;
  width: min(820px, calc(100% - 24px));
  margin: 88px auto 0;

  background:#fff;
  color: var(--navy);

  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 22px 70px rgba(0,0,48,.18);

  padding: 18px;
}

/* header inside modal */
.city-modal__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    justify-content: flex-end;
    position: absolute;
    right: 15px;
    top: 15px;
}

.city-modal__title{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .1px;
}

.city-modal__close{
  width: 38px;
  height: 38px;
  border-radius: 12px;

  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);

  cursor:pointer;
  font-size: 22px;
  line-height: 1;

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

.city-modal__close:hover{
  transform: translateY(-1px);
  background: var(--soft);
  border-color: rgba(0,0,48,.18);
}

.city-modal__close:focus-visible{
  outline: 2px solid rgba(0,160,96,.35);
  outline-offset: 3px;
}

/* “Весь Казахстан” — top-right */
.city-modal__all{

  top: 14px;
  right: 14px;

  height: 34px;
  padding: 0 12px;

  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0,0,48,.04);
  color: var(--navy);

  cursor:pointer;
  font-weight: 850;
  font-size: 12px;

  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.city-modal__all:hover{
  transform: translateY(-1px);
  background: rgba(0,160,96,.10);
  border-color: rgba(0,160,96,.22);
  box-shadow: 0 12px 30px rgba(0,0,48,.10);
}

.city-modal__all:focus-visible{
  outline: 2px solid rgba(0,160,96,.35);
  outline-offset: 3px;
}

/* grid of cities */
.city-modal__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 15px;
}

@media (max-width: 860px){
  .city-modal__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .city-modal__panel{ margin: 70px auto 0; padding: 14px; }
  .city-modal__head{ padding-right: 0; }
  .city-modal__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .city-modal__all{ top: 12px; right: 12px; }
}

/* city button item */
.city-item{
  padding: 12px 12px;
  border-radius: 14px;

  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);

  cursor:pointer;
  text-align:left;

  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  box-shadow: 0 12px 30px rgba(0,0,48,.06);
}

.city-item:hover{
  transform: translateY(-1px);
  background: rgba(0,0,48,.02);
  border-color: rgba(0,0,48,.18);
  box-shadow: 0 16px 44px rgba(0,0,48,.10);
}

.city-item:focus-visible{
  outline: 2px solid rgba(0,160,96,.35);
  outline-offset: 3px;
}

/* active city hint (optional): if JS adds .is-active */
.city-item.is-active{
  border-color: rgba(0,160,96,.35);
  box-shadow: 0 0 0 5px rgba(0,160,96,.10), 0 16px 44px rgba(0,0,48,.10);
}

/* lock scroll when modal open (JS toggles class on <html>) */
html.is-city-modal,
html.is-city-modal body{
  overflow:hidden;
}

/* =========================
   Reasons cards (5 in row)
========================= */
.reasons-cards{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.reason-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  padding: 14px 12px 16px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,48,.06);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.reason-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,48,.18);
  box-shadow: 0 18px 54px rgba(0,0,48,.10);
  background: linear-gradient(180deg, rgba(0,160,96,.06), #fff);
}

.reason-card:focus-visible{
  outline: 2px solid rgba(0,160,96,.35);
  outline-offset: 3px;
}

.reason-card__img {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reason-card__img img {
    width: 150%;
    height: 150%;
    object-fit: cover;
    display: block;
}

.reason-card__title{
  margin-top: 12px;
  font-weight: 900;
  letter-spacing: .1px;
}

.reason-card__text{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* responsive */
@media (max-width: 980px){
  .reasons-cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px){
  .reasons-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px){
  .reasons-cards{ grid-template-columns: 1fr; }
    .reason-card {
        text-align: center;
        align-items: center;
        display: flex;
    }
  .reason-card__img{ width: 76px; height: 76px; }
}


/* =========================
   Mega dropdown (Applications)
   Fix: hidden by default, grid on hover
========================= */

/* базово dropdown скрыт */
.dropdown.dropdown-mega{
  /* НЕ задаём display:grid здесь, иначе будет видно всегда */
  width: max-content;
  min-width: 760px;
  padding: 14px;
}

/* на hover включаем grid, а не block */
.has-dropdown:hover > .dropdown.dropdown-mega{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

/* колонки */
.dropdown.dropdown-mega .dropdown-col {
    list-style: none;
    padding: 6px;
    border-radius: 12px;
    max-width: 240px;
}

.dropdown.dropdown-mega .dropdown-title {
    font-weight: 850;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(0, 0, 48, .65);
    margin: 6px 6px 10px;
    line-height: 1;
}

.dropdown.dropdown-mega .dropdown-link {
    display: block;
    padding: 5px 10px;
    border-radius: 12px;
    color: var(--navy);
}

.dropdown.dropdown-mega .dropdown-link:hover{
  background: var(--soft);
}

/* responsive: 2 columns */
@media (max-width: 1100px){
  .dropdown.dropdown-mega{ min-width: 640px; }
  .has-dropdown:hover > .dropdown.dropdown-mega{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* mobile: делаем одной колонкой, но тоже только когда меню открыто */
@media (max-width: 720px){
  .dropdown.dropdown-mega{
    min-width: auto;
    padding: 10px;
  }
  /* В моб.меню hover не нужен, список просто раскрыт в потоке.
     Но у тебя .dropdown на мобиле всё ещё absolute и display:none по умолчанию.
     Поэтому принудительно делаем mega dropdown "обычным" внутри моб.меню. */
     .nav-menu .dropdown.dropdown-mega {
        position: static;
        box-shadow: none;
        border: 0;
        padding: 0px 10px 6px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        background: transparent;
    }
  .dropdown.dropdown-mega .dropdown-col{ padding: 0; }
    .dropdown.dropdown-mega .dropdown-title {
        margin: 0px 6px 6px;
        font-size: 10px;
    }
}

/* =========================
   Pagination
========================= */
.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pager-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background:#fff;
  color: var(--navy);
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.pager-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,48,.18);
  box-shadow: 0 14px 34px rgba(0,0,48,.10);
}

.pager-btn.is-disabled{
  opacity:.45;
  pointer-events:none;
}

.pager-pages{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  justify-content:center;
}

.pager-page{
  min-width: 36px;
  height: 36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background:#fff;
  color: var(--navy);
  text-decoration:none;
}

.pager-page:hover{
  background: var(--soft);
}

.pager-page.is-active{
  background: rgba(0,160,96,.14);
  border-color: rgba(0,160,96,.25);
  font-weight: 800;
}

.pager-dots{
  padding: 0 6px;
  color: rgba(0,0,48,.45);
}

@media (max-width: 720px){
  .pager{
    flex-direction:column;
    align-items:stretch;
  }
  .pager-btn{
    justify-content:center;
  }
}

.section-head h1 {
    line-height: 1;
    width: -webkit-fill-available;
}
.section-head .muted {
    color: var(--muted);
    width: fit-content;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: radial-gradient(700px 200px at 10% 0%, rgba(0, 160, 96, .16), transparent 60%), #fff;
    padding: 18px;
}

/* SEO block: show ~1/3, fade bottom, expand on click */
.seo-cut {
    position: relative;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* регулируй высоту под "1/3" как тебе выглядит лучше */
.seo-cut[data-collapsed="1"] .seo-cut__content{
  max-height: 220px;           /* <= поменяй под дизайн */
  overflow: hidden;
}

.seo-cut__fade{
  display: none;
  position: absolute;
  left: 0; right: 0;
  bottom: 44px;                /* место под кнопку */
  height: 90px;                /* высота “плавного” перехода */
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0),
    rgba(0,0,0,0.65)
  );
}

/* если светлая тема — лучше сделать fade через current bg.
   Если у тебя фон белый, поменяй на rgba(255,255,255,...) */
body:not(.dark) .seo-cut__fade{
  background: linear-gradient(to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,0.92)
  );
}

.seo-cut[data-collapsed="1"] .seo-cut__fade{
  display: block;
}

.seo-cut__btn {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
    opacity: 0.9;
    padding: 6px 0;
    font-size: 20px;
}

.seo-cut__btn:hover{
  opacity: 1;
}

/* expanded state */
.seo-cut[data-collapsed="0"] .seo-cut__content{
  max-height: none;
  overflow: visible;
}

.seo-cut[data-collapsed="0"] .seo-cut__fade{
  display: none;
}

/* =========================
   Applications hub cards — equal height
========================= */

.apps-grid{
  align-items: stretch;
}

.app-hub-card{
  display: block;
  height: 100%;
}

.app-card.is-hub{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
}

.app-card.is-hub img{
  flex: 0 0 auto;
}

.app-card.is-hub .app-card-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}

.app-card.is-hub .app-card-title{
  margin-bottom: 8px;
}

.app-card.is-hub .muted{
  flex: 1 1 auto;
  margin-bottom: 12px;
}

.app-card.is-hub .link{
  margin-top: auto;
  display: inline-flex;
  align-items: center;
}

/* product cards: прижать meta вниз */
.product-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card .card-body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}

.product-card .card-meta{
  margin-top: auto;
}


/* =========================
   Solutions block (typical solutions) — site theme
========================= */

.solutions-grid{
  gap: 18px;               /* как .apps-grid */
  align-items: stretch;
}

.solution-card{
  display:flex;
  flex-direction:column;
  height:100%;
  border-radius: 18px;
  overflow:hidden;

  text-decoration:none;
  color: var(--navy);

  background:#fff;
  border:1px solid var(--line);
  box-shadow: 0 14px 40px rgba(0,0,48,.06);

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.solution-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,48,.18);
  box-shadow: 0 18px 54px rgba(0,0,48,.10);
  background: linear-gradient(180deg, rgba(0,160,96,.06), #fff);
}

.solution-card:focus-visible{
  outline: 2px solid rgba(0,160,96,.35);
  outline-offset: 3px;
}

.solution-card-img {
    width: 100%;
    height: 230px;
    padding-top: 20px;
    object-fit: contain;
    display: block;
    background: rgba(0, 0, 48, .02);
}

.solution-card-body{
  padding: 14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap: 8px;
  flex: 1 1 auto;
}

.solution-card-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.solution-card-text{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  flex: 1 1 auto;          /* растягивает тело, чтобы “Подробнее” ушло вниз */
}

.solution-card-more{
  margin-top: auto;        /* прижать вниз */
  color: var(--green);
  font-weight: 650;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}








.contacts-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 1.2fr);
  gap: 24px;
  align-items: stretch;
}

.contacts-card,
.contacts-map-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--stroke, rgba(15, 23, 42, 0.08));
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.section-head--left {
  text-align: left;
  margin-bottom: 22px;
}

.contacts-list {
  display: grid;
  gap: 16px;
}

.contact-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--stroke, rgba(15, 23, 42, 0.08));
}

.contact-item:first-child {
  padding-top: 0;
}

.contact-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.contact-item__label {
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted, #8d97a5);
  margin-bottom: 6px;
}

.contact-item__value,
.contact-item__value a {
  font-size: 18px;
  line-height: 1.5;
  color: var(--text, #111827);
  text-decoration: none;
  font-weight: 600;
}

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

.contacts-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.contacts-map {
    overflow: hidden;
    border-radius: 18px;
    min-height: 500px;
    background: #f3f4f6;
}

.contacts-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 500px;
}

@media (max-width: 980px) {
  .contacts-layout {
    grid-template-columns: 1fr;
  }

  .contacts-map,
  .contacts-map iframe {
    min-height: 380px;
  }
}

@media (max-width: 640px) {
  .contacts-card,
  .contacts-map-card {
    padding: 20px;
    border-radius: 20px;
  }

  .contact-item__value,
  .contact-item__value a {
    font-size: 16px;
  }

  .contacts-actions {
    flex-direction: column;
  }

  .contacts-actions .btn {
    width: 100%;
  }
}

h1.centr {
    text-align: center;
    margin-top: 40px;
    margin-bottom: -10px;
}



.header-lead-btn{
  min-width:auto;
}

.header-lead-btn svg{
  flex:0 0 auto;
}

button.btn.btn-primary.header-lead-btn img {
    width: 20px;
    display: none;
}

@media (max-width: 980px){
  .header-row{
    gap:12px;
  }

button.btn.btn-primary.header-lead-btn img {
    display: block;
}	
	
  .brand-wrap{
    min-width:0;
    flex:1 1 auto;
  }

  .city-btn{
    min-width:0;
    max-width:160px;
  }

  .city-btn__value{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:block;
    max-width:92px;
  }

  .header-cta{
    flex:0 0 auto;
  }

     .header-lead-btn {
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 14px;
        box-shadow: 0 10px 26px rgba(0, 0, 48, .08);
    }

  .header-lead-btn__text{
    display:none;
  }
}
@media (max-width: 1200px){
	.side-figure img {
    height: 100%;
    object-fit: cover;
    object-position: left;
}
	
	.card-meta .muted.small {
    width: 40%;
    overflow: hidden;
    line-height: 1;
}
	
.nav-menu a {
    padding: 0px 5px;
    border-radius: 0px;
}
	.nav-menu {
    list-style: none;
    display: flex;
    gap: 5px;
    margin: 0;
    padding: 0;
    align-items: center;
    font-size: 14px;
}
	.service-card-img {
    width: 100%;
    height: 235px;
    object-fit: cover;
    display: block;
}
	.services-grid {
    gap: 5px;
}
	.service-card-title {
    font-size: 16px;
}
}
@media (max-width: 1024px){

 
.service-card-body {
 
    height: stretch;
}
 

}

@media (max-width: 980px){
	
	.card-meta .muted.small {
    width: 50%;
    overflow: hidden;
    line-height: 1;
}
	
	.hero h1 {
    margin: .7rem 0 0;
    font-size: 1.8rem;
    line-height: 1;
}
  .hero-grid{grid-template-columns:1fr}
  .slides{height:300px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
     .grid-5 {
        grid-template-columns: repeat(2, 1fr);
        font-size: 12px;
    }
 
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .footer-bottom{grid-template-columns:1fr}

    .service-card-body {
        height: max-content;
    }

  .header-cta{
    margin-left:0;
  }

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

  .form-grid{grid-template-columns:1fr}
  .form-grid .span-2{grid-column:auto}
}
button[type="submit"].btn.btn-primary {
    height: 47px;
    border-radius: 15px;
}

   button.btn.btn-primary.search {

        height: 43px;
    }
@media (max-width: 980px){
  .has-dropdown:hover .dropdown{
    display:block;
  }

  .nav-menu > li{
    display:block;
  }

  .nav-menu > li > a{
    display:flex;
  }
	button[type="submit"].btn.btn-primary {
    width: 100%;
}
    button.btn.btn-primary.search {
        width: auto;
        height: 43px;
    }
	.lead-actions-row {
    width: 100%;
}
}

/* если на мобиле 1 колонка — картинка чуть ниже, чтобы не была огромной */
@media (max-width: 720px){
	h2 {
    line-height: 1;
}
	    .split {
        display: flex;
        flex-direction: column-reverse;
    }
	.split2 {
    display: flex;
    gap: 18px;
    align-items: start;
    flex-direction: column;
}
	.section {
    padding: 25px 0;
}
  .solution-card-img{ height: 170px; }
	
	.service-card-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
	.bubble-icon {
    width: 100px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .06);
    color: #7aa2ff;
    margin-bottom: 2px;
    margin-left: -30px;
}
	
}
@media (max-width: 600px){
	.muted.small {
    font-size: 10px;
    line-height: 1;
}
	.card-title {
    margin: 0 0 10px;
    font-size: 0.9rem; line-height: 1;
}
	p.muted {
    line-height: 1;
}
	.card-media img {
    height: 150px;
    width: 100%;
    object-fit: contain;
    background: rgb(255 255 255 / 4%);
    margin-top: 10px;
}
	.kpi {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 10px 12px;
    min-width: auto;
}
	.bubble {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fff;
}
	    .bubble-icon {
        width: 90px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .06);
        color: #7aa2ff;
        margin-bottom: 2px;
        margin-left: -30px;
    }
	
    .service-card-body {
        height: stretch;
    }
	.service-card {
   
    min-height: 200px;
}
	.section-head h2 {
    margin: 0;
    font-size: 1.6rem;
    line-height: 1;
}
	
	.form-grid-tres {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
}
@media (max-width: 500px){
	.kpi strong {
    display: block;
    font-size: 0.8rem;
}
	.kpi span {
    color: var(--muted);
    font-size: .7rem;
}
      .hero-kpis {
        display: flex;
        gap: 5px;
        margin-top: 12px;
        flex-wrap: wrap;
    }
    .kpi {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 5px 10px;
        min-width: auto;
        line-height: 1;
    }
	
	    .bubble-icon {
        width: 60px;
        height: 10px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .06);
        color: #7aa2ff;
        margin-bottom: 2px;
        margin-left: -25px;
    }
    .grid-3 {
        grid-template-columns: repeat(1, 1fr);
    }
	    .service-card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
	.badge {
    font-size: 12px;
}
	}
@media (max-width: 400px){
    .hero h1 {
        margin: .6rem 0 0;
        font-size: 1.5rem;
        line-height: 1;
    }
	.lead {
    color: var(--muted);
    font-size: 1.05rem;
    margin: .9rem 0 1.2rem;
    line-height: 1.2;
}
	a.btn.btn-ghost {
    font-size: 12px;
}
	button.btn.btn-primary {
    font-size: 12px;
}


.captcha {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
    width: 100%;
}
}
.service-steps-grid{
  gap: 18px;
  align-items: stretch;
}

.service-step-card {
    display: flex;
    gap: 10px;
    min-height: 100%;
    padding: 8px;
}

.service-step-card__icon {
    width: 120px;
    height: 100%;
    min-width: 72px;
    flex: 0 0 120px;
    border-radius: 16px;
    background: rgba(0, 160, 96, .08);
    border: 1px solid rgba(0, 160, 96, .14);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.service-step-card__icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    filter: invert(1);
}
.service-step-card__body{
  flex: 1 1 auto;
}

.service-step-card__body h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.service-step-card__body p{
  margin: 0;
  color: var(--muted);
}

@media (max-width: 640px){
  .service-step-card{
    padding: 16px;
    gap: 12px;
  }

  .service-step-card__icon{
    width: 62px;
    height: 62px;
    min-width: 62px;
    flex: 0 0 62px;
    border-radius: 14px;
  }

  .service-step-card__icon img{
    width: 36px;
    height: 36px;
  }
}


.service-result-box{
  border: 1px solid var(--line);
  border-radius: 24px;
  background:
    radial-gradient(900px 260px at 0% 0%, rgba(0,160,96,.14), transparent 55%),
    #fff;
  box-shadow: 0 14px 40px rgba(0,0,48,.06);
  padding: 28px;
}



.service-result-head h2{
  margin: 0;
}

.service-result-head .muted{
  max-width: 760px;
  font-size: 16px;
  line-height: 1.6;
}

.service-result-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.service-result-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(0, 0, 48, .03);
    border: 1px solid rgba(0, 0, 48, .06);
}

.service-result-item__check{
  width: 32px;
  height: 32px;
  min-width: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.service-result-item__check img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.service-result-item__text{
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--navy);
}

@media (max-width: 980px){
  .service-result-list{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .service-result-box{
    padding: 20px;
    border-radius: 20px;
  }

  .service-result-item{
    padding: 14px;
    border-radius: 16px;
  }

  .service-result-item__text{
    font-size: 16px;
  }

  .service-result-head .muted{
    font-size: 14px;
  }
}

.split2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}
.split2 h3 {
    margin-top: 0px;
    text-align: center;
}

.reason-card__img2 img {
    width: 150%;
    height: 150%;
    object-fit: contain;
    display: block;
}
.reason-card__img2 {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}




.footer-top-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.footer-bottom-grid{
  display:grid;
  grid-template-columns: 1.35fr .8fr .8fr 1fr;
  gap: 24px;
  padding: 24px 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.footer-col h3,
.footer-cities-col h4,
.footer-map-col h4{
  margin: 0 0 12px;
}

.footer-col ul,
.footer-cities-list{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-col li,
.footer-cities-list li{
  margin: 8px 0;
}

.footer-brand-col{
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-contact-link{
  color: rgba(255,255,255,.88);
  text-decoration:none;
}

.footer-contact-link:hover{
  color:#fff;
}

.footer-address {
    color: rgba(255, 255, 255, .82);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer-map-col .map-thumb img {
    width: 100%;
    display: block;
    height: 100%;
}

@media (max-width: 1100px){
  .footer-top-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-bottom-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px){


  .footer-cities-col h4{
    margin-top: 4px;
  }
}

.footer-address span {
    font-weight: 700;
    color: white;
}
.footer-map-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}



span.download-item__icon img {
    width: 40px;
}



.error404-box{
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(900px 260px at 0% 0%, rgba(0,160,96,.16), transparent 55%),
    radial-gradient(900px 260px at 100% 0%, rgba(0,0,48,.10), transparent 55%),
    #fff;
  box-shadow: 0 14px 40px rgba(0,0,48,.08);
  padding: 48px 32px;
  text-align: center;
}

.error404-code{
  font-size: clamp(64px, 12vw, 140px);
  line-height: .9;
  font-weight: 900;
  color: var(--green);
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}

.error404-head{
  justify-content: center;
  flex-direction: column;
  margin-bottom: 22px;
}

.error404-head h1{
  margin: 0;
}

.error404-head .muted{
  max-width: 760px;
  margin: 0 auto;
}

.error404-actions{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.error404-links{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.error404-links a{
  color: var(--green);
  font-weight: 650;
  text-decoration: none;
}

.error404-links a:hover{
  text-decoration: underline;
}

@media (max-width: 640px){
	
  .error404-box{
    padding: 34px 18px;
    border-radius: 22px;
  }

  .error404-actions{
    flex-direction: column;
  }

  .error404-actions .btn{
    width: 100%;
  }
}


.blog-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 4px 0 22px;
}

.blog-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background:#fff;
  color: var(--navy);
  text-decoration:none;
  font-weight:700;
  transition: .18s ease;
}

.blog-tab:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,48,.18);
  box-shadow: 0 14px 34px rgba(0,0,48,.10);
}

.blog-tab.is-active{
  background: linear-gradient(135deg, var(--green), #22c27a);
  color:#fff;
  border-color: transparent;
}

.blog-grid{
  align-items:stretch;
}

.blog-card{
  height:100%;
}

.blog-card-meta{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}



.article-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 14px 40px rgba(0,0,48,.06);
  padding: 26px;
}

.article-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 10px;
}

.article-title {
    margin: 0 0 12px;
    font-size: clamp(24px, 4vw, 44px);
    line-height: 1.1;
}

.article-excerpt{
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 18px;
}

.article-cover{
  border-radius: 18px;
  overflow:hidden;
  border:1px solid var(--line);
  margin-bottom: 22px;
}

.article-cover img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

.article-content{
  align-items:flex-start;
}

.article-content h2,
.article-content h3,
.article-content h4{
  width:100%;
}

.article-content p,
.article-content ul,
.article-content ol,
.article-content blockquote{
  width:100%;
}

.article-content img{
  border-radius:16px;
  margin: 14px 0;
}

@media (max-width: 720px){
  .article-card{
    padding: 18px;
    border-radius: 18px;
  }

  .article-excerpt{
    font-size: 16px;
  }
	.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
    margin-bottom: 18px;
    flex-direction: column;
}
    .footer-bottom-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
	.footer-cities-col {
    width: 40%;
}
	ul.footer-cities-list.list2 {
    margin-top: 8px;
}
}


/* =========================
   Catalog filter mobile
========================= */

.catalog-filter-mobile{
  display: none;
}

.catalog-filter-mobile__row{
  display: flex;
  gap: 10px;
  align-items: end;
}

.catalog-filter-mobile__field{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.catalog-filter-mobile__label{
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  line-height: 1.1;
}

.catalog-filter-select{
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: #fff;
  outline: none;
  box-shadow: none;
}

.catalog-filter-select:focus{
  border-color: rgba(0,160,96,.45);
  box-shadow: 0 0 0 4px rgba(0,160,96,.12);
}

.catalog-filter-select option{
  background: #00002e;
  color: #fff;
}

@media (max-width: 980px){
  .catalog-filter .filter-box{
    padding: 12px;
  }

  .catalog-filter-mobile{
    display: block;
  }

  .catalog-filter-desktop{
    display: none;
  }

  .catalog-filter .filter-title{
    margin-bottom: 8px;
  }
}

@media (max-width: 640px){
	
  .catalog-filter-mobile__row{
    gap: 8px;
  }
h1 {
    font-size: 24px;
}
h2, .section-head h2 {
    font-size: 20px;
}	
  .catalog-filter-mobile__label{
    font-size: 11px;
  }

  .catalog-filter-select{
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
  }

  .catalog-filter .filter-box{
    border-radius: 14px;
    padding: 10px;
  }

  .catalog-filter .filter-title{
    font-size: 14px;
    margin-bottom: 6px;
  }
}

@media (max-width: 360px){
	
	    .dropdown.dropdown-mega .dropdown-link {
        display: block;
        padding: 0px 12px;
        border-radius: 10px;
        color: var(--muted);
    }
	    .nav-menu .dropdown a {
        display: block;
        padding: 0px 12px;
        border-radius: 10px;
        color: var(--muted);
    }
	
	.nav-menu .dropdown a {
    line-height: 1.5;
}
	
  .footer-top-grid,
  .footer-bottom-grid{
    grid-template-columns: 1fr;
  }	
.catalog-filter-mobile__field {
    width: 100%;
}	
.catalog-filter-mobile__row {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-direction: column;
}	
	.catalog-topbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
    flex-direction: column;
}
}

.ifram {
    width: 100%;
    height: 600px;
}
iframe {
    width: 100%;
    height: 100%;
}


.article-app-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:14px 0 18px;
}

.article-app-tag {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgb(0 0 44);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    transition: .2s ease;
}

.article-app-tag:hover {
    background: rgb(91 188 126);
}


/* =========================
   Article FAQ — в стиле текущего FAQ
========================= */

.article-faq{
  width: 100%;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-faq-title {
    margin: 0 0 8px;
    font-size: 28px;
    line-height: 1.1;
    color: var(--navy);
    width: 100%;
    text-align: center;
}

.article-faq-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.article-faq-item{
  position: relative;
  width: 100%;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(0,0,48,.06);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.article-faq-item:hover{
  border-color: rgba(0,0,48,.18);
  box-shadow: 0 18px 44px rgba(0,0,48,.09);
  background: linear-gradient(180deg, rgba(0,160,96,.03), #fff);
}

.article-faq-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background: linear-gradient(180deg, rgba(34,209,156,.95), rgba(122,162,255,.75));
  opacity: 0;
  transition: opacity .18s ease;
}

/* details base */
.article-faq-item[open]::before{
  opacity: .95;
}

.article-faq-question{
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 16px 44px 16px 18px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
  transition: background .18s ease;
}

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

.article-faq-item[open] .article-faq-question{
  background: rgba(0,0,48,.02);
}

/* caret */
.article-faq-question::after{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:12px;
  height:12px;
  border-right:2px solid rgba(0,0,48,.55);
  border-bottom:2px solid rgba(0,0,48,.55);
  transform: translateY(-60%) rotate(45deg);
  transition: transform .18s ease, opacity .18s ease;
  opacity:.85;
}

.article-faq-item[open] .article-faq-question::after{
  transform: translateY(-30%) rotate(-135deg);
  opacity:1;
}

/* answer */
.article-faq-answer{
  padding: 0 18px 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  animation: articleFaqIn .18s ease;
}

.article-faq-answer p{
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

@keyframes articleFaqIn{
  from{
    opacity:0;
    transform: translateY(-4px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}

@media (max-width: 720px){
  .article-faq-title{
    font-size: 22px;
  }

  .article-faq-question{
    padding: 14px 40px 14px 14px;
    font-size: 15px;
  }

  .article-faq-answer{
    padding: 0 14px 14px;
    font-size: 14px;
  }

  .article-faq-question::after{
    right:14px;
  }
}








/* =========================
   Floating footer contact bar
========================= */



.footer-floatbar {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 999;
    width: min(92vw, 430px);
    pointer-events: none;
}

.footer-floatbar__shape {
    position: relative;
    pointer-events: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px;
    background: linear-gradient(180deg, #00003a 0%, #00002c 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 48, .22), 0 -2px 10px rgba(0, 0, 48, .14);
    justify-content: center;
}

/* расширение к низу + "выход" из края экрана */
.footer-floatbar__shape::before,
.footer-floatbar__shape::after{
  content:"";
  position:absolute;
  bottom: -1px;
  width: 34px;
  height: 34px;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.14);
  z-index: 1;
  pointer-events: none;
}

/* левый "обратный" угол */
.footer-floatbar__shape::before{
  right: 100%;
  border-bottom-right-radius: 24px;
  box-shadow: 12px 12px 0 12px #00002c;
}

/* правый "обратный" угол */
.footer-floatbar__shape::after{
  left: 100%;
  border-bottom-left-radius: 24px;
  box-shadow: -12px 12px 0 12px #00002c;
}

.footer-floatbar__phone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.footer-floatbar__phone:hover{
  color:#fff;
  transform: translateY(-2px);
}

.footer-floatbar__phone-icon{
  display: none;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.footer-floatbar__phone-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}

.footer-floatbar__phone:hover{
  color: #fff;
}

.footer-floatbar__actions{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.footer-floatbar__icon,
.footer-floatbar__mail{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.footer-floatbar__icon{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.footer-floatbar__icon svg{
  width: 20px;
  height: 20px;
  display: block;
}

.footer-floatbar__icon--wa:hover{
  background: #1fa855;
  border-color: transparent;
  transform: translateY(-2px);
}

.footer-floatbar__icon--tg:hover{
  background: #229ED9;
  border-color: transparent;
  transform: translateY(-2px);
}

.footer-floatbar__icon--mail:hover {
    background: linear-gradient(135deg, #ed7b2f, #c26122);
    border-color: transparent;
    transform: translateY(-2px);
}

@media (max-width: 640px){
  body{
    padding-bottom: 0;
  }

  .footer-floatbar{
    left: auto;
    right: 10px;
    bottom: 84px;
    transform: none;
    width: auto;
  }

	a.footer-floatbar__icon.footer-floatbar__icon--wa {
    background: #1fa855;
}
	a.footer-floatbar__icon.footer-floatbar__icon--tg {
    background: #229ED9;
}
	a.footer-floatbar__icon.footer-floatbar__icon--mail {
    background: linear-gradient(135deg, #ed7b2f, #c26122);
}
  .footer-floatbar__shape{
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .footer-floatbar__shape::before,
  .footer-floatbar__shape::after{
    display: none;
  }

  .footer-floatbar__actions{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

   .footer-floatbar__phone {
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 0;
        border-radius: 999px;
        background: #00002e;
    }

  .footer-floatbar__phone-text{
    display: none;
  }

  .footer-floatbar__phone-icon{
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .footer-floatbar__icon{
    width: 44px;
    height: 44px;
  }

  .footer-floatbar__icon svg{
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 420px){
  .footer-floatbar__actions{
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .footer-floatbar__mail{
    padding: 0 12px;
  }
}

.article-author-box {
    width: 100%;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: radial-gradient(700px 200px at 10% 0%, rgba(0, 160, 96, .10), transparent 60%), #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 48, .06);
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}
.article-author-box__name{
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--navy);
 
}

.article-author-box__role{
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
 
}

.article-author-box__dates{
  display: flex;
  flex-wrap: wrap;
  gap: 5px 5px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

@media (max-width: 720px){
 
.article-author-box {
    width: 100%;
    margin: 0 0 10px;
    padding: 10px 10px;
    border: 1px solid var(--line);
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}
  .article-author-box__name{
    font-size: 16px;
  }

  .article-author-box__role,
  .article-author-box__dates{
    font-size: 13px;
  }

  
}







.app-spheres-grid{
  gap:24px;
}

.app-sphere-card{
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
  color:inherit;
  background:#fff;
  border:1px solid rgba(15, 23, 42, 0.08);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(2, 6, 23, 0.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.app-sphere-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(2, 6, 23, 0.10);
  border-color:rgba(15, 23, 42, 0.14);
}

.app-sphere-card__img{
  display:block;
  width:100%;
  aspect-ratio: 16 / 10;
  object-fit:cover;
}

.app-sphere-card__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:22px 22px 20px;
}

.app-sphere-card__body h3{
  margin:0 0 12px;
  font-size:22px;
  line-height:1.25;
}

.app-sphere-card__body p{
  margin:0;
  color:#4b5563;
  line-height:1.65;
}

.app-sphere-card__more {
    padding-top: 16px;
    margin-top: auto;
    color: var(--green);
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 991px){
  .app-spheres-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .app-spheres-grid{
    grid-template-columns:1fr;
  }

  .app-sphere-card__body h3{
    font-size:20px;
  }
}


.article-rating, .article-share {
    margin-top: 0px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    flex-direction: column;
}

section.article-share {
    margin-bottom: 40px;
}

.article-rating__row,
.article-share__list {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.article-rating__label, .article-share__title {
    font-weight: 600;
    color: #000032;
}

.article-rating__stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.article-rating__star {
    border: 0;
    background: transparent;
    color: rgb(0 0 52);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: transform .15s ease, color .15s ease;
}

.article-rating__star:hover,
.article-rating__star.is-active {
  color: #ffb400;
}

.article-rating__star:hover {
  transform: scale(1.06);
}

.article-rating__meta, .article-rating__note, .article-share__note {
    color: rgb(0 0 53);
    font-size: 14px;
}

.article-share__list {
  margin-top: 10px;
}

.article-share__item {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 51);
    border: 1px solid rgba(255, 255, 255, .10);
    color: #fff;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
    cursor: pointer;
}

.article-share__item:hover {
    transform: translateY(-1px);
    background: rgb(83 177 117);
    border-color: rgba(255, 255, 255, .22);
}

.article-share__item svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.article-share__item--copy {
  appearance: none;
  -webkit-appearance: none;
}

@media (max-width: 767px) {
  .article-rating__star {
    font-size: 24px;
  }

  .article-share__item {
    width: 38px;
    height: 38px;
  }
}


.hp-field {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
}

form.review-form .lead-actions-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}


@media (max-width: 450px){
	.article-rating__row, .article-share__list {
    display: flex;
    align-items: center;
    gap: 2px;
}
	.article-rating__row {
    display: flex;
    flex-direction: column;
}
}

@media (max-width: 1024px) {
  .nav-menu .dropdown.dropdown-mega {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    width: 100%;
    max-width: 100%;
  }

  .nav-menu .dropdown.dropdown-mega .dropdown-col {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }
}

@media (max-width: 1024px){
  .nav{
    margin-left: auto;
    position: static;
    line-height: 0;
  }

   .site-header{
    position: sticky;
    top: 0;
    z-index: 1000;
  }

 .nav-toggle{
    display:inline-flex;
    width:36px;
    height:36px;
    padding:0;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    border-radius:14px;
    border:1px solid var(--line);
    background:#fff;
    box-shadow:0 10px 26px rgba(0,0,48,.08);
    cursor:pointer;
    position:relative;
    z-index:10021;
  }

  .nav-toggle span{
    width:20px;
    height:2px;
    border-radius:999px;
    background:var(--navy);
    transition:transform .18s ease, opacity .18s ease;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,48,.48);
    backdrop-filter: blur(4px);
    z-index: 10010;
  }


    .nav-menu {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 36px;

        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        max-height: min(90dvh, calc(100dvh - var(--header-h, 40px) - 0px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        box-shadow: 0 18px 45px rgba(0, 0, 48, .12);
        z-index: 10020;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

   .nav-menu.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-menu > li{
    display:block;
  }

  .nav-menu > li > a{
    display:flex;
    align-items:center;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 12px;
    font-weight: 600;
  }

  .nav-menu .has-dropdown{
    position: static;
  }

  .nav-menu .dropdown{
    position: static;
    display: block;
    min-width: 0;
    margin-top: 4px;
    padding: 6px 0 0 10px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }

  .nav-menu .dropdown a,
  .dropdown.dropdown-mega .dropdown-link{
    display:block;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--muted);
  }

  .nav-menu .dropdown a:hover,
  .dropdown.dropdown-mega .dropdown-link:hover{
    background: var(--soft);
    color: var(--navy);
  }

  .dropdown.dropdown-mega .dropdown-col{
    list-style:none;
    padding: 6px;
    border-radius: 12px;
    max-width: none;
    width: 100%;
  }

  .nav-menu .dropdown.dropdown-mega{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px;
    width: 100%;
    max-width: 100%;
  }

html.is-menu-open{
  overflow: hidden;
  touch-action: none;
}
}

.page-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 48, .48);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    z-index: 99;
    transition: opacity .18s ease;
}

.page-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}