.ecosystem { background: linear-gradient(180deg, #f5fbff, #fff); border-top: 3px solid #4fb791; border-bottom: 3px solid #d96591; }
.ecosystem__grid { display: grid; grid-template-columns: 1.08fr 1.02fr 1.08fr; gap: 18px; padding-top: 28px; padding-bottom: 28px; align-items: stretch; }
.integrations-panel, .cases-panel { background: rgba(255,255,255,.58); }
.integration-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.integration-card { min-height: 128px; background: #fff; border: 1px solid #dce5f3; border-radius: 10px; padding: 12px; box-shadow: 0 7px 16px rgba(41,71,120,.06); }
.integration-card h3 { margin: 0 0 9px; font-size: 11px; color: #303497; }
.integration-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.integration-card li { font-size: 11px; color: #434a5f; }
.integration-line { height: 28px; display: flex; align-items: center; justify-content: space-around; position: relative; margin-top: 7px; }
.integration-line::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; border-top: 1px dashed #5d80e4; }
.integration-line i { position: relative; z-index: 1; width: 7px; height: 7px; background: #355bd9; border-radius: 50%; }

.manager-dashboard { background: #06142e; color: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 18px 35px rgba(8,25,55,.22); }
.manager-dashboard__head { display: flex; justify-content: space-between; gap: 12px; align-items: end; font-size: 17px; font-weight: 800; }.manager-dashboard__head small { color: #7f91ad; font-size: 9px; font-weight: 600; }
.manager-dashboard__metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 15px; }
.manager-dashboard__metrics div { min-width: 0; padding: 10px; background: #0d203e; border-radius: 8px; }
.manager-dashboard__metrics span, .manager-dashboard__metrics small { display: block; color: #8fa0ba; font-size: 8px; }
.manager-dashboard__metrics strong { display: block; font-size: 16px; margin: 5px 0; white-space: nowrap; }.manager-dashboard__metrics strong.danger { color: #ff6a2d; }
.manager-dashboard__metrics small { color: #45c784; }
.manager-dashboard__body { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 9px; margin-top: 10px; }
.manager-dashboard__body > div { min-height: 135px; background: #0b1c38; border-radius: 8px; padding: 8px; }
.manager-chart .ui-preview { background: transparent; border: 0; box-shadow: none; }.manager-chart .ui-preview__bar { display: none; }.manager-chart .ui-preview__body { background: transparent; min-height: 110px; padding: 4px; }.manager-chart .mock-chart { height: 100px; }
.manager-funnel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.manager-funnel i { width: var(--w); min-height: 20px; display: grid; place-items: center; font-size: 9px; font-style: normal; border-radius: 4px; background: linear-gradient(90deg,#7844f2,#4f2be1); }
.manager-list { display: grid; align-content: center; gap: 10px; }.manager-list span { font-size: 8px; display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; align-items: center; }.manager-list i { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg,#f4b375,#a85a34); }.manager-list b { font-size: 8px; }
.manager-dashboard__footer { display: flex; align-items: center; gap: 12px; margin-top: 10px; }.manager-dashboard__footer span { font-size: 9px; color: #8997ad; line-height: 1.35; }

.cases-panel { padding: 0 0 0 4px; }
.cases-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.cases-panel__head h2 { font-size: 25px; }.cases-panel__head a { color: #322ca1; font-size: 12px; font-weight: 750; }
.case-card { background: #fff; border: 1px solid #e0e6ef; border-radius: 10px; box-shadow: 0 7px 18px rgba(35,56,95,.06); padding: 15px; }
.case-card__title { color: #303397; font-weight: 800; font-size: 15px; }
.case-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 12px; }
.case-columns h3 { margin: 0 0 7px; font-size: 11px; color: #40479a; }.case-columns ul { margin: 0; padding-left: 15px; display: grid; gap: 5px; color: #50576a; font-size: 10px; }
.case-proof { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 14px; border-top: 1px solid #edf0f5; padding-top: 11px; }.case-proof span { font-size: 8px; color: #687084; }.case-proof strong { display: block; color: #3047b8; font-size: 11px; margin-bottom: 3px; }
.case-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }.case-mini { min-height: 120px; padding: 10px; background: #fff; border: 1px solid #e0e6ef; border-radius: 9px; box-shadow: 0 5px 14px rgba(35,56,95,.05); }.case-mini strong, .case-mini span { display: block; font-size: 10px; }.case-mini span { color: #6c7181; margin: 3px 0 7px; }.case-mini .ui-preview__bar { display: none; }.case-mini .ui-preview__body { min-height: 60px; padding: 3px; }

.how-faq { padding: 28px 0 20px; background: #fff; }
.how-faq__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 20px; }
.how-panel h2, .faq-panel h2 { font-size: 27px; margin: 0 0 18px; }
.work-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.work-steps article { display: grid; grid-template-columns: 42px 1fr; gap: 10px; }
.work-steps article > span { width: 38px; height: 38px; border: 1px solid #9589e8; color: #3d2db1; border-radius: 50%; display: grid; place-items: center; font-weight: 850; }
.work-steps h3 { margin: 2px 0 7px; font-size: 13px; }.work-steps p { margin: 0; color: #666d7d; font-size: 10px; line-height: 1.5; }
.how-note { margin-top: 22px; min-height: 66px; padding: 10px 14px; border-radius: 10px; background: #fff8ee; border: 1px solid #eee2d2; display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; }.how-note > span { color: #5541bc; }.how-note svg { width: 28px; }.how-note p { margin: 0; font-size: 12px; color: #4e5261; }
.faq-list { border-top: 1px solid #e1e5ef; }.faq-list details { border-bottom: 1px solid #e1e5ef; }.faq-list summary { list-style: none; cursor: pointer; min-height: 38px; display: grid; grid-template-columns: 1fr 20px; gap: 10px; align-items: center; color: #373592; font-size: 12px; font-weight: 650; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary svg { width: 17px; transition: transform .16s ease; }.faq-list details[open] summary svg { transform: rotate(45deg); }.faq-list details > div { padding: 0 25px 13px 0; color: #666d7d; font-size: 11px; line-height: 1.5; }

.final-cta { position: relative; overflow: hidden; background: radial-gradient(circle at 76% 45%, rgba(113,26,172,.70), transparent 28%), radial-gradient(circle at 96% 53%, rgba(255,87,8,.82), transparent 23%), linear-gradient(105deg,#071333 0%,#0b103d 48%,#471470 76%,#c82f0d 125%); color: #fff; border-top: 3px solid #52b58d; }
.final-cta__inner { min-height: 176px; display: grid; grid-template-columns: 1.35fr auto .85fr; align-items: center; gap: 32px; position: relative; }
.final-cta__copy h2 { margin: 0; max-width: 700px; font-size: clamp(28px,2.4vw,39px); line-height: 1.08; letter-spacing: -.035em; }.final-cta__copy p { color: #d8d9e6; margin: 14px 0 0; max-width: 610px; font-size: 13px; line-height: 1.55; }
.final-cta__actions { display: flex; gap: 16px; }
.flow-art { height: 100%; min-width: 300px; position: relative; }.flow-art__line { position: absolute; left: 8%; right: -12%; top: 51%; height: 2px; border-top: 2px dashed rgba(255,135,45,.55); transform: rotate(-3deg); }.flow-node { position: absolute; width: 84px; height: 62px; border-radius: 10px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 16px 32px rgba(36,0,82,.28); transform: skewY(-7deg); }.flow-node svg { width: 30px; color: rgba(255,255,255,.85); }.flow-node--1 { left: 0; top: 56px; background: linear-gradient(145deg,#5b2ed6,#3920a1); }.flow-node--2 { left: 32%; top: 33px; background: linear-gradient(145deg,#7c36e6,#4c229f); }.flow-node--3 { right: 0; top: 62px; background: linear-gradient(145deg,#ff6512,#da3e09); }

.site-footer { background: #02051d; color: #fff; border-top: 1px solid rgba(255,255,255,.13); }
.site-footer__grid { min-height: 126px; padding-block: 20px; display: grid; grid-template-columns: 1.4fr .8fr .8fr 1fr 1fr .9fr .95fr; gap: 28px; align-items: start; }.site-footer .brand-mark { width: 32px; height: 32px; font-size: 14px; }.site-footer .brand-name { font-size: 19px; }.site-footer__brand p { margin: 9px 0 0; color: #a5aec3; font-size: 10px; line-height: 1.45; }.site-footer h2 { margin: 1px 0 5px; font-size: 10px; color: #fff; }.site-footer a, .site-footer span { display: block; color: #a9b2c6; font-size: 9px; line-height: 1.65; }.site-footer a:hover { color: #fff; }.site-footer__legal { padding-top: 6px; }