/* AI CRM extra tokens (reuse base vars) */
.crm-section { padding: 80px 0; position: relative; }
.crm-section.alt { background: linear-gradient(180deg, var(--primary-50) 0%, #fff 100%); }
.crm-section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.crm-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--primary-100); color: var(--primary-hover);
  font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  margin-bottom: 16px;
}
.crm-eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 4px var(--primary-shadow-sm);
  animation: crmPulse 2s ease-in-out infinite;
}
@keyframes crmPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(119,126,245,0.1); }
  50% { box-shadow: 0 0 0 8px rgba(119,126,245,0); }
}
.crm-section-title {
  font-size: clamp(28px, 4vw, 44px); line-height: 1.1; font-weight: 700;
  color: var(--ink-900); margin: 0 0 16px; letter-spacing: -0.02em;
}
.crm-section-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.crm-section-sub {
  font-size: 17px; line-height: 1.6; color: var(--ink-700); margin: 0;
}

/* Mockup wrapper — premium glass look */
.crm-mockup {
  position: relative; margin: 0 auto; max-width: 1120px;
  border-radius: var(--r-2xl);
  background: #fff;
  box-shadow: var(--shadow-hero);
  border: 1px solid var(--border);
  overflow: hidden;
  opacity: 0; transform: translateY(40px);
  transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
.crm-mockup.in-view { opacity: 1; transform: translateY(0); }
.crm-mockup::before {
  content: ''; position: absolute; inset: -2px;
  background: linear-gradient(135deg, rgba(119,126,245,0.3), transparent 40%, rgba(198,185,250,0.25));
  border-radius: inherit; z-index: -1; filter: blur(24px); opacity: .6;
}
.crm-mockup-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #FAFBFF, #fff);
}
.crm-mockup-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #E3E6EE; }
.crm-mockup-bar .dot.r { background: #F5777D; }
.crm-mockup-bar .dot.y { background: #F5C95E; }
.crm-mockup-bar .dot.g { background: #7AE575; }
.crm-mockup-bar-title {
  margin-left: 16px; font-size: 12px; color: var(--ink-500); font-weight: 500;
}

/* ==== Section 1: Patient Inquiries (Figma pixel-perfect) ==== */
.m-chats {
  display: grid;
  grid-template-columns: 240px 1fr 1.1fr 340px;
  gap: 14px;
  min-height: 820px;
  font-size: 12px;
  color: var(--ink-900);
  background: #F0F2F4;
  padding: 16px;
}
.m-chats-panel {
  background: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

/* ---- SIDEBAR PANEL ---- */
.m-chats-sidebar { padding: 22px 16px 14px; }
.m-chats-brand {
  display: flex; align-items: center; gap: 10px; padding: 0 8px; margin-bottom: 28px;
}
.m-chats-brand .b-logo {
  width: 30px; height: 30px; border-radius: 50%; background: var(--primary);
  position: relative; flex-shrink: 0;
}
.m-chats-brand .b-logo::after {
  content: ''; position: absolute; inset: 8px; border: 2.4px solid #fff;
  border-radius: 50%; box-sizing: border-box;
}
.m-chats-brand .b-logo::before {
  content: ''; position: absolute; inset: 12px; background: #fff; border-radius: 50%; z-index: 1;
}
.m-chats-brand b { font-size: 18px; font-weight: 700; color: var(--ink-900); letter-spacing: -0.3px; }

.m-chats-nav { display: flex; flex-direction: column; gap: 2px; }
.m-chats-nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
  font-size: 13px; color: var(--ink-700); text-decoration: none; font-weight: 500;
  cursor: pointer;
}
.m-chats-nav a:hover { background: var(--primary-50); }
.m-chats-nav a svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-700); }
.m-chats-nav a.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: #fff; font-weight: 600;
  box-shadow: 0 6px 16px rgba(119,126,245,.3);
}
.m-chats-nav a.active svg { color: #fff; }

.m-chats-user {
  margin-top: auto; padding: 10px; border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
}
.m-chats-user .u-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #C6B9FA, #777EF5);
  flex-shrink: 0; overflow: hidden;
}
.m-chats-user .u-info b { display: block; font-size: 13px; font-weight: 600; color: var(--ink-900); margin-bottom: 1px; }
.m-chats-user .u-info span { font-size: 11px; color: var(--ink-500); }

/* ---- LIST PANEL ---- */
.m-chats-list-panel { padding: 24px 22px 20px; }
.m-chats-list-title { font-size: 22px; font-weight: 700; color: var(--ink-900); margin: 0 0 18px; }

.m-chats-search-row { display: flex; gap: 10px; margin-bottom: 18px; }
.m-chats-search {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px;
  font-size: 13px; color: var(--ink-500);
}
.m-chats-search svg { color: var(--ink-500); width: 16px; height: 16px; flex-shrink: 0; }
.m-chats-filter {
  width: 44px; height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--ink-700);
}

.m-chats-qs-head {
  display: flex; align-items: center; margin-bottom: 10px;
}
.m-chats-qs-head h5 { font-size: 13px; font-weight: 600; color: var(--ink-900); margin: 0; flex: 1; }
.m-chats-qs-clean { font-size: 12px; color: var(--primary-hover); text-decoration: underline; font-weight: 500; }

.m-chats-picker {
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px;
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; background: #fff;
  min-height: 44px;
}
.m-chats-picker > svg:first-child { color: var(--ink-500); width: 16px; height: 16px; flex-shrink: 0; }
.m-chats-picker > .chev { margin-left: auto; color: var(--ink-500); }
.m-chats-picker .tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border-radius: 8px; background: var(--primary-100); color: var(--primary-hover);
  font-size: 12px; font-weight: 500;
}
.m-chats-picker .tag .x { opacity: .6; font-weight: 700; }
.m-chats-picker .tag-count {
  padding: 3px 12px; border: 1px solid var(--primary-200); color: var(--primary-hover);
  border-radius: 8px; font-size: 12px; font-weight: 500; background: #fff;
  display: inline-flex; align-items: center; gap: 6px;
}
.m-chats-picker .tag-count .x { opacity: .6; font-weight: 700; }

.m-chats-chips-row { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.m-chats-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: 12px; color: var(--primary-hover); font-weight: 500; background: #fff;
}
.m-chats-chip svg { width: 12px; height: 12px; color: var(--primary-hover); }
.m-chats-chip .n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px;
  background: var(--primary-100); color: var(--primary-hover);
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

.m-chats-tabs {
  display: flex; gap: 4px; margin-bottom: 14px;
  background: #F5F6FA; padding: 5px; border-radius: 14px;
}
.m-chats-tab {
  flex: 1; padding: 10px; border-radius: 10px; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--ink-700); cursor: pointer;
}
.m-chats-tab.active { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(119,126,245,.25); }
.m-chats-tab .n {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px; padding: 1px 7px; min-width: 20px; height: 18px;
  border-radius: 6px; background: rgba(255,255,255,.28); color: #fff; font-size: 11px; font-weight: 600;
}
.m-chats-tab:not(.active) .n { background: #fff; color: var(--ink-700); }

.m-chats-items { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.m-chats-item {
  display: flex; gap: 12px; padding: 10px; border-radius: 14px;
  background: #fff; align-items: center; transition: background .2s;
  animation: chatSlide .5s ease both;
}
.m-chats-item:nth-child(1) { animation-delay: .08s; }
.m-chats-item:nth-child(2) { animation-delay: .14s; }
.m-chats-item:nth-child(3) { animation-delay: .2s; }
.m-chats-item:nth-child(4) { animation-delay: .26s; }
.m-chats-item:nth-child(5) { animation-delay: .32s; }
@keyframes chatSlide {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}
.m-chats-item.active { background: #F5F6FA; }

.m-chats-av { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.m-chats-av svg { width: 100%; height: 100%; display: block; }

.m-chats-info-col { flex: 1; min-width: 0; }
.m-chats-name-row { display: flex; align-items: center; gap: 6px; }
.m-chats-name { font-size: 13px; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-chats-name-row .tg-ic { color: #28A9EA; flex-shrink: 0; }
.m-chats-meta { font-size: 12px; color: var(--ink-500); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-chats-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.m-chats-time { font-size: 11px; color: var(--ink-500); white-space: nowrap; font-weight: 500; }
.m-chats-status {
  padding: 3px 10px; border-radius: 8px; font-size: 11px; font-weight: 500;
  background: var(--primary-100); color: var(--primary-hover);
}
.m-chats-status.progress { background: #FFE8D9; color: #D97706; }
.m-chats-status.ordered { background: #E5FAEF; color: #1E9B5C; }

/* ---- DIALOG PANEL ---- */
.m-chats-dialog-panel { padding: 18px; overflow: hidden; }
.m-chats-head {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  margin-bottom: 14px;
}
.m-chats-head-av { width: 46px; height: 46px; flex-shrink: 0; }
.m-chats-head-av svg { width: 100%; height: 100%; display: block; }
.m-chats-head-info { flex: 1; min-width: 0; }
.m-chats-head-name { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--ink-900); margin-bottom: 2px; }
.m-chats-head-name .tg-ic { color: #28A9EA; }
.m-chats-head-phone { font-size: 12px; color: var(--ink-500); }
.m-chats-call-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
  background: var(--primary-100); color: var(--primary-hover);
  border-radius: 12px; font-size: 12px; font-weight: 600;
  margin-left: auto; flex-shrink: 0;
}
.m-chats-call-badge svg { width: 14px; height: 14px; }
.m-chats-head-toggle { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--ink-700); }
.m-chats-tog { width: 38px; height: 22px; background: var(--ink-400); border-radius: 999px; position: relative; transition: background .2s; }
.m-chats-tog::after { content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.m-chats-tog.on { background: var(--primary); }
.m-chats-tog.on::after { left: 18px; }

.m-chats-body { flex: 1; overflow: hidden; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }
.m-chats-arrow {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 12px; background: var(--primary);
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 6px 20px rgba(119,126,245,.4); cursor: pointer; z-index: 3;
}

.m-msg-row { display: flex; gap: 10px; align-items: flex-end; }
.m-msg-row.me { justify-content: flex-end; }
.m-msg-av { width: 36px; height: 36px; flex-shrink: 0; }
.m-msg-av svg { width: 100%; height: 100%; display: block; }
.m-msg-bubble {
  max-width: 76%; padding: 12px 16px; border-radius: 16px;
  font-size: 13px; line-height: 1.5; color: var(--ink-900);
}
.m-msg-bubble.bot { background: #F5F6FA; border-bottom-left-radius: 4px; }
.m-msg-bubble.me { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.m-msg-sender {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  color: var(--primary-hover); font-weight: 600; margin-bottom: 6px;
}
.m-msg-sender svg { width: 12px; height: 12px; }
.m-msg-time { font-size: 11px; color: var(--ink-500); margin-top: 4px; }
.m-msg-group { display: flex; flex-direction: column; gap: 2px; max-width: 82%; }
.m-msg-row.me .m-msg-group { align-items: flex-end; }

.m-chats-compose {
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: #fff; border: 1px solid var(--border); border-radius: 16px;
}
.m-chats-compose-input { flex: 1; font-size: 13px; color: var(--ink-500); }
.m-chats-compose .send {
  width: 38px; height: 38px; border-radius: 12px; background: var(--primary);
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(119,126,245,.3);
}

/* ---- LEAD PANEL ---- */
.m-chats-lead-panel { padding: 22px 20px; overflow-y: auto; }
.m-chats-lead-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
}
.m-chats-lead-head .g-ic {
  width: 22px; height: 22px; border-radius: 6px; background: var(--primary-50);
  color: var(--primary-hover);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.m-chats-lead-head h5 { font-size: 17px; font-weight: 700; color: var(--ink-900); margin: 0; }

.m-chats-info-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.m-chats-info-row {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-900);
}
.m-chats-info-row svg { width: 16px; height: 16px; color: var(--ink-500); flex-shrink: 0; }

.m-chats-sec {
  margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--border);
}
.m-chats-sec:last-child { border-bottom: 0; }
.m-chats-sec-head {
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700;
  color: var(--ink-900); margin-bottom: 14px;
}
.m-chats-sec-head svg { width: 16px; height: 16px; color: var(--ink-700); }
.m-chats-sec-head .chev { margin-left: auto; color: var(--ink-500); }
.m-chats-sec-head .chev svg { width: 14px; height: 14px; color: inherit; }

.m-chats-field-lbl { display: block; font-size: 13px; font-weight: 500; color: var(--ink-900); margin: 14px 0 6px; }
.m-chats-field-lbl:first-child { margin-top: 0; }
.m-chats-select {
  padding: 12px 14px; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; font-size: 13px; color: var(--ink-500);
  display: flex; align-items: center; gap: 8px;
}
.m-chats-select svg:first-child { width: 16px; height: 16px; color: var(--ink-500); flex-shrink: 0; }
.m-chats-select .chev { margin-left: auto; color: var(--ink-500); }
.m-chats-select.open { border-color: var(--primary-light); }

.m-chats-submanager {
  margin-top: 10px; padding: 14px; background: #FAFBFF; border: 1px solid var(--border);
  border-radius: 12px;
}
.m-chats-submanager .mm-lbl { font-size: 12px; font-weight: 600; color: var(--ink-900); margin-bottom: 6px; }
.m-chats-submanager .mm-input {
  padding: 10px 12px; background: #fff; border: 1px solid var(--border);
  border-radius: 10px; font-size: 12px; color: var(--ink-400);
}
.m-chats-submanager .mm-btn {
  margin-top: 10px; width: 100%; padding: 11px; border-radius: 10px;
  background: var(--primary-light); color: #fff; font-size: 13px; font-weight: 600;
  text-align: center; opacity: .5; cursor: not-allowed;
}

.m-chats-last-rows { display: flex; flex-direction: column; gap: 12px; }
.m-chats-last-row {
  display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500;
}
.m-chats-last-row .d {
  color: #1E9B5C; display: inline-flex; align-items: center; gap: 6px; flex: 1;
}
.m-chats-last-row .d svg { width: 14px; height: 14px; }
.m-chats-last-row .t {
  color: var(--primary-hover); display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
}
.m-chats-last-row .t svg { width: 14px; height: 14px; }

/* Mobile fallback */
@media (max-width: 1100px) {
  .m-chats { grid-template-columns: 1fr; padding: 12px; gap: 12px; min-height: auto; }
  .m-chats-sidebar, .m-chats-lead-panel { display: none; }
  .m-chats-arrow { display: none; }
}

/* ==== Section 2: Pipelines ==== */
.m-pipe { padding: 24px; background: #FAFBFF; min-height: 520px; }
.m-pipe-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.m-pipe-head h4 { font-size: 18px; font-weight: 700; color: var(--ink-900); margin: 0; flex: 1; }
.m-pipe-tabs { display: flex; gap: 6px; background: #fff; padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--border); }
.m-pipe-tab { padding: 6px 14px; font-size: 12px; font-weight: 600; color: var(--ink-700); border-radius: var(--r-pill); cursor: pointer; }
.m-pipe-tab.active { background: var(--primary); color: #fff; }
.m-pipe-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.m-pipe-col {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px;
  min-height: 440px;
}
.m-pipe-col-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.m-pipe-col-head .dot { width: 8px; height: 8px; border-radius: 50%; }
.m-pipe-col-head .title { font-size: 12px; font-weight: 700; color: var(--ink-900); }
.m-pipe-col-head .count { font-size: 11px; color: var(--ink-500); background: #F5F6FA; padding: 2px 8px; border-radius: var(--r-pill); }
.m-pipe-card {
  padding: 10px 12px; background: #FAFBFF; border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 8px; font-size: 11px; color: var(--ink-700);
  transition: transform .2s, box-shadow .2s;
}
.m-pipe-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.m-pipe-card .name { font-size: 12px; font-weight: 600; color: var(--ink-900); margin-bottom: 4px; }
.m-pipe-card .amount { color: var(--primary-hover); font-weight: 700; font-size: 12px; }
.m-pipe-card .meta { display: flex; gap: 8px; margin-top: 6px; font-size: 10px; color: var(--ink-500); }
.m-pipe-card .ai-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px;
  background: var(--primary-100); color: var(--primary-hover);
  border-radius: var(--r-pill); font-size: 9px; font-weight: 700;
}

/* ==== Section 3: Calendar (reuse screenshot layout) ==== */
.m-cal { padding: 20px; min-height: 480px; }
.m-cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.m-cal-head h4 { font-size: 18px; font-weight: 700; color: var(--ink-900); margin: 0 auto 0 0; }
.m-cal-chip {
  padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--ink-700);
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
}
.m-cal-chip.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.m-cal-grid {
  display: grid; grid-template-columns: 60px repeat(7, 1fr);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff;
}
.m-cal-hour-cell, .m-cal-day-head, .m-cal-cell {
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  font-size: 10px; color: var(--ink-500);
}
.m-cal-day-head { padding: 12px 10px; font-weight: 600; color: var(--ink-900); font-size: 12px; background: #FAFBFF; }
.m-cal-day-head.today { background: var(--primary-50); color: var(--primary-hover); }
.m-cal-hour-cell { padding: 20px 8px; text-align: right; font-weight: 500; }
.m-cal-cell { height: 58px; position: relative; }
.m-cal-cell.today { background: rgba(119,126,245,0.03); }
.m-cal-event {
  position: absolute; left: 4px; right: 4px;
  padding: 6px 8px; border-radius: 8px; font-size: 10px; line-height: 1.3;
  background: var(--primary-100); border-left: 3px solid var(--primary); color: var(--ink-900);
  animation: eventPop .6s ease both;
}
@keyframes eventPop {
  from { opacity: 0; transform: scale(.95); }
  to { opacity: 1; transform: scale(1); }
}
.m-cal-event .e-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); margin-right: 4px; }
.m-cal-event .e-name { font-weight: 700; margin-bottom: 2px; }

/* ==== Section 4: Automations split ==== */
.m-auto { display: grid; grid-template-columns: 320px 1fr; min-height: 560px; }
.m-auto-left { border-right: 1px solid var(--border); padding: 20px; background: #FAFBFF; overflow: hidden; }
.m-auto-left h4 { font-size: 16px; font-weight: 700; color: var(--ink-900); margin: 0 0 4px; }
.m-auto-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--r-pill); background: #fff; border: 1px solid var(--border);
  font-size: 12px; font-weight: 600; color: var(--ink-700); margin-bottom: 20px;
}
.m-auto-group { font-size: 11px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .4px; margin: 12px 0 8px; }
.m-auto-item {
  padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 12px;
  margin-bottom: 8px; transition: border-color .2s;
}
.m-auto-item.active { border-color: var(--primary); background: #fff; box-shadow: var(--shadow-primary-sm); }
.m-auto-item-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.m-auto-item-title { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.m-auto-item-desc { font-size: 11px; color: var(--ink-500); line-height: 1.45; }
.m-auto-status {
  font-size: 10px; font-weight: 700; color: #1E9B5C; background: #E5FAEF;
  padding: 3px 8px; border-radius: var(--r-pill);
}
.m-auto-right { padding: 24px; overflow-y: auto; }
.m-auto-right h3 { font-size: 20px; font-weight: 700; color: var(--ink-900); margin: 0 0 16px; display: flex; justify-content: space-between; }
.m-auto-toggle {
  width: 40px; height: 22px; background: var(--primary); border-radius: var(--r-pill); position: relative;
}
.m-auto-toggle::after {
  content: ''; position: absolute; right: 2px; top: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff;
}
.m-auto-chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.m-auto-chip {
  padding: 6px 12px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600;
  background: var(--primary); color: #fff;
}
.m-auto-chip.ghost { background: #fff; color: var(--ink-700); border: 1px solid var(--border); }
.m-auto-desc { font-size: 13px; color: var(--ink-700); line-height: 1.55; margin-bottom: 18px; }
.m-auto-label { font-size: 11px; font-weight: 700; color: var(--ink-900); margin: 14px 0 6px; }
.m-auto-sub { font-size: 11px; color: var(--ink-500); margin-bottom: 8px; line-height: 1.4; }
.m-auto-field {
  padding: 10px 12px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  font-size: 12px; color: var(--ink-700);
}
.m-auto-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.m-auto-stat { padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: 10px; text-align: center; }
.m-auto-stat .k { font-size: 10px; font-weight: 700; color: var(--ink-500); text-transform: uppercase; letter-spacing: .3px; }
.m-auto-stat .v { font-size: 20px; font-weight: 700; color: var(--ink-900); margin-top: 2px; }
.m-auto-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.m-auto-mode-card {
  padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: 12px;
}
.m-auto-mode-card.sel { border-color: var(--primary); background: var(--primary-50); box-shadow: var(--shadow-primary-sm); }
.m-auto-mode-card .t { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.m-auto-mode-card .d { font-size: 11px; color: var(--ink-500); margin-top: 4px; line-height: 1.4; }

/* ==== Section 5: Outreach ==== */
.m-out { padding: 24px; background: #FAFBFF; min-height: 520px; }
.m-out-head h4 { font-size: 18px; font-weight: 700; color: var(--ink-900); margin: 0 0 4px; }
.m-out-head p { font-size: 12px; color: var(--ink-500); margin: 0 0 14px; }
.m-out-box {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px;
}
.m-out-box h5 { font-size: 14px; font-weight: 700; color: var(--ink-900); margin: 0 0 14px; }
.m-out-row {
  display: grid; grid-template-columns: 160px 1fr; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--border); align-items: center;
}
.m-out-row .k { font-size: 12px; font-weight: 700; color: var(--ink-900); }
.m-out-row .k .hint { display: block; font-size: 10px; font-weight: 500; color: var(--ink-500); margin-top: 2px; }
.m-out-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.m-out-chip {
  padding: 7px 12px; border-radius: 10px; font-size: 12px; font-weight: 600;
  background: #fff; border: 1px solid var(--border); color: var(--ink-700); cursor: pointer;
}
.m-out-chip.sel { background: var(--primary); color: #fff; border-color: var(--primary); }
.m-out-ghost {
  color: var(--ink-500); font-size: 12px;
}

/* ==== Section 6: Wizard (reuse) ==== */
.m-wiz { padding: 24px; min-height: 560px; display: grid; grid-template-columns: 220px 1fr; gap: 20px; }
.m-wiz-side { background: #FAFBFF; border-radius: 14px; padding: 14px; border: 1px solid var(--border); }
.m-wiz-side-head {
  display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.m-wiz-side-head .i {
  width: 22px; height: 22px; border-radius: 6px; background: var(--primary-100);
  display: flex; align-items: center; justify-content: center; color: var(--primary-hover);
}
.m-wiz-side-head .t { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.m-wiz-chat-item {
  padding: 10px; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  font-size: 11px; color: var(--ink-700); margin-bottom: 6px; cursor: pointer;
}
.m-wiz-chat-item.active { border-color: var(--primary); background: var(--primary-50); }
.m-wiz-main { display: flex; flex-direction: column; }
.m-wiz-bubble {
  padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: 16px;
  font-size: 13px; color: var(--ink-700); line-height: 1.6;
  box-shadow: var(--shadow-xs);
  margin-bottom: auto;
}
.m-wiz-bubble h5 { margin: 0 0 10px; font-size: 15px; color: var(--ink-900); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.m-wiz-table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 12px; }
.m-wiz-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.m-wiz-table td:first-child { color: var(--ink-700); font-weight: 600; }
.m-wiz-table td:last-child { color: var(--ink-900); font-weight: 700; text-align: right; }
.m-wiz-bubble b { color: var(--ink-900); font-weight: 700; }
.m-wiz-bubble em { font-style: normal; color: var(--primary-hover); font-weight: 700; }
.m-wiz-input {
  margin-top: 16px; padding: 14px 18px; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-xs);
}
.m-wiz-input .inp { flex: 1; color: var(--ink-500); font-size: 13px; }
.m-wiz-send { width: 34px; height: 34px; border-radius: 10px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; }

/* ==== Section 7: Tasks + Notes + Docs (cards grid) ==== */
.m-tnd { padding: 32px; background: #FAFBFF; }
.m-tnd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
.m-tnd-card {
  background: #fff; border: 1px solid var(--border); border-radius: 20px;
  padding: 20px; box-shadow: var(--shadow-sm);
  transition: transform .3s, box-shadow .3s;
}
.m-tnd-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.m-tnd-card-tabs {
  display: flex; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.m-tnd-card-tabs .t {
  width: 26px; height: 26px; border-radius: 8px; background: #F5F6FA;
  display: flex; align-items: center; justify-content: center; color: var(--ink-500);
}
.m-tnd-card-tabs .t.active { background: var(--primary-100); color: var(--primary-hover); }
.m-tnd-card h5 { font-size: 16px; font-weight: 700; color: var(--ink-900); margin: 0 0 14px; }
.m-tnd-card label { display: block; font-size: 11px; font-weight: 700; color: var(--ink-900); margin: 10px 0 4px; }
.m-tnd-card .field {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-size: 12px; color: var(--ink-500); background: #fff;
}
.m-tnd-card .field.area { min-height: 60px; }
.m-tnd-card .drop {
  border: 1.5px dashed var(--border); border-radius: 14px; padding: 22px 14px; text-align: center;
  background: #FAFBFF;
}
.m-tnd-card .drop .btn-mini {
  display: inline-block; padding: 9px 18px; border-radius: 10px; background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 600; margin-bottom: 8px;
}
.m-tnd-card .drop .hint { font-size: 11px; color: var(--ink-500); }
.m-tnd-card .cta-row { display: flex; gap: 8px; margin-top: 16px; }
.m-tnd-card .cta-row .btn-g { flex: 1; padding: 9px; border-radius: 10px; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--primary-hover); text-align: center; background: #fff; }
.m-tnd-card .cta-row .btn-p { flex: 1; padding: 9px; border-radius: 10px; background: var(--primary-light); color: #fff; font-size: 12px; font-weight: 600; text-align: center; opacity: .6; }
.m-tnd-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; font-size: 12px; color: var(--ink-700); }
.m-tnd-switch { width: 34px; height: 18px; background: var(--border); border-radius: var(--r-pill); position: relative; }
.m-tnd-switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }

/* ==== Section 8: Analytics ==== */
.m-an { padding: 24px; min-height: 520px; background: #FAFBFF; }
.m-an-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.m-an-head h4 { font-size: 18px; font-weight: 700; color: var(--ink-900); margin: 0 auto 0 0; }
.m-an-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.m-an-kpi {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px;
}
.m-an-kpi .k { font-size: 11px; color: var(--ink-500); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
.m-an-kpi .v { font-size: 26px; font-weight: 700; color: var(--ink-900); margin: 4px 0; letter-spacing: -0.02em; }
.m-an-kpi .d { font-size: 11px; color: #1E9B5C; font-weight: 600; }
.m-an-kpi .d.down { color: var(--accent-red); }
.m-an-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.m-an-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.m-an-card h5 { font-size: 13px; font-weight: 700; color: var(--ink-900); margin: 0 0 14px; display: flex; justify-content: space-between; }
.m-an-card h5 .ai-i {
  display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--primary-hover);
  padding: 4px 10px; background: var(--primary-100); border-radius: var(--r-pill);
}
.m-an-chart { height: 180px; position: relative; }
.m-an-chart svg { width: 100%; height: 100%; }
.m-an-chart .gridline { stroke: var(--border); stroke-dasharray: 3 3; }
.m-an-chart .line1 {
  fill: none; stroke: var(--primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: drawLine 2s ease forwards;
}
.m-an-chart .line2 {
  fill: none; stroke: var(--primary-light); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: drawLine 2s ease .3s forwards;
}
.m-an-chart .area1 {
  fill: url(#chartGrad);
  opacity: 0; animation: fadeIn 1s ease 1.5s forwards;
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
.m-an-funnel { display: flex; flex-direction: column; gap: 6px; }
.m-an-funnel-row { position: relative; padding: 10px 12px; color: #fff; font-size: 11px; font-weight: 600; border-radius: 8px; }
.m-an-funnel-row:nth-child(1) { background: var(--primary); width: 100%; }
.m-an-funnel-row:nth-child(2) { background: var(--primary-light); width: 80%; }
.m-an-funnel-row:nth-child(3) { background: var(--primary-300); width: 55%; color: var(--ink-900); }
.m-an-funnel-row:nth-child(4) { background: var(--primary-200); width: 30%; color: var(--ink-900); }
.m-an-funnel-row .v { float: right; }
.m-an-mgrs { display: flex; flex-direction: column; gap: 10px; }
.m-an-mgr { display: flex; align-items: center; gap: 10px; }
.m-an-mgr .av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #C6B9FA, #777EF5); }
.m-an-mgr .info { flex: 1; }
.m-an-mgr .info .n { font-size: 12px; font-weight: 600; color: var(--ink-900); }
.m-an-mgr .info .b { height: 4px; background: #F5F6FA; border-radius: 2px; overflow: hidden; margin-top: 4px; }
.m-an-mgr .info .b::after {
  content: ''; display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  animation: growBar 1.2s ease forwards;
}
.m-an-mgr.m1 .info .b::after { width: 0; --w: 92%; animation-delay: .1s; }
.m-an-mgr.m2 .info .b::after { width: 0; --w: 76%; animation-delay: .2s; }
.m-an-mgr.m3 .info .b::after { width: 0; --w: 63%; animation-delay: .3s; }
.m-an-mgr.m4 .info .b::after { width: 0; --w: 48%; animation-delay: .4s; }
@keyframes growBar { from { width: 0; } to { width: var(--w); } }
.m-an-mgr .p { font-size: 12px; font-weight: 700; color: var(--primary-hover); }

/* ==== AI CRM capabilities block (channels + agents + industries reuse) ==== */
.crm-sys {
  background: linear-gradient(180deg, #fff 0%, var(--primary-50) 100%);
  padding: 80px 0;
}
.crm-sys-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 40px auto 0; }
.crm-sys-card {
  background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 28px;
  transition: transform .3s, box-shadow .3s; position: relative; overflow: hidden;
}
.crm-sys-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.crm-sys-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover));
  transform: scaleX(0); transform-origin: left; transition: transform .4s;
}
.crm-sys-card:hover::before { transform: scaleX(1); }
.crm-sys-card .icon-wrap {
  width: 52px; height: 52px; border-radius: 14px; background: var(--primary-100);
  display: flex; align-items: center; justify-content: center; color: var(--primary-hover);
  margin-bottom: 18px;
}
.crm-sys-card h4 { font-size: 18px; font-weight: 700; color: var(--ink-900); margin: 0 0 10px; }
.crm-sys-card p { font-size: 13px; color: var(--ink-700); line-height: 1.55; margin: 0; }

/* ==== CTA band ==== */
.crm-cta {
  padding: 100px 24px; text-align: center; position: relative;
  background: linear-gradient(135deg, #1a1d2e 0%, #2d2458 60%, #5d3fbb 100%);
  color: #fff; overflow: hidden;
}
.crm-cta::before, .crm-cta::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5;
}
.crm-cta::before { width: 400px; height: 400px; background: var(--primary-hover); top: -100px; left: -100px; }
.crm-cta::after { width: 500px; height: 500px; background: var(--primary-light); bottom: -200px; right: -150px; }
.crm-cta-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.crm-cta h2 { font-size: clamp(32px, 5vw, 52px); line-height: 1.05; font-weight: 700; margin: 0 0 18px; letter-spacing: -0.02em; }
.crm-cta h2 em {
  font-style: normal;
  background: linear-gradient(90deg, #A7ABF9, #E2DAFF);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.crm-cta p { font-size: 18px; opacity: .85; margin: 0 0 32px; line-height: 1.5; }
.crm-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.crm-cta-btn {
  padding: 14px 28px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.crm-cta-btn.primary {
  background: #fff; color: var(--primary-hover);
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.crm-cta-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.3); }
.crm-cta-btn.ghost {
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
}
.crm-cta-btn.ghost:hover { background: rgba(255,255,255,.18); }

/* ==== Mid CTA band ==== */
.crm-mid-cta {
  margin: 40px auto 0; max-width: 720px; text-align: center;
  padding: 28px; background: #fff; border: 1px solid var(--border); border-radius: 20px;
  box-shadow: var(--shadow-md);
}
.crm-mid-cta h4 { font-size: 22px; font-weight: 700; color: var(--ink-900); margin: 0 0 8px; }
.crm-mid-cta p { color: var(--ink-700); font-size: 14px; margin: 0 0 16px; }
.crm-mid-cta .btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--r-pill);
  background: var(--primary); color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow-primary-sm);
}
.crm-mid-cta .btn:hover { background: var(--primary-hover); transform: translateY(-1px); }

/* Responsive */
@media (max-width: 960px) {
  .m-chats { grid-template-columns: 1fr; min-height: auto; }
  .m-chats-sidebar, .m-chats-list, .m-chats-lead { display: none; }
  .m-auto { grid-template-columns: 1fr; }
  .m-auto-left { display: none; }
  .m-wiz { grid-template-columns: 1fr; }
  .m-wiz-side { display: none; }
  .m-pipe-board { grid-template-columns: repeat(2, 1fr); }
  .m-an-grid { grid-template-columns: 1fr; }
  .m-an-kpis { grid-template-columns: repeat(2, 1fr); }
  .m-tnd-grid { grid-template-columns: 1fr; }
  .crm-sys-grid { grid-template-columns: 1fr; }
  .crm-section { padding: 60px 0; }
  .m-cal-grid { font-size: 9px; }
}

/* ==== AI CRM Showcase v2 (Linear/Vercel style, matches homepage) ==== */
.crm-showcase {
  padding: 60px 0 100px;
  background: #fff;
  position: relative;
}
.crm-showcase::before {
  content: ''; position: absolute; inset: 0; top: 80px; bottom: 80px;
  background-image:
    linear-gradient(rgba(56,65,87,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,65,87,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black 20%, transparent 70%);
  pointer-events: none;
}

.crm-intro {
  text-align: center;
  max-width: 760px; margin: 0 auto 40px;
  position: relative;
}

.crm-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
  padding: 90px 0;
  position: relative;
}
.crm-row + .crm-row { border-top: 1px solid rgba(227,230,238,0.6); }
.crm-row.reverse { grid-template-columns: 1.1fr 1fr; }
.crm-row.reverse .crm-row-text { order: 2; }
.crm-row.reverse .crm-row-visual { order: 1; }

.crm-row-text {
  display: flex; flex-direction: column; gap: 0;
  max-width: 460px;
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
html[data-js="on"] .crm-row-text:not(.in-view) { opacity: 0; transform: translateY(30px); }
.crm-row-text.in-view { opacity: 1; transform: translateY(0); }
.crm-row-num {
  font-size: 13px; font-weight: 600;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.crm-row-kicker {
  font-size: 12px; font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.crm-row-title {
  margin: 0 0 18px;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700; line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink-900);
}
.crm-row-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.crm-row-desc {
  margin: 0 0 28px;
  font-size: 15px; line-height: 1.65;
  color: var(--ink-700);
}
.crm-row-bullets {
  margin: 0 0 28px; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.crm-row-bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; line-height: 1.5; color: var(--ink-700);
}
.crm-row-bullets li::before {
  content: ''; flex-shrink: 0; margin-top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(119,126,245,0.12);
}
.crm-row-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px; font-weight: 600;
  transition: all .15s; align-self: flex-start; cursor: pointer;
}
.crm-row-cta svg { width: 14px; height: 14px; transition: transform .2s; }
.crm-row-cta:hover {
  background: var(--ink-900); color: #fff; border-color: var(--ink-900);
}
.crm-row-cta:hover svg { transform: translateX(3px); }

/* Visual column with scale-to-fit wrapper for full mockups */
.crm-row-visual {
  position: relative;
  display: grid; place-items: center;
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.2,.7,.3,1) .1s, transform .9s cubic-bezier(.2,.7,.3,1) .1s;
}
html[data-js="on"] .crm-row-visual:not(.in-view) { opacity: 0; transform: translateY(30px) scale(.98); }
.crm-row-visual.in-view { opacity: 1; transform: translateY(0) scale(1); }
.crm-row-visual::before {
  content: ''; position: absolute;
  inset: -20px; border-radius: 32px;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(119,126,245,0.10), transparent);
  pointer-events: none; z-index: -1;
}

.crm-visual-frame {
  position: relative; width: 100%;
  border-radius: 22px;
  padding: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(241,242,254,0.55));
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.4),
    0 1px 2px rgba(56,65,87,0.04),
    0 8px 24px rgba(56,65,87,0.08),
    0 32px 64px -24px rgba(119,126,245,0.2),
    0 50px 100px -40px rgba(56,65,87,0.18);
  overflow: visible;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s cubic-bezier(.2,.7,.3,1);
  animation: crmFloat 7s ease-in-out infinite;
}
.crm-visual-frame::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1.5px; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(119,126,245,0.35) 45%, rgba(255,255,255,0.1) 80%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.crm-visual-frame::after {
  content: ''; position: absolute; inset: -30px; border-radius: 40px;
  background: radial-gradient(ellipse 70% 50% at 30% 25%, rgba(119,126,245,0.3), transparent 60%),
              radial-gradient(ellipse 60% 50% at 70% 80%, rgba(198,185,250,0.25), transparent 60%);
  z-index: -1; opacity: 0.5; filter: blur(20px);
  transition: opacity .6s;
  pointer-events: none;
}
.crm-row:hover .crm-visual-frame {
  animation: none;
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 0 0 1px rgba(255,255,255,0.5),
    0 1px 2px rgba(56,65,87,0.04),
    0 12px 32px rgba(56,65,87,0.1),
    0 40px 80px -24px rgba(119,126,245,0.3),
    0 60px 120px -40px rgba(56,65,87,0.25);
}
.crm-row:hover .crm-visual-frame::after { opacity: 1; }

@keyframes crmFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.crm-visual-img {
  display: block; width: 100%; height: auto;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(56,65,87,0.1), 0 2px 6px rgba(56,65,87,0.06);
  position: relative; z-index: 1;
}

.crm-visual-img-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  position: relative; z-index: 1;
}
.crm-visual-img-pair .crm-visual-img { border-radius: 12px; }

/* Frames that wrap scaled SVG mockups keep a fixed height */
.crm-visual-frame.has-scaler {
  height: 540px;
  overflow: hidden;
  padding: 0;
}
.crm-visual-frame.has-scaler::before { border-radius: 22px; }

/* Scale wrapper: fixed natural size, scaled to fit container */
.crm-visual-scaler {
  position: absolute; top: 36px; left: 0;
  width: 1100px;
  transform-origin: top left;
}
/* Chrome frame bar at top of mockup */
.crm-visual-frame .crm-mockup-bar {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  padding: 10px 14px;
  background: linear-gradient(180deg, #FAFBFF, #fff);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.crm-visual-frame .crm-mockup-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #E3E6EE; }
.crm-visual-frame .crm-mockup-bar .dot.r { background: #F5777D; }
.crm-visual-frame .crm-mockup-bar .dot.y { background: #F5C95E; }
.crm-visual-frame .crm-mockup-bar .dot.g { background: #7AE575; }
.crm-visual-frame .crm-mockup-bar-title { margin-left: 14px; font-size: 11px; color: var(--ink-500); font-weight: 500; }

.crm-visual-scaler > :first-child { margin-top: 0; }

/* Per-mockup fixed sizes (natural width) */
.crm-visual-scaler .m-chats,
.crm-visual-scaler .m-pipe,
.crm-visual-scaler .m-cal,
.crm-visual-scaler .m-auto,
.crm-visual-scaler .m-out,
.crm-visual-scaler .m-wiz,
.crm-visual-scaler .m-tnd,
.crm-visual-scaler .m-an { width: 1100px; }

/* ==== Carousel (combined Tasks/Notes/Docs) ==== */
.crm-carousel-frame {
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  min-height: 540px;
  overflow: hidden;
}
.crm-carousel {
  position: relative;
  width: 100%;
  height: 510px;
  display: flex; align-items: center; justify-content: center;
}
.crm-carousel-img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  max-height: 500px; width: auto;
  border-radius: 22px;
  box-shadow:
    0 6px 20px rgba(56,65,87,0.12),
    0 2px 6px rgba(56,65,87,0.08),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  opacity: 0;
  animation: crmCarouselCycle 12s infinite cubic-bezier(.5,.05,.5,.95);
  will-change: opacity, transform;
}
.crm-carousel-img:nth-child(1) { animation-delay: 0s; }
.crm-carousel-img:nth-child(2) { animation-delay: 4s; }
.crm-carousel-img:nth-child(3) { animation-delay: 8s; }

@keyframes crmCarouselCycle {
  0%    { opacity: 0; transform: translate(calc(-50% + 20px), -50%) scale(0.94); }
  4%    { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  29%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  33%   { opacity: 0; transform: translate(calc(-50% - 20px), -50%) scale(0.94); }
  100%  { opacity: 0; transform: translate(calc(-50% - 20px), -50%) scale(0.94); }
}

.crm-carousel-dots {
  position: absolute; bottom: 18px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 7px;
  z-index: 5;
}
.crm-carousel-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(119,126,245,0.25);
  transition: background .3s;
  animation: crmDotCycle 12s infinite;
}
.crm-carousel-dot:nth-child(1) { animation-delay: 0s; }
.crm-carousel-dot:nth-child(2) { animation-delay: 4s; }
.crm-carousel-dot:nth-child(3) { animation-delay: 8s; }
@keyframes crmDotCycle {
  0%, 4%, 29%, 33% { background: rgba(119,126,245,0.25); }
  5%, 28% { background: var(--primary, #777EF5); }
}

/* Tasks / Notes / Docs mini-cards sized for single-slot showcase */
.crm-mini-tnd { padding: 40px; background: #FAFBFF; width: 1100px; }
.crm-mini-tnd.center { display: flex; justify-content: center; }
.crm-mini-tnd .m-tnd-card { width: 420px; max-width: 100%; box-shadow: var(--shadow-md); }
.crm-mini-tnd.two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1020px; margin: 0 auto; }

/* Final strong CTA row (mid) */
.crm-final-row {
  margin: 40px auto 0; max-width: 900px; text-align: center;
  padding: 40px; background: linear-gradient(135deg, var(--primary-50), #fff);
  border: 1px solid var(--border); border-radius: 24px;
  box-shadow: var(--shadow-md);
}
.crm-final-row h4 { font-size: 26px; font-weight: 700; color: var(--ink-900); margin: 0 0 10px; letter-spacing: -0.02em; }
.crm-final-row p { color: var(--ink-700); font-size: 15px; margin: 0 0 22px; }
.crm-final-row .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.crm-final-row .btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--r-pill);
  background: var(--primary); color: #fff; font-weight: 600; font-size: 14px;
  box-shadow: var(--shadow-primary-sm);
}
.crm-final-row .btn:hover { background: var(--primary-hover); transform: translateY(-1px); }
.crm-final-row .btn.ghost { background: #fff; color: var(--ink-900); border: 1px solid var(--border); box-shadow: none; }

/* Responsive */
@media (max-width: 960px) {
  .crm-row { grid-template-columns: 1fr; gap: 32px; padding: 60px 0; }
  .crm-row.reverse { grid-template-columns: 1fr; }
  .crm-row.reverse .crm-row-text { order: 1; }
  .crm-row.reverse .crm-row-visual { order: 2; }
  .crm-row-text { max-width: 100%; }
  .crm-showcase { padding: 40px 0 60px; }
}