/* === Основные переменные === */
:root {
  --color-bg: #f8fafd;
  --color-bg-section: #ffffff;
  --color-primary: #236bf2;
  --color-primary-gradient: linear-gradient(90deg, #236bf2 0%, #5ba2ff 100%);
  --color-secondary: #ffe16d;
  --color-text-main: #232940;
  --color-text-muted: #627399;
  --color-cta: #ffb366;
  --color-success: #139d47;
  --radius-xl: 28px;
  --radius-md: 16px;
  --shadow-main: 0 4px 32px #236bf220;
  --shadow-cta: 0 2px 16px #236bf220;
  --font-main: 'Inter', 'Montserrat', Arial, sans-serif;
}

/* === Общий Reset и базовые стили === */
body {
  font-family: var(--font-main);
  font-size: 17px;
  color: var(--color-text-main);
  background: var(--color-bg);
  margin: 0;
  padding: 0;
  line-height: 1.58;
  letter-spacing: 0.01em;
  min-height: 100vh;
}
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover {
  color: #10366f;
  text-decoration: underline;
}
h1, h2, h3, .section-title {
  font-family: var(--font-main);
  font-weight: 800;
  color: var(--color-text-main);
  letter-spacing: -0.02em;
}
h1 { font-size: 2.6rem; margin-bottom: 22px; }
h2 { font-size: 2rem; margin-bottom: 18px; }
.section-title {
  font-size: 1.55rem;
  font-weight: 800;
  margin: 0 0 22px 0;
  letter-spacing: -0.01em;
  text-align: left;
}

/* === Header === */
.header-navbar {
  background: var(--color-bg-section);
  box-shadow: var(--shadow-main);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1220px;
  margin: 0 auto;
  padding: 14px 32px 8px 32px;
}
.header-logo {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--color-primary);
  display: flex;
  align-items: center;
}
.header-logo span {
  color: var(--color-text-main);
  margin-left: 4px;
  font-weight: 700;
}
.header-badges {
  display: flex;
  gap: 14px;
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-left: 24px;
}
.header-menu {
  margin-left: auto;
  margin-right: 34px;
}
.navmenu {
  display: flex;
  gap: 30px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.navmenu li a {
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-md);
  transition: background 0.2s;
}
.navmenu li a:hover,
.navmenu li.current-menu-item a {
  background: var(--color-primary-gradient);
  color: #fff;
}
.header-contacts {
  display: flex;
  gap: 11px;
}
.contact-btn {
  font-size: 1.47rem;
  display: inline-block;
  padding: 7px 10px;
  background: #f3f7fd;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-cta);
  transition: background 0.2s, transform 0.18s;
}
.contact-btn:hover {
  background: var(--color-primary);
  color: #fff;
  transform: translateY(-3px) scale(1.07);
}
.hamburger {
  background: none;
  border: none;
  width: 37px;
  height: 37px;
  display: none;
  cursor: pointer;
}
.hamburger span,
.hamburger span:before,
.hamburger span:after {
  display: block;
  position: absolute;
  width: 24px;
  height: 3.5px;
  background: var(--color-primary);
  border-radius: 3px;
  content: '';
  left: 0;
  transition: 0.25s;
}
.hamburger span:before { top: -8px; }
.hamburger span:after { top: 8px; }

/* === Hero Section === */
.main-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-section);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-main);
  padding: 46px 32px 38px 32px;
  margin: 28px auto 36px auto;
  max-width: 1200px;
  min-height: 370px;
  gap: 32px;
  position: relative;
}
.hero-content {
  flex: 1 1 52%;
}
.hero-content h1 {
  margin-top: 0;
  font-size: 2.35rem;
  font-weight: 900;
  color: var(--color-primary);
}
.hero-usp {
  font-size: 1.18rem;
  margin: 18px 0 12px 0;
  color: var(--color-text-main);
}
.hero-usp .highlight {
  color: var(--color-primary);
  font-weight: 700;
}
.expert-badge {
  display: inline-block;
  background: var(--color-secondary);
  color: var(--color-text-main);
  font-size: 1.05rem;
  padding: 6px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 15px;
  margin-right: 8px;
}
.hero-cta {
  display: inline-block;
  margin-top: 19px;
  background: var(--color-primary-gradient);
  color: #fff;
  padding: 12px 29px;
  border-radius: var(--radius-md);
  font-size: 1.14rem;
  font-weight: 700;
  box-shadow: var(--shadow-cta);
  transition: background 0.21s, transform 0.16s;
}
.hero-cta:hover {
  background: #1866b6;
  transform: translateY(-2px) scale(1.04);
}
.hero-photo-wrap {
  flex: 1 1 34%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 220px;
}
.hero-photo-wrap img {
  width: 280px;
  max-width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: 0 7px 44px #236bf240;
}

/* === Кейсы (Cases Section) === */
.section {
  max-width: 1150px;
  margin: 38px auto 38px auto;
  background: var(--color-bg-section);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-main);
  padding: 36px 30px 36px 30px;
}
.cases-grid-wrap {
  margin-top: 18px;
}
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 32px;
}
.case-card {
  background: #f5f9ff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-main);
  padding: 24px 19px 22px 19px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: box-shadow 0.2s, transform 0.14s;
  position: relative;
}
.case-card:hover {
  box-shadow: 0 10px 44px #236bf230;
  transform: translateY(-3px) scale(1.04);
}
.case-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.case-card-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  background: #e6edff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}
.case-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  transition: color 0.15s;
}
.case-card-title:hover { color: #10366f; }
.case-card-desc {
  color: var(--color-text-muted);
  font-size: 1rem;
  margin-bottom: 9px;
}
.case-card-meta {
  font-size: 0.97rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.case-card-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: underline;
}
.case-card-btn {
  margin-top: auto;
  align-self: flex-end;
  background: var(--color-primary-gradient);
  color: #fff;
  padding: 9px 23px;
  border-radius: var(--radius-md);
  font-size: 1.06rem;
  font-weight: 700;
  box-shadow: var(--shadow-cta);
  transition: background 0.2s;
}
.case-card-btn:hover {
  background: #1866b6;
  color: #fff;
}

/* === Калькулятор SEO === */
.seo-calc-outer {
  background: var(--color-bg-section);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-main);
  max-width: 1140px;
  margin: 44px auto 30px auto;
  padding: 40px 30px 44px 30px;
}
.seo-calc-badges {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1rem;
}
.seo-calc-wrap {
  display: flex;
  gap: 46px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.seo-calc-left {
  flex: 1 1 360px;
  min-width: 320px;
  max-width: 420px;
  background: #f5f9ff;
  padding: 25px 22px 20px 22px;
  border-radius: var(--radius-md);
  box-shadow: 0 2px 14px #236bf215;
}
.seo-calc-left h2 {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--color-primary);
}
.seo-calc-fields label {
  font-weight: 700;
  display: block;
  margin-top: 18px;
  margin-bottom: 3px;
  color: var(--color-text-main);
}
.seo-calc-fields input,
.seo-calc-fields select {
  width: 100%;
  padding: 9px 13px;
  border-radius: 7px;
  border: 1px solid #e0e7ef;
  margin-bottom: 2px;
  font-size: 1.01rem;
  background: #fff;
  transition: border 0.16s;
}
.seo-calc-fields input:focus,
.seo-calc-fields select:focus {
  outline: none;
  border: 1.5px solid var(--color-primary);
}
.seo-calc-btn {
  display: block;
  width: 100%;
  background: var(--color-primary-gradient);
  color: #fff;
  border: none;
  padding: 13px 0;
  margin-top: 19px;
  border-radius: var(--radius-md);
  font-size: 1.12rem;
  font-weight: 800;
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  transition: background 0.18s;
}
.seo-calc-btn:hover {
  background: #1866b6;
}
.seo-calc-result {
  margin-top: 17px;
  font-size: 1.13rem;
}
.seo-calc-right {
  flex: 1 1 280px;
  min-width: 230px;
  max-width: 380px;
  padding: 0 0 0 17px;
}
.seo-calc-guarantee {
  background: #f1f9ec;
  color: var(--color-success);
  border-radius: 11px;
  font-size: 1.07rem;
  padding: 10px 16px;
  margin-bottom: 19px;
  font-weight: 600;
  box-shadow: 0 2px 13px #139d4710;
}
.seo-calc-secrets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
  font-size: 1.03rem;
}
.seo-calc-secrets li {
  margin-bottom: 12px;
  padding-left: 0;
  display: flex;
  align-items: center;
}
.seo-calc-secrets li:before {
  content: "•";
  color: var(--color-primary);
  font-size: 1.4em;
  margin-right: 7px;
  margin-top: -2px;
}
.seo-calc-expert {
  display: flex;
  align-items: center;
  margin-top: 14px;
  font-size: 1rem;
  color: var(--color-text-muted);
}

/* === Блоки преимуществ === */
.benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 19px;
  margin-top: 19px;
}
.benefit {
  background: #e6edff;
  color: var(--color-text-main);
  border-radius: var(--radius-md);
  font-size: 1.08rem;
  padding: 16px 18px;
  font-weight: 700;
  box-shadow: 0 2px 10px #236bf218;
}

/* === CTA Block === */
.cta-block {
  background: var(--color-cta);
  color: #232940;
  font-size: 1.16rem;
  font-weight: 800;
  padding: 22px 20px;
  border-radius: var(--radius-xl);
  box-shadow: 0 3px 16px #ffb36621;
  margin: 38px auto 28px auto;
  max-width: 900px;
  text-align: center;
}

/* === Отзывы (Reviews) === */
.review-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 23px;
  margin-top: 24px;
}
.review {
  background: #f6faff;
  color: var(--color-text-main);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  font-size: 1.08rem;
  box-shadow: 0 2px 10px #236bf218;
  font-style: italic;
}
.review .who {
  display: block;
  font-weight: 700;
  color: var(--color-primary);
  font-style: normal;
  margin-bottom: 5px;
}

/* === Хлебные крошки (Breadcrumbs) === */
.breadcrumbs {
  font-size: 0.99rem;
  color: var(--color-text-muted);
  margin: 12px 0 24px 0;
  display: flex;
  align-items: center;
}
.breadcrumbs a {
  color: var(--color-primary);
  text-decoration: underline;
}
.breadcrumbs-sep {
  margin: 0 7px;
  color: #adb8d5;
}

/* === Footer === */
.footer {
  background: #232940;
  color: #c6deff;
  text-align: center;
  padding: 28px 10px 22px 10px;
  font-size: 1.05rem;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin-top: 45px;
}
.footer a { color: #c6deff; }

/* === Мобильная адаптация === */
@media (max-width: 1020px) {
  .header-navbar-inner { flex-direction: column; padding: 16px 10px 10px 10px; }
  .main-hero, .section, .seo-calc-outer { padding: 19px 6vw; }
}
@media (max-width: 900px) {
  .main-hero { flex-direction: column-reverse; align-items: stretch; min-height: unset; }
  .hero-photo-wrap { justify-content: center; }
  .hero-content { text-align: center; }
  .cases-grid { grid-template-columns: 1fr; }
  .review-list { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }
  .section { padding: 22px 2vw; }
}
@media (max-width: 600px) {
  .main-hero, .section, .seo-calc-outer { padding: 10px 3vw; }
  .footer { padding: 18px 5px; font-size: 0.97rem; }
  .header-logo { font-size: 1.18rem; }
  .header-badges { font-size: 0.85rem; }
}

/* --- Доп. плавные анимации --- */
.case-card, .review, .benefit, .cta-block, .hero-cta, .case-card-btn, .contact-btn {
  transition: box-shadow 0.2s, background 0.18s, transform 0.15s;
}
@media (max-width: 600px) {
  .header-navbar-inner {
    flex-direction: column;
    align-items: center;
    padding: 10px 2vw 8px 2vw;
    gap: 0;
  }
  .header-brandblock {
    width: 100%; align-items: center; margin-bottom: 4px; text-align: center;
  }
  .header-logo { font-size: 1.18rem; }
  .header-meta { font-size: 0.91rem; margin-top: 2px; opacity: .78; }
  .header-actions {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin-top: 6px;
    margin-bottom: 0;
  }
  .mobile-contacts-row {
    display: flex; flex-direction: row; gap: 9px;
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .contact-icon {
    background: #f2f6fd;
    border-radius: 7px;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    padding: 0;
    margin: 0;
    transition: background .14s;
  }
  .contact-icon img {
    width: 21px; height: 21px; display: block;
  }
  .contact-icon:active, .contact-icon:focus, .contact-icon:hover {
    background: #dbefff;
  }
  .cta-header-btn {
    min-width: 98px;
    max-width: 120px;
    background: linear-gradient(90deg,#236bf2,#5ba2ff);
    color: #fff; font-size: 1.01rem; font-weight: 800;
    border-radius: 10px;
    padding: 7px 0;
    height: 34px;
    margin-left: 10px;
    margin-right: 3px;
    box-shadow: 0 2px 10px #5ba2ff12;
    text-align: center;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
  }
  .header-burger {
    margin-left: 0;
    align-self: flex-end;
    margin-top: 0;
    margin-bottom: 0;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header-burger span {
    display: block;
    width: 21px;
    height: 3px;
    background: #236bf2;
    border-radius: 2px;
    margin: 4px 0;
    transition: all .22s cubic-bezier(.4,0,.2,1);
  }
}
.header-navbar {
  background: #fff;
  box-shadow: 0 4px 18px #236bf112;
  border-radius: 0 0 20px 20px;
  position: sticky; top: 0; z-index: 100;
}
.header-navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1260px; margin: 0 auto; padding: 10px 30px 6px 30px;
  gap: 12px;
}
.header-brandblock { display: flex; flex-direction: column; align-items: flex-start; }
.header-logo {
  font-size: 1.44rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #236bf2;
  text-decoration: none;
  line-height: 1.1;
}
.header-logo b { color: #1465e7; margin-right: 2px; }
.header-meta {
  font-size: 1.01rem;
  color: #2d3757;
  margin-top: 2px;
  opacity: .8;
  font-weight: 500;
}
.header-actions {
  display: flex; align-items: center; gap: 9px;
}
.contact-btn {
  display: flex; align-items: center; gap: 6px;
  background: #f2f6fd;
  color: #236bf2;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 11px;
  padding: 6px 13px;
  height: 36px;
  box-shadow: none;
  min-width: 0;
  transition: background .16s, color .16s, box-shadow .15s;
}
.contact-btn img { width: 18px; height: 18px; margin: 0; filter: none !important; }
.contact-btn:hover {
  background: #e3eeff;
  color: #236bf2;
  box-shadow: 0 2px 10px #5ba2ff12;
}
.contact-btn:hover img { filter: none !important; }
.cta-header-btn {
  background: linear-gradient(90deg,#236bf2,#5ba2ff);
  color: #fff;
  font-size: 1.07rem;
  font-weight: 800;
  border: none;
  border-radius: 16px;
  padding: 7px 22px;
  height: 36px;
  margin-left: 9px;
  transition: background .17s, box-shadow .17s;
  box-shadow: 0 2px 12px #5ba2ff22;
  letter-spacing: -0.01em;
  display: flex; align-items: center; justify-content: center;
}
.cta-header-btn:hover { background: #236bf2; }
.header-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: none; border: none;
  width: 36px; height: 36px;
  cursor: pointer;
  margin-left: 10px;
  padding: 0;
}
.header-burger span {
  display: block;
  width: 23px;
  height: 3px;
  background: #236bf2;
  border-radius: 2px;
  margin: 4px 0;
  transition: all .22s cubic-bezier(.4,0,.2,1);
}
.header-burger span:last-child { margin-bottom: 0; }
.header-burger:focus { outline: 2px solid #236bf2; }

/* --- Dropdown меню --- */
.header-dropdown-menu {
  display: none;
  width: 100%;
  background: #fff;
  box-shadow: 0 10px 32px #236bf122, 0 2px 12px #0001;
  border-radius: 0 0 18px 18px;
  position: absolute;
  left: 0; top: 100%;
  z-index: 200;
  animation: menuDropIn .34s cubic-bezier(.4,0,.2,1);
  border-top: 1px solid #f1f3f7;
}
@keyframes menuDropIn {
  0% {opacity:0; transform: translateY(-12px);}
  100% {opacity:1; transform: translateY(0);}
}
.header-dropdown-menu.open { display: block; }
.dropdown-menu-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 30px 18px 30px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 56px;
  justify-content: flex-start;
}
.navmenu-dropdown {
  display: flex;
  flex-direction: row;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navmenu-dropdown li a {
  font-size: 1.09rem;
  font-weight: 700;
  color: #1c273f;
  border-radius: 8px;
  padding: 8px 15px;
  transition: background .18s, color .18s;
  text-decoration: none;
  display: block;
}
.navmenu-dropdown li a:hover, .navmenu-dropdown li.current-menu-item a {
  background: #eaf3fa;
  color: #236bf2;
}
.dropdown-usp {
  font-size: 1.02rem;
  color: #236bf2;
  background: #f4f9ff;
  border-radius: 10px;
  padding: 14px 22px;
  font-weight: 700;
  margin-left: auto;
}
@media (max-width: 1020px) {
  .header-navbar-inner { padding: 7px 10px; }
  .dropdown-menu-inner { flex-direction: column; gap: 20px; padding: 16px 5vw 14px 5vw; }
  .navmenu-dropdown { flex-direction: column; gap: 12px; }
  .dropdown-usp { margin-left: 0; margin-top: 14px;}
}
@media (max-width: 780px) {
  .header-navbar-inner { flex-direction: column; gap: 8px; align-items: flex-start;}
  .header-actions { width: 100%; gap: 6px; margin-top: 6px;}
  .dropdown-menu-inner { padding: 16px 2vw 12px 2vw;}
}
@media (max-width: 600px) {
  .header-navbar-inner {
    flex-direction: column;
    align-items: center;
    padding: 10px 2vw 8px 2vw;
    gap: 0;
  }
  .header-brandblock {
    width: 100%; align-items: center; margin-bottom: 4px; text-align: center;
  }
  .header-logo { font-size: 1.18rem; }
  .header-meta { font-size: 0.91rem; margin-top: 2px; opacity: .78; }
  .header-actions {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin-top: 6px;
    margin-bottom: 0;
  }
  .mobile-contacts-row {
    display: flex; flex-direction: row; gap: 9px;
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .contact-icon {
    background: #f2f6fd;
    border-radius: 7px;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    padding: 0;
    margin: 0;
    transition: background .14s;
  }
  .contact-icon img {
    width: 21px; height: 21px; display: block;
  }
  .contact-icon:active, .contact-icon:focus, .contact-icon:hover {
    background: #dbefff;
  }
  .cta-header-btn {
    min-width: 98px;
    max-width: 120px;
    background: linear-gradient(90deg,#236bf2,#5ba2ff);
    color: #fff; font-size: 1.01rem; font-weight: 800;
    border-radius: 10px;
    padding: 7px 0;
    height: 34px;
    margin-left: 10px;
    margin-right: 3px;
    box-shadow: 0 2px 10px #5ba2ff12;
    text-align: center;
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
  }
  .header-burger {
    margin-left: 0;
    align-self: flex-end;
    margin-top: 0;
    margin-bottom: 0;
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .header-burger span {
    display: block;
    width: 21px;
    height: 3px;
    background: #236bf2;
    border-radius: 2px;
    margin: 4px 0;
    transition: all .22s cubic-bezier(.4,0,.2,1);
  }
}
@media (max-width: 700px) {
  .contact-btn {
    font-size: 0;      /* Скрывает текст */
    padding: 0;
    min-width: 36px;
    max-width: 40px;
    justify-content: center;
  }
  .contact-btn img {
    width: 21px;
    height: 21px;
    margin: 0;
    display: block;
  }
}
@media (max-width: 700px) {
  .cta-header-btn {
    font-size: 1.02rem; /* Кнопка "Заказать" нормального размера */
    width: 100%;
    max-width: 120px;
    margin: 0 0 0 8px;
    height: 34px;
    padding: 7px 0;
    border-radius: 10px;
  }
  .contacts-row {
    gap: 7px;
  }
}
:root {
  --accent-blue: #2179fd;
  --accent-yellow: #ffe16d;
  --hero-grad1: #3499ff;
  --hero-grad2: #47e4ee;
}

body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: #f6fbfe;
  margin: 0;
}

.b2b-hero-compact {
  max-width: 1170px;
  background: linear-gradient(104deg,var(--hero-grad1) 0%, var(--hero-grad2) 100%);
  border-radius: 24px;
  box-shadow: 0 4px 44px #4dc8ff13;
  padding: 32px 32px 24px 32px;
  margin: 38px auto 20px auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 38px;
}

.b2b-hero-left {
  flex: 1 1 0;
  min-width: 320px; max-width: 630px;
  display: flex; flex-direction: column; gap: 2px;
}
.b2b-hero-left h1 {
  font-size: 2.12em;
  font-weight: 800;
  line-height: 1.13;
  margin:0 0 7px 0;
  color: #fff;
  letter-spacing: -0.01em;
}
.b2b-hero-left h1 span {color: var(--accent-yellow);}
.b2b-hero-sub {
  font-size: 1.08em;
  color: #eaf6ff;
  margin-bottom: 3px;
}
.b2b-hero-sub span {color: var(--accent-yellow);}
.b2b-hero-features {
  padding-left: 17px;
  margin: 0 0 9px 0;
  color: #e5faff;
  font-size: 1.01em;
  line-height: 1.39;
}
.b2b-hero-metrics {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin: 9px 0 11px 0;
}
.kpi {
  background: #fff;
  color: #188ffb;
  border-radius: 13px;
  box-shadow: 0 2px 8px #3499ff0e;
  padding: 8px 17px 7px 14px;
  min-width: 86px;
  position: relative;
  cursor: pointer;
  font-size: 1em;
  transition: box-shadow .13s, transform .13s;
}
.kpi:hover, .kpi:focus {
  box-shadow: 0 4px 16px #22e0fd1a;
  transform: translateY(-2px) scale(1.03);
}
.kpi-val { font-size: 1.04em; font-weight: 800;}
.kpi-label { font-size: 0.97em; color: #49abfd; display: flex; align-items: center;}
.tipq {
  display:inline-block;
  background: var(--accent-yellow);
  color: #188ffb;
  font-weight: 900;
  border-radius: 50%;
  width: 1.1em;
  height: 1.1em;
  font-size: 0.96em;
  line-height: 1.13em;
  margin-left: 7px;
  text-align: center;
  cursor: pointer;
  font-family: Arial, sans-serif;
  position: relative;
}
.tip-tooltip {
  display: none;
  position: fixed;
  z-index: 1010;
  left: 0; top: 0;
  background: #fff;
  color: #188ffb;
  font-size: 0.92em;
  padding: 7px 13px;
  border-radius: 10px;
  box-shadow: 0 7px 24px #237ef822;
  font-weight: 500;
  min-width: 145px;
  max-width: 220px;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.kpi.show-tip .tip-tooltip {display: block;opacity: 1;pointer-events:auto;}

/* --- Review --- */
.b2b-hero-review {
  margin: 12px 0 0 0;
  font-size: 1.01em;
  color: #fff;
  font-weight: 400;
  line-height: 1.33;
}
.b2b-hero-review span {color:var(--accent-yellow); font-size:0.96em;}

/* --- EXPERT (photo+badge+status+cta) --- */
.b2b-hero-right {
  min-width: 240px;
  max-width: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.b2b-expert-photo-wrap {
  position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
}
.expert-photo {
  width: 244px;
  height: 244px;
  border-radius: 50%;
  object-fit: cover;
  border: 8px solid #fff;
  box-shadow: 0 6px 40px #23d9e42a;
  cursor: pointer;
  margin-bottom: 0;
  margin-top: 4px;
  transition: box-shadow 0.14s, transform 0.12s;
}
.expert-photo:active { box-shadow: 0 10px 44px #4fd8ff3c; transform: scale(1.021);}
.b2b-online-status {
  position: absolute;
  top: 18px; right: -17px;
  background: #fff;
  color: #24d838;
  font-weight: 800;
  font-size: 1.02em;
  padding: 6px 14px 6px 8px;
  border-radius: 14px 18px 18px 14px;
  box-shadow: 0 1px 8px #237ef81a;
  display: flex; align-items: center; gap: 5px; z-index: 2;
  animation: showOnlineStatus 1.2s;
}
@keyframes showOnlineStatus {from{opacity:0; right:-60px;}to{opacity:1; right:-17px;}}
.b2b-online-status .photo-online-dot {
  width: 12px; height: 12px; background: #24d838;
  border-radius: 50%; box-shadow: 0 0 8px #24d838bb;
  border: 2px solid #fff; animation: online-pulse 1.22s infinite;
  margin-right: 4px;
}
@keyframes online-pulse {
  0% { box-shadow: 0 0 0 0 #41ff6766; }
  70% { box-shadow: 0 0 0 10px #41ff6700; }
  100% { box-shadow: 0 0 0 0 #41ff6733; }
}

.b2b-expert-badge {
  margin-top: 13px;
  background: #237ef8e9;
  border-radius: 9px;
  color: #fff;
  font-size: 1.01em;
  font-weight: 700;
  text-align: center;
  padding: 9px 14px 7px 14px;
  box-shadow: 0 2px 12px #3499ff15;
}

/* --- MOTIVATION --- */
.b2b-expert-motivation {
  display: none;
  position: absolute;
  left: -22px;
  top: 50%;
  transform: translateY(-50%);
  background: #fffbe7;
  color: #2179fd;
  border-radius: 10px;
  font-size: 0.91em;
  font-weight: 500;
  text-align: left;
  padding: 10px 16px 9px 15px;
  box-shadow: 0 4px 19px #aaa1;
  max-width: 200px;
  min-width: 120px;
  z-index: 100;
  line-height: 1.38;
  border-left: 4px solid var(--accent-yellow);
  opacity: 0.97;
  animation: fadeInMotivation .25s;
}
@keyframes fadeInMotivation {
  from {opacity:0; left:-38px;}
  to   {opacity:0.97; left:-22px;}
}

/* --- CTA --- */
.b2b-hero-cta {
  margin: 15px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.b2b-tg-main {
  background: linear-gradient(92deg, #237ef8 0%, #5defff 100%);
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
  padding: 11px 22px 10px 38px;
  border-radius: 11px;
  text-decoration: none;
  box-shadow: 0 2px 8px #4dc8ff17;
  border: none;
  outline: none;
  display: inline-block;
  position: relative;
  transition: background .14s, transform .11s;
}
.b2b-tg-main:hover {background:linear-gradient(97deg,#1d64d8 0%, #44deea 100%); transform: scale(1.04);}
.b2b-tg-main .online-dot {
  position: absolute;
  left: 13px;
  top: 50%;
  width: 12px; height: 12px;
  background: #37ff4b;
  border-radius: 50%;
  box-shadow: 0 0 11px #41ff6788;
  border: 2px solid #fff;
  transform: translateY(-50%);
  animation: online-pulse 1.2s infinite;
}
.cta-note {
  display: block;
  font-size: 0.94em;
  color: var(--accent-yellow);
  font-weight: 500;
  margin-top: 2px;
  margin-bottom: 0;
  letter-spacing: -0.01em;
}
.cta-tooltip {display:none;}

/* --- Адаптив --- */
@media (max-width: 1000px) {
  .b2b-hero-compact {gap: 15px; padding: 20px 2vw 18px 2vw;}
  .expert-photo {width: 170px; height:170px;}
}
@media (max-width: 700px) {
  .b2b-hero-compact {flex-direction: column; align-items: center; padding: 4vw 0.4vw 3vw 0.4vw;}
  .b2b-hero-right {margin-top: 0; max-width: 100vw;}
  .expert-photo {width: 45vw; height: 45vw; min-width: 78px; min-height: 78px;}
  .b2b-expert-motivation {font-size: 0.85em;}
  .b2b-expert-badge {font-size:0.93em;}
  .b2b-hero-left h1 {font-size: 1.13em;}
  .b2b-hero-sub, .b2b-hero-features, .b2b-expert-badge {font-size: 0.89em;}
  .b2b-hero-metrics {flex-direction: column; gap: 7px;}
}
.section-title {
  font-size: 2.4rem;
  font-weight: 900;
  color: #2179fd;
  margin-top: 36px;
  margin-bottom: 28px;
  letter-spacing: -0.5px;
}

.cases-grid-wrap {
  background: linear-gradient(99deg,#e6f4ff70 0%,#d6fdff30 100%);
  border-radius: 24px;
  padding: 36px 28px 30px 28px;
  box-shadow: 0 8px 40px #2179fd0c;
  margin-bottom: 32px;
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 28px;
}

.case-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 32px #2179fd10;
  padding: 28px 22px 22px 22px;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  justify-content: flex-start;
  position: relative;
  transition: box-shadow .18s, transform .14s;
  overflow: hidden;
}

.case-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.case-card-logo {
  width: 54px; height: 54px;
  border-radius: 12px;
  background: #f2f9ff;
  box-shadow: 0 1px 7px #2179fd0a;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5em;
  flex-shrink: 0;
}

.case-card-title {
  font-size: 1.13em;
  font-weight: 800;
  color: #2179fd;
  line-height: 1.28;
  text-decoration: none;
  transition: color .14s;
}
.case-card-title:hover { color: #188ffb; }
.case-card-domain { color: #565bb2; font-size:0.99em; font-weight: 500; display:block; }

.case-card-badge {
  display:inline-block;
  background: #f5faff;
  color: #19b28d;
  font-weight: 700;
  font-size: 1em;
  border-radius: 7px;
  padding: 2px 10px;
  margin-bottom: 3px;
  margin-right: 9px;
}

.case-card-desc {
  color: #2a2d3b;
  font-size: 1.08em;
  line-height: 1.47;
  margin-bottom: 11px;
}

.case-card-links {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
}

.case-card-link {
  color: #2179fd;
  font-weight: 700;
  text-decoration: underline;
  font-size: 1em;
  transition: color .13s;
}
.case-card-link:hover { color: #17e0d8; }

.case-card-btn {
  background: linear-gradient(94deg, #2179fd 0%, #47e4ee 100%);
  color: #fff;
  font-weight: 900;
  border-radius: 11px;
  font-size: 1.09em;
  padding: 12px 26px;
  text-align: center;
  margin-left: auto;
  margin-top: 0;
  box-shadow: 0 2px 12px #47e4ee14;
  transition: background .13s, transform .11s;
  outline: none;
  border: none;
  text-decoration: none;
  display: inline-block;
}
.case-card-btn:hover { background: linear-gradient(94deg,#145dbe 0%, #44deea 100%); transform: scale(1.03); }

.case-cta {
  background: linear-gradient(100deg, #f2f8ff 70%, #e5f9f8 100%);
  text-align: left;
  box-shadow: none;
  border: 2px dashed #b3e6fc;
  min-height: 170px;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 32px 22px 24px 22px;
}
.case-card-cta-title {
  font-size: 1.20em;
  font-weight: 800;
  color: #2179fd;
  margin-bottom: 8px;
}
.case-card-cta-desc {
  color: #17a9e4;
  font-size: 1.07em;
  margin-bottom: 16px;
  font-weight: 600;
}
.cta-tg .online-dot {
  display: inline-block;
  width: 16px; height: 16px;
  background: #3dff62;
  border-radius: 50%;
  box-shadow: 0 0 12px #41ff6799;
  margin-right: 8px;
  border: 2px solid #fff;
  position: relative;
  top: 3px;
  animation: online-pulse 1.2s infinite;
}

@keyframes online-pulse {
  0% { box-shadow: 0 0 0 0 #43ff6b99; }
  50% { box-shadow: 0 0 0 6px #43ff6b40; }
  100% { box-shadow: 0 0 0 0 #43ff6b99; }
}

/* Адаптив */
@media (max-width: 950px) {
  .cases-grid {grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap:18px;}
  .cases-grid-wrap {padding: 16px 8px 16px 8px;}
  .case-card {padding:18px 10px 13px 10px;}
}

@media (max-width: 650px) {
  .section-title {font-size:1.45em;}
  .cases-grid {gap:13px;}
  .case-card {padding: 15px 6vw 12px 6vw;}
  .case-card-logo {width:40px;height:40px;}
  .case-card-title {font-size:1.01em;}
  .case-card-btn {font-size:0.98em;padding:10px 13px;}
  .case-cta {padding:18px 8px 16px 10px;}
}
.seo-calc-outer {
  background: linear-gradient(99deg,#e6f4ff70 0%,#d6fdff30 100%);
  border-radius: 28px;
  margin: 38px auto 0 auto;
  box-shadow: 0 8px 40px #2179fd12;
  padding: 36px 34px 32px 34px;
  max-width: 1080px;
}
.seo-calc-badges {
  display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.badge { background:#f7faff; color:#197ed9; font-weight:700; border-radius:8px; padding:7px 20px; font-size:1em;}
.badge-year{background:#f0fff2;color:#16b64c;}
.badge-cases{background:#f3f8fd;color:#1c90ee;}
.badge-safe{background:#e7fbff;color:#23b9b9;}
.badge-kpi{background:#edfff7;color:#0bb874;}
.seo-calc-wrap { display:flex; gap:34px; }
.seo-calc-left, .seo-calc-right {
  flex:1 1 390px; background:#fff; border-radius:18px;
  box-shadow:0 4px 28px #2179fd08; padding:34px 28px 20px 28px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.seo-calc-title { font-size:1.44em; font-weight:800; color:#197ed9; margin-bottom:20px; }
.seo-calc-fields label {
  display:block; font-weight:600; font-size:1.09em; margin-bottom:13px; color:#223;
}
.seo-calc-fields input, .seo-calc-fields select {
  width:100%;padding:9px 12px;margin-top:5px;
  border-radius:8px; border:1px solid #e4eaf7;
  font-size:1.07em; background:#f7faff; outline:none; font-weight:500;
}
.seo-calc-btn {
  background: linear-gradient(90deg,#2179fd 0%,#47e4ee 100%);
  color: #fff; font-weight: 900; border-radius: 13px; font-size: 1.08em; padding: 15px 0;
  width: 100%; margin: 12px 0 10px 0; box-shadow: 0 3px 13px #47e4ee15;
  transition: background .14s, transform .12s; border:none; display:block;
}
.seo-calc-btn span {font-weight:400;font-size:0.97em;opacity:0.81;}
.seo-calc-btn:hover {background:linear-gradient(90deg,#1472e1 0%,#44deea 100%);transform:scale(1.02);}
.seo-calc-result {margin: 13px 0 0 0;font-size:1.09em;font-weight:700;min-height:28px;}
.seo-calc-trust {
  margin-top:18px; width:100%;border-top:1px solid #e2f1fa;padding-top:14px;
  display:flex;flex-direction:row;gap:15px;align-items:center;
  font-size:1.01em;
}
.seo-calc-avatar {display:flex;align-items:center;gap:10px;}
.seo-calc-avatar img {width:41px;height:41px;border-radius:50%;border:2.5px solid #20f5a2;}
.calc-expert-title {font-weight:700;color:#197ed9;font-size:1.07em;margin-bottom:2px;}
.calc-expert-desc {color:#14bc74;font-weight:600;font-size:0.98em;}
.online-dot {display:inline-block;width:10px;height:10px;background:#41ff75;border-radius:50%;margin-right:4px;box-shadow:0 0 7px #20ffb780;}
.calc-review {font-size:0.99em;color:#183995;font-style:italic;line-height:1.5;margin-left:18px;}
.seo-calc-right {min-width:290px;max-width:350px;border-left:0;background:linear-gradient(97deg,#e9f6ff 60%,#e3fcf7 100%);}
.seo-calc-guarantee {background:#fff3c5;color:#bc5c00;font-weight:700;border-radius:11px;padding:13px 17px 11px 16px;font-size:1.09em;margin-bottom:15px;box-shadow:0 1px 6px #ffeaa880;}
.seo-calc-secrets {margin:0 0 14px 0;padding-left:19px;font-size:1.03em;color:#35507a;line-height:1.65;font-weight:500;}
.seo-calc-secrets b{color:#18bfed;font-weight:700;}
.seo-calc-tgbtn {
  background:linear-gradient(91deg,#20d4ff 0%,#1d90f8 100%);
  color:#fff;font-weight:900;border-radius:11px;font-size:1.09em;padding:12px 24px;margin-top:12px;
  box-shadow:0 2px 12px #47e4ee15;border:none;text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;
  transition:background .13s,transform .12s;
}
.seo-calc-tgbtn:hover {background:linear-gradient(94deg,#13c1ec 0%, #1866f9 100%);transform:scale(1.03);}
@media (max-width:900px){
  .seo-calc-wrap{flex-direction:column;gap:18px;}
  .seo-calc-left,.seo-calc-right{max-width:100%;padding:20px 6vw;}
  .seo-calc-right{min-width:0;}
  .seo-calc-badges{gap:10px;font-size:0.97em;}
}
@media (max-width:650px){
  .seo-calc-outer{padding:14px 2vw 10px 2vw;}
  .seo-calc-title{font-size:1.11em;}
  .seo-calc-left,.seo-calc-right{padding:12px 2vw;}
  .badge{font-size:0.94em;}
  .seo-calc-secrets,.seo-calc-guarantee{font-size:0.97em;}
  .seo-calc-tgbtn{font-size:0.98em;padding:10px 13px;}
  .seo-calc-fields label{font-size:0.97em;}
}
.seo-calc-section { background: var(--color-white); }
.seo-calc-badges { display:flex;gap:15px;flex-wrap:wrap;margin-bottom:18px;}
.badge { background:#f7faff;color:var(--color-main);border-radius:8px;padding:6px 17px;font-weight:700;}
.badge-year{background:#f0fff2;color:#1ed66f;}
.badge-cases{background:#f3f8fd;color:#1c90ee;}
.badge-kpi{background:#edfff7;color:#0bb874;}
.badge-safe{background:#e7fbff;color:var(--color-accent);}
.seo-calc-flex { display: flex; gap:38px; }
.seo-calc-form, .seo-calc-adv { flex:1 1 370px; background:#fafdff; border-radius:17px; box-shadow:0 3px 22px #2179fd0d; padding:34px 26px 22px 26px; }
.seo-calc-title { font-size:1.35em;font-weight:800;color:var(--color-main);margin-bottom:18px;}
.seo-calc-fields label { display:block;font-weight:600;font-size:1.01em;margin-bottom:12px;color:#233;}
.seo-calc-fields input, .seo-calc-fields select {
  width:100%;padding:8px 13px;margin-top:5px;border-radius:8px;
  border:1.2px solid #e4eaf7;font-size:1.07em;background:#fff;outline:none;font-weight:500;
}
.seo-calc-btn {background:linear-gradient(90deg,#2179fd 0%,#47e4ee 100%);
  color:#fff;font-weight:900;border-radius:11px;font-size:1.06em;padding:14px 0;margin:13px 0 10px 0;width:100%;box-shadow:0 2px 10px #47e4ee13;transition:background .12s;}
.seo-calc-btn:hover{background:linear-gradient(90deg,#0c65d1 0%,#21baf9 100%);}
.seo-calc-result {margin:12px 0 0 0;font-size:1.04em;font-weight:700;min-height:28px;}
.seo-calc-consult{display:flex;align-items:center;gap:12px;margin-top:17px;}
.calc-expert-photo{width:40px;height:40px;border-radius:50%;border:2px solid #1ed66f;}
.calc-expert-title{font-weight:700;color:var(--color-main);}
.calc-expert-desc{color:#14bc74;font-size:0.96em;}
.online-dot{display:inline-block;width:9px;height:9px;background:#41ff75;border-radius:50%;margin-right:4px;box-shadow:0 0 6px #20ffb780;}
.seo-calc-adv{min-width:260px;max-width:345px;border-left:0;background:linear-gradient(94deg,#eafaff 60%,#edfbff 100%);}
.seo-calc-guarantee{background:#fff7cb;color:#bc5c00;font-weight:700;border-radius:10px;padding:12px 15px 10px 15px;font-size:1.07em;margin-bottom:15px;box-shadow:0 1px 6px #ffeaa882;}
.seo-calc-secrets{margin:0 0 12px 0;padding-left:17px;font-size:1.01em;color:#223e59;line-height:1.62;font-weight:500;}
.seo-calc-secrets b{color:var(--color-main);}
.seo-calc-stock{margin:16px 0 11px 0;padding:7px 15px;background:#e6f7ff;font-size:1.03em;color:#2183f6;border-radius:9px;font-weight:700;display:inline-block;}
.seo-calc-tgbtn{background:linear-gradient(91deg,#20d4ff 0%,#1d90f8 100%);color:#fff;font-weight:900;border-radius:10px;font-size:1.05em;padding:12px 24px;margin-top:10px;box-shadow:0 2px 11px #47e4ee15;text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:background .12s;}
.seo-calc-tgbtn:hover{background:linear-gradient(94deg,#13c1ec 0%, #1866f9 100%);}
@media (max-width:850px){
  .seo-calc-flex{flex-direction:column;gap:20px;}
  .seo-calc-form,.seo-calc-adv{max-width:100%;padding:20px 3vw;}
  .seo-calc-badges{gap:10px;font-size:0.96em;}
}
@media (max-width:560px){
  .seo-calc-form,.seo-calc-adv{padding:10px 2vw;}
  .seo-calc-title{font-size:1em;}
  .badge{font-size:0.93em;}
  .seo-calc-secrets,.seo-calc-guarantee{font-size:0.96em;}
  .seo-calc-tgbtn{font-size:0.96em;padding:10px 13px;}
}
.tipq {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background: #edf7ff;
  color: #1d8dfa;
  border-radius: 50%;
  font-size: .97em;
  font-weight: bold;
  text-align: center;
  line-height: 1.1em;
  margin-left: 3px;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background .18s;
}
.tipq:hover, .tipq:focus { background: #1d8dfa; color: #fff; }
.tipq[data-tip]:hover::after, .tipq[data-tip]:focus::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: 120%;
  min-width: 210px;
  max-width: 350px;
  transform: translateX(-50%);
  background: #fff;
  color: #253552;
  border-radius: 11px;
  padding: 13px 16px;
  font-size: .99em;
  font-weight: 500;
  box-shadow: 0 10px 24px #1d8dfa22;
  z-index: 30;
  white-space: normal;
  pointer-events: none;
}
@media (max-width:650px) {
  .tipq[data-tip]:hover::after, .tipq[data-tip]:focus::after {
    font-size: .97em;
    min-width: 140px;
    padding: 9px 9px;
  }
}
.tipq {
  display: inline-block;
  cursor: pointer;
  margin-left: 5px;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  background: linear-gradient(135deg, #40cfff 60%, #84f0c3 100%);
  color: #fff;
  font-weight: bold;
  font-size: 0.97em;
  text-align: center;
  line-height: 1.25em;
  position: relative;
  vertical-align: middle;
  box-shadow: 0 1px 6px #34cfd14a;
  transition: background .15s;
}
.tipq:after {
  content: "❔";
  display: block;
  font-size: 1em;
  font-weight: 600;
  color: #fff;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.tipq:hover,
.tipq:focus {
  background: linear-gradient(135deg, #1e9fd9 50%, #8beaff 100%);
  outline: none;
}

/* Сам тултип */
.tipq-tooltip {
  display: none;
  position: absolute;
  z-index: 999;
  left: 50%;
  top: -14px;
  transform: translate(-50%, -100%);
  background: #fff;
  color: #22334d;
  border-radius: 12px;
  box-shadow: 0 6px 36px #21bfff24;
  padding: 13px 18px;
  font-size: 1em;
  font-weight: 400;
  min-width: 180px;
  max-width: 340px;
  line-height: 1.45;
  pointer-events: none;
  transition: opacity 0.12s;
  opacity: 0;
  white-space: pre-line;
}
.tipq.show-tooltip + .tipq-tooltip {
  display: block;
  opacity: 1;
}

/* Mobile: тултип ниже, чуть крупнее */
@media (max-width: 700px) {
  .tipq-tooltip {
    left: 50%;
    top: 110%;
    transform: translate(-50%, 0);
    font-size: 0.98em;
    min-width: 140px;
    max-width: 98vw;
  }
}
.tipq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 4px;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: linear-gradient(135deg, #41cfff 60%, #1fc6c0 100%);
  color: #fff;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  position: relative;
  box-shadow: 0 2px 8px #42cfd14c;
  transition: background .15s;
  outline: none;
  border: none;
  vertical-align: middle;
}
.tipq:after {
  content: "?";
  font-size: 1em;
  font-weight: 700;
  color: #fff;
  pointer-events: none;
  user-select: none;
}
.tipq.show-tooltip {
  z-index: 1002;
}

/* Новый тултип-контейнер */
.tipq-tooltip {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: fixed; /* FIX: тултип на уровне экрана */
  left: 0; top: 0;
  background: #fff;
  color: #1c2742;
  font-size: 1em;
  border-radius: 12px;
  box-shadow: 0 8px 32px #23bcf24a;
  padding: 13px 18px;
  min-width: 170px;
  max-width: 280px;
  line-height: 1.4;
  font-weight: 400;
  transition: opacity 0.18s;
  z-index: 9999;
  white-space: pre-line;
}
.tipq.show-tooltip + .tipq-tooltip {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: tooltip-pop .22s cubic-bezier(.18,1.2,.4,1) 1;
}
@keyframes tooltip-pop {
  0% {transform: scale(.97); opacity: 0;}
  100% {transform: scale(1); opacity: 1;}
}
.tipq-tooltip-arrow {
  width: 22px;
  height: 15px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.tipq-tooltip-arrow.top {
  bottom: -12px;
}
.tipq-tooltip-arrow.bottom {
  top: -13px;
  transform: translateX(-50%) rotate(180deg);
}
.tipq-tooltip-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* Mobile адаптация */
@media (max-width: 700px) {
  .tipq-tooltip {
    font-size: 0.97em;
    min-width: 120px;
    max-width: 98vw;
    padding: 12px 8px;
  }

}

.tipq {
  display: inline-block;
  margin-left: 5px;
  font-size: 1.05em;
  font-weight: 600;
  color: #13b8ff;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: color .18s;
  vertical-align: middle;
}

.tipq:focus,
.tipq:hover {
  color: #1090e4;
}

/* Tooltip */
.tipq-tooltip {
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  background: rgba(53,202,255,0.14);
  color: #1c2742;
  border-radius: 14px;
  padding: 11px 17px 12px 17px;
  font-size: 1em;
  font-weight: 400;
  min-width: 170px;
  max-width: 260px;
  box-shadow: 0 8px 32px 0 rgba(36, 180, 248, 0.11);
  border: 1.2px solid #b2edff36;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .18s;
  white-space: pre-line;
}

/* Активный (отображаемый) tooltip */
.tipq-tooltip.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.section-benefits-compact {
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 8px 48px #71c3ff12;
  padding: 32px 36px 22px 36px;
  margin: 36px 0;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Inter', Arial, sans-serif;
}

.benefits-toprow {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.benefit-topcard {
  background: #f5faff;
  border-radius: 16px;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 16px 13px 14px;
  box-shadow: 0 2px 12px #2280f408;
}

.bicon {
  font-size: 1.7em;
  margin-top: 2px;
  color: #2179fd;
  flex-shrink: 0;
}
.benefit-topcard b { font-size: 1.08em; color: #042a8e; }
.bdesc { font-size: .97em; color: #5a8ad1; font-weight: 400; }

.benefits-cards-row {
  display: flex;
  gap: 17px;
  margin-bottom: 11px;
  margin-top: 3px;
  justify-content: space-between;
}
.benefit-card {
  background: #f5f8ff;
  border-radius: 15px;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 17px 13px 15px 15px;
  box-shadow: 0 1.5px 7px #2179fd08;
  transition: box-shadow 0.18s;
  position: relative;
}
.benefit-card:hover {
  box-shadow: 0 5px 22px #79d7ff18;
}
.bicon { font-size: 1.5em; margin-right: 4px;}
.bctitle { font-weight: 600; color: #197ed9; font-size: 1.08em;}
.bcdesc { color: #567cc5; font-size: 1em; margin-top: 2px;}

.benefits-liveinfo {
  font-size: 1.04em;
  margin: 6px 0 10px 0;
  color: #3274c5;
  background: #f7fbff;
  border-radius: 11px;
  padding: 10px 13px 10px 15px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 1.5px 7px #67b3ff10;
}
.bicon-live { font-size: 1.27em; vertical-align: middle; }
.benefits-refresh {
  background: #e6f5ff;
  border: none;
  color: #2179fd;
  border-radius: 6px;
  font-size: 1em;
  padding: 4px 12px;
  margin-left: auto;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.16s;
}
.benefits-refresh:hover { background: #b2e1ff; }

.benefits-bottom-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 11px;
  flex-wrap: wrap;
}
.main-btn {
  background: linear-gradient(90deg, #2186fd 0%, #63deff 100%);
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  padding: 12px 24px;
  font-size: 1.12em;
  cursor: pointer;
  box-shadow: 0 2px 14px #2279fd13;
  transition: background 0.16s;
}
.main-btn-blue {
  background: #fff;
  color: #2186fd;
  border: 1.5px solid #62cafb;
  position: relative;
  box-shadow: none;
}
.main-btn-blue .online-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  background: #21fd71;
  border-radius: 50%;
  margin-right: 7px;
  position: relative;
  top: 2px;
  box-shadow: 0 0 5px #21fd71aa;
}
.benefits-meta {
  color: #7c94bc;
  font-size: .99em;
  margin-left: 10px;
  white-space: nowrap;
}
.meta-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%; background: #90cfff;
  margin: 0 5px 2px 5px;
}

@media (max-width: 1050px) {
  .benefits-toprow, .benefits-cards-row { flex-wrap: wrap; gap: 13px; }
  .benefit-topcard, .benefit-card { flex: 1 1 47%; min-width: 230px; }
  .section-benefits-compact { padding: 18px 5vw 11px 5vw; }
  .benefits-bottom-row { flex-direction: column; gap: 9px; align-items: flex-start; }
}
@media (max-width: 720px) {
  .benefits-toprow, .benefits-cards-row { flex-direction: column; gap: 8px; }
  .benefit-topcard, .benefit-card { min-width: 0; font-size: .98em; }
  .section-benefits-compact { padding: 10px 2vw 7px 2vw; }
}
.section-benefits-compact {
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 8px 48px #71c3ff12;
  padding: 32px 36px 22px 36px;
  margin: 36px auto;
  max-width: 1200px;
  font-family: 'Inter', Arial, sans-serif;
}

.benefits-infobar {
  display: flex;
  gap: 25px;
  margin-bottom: 12px;
  font-size: 1.04em;
  color: #2179fd;
  font-weight: 600;
  flex-wrap: wrap;
}
.benefits-title {
  font-size: 2.1em;
  color: #1681f6;
  font-weight: 800;
  margin-bottom: 18px;
  margin-top: 0;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 20px;
  margin-bottom: 15px;
}
.benefit-card {
  background: #f5faff;
  border-radius: 16px;
  padding: 17px 16px 15px 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 2px 12px #2280f408;
  transition: box-shadow 0.16s;
  min-height: 98px;
  position: relative;
}
.benefit-card:hover {
  box-shadow: 0 5px 24px #89d7ff22;
}
.bicon {
  font-size: 1.8em;
  color: #2186fd;
  flex-shrink: 0;
}
.bctitle {
  font-weight: 700;
  font-size: 1.07em;
  color: #073580;
  margin-bottom: 3px;
}
.bcdesc {
  font-size: .99em;
  color: #5285ba;
  font-weight: 400;
}

.benefits-liveinfo {
  background: #f5f8ff;
  border-radius: 13px;
  box-shadow: 0 1.5px 7px #67b3ff10;
  font-size: 1.05em;
  color: #3274c5;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
}
.bicon-live {
  font-size: 1.19em;
  margin-right: 5px;
}
.benefits-refresh {
  background: #e6f5ff;
  border: none;
  color: #2186fd;
  border-radius: 7px;
  font-size: 1em;
  padding: 4px 11px;
  margin-left: auto;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.16s;
}
.benefits-refresh:hover { background: #b2e1ff; }

.benefits-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.main-btn {
  background: linear-gradient(90deg, #2186fd 0%, #63deff 100%);
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  padding: 12px 23px;
  font-size: 1.11em;
  cursor: pointer;
  box-shadow: 0 2px 14px #2279fd13;
  transition: background 0.16s;
  margin-bottom: 7px;
}
.main-btn-blue {
  background: #fff;
  color: #2186fd;
  border: 1.5px solid #62cafb;
  position: relative;
  box-shadow: none;
}
.main-btn-blue .online-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  background: #21fd71;
  border-radius: 50%;
  margin-right: 7px;
  position: relative;
  top: 2px;
  box-shadow: 0 0 5px #21fd71aa;
}

/* Адаптив */
@media (max-width: 1020px) {
  .section-benefits-compact { padding: 20px 5vw 15px 5vw; }
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .section-benefits-compact { padding: 7vw 2vw 3vw 2vw; }
  .benefits-title { font-size: 1.3em; }
  .benefits-infobar { flex-direction: column; gap: 7px; font-size: 1em; }
  .benefits-grid { grid-template-columns: 1fr; gap: 9px 0; }
  .benefit-card { font-size: .98em; }
  .benefits-liveinfo { flex-direction: column; align-items: flex-start; gap: 7px;}
  .benefits-cta-row { flex-direction: column; gap: 8px; align-items: stretch; }
}
.case-container {
  max-width: 1160px; margin: 28px auto; background: #f7fbff;
  border-radius: 26px; box-shadow: 0 7px 32px #b0eaff16;
  padding: 22px 18px 26px 18px; font-family: 'Inter', Arial, sans-serif;
}
.case-badges-row-hero {
  display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 11px;
  align-items: center; justify-content: flex-start;
}
.case-badge { display:inline-block; padding:5px 13px 5px 13px; font-size:1em; border-radius:13px; font-weight:700; background:#eaf7ff; color:#2178fd; }
.case-b1 { background:#fffbe8; color:#e1a200; }
.case-b2 { background:#eef3ff; color:#197edc; }
.case-b3 { background:#e2fff4; color:#21b26c; }
.case-b4 { background:#ffe2fc; color:#e81cad; }
.case-b5 { background:#e9f6ff; color:#2688b9; }
.case-guarantee-badge { background:#fffbe3; color:#e9a900; padding:4px 12px; border-radius:11px; font-weight:700; }
.case-payment-badge { background:#e2fff4; color:#169f5d; padding:4px 13px; border-radius:11px; font-weight:700; }

.case-hero-newflex {
  display: flex; gap: 18px; align-items: stretch; margin-bottom: 12px; flex-wrap: wrap;
}
.case-hero-maincol {
  flex:1 1 370px; min-width:260px; display:flex; flex-direction:column; gap:11px; background:#fff;
  border-radius:18px; box-shadow:0 2px 10px #b0eaff0d; padding:17px 17px 15px 18px;
}
.case-title-hero { font-size:1.37em; color:#1677fa; font-weight:900; margin-bottom:2px; }
.case-hero-link a { color:#17b371; text-decoration:none; font-weight:700; font-size:1.04em; }
.case-kpi-review-row { display:flex; gap:12px; align-items:center; margin-bottom:7px; flex-wrap:wrap;}
.case-kpi-compact {
  background:linear-gradient(90deg,#f3fdff,#eaf6ff 80%);
  color:#188be0; font-size:1em; font-weight:700; border-radius:9px; padding:7px 12px; box-shadow:0 1.5px 6px #2178fd0a;
}
.case-quote-compact {
  color:#747799; background:#f3f7ff; border-left:4px solid #aad7ff;
  padding:6px 10px 5px 10px; border-radius:6px; font-size:.98em; font-style:italic; display:flex; align-items:center; gap:4px;
}
.case-hero-actions { margin-top:8px; }
.case-cta-main {
  display:inline-block; background:linear-gradient(90deg,#139d47 0%,#23c2fd 100%);
  color:#fff; font-weight:800; font-size:1.09em; padding:11px 22px; border-radius:13px;
  box-shadow:0 2px 13px #1abe7a13; text-decoration:none; transition:background .17s; text-align:center;
}
.case-cta-main:hover { background:#139d68; }
.case-hero-graphcol {
  flex:1 1 270px; min-width:220px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; background:#f3fbff; border-radius:14px; box-shadow:0 1.5px 10px #9fe6ff10; padding:13px 8px 11px 8px;
}
.case-graph-img-main { max-width:240px; width:100%; border-radius:11px; }
.case-img-caption { font-size:.96em; color:#3985ad; margin-top:6px; text-align:center; }
.case-block { background:#fff; border-radius:13px; box-shadow:0 1.5px 7px #a7e7ff10; padding:18px 11px 11px 16px; margin-bottom:13px; font-size:1.07em; }
.case-block-title { color:#1786fa; font-size:1.07em; font-weight:800; margin-bottom:8px; }
.case-block-content { color:#304a60; font-size:1em; line-height:1.55; }
.case-client-review { background:#f7fbff; color:#1a8070; border-left:4px solid #36e48b; padding:7px 11px 7px 10px; border-radius:7px; font-size:1.01em; font-style:italic; }
.case-client-name { margin-top:5px; color:#6698fa; font-weight:700; font-size:1em; }
.case-project-btn { display:inline-block; background:#24c2ff; color:#fff; font-weight:700; border-radius:7px; padding:9px 16px; font-size:1em; text-decoration:none; margin-top:7px; }
.case-project-btn:hover { background:#18a1c2; }
.case-bottom-cta-row {
  margin-top:15px; display:flex; align-items:center; justify-content:space-between; background:#f7fbff; border-radius:10px; padding:13px 15px; box-shadow:0 1.5px 6px #9fe6ff16; gap:7px; flex-wrap:wrap;
}
.case-bottom-text { font-size:1.05em; color:#189bc3; font-weight:700; }
.case-bottom-btn {
  background:linear-gradient(90deg,#21b971 0%,#38b5fa 100%);
  color:#fff; font-weight:800; padding:10px 20px; border-radius:9px; font-size:1.06em;
  text-decoration:none; box-shadow:0 1.5px 7px #21b9710e; transition:background .13s;
}
.case-bottom-btn:hover { background:#1c9267; }
@media (max-width: 950px) {
  .case-container { padding:8px 2vw 2vw 2vw; }
  .case-hero-newflex { flex-direction:column; gap:11px; }
  .case-hero-maincol, .case-hero-graphcol { max-width:100%; }
  .case-hero-graphcol { margin:0 auto 0 auto; }
  .case-bottom-cta-row { flex-direction:column; align-items:stretch; gap:8px; }
}
@media (max-width:600px) {
  .case-title-hero { font-size:1.09em; }
  .case-block, .case-hero-maincol, .case-hero-graphcol { padding:7px 3px 9px 5px; border-radius:7px; }
  .case-block-title { font-size:.98em; }
  .case-bottom-text, .case-bottom-btn { font-size:1em; }
  .case-badges-row-hero { gap:6px; font-size:.96em; }
  .case-graph-img-main { max-width:99vw; }
}
.pagination-wrap ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.pagination-wrap li {
  margin: 0 2px;
}
.pagination-wrap a, .pagination-wrap span {
  display: block;
  min-width: 38px;
  padding: 7px 13px;
  background: #f5f9ff;
  color: #2179fd;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.pagination-wrap li.active span,
.pagination-wrap a:hover {
  background: #2179fd;
  color: #fff;
}
@media (max-width:500px) {
  .pagination-wrap a, .pagination-wrap span {min-width: 0; padding: 7px 8px; font-size:1em;}
}
.case-badge {
  background:#f5faff;
  color:#2179fd;
  border-radius:10px;
  padding:7px 17px;
  font-weight:700;
  font-size:1em;
  text-decoration:none;
  transition:background .13s, color .13s;
}
.case-badge.active,
.case-badge:hover {
  background:#2179fd;
  color:#fff;
}
@media (max-width:600px){
  .case-badge{padding:7px 9px;font-size:0.97em;}
}

/* === Универсальный стиль для всех полей ввода === */
input {
  width: 100%;                    /* занимают всю ширину родителя */
  max-width: 100%;                /* не выходят за пределы */
  padding: 12px 15px;             /* внутренние отступы */
  margin-bottom: 18px;            /* отступ снизу между полями */
  font-size: 1.05em;              /* удобочитаемый размер текста */
  line-height: 1.4;
  color: var(--color-text-main);  /* основной цвет текста */
  background: var(--color-bg-section); /* фон секции */
  border: 1px solid #e0e7ef;      /* базовая рамка */
  border-radius: var(--radius-md);/* скругление углов */
  transition: border-color 0.16s, box-shadow 0.16s;
}

/* Стиль при фокусе */
input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(35,107,242,0.15);
}

/* По желанию—тот же стиль для textarea и select */
textarea,
select {
  width: 100%;
  max-width: 100%;
  padding: 12px 15px;
  margin-bottom: 18px;
  font-size: 1.05em;
  line-height: 1.4;
  color: var(--color-text-main);
  background: var(--color-bg-section);
  border: 1px solid #e0e7ef;
  border-radius: var(--radius-md);
  transition: border-color 0.16s, box-shadow 0.16s;
}

textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(35,107,242,0.15);}
  
  /* 1. Делаем таблицу блочным элементом с прокруткой */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;                     /* горизонтальная прокрутка */
  -webkit-overflow-scrolling: touch;     /* плавная прокрутка на iOS */
  border-collapse: collapse;             /* убираем двойные границы */
}

/* 2. Стили для ячеек — чтобы контент не ломал разметку */
table th,
table td {
  padding: 0.75em 1em;
  text-align: left;
  white-space: nowrap;                   /* запрещаем перенос внутри ячеек */
  border: 1px solid #ddd;                /* базовая граница, можно убрать/настроить */
}

/* 3. Фиксируем оформление заголовка */
table thead {
  background-color: #f9f9f9;
}

/* 4. (Опционально) Стилизация скроллбара в WebKit-браузерах */
table::-webkit-scrollbar {
  height: 8px;
}
table::-webkit-scrollbar-track {
  background: transparent;
}
table::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 4px;
}
/* -----------------------------------------------------------------
   Герой-картинка и цитата
   ----------------------------------------------------------------- */
.infopost-cover {
  margin: 0 0 24px;
  border-radius: 19px;
  overflow: hidden;           /* обрезаем края */
  box-shadow: 0 7px 44px #2179fd22;
}

.infopost-cover__img {
  width: 100%;
  height: auto;
  display: block;
}

.infopost-quote {
  background: linear-gradient(99deg,#f2faff 80%,#e6fff5 100%);
  border-left: 6px solid #22d4b9;
  padding: 13px 19px 11px 17px;
  margin: 0 0 22px;
  font-size: 1.22em;
  color: #2179fd;
  font-weight: 600;
  border-radius: 11px;
  box-shadow: 0 2px 13px #21d9a111;
}

/* -----------------------------------------------------------------
   Основной текст
   ----------------------------------------------------------------- */
.post-main-text {
  font-size: 1.14em;
  line-height: 1.66;
  margin-bottom: 35px;
  color: #243454;
}

/* === Home Infoposts =================================================== */
.home-infoposts {
  max-width: 1160px;
  margin: 48px auto;
}

/* Заголовок секции */
.home-infoposts .section-title {
  margin-bottom: 24px;
  font-size: 1.86rem;
  font-weight: 900;
  color: #2179fd;
  text-align: center;
}

/* --- Категории ------------------------------------------------------- */
.infocat-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  justify-content: center;
}

.infocat-item {
  background: #eaf7ff;
  color: #2179fd;
  padding: 6px 14px;
  border-radius: 9px;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.02rem;
  transition: background .2s ease;
}

.infocat-item:hover { background:#d6f0ff; }

.infocat-count { color:#9ab6d3; margin-left:4px; font-weight:400; }

/* --- Grid ------------------------------------------------------------ */
.infopost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

/* --- Card ------------------------------------------------------------ */
.infopost-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 32px #2179fd10;
  padding: 0 0 24px;          /* верх убираем — там картинка */
  display: flex;
  flex-direction: column;
  overflow: hidden;           /* обрезаем радиус у картинки */
  transition: transform .18s ease;
}

.infopost-card:hover { transform: translateY(-4px); }

/* Картинка */
.infopost-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* Теги-категории */
.infopost-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 20px 6px;
}

.infopost-tag {
  background: #eaf7ff;
  color: #2178fd;
  padding: 2px 10px;
  border-radius: 7px;
  font-size: 0.93rem;
}

/* Заголовок */
.infopost-title {
  margin: 8px 20px 10px;
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 800;
}

.infopost-title a {
  color: #2179fd;
  text-decoration: none;
}

/* Описание */
.infopost-excerpt {
  color: #2a2d3b;
  font-size: 1.02rem;
  line-height: 1.47;
  margin: 0 20px 16px;
}

/* Кнопка */
.infopost-btn {
  align-self: start;
  margin: 0 0 0 20px;
  background: linear-gradient(94deg,#2179fd 0%,#47e4ee 100%);
  color: #fff;
  font-weight: 900;
  border-radius: 11px;
  font-size: 1.05rem;
  padding: 11px 26px;
  text-decoration: none;
  transition: opacity .15s ease;
}

.infopost-btn:hover { opacity: .9; }

/* --- Pagination ------------------------------------------------------ */
.infopost-pagination {
  margin: 32px 0 0;
  text-align: center;
}

.infopost-pagination .page-numbers {
  display: inline-block;
  margin: 0 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  color:#2179fd;
  background:#f4f8ff;
  transition: background .15s ease;
}

.infopost-pagination .current,
.infopost-pagination .page-numbers:hover {
  background:#2179fd;
  color:#fff;
}

/* --- Пустое состояние ------------------------------------------------ */
.infopost-empty {
  font-size: 1.08rem;
  color: #627399;
  text-align: center;
}

.infopost-empty a {
  display: inline-block;
  margin-top: 18px;
  background:#2179fd;
  color:#fff;
  padding: 10px 24px;
  border-radius: 11px;
  font-weight: 800;
  text-decoration: none;
}
/* --- Мини-превью в карточках инфоматериалов -------------------------- */
.case-card-logo {
  width: 80px;           /* фиксированная ширина */
  height: 80px;          /* фиксированная высота */
  overflow: hidden;
  border-radius: 10px;
  flex-shrink: 0;        /* чтобы картинка не сжималась */
  margin-bottom: 12px;   /* как на макете */
}

.case-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* ровный кроп без искажений */
}






/* === Mobile polish (unified with theme palette) — 2025-08-20 === */
:root{ --ms-h: 56px; }

/* Sticky CTA — light bar to match theme */
.mobile-sticky-cta{
  position: fixed; left:0; right:0; bottom:0; height:var(--ms-h);
  background:#ffffff; display:flex; gap:10px; justify-content:space-between; align-items:center;
  padding:8px 12px; box-shadow: var(--shadow-main); z-index: 9999; border-top:1px solid #e8f0ff;
}
.mobile-sticky-cta .ms-btn{
  flex:1 1 50%; display:flex; align-items:center; justify-content:center;
  gap:8px; height:40px; border-radius: var(--radius-md); font-weight:800; text-decoration:none;
}
.ms-btn-tg{ background: var(--color-primary-gradient); color:#fff; }
.ms-btn-calc{ background:#f5f9ff; color: var(--color-text-main); border:1px solid #dbe9ff; }
.ms-ico{ font-size:18px; line-height:1; }
.ms-text{ font-size:15px; }

@media (min-width: 961px){ .mobile-sticky-cta{ display:none; } }

@media (max-width: 960px){
  body{ padding-bottom:calc(var(--ms-h) + 12px); }
  .b2b-hero-left, .case-card, .section-title{ padding-left:16px; padding-right:16px; }
}

/* Packages — reuse case-card aesthetics */
.seo-packages{ padding:28px 0; }
.seo-packages .section-title{ margin:0 16px 16px; }
.packages-wrap{ display:grid; gap:18px; grid-template-columns:1fr; margin:0 16px; }
.package-card{
  background:#f5f9ff; border-radius: var(--radius-md);
  box-shadow: var(--shadow-main); padding:24px 19px; position:relative; color: var(--color-text-main);
}
.package-card.package-hit{ outline:2px solid #5ba2ff55; }
.package-title{ margin:0 0 8px; font-size:1.18rem; line-height:1.3; font-weight:800; }
.package-list{ margin:0 0 14px 18px; padding:0; color: var(--color-text-muted); }
.package-list li{ margin:6px 0; }
.package-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:40px; padding:0 18px; background: var(--color-primary-gradient); color:#fff;
  border-radius: var(--radius-md); text-decoration:none; font-weight:800; box-shadow: var(--shadow-main);
}
.package-card .package-badge{
  position:absolute; top:12px; right:12px; background: var(--color-primary); color:#fff; font-weight:800;
  padding:4px 10px; border-radius: 999px; font-size:12px; box-shadow: 0 2px 10px #236bf222;
}
@media (min-width: 641px){
  .packages-wrap{ grid-template-columns:repeat(3,1fr); gap:22px; margin:0; }
  .seo-packages .section-title{ margin:0 0 16px; }
}

/* FAQ — light cards */
.seo-faq{ padding:24px 0 8px; }
.seo-faq .section-title{ margin:0 16px 12px; }
.faq-item{
  margin:0 16px 12px; border-radius: var(--radius-md);
  background:#f5f9ff; box-shadow: var(--shadow-main); overflow:hidden;
}
.faq-q{
  width:100%; text-align:left; background:transparent; color: var(--color-text-main); border:0;
  padding:14px 16px; font-weight:800; cursor:pointer; font-size:1.02rem;
}
.faq-a{ display:none; padding:0 16px 16px; color: var(--color-text-muted); }
.faq-item.open .faq-a{ display:block; }
.faq-item.open .faq-q{ outline:2px solid #236bf2; outline-offset:-2px; }

/* Focus visibility */
a:focus-visible, button:focus-visible { outline: 2px solid #236bf2; outline-offset: 2px; border-radius: 8px; }


/* Container to align sections with site grid */
.container-main{
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Reading progress bar */
.read-progress{
  position: fixed; top:0; left:0; height:3px; width:0;
  background: var(--color-primary-gradient); z-index: 10000;
  box-shadow: 0 1px 6px #236bf244;
}
@media (max-width:700px){
  .container-main{ padding: 0 16px; }
}
/* NOVOSEO: чипсы/пагинация/ховеры для конверсии */
.cvase-chips .chip { transition: transform .12s, box-shadow .12s; }
.cvase-chips .chip:hover { transform: translateY(-1px); box-shadow: 0 2px 12px rgba(35,107,242,0.18); }
.pagination ul { display:flex; gap:6px; flex-wrap:wrap; }
.pagination ul li a, .pagination ul li span { display:inline-block; padding:8px 12px; border-radius:10px; text-decoration:none; background:#eef3ff; color:#10366f; }
.pagination ul li .current { background:#15305f; color:#fff; }