/* What we use: a stable, native technology grid aligned with the site's design. */
.ml-tech { padding-block: 72px; background: linear-gradient(145deg,#1a1e3b,#14172d); scroll-margin-top: 104px; }
.ml-tech-wrap { width: min(1200px,calc(100% - var(--ml-gutter) * 2)); margin-inline: auto; }
.ml-tech-intro { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); align-items: end; gap: 64px; margin-bottom: 36px; }
body.ml-design .ml-tech-eyebrow { display: inline-block; margin-bottom: 16px; color: #b9c4f4; font-family: var(--ml-font); font-size: 11px; font-weight: 650; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase; }
body.ml-design .ml-tech h2 { max-width: 680px; margin: 0; color: #f7f8ff; font-size: clamp(28px,3.3vw,42px) !important; line-height: 1.2 !important; letter-spacing: -.035em !important; text-wrap: balance; }
body.ml-design .ml-tech-intro > p { margin: 0; color: #c5cce3; font-family: var(--ml-font); font-size: 16px; line-height: 1.85; text-wrap: pretty; }
.ml-tech-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.ml-tech-card { display: flex; min-width: 0; flex-direction: column; padding: 26px; border: 1px solid #373e60; border-radius: 16px; background: #202540; box-shadow: 0 4px 20px #080d221a; }
.ml-tech-card__heading { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ml-tech-icon { display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid #48527b; border-radius: 12px; background: #303958; color: #ced6ff; }
.ml-tech-icon svg { display: block; width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
body.ml-design .ml-tech h3 { margin: 0; color: #f7f8ff; font-family: var(--ml-font); font-size: 18px !important; line-height: 1.4 !important; letter-spacing: -.02em !important; text-wrap: pretty; }
body.ml-design .ml-tech-card > p { margin: 0 0 22px; color: #c8cee1; font-family: var(--ml-font); font-size: 14px; line-height: 1.8; text-wrap: pretty; }
.ml-tech-tools { margin-top: auto; border-top: 1px solid #3a425f; }
.ml-tech-tools summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding-top: 8px; list-style: none; color: #d9dff4; font-family: var(--ml-font); font-size: 12px; font-weight: 600; line-height: 1.6; cursor: pointer; }
.ml-tech-tools summary::-webkit-details-marker { display: none; }
.ml-tech-tools summary svg { display: block; width: 14px; height: 14px; flex: 0 0 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.ml-tech-tools[open] summary svg { transform: rotate(180deg); }
.ml-tech-tools ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; padding: 0; list-style: none; }
.ml-tech-tools li { max-width: 100%; padding: 6px 9px; border: 1px solid #485171; border-radius: 6px; background: #2a314f; color: #e0e5f5; font-family: var(--ml-font); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
body.ml-design .ml-tech-card__link { display: flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 8px; padding-top: 8px; color: #c0ccff; font-family: var(--ml-font); font-size: 12px; font-weight: 600; line-height: 1.6; text-decoration: none; }
.ml-tech-card__link svg, .ml-tech-contact svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
body.ml-design .ml-tech-card__link:hover { color: #fff; }
.ml-tech-card__link:hover svg { transform: translateX(3px); }
.ml-tech-footer { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 32px; padding-top: 28px; border-top: 1px solid #39405b; }
body.ml-design .ml-tech-footer > p { max-width: 640px; margin: 0; color: #c5cce3; font-family: var(--ml-font); font-size: 13px; line-height: 1.8; }
body.ml-design .ml-tech-contact { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 12px; min-height: 48px; max-width: 100%; padding: 13px 20px; border: 1px solid #e2e6fb; border-radius: 8px; background: #fff; color: var(--ml-brand); font-family: var(--ml-font); font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none; }
body.ml-design .ml-tech-contact:hover { background: #e9edff; }
body.ml-design .ml-tech :is(a,summary):focus-visible { outline: 2px solid #c1ccff; outline-offset: 5px; }
@media (max-width: 1024px) {
 .ml-tech { scroll-margin-top: 88px; }
 .ml-tech-intro { gap: 32px; }
 .ml-tech-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
 .ml-tech { padding-block: 48px; }
 .ml-tech-intro { grid-template-columns: minmax(0,1fr); gap: 20px; margin-bottom: 28px; }
 .ml-tech-grid { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .ml-tech-card { padding: 24px; }
 .ml-tech-card__heading { margin-bottom: 16px; }
 .ml-tech-footer { flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 28px; padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .ml-tech-tools summary svg,.ml-tech-card__link svg { transition: none !important; } }

/* Success Stories: keep the transition and heading rhythm consistent with the technology section. */
body.ml-design #what-we-use + .elementor-section {
 padding: 72px 0 0 !important;
 margin: 0 0 32px !important;
}
body.ml-design #what-we-use + .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
 padding: 0 !important;
 gap: 16px;
}
body.ml-design #what-we-use + .elementor-section .elementor-widget-heading {
 margin: 0 !important;
}
body.ml-design #what-we-use + .elementor-section [data-id="60ebe25"] > .elementor-widget-container {
 padding: 0 !important;
 margin: 0 !important;
}
body.ml-design #what-we-use + .elementor-section h2 {
 margin: 0 !important;
}
body.ml-design #what-we-use + .elementor-section + .elementor-section {
 padding: 0 !important;
 margin: 0 0 72px !important;
}
body.ml-design #what-we-use + .elementor-section + .elementor-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
 padding: 0 !important;
}
@media (max-width: 767px) {
 body.ml-design #what-we-use + .elementor-section { padding-top: 48px !important; margin-bottom: 24px !important; }
 body.ml-design #what-we-use + .elementor-section + .elementor-section { margin-bottom: 48px !important; }
}