:root {
  --ex-navy: #142a47;
  --ex-deep: #071a2f;
  --ex-coral: #ef4b51;
  --ex-blue: #2f75c9;
  --ex-pale: #f1f7fb;
  --ex-muted: #607088;
  --ex-border: #e2ebf1;
}

.ex-hero, .ex-section, .ex-trust, .ex-cta { color: var(--ex-navy); }
.ex-hero h1, .ex-section h2, .ex-section h3, .ex-trust h2, .ex-cta h2 { color: var(--ex-navy) !important; text-transform: none; }
.ex-kicker { margin: 0 0 11px; color: var(--ex-blue) !important; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ex-section { padding: 88px 0; }
.ex-heading { max-width: 820px; margin: 0 auto 43px; text-align: center; }
.ex-heading--left { max-width: none; text-align: left; }
.ex-heading h2, .ex-trust h2, .ex-cta h2 { margin: 0 0 12px; font-size: clamp(31px, 3vw, 46px); line-height: 1.09; letter-spacing: -.035em; font-weight: 800; }
.ex-heading > p:last-child { margin: 0; color: var(--ex-muted); font-size: 18px; line-height: 1.55; }

.ex-hero { position: relative; overflow: hidden; padding: 90px 0; background: radial-gradient(circle at 78% 42%, #dcebf7, #f4f9fc 32%, #fff 62%); }
.ex-hero__grid { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 55px; }
.ex-hero h1 { max-width: 680px; margin: 0 0 23px; font-size: clamp(47px, 4.7vw, 68px); line-height: 1.01; letter-spacing: -.045em; font-weight: 800; }
.ex-hero h1 span { color: var(--ex-coral); }
.ex-lead { max-width: 650px; margin: 0; color: var(--ex-muted); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.6; }
.ex-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 31px; }
.ex-button-outline { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 13px 24px; border: 2px solid var(--ex-navy); border-radius: 15px; color: var(--ex-navy) !important; background: #fff; font-weight: 700; text-decoration: none; transition: .2s ease; }
.ex-button-outline:hover { color: #fff !important; background: var(--ex-navy); transform: translateY(-2px); }

.ex-hero__visual { position: relative; min-height: 450px; }
.ex-ms-mark { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 125px; height: 125px; padding: 25px; border-radius: 50%; background: #fff; box-shadow: 0 25px 60px rgba(20,42,71,.14); transform: translate(-50%, -50%); }
.ex-ms-mark i { display: block; border-radius: 3px; }.ex-ms-mark i:nth-child(1) { background: #f25022; }.ex-ms-mark i:nth-child(2) { background: #7fba00; }.ex-ms-mark i:nth-child(3) { background: #00a4ef; }.ex-ms-mark i:nth-child(4) { background: #ffb900; }
.ex-connector { position: absolute; left: 17%; right: 17%; height: 1px; background: #9fc4e7; }.ex-connector--one { top: 34%; }.ex-connector--two { top: 66%; }
.ex-float { position: absolute; z-index: 4; width: 155px; padding: 22px 16px; border: 1px solid rgba(255,255,255,.9); border-radius: 17px; background: rgba(255,255,255,.96); text-align: center; box-shadow: 0 18px 45px rgba(20,42,71,.12); }
.ex-float::before { content: ''; display: block; width: 35px; height: 35px; margin: 0 auto 11px; border-radius: 11px; background: #e8f3fc; box-shadow: inset 0 0 0 9px #2f75c9; }
.ex-float strong, .ex-float span { display: block; }.ex-float strong { margin-bottom: 4px; font-size: 15px; }.ex-float span { color: var(--ex-muted); font-size: 12px; }
.ex-float--teams { left: 3%; top: 6%; }.ex-float--process { right: 2%; top: 5%; }.ex-float--data { left: 2%; bottom: 3%; }.ex-float--business { right: 1%; bottom: 2%; }

.ex-grid { display: grid; gap: 22px; }.ex-grid--four { grid-template-columns: repeat(4, 1fr); }.ex-grid--three { grid-template-columns: repeat(3, 1fr); }
.ex-card { min-height: 275px; padding: 30px; border: 1px solid var(--ex-border); border-radius: 19px; background: linear-gradient(145deg, #fff, #f4f9fc); box-shadow: 0 12px 32px rgba(20,42,71,.055); }
.ex-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 20px; border-radius: 16px; color: var(--ex-blue); background: #eaf4fc; }
.ex-icon svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ex-card h3, .ex-method__card h3, .ex-journey h3 { margin: 0 0 10px; font-size: 20px; font-weight: 800; }
.ex-card p, .ex-method__card p, .ex-journey p { margin: 0; color: var(--ex-muted); line-height: 1.57; }

.ex-journey { background: var(--ex-pale); }
.ex-journey__steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.ex-journey__steps article { position: relative; padding: 20px 13px; text-align: center; }
.ex-journey__steps article:not(:last-child)::after { content: '→'; position: absolute; right: -18px; top: 43px; color: #8ebce4; font-size: 27px; }
.ex-journey__steps .ex-icon { margin: 0 auto 18px; background: #fff; box-shadow: 0 8px 24px rgba(20,42,71,.08); }
.ex-step-number { position: absolute; left: calc(50% + 20px); top: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: var(--ex-coral); font-size: 12px; font-weight: 800; }
.ex-journey h3 { font-size: 17px; }

.ex-offer { background: #fff; }
.ex-trust { padding: 74px 0; color: #fff; background: linear-gradient(135deg, var(--ex-deep), #17446f); }
.ex-trust__grid { display: grid; grid-template-columns: 1.4fr .6fr; align-items: center; gap: 85px; }
.ex-trust h2 { color: #fff !important; }.ex-trust p:not(.ex-kicker) { max-width: 790px; margin: 0; color: rgba(255,255,255,.74); font-size: 18px; line-height: 1.6; }.ex-trust .ex-kicker { color: #8ebce4 !important; }
.ex-values { display: grid; gap: 10px; }.ex-values span { padding: 10px 0 10px 17px; border-left: 3px solid var(--ex-coral); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.ex-method { background: #fff; }
.ex-method__card { display: flex; gap: 19px; padding: 27px; border: 1px solid var(--ex-border); border-radius: 17px; background: #f7fafc; }
.ex-method__card .ex-icon { flex: 0 0 58px; margin: 0; }
.ex-method__card h3 { font-size: 19px; }
.ex-audience { background: var(--ex-pale); }
.ex-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
.ex-chips span { padding: 21px 12px; border: 1px solid var(--ex-border); border-radius: 999px; background: #fff; text-align: center; font-weight: 800; box-shadow: 0 8px 22px rgba(20,42,71,.04); }

.ex-cta { padding: 65px 0; background: linear-gradient(110deg, #fff3f3, #edf6fb); }
.ex-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 45px; }.ex-cta h2 { margin: 0; max-width: 770px; }

@media (max-width: 1050px) {
  .ex-hero__grid { grid-template-columns: 1fr; }.ex-hero__copy { max-width: 770px; }.ex-hero__visual { width: min(620px, 100%); margin: auto; }
  .ex-grid--four { grid-template-columns: repeat(2, 1fr); }.ex-journey__steps { grid-template-columns: repeat(3, 1fr); }.ex-journey__steps article::after { display: none; }.ex-chips { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .ex-section { padding: 68px 0; }.ex-hero { padding: 62px 0; }.ex-hero h1 { font-size: 45px; }
  .ex-grid--four, .ex-grid--three, .ex-journey__steps, .ex-trust__grid { grid-template-columns: 1fr; }.ex-card { min-height: 0; }.ex-trust__grid { gap: 40px; }.ex-chips { grid-template-columns: repeat(2, 1fr); }
  .ex-cta__inner { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .ex-hero h1 { font-size: 39px; }.ex-actions { flex-direction: column; }.ex-actions > * { width: 100%; }
  .ex-hero__visual { min-height: 390px; transform: scale(.86); transform-origin: top left; width: 116%; margin-bottom: -50px; }
  .ex-chips { grid-template-columns: 1fr 1fr; }.ex-cta .fg-button { width: 100%; }
}
