:root {

  --brand-purple: #7030A0;
  --brand-green: #30AE4A;

  --section-space: 75px;
  --section-space-mobile: 56px;
  --hero-top-extra: 65px;
  --header-offset: 180px;
  --header-offset-mobile: 90px;

  --purple-900: #2d1341;
  --purple-800: #421c5f;
  --purple-700: #58267d;
  --purple-600: #7030A0;
  --purple-500: #8852af;
  --purple-400: #a175bf;
  --purple-300: #b997cf;
  --purple-200: #d2bade;
  --purple-100: #eadef1;
  --purple-50:  #f5eff9;

  --green-900: #13461e;
  --green-800: #1b632a;
  --green-700: #238036;
  --green-600: #30AE4A;
  --green-500: #3da955;
  --green-400: #78ce8a;
  --green-300: #9cdeaa;
  --green-200: #c0eeca;
  --green-100: #e4f9e9;
  --green-50:  #f2fdf5;

  --accent: var(--purple-600);
  --accent-hover: var(--purple-700);
  --accent-light: var(--purple-100);
  --accent-glow: rgba(112, 48, 160, 0.08);

  --accent-green: var(--green-600);
  --accent-green-light: var(--green-100);
  
  --accent-orange: #EA580C;
  --accent-red: #DC2626;
  --red-soft:#fdedec;

  --bg: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-surface: #F9F5FC; 
  --bg-surface-green: var(--green-50);
  --bg-hero: linear-gradient(160deg, var(--purple-50) 0%, #FFFFFF 40%, var(--green-50) 100%);
  --line:#ece8f2;

  --text: #1E1B2E;
  --text-secondary: #57536B;
  --text-muted: #8C89A0;
  --border: #E8E5F0;
  --border-accent: rgba(112, 48, 160, 0.25);
  --border-green: rgba(48, 174, 74, 0.25);

  --shadow-purple: 0 8px 30px rgba(112, 48, 160, 0.18);
  
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --font-display: 'Manrope', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --max-w: 1440px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  --purple:#7030A0;
  --purple-d:#5a2682;
  --purple-soft:#f3ecfa;
  --green:#2BB03D;
  --green-d:#229a32;
  --green-soft:#eaf7ec;
  --red:#E03E3E;
  --red-soft:#fdedec;
  --orange:#E8932A;
  --ink:#211b2e;
  --ink-2:#4a4358;
  --muted:#8b8597;
  --line:#ece8f2;
  --bg:#faf9fd;
  --bg-2:#f5f2fb;
  --white:#fff;
  --r:16px;
  --r-sm:10px;
  --shadow:0 18px 50px -22px rgba(60,30,100,.28);
  --shadow-sm:0 8px 24px -12px rgba(60,30,100,.22);

}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* === UTILITY === */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
.section { padding: 150px 0 50px 0; position: relative; }
.section-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--purple-600);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-label::before {
  content: '';
  width: 20px; height: 2px;
  background: var(--purple-400);
  border-radius: 2px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 16px;
}
.section-label-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.section-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 600px;
  line-height: 1.7;
}

/* === HERO === */
.hero {
  padding: 140px 0 100px;
  background: var(--bg-hero);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(124,58,237,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -150px; left: -50px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(22,163,74,0.05) 0%, transparent 70%);
  pointer-events: none;
}*
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 44px);
  font-weight: 800;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 14px; /* було 24px */
  animation: fadeInUp 0.6s ease 0.1s both;
}

.hero h1 .highlight {
  background: var(--purple-600);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-description {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 520px;
  animation: fadeInUp 0.6s ease 0.2s both;
}

.hero-actions {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  animation: fadeInUp 0.6s ease 0.3s both;
}
.btn-primary {
  background: var(--green-500);
  color: white;
  padding: 16px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-display);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(124,58,237,0.25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-purple); background: var(--purple-600);}
.btn-secondary {
  background: white;
  color: var(--purple-700);
  padding: 16px 32px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  font-family: var(--font-display);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn-secondary:hover { border-color: var(--purple-300); background: var(--purple-50); }
.btn-secondary .play {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--purple-100);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--purple-500);
}

.btn-secondary .play::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent currentColor;
    margin-left: 2px;
}

.hero-stat-num .accent { color: var(--purple-600); }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
  animation: fadeInUp 0.6s ease 0.4s both;
}

.hero-stat-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}

/* вступний підпис у тому ж рядку, що й колонки */
.hero-stats > .hero-stat-label {
  font-size: 12px;
  line-height: 1.25;
  flex: 0 1 110px;
}

/* загальний стиль підписів */
.hero-stat-label {
  color: var(--text-muted);
  margin-top: 6px;
  font-weight: 500;
}

/* колонки статистики не стискаються */
.hero-stats > div:not(.hero-stat-label) {
  flex: 0 0 auto;
}

/* підписи під числами — в один рядок, щоб блоки лишались компактними */
.hero-stats > div:not(.hero-stat-label) .hero-stat-label {
  font-size: 11px;
  white-space: nowrap;
  flex: none;
  margin-top: 6px;
}

/* дисклеймер завжди з нового рядка під hero-stats */
.hero-stat-disclaimer {
  flex-basis: 100%;
  width: 100%;
  order: 99;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
  max-width: 560px;
}

/* на вузьких екранах — підпис і кожна колонка з власного рядка (без одинокого переносу) */
@media (max-width: 600px) {
  .hero-stats { gap: 12px; }
  .hero-stats > .hero-stat-label { flex: 0 0 100%; font-size: 13px; }
  .hero-stats > div:not(.hero-stat-label) { flex: 0 0 100%; }
  .hero-stats > div:not(.hero-stat-label) .hero-stat-label { white-space: normal; }
}
/* === [Claude] кінець блоку HERO STATS === */
.hero-pain-strip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 16px;
  padding: 12px 16px;
  background:linear-gradient(180deg,#fff,var(--bg-2));
  border:1px solid var(--line);
  border-radius: 12px;
}

.hero-pain-item {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text, #2a2a2a);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.hero-pain-item::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  min-width: 6px;
  background: var(--green-600);
  border-radius: 50%;
  margin-top: 6px;
}
@media (max-width: 768px) {
  .hero-pain-strip {
    padding: 12px 14px;
  }
  .hero-pain-item {
    font-size: 13px;
  }
}

@media (min-width: 1025px) {
  body.home .hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
}

@media (max-width: 1600px) {
  :root { --max-w: 1200px; }
}

@media (min-width: 1500px) {
  .hero .container { max-width: 1560px; }

  .hero h1 { font-size: clamp(44px, 3.2vw, 60px); }

  .hero-description { font-size: 18px; max-width: 600px; }
  /* [замінено Claude] .hero-stat-num { font-size: 36px; } */
  /* [замінено Claude] .hero-stat-label { font-size: 12px; } */

  .hero { padding-top: 180px; padding-bottom: 100px; }
  .hero-grid { gap: 90px; }
}

/* Hero mockup */
.cb-shell {
  display: flex;
  height: 100%;
  min-height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  background: #F6F7F9;
  font-family: var(--font-body, inherit);
}

/* Sidebar */
.cb-sidebar {
  width: 42px;
  background: #ffffff;
  border-right: 1px solid #E4E7EC;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  gap: 2px;
  flex-shrink: 0;
}
.cb-logo {
  margin-bottom: 10px;
  padding: 4px 0;
}
.cb-sb-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  font-size: 12px;
  color: #8E95A2;
  cursor: default;
}
.cb-active-chart { color: #7C3AED; }

/* Main */
.cb-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Topbar */
.cb-topbar {
  height: 40px;
  background: #ffffff;
  border-bottom: 1px solid #E4E7EC;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  flex-shrink: 0;
}
.cb-search {
  background: #F6F7F9;
  border: 1px solid #E4E7EC;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 10px;
  color: #8E95A2;
  width: 110px;
}
.cb-topbar-icons { display: flex; gap: 2px; margin-left: auto; }
.cb-ticon {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: #8E95A2; border-radius: 6px;
}
.cb-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #16A34A);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 7px; font-weight: 700;
  flex-shrink: 0;
}
.cb-user-info { display: flex; flex-direction: column; line-height: 1.2; }
.cb-user-name { font-size: 9px; font-weight: 600; color: #1A1D23; }
.cb-user-sub  { font-size: 8px; color: #8E95A2; }

/* Content */
.cb-content {
  padding: 12px 14px;
  overflow: hidden;
  flex: 1;
}
.cb-page-title {
  font-size: 13px;
  font-weight: 700;
  color: #1A1D23;
  margin-bottom: 8px;
}

/* Tabs */
.cb-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid #E4E7EC;
  margin-bottom: 10px;
}
.cb-tab {
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 500;
  color: #8E95A2;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1.5px;
  white-space: nowrap;
}
.cb-tab-active {
  color: #7030A0;
  border-bottom-color: #7030A0;
  font-weight: 700;
}

/* KPI row */
.cb-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}

.cb-kpi-card {
  background: #ffffff;
  border: 1px solid #E4E7EC;
  border-radius: 8px;
  padding: 8px 10px 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.cb-kpi-label {
  font-size: 8px;
  font-weight: 700;
  color: #8E95A2;
  text-transform: uppercase;
  letter-spacing: .3px;
  margin-bottom: 4px;
}
.cb-kpi-value {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 2px;
}
.cb-purple { color: #7030A0; }
.cb-green  { color: #16A34A; }
.cb-orange { color: #F57C00; }
.cb-blue   { color: #2563EB; }

.cb-kpi-sub {
  font-size: 7.5px;
  color: #8E95A2;
  margin-bottom: 4px;
  line-height: 1.3;
  flex: 1;
}
.cb-delta {
  display: inline-flex;
  align-items: center;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  margin-bottom: 4px;
  align-self: flex-start;
}
.cb-delta-up   { color: #1E8A2E; background: #E8F8EA; }
.cb-delta-flat { color: #F57C00; background: #FFF7ED; }

.cb-spark {
  height: 28px;
  margin: auto -10px 0;
  overflow: hidden;
}
.cb-spark svg { display: block; width: 100%; height: 100%; }

/* Bottom split */
.cb-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}
.cb-table-card,
.cb-donut-card {
  background: #ffffff;
  border: 1px solid #E4E7EC;
  border-radius: 8px;
  padding: 8px 10px;
}
.cb-card-title {
  font-size: 8px;
  font-weight: 700;
  color: #8E95A2;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 6px;
}
.cb-mini-table,
.cb-mini-table thead,
.cb-mini-table tbody,
.cb-mini-table tr,
.cb-mini-table th,
.cb-mini-table td {
  all: revert;
  box-sizing: border-box;
}

.cb-mini-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 8px !important;
  font-family: inherit !important;
  border: none !important;
  padding: 0 !important;
}
.cb-mini-table th {
  text-align: left !important;
  color: #8E95A2 !important;
  font-weight: 700 !important;
  padding: 3px 0 !important;
  border: none !important;
  border-bottom: 1px solid #E4E7EC !important;
  width: auto !important;
  background: none !important;
}
.cb-mini-table th:not(:first-child) {
  text-align: right !important;
}
.cb-mini-table td {
  padding: 3px 0 !important;
  color: #1A1D23 !important;
  border: none !important;
  border-bottom: 1px solid #F0F1F4 !important;
  width: auto !important;
  background: none !important;
  font-size: 8px !important;
}
.cb-mini-table td:not(:first-child) {
  text-align: right !important;
  font-weight: 600 !important;
  color: #555B66 !important;
}
.cb-mini-table tr:last-child td {
  border-bottom: none !important;
}

.cb-donut-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cb-legend { display: flex; flex-direction: column; gap: 5px; }
.cb-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 8px;
  color: #555B66;
}
.cb-legend-dot {
  width: 8px; height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.hero-visual {
  position: relative;
  animation: fadeInRight 0.8s ease 0.3s both;
}
.cb-sb-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Float notification */
.hero-float {
  position: absolute;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-lg);
  animation: float 4s ease-in-out infinite;
  font-size: 13px;
}
.hero-float-1 { top: 20px; right: -30px; animation-delay: 0s; }
.hero-float-2 { bottom: 40px; left: -20px; animation-delay: 2s; }
.hero-float-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.hero-float-icon.green { background: var(--green-100); }
.hero-float-icon.purple { background: var(--purple-100); }
.hero-float-text strong { display: block; color: var(--text); font-weight: 600; }
.hero-float-text span { color: var(--text-muted); font-size: 11px; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* === PROBLEMS === */
.problems {
  background: white;
  border-top: 1px solid var(--border);
}
.problems-header { text-align: center; margin-bottom: 60px; }
.problems-header .section-subtitle { margin: 0 auto; }
.pain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:0 auto}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease;box-shadow:var(--shadow-sm)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pic{width:46px;height:46px;border-radius:12px;background:var(--purple-soft);display:flex;align-items:center;justify-content:center;color:var(--purple);margin-bottom:16px}
.pic svg{width:22px;height:22px}
.pcard h3{font-size:19px;font-weight:800;line-height:1.2;margin-bottom:9px}
.pcard .desc{font-size:14.5px;color:var(--ink-2);margin-bottom:18px;flex:1}
.stat{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;border-radius:var(--r-sm);padding:10px 13px;line-height:1.25}
.stat.loss{background:var(--red-soft);color:var(--red);margin-bottom:9px}
.stat.fix{background:var(--green-soft);color:var(--green-d)}
.stat svg{width:16px;height:16px;flex-shrink:0}
.stat .pre{font-weight:800}
@media (max-width:720px){.pain-grid{grid-template-columns:1fr}}

/* Capabilities section */
.capabilities { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.caps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.cap-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.cap-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple-500), var(--green-500));
  opacity: 0;
  transition: opacity var(--transition);
}
.cap-card:hover::before { opacity: 1; }
.cap-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.cap-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin-bottom: 20px;
}
.cap-icon.purple { background: var(--purple-50); }
.cap-icon.green { background: var(--green-100); }
.cap-card h3 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  color: var(--text); margin-bottom: 8px;
}
.cap-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* Hero trust badges row */
.hero-trust-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
  animation: fadeInUp 0.6s ease both;
}

.hero-trust-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--purple-700);
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.3px;
}
/* === MARKET PULSE === */
.market-pulse { background: linear-gradient(180deg, #F8F6FF 0%, #F0FDF4 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pulse-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.pulse-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}
.pulse-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-accent);
}
.pulse-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}
.pulse-label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  font-weight: 500;
}
.pulse-change {
  font-size: 12px;
  font-weight: 700;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 100px;
  display: inline-block;
}
.pulse-change.up {
  background: var(--green-50);
  color: var(--green-700);
}
.pulse-change.neutral {
  background: var(--purple-50);
  color: var(--purple-600);
}
.pulse-map-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: white;
  border: 1.5px solid var(--purple-200);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  box-shadow: var(--shadow-md);
}
.pulse-map-placeholder {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}
.pulse-map-icon {
  font-size: 40px;
  flex-shrink: 0;
}
.pulse-map-placeholder h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.pulse-map-placeholder p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* === SOLUTION === */
.solution { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.solution-steps { display: flex; flex-direction: column; gap: 12px; }
.solution-step {
  display: flex; gap: 20px;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
}
.solution-step:hover, .solution-step.active {
  background: white;
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.step-num {
  width: 40px; height: 40px; min-width: 40px;
  border-radius: 12px;
  background: var(--purple-50);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: 16px;
  color: var(--purple-500);
}
.solution-step.active .step-num {
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
  color: white;
  box-shadow: 0 4px 12px rgba(124,58,237,0.25);
}
.step-content h3 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  margin-bottom: 6px;
}
.step-content p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

.solution-visual {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-md);
}
.solution-visual-title {
  font-size: 12px; color: var(--text-muted); font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
}
.solution-visual-title::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--green-500);
  border-radius: 50%;
}
.solution-demo-row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.solution-demo-row:last-child { border-bottom: none; }
.demo-status {
  width: 8px; height: 8px; border-radius: 50%;
}
.demo-status.done { background: var(--green-500); }
.demo-status.pending { background: var(--accent-orange); }
.demo-status.waiting { background: var(--text-muted); }
.demo-car { color: var(--text); font-weight: 600; min-width: 120px; }
.demo-work { color: var(--text-secondary); flex: 1; }
.demo-price { color: var(--green-700); font-weight: 700; font-family: var(--font-display); }

/* === ADVANTAGES MINI SECTION === */
.advantages { 
    background: var(--bg-hero);
    overflow-x: hidden;
    padding: 40px 15px;
}

.advantages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}

@media (min-width: 768px) {
  .advantages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .advantages-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .advantages { padding: 60px 0; }
}

.advantage-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: all var(--transition);
}

.advantage-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.advantage-icon {
  width: 60px; height: 60px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.advantage-icon.purple { background: var(--purple-50); }
.advantage-icon.green { background: var(--green-100); }

.advantage-card h3 {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 700;
  margin-bottom: 8px;
}

.advantage-card p { font-size: 13px; color: var(--text-secondary); }

/* === CASES === */
.cases { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
section.cases.section { padding: 56px 0; }
.cases-header { text-align: center; margin-bottom: 28px; }
section.cases .section-title { margin-bottom: 8px; }
.cases-header .section-subtitle { margin: 0 auto; }
.cases-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.case-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: all var(--transition);
}
.case-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-accent); }
.case-header { display: flex; align-items: center; gap: 16px; margin-bottom: 10px;}
.case-avatar,
.case-avatar img {
    aspect-ratio: 3 / 4;
    height: auto;
}
.case-avatar {
  width: 90px; 
  height: 120px; 
  border-radius: var(--radius-sm, 12px); 
  border: 1px solid var(--border);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-surface);
}

.case-avatar img {
  width: 100%;
  height: 100%;
}

.case-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.case-company { font-size: 13px; color: var(--text-muted); }
.case-before-after {
  display: grid; grid-template-columns: 1fr 28px 1fr;
  gap: 16px; align-items: center;
  margin-bottom: 10px;
}
.case-before, .case-after {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 12px 5px;
  text-align: center;
}
.case-before { border: 1px solid rgba(220,38,38,0.15); }
.case-after { border: 1px solid rgba(22,163,74,0.2); }
.case-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.case-metric { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 1.1;}
.case-before .case-metric { color: var(--accent-red); }
.case-after .case-metric { color: var(--green-600); }
.case-metric-label { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.case-arrow { color: var(--text-muted); font-size: 20px; }
.case-quote { font-size: 14px; margin-top: 14px; color: var(--text-secondary); line-height: 1.45; font-style: italic; }

/* Video testimonials */
.testimonials-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.video-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--transition);
  text-decoration: none;
  color: var(--text);
}
.video-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.video-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-thumb::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,.05)
  );
}

.video-play {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--purple-600),
    var(--purple-500)
  );

  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  box-shadow: 0 4px 20px rgba(124,58,237,0.3);
}
.video-play::before{
  content:'';
  margin-left: 3px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #fff;
}

.video-card:hover .video-play {
  transform: scale(1.1);
}
.video-info { padding: 16px; }
.video-info h4 { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.video-info p { font-size: 12px; color: var(--text-muted); }

/* CTA Block at the bottom of Cases section */
.btn-action-wrap {
  text-align: center;
  margin-top: 50px;
}

.btn-with-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-md, 8px);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-with-icon:hover {
  transform: translateY(-2px);
}

.btn-with-icon .btn-icon {
  transition: transform 0.2s ease;
}

.btn-with-icon:hover .btn-icon {
  transform: translateX(3px);
}

.btn-action-subtext {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-muted, #6B7280);
}

/* SECTION SHELL */

.eyebrow{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--purple);margin-bottom:14px}
.eyebrow.o{color:var(--orange)}

/* PROOFS */
.proofs{background:linear-gradient(180deg,var(--bg-2),var(--white))}
.proof-intro{text-align:center;max-width:720px;margin:0 auto 50px}
.proof-intro h2{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:-.5px;line-height:1.08}
.proof-intro .lead{font-size:18px;color:var(--ink-2);margin-top:14px}
.proof-intro .lead b{color:var(--purple);font-weight:800}
.prow{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:center;margin-bottom:66px}
.prow:last-child{margin-bottom:0}
.prow.flip .ptext{order:2}
.prow.phone-row{grid-template-columns:1.1fr .9fr}
.ptext h3{font-size:26px;font-weight:800;margin:6px 0 14px;line-height:1.15;letter-spacing:-.3px}
.ptext p{font-size:16px;color:var(--ink-2)}
.ptext .kick{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;font-weight:800;color:var(--green-d);background:var(--green-soft);padding:9px 14px;border-radius:999px}
.pmock{min-width:0}
.frame{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--bg)}
.frame-bar i{width:10px;height:10px;border-radius:50%;background:#e0dceb}
.frame-bar .ti{margin-left:8px;font-size:11.5px;font-weight:700;color:var(--muted)}
.frame-body{padding:2px}
.frame-body img{
        width: 100%;
        height: auto;
        display: block;
        padding: 0px
}
.phone{width:264px;max-width:100%;margin:0 auto;background: var(--line);border-radius:34px;padding:10px;box-shadow:var(--shadow)}
.phone-screen{background:#fff;border-radius:25px;overflow:hidden;aspect-ratio:9/18.5;display:flex;flex-direction:column}
@media (max-width:880px){.prow,.prow.phone-row{grid-template-columns:1fr;gap:30px;margin-bottom:54px}.prow.flip .ptext{order:0}.pmock{max-width:520px;width:100%}}

/* CONTROL */
.control{padding:74px 0;background:var(--bg-2)}
.ctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.ctrl-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow-sm)}
.ctrl-card .lab{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--orange);margin-bottom:8px}
.ctrl-card h3{font-size:18px;font-weight:800;margin-bottom:9px}
.ctrl-card p{font-size:13.5px;color:var(--ink-2)}
.data-note{text-align:center;max-width:780px;margin:30px auto 0;font-size:12.5px;color:var(--muted)}
@media (max-width:700px){.ctrl-grid{grid-template-columns:1fr}}

/* === INTEGRATIONS === */
.integrations { background: white; }
.integrations-wrap { margin-top: 50px; }
.cb-int-modern { max-width: 1080px; margin: 0 auto; }

.cb-sup-head { display: flex; justify-content: center; margin-bottom: 18px; }
.cb-sup-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: #1E1B2E;
  background: #fff; border: 1px solid #E8E5F0; border-radius: 100px;
  padding: 8px 18px; box-shadow: 0 4px 14px rgba(112,48,160,.06);
}

.cb-marquee {
  position: relative; overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.cb-track {
  display: flex; gap: 14px; width: max-content;
  animation: cb-scroll 28s linear infinite;
}
.cb-marquee:hover .cb-track { animation-play-state: paused; }
@keyframes cb-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.cb-chip {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-weight: 600; font-size: 14px; color: #1E1B2E;
  background: #fff; border: 1px solid #E8E5F0; border-radius: 14px;
  padding: 12px 20px; box-shadow: 0 2px 10px rgba(30,27,46,.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cb-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(112,48,160,.14);
  border-color: #D9CEE8;
}

.cb-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.cb-dot-green  { background: #2BB03D; box-shadow: 0 0 0 3px rgba(43,176,61,.12); }
.cb-dot-purple { background: #7030A0; box-shadow: 0 0 0 3px rgba(112,48,160,.12); }
.cb-dot-orange { background: #E8842B; box-shadow: 0 0 0 3px rgba(232,132,43,.12); }

.cb-groups {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 36px; margin-top: 34px;
}
.cb-group { text-align: center; }
.cb-group-title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #7030A0; margin-bottom: 12px;
}
.cb-group-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (max-width: 600px) {
  .cb-track { animation-duration: 20s; }
  .cb-chip { font-size: 13px; padding: 10px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cb-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .cb-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* === PRICING === */
.pricing { background: var(--bg-surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pricing-header { text-align: center; margin-bottom: 20px; }
.pricing-header .section-subtitle { margin: 0 auto; }
.pricing-toggle-wrap { text-align: center; margin-bottom: 50px; }
.pricing-toggle-wrap.lip {
	position: fixed;
	top: 93px;
	left: 0;
	width: 100%;
	z-index: 3;
	background: #fff;
	padding: 15px 0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.pricing-toggle {
  display: inline-flex;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 5px;
  box-shadow: var(--shadow-sm);
}
.pricing-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-display);
}
.pricing-btn.active {
  background: var(--purple-500);
  color: white;
  box-shadow: 0 2px 8px rgba(124,58,237,0.25);
}
.pricing-save { font-size: 11px; color: var(--green-600); font-weight: 700; }
.pricing-btn.active .pricing-save { color: var(--green-300); }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* === ONBOARDING === */
.onboarding { background: var(--bg); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.onboard-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 50px;
  position: relative;
}
.onboard-timeline::before {
  content: '';
  position: absolute;
  top: 32px; left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(to right, var(--purple-300), var(--green-300));
}
.onboard-step { text-align: center; position: relative; }
.onboard-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--purple-400);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: 18px;
  color: var(--purple-600);
  margin: 0 auto 16px;
  position: relative; z-index: 1;
  box-shadow: var(--shadow-sm);
}
.onboard-step h4 {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; margin-bottom: 8px;
}
.onboard-step p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* Lead magnet */
.lead-magnet {
  background: linear-gradient(135deg, var(--purple-50), white, var(--green-50));
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  margin-top: 80px;
}
.lead-magnet h3 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 800;
  margin-bottom: 12px;
}
.lead-magnet p { font-size: 15px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.7; }
.lead-magnet-items { list-style: none; margin-bottom: 24px; }
.lead-magnet-items li {
  font-size: 14px; color: var(--text-secondary);
  padding: 6px 0;
  display: flex; align-items: center; gap: 8px;
}
.lead-magnet-items .check { color: var(--green-600); font-weight: 700; }

/* === CTA FINAL === */
.cta-final {
  text-align: center;
  padding: 120px 0;
  background: linear-gradient(180deg, white 0%, var(--purple-50) 100%);
  position: relative;
}
.cta-final::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(124,58,237,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.cta-final h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  margin-bottom: 16px;
  position: relative;
}
.cta-final .highlight {
  background: linear-gradient(135deg, var(--purple-600), var(--purple-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cta-final p {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 40px;
  max-width: 500px;
  margin-left: auto; margin-right: auto;
  position: relative;
}
.cta-final .btn-primary { font-size: 18px; padding: 18px 40px; position: relative; }

/* === TEAM === */
.team { background: white; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.team-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  transition: all var(--transition);
}
.team-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-accent); }
.team-avatar {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
}

.team-avatar img {
	width: 150px;
	height: 150px;
	object-fit: cover;
	margin-bottom: 12px;
	border-radius: 50%;
}
.team-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.team-role { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
.team-contacts { display: flex; gap: 10px; justify-content: center; }
.team-link {
  font-size: 12px; color: var(--purple-600);
  text-decoration: none; font-weight: 600;
  padding: 6px 12px;
  background: var(--purple-50);
  border-radius: 8px;
  transition: all var(--transition);
}
.team-link:hover { background: var(--purple-100); }

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { display: none; }
  .solution-grid { grid-template-columns: 1fr; gap: 40px; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .comp-grid { grid-template-columns: repeat(3, 1fr); }
  .caps-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .nav-links { display: none; }
  .nav-phone { display: none; }
  .mobile-toggle { display: block; }
  .problems-grid { grid-template-columns: 1fr; }
  .caps-grid { grid-template-columns: 1fr; }
  .cases-grid { grid-template-columns: 1fr; }
  .testimonials-video-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .comp-grid { grid-template-columns: 1fr; }
  .calc-cta-banner { flex-direction: column; text-align: center; padding: 24px; }
  .hero-trust-row { justify-content: center; }
  .pulse-grid { grid-template-columns: repeat(2, 1fr); }
  .pulse-map-cta { flex-direction: column; text-align: center; padding: 24px; }
  .onboard-timeline { grid-template-columns: 1fr 1fr; }
  .onboard-timeline::before { display: none; }
  .lead-magnet { grid-template-columns: 1fr; padding: 32px; }
  .team-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .case-before-after { grid-template-columns: 1fr; gap: 12px; }
  .case-arrow { transform: rotate(90deg); margin: 0 auto; }
}
.cta-row{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:20px}

/* ===== LEGACY PAGE STYLES (non-homepage) ===== */

.waveWrapperInner.bgTop {
margin: 0;
}
.section-inner.thin.error404-content {
display: block;
text-align: center;
width: 100%;
background: #fff;
min-height: 93vh;
position: relative;
color: #000;
display: flex;
justify-content: center;
flex-direction: column;
}

.section-inner.thin.error404-content * {
color: #000;
font-size: 26px;
}
.block_05 > div > span {
padding-right: 36px;
}
.block_02 .h3 {
text-align: left;
}
.zag_page .h2{
  color:#000;  
  max-width: 900px;
  margin: 0 auto 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;}
.h3 {
text-align: center;
font-weight: 600;
font-size: 22px;
}
.zag_page p {
  max-width: 820px;
  margin: 0 auto 32px;
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-muted);
}
table.tbg {
max-width: 650px;
margin: 55px auto;
}

input.batton {
opacity: 0;
position: absolute;
z-index: -9;
}

.x4.top span ul.act li{background:#fff;}
.zag_page a {
margin: 34px auto;
margin-bottom: 0;
}
.simple-page a:hover {
  text-decoration: underline;
}
.simple-page p {
	text-align:center;
	max-width: 860px;
    margin: 0 auto 28px;
    text-align: left;
  	font-size: 17px;
  	line-height: 1.85;
  	color: var(--text);
  }
.simple-page {
  margin: 15px auto;
  max-width: 1080px;
  padding: 0 20px;
}
.simple-page p strong,
.simple-page p b {
  font-weight: 700;
  color: var(--title);
}

.simple-page img {
  display: block;

  width: 100%;
  max-width: 1000px;
	height: auto;
  margin: 52px auto;

  border-radius: 20px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.08);
}
.simple-page .contact-icons {
display:flex;
align-items: center;
justify-content: center;
}
.simple-page .contact-icons div p{
padding: 50px 5%;
}
.simple-page .contact-icons img {
margin: auto auto;
margin-right: 10px;
}
.simple-page .contact-icons a img {
  display: block;
  max-width: 25px;
	height: auto;
  margin: 10px 5px;
  border-radius: 20px;
}
.zag_page img {
margin: 0 auto;
margin-top: 35px;
max-width: 1070px;
height: auto;
box-shadow: 0px 0px 66px -31px;
}

ul.menu li.phone-s {
display: none;
}

.f div a img {
width: 43px;
height: auto;
padding: 6px;
border-radius: 50px;
background: #000000;
}
.x4.top.x5 strong, .x4.top.x5 strong ~ ul {
display: none;
}

iframe {
max-width: 875px;
}
.x4.top.x5 {
grid-template-columns: 20% 20% 20% 20% 20%;
margin-bottom: 39px;
}
ul.menu > li.logo a {
width: 100%;
height: 100%;
}
ul.menu > li.logo_en a {
width: 100%;
height: 100%;
}

.x4.top.x5 > :nth-child(1) {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
padding: 0;
color: #3da955;
}
table.table p.y {
text-align: center;
background: transparent;
color: #3da955;
padding: 5px 0px;
width: 65px;
margin: 0 auto;
font-weight: 900;
}
table.table {
width: 100%;
padding: 0px 10%;
position: relative;
z-index: 8;
background: #fff;
}
td {
border: 1px solid #e9e9e9;
padding: 3px 22px;
width: 18%;
}


.mobm {
display: none;
}

.forma bold {
position: absolute;
right: 11px;
top: 0;
font-size: 50px;
transform: rotate(45deg);
transition: 0.4s;
cursor:pointer;
}
.forma bold:hover {
transform: rotate(145deg);
}
:focus-visible {
outline: -webkit-focus-ring-color auto 0px;
}
.forma h3 {
font-size: 25px;
text-align: center;
margin: 0;
margin-bottom: 40px;
margin-top: 16px;
}
.forma input, .forma textarea {
width: 100%;
border: 0px solid #000;
padding: 19px 10px;
background: #ffffff;
border-bottom: 1px solid #bdbdbd;
}
.forma .a21 {
margin: 0 auto;
margin-top: 34px;
}
a.a21 input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
opacity: 0;
cursor:pointer;
}
.a21 span.wpcf7-spinner {
position: absolute;
right: 0;
}
.forma input,
.forma select,
.forma textarea {
  font-size: 16px;
}

.forma {
  width: 90%;
  max-width: 600px;
  z-index: 9999;
  position: fixed;
  background: #fff;
  padding: 5% 25px;
  box-sizing: border-box;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: 0.4s;
  z-index: -1;
  opacity: 0;
  max-height: 90vh;

}
.forma-back {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgb(0 0 0 / 88%);
z-index: 99;
transition: 0.4s;
z-index: -1;
opacity: 0;
}
.forma-back.akt {
opacity: 1;
z-index: 999;
}
.forma.akt {
  opacity: 1;
  z-index: 9999;
}

@media (max-width: 600px) {
  .forma h3 {
    font-size: 20px;
    margin-bottom: 20px;
	padding: 5% 0px;
  }
  .forma {
    padding: 15px;
  }
}

table.table td[colspan="5"] {
background: #3da955;
color: #fff;
letter-spacing: 2px;
text-transform: uppercase;
}
.zag_page div#particles-js {
top: 0;
bottom: auto;
height: 72vh;
opacity: 0.5;
}
.zag_page ~ .block_04 {
background: transparent;
}
.bann {
background: transparent;
padding: 150px 10%;
text-align: center;
color: #fff;
letter-spacing: 2px;
position: relative;
overflow: hidden;
}
.bann p {
font-size: 29px;
}
.bann::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url(/wp-content/uploads/car-service.jpg);
background-size: cover;
background-attachment: fixed;
background-position: center;
z-index: -1;
filter: brightness(0.2);
}
.bann .a21 {
margin: 0 auto;
margin-top: 41px;
}

.x4.top span bold.act{display:block;}
.x4.top span bold {
text-align: center;
width: 100%;
display: block;
padding: 0px 10px;
font-weight: 600;
display:none;
}
.x4.top .a21 {
padding: 8px 31px;
margin: 0 auto;
margin-top: 27px;
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}

.x4.top > span {
border: 1px solid #ddd9d9;
padding: 0;
margin: 2%;
border-radius: 20px;
position: relative;
padding-bottom: 75px;
overflow: hidden;
}
.x4.top span bold ~ p {
text-align: center;
}
.x4.top span bold.old {
text-decoration: line-through;
color: #838383;
font-weight: 400;
}
.x4.top span ul li {
padding: 7px 8%;
background: #efefef;
min-height: 69px;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}

@media (max-width: 768px) {
.x4-top-span-ul-li{
display: none !important;
}
}

.x4.top span ul {
margin: 0;
padding: 0px 0px;
list-style: none;
margin-top: 18px;
font-size: 14px;
}
.x4.top span ul > :nth-child(2n) {
background: transparent;
}
.x4.top span ul li {
padding: 7px 8%;
background: #efefef;
}
.x4.top span p {
margin: 0;
padding: 0px 32px;
list-style: none;
margin-top: 18px;
font-size: 14px;
}
.x4.top span ul li {
padding: 6px 15px;
}

.x4.top span h3 {
text-align: center;
color: #ffffff;
font-size: 22px;
background: rgb(61 169 85);
margin: 0;
padding: 18px 0px;
margin-bottom: 25px;
letter-spacing: 2px;
}

.zag_page {
padding: 70px 10%;
padding-top: 185px;
text-align: center;
max-width: 1440px;
margin: 0 auto;
}
.zag_page.s {
padding-bottom: 0;
}

.bar.lip {
position: fixed;
top: 120px;
}
.x4.top {
margin-top: 55px;
background: #fff;
}
.bar {
position: absolute;
padding: 15px 10%;
width: 100%;
display: flex;
justify-content: space-between;
background: #f3f3f3;
margin-top: -30px;
z-index: 3;
}
.bar span {
position: relative;
background: #e1d8e7;
color: #000;
padding: 12px 21px;
border-radius: 50px;
width: 100%;
margin: 0% 2%;
padding-left: 86px;
cursor: pointer;
}
.x4.top span p {
min-height: 90px;
display: flex;
justify-content: center;
flex-direction: column;
}
.bar span div {
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
}
.bar.lip.lip2 {
opacity: 0;
}
tr.tr {
position: absolute;
margin-top: -61px;
left: calc(10% + 1px);
width: 80%;
display: flex;
justify-content: space-between;
z-index: 9;
background: #fff;
}
tr.tr td {
width: 100%;
margin-right: 2px;
}
tr.tr.act {
position: fixed;
top: 93px;
margin: 0;
background: #fff;
}
tr.tr.act {
position: fixed;
top: 93px;
margin: 0;
background: #fff;
}
.bar span div bold {
font-size: 13px;
color: #000;
}
.bar span.act {
background: #e1d8e7;
}
.bar span.act strong {
background: #ffffff;
}
.bar span.act strong::after {
left: calc(100% - 18px);
}
.bar span strong {
position: absolute;
left: 22px;
top: calc(50% - 10px);
width: 40px;
height: 20px;
background: white;
border-radius: 50px;
transition: 0.4s;
}
.bar span strong::after {
content: '';
position: absolute;
left: 2px;
top: 2px;
width: 16px;
height: 16px;
border-radius: 50px;
background: #3da955;
transition: 0.4s;
}

.x4 {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
padding: 50px 10%;
}


div#particles-js {
display: block;
position: absolute;
width: 100%;
height: 45vh;
bottom: 0;
filter: invert(1);
z-index: -2;
left: 0;
}
.f > a ~ div > div {
display: block;
grid-template-columns: 50% 50%;
padding: 10px 0px;
margin: 5px auto;
}
.f > a ~ div > div a {
width: 100%;
display: block;
padding: 3px 0px;
}
.f > a ~ div ~ div ~ div ~ div{
display: grid;
}
.f img {
width: 123px;
}
.f .a21 {
margin-top:0px;
}

.f {
padding: 50px 10%;
background: #1a1a1a;
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
color: #fff;
}
a {
color: #3da955;
}

*{box-sizing:border-box;}
.a21 {
position: relative;
border: 2px solid #3da955;
text-align: center;
padding: 20px 54px;
margin-top: 25px;
border-radius: 50px;
background: #3da955;
color: #fff;
overflow: hidden;
display: block;
width: max-content;
}
.a21 span {
position: relative;
z-index: 2;
}
.a21:hover{ border: 2px solid #7030a1;}
.a21:hover::after {
left: 0px;
width: 100%;
height: 70px;
background: #7030a1;
}
.a21::after {
content: '';
position: absolute;
left: -24px;
bottom: calc(50% - 35px);
width: 70px;
height: 70px;
background: #3a9b4f;
border-radius: 100px;
transition: 0.4s;
}

ul.menu .a21 {
margin: 0;
}
a {
text-decoration:none;
transition:0.4s;
cursor:pointer;
}


li.logo {
background: url(/wp-content/uploads/logo-min.png);
background-size: 125px;
font-size: 0;
width: 145px;
height: 130px;
transition: 0.4s;
background-repeat: no-repeat;
}
li.logo_en {
  background: url(/wp-content/uploads/Carbook_logo_en_min.png);
	background-size: 145px;
	font-size: 0;
	width: 145px;
	height: 130px;
	transition: 0.4s;
	background-repeat: no-repeat;
}

ul.menu a:hover {
color: #7030a0;
}
ul.menu ul {
opacity: 0;
transition: 0.5s;
z-index: -1;
position: absolute;
right: 0px;
top: 15%;
margin: 0;
padding: 0;
margin-top: 64px;
width: max-content;
max-width: 200px;
}
ul.menu.act ul{background: #fff;}
ul.menu li:hover ul {
opacity: 1;
z-index: 2;
}
ul.menu li {
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
padding: 5px 0px;
}
ul.menu > li~li.current-menu-item a::after {
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 2px;
background: #7030a0;
}
li.menu-item-has-children::after {
display: block !important;
content: '^';
position: absolute;
right: -13px;
top: calc(50% - 15px);
transform: rotate(180deg);
font-family: monospace;
font-weight: 900;
font-size: 14px;
color: #000;
pointer-events: none;
}
ul.menu > li a {
color: #000;
position: relative;
}
ul.menu > li.current-menu-item a {
color: #7030a1;
}

ul.menu.act {
background: #fff;
padding: 0px 10%;
overflow: visible;
}
ul.menu.act li.logo {
height: 81px;
margin: 6px 0px;
background-size: 89px;
background-repeat: no-repeat;
filter: none;
}
ul.menu.act li.logo_en {
background: url(/wp-content/uploads/logo_carbook.png);
background-size: 135px;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0;
  width: 145px;
  height: 95px;
  filter: none;
}
ul.menu {

position: fixed;
z-index: 1000;
background: transparent;
top: 0;
left: auto;
display: flex;
justify-content: space-between;
width: 100%;
padding: 20px 10%;
transition: 0.4s;
max-width: 1920px;
list-style: none;
margin: 0;
box-sizing: border-box;
overflow: visible;
}
.section-inner,.skip-link.screen-reader-text {
position: fixed;
top: 0;
left: 0;
display: none;
}

html,body {
max-width: 1920px;
margin: 0 auto;
position: relative;
}
@media(min-width:2000px){
.wrapper {
max-width: 1920px;
margin: 0 auto;
}
ul.menu.act {
padding: 0px 2%;
}
ul.menu {
width: 1920px;
padding: 0px 2%;
}
.bar.lip {
position: fixed;
top: 120px;
width: 1920px;
}
tr.tr.act {
position: fixed;
top: 93px;
margin: 0;
background: #fff;
width: 1536px;
left: auto;
}
}

@media(max-width:1600px){
.x4.top span ul, .x4.top span p {
margin: 0;
margin-top: 18px;
font-size: 14px;
}
.bar {
padding: 15px 0%;
}
.banner_a div p {
padding: 12px;
font-size: 12px;
}
.block_05 div > span {
padding-right: 22px;
}
.banner_a h2 {
font-size: 30px;
}
html body .entry-content .banner_a h2 bold {
font-size: 60px;
}
.banner_a div ~ span {
position: absolute;
right: 9%;
width: 35%;
top: 30vh;
z-index: -1;
}
.banner_a div ~ span img {
width: 100%;
height: auto;
}

}


@media(max-width:1400px){
.block_01 > div div h3 {
min-height: 135px;
}
.banner_a bold~ div~div{margin:0;}
.banner_a bold~ div {

margin-top: 21px;
}
html body .entry-content .banner_a h2 {
margin: 5px 0px;
}
iframe {
max-width: 95%;
}
tr.tr {
position: absolute;
margin-top: -61px;
left: calc(1% + 1px);
width: 98%;
display: flex;
justify-content: space-between;
z-index: 9;
}
table.table {
width: 100%;
padding: 0px 1%;
}
html body .entry-content .banner_a h2 {
font-size: 18px;
}
.x4 {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
padding: 50px 1%;
}
.banner_a {
min-height: 835px;
padding: 0% 3%;
}
ul.menu {
padding: 14px 2%;

}
ul.menu.act {
background: #fff;
padding: 0px 2%;
}

.simple-page img {max-width:100%;}
.zag_page img {max-width:100%;}
}
@media(min-width:1024px){
.block_01 > div div h3 {
min-height: 97px;
}
.home ul.menu > li.current-menu-item a, .home li.menu-item-has-children::after {
color: #000;
}
.home ul.menu > li a {
color: #000;
}
.home ul.menu.act > li a, .home ul.menu.act li.menu-item-has-children::after {
color: #000;
}
}

@media (max-width: 1200px) {
  ul.menu {
    padding: 14px 2%;
    gap: 0;
  }

  #menu-item-34,
  #menu-item-15,
  #menu-item-17 { 
    display: none !important;
  }

}
@media(max-width:1024px){
.home ul.menu > li a {
color: #000;
}
.bann ~ .x4.top.x5 {
grid-template-columns: 100%;
}
ul.menu {
position: fixed;
top: 0;
left: -320px;
width: 320px !important;
max-width: 85vw !important;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
display: block;
background: #fff;
z-index: 9999;
padding: 80px 20px 20px;
box-sizing: border-box;
transition: left 0.4s ease; 
box-shadow: 2px 0 15px rgba(0,0,0,0.15);
}
ul.menu li.phone-s {
display: block;
}
ul.menu li.phone-s img {
width: 44px;
height: 44px;
margin-right: 9px;
}
.bar.lip {
position: absolute;
top: auto;
}
.x4.top.x5 strong ~ ul.act {
display: block;
}
.x4.top.x5 strong ~ ul.act ul {
display: none;
}
.x4.top .a21 {
padding: 8px 31px;
margin: auto 0px auto 0px;;
margin-top: 40px;
position: relative;
bottom: 20px;
max-width: 200px;
}
.x4.top.x5 strong ~ ul {
display: none;
}
.x4.top.x5 strong {
margin-top: 19px;
margin-bottom: 29px;
text-align: center;
position: relative;
}
.x4.top.x5 strong ~ ul.act ul.act {
display: block;
margin-left: 17px;
}
.x4.top.x5 > span {
padding-bottom: 0;
}
.x4.top.x5 strong ~ ul > li > p.act::after {
transform: rotate(45deg);
}
.x4.top.x5 strong ~ ul > li > p::after {
content: '+';
font-size: 33px;
margin: -12px 8px;
position: absolute;
right: 4px;
top: calc(50% - 8px);
color: #3da955;
transition:0.4s;
}
.x4.top.x5 strong ~ ul > li > p {
border: 1px solid #d5d5d5;
list-style: none;
margin: 0;
padding: 13px;
position: relative;
}
.x4.top.x5 strong ~ ul {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
.x4.top.x5 strong.act::after {
transform: rotate(-90deg);
}
.x4.top.x5 strong::after {
content: '>';
position: absolute;
font-family: monospace;
margin: -1px 10px;
transform: rotate(90deg);
font-size: 19px;
color: #ffffff;
transition: 0.4s;
}


.x4.top.x5 strong {
display: block;
background: #3da955;
color: #fff;
width: 200px;
margin: 11px auto;
margin-bottom: 25px;
padding: 6px 0px;
border-radius: 25px;
font-weight: 100;
}


table.table {
display: none;
}
.x4.top.x5 {
grid-template-columns: 50% 50%;
}
.otz > :nth-child(2n) {
text-align: left;
}
.otz > :nth-child(2n) > :nth-child(1) {
order: 0;
}
.otz div {
grid-template-columns: 100%;
}
.x4 {
display: grid;
grid-template-columns: 50% 50%;
padding: 50px 1%;
}

.bar span {
padding: 2px 21px;
padding-left:75px;
}
.block_p_02 ul {
grid-template-columns: 33% 33% 33%;
}
.bar span {
width: 98%;
margin-bottom: 1%;
}
.bar {
display: grid;
grid-template-columns: 50% 50%;
}
.hamburger-lines::after {
content: '';
position: absolute;
width: 53px;
height: 48px;
left: -7px;
top: -9px;
background: #fff;
z-index: -1;
}
.hamburger-lines {
display: block;
height: 30px;
width: 38px;
position: absolute;
top: 27px;
left: auto;
right: 19px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
z-index: 999;
float: right;
}
.hamburger-lines .line {
display: block;
height: 4px;
width: 100%;
border-radius: 10px;
background: #000;
}

.hamburger-lines .line1 {
transform-origin: 0% 0%;
transition: transform 0.4s ease-in-out;
}

.hamburger-lines .line2 {
transition: transform 0.2s ease-in-out;
}

.hamburger-lines .line3 {
transform-origin: 0% 100%;
transition: transform 0.4s ease-in-out;
}
.hamburger-lines.act .line1 {
transform: rotate(45deg);
}
.hamburger-lines.act .line2 {
transform: scaleY(0);
}
.hamburger-lines.act .line3 {
transform: rotate(-45deg);
}
.mobm .a21 {
padding: 14px 16px;
height: auto;
margin: 0;
height: 49px;
margin: 17px auto;
width: 190px;
font-size: 12px;
}
.mobm img {
width: 85px;
height: auto;
padding: 10px;
}
.mobm {
display: grid;
position: fixed;
justify-content: space-between;
left: 0;
top: 0;
width: 100%;
max-width: 100vw;
overflow: hidden;
background: #fff;
z-index: 9999;
grid-template-columns: 85px calc(100% - 170px) 85px;
box-sizing: border-box;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.f {
padding: 50px 10%;
background: #1a1a1a;
display: grid;
grid-template-columns: 100%;
color: #fff;
text-align: center;
}

html body .entry-content h2, html body .entry-content .h2 {
font-size: 28px;
font-family: var(--font-display);
text-align: center;
}
html body .entry-content .banner_a h2 bold {
font-size: 60px;
margin: 0 auto;
margin-top: 151px;
}
ul.menu ul {
opacity: 1;
transition: 0.5s;
z-index: 1;
position: relative;
left: 0px;
margin: 0;
padding: 0;
margin-top: 5px;
}
ul.menu li {
display: block;
justify-content: center;
flex-direction: column;
position: relative;
width: auto;
padding: 14px 0px;
}
li.menu-item-has-children::after {
opacity: 0;
}
ul.menu .a21 {
padding: 12px 35px;
margin-top: 0px;
width: max-content;
width: 100%;
}
ul.menu.act {
left: 0;
}
ul.menu.act li.logo,li.logo {
background-size: 104px;
font-size: 0;
width: 150px;
height: 97px;
transition: 0.4s;
background-repeat: no-repeat;
}
ul.menu.acta, ul.menu.act.acta {
left: 0;
}
li.logo {
opacity: 0;
}
li.logo_en {
opacity: 0;
}
ul.menu, ul.menu.act {
background: #fff;
padding: 14px 2%;
display: block;
width: 320px;
max-height: 100vh;
overflow-y: scroll;
height: 100vh;
transition: 0.4s;
left: -320px;
z-index: 9999;
}
}


@media(max-width:800px){
iframe {
max-width: max-content;
height: 217px;
}
.x4.top {
margin-top: 0;
}
.bar {
position: relative;
padding: 15px 10%;
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 0;
z-index: 3;
}
.bar span {
padding: 11px 21px;
padding-left: 75px;
height: 39px;
}
.bar {
display: grid;
grid-template-columns: 100%;
}
.bar.lip {

}
.bar span div bold {
font-size: 8px;
color: #000;
}
.bar span div {
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
font-size: 10px;
}
.x4 {
display: grid;
grid-template-columns: 100%;
padding: 50px 1%;
}
.forma {
width: 100%;
z-index: 9999;
position: fixed;
background: #fff;
padding: 25px;
box-sizing: border-box;
transition: 0.4s;
z-index: -1;
opacity: 0;
height: 100vh;
overflow-y: scroll;
margin-top:20%;
}

.a21 {
width: auto;
}

}


@media (max-width:650px){

.x4.top.x5 {
grid-template-columns: 100%;
}
}

@media (max-width: 480px) {

  .mobm {
    grid-template-columns: 70px calc(100% - 140px) 70px;
  }

  .mobm img {
    width: 85px;
  }

  .mobm .a21 {
    font-size: 14px;
    padding: 10px 8px;
    width: auto;
  }

}

/* CARBOOK vs RemOnline */

.carbook-vs .container {
max-width: 1200px;
margin: 0 auto;
padding: 10px;
}

.carbook-vs .section {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
}

.carbook-vs .intro-text {
width: 100%;
margin-bottom: 20px;
line-height: 1.6;
}

.carbook-vs .comparison-table-divider {
position: relative;
}

.carbook-vs .comparison-table {
width: 100%;
border-collapse: collapse;
}

.carbook-vs .comparison-table td {
padding: 5px 20px;
vertical-align: top;
background-color: #f9f9f9;
border: none;
}

.carbook-vs .comparison-table th {
padding: 15px;
color: #2c3e50;
font-size: 1.2em;
text-align: left;
background-color: #f9f9f9;
border: none;
}

.carbook-vs .divider {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background-color: #27ae60;
transform: translateX(-50%);
z-index: 1;
}

.carbook-vs .point {
line-height: 1.6;
}

.carbook-vs .point p {
text-align: left;
}

.carbook-vs .mobile-header {
display: none;
}

.carbook-vs .table-container {
overflow-x: auto;
}

.carbook-vs table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}

.carbook-vs th,
.carbook-vs td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}

.carbook-vs th {
background-color: #3da955;
color: white;
}

.carbook-vs td {
background-color: #fff;
}

.carbook-vs .table-container th:nth-child(2),
.carbook-vs .table-container th:nth-child(3) {
text-align: center;
}

.carbook-vs .carbook {
background-color: #e6f3ff;
font-weight: bold;
text-align: center;
}

.carbook-vs .alternative {
background-color: #f8f8f8;
text-align: center;
}

.carbook-vs .yes {
color: #28a745;
font-weight: bold;
font-size: 1.2em;
}

.carbook-vs .no {
color: #e74c3c;
font-weight: bold;
font-size: 1.2em;
}

.carbook-vs .highlight {
color: #28a745;
font-size: 1.2em;
}

.carbook-vs .centered-button .a21 {
text-align: center;
margin: 20px auto;
}

.carbook-vs .faq-section {
padding: 40px 20px;
border-radius: 12px;
margin-top: 40px;
}

.carbook-vs .faq-item {
margin-bottom: 20px;
border-bottom: 1px solid #ddd;
}

.carbook-vs .faq-question {
background: none;
border: none;
color: #3da955;
padding: 5px 0;
width: 100%;
text-align: left;
cursor: pointer;
}

.carbook-vs .faq-question .faq-question-h3{
font-size: 18px;
font-weight: bold;
}

.carbook-vs .faq-answer {
display: none;
padding-bottom: 15px;
color: #333;
line-height: 1.6;
animation: fadeIn 0.3s ease-in-out;
}

.carbook-vs .faq-item.active .faq-answer {
display: block;
}

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@media (max-width: 768px) {
.carbook-vs .comparison-table {
display: block;
}

.carbook-vs .comparison-table tr {
display: block;
margin-bottom: 10px;
}

.carbook-vs .comparison-table th,
.carbook-vs .comparison-table td {
display: block;
width: 100%;
}

.carbook-vs .divider {
display: none;
}

.carbook-vs .desktop-header {
display: none !important;
}

.carbook-vs .mobile-header {
display: block;
color: #2c3e50;
font-size: 1.2em;
padding: 10px 20px;
background-color: #f9f9f9;
}

.carbook-vs .container,
.carbook-vs .section {
padding-left: 5px;
padding-right: 5px;
}

.carbook-vs .table-container {
overflow-x: hidden;
}

.carbook-vs .table-container table {
table-layout: fixed;
width: 100%;
}

.carbook-vs .table-container th,
.carbook-vs .table-container td {
padding: 8px;
font-size: 14px;
word-wrap: break-word;
}

.carbook-vs .table-container th:nth-child(2),
.carbook-vs .table-container th:nth-child(3),
.carbook-vs .table-container td:nth-child(2),
.carbook-vs .table-container td:nth-child(3) {
width: 20%;
text-align: center;
}

.carbook-vs .table-container td:nth-child(1),
.carbook-vs .table-container th:nth-child(1) {
width: 60%;
}
}

@media (max-width: 480px) {
.carbook-vs .desktop-header {
display: none;
}

.carbook-vs .container,
.carbook-vs .section {
padding-left: 5px;
padding-right: 5px;
}

.carbook-vs .table-container table {
table-layout: fixed;
width: 100%;
}

.carbook-vs .table-container th,
.carbook-vs .table-container td {
padding: 6px;
font-size: 13px;
}

.carbook-vs .table-container th:nth-child(2),
.carbook-vs .table-container th:nth-child(3),
.carbook-vs .table-container td:nth-child(2),
.carbook-vs .table-container td:nth-child(3) {
width: 25%;
}

.carbook-vs .table-container td:nth-child(1),
.carbook-vs .table-container th:nth-child(1) {
width: 50%;
}

.carbook-vs h1,
.carbook-vs h2,
.carbook-vs h3 {
font-size: 1.2em;
}

.carbook-vs p,
.carbook-vs li {
font-size: 14px;
}

.carbook-vs .highlight {
font-size: 1.1em;
}

.carbook-vs .yes,
.carbook-vs .no {
font-size: 1.1em;
}
}

.faq-section .carbook-definition-geo {
  max-width: 860px;
  margin: 0 auto 48px;
  padding: 28px 32px;
  background: #f6f8f7;
  border-left: 4px solid #3DA955;
  border-radius: 14px;
  text-align: left;
  box-shadow: 0 6px 24px rgba(30, 27, 46, .05);
}

.faq-section .carbook-definition-geo p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: #1E1B2E;
}

.faq-section .carbook-definition-geo p:last-child {
  margin-bottom: 0;
}

.faq-section .carbook-definition-geo strong {
  color: #2c8f43;
}

.faq-section .faq-item.faq-item--narrow {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

        #cb-native-layout {
        background: #ffffff;
        color: #1a1a1a;
        line-height: 1.6;
        overflow-x: hidden;
    }

    #cb-native-layout .a21 {
        margin: 20px auto;
    }

    .cb-zag-page {
        text-align: center;
        padding: 80px 20px 60px;
        background: #ffffff;
        border-bottom: 1px solid #f0f0f0;
		padding-top: 185px;
    }

	.cb-zag-page a{
        margin: 34px auto;
        margin-bottom: 0;
    }

    .cb-zag-page h1 {
        font-size: 42px;
        color: #000;
        margin: 0 0 25px 0;
        line-height: 1.1;
        text-transform: none;
    }

    .cb-zag-page p {
        max-width: 850px;
        margin: 0 auto 35px;
        color: #4a4a4a;
    }

    .cb-badge { 
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.55rem;
        font-weight: 500;
        background-color: rgba(111, 45, 189, 0.1);
        color: #6F2DBD;
        margin-bottom: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .cb-native-section {
        position: relative;
        max-width: 1100px;
        margin: 0 auto;
        padding: 80px 20px;
        display: flex;
        align-items: center;
        gap: 60px;
        z-index: 1;
    }


    .cb-native-section.reverse::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        height: 100%;
        background-color: #f1f1f1;
        z-index: -1;
    }

    .cb-native-section.reverse {
        flex-direction: row-reverse;
    }

    .cb-text-side {
        flex: 1;
    }

    .cb-text-side h2, .cb-text-side h3 {
        font-family: var(--font-body), sans-serif !important;
        font-size: 22px !important;
        margin-bottom: 20px;
        color: #000;
        line-height: 1.3;
        font-weight: 600;
    }

     .cb-text-side h4 {
        font-size: 1.1rem;
        margin-top: 25px;
        color: #2563eb;
        font-weight: 700;
    }

    .cb-img-side {
        flex: 1;
    }

    .cb-img-side img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        cursor: zoom-in;
        transition: transform 0.3s ease;
        background: #fff; 
        padding: 12px;
        margin-bottom: 15px;
    }

    .cb-img-side img:last-child { margin-bottom: 0; }

    .cb-img-side img:hover {
        transform: scale(1.02);
    }

    .features-list { 
        list-style: none; 
        padding: 0; 
        margin: 25px 0;
    }

    .features-list li { 
        margin-bottom: 18px; 
        padding-left: 35px; 
        position: relative; 
        font-size: 16px;
        color: #334155;
    }

    .features-list li::before { 
        content: "\2713"; 
        position: absolute; 
        left: 0; 
        color: #10b981;
        font-weight: bold; 
        font-size: 1.3rem;
        line-height: 1;
        top: 2px;
    }

    /* Nested lists in features */
    .features-list ul {
        list-style: disc;
        padding-left: 20px;
        margin-top: 10px;
    }
    .features-list ul li {
        padding-left: 0;
        margin-bottom: 8px;
        font-size: 15px;
    }
    .features-list ul li::before { content: none; }

     /* --- STATUS BADGES (Специфічні для ДХЧ) --- */
    .cb-status-badge {
        display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600; margin-right: 5px;
    }
    .cb-status-red { background: #fee2e2; color: #b91c1c; }
    .cb-status-yellow { background: #fef3c7; color: #b45309; }
    .cb-status-green { background: #dcfce7; color: #15803d; }
    .cb-status-gray { background: #f1f5f9; color: #64748b; }

    @media (max-width: 900px) {
        .cb-native-section, .cb-native-section.reverse {
            flex-direction: column;
            text-align: center;
            padding: 40px 20px;
            gap: 30px;
        }
        .features-list li {
            text-align: left;
        }
        .cb-zag-page h1 {
            font-size: 32px;
        }
    }

    .cb-lightbox {
        display: none; position: fixed; z-index: 10000;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.85); align-items: center; justify-content: center;
    }
    .cb-lightbox img { max-width: 90%; max-height: 85vh; border-radius: 4px; }

	.cb-integration-logos { 
		display: flex; justify-content: center; gap: 30px; align-items: baseline; 
		margin-bottom: 40px; flex-wrap: wrap;
	}
	.cb-integration-logos img { height: 35px; opacity: 0.8; }
	.cb-integration-logos span { font-weight: 700; color: #64748b; font-size: 1.1rem; }
	.cb-integration-logos svg {
		width: 170px;
		height: 31px;
	}


/* Секція кейсів (Success Stories)
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
} */

/* ==========================================================================
   1. НАДІЙНИЙ ВІДЕО-СКРОЛ БЕЗ СЛАЙДЕРІВ
   ========================================================================== */
.video-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 15px;
  -webkit-overflow-scrolling: touch;
}

.video-scroll-wrapper {
  display: flex;
  gap: 20px;
}

.video-scroll-wrapper > * {
  flex: 0 0 320px;
  max-width: 320px;
}
.scroll-hint {
  text-align: center;
  font-size: 13px;
  color: #88889a;
  margin-top: 10px;
}

.reviews-rating-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 15px;
    color: #5b6270;
    flex-wrap: wrap;
    justify-content: center;
}
.reviews-rating-summary .rrs-stars {
    color: #F5A623;
    font-size: 18px;
    letter-spacing: 2px;
}
.reviews-rating-summary .rrs-value strong {
    color: #1A1D23;
    font-weight: 700;
}
.reviews-rating-summary .rrs-count {
    color: #8E95A2;
}
/* ==========================================================================
   2. ІСТОРІЇ УСПІХУ (З ОБМЕЖЕННЯМ ВИСОТИ ТА КНОПКОЮ)
   ========================================================================== */
.success-stories-layout {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 60px;
}
.success-story-card {
  display: flex;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  padding: 30px;
  align-items: flex-start;
  gap: 30px;
  border: 1px solid #eef0f4;
}
.story-kpi {
  font-size: 22px;
  font-weight: 700;
  padding: 12px 15px;
  border-radius: 8px;
  width: 180px;
  flex-shrink: 0;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.2;
}
.purple-badge { background: #f3e8ff; color: #6b21a8; }
.green-badge { background: #dcfce7; color: #166534; }

.story-content {
  flex: 1;
}
.story-content h4 { font-size: 20px; margin: 0 0 4px 0; color: #111827; }
.story-company { font-size: 14px; color: #6b7280; display: block; margin-bottom: 15px; }
.story-lead { font-weight: 600; color: #1f2937; margin-bottom: 12px; font-size: 16px; }

.story-text-wrapper {
  max-height: 90px;
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s ease-in-out;
}

.story-text-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(transparent, #ffffff);
  transition: opacity 0.3s;
}
.story-text-wrapper.expanded {
  max-height: 2000px;
}
.story-text-wrapper.expanded::after {
  opacity: 0;
  pointer-events: none;
}

.story-quote { font-style: italic; color: #4b5563; line-height: 1.6; margin: 0; border-left: 3px solid #e5e7eb; padding-left: 15px; }

.toggle-story-btn {
  background: none;
  border: none;
  color: #6b21a8;
  font-weight: 600;
  font-size: 14px;
  padding: 0;
  margin-top: 12px;
  cursor: pointer;
  text-decoration: underline;
}

.story-kpi:has(img) {
  padding: 0;
  height: 240px;
  overflow: hidden;
  background: #f3f4f6;
}

.story-kpi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ==========================================================================
   3. ВІДГУКИ З ВЕЛИКИМИ КАРТИНКАМИ СТО (Картковий стиль)
   ========================================================================== */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 30px;
}
.review-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  border: 1px solid #eef0f4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.review-sto-image-wrap {
  width: 100%;
  height: 200px;
  background: #f3f4f6;
  border-bottom: 1px solid #eef0f4;
}
.review-sto-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-card-body {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.review-author-info {
  margin-bottom: 15px;
}
.review-author-info h3 { font-size: 18px; margin: 0 0 4px 0; color: #111827; font-weight: 700; }
.review-role { font-size: 13px; color: #6b7280; line-height: 1.4; display: block; }
.review-text { font-size: 14px; line-height: 1.6; color: #4b5563; margin: 0; }

@media (max-width: 768px) {
  .success-story-card { flex-direction: column; gap: 15px; padding: 20px; }
  .story-kpi { width: 100%; min-width: auto; }
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   КОРЕКЦІЯ ТА СТАНДАРТИЗАЦІЯ КАРТОК ШОРТКОДА (БЕЗ ФІКСОВАНОЇ ВИСОТИ)
   ========================================================================== */

.video-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 15px 5px 25px 5px;
  -webkit-overflow-scrolling: touch;
}

.video-scroll-wrapper {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.video-scroll-wrapper .swiper-slide {
  flex: 0 0 280px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #eef0f4;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-scroll-wrapper .swiper-slide:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.video-scroll-wrapper .swiper-slide > div,
.video-scroll-wrapper .swiper-slide a.img {
  display: block;
  width: 100%;
  height: 150px;
  position: relative;
  background-color: #f3f4f6;
  overflow: hidden;
}

.video-scroll-wrapper .swiper-slide a.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.3s ease;
}

.video-scroll-wrapper .swiper-slide:hover a.img img {
  transform: scale(1.04);
}

.video-scroll-wrapper .swiper-slide span {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; 
}

.video-scroll-wrapper .swiper-slide .h3 {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0 !important;
  line-height: 1.4;
}

.video-scroll-wrapper .swiper-slide span p:not(.h3) {
  font-size: 13px;
  line-height: 1.5;
  color: #6b7280;
  margin: 0;
}

.scroll-hint {
  text-align: center;
  font-size: 13px;
  color: #88889a;
  margin-top: 12px;
}

.video-scroll-wrapper .swiper-slide a.img::after {
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: rgba(107, 33, 168, 0.85);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  text-indent: 3px;
  opacity: 0.8;
  transition: all 0.2s ease;
}

.video-scroll-wrapper .swiper-slide:hover a.img::after {
  opacity: 1;
  background: rgba(107, 33, 168, 0.95);
  transform: translate(-50%, -50%) scale(1.1);
}

/* ============================================================
   TAP TARGETS FIX — мінімум 44px для тач-цілей (WCAG / Apple HIG)
   ============================================================ */

ul.menu > li > a {
  padding-top: 12px;
  padding-bottom: 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

a.feature-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-top: 12px;
  padding-bottom: 12px;
}

#capabilities p a.feature-link,
#features p a.feature-link {
  display: inline;
  min-height: unset;
  padding-top: 0;
  padding-bottom: 0;
  align-items: unset;
}

.hamburger-lines {
  width: 44px;
  height: 44px;
  padding: 7px 3px;
  box-sizing: border-box;
  justify-content: space-between;
}

/* ============================================================
   MENU FIXES
   ============================================================ */
ul.menu > li > a[href="#."]:empty {
  display: none;
}

ul.menu {
  overflow: visible;
}

.lang-item-pl > a {
  font-size: 0 !important;
}
.lang-item-pl > a::after {
  content: 'PL';
  font-size: 15px;
  font-weight: 500;
  color: inherit;
  font-family: inherit;
  line-height: 1;
}

.pll-parent-menu-item > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px 0 10px;
  font-weight: 600;
  position: relative;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}
.pll-parent-menu-item > a:hover {
  background: rgba(112, 48, 160, 0.08);
}

.pll-parent-menu-item::after {
  display: none !important;
}

.pll-parent-menu-item.menu-item-has-children::after {
  display: block !important;
  content: '^';
  position: absolute;
  right: 2px;
  top: calc(50% - 15px);
  transform: rotate(180deg);
  font-family: monospace;
  font-weight: 900;
  font-size: 14px;
  color: #000;
  pointer-events: none;
}
.pll-parent-menu-item:hover.menu-item-has-children::after {
  transform: rotate(0deg);
}

.pll-parent-menu-item .sub-menu {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 1001;
  margin: 4px 0 0 0;
  padding: 6px 0;
  min-width: 80px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s, visibility 0.2s;
  list-style: none;
}
.pll-parent-menu-item:hover .sub-menu,
.pll-parent-menu-item.act .sub-menu {
  opacity: 1;
  visibility: visible;
}

.pll-parent-menu-item .sub-menu li {
  display: block;
  padding: 0;
  width: 100%;
}
.pll-parent-menu-item .sub-menu li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.pll-parent-menu-item .sub-menu li a:hover {
  background: var(--purple-100, #f0e6f8);
  color: var(--purple-600, #7030a0);
}

@media (max-width: 1024px) {
  .pll-parent-menu-item .sub-menu {
    position: relative;
    top: auto;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;
    margin: 6px 0 0 0;
    padding: 4px 0;
    background: #fafafa;
  }
  .pll-parent-menu-item .sub-menu li a {
    min-height: 44px;
    padding: 0 20px;
  }
  .pll-parent-menu-item > a {
    min-height: 44px;
    padding: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .pll-parent-menu-item.menu-item-has-children::after {
    right: 4px;
  }
}

.required {
  color: #e32;
  font-weight: bold;
  margin-left: 4px;
}

ul.menu.act {
  z-index: 1000;
  overflow: visible;
}

@media (max-width: 1024px) {
  ul.menu.acta {
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.pll-parent-menu-item {
  position: relative;
}
.pll-parent-menu-item .sub-menu {
  z-index: 1001 !important;
}

body:has(.forma.akt) ul.menu {
  z-index: 990;
  pointer-events: none;
}
body:has(.forma.akt) ul.menu li a {
  pointer-events: none;
}

.entry-header-inner,
.featured-media-inner,
.section-inner,
.footer-inner {
  overflow: visible !important;
}

@media (min-width: 1025px) {
  ul.menu {
    overflow: visible !important;
  }
  ul.menu li {
    overflow: visible;
  }
  ul.menu > li.pll-parent-menu-item {
    overflow: visible;
    position: relative;
  }
}

@media (min-width: 1025px) {
  ul.menu,
  ul.menu.act {
    overflow: visible !important;
  }
   ul.menu.act{
   	padding: 0 4%;
   }
  ul.menu li {
    overflow: visible;
  }
  .pll-parent-menu-item {
    overflow: visible;
    position: relative;
  }
}

@media (min-width: 1200px) {
  ul.menu.act {
	padding: 0 10%;
  }
}

.pll-parent-menu-item .sub-menu {
  z-index: 1001 !important;
}

ul.menu.act {
  padding: 0 10%;
}

.entry-header-inner {
  z-index: auto !important;
}
.featured-media-inner {
  z-index: auto !important;
}

.section,
.problems.section,
.cases.section,
.capabilities.section,
.solution.section,
.advantages,
.pricing.section,
.integrations.section,
.market-pulse.section,
.features.section,
.onboarding.section,
.team.section,
.cta-final {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.hero {
  padding-top: calc(var(--section-space) + var(--hero-top-extra));
  padding-bottom: var(--section-space);
}

.advantages {
  padding-left: 15px;
  padding-right: 15px;
}

@media (max-width: 768px) {
  .section,
  .problems.section,
  .cases.section,
  .capabilities.section,
  .solution.section,
  .advantages,
  .pricing.section,
  .integrations.section,
  .market-pulse.section,
  .features.section,
  .onboarding.section,
  .team.section,
  .cta-final {
    padding-top: var(--section-space-mobile);
    padding-bottom: var(--section-space-mobile);
  }
  .hero {
    padding-top: calc(var(--section-space-mobile) + var(--hero-top-extra));
    padding-bottom: var(--section-space-mobile);
  }
}
/* === END UNIFIED VERTICAL RHYTHM === */


html {
  scroll-padding-top: var(--header-offset);
}

section[id],
div[id].section,
#hero, #problems, #cases, #capabilities, #solution, #advantages,
#pricing, #pulse, #features, #integrations, #onboarding, #team,
[id^="golovna_pricing_cta_"] {
  scroll-margin-top: var(--header-offset);
}

@media (max-width: 768px) {
  html {
    scroll-padding-top: var(--header-offset-mobile);
  }
  section[id],
  div[id].section,
  #hero, #problems, #cases, #capabilities, #solution, #advantages,
  #pricing, #pulse, #features, #integrations, #onboarding, #team,
  [id^="golovna_pricing_cta_"] {
    scroll-margin-top: var(--header-offset-mobile);
  }
}
/* === END STICKY HEADER ANCHOR OFFSET === */


/* === MENU PADDING FIX 1024-1200 (prevent menu items overlapping on small desktop) === */
/* In the 1024-1200px range PC layout is active but 10% side padding squeezes the nav,
   so items overlap. Reduce to 4% for this range only (>=1200px keeps 10%). */
@media (min-width: 1024px) and (max-width: 1399.98px) {
  ul.menu.act {
    padding: 0 4%;
  }
}
/* === END MENU PADDING FIX 1024-1200 === */


/* ============================================================
   section ФУНКЦІОНАЛ
   ============================================================ */
.cb-roles-wrap{ --cb-ink:#1E1B2E; --cb-muted:#57536B; --cb-card:#FFFFFF; --cb-border:#E8E5F0; --cb-iconbg:#F5EFF9; --cb-purple:#8852AF; --cb-purple2:#7030A0; --cb-green:#3DA955; --cb-gold:#C99A2E; --cb-teal:#1F9E96; max-width:1160px; margin:0 auto; }
.cb-roles-wrap .eyebrow{ display:flex; align-items:center; justify-content:center; gap:10px; color:var(--cb-purple); font-weight:700; letter-spacing:.12em; font-size:13px; margin-bottom:18px; text-transform:uppercase; }
.cb-roles-wrap .eyebrow::before{ content:""; width:28px; height:2px; background:var(--cb-purple); display:inline-block; }
.cb-roles-wrap .title{ text-align:center; font-size:42px; font-weight:600; line-height:1.12; margin:0 0 16px; color:var(--cb-ink); }
.cb-roles-wrap .sub{ text-align:center; color:var(--cb-muted); font-size:18px; max-width:560px; margin:0 auto 26px; line-height:1.5; }
.cb-roles-wrap .tabs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:44px; }
.cb-roles-wrap .tab{ border:1px solid var(--cb-border); background:#fff; border-radius:999px; padding:10px 18px; font-weight:700; font-size:14px; color:var(--cb-muted); cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:.2s; }
.cb-roles-wrap .tab .cb-ic{ width:18px; height:18px; }
.cb-roles-wrap .tab.active{ color:#fff; border-color:transparent; }
.cb-roles-wrap .tab.active.t1{ background:var(--cb-purple); }
.cb-roles-wrap .tab.active.t2{ background:var(--cb-teal); }
.cb-roles-wrap .tab.active.t3{ background:var(--cb-green); }
.cb-roles-wrap .tab.active.t4{ background:var(--cb-purple2); }
.cb-roles-wrap .tab.active.t5{ background:var(--cb-ink); }
.cb-roles-wrap .role{ margin-bottom:34px; }
.cb-roles-wrap .role-head{ display:flex; align-items:center; gap:16px; background:var(--cb-iconbg); border-radius:14px; padding:18px 22px; margin-bottom:18px; position:relative; overflow:hidden; }
.cb-roles-wrap .role-head::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; }
.cb-roles-wrap .r1 .role-head::before{ background:var(--cb-purple); }
.cb-roles-wrap .r2 .role-head::before{ background:var(--cb-teal); }
.cb-roles-wrap .r3 .role-head::before{ background:var(--cb-green); }
.cb-roles-wrap .r4 .role-head::before{ background:var(--cb-purple2); }
.cb-roles-wrap .r5 .role-head::before{ background:var(--cb-gold); }
.cb-roles-wrap .r2 .role-head{ background:#E7F4F3; }
.cb-roles-wrap .r3 .role-head{ background:#EAF6ED; }
.cb-roles-wrap .r5 .role-head{ background:#F2F0F6; }
.cb-roles-wrap .role-ic{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.cb-roles-wrap .role-ic .cb-ic{ width:26px; height:26px; }
.cb-roles-wrap .r1 .role-ic{ background:var(--cb-purple); }
.cb-roles-wrap .r2 .role-ic{ background:var(--cb-teal); }
.cb-roles-wrap .r3 .role-ic{ background:var(--cb-green); }
.cb-roles-wrap .r4 .role-ic{ background:var(--cb-purple2); }
.cb-roles-wrap .r5 .role-ic{ background:var(--cb-ink); }
.cb-roles-wrap .role-txt .role-name{ font-size:13px; letter-spacing:.1em; font-weight:800; text-transform:uppercase; color:var(--cb-ink); margin:0; }
.cb-roles-wrap .role-txt p{ color:var(--cb-muted); font-size:15px; margin:3px 0 0; }
.cb-roles-wrap .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cb-roles-wrap .card{ background:var(--cb-card); border:1px solid var(--cb-border); border-radius:16px; padding:28px; transition:.2s; }
.cb-roles-wrap .card:hover{ box-shadow:0 12px 30px rgba(30,27,46,.08); transform:translateY(-2px); }
.cb-roles-wrap .card .ic{ width:48px; height:48px; border-radius:13px; background:var(--cb-iconbg); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--cb-ink); }
.cb-roles-wrap .card .ic .cb-ic{ width:24px; height:24px; }
.cb-roles-wrap .card h3{ font-size:16px; font-weight:700; margin:0 0 10px; color:var(--cb-ink); }
.cb-roles-wrap .card p{ color:var(--cb-muted); font-size:14px; line-height:1.55; margin:0; }
.cb-roles-wrap .card p b{ color:var(--cb-green); font-weight:700; }
@media (max-width:900px){
  .cb-roles-wrap .grid{ grid-template-columns:repeat(2,1fr); }
  .cb-roles-wrap .title{ font-size:32px; }
}
@media (max-width:600px){
  .cb-roles-wrap .grid{ grid-template-columns:1fr; }
}

.cb-roles-wrap .tab{ text-decoration:none; }
.cb-roles-wrap .tab:hover{ border-color:var(--cb-purple); color:var(--cb-purple); }
.cb-roles-wrap .tab.active:hover{ color:#fff; }
.cb-roles-wrap .tab.active.t1:hover{ border-color:transparent; }
html{ scroll-behavior:smooth; }
.cb-roles-wrap .role{ scroll-margin-top:120px; }
@media (max-width:900px){ .cb-roles-wrap .role{ scroll-margin-top:90px; } }

/* ============================================================ */