:root {
  --ink: #f4f8f5;
  --dark: #07120c;
  --green: #55df83;
  --paper: #f4f5f0;
  --paper-ink: #172019;
  --muted: #68746b;
  --line: #dfe4df;
  --module-color: #118347;
  --module-soft: #e4f4e9;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--paper-ink);
  background: var(--paper);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img, svg { display: block; }
.container { width: min(var(--site-content-width), calc(100% - 48px)); margin-inline: auto; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--green);
  border-radius: 999px;
  color: #082111;
  background: var(--green);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.button:hover { background: #70e998; border-color: #70e998; box-shadow: 0 8px 24px rgba(85,223,131,.15); }
.button--quiet { color: #e4ece6; background: transparent; border-color: rgba(255,255,255,.22); }
.button--quiet:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.35); box-shadow: none; }

.module-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 92px;
  color: var(--ink);
  background: radial-gradient(circle at 77% 18%, color-mix(in srgb, var(--module-color) 27%, transparent), transparent 31rem), var(--dark);
}
.hero-grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; gap: clamp(36px,4vw,64px); }
.hero-copy { min-width: 0; }
.crumb { margin: 0 0 25px; color: color-mix(in srgb, var(--module-soft) 82%, white); font-size: .76rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.hero-copy h1 { margin: 0; max-width: 100%; font-size: clamp(3rem,4.2vw,4rem); line-height: .97; letter-spacing: -.058em; font-weight: 760; text-wrap: balance; }
.hero-lead { margin: 29px 0 0; max-width: 590px; color: #b5c0b8; font-size: clamp(1.04rem,1.45vw,1.24rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 34px; }

.screen-wrap { position: relative; min-width: 0; }
.product-window { overflow: hidden; min-height: 620px; color: #202923; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; background: #f5f7f5; box-shadow: 0 38px 95px rgba(0,0,0,.42), 0 0 0 7px rgba(255,255,255,.025); }
.product-top { height: 62px; padding: 0 14px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #e2e7e3; background: #fff; }
.product-logo { flex: 0 0 auto; }
.product-logo img { width: 72px; height: auto; }
.product-menu { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 1px; }
.product-menu span { padding: 8px 5px; border-radius: 7px; color: #77817a; font-size: .58rem; font-weight: 500; white-space: nowrap; }
.product-menu .active { color: var(--module-color); background: var(--module-soft); }
.product-avatar { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--module-color); font-size: .58rem; font-weight: 600; }
.product-body { display: grid; grid-template-columns: 56px minmax(0,1fr); min-height: 558px; }
.product-rail { padding: 17px 8px; display: flex; flex-direction: column; align-items: center; gap: 9px; color: #819087; background: #101c14; }
.rail-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; }
.rail-icon.active { color: #07170d; background: var(--module-color); }
.rail-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail-spacer { flex: 1; }
.product-content { min-width: 0; padding: 21px 22px 25px; background: #f5f7f5; }
.product-title { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 11px; }
.product-title small { display: block; margin-bottom: 5px; color: #7b867f; font-size: .61rem; }
.product-title h2 { margin: 0; color: #1c2720; font-size: 1.32rem; line-height: 1.1; letter-spacing: -.035em; }
.product-filter { padding: 8px 10px; border: 1px solid #dce2dd; border-radius: 9px; color: #59665d; background: #fff; font-size: .62rem; white-space: nowrap; }
.screen-tabs { display: flex; min-width: 0; gap: 4px; margin: 0 0 10px; padding-bottom: 10px; overflow: hidden; border-bottom: 1px solid #e1e6e2; }
.screen-tabs span { flex: 0 0 auto; padding: 5px 7px; border-radius: 7px; color: #7b867f; background: #edf1ee; font-size: .52rem; font-weight: 550; white-space: nowrap; }
.screen-tabs span:first-child { color: var(--module-color); background: var(--module-soft); }
.screen-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
.screen-kpi { min-width: 0; padding: 11px 12px; border: 1px solid #e0e5e1; border-radius: 12px; background: #fff; }
.screen-kpi span { display: block; overflow: hidden; color: #79847c; font-size: .6rem; white-space: nowrap; text-overflow: ellipsis; }
.screen-kpi strong { display: block; margin-top: 8px; color: #1e2922; font-size: 1.02rem; line-height: 1; letter-spacing: -.035em; font-weight: 650; }
.screen-kpi small { display: block; margin-top: 6px; color: var(--module-color); font-size: .54rem; font-weight: 600; }
.workspace { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(190px,.75fr); gap: 10px; }
.workspace--full { grid-template-columns: 1fr; }
.ui-panel { min-width: 0; min-height: 280px; padding: 16px; overflow: hidden; border: 1px solid #e0e5e1; border-radius: 14px; background: #fff; }
.ui-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ui-panel-head strong { color: #303b33; font-size: .7rem; font-weight: 600; }
.ui-panel-head span { color: #8b958e; font-size: .55rem; }

.bars { height: 180px; padding: 0 4px; display: flex; align-items: end; gap: 8px; border-bottom: 1px solid #e6ebe7; background: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, #edf1ee 44px); }
.bars span { flex: 1; min-width: 6px; border-radius: 5px 5px 0 0; background: var(--module-soft); }
.bars span:nth-child(2n) { background: var(--module-color); }
.mini-list { display: grid; gap: 9px; }
.mini-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid #edf0ed; }
.mini-row:last-child { padding-bottom: 0; border-bottom: 0; }
.mini-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--module-color); background: var(--module-soft); font-size: .6rem; font-weight: 650; }
.mini-row strong { display: block; overflow: hidden; color: #344038; font-size: .63rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.mini-row small { display: block; margin-top: 3px; color: #8a948d; font-size: .52rem; }
.pill { padding: 4px 6px; border-radius: 999px; color: var(--module-color); background: var(--module-soft); font-size: .5rem; font-weight: 600; white-space: nowrap; }

.progress-list { display: grid; gap: 11px; }
.progress-row { padding: 11px 12px; border: 1px solid #e8ece9; border-radius: 11px; background: #fbfcfb; }
.progress-row-head { display: flex; justify-content: space-between; gap: 12px; color: #435047; font-size: .61rem; font-weight: 600; }
.progress-track { height: 6px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: #e9eeea; }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--module-color); }
.progress-meta { display: flex; justify-content: space-between; margin-top: 6px; color: #89938c; font-size: .5rem; }

.data-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.data-table th { padding: 9px 8px; color: #8a948d; background: #f7f8f7; font-size: .5rem; font-weight: 600; text-align: left; }
.data-table td { padding: 10px 8px; overflow: hidden; border-bottom: 1px solid #edf0ed; color: #48544b; font-size: .58rem; white-space: nowrap; text-overflow: ellipsis; }
.data-table td strong { color: #2e3931; font-weight: 600; }

.split-ui { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(0,1.3fr); gap: 10px; }
.contact-list { display: grid; gap: 6px; }
.contact { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px; padding: 8px; border-radius: 9px; }
.contact.active { background: var(--module-soft); }
.contact-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: #fff; background: var(--module-color); font-size: .55rem; font-weight: 600; }
.contact strong { display: block; font-size: .58rem; font-weight: 600; }
.contact small { display: block; margin-top: 2px; color: #879189; font-size: .49rem; }
.detail-card { padding: 14px; border: 1px solid #e5e9e6; border-radius: 12px; background: #fbfcfb; }
.detail-title { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
.detail-title .contact-avatar { width: 36px; height: 36px; }
.detail-title h3 { margin: 0; font-size: .75rem; }
.detail-title p { margin: 3px 0 0; color: #88928b; font-size: .52rem; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.detail-item { padding: 8px; border-radius: 8px; background: #fff; }
.detail-item small { display: block; color: #8d9690; font-size: .48rem; }
.detail-item strong { display: block; margin-top: 4px; color: #39443c; font-size: .58rem; font-weight: 600; }

.crm-workspace { grid-template-columns: minmax(0,1.12fr) minmax(190px,.88fr); }
.crm-funnel { display: grid; justify-items: center; gap: 7px; }
.crm-funnel-stage { width: var(--stage-width); min-height: 43px; padding: 7px 12px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2px 10px; border: 1px solid color-mix(in srgb, var(--module-color) 18%, #dfe5e0); border-radius: 9px; color: #435047; background: color-mix(in srgb, var(--module-soft) 55%, #fff); }
.crm-funnel-stage:nth-child(2) { background: color-mix(in srgb, var(--module-soft) 72%, #fff); }
.crm-funnel-stage:nth-child(3) { background: color-mix(in srgb, var(--module-soft) 88%, #fff); }
.crm-funnel-stage:last-child { color: #fff; border-color: var(--module-color); background: var(--module-color); }
.crm-funnel-stage span { overflow: hidden; font-size: .58rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.crm-funnel-stage strong { font-size: .68rem; font-weight: 700; }
.crm-funnel-stage small { grid-column: 1 / -1; color: #7e8981; font-size: .48rem; }
.crm-funnel-stage:last-child small { color: rgba(255,255,255,.72); }
.crm-deal-list { display: grid; gap: 7px; }
.crm-deal-row { padding: 10px 11px; border: 1px solid #e4e9e5; border-radius: 10px; background: #fbfcfb; }
.crm-deal-head, .crm-deal-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crm-deal-head strong { overflow: hidden; color: #354138; font-size: .58rem; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.crm-deal-head span { padding: 3px 5px; border-radius: 999px; color: var(--module-color); background: var(--module-soft); font-size: .45rem; font-weight: 650; white-space: nowrap; }
.crm-deal-row p { margin: 7px 0; overflow: hidden; color: #77827a; font-size: .5rem; white-space: nowrap; text-overflow: ellipsis; }
.crm-deal-meta { color: #8a948d; font-size: .46rem; }
.crm-deal-meta strong { color: #59655d; font-size: .49rem; font-weight: 650; white-space: nowrap; }
.crm-deal-row--signed .crm-deal-head span { color: #147a55; background: #e2f2ec; }
.crm-deal-row--draft .crm-deal-head span { color: #68746b; background: #edf0ed; }

.finance-workspace { grid-template-columns: minmax(0,1.12fr) minmax(190px,.88fr); }
.finance-statement { display: grid; }
.finance-line { padding: 10px 0; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid #e8ece9; }
.finance-line:first-child { padding-top: 3px; }
.finance-line > div { min-width: 0; }
.finance-line strong { display: block; overflow: hidden; color: #3a463e; font-size: .61rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.finance-line small { display: block; margin-top: 3px; overflow: hidden; color: #8a948d; font-size: .48rem; white-space: nowrap; text-overflow: ellipsis; }
.finance-line > span { color: #5d6961; font-size: .58rem; font-weight: 650; white-space: nowrap; }
.finance-line--total { margin-top: 6px; padding: 11px; border: 0; border-radius: 9px; background: var(--module-soft); }
.finance-line--total strong, .finance-line--total > span { color: var(--module-color); }
.finance-targets { display: grid; gap: 14px; }
.finance-target > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #465249; font-size: .56rem; }
.finance-target > div strong { font-weight: 600; }
.finance-target > div span { color: var(--module-color); font-weight: 650; }
.finance-target > i, .channel-pressure i { display: block; height: 6px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #e8ede9; }
.finance-target > i b, .channel-pressure i b { display: block; height: 100%; border-radius: inherit; background: var(--module-color); }
.finance-target small { display: block; margin-top: 5px; color: #8a948d; font-size: .47rem; }

.activity-workspace { grid-template-columns: minmax(0,1.2fr) minmax(190px,.8fr); }
.activity-path { position: relative; padding-top: 8px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.activity-path::before { content: ""; position: absolute; top: 21px; left: 10%; right: 10%; height: 1px; background: color-mix(in srgb, var(--module-color) 38%, #dbe2dc); }
.activity-step { position: relative; z-index: 1; min-width: 0; text-align: center; }
.activity-step > span { width: 27px; height: 27px; margin: 0 auto 9px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; color: #fff; background: var(--module-color); box-shadow: 0 0 0 1px color-mix(in srgb, var(--module-color) 35%, #dbe2dc); font-size: .45rem; font-weight: 700; }
.activity-step strong, .activity-step small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.activity-step strong { color: #435047; font-size: .52rem; font-weight: 600; }
.activity-step small { margin-top: 4px; color: #8a948d; font-size: .46rem; }
.activity-result { margin-top: 23px; padding: 12px; display: flex; align-items: end; justify-content: space-between; gap: 14px; border-radius: 10px; background: var(--module-soft); }
.activity-result small { display: block; color: #718078; font-size: .48rem; }
.activity-result strong { display: block; margin-top: 4px; color: var(--module-color); font-size: 1.05rem; line-height: 1; }
.activity-result > span { color: #718078; font-size: .49rem; text-align: right; }
.event-timeline { display: grid; gap: 12px; }
.event-item { position: relative; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: start; gap: 8px; }
.event-item > i { width: 7px; height: 7px; margin-top: 3px; border: 2px solid color-mix(in srgb, var(--module-color) 30%, #fff); border-radius: 50%; background: var(--module-color); box-shadow: 0 0 0 1px var(--module-color); }
.event-item strong, .event-item small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.event-item strong { color: #3f4b42; font-size: .55rem; font-weight: 600; }
.event-item small { margin-top: 3px; color: #8a948d; font-size: .46rem; }
.event-item > span { color: var(--module-color); font-size: .45rem; white-space: nowrap; }

.analytics-workspace { grid-template-columns: minmax(0,1.2fr) minmax(190px,.8fr); }
.analytics-matrix { display: grid; gap: 5px; }
.matrix-row { display: grid; grid-template-columns: minmax(70px,1fr) repeat(4,29px); align-items: center; gap: 6px; }
.matrix-row--head { color: #8a948d; font-size: .43rem; text-align: center; }
.matrix-row--head span:first-child { text-align: left; }
.matrix-row strong { overflow: hidden; color: #47534a; font-size: .52rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.signal { width: 100%; height: 25px; border-radius: 6px; background: var(--module-soft); }
.signal--low { opacity: .38; }
.signal--mid { opacity: .68; }
.signal--high { opacity: 1; background: var(--module-color); }
.analytics-insight { padding: 12px; border: 1px solid color-mix(in srgb, var(--module-color) 22%, #e0e5e1); border-radius: 11px; background: var(--module-soft); }
.analytics-insight > span { color: var(--module-color); font-size: .47rem; font-weight: 700; }
.analytics-insight > strong { display: block; margin-top: 8px; color: #344139; font-size: .61rem; line-height: 1.35; font-weight: 650; }
.analytics-insight p { margin: 7px 0 10px; color: #6f7c73; font-size: .49rem; line-height: 1.45; }
.analytics-insight > div { display: flex; flex-wrap: wrap; gap: 4px; }
.analytics-insight small { padding: 3px 5px; border-radius: 5px; color: var(--module-color); background: rgba(255,255,255,.72); font-size: .42rem; }
.analytics-action { margin-top: 8px; padding: 10px; border: 1px solid #e5e9e6; border-radius: 9px; }
.analytics-action span { display: block; color: #8b958e; font-size: .44rem; }
.analytics-action strong { display: block; margin-top: 5px; color: #465249; font-size: .52rem; line-height: 1.35; font-weight: 600; }

.marketing-workspace { grid-template-columns: minmax(0,1.15fr) minmax(190px,.85fr); }
.marketing-journey { display: grid; gap: 6px; }
.marketing-step { position: relative; min-height: 44px; padding: 8px 9px; display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 3px 9px; border: 1px solid #e4e9e5; border-radius: 9px; background: #fbfcfb; }
.marketing-step > span { grid-row: 1 / 3; color: var(--module-color); font-size: .46rem; font-weight: 650; text-transform: uppercase; }
.marketing-step > strong { overflow: hidden; color: #3f4b43; font-size: .56rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.marketing-step > small { overflow: hidden; color: #89938c; font-size: .45rem; white-space: nowrap; text-overflow: ellipsis; }
.marketing-step--channels > div { display: flex; flex-wrap: wrap; gap: 4px; }
.marketing-step--channels b { padding: 3px 5px; border-radius: 5px; color: var(--module-color); background: var(--module-soft); font-size: .43rem; font-weight: 650; }
.marketing-step--result { border-color: var(--module-color); color: #fff; background: var(--module-color); }
.marketing-step--result > span, .marketing-step--result > strong, .marketing-step--result > small { color: #fff; }
.marketing-step--result > small { opacity: .72; }
.channel-pressure { display: grid; gap: 13px; }
.channel-pressure > div { display: grid; grid-template-columns: 56px minmax(0,1fr) 27px; align-items: center; gap: 7px; }
.channel-pressure span { color: #5b675e; font-size: .51rem; }
.channel-pressure i { margin: 0; }
.channel-pressure strong { color: var(--module-color); font-size: .48rem; font-weight: 650; text-align: right; }
.pressure-note { margin-top: 18px; padding: 12px; border-radius: 10px; background: var(--module-soft); }
.pressure-note strong { display: block; color: var(--module-color); font-size: .84rem; }
.pressure-note span { display: block; margin-top: 3px; color: #758178; font-size: .48rem; }

.kanban { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.kanban-column { min-width: 0; padding: 10px; border-radius: 11px; background: #f1f4f1; }
.kanban-head { display: flex; justify-content: space-between; margin-bottom: 9px; color: #657169; font-size: .57rem; font-weight: 600; }
.task-card { margin-bottom: 7px; padding: 10px; border: 1px solid #e0e5e1; border-radius: 9px; background: #fff; }
.task-card:last-child { margin-bottom: 0; }
.task-card strong { display: block; color: #39453c; font-size: .58rem; line-height: 1.35; font-weight: 600; }
.task-card span { display: block; margin-top: 7px; color: #8a948d; font-size: .49rem; }

.donut-wrap { display: grid; grid-template-columns: 150px minmax(0,1fr); align-items: center; gap: 18px; }
.donut { width: 132px; height: 132px; margin: auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--module-color) 0 43%, #6aa3ce 43% 70%, #e1a35a 70% 88%, #dfe5e0 88% 100%); }
.donut::after { content: ""; width: 78px; height: 78px; border-radius: 50%; background: #fff; }
.legend { display: grid; gap: 10px; }
.legend-row { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 8px; align-items: center; color: #5f6b63; font-size: .57rem; }
.legend-row i { width: 8px; height: 8px; border-radius: 2px; background: var(--dot); }
.legend-row strong { font-size: .6rem; font-weight: 600; }

.ai-conversation { display: grid; gap: 10px; }
.bubble { max-width: 85%; padding: 11px 12px; border-radius: 12px; color: #4f5b52; background: #f0f3f1; font-size: .59rem; line-height: 1.45; }
.bubble.user { justify-self: end; color: #0b2515; background: var(--module-soft); }
.bubble.ai { border: 1px solid #e0e5e1; background: #fff; }
.ai-source { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.ai-source span { padding: 4px 6px; border-radius: 6px; color: var(--module-color); background: var(--module-soft); font-size: .48rem; font-weight: 600; }
.agent-map-panel { min-height: 290px; }
.agent-map { padding-top: 1px; }
.agent-hub { position: relative; width: min(64%,330px); min-height: 52px; margin: 0 auto 29px; padding: 9px 11px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--module-color); border-radius: 12px; background: var(--module-soft); box-shadow: 0 8px 22px color-mix(in srgb, var(--module-color) 12%, transparent); }
.agent-hub::after { content: ""; position: absolute; left: 50%; bottom: -17px; width: 1px; height: 17px; background: color-mix(in srgb, var(--module-color) 45%, #dce3dd); }
.agent-hub > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--module-color); font-size: .57rem; font-weight: 750; }
.agent-hub strong, .agent-hub small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent-hub strong { color: #344139; font-size: .64rem; font-weight: 650; }
.agent-hub small { margin-top: 4px; color: #748078; font-size: .47rem; }
.agent-hub > b { padding: 4px 6px; border-radius: 999px; color: var(--module-color); background: rgba(255,255,255,.72); font-size: .45rem; font-weight: 650; white-space: nowrap; }
.agent-branches { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.agent-branches::before { content: ""; position: absolute; top: -13px; left: 16.66%; right: 16.66%; height: 1px; background: color-mix(in srgb, var(--module-color) 45%, #dce3dd); }
.agent-branch { position: relative; min-width: 0; padding: 9px; border: 1px solid #e1e6e2; border-radius: 11px; background: #fbfcfb; }
.agent-branch::before { content: ""; position: absolute; top: -13px; left: 50%; width: 1px; height: 13px; background: color-mix(in srgb, var(--module-color) 45%, #dce3dd); }
.agent-branch header { margin-bottom: 7px; padding-bottom: 7px; display: flex; align-items: center; justify-content: space-between; gap: 6px; border-bottom: 1px solid #e9edea; }
.agent-branch header strong { overflow: hidden; color: #47534a; font-size: .51rem; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
.agent-branch header span { color: var(--module-color); font-size: .42rem; white-space: nowrap; }
.agent-unit { min-width: 0; padding: 5px 0; display: grid; grid-template-columns: 23px minmax(0,1fr) auto; align-items: center; gap: 6px; }
.agent-unit > i { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; color: var(--module-color); background: var(--module-soft); font-size: .45rem; font-style: normal; font-weight: 700; }
.agent-unit strong, .agent-unit small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent-unit strong { color: #3e4b42; font-size: .48rem; font-weight: 600; }
.agent-unit small { margin-top: 2px; color: #8a948d; font-size: .4rem; }
.agent-unit > em { color: var(--module-color); font-size: .39rem; font-style: normal; font-weight: 650; white-space: nowrap; }
.agent-safety { margin-top: 5px; padding: 7px; border-radius: 7px; background: var(--module-soft); }
.agent-safety span, .agent-safety strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent-safety span { color: var(--module-color); font-size: .4rem; font-weight: 650; }
.agent-safety strong { margin-top: 3px; color: #56635a; font-size: .43rem; font-weight: 550; }

.intro { padding: 118px 0; color: var(--paper-ink); background: var(--paper); }
.intro-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(55px,8vw,120px); align-items: start; }
.section-label { margin: 0 0 21px; color: var(--module-color); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.intro h2, .features h2, .connections h2 { margin: 0; max-width: 850px; font-size: clamp(2.5rem,4.8vw,4.6rem); line-height: 1.01; letter-spacing: -.057em; font-weight: 750; }
.intro h2 em, .features h2 em, .connections h2 em { color: var(--module-color); font-style: normal; }
.intro-copy { padding-top: 3px; }
.intro-copy p { margin: 0 0 22px; color: #657168; font-size: 1.04rem; line-height: 1.75; }
.intro-copy p:last-child { margin-bottom: 0; }

.esign-feature { padding: 0 0 112px; background: var(--paper); }
.esign-feature-card { padding: clamp(34px,5vw,68px); display: grid; grid-template-columns: minmax(0,1fr) minmax(390px,.84fr); align-items: center; gap: clamp(42px,7vw,96px); overflow: hidden; border-radius: 28px; color: #f3f2fb; background: #151424; }
.esign-feature-copy .section-label { color: #aea0ec; }
.esign-feature-copy h2 { margin: 0; max-width: 680px; font-size: clamp(2.35rem,4.4vw,4.25rem); line-height: 1.01; letter-spacing: -.057em; font-weight: 750; }
.esign-feature-copy > p { max-width: 650px; margin: 26px 0 0; color: #bbb9c9; font-size: 1rem; line-height: 1.72; }
.esign-points { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.esign-points span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #d8d6e2; background: rgba(255,255,255,.04); font-size: .69rem; }
.esign-preview { min-width: 0; padding: 20px; border: 1px solid rgba(255,255,255,.09); border-radius: 20px; color: #28322b; background: #fff; box-shadow: 0 24px 60px rgba(0,0,0,.24); }
.esign-preview-head { padding-bottom: 17px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; border-bottom: 1px solid #e7ebe8; }
.esign-preview-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; color: var(--module-color); background: var(--module-soft); }
.esign-preview-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.esign-preview-head small, .esign-preview-head strong { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.esign-preview-head small { color: #8a948d; font-size: .58rem; }
.esign-preview-head strong { margin-top: 4px; color: #303a33; font-size: .76rem; font-weight: 650; }
.esign-preview-status { padding: 6px 8px; border-radius: 999px; color: var(--module-color); background: var(--module-soft); font-size: .54rem; font-weight: 650; white-space: nowrap; }
.esign-signer-list { display: grid; gap: 8px; margin-top: 17px; }
.esign-signer { min-width: 0; padding: 10px; display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid #e6ebe7; border-radius: 11px; background: #fafbfa; }
.esign-signer > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--module-color); background: var(--module-soft); font-size: .51rem; font-weight: 700; }
.esign-signer strong, .esign-signer small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.esign-signer strong { color: #3a453d; font-size: .62rem; font-weight: 650; }
.esign-signer small { margin-top: 3px; color: #8a948d; font-size: .49rem; }
.esign-signer em { color: #147a55; font-size: .51rem; font-style: normal; font-weight: 650; white-space: nowrap; }
.esign-signer:nth-child(2) em { color: var(--module-color); }
.esign-preview-progress { height: 7px; margin-top: 17px; overflow: hidden; border-radius: 999px; background: #e9edea; }
.esign-preview-progress i { display: block; width: 50%; height: 100%; border-radius: inherit; background: var(--module-color); }
.esign-preview > p { margin: 9px 0 0; color: #7e8981; font-size: .52rem; line-height: 1.45; }

.features { padding: 112px 0; background: #fff; }
.features-head { display: grid; grid-template-columns: 1.05fr .95fr; align-items: end; gap: 70px; margin-bottom: 52px; }
.features-lead { margin: 0 0 4px; color: #69766d; font-size: 1.02rem; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.feature-card { min-height: 245px; padding: 27px; border: 1px solid #e1e5e1; border-radius: 18px; background: #fbfcfb; }
.feature-no { display: block; margin-bottom: 42px; color: var(--module-color); font-size: .72rem; font-weight: 600; }
.feature-card h3 { margin: 0 0 11px; font-size: 1.22rem; line-height: 1.2; letter-spacing: -.03em; }
.feature-card p { margin: 0; color: #68746b; font-size: .91rem; line-height: 1.65; }
.feature-card--esign { border-color: color-mix(in srgb, var(--module-color) 28%, #e1e5e1); background: color-mix(in srgb, var(--module-soft) 58%, #fff); }

.module-depth { padding: 112px 0; color: #edf4ef; background: #0a160e; }
.depth-grid { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); align-items: start; gap: clamp(55px,8vw,120px); }
.module-depth .section-label { margin-bottom: 36px; color: #7ce49d; }
.depth-copy h2 { margin: 0; max-width: 690px; font-size: clamp(2.45rem,4.5vw,4.3rem); line-height: 1.01; letter-spacing: -.056em; font-weight: 750; }
.depth-copy p { max-width: 570px; margin: 28px 0 0; color: #a9b6ac; font-size: 1rem; line-height: 1.72; }
.depth-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.13); }
.depth-item { min-height: 75px; padding: 18px 12px 17px 0; display: grid; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.13); }
.depth-item:nth-child(2n) { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.13); }
.depth-item small { color: #698071; font-size: .58rem; font-weight: 600; }
.depth-item strong { color: #e7eee9; font-size: .86rem; line-height: 1.35; font-weight: 500; }

.connections { padding: 116px 0; background: color-mix(in srgb, var(--module-soft) 45%, #f5f6f2); }
.connection-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(55px,8vw,120px); align-items: center; }
.connection-copy p { max-width: 560px; margin: 28px 0 0; color: #637068; font-size: 1.03rem; line-height: 1.72; }
.connection-map { padding: 24px; border: 1px solid rgba(24,51,33,.11); border-radius: 24px; background: rgba(255,255,255,.76); }
.connection-main { padding: 20px; border-radius: 16px; color: #fff; background: var(--module-color); }
.connection-main small { display: block; opacity: .72; font-size: .67rem; }
.connection-main strong { display: block; margin-top: 8px; font-size: 1.26rem; font-weight: 600; }
.connection-items { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 9px; }
.connection-item { padding: 16px 13px; border: 1px solid #e1e5e2; border-radius: 13px; background: #fff; }
.connection-item strong { display: block; font-size: .78rem; font-weight: 600; }
.connection-item span { display: block; margin-top: 5px; color: #7b867e; font-size: .65rem; line-height: 1.45; }

.next-modules { padding: 105px 0; background: #fff; }
.next-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.next-head h2 { margin: 0; font-size: clamp(2rem,3.5vw,3.3rem); letter-spacing: -.05em; }
.next-head a { color: #59665d; font-size: .85rem; text-decoration: none; }
.next-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.next-card { min-height: 170px; padding: 22px; border: 1px solid #e0e5e1; border-radius: 16px; text-decoration: none; background: #fafbfa; transition: border-color .18s ease, background .18s ease; }
.next-card:hover { border-color: #c7d1c9; background: #fff; }
.next-card small { color: #849087; font-size: .66rem; }
.next-card strong { display: block; margin-top: 42px; font-size: 1.08rem; font-weight: 600; }
.next-card span { display: block; margin-top: 7px; color: #77827a; font-size: .77rem; line-height: 1.45; }

.closing { padding: 100px 0; color: #06180c; background: var(--green); }
.closing-grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 70px; }
.closing h2 { margin: 0; max-width: 800px; font-size: clamp(2.7rem,5vw,4.9rem); line-height: .98; letter-spacing: -.06em; }
.closing-side p { margin: 0 0 23px; color: #164a28; font-size: 1rem; line-height: 1.65; }
.closing .button { color: #eef7f0; background: #071b0e; border-color: #071b0e; }
.closing .button:hover { background: #102c19; border-color: #102c19; box-shadow: 0 8px 24px rgba(7,27,14,.18); }

.footer { padding: 52px 0 30px; color: #9caaa0; background: #07120c; }
.footer-top { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 60px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.11); }
.footer-brand img { width: 132px; height: auto; filter: invert(1); }
.footer-brand p { max-width: 330px; margin: 18px 0 0; font-size: .82rem; line-height: 1.65; }
.footer h3 { margin: 0 0 16px; color: #e5ece7; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-links { display: grid; gap: 11px; }
.footer-links a { width: fit-content; color: #9caaa0; font-size: .82rem; text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; color: #6f7c72; font-size: .72rem; }
.footer-powered { display: inline-flex; align-items: center; gap: 8px; }
.footer-powered img { width: auto; height: 16px; filter: brightness(0) invert(1); opacity: .7; }

:focus-visible { outline: 3px solid rgba(85,223,131,.55); outline-offset: 4px; border-radius: 5px; }

@media (max-width: 1120px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 800px; }
  .screen-wrap { width: min(100%,1000px); }
  .product-menu span { font-size: .66rem; }
  .intro-grid, .features-head, .connection-grid { grid-template-columns: 1fr; }
  .esign-feature-card { grid-template-columns: 1fr; }
  .esign-preview { width: min(100%,650px); }
  .depth-grid { grid-template-columns: 1fr; }
  .features-head { gap: 24px; }
  .connection-map { max-width: 760px; }
}

@media (max-width: 980px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .container { width: min(100% - 32px,var(--site-content-width)); }
  .module-hero { padding: 58px 0 67px; }
  .hero-copy h1 { font-size: clamp(3rem,13vw,4.6rem); }
  .product-menu { display: none; }
  .product-window { min-height: 650px; border-radius: 18px; }
  .product-body { grid-template-columns: 48px minmax(0,1fr); min-height: 588px; }
  .product-rail { padding-inline: 5px; }
  .rail-icon { width: 36px; height: 36px; }
  .product-content { padding: 20px 13px; }
  .screen-tabs span:nth-child(n+6) { display: none; }
  .screen-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .screen-kpi:nth-child(n+3) { display: none; }
  .workspace, .split-ui { grid-template-columns: 1fr; }
  .workspace > .ui-panel + .ui-panel { display: none; }
  .agent-hub { width: 100%; margin-bottom: 12px; }
  .agent-hub::after, .agent-branches::before, .agent-branch::before { display: none; }
  .agent-branches { grid-template-columns: 1fr; }
  .kanban { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .kanban-column:nth-child(3) { display: none; }
  .intro, .features, .module-depth, .connections, .next-modules { padding: 78px 0; }
  .esign-feature { padding-bottom: 78px; }
  .esign-feature-card { padding: 32px 24px; border-radius: 20px; }
  .feature-grid, .next-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 0; }
  .feature-no { margin-bottom: 28px; }
  .connection-items { grid-template-columns: 1fr; }
  .depth-list { grid-template-columns: 1fr; }
  .depth-item:nth-child(2n) { padding-left: 0; border-left: 0; }
  .next-head { display: block; }
  .next-head a { display: inline-block; margin-top: 14px; }
  .next-card { min-height: 145px; }
  .next-card strong { margin-top: 29px; }
  .closing { padding: 75px 0; }
  .closing-grid { grid-template-columns: 1fr; gap: 35px; }
}

@media (max-width: 680px) {
  .esign-preview { padding: 15px; border-radius: 16px; }
  .esign-preview-head { grid-template-columns: 38px minmax(0,1fr); }
  .esign-preview-icon { width: 38px; height: 38px; }
  .esign-preview-status { grid-column: 2; width: fit-content; }
  .esign-signer { grid-template-columns: 28px minmax(0,1fr); }
  .esign-signer em { grid-column: 2; }
  .footer { padding-top: 42px; }
  .footer-top { grid-template-columns: 1fr; gap: 36px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}