.brand-vision { padding: 64px 30px; }
.vision-panel { position: relative; isolation: isolate; max-width: 1440px; margin-inline: auto; overflow: hidden; border-radius: 36px; padding: 64px 32px 48px; text-align: center; color: #112c5b; background: radial-gradient(ellipse at 12% 85%, #e1f5ff 0, transparent 55%), linear-gradient(115deg, #d5ecff, #9dd9fb 52%, #e7ffff); }
.vision-panel::before { content: ''; position: absolute; z-index: -1; inset: 0; opacity: .25; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(transparent 25%, #000); }
.vision-intro { max-width: 800px; margin-inline: auto; }
.vision-eyebrow { display: inline-flex; border: 1px solid rgb(255 255 255 / 55%); border-radius: 999px; background: rgb(255 255 255 / 50%); padding: 9px 22px; font-size: 14px; font-weight: 700; color: #1c5fba; }
.vision-intro h2 { margin-top: 24px; font-size: clamp(32px, 4.5vw, 58px); font-weight: 700; line-height: 1.35; letter-spacing: -.025em; }
.vision-intro h2 span { display: block; color: #1c5fba; }
.vision-intro p { max-width: 680px; margin: 20px auto 0; font-size: 18px; line-height: 1.9; color: #193f83; }
.vision-art { max-width: 600px; margin: 12px auto 0; }
.vision-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.vision-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 30px; list-style: none; padding: 0; margin: 0; }
.vision-steps li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
.vision-steps li > span { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border: 1px solid rgb(28 95 186 / 22%); border-radius: 50%; font-size: 10px; color: #1c5fba; }
.vision-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 28px; padding: 13px 24px; border-radius: 14px; background: #112c5b; color: #fff; font-size: 15px; font-weight: 700; transition: background-color 180ms ease, transform 180ms ease; }
.vision-cta svg { width: 18px; height: 18px; }
.vision-cta:hover { background: #1c5fba; transform: translateY(-2px); }
.vision-cta:focus-visible, .vision-motion-toggle:focus-visible { outline: 3px solid #1c5fba; outline-offset: 4px; }
.vision-motion-toggle { position: absolute; inset-inline-end: 22px; bottom: 22px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgb(17 44 91 / 16%); border-radius: 50%; background: rgb(255 255 255 / 35%); color: #193f83; cursor: pointer; }
.vision-motion-toggle[hidden], .vision-play-icon { display: none; }
.vision-motion-toggle svg { width: 16px; height: 16px; }
.vision-motion-toggle[aria-pressed="true"] .vision-pause-icon { display: none; }
.vision-motion-toggle[aria-pressed="true"] .vision-play-icon { display: block; }
.vision-core { animation: vision-float 4s ease-in-out infinite; }
.vision-design { animation: vision-float 3.5s ease-in-out -1s infinite; }
.vision-chart { animation: vision-float 4s ease-in-out -2s infinite; }
.vision-success { animation: vision-float 3.5s ease-in-out -.5s infinite; }
.vision-launch { animation: vision-float 3.5s ease-in-out -1.5s infinite; }
.vision-check { stroke-dasharray: 1; animation: vision-draw-check 2.8s ease-in-out infinite; }
.vision-growth { stroke-dasharray: 1; animation: vision-draw-check 3.5s ease-in-out -.7s infinite; }
.vision-bar { transform-box: fill-box; transform-origin: center bottom; animation: vision-bar 4s ease-in-out infinite; }
.vision-bar-two { animation-delay: .2s; }
.vision-bar-three { animation-delay: .4s; }
.vision-sparkle { transform-box: fill-box; transform-origin: center; animation: vision-spin 4s linear infinite; }
.vision-sparkle-small { animation-duration: 3s; animation-direction: reverse; }
.vision-status { animation: vision-rays 2s ease-in-out infinite; }
[data-brand-vision][data-running="false"] .vision-motion { animation-play-state: paused; }
@keyframes vision-spin { to { transform: rotate(360deg); } }
@keyframes vision-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes vision-draw-check { 0%, 12% { stroke-dashoffset: 1; opacity: 0; } 18% { opacity: 1; } 42%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes vision-rays { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes vision-bar { 0%, 100% { transform: scaleY(.55); } 45%, 75% { transform: scaleY(1); } }
.dark .vision-panel { background: radial-gradient(ellipse at 85% 80%, #154674, transparent 65%), linear-gradient(115deg, #112c5b, #0e2847); color: #eff9ff; }
.dark .vision-intro h2 span { color: #7ed4fa; }
.dark .vision-intro p { color: #c4e3f8; }
.dark .vision-eyebrow { border-color: rgb(126 212 250 / 24%); background: rgb(126 212 250 / 10%); color: #b9e7ff; }
.dark .vision-steps li > span { color: #b9e7ff; border-color: rgb(126 212 250 / 35%); }
.dark .vision-cta { background: #ddf3ff; color: #112c5b; }
.dark .vision-cta:hover { background: #fff; }
.dark .vision-motion-toggle { color: #ddf3ff; background: rgb(255 255 255 / 10%); border-color: rgb(255 255 255 / 20%); }
@media (max-width: 767px) {
    .brand-vision { padding: 32px 12px; }
    .vision-panel { border-radius: 26px; padding: 40px 20px 60px; }
    .vision-intro h2 { font-size: clamp(28px, 7vw, 42px); }
    .vision-intro p { font-size: 15px; line-height: 1.9; }
    .vision-art { width: calc(100% + 24px); max-width: none; margin-inline: -12px; margin-top: 18px; }
    .vision-steps { gap: 10px 16px; }
    .vision-steps li { font-size: 12px; gap: 6px; }
    .vision-motion-toggle { bottom: 14px; inset-inline-end: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .brand-vision .vision-motion { animation: none; }
    .vision-check, .vision-growth { stroke-dashoffset: 0; opacity: 1; }
    .vision-cta { transition: none; }
    .vision-motion-toggle { display: none; }
}