:root { --crm-green:#168f72; --crm-green-light:#dff7ee; --crm-orange:#df7445; --crm-ink:#10243a; }
.crm-hero { padding: 86px 0 78px; overflow: hidden; background: radial-gradient(circle at 88% 18%, rgba(22,143,114,.15), transparent 26%), linear-gradient(135deg,#f8fbfd,#fff8f4); }
.crm-hero-grid { display:grid; grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr); align-items:center; gap:clamp(42px,6vw,86px); }
.crm-hero-copy h1 { max-width:760px; margin-top:12px; color:var(--navy-950); font-size:clamp(3rem,5.6vw,5.2rem); line-height:.97; letter-spacing:-.06em; }
.crm-lead { max-width:720px; margin-top:25px; color:var(--slate-600); font-size:1.05rem; line-height:1.75; }
.crm-hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:29px; }
.crm-hero-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:35px; }
.crm-hero-metrics div { padding:15px 12px; border:1px solid #dbe7ef; border-radius:13px; background:rgba(255,255,255,.82); box-shadow:var(--shadow-sm); }
.crm-hero-metrics strong { display:block; color:var(--crm-green); font-size:1.22rem; }
.crm-hero-metrics span { display:block; margin-top:3px; color:var(--slate-500); font-size:.63rem; font-weight:850; text-transform:uppercase; }
.crm-transform { overflow:hidden; border:1px solid #d7e3eb; border-radius:24px; background:#fff; box-shadow:0 28px 70px rgba(15,35,58,.14); }
.crm-transform-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; border-bottom:1px solid #e1e9ef; }
.crm-transform-header > div:first-child span { display:block; color:var(--crm-green); font-size:.62rem; font-weight:950; letter-spacing:.09em; text-transform:uppercase; }
.crm-transform-header strong { display:block; margin-top:3px; color:var(--crm-ink); }
.crm-transform-toggle { display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:10px; background:#edf3f6; }
.crm-transform-toggle button { min-height:34px; padding:0 13px; border:0; border-radius:7px; background:transparent; color:var(--slate-500); font-size:.69rem; font-weight:900; cursor:pointer; }
.crm-transform-toggle button.active { background:#fff; color:var(--crm-green); box-shadow:0 4px 12px rgba(15,35,58,.1); }
.crm-transform-panel { display:none; min-height:455px; padding:25px; }
.crm-transform-panel.active { display:flex; flex-direction:column; animation:crmFade .25s ease; }
@keyframes crmFade { from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none} }
.fragmented-workspace { position:relative; min-height:335px; border:1px dashed #dfc9ba; border-radius:17px; background:linear-gradient(135deg,#fffaf4,#fff); }
.fragment-card { position:absolute; width:43%; min-height:112px; padding:15px; border:1px solid #e7d9ce; border-radius:11px; background:#fff; box-shadow:0 14px 30px rgba(99,69,50,.12); }
.fragment-card span { display:block; color:var(--crm-orange); font-size:.6rem; font-weight:950; text-transform:uppercase; }
.fragment-card strong { display:block; margin-top:11px; color:#604b40; font-size:.77rem; }
.fragment-card small { display:block; margin-top:6px; color:#9a8375; font-size:.63rem; }
.fragment-card.sticky { left:7%; top:10%; transform:rotate(-5deg); background:#fff6a9; }
.fragment-card.sheet { right:7%; top:7%; transform:rotate(4deg); background:#f4fbf3; }
.fragment-card.inbox { left:11%; bottom:8%; transform:rotate(3deg); background:#f2f7ff; }
.fragment-card.form { right:8%; bottom:9%; transform:rotate(-4deg); }
.transform-warning,.transform-success { display:flex; gap:11px; margin-top:15px; padding:13px 15px; border-radius:12px; font-size:.71rem; line-height:1.5; }
.transform-warning { border:1px solid #f1d5c5; background:#fff4ec; color:#755342; }.transform-success { border:1px solid #bfe7d8; background:#ebfaf4; color:#356859; }
.transform-warning span,.transform-success span { width:25px; height:25px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; font-weight:950; }.transform-warning span{background:#ffe2d0;color:#c85f31}.transform-success span{background:#c9f2e3;color:#08795f}
.mock-crm { flex:1; padding:18px; border:1px solid #d9e6ee; border-radius:17px; background:#f7fbfd; }
.mock-crm-top { display:flex; justify-content:space-between; gap:15px; padding:3px 3px 15px; border-bottom:1px solid #dce7ee; }.mock-crm-top span{display:block;color:var(--slate-500);font-size:.62rem;font-weight:900;text-transform:uppercase}.mock-crm-top strong{display:block;margin-top:3px;color:var(--crm-ink);font-size:.86rem}.mock-live{align-self:center!important;padding:5px 8px;border-radius:99px;background:var(--crm-green-light);color:var(--crm-green)!important}
.mock-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:15px; }.mock-metrics div{padding:12px;border:1px solid #dbe7ee;border-radius:10px;background:#fff}.mock-metrics span{display:block;color:var(--slate-500);font-size:.57rem;font-weight:850;text-transform:uppercase}.mock-metrics strong{display:block;margin-top:5px;color:var(--crm-ink);font-size:1.15rem}
.mock-pipeline { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-top:14px; }.mock-pipeline span{min-width:0;padding:10px 7px;border-radius:9px;background:#eaf5fb;color:#496273;font-size:.55rem;font-weight:850;text-align:center}.mock-pipeline b{display:block;margin-top:4px;color:var(--blue-700);font-size:.85rem}
.mock-contact { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-top:14px; padding:13px; border:1px solid #dbe7ee; border-radius:11px; background:#fff; }.mock-avatar{width:35px;height:35px;display:grid;place-items:center;border-radius:10px;background:var(--crm-green-light);color:var(--crm-green);font-size:.66rem;font-weight:950}.mock-contact strong{display:block;color:var(--crm-ink);font-size:.72rem}.mock-contact span{display:block;margin-top:3px;color:var(--slate-500);font-size:.57rem}.mock-contact button{padding:7px 9px;border:0;border-radius:8px;background:#e7f3fa;color:var(--blue-700);font-size:.57rem;font-weight:900}
.crm-context { padding:75px 0; background:#fff; }.crm-context-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.crm-context-card{padding:25px;border:1px solid var(--slate-200);border-radius:17px;background:#fff;box-shadow:var(--shadow-sm);transition:.22s}.crm-context-card:hover{transform:translateY(-5px);border-color:#7dd3fc;box-shadow:var(--shadow-md)}.crm-context-card>span{color:var(--crm-green);font-size:.64rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.crm-context-card h2{margin-top:9px;color:var(--crm-ink);font-size:1.18rem}.crm-context-card p{margin-top:11px;color:var(--slate-600);font-size:.81rem;line-height:1.65}
.crm-implementation { padding:90px 0; background:#eef5f8; }.phase-explorer{overflow:hidden;border:1px solid #d5e2ea;border-radius:22px;background:#fff;box-shadow:0 22px 55px rgba(15,35,58,.09)}.phase-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid #dce6ed}.phase-tabs button{min-height:86px;padding:13px;border:0;border-right:1px solid #dce6ed;background:#fff;color:var(--slate-500);cursor:pointer;transition:.2s}.phase-tabs button:last-child{border-right:0}.phase-tabs button:hover{background:#f0faf6}.phase-tabs button.active{background:linear-gradient(180deg,#eaf9f3,#fff);color:var(--crm-ink);box-shadow:inset 0 -3px 0 var(--crm-green)}.phase-tabs span{display:block;color:var(--crm-green);font-size:.61rem;font-weight:950}.phase-tabs strong{display:block;margin-top:5px;font-size:.72rem}.phase-detail{display:grid;grid-template-columns:1.25fr .75fr;gap:45px;padding:clamp(28px,5vw,52px)}.phase-number{color:var(--crm-green);font-size:.66rem;font-weight:950;letter-spacing:.09em;text-transform:uppercase}.phase-copy h3{margin-top:7px;color:var(--crm-ink);font-size:clamp(1.8rem,3.5vw,2.75rem);letter-spacing:-.04em}.phase-copy>p:not(.phase-number){margin-top:13px;color:var(--slate-600);line-height:1.7}.phase-copy ul{display:grid;gap:9px;margin-top:20px;list-style:none}.phase-copy li{position:relative;padding-left:23px;color:var(--slate-700);font-size:.8rem;line-height:1.5}.phase-copy li::before{content:'✓';position:absolute;left:0;color:var(--crm-green);font-weight:950}.phase-output{padding:23px;border:1px solid #cee8dd;border-radius:17px;background:linear-gradient(145deg,#effbf6,#fff)}.phase-output>span,.phase-risk span{color:var(--crm-green);font-size:.61rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.phase-output>strong{display:block;margin-top:8px;color:var(--crm-ink);font-size:1.05rem}.phase-output>p{margin-top:10px;color:var(--slate-600);font-size:.76rem;line-height:1.6}.phase-risk{margin-top:20px;padding-top:18px;border-top:1px solid #d5e9e0}.phase-risk strong{display:block;margin-top:5px;color:#356859;font-size:.82rem}
.crm-timeline-section { padding:90px 0; background:#fff; }.crm-timeline-card{padding:clamp(22px,4vw,40px);border:1px solid var(--slate-200);border-radius:22px;background:#fff;box-shadow:var(--shadow-sm)}.timeline-legend{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:24px;color:var(--slate-600);font-size:.69rem;font-weight:850}.timeline-legend span{display:flex;align-items:center;gap:7px}.timeline-legend i{width:22px;height:6px;border-radius:99px;background:#cbd5e1}.timeline-legend .actual{background:var(--crm-green)}.timeline-legend .variance{background:var(--crm-orange)}.crm-schedule{display:grid;gap:14px}.schedule-row{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(280px,1.5fr) 74px;align-items:center;gap:15px}.schedule-name strong{display:block;color:var(--crm-ink);font-size:.75rem}.schedule-name span{display:block;margin-top:3px;color:var(--slate-500);font-size:.61rem}.schedule-bars{position:relative;height:28px;border-radius:8px;background:#eef3f6;overflow:hidden}.schedule-bar{position:absolute;left:0;height:9px;border-radius:99px}.schedule-bar.planned{top:4px;background:#cbd5e1}.schedule-bar.actual{bottom:4px;background:var(--crm-green)}.schedule-bar.actual.over{background:linear-gradient(90deg,var(--crm-green),var(--crm-orange))}.schedule-days{text-align:right;color:var(--slate-600);font-size:.67rem;font-weight:900}.schedule-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:28px;padding-top:24px;border-top:1px solid var(--slate-200)}.schedule-insights article{padding:14px;border-radius:11px;background:#f6fafb}.schedule-insights strong{display:block;color:var(--crm-orange);font-size:1.05rem}.schedule-insights article:first-child strong{color:var(--crm-green)}.schedule-insights span{display:block;margin-top:4px;color:var(--slate-600);font-size:.67rem;line-height:1.4}
.crm-results { padding:90px 0; background:#0d2032; color:#fff; }.crm-results .section-kicker{color:#76ddbc}.crm-results .section-heading h2{color:#fff}.crm-results .section-heading>p{color:#a9bdca}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.result-card{padding:24px;border:1px solid rgba(172,206,225,.17);border-radius:16px;background:rgba(255,255,255,.045)}.result-value{display:block;color:#76ddbc;font-size:1.7rem;font-weight:950;letter-spacing:-.04em}.result-card h3{margin-top:11px;color:#fff;font-size:.9rem}.result-card p{margin-top:7px;color:#9fb4c2;font-size:.72rem;line-height:1.55}
.crm-deliverables { padding:90px 0; background:#fff; }.crm-deliverables-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:70px;align-items:start}.deliverables-copy h2{margin-top:8px;color:var(--crm-ink);font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.045em}.deliverables-copy p{margin-top:16px;color:var(--slate-600);line-height:1.7}.deliverable-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.deliverable-list>div{display:flex;gap:11px;padding:17px;border:1px solid var(--slate-200);border-radius:13px;background:#f9fbfc}.deliverable-list>div>span{width:27px;height:27px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px;background:var(--crm-green-light);color:var(--crm-green);font-weight:950}.deliverable-list strong{display:block;color:var(--crm-ink);font-size:.75rem}.deliverable-list small{display:block;margin-top:4px;color:var(--slate-500);font-size:.64rem;line-height:1.45}
.crm-reflection { padding:85px 0; background:linear-gradient(135deg,#f7fbf9,#eef6f8); }.crm-reflection-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}.reflection-main h2{margin-top:8px;color:var(--crm-ink);font-size:clamp(2.1rem,4vw,3.45rem);letter-spacing:-.045em}.reflection-main p:last-child{margin-top:18px;color:var(--slate-600);line-height:1.75}.reflection-cards{display:grid;gap:10px}.reflection-cards article{padding:18px;border:1px solid #d5e4df;border-radius:13px;background:#fff}.reflection-cards span{display:block;color:var(--crm-green);font-size:.61rem;font-weight:950;text-transform:uppercase}.reflection-cards strong{display:block;margin-top:6px;color:var(--crm-ink);font-size:.81rem;line-height:1.45}
@media(max-width:1050px){.crm-hero-grid{grid-template-columns:1fr}.crm-transform{max-width:760px}.crm-context-grid{grid-template-columns:1fr 1fr}.crm-context-card:last-child{grid-column:1/-1}.result-grid{grid-template-columns:1fr 1fr}.crm-deliverables-grid,.crm-reflection-grid{grid-template-columns:1fr;gap:35px}}
@media(max-width:760px){.crm-hero{padding-top:58px}.crm-hero-copy h1{font-size:3.1rem}.crm-hero-metrics{grid-template-columns:1fr 1fr}.crm-transform-header{align-items:flex-start;flex-direction:column}.crm-transform-panel{padding:15px}.fragmented-workspace{min-height:420px}.fragment-card{width:67%}.fragment-card.sticky{left:5%}.fragment-card.sheet{right:4%;top:25%}.fragment-card.inbox{left:6%;bottom:22%}.fragment-card.form{right:5%;bottom:3%}.mock-metrics{grid-template-columns:1fr 1fr}.mock-metrics div:last-child{grid-column:1/-1}.mock-pipeline{grid-template-columns:1fr}.mock-contact{grid-template-columns:auto 1fr}.mock-contact button{grid-column:1/-1}.crm-context-grid{grid-template-columns:1fr}.crm-context-card:last-child{grid-column:auto}.phase-tabs{display:flex;overflow-x:auto}.phase-tabs button{min-width:145px;border-bottom:0}.phase-detail{grid-template-columns:1fr;gap:20px;padding:25px 18px}.schedule-row{grid-template-columns:1fr}.schedule-days{text-align:left}.schedule-insights,.result-grid,.deliverable-list{grid-template-columns:1fr}.crm-results,.crm-implementation,.crm-timeline-section,.crm-deliverables{padding:70px 0}}
@media(max-width:480px){.crm-hero-copy h1{font-size:2.55rem}.crm-hero-actions .button{width:100%}.crm-hero-metrics{grid-template-columns:1fr 1fr}.mock-metrics{grid-template-columns:1fr}.mock-metrics div:last-child{grid-column:auto}}