@import url('erp-page.css');

.crm-page {
  --erp-ink: #142b3d;
  --erp-ink-soft: #3d5964;
  --erp-paper: #f4f1ea;
  --erp-card: #fffdf8;
  --erp-copper: #d46d49;
  --erp-copper-dark: #a84932;
  --erp-sage: #d9e6e8;
  --erp-line: rgba(20, 43, 61, .14);
}
.crm-page .erp-hero { background: var(--erp-ink); }
.crm-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(330px, .85fr); }
.crm-hero h1 { max-width: 760px; }
.crm-pipeline { position: relative; padding: 25px; border: 1px solid rgba(255,255,255,.22); background: #1d4050; box-shadow: var(--erp-shadow); }
.crm-pipeline::before { content: 'SALES PIPELINE / LIVE VIEW'; display: block; margin-bottom: 22px; color: #f4b28e; font: 700 .7rem/1 'Trebuchet MS', sans-serif; letter-spacing: .15em; }
.crm-pipeline-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; color: #bed1d2; font: .72rem/1 'Trebuchet MS', sans-serif; text-transform: uppercase; }
.crm-pipeline-head strong { color: #fffaf0; font-size: .8rem; }
.crm-pipeline-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; height: 9px; }
.crm-pipeline-track span { background: #f09c72; }
.crm-pipeline-track span:nth-child(2) { background: #d46d49; }
.crm-pipeline-track span:nth-child(3) { background: #86adb2; }
.crm-pipeline-track span:nth-child(4) { background: #c3d5c8; }
.crm-pipeline-amount { display: flex; align-items: end; justify-content: space-between; margin-top: 23px; }
.crm-pipeline-amount strong { color: #f4b28e; font-size: 2.65rem; font-weight: 400; line-height: 1; }
.crm-pipeline-amount span { color: #bed1d2; font: .7rem/1.2 'Trebuchet MS', sans-serif; text-align: right; text-transform: uppercase; }
.crm-pipeline-list { margin-top: 24px; }
.crm-pipeline-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.14); color: #fffaf0; font-size: .98rem; }
.crm-pipeline-item span { color: #bed1d2; font: .7rem/1 'Trebuchet MS', sans-serif; }
.crm-intro h2 { max-width: 370px; }
.crm-capabilities { padding: 38px 0 90px; }
.crm-capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 31px; }
.crm-capability { min-height: 225px; padding: 23px 20px; border-top: 3px solid var(--erp-copper); background: var(--erp-card); box-shadow: 0 8px 25px rgba(20,43,61,.06); }
.crm-capability:nth-child(2), .crm-capability:nth-child(5) { border-top-color: var(--erp-ink); background: var(--erp-sage); }
.crm-capability:nth-child(3), .crm-capability:nth-child(6) { border-top-color: #7f9ca5; }
.crm-capability-number { color: var(--erp-copper-dark); font: 700 .77rem/1 'Trebuchet MS', sans-serif; }
.crm-capability h3 { margin: 29px 0 8px; font-size: 1.32rem; font-weight: 400; line-height: 1.1; }
.crm-capability p { margin: 0; color: var(--erp-ink-soft); font-size: .94rem; }
.crm-proof { padding: 78px 0; background: #e2ebea; }
.crm-proof-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 75px; }
.crm-proof h2 { max-width: 370px; margin: 0; font-size: clamp(2.1rem,4vw,3.6rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; }
.crm-proof-copy { margin: 0; color: var(--erp-ink-soft); font-size: 1.08rem; }
.crm-proof-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; margin: 26px 0 0; padding: 0; list-style: none; }
.crm-proof-list li { padding: 14px 0 14px 20px; border-top: 1px solid var(--erp-line); position: relative; }
.crm-proof-list li::before { content: ''; position: absolute; left: 0; top: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--erp-copper); }
.crm-faq { padding: 86px 0 100px; }
.crm-faq-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; }
.crm-faq h2 { margin: 0; font-size: clamp(2.1rem,4vw,3.6rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.02; }
.crm-faq-item { padding: 21px 0; border-top: 1px solid var(--erp-line); }
.crm-faq-item h3 { margin: 0 0 7px; font-size: 1.2rem; font-weight: 400; }
.crm-faq-item p { margin: 0; color: var(--erp-ink-soft); font-size: .97rem; }
.crm-page .erp-footer { background: var(--erp-ink); }
@media (max-width: 850px) {
  .crm-hero-grid, .crm-proof-grid, .crm-faq-grid { grid-template-columns: 1fr; gap: 38px; }
  .crm-capability-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .crm-capability-grid, .crm-proof-list { grid-template-columns: 1fr; }
  .crm-page .erp-intro, .crm-proof { padding-top: 58px; }
  .crm-capabilities { padding-bottom: 58px; }
}