.ai-section { position: relative; padding: 130px 0; color: #fff; background: #0b1640; overflow: hidden; isolation: isolate; }
.ai-section::before { content: ""; position: absolute; z-index: -2; inset: 0; background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(90deg, transparent, #000, transparent); }
.ai-section__orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(85px); opacity: .25; }
.ai-section__orb--one { width: 500px; height: 500px; right: -160px; top: -120px; background: #7a42ff; }
.ai-section__orb--two { width: 400px; height: 400px; left: -180px; bottom: -150px; background: #f05a3f; }
.ai-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: 85px; align-items: center; }
.section-label--light { color: #ffae91; }
.ai-copy h2 { margin-bottom: 24px; color: #fff; }
.ai-copy h2 em { color: #ff9a85; }
.ai-copy > p { color: #b4bdd8; font-size: 16px; line-height: 1.75; }
.ai-copy ul { list-style: none; margin: 31px 0 32px; padding: 0; }
.ai-copy li { display: grid; grid-template-columns: 34px 1fr; gap: 13px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.11); }
.ai-copy li:last-child { border-bottom: 1px solid rgba(255,255,255,.11); }
.ai-copy li > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: rgba(136,116,255,.15); color: #a99cff; font-size: 9px; }
.ai-copy li div { display: flex; flex-direction: column; gap: 4px; }
.ai-copy li strong { font: 600 14px "Manrope"; }
.ai-copy li small { color: #9ca6c3; font-size: 12px; line-height: 1.4; }
.button--light { border-color: #fff; background: #fff; color: #14204b; box-shadow: 0 13px 32px rgba(0,0,0,.17); }
.button--light:hover { border-color: #fff; background: #edf0ff; color: var(--blue); }
.integration-map { --pointer-x: 50%; --pointer-y: 50%; position: relative; min-height: 590px; border: 1px solid rgba(184,188,255,.16); border-radius: 28px; background: linear-gradient(145deg, rgba(41,52,109,.72), rgba(20,29,72,.88)); box-shadow: 0 35px 80px rgba(0,0,0,.25); overflow: hidden; transition: box-shadow .5s ease, border-color .5s ease; }
.integration-map::before { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient(360px circle at var(--pointer-x) var(--pointer-y), rgba(126,110,255,.2), transparent 58%); opacity: .45; transition: opacity .4s ease; pointer-events: none; }
.integration-map:hover { border-color: rgba(184,188,255,.3); box-shadow: 0 44px 100px rgba(0,0,0,.33); }
.integration-map::after { content: ""; position: absolute; width: 330px; height: 330px; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(140,133,255,.13); border-radius: 50%; box-shadow: 0 0 0 56px rgba(133,119,255,.025), 0 0 0 112px rgba(133,119,255,.02); }
.integration-map__grid { opacity: .25; }
.map-label { position: absolute; z-index: 3; left: 22px; top: 20px; display: flex; align-items: center; gap: 8px; color: #8d99bc; font-size: 8px; letter-spacing: .13em; }
.map-label span { width: 6px; height: 6px; border-radius: 50%; background: #2ed38e; box-shadow: 0 0 0 4px rgba(46,211,142,.1); }
.map-node { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; min-width: 142px; padding: 11px; border: 1px solid rgba(192,196,255,.14); border-radius: 11px; background: rgba(13,23,63,.8); box-shadow: 0 12px 28px rgba(0,0,0,.18); backdrop-filter: blur(8px); transition: transform .5s var(--ease-out), border-color .35s ease, background .35s ease; }
.map-node:not(.map-node--center):hover { border-color: rgba(192,196,255,.34); background: rgba(27,39,92,.92); transform: translateY(-5px) scale(1.025); }
.map-node div { display: flex; flex-direction: column; gap: 2px; }
.map-node strong { font-size: 10px; }
.map-node small { color: #8995b7; font-size: 7px; }
.map-node--center { min-width: 150px; left: 50%; top: 50%; flex-direction: column; transform: translate(-50%,-50%); padding: 22px; text-align: center; background: linear-gradient(145deg, rgba(49,62,139,.9), rgba(42,35,105,.9)); box-shadow: 0 20px 55px rgba(0,0,0,.35), 0 0 45px rgba(97,83,235,.17); animation: coreBreathe 4.5s ease-in-out infinite; }
.map-core { position: relative; display: grid !important; place-items: center; width: 63px; height: 63px; margin-bottom: 5px; border-radius: 19px; background: linear-gradient(145deg,#ff6b35,#f43f5e 55%,#7c3aed); box-shadow: 0 12px 27px rgba(224,64,83,.3); }
.map-core::before { content: ""; position: absolute; inset: -8px; border: 1px solid rgba(173,161,255,.32); border-radius: 25px; }
.map-core span { font-size: 22px; }
.map-node--one { left: 6%; top: 16%; }
.map-node--two { right: 5%; top: 17%; }
.map-node--three { left: 4%; bottom: 16%; }
.map-node--four { right: 4%; bottom: 17%; }
.map-lines { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; }
.map-lines path { fill: none; stroke: #7f89db; stroke-width: 1; stroke-dasharray: 5 7; animation: dashFlow 7s linear infinite; }
.map-pulse { position: absolute; z-index: 3; width: 8px; height: 8px; border-radius: 50%; background: #a38aff; box-shadow: 0 0 14px #a38aff; }
.map-pulse--one { left: 29%; top: 31%; animation: mapPulseOne 3s infinite linear; }
.map-pulse--two { right: 28%; top: 34%; animation: mapPulseTwo 3.5s infinite linear; }
.map-pulse--three { left: 27%; bottom: 30%; animation: mapPulseThree 3.3s infinite linear; }
.map-pulse--four { right: 26%; bottom: 29%; animation: mapPulseFour 3.7s infinite linear; }
.map-stat { position: absolute; z-index: 4; left: 50%; bottom: 20px; transform: translateX(-50%); min-width: 142px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(8,17,50,.7); text-align: center; }
.map-stat span { display: block; color: #7d8bad; font-size: 7px; text-transform: uppercase; letter-spacing: .1em; }
.map-stat strong { display: inline-block; margin: 3px 5px 0 0; font: 700 18px "Manrope"; }
.map-stat small { color: #aab3ce; font-size: 7px; }

@keyframes dashFlow { to { stroke-dashoffset: -48; } }
@keyframes coreBreathe { 0%, 100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.035); } }
@keyframes mapPulseOne { 0% { transform: translate(70px,55px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(-36px,-50px); opacity: 0; } }
@keyframes mapPulseTwo { 0% { transform: translate(-65px,50px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(39px,-55px); opacity: 0; } }
@keyframes mapPulseThree { 0% { transform: translate(75px,-53px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(-48px,50px); opacity: 0; } }
@keyframes mapPulseFour { 0% { transform: translate(-70px,-50px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(45px,50px); opacity: 0; } }