/* Quiet depth around the content; shared outline icons and a continuous feature rail. */
.hero#top{background:radial-gradient(ellipse at 95% 25%,var(--accent-a100),transparent 65%),var(--bg)}
.hero#top .hero-depth{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.8}
.hero#top>canvas+div{opacity:.13!important;pointer-events:none}
.hero#top .hero-capabilities{padding:28px 22px 16px;margin-top:6px;background:linear-gradient(115deg,#163a78,#102c61 58%,#153976);border:1px solid #ffffff18;border-radius:22px;box-shadow:0 20px 45px -30px #051b4d80;color:#fff;overflow:hidden}
.hero-capabilities>.benefits-track{gap:0;border-radius:0;padding:0;align-items:stretch;scroll-snap-type:x mandatory}
.benefits-track .benefit-card{flex:0 0 20%;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;padding:6px 28px 15px;min-height:148px;border:0;border-inline-end:1px solid #ffffff30;border-radius:0;background:none;box-shadow:none;text-align:start}
.benefits-track .benefit-card:last-child{border-inline-end:0}
.hero-capabilities .capability-icon,.benefit-card:nth-child(2) .capability-icon{display:grid;place-items:center;position:relative;width:40px;height:40px;border:0;border-radius:0;background:none;color:#c5dcff;box-shadow:none;transform:none}
.hero-capabilities .capability-icon:before{display:none}
.hero-capabilities .capability-icon svg{width:34px;height:34px;filter:none;stroke-width:1.45}
.hero-capabilities strong{font-size:17px;font-weight:600;color:#fff;line-height:1.45;letter-spacing:-.015em}
.hero-capabilities small{font-size:12px;color:#c9d9f2;line-height:1.7;max-width:160px;margin-top:6px;text-wrap:pretty}
.hero-capabilities>.benefits-controls{margin-top:16px;gap:18px}
.benefits-controls>button{width:38px;height:38px;border-color:#ffffff35;background:#ffffff08;color:#e0ecff;transition:background .2s}
.benefits-controls>button:hover{background:#ffffff20}
.benefits-dots button{width:23px;height:34px}
.benefits-dots button:before{background:#ffffff50}
.benefits-dots button[aria-current=true]:before{width:18px;background:#b6d4ff}
.benefits-controls button:focus-visible,.benefits-track:focus-visible{outline-color:#bed8ff;outline-offset:2px}
@media(max-width:1200px){.benefits-track .benefit-card{flex-basis:25%;padding-inline:24px}}
@media(max-width:920px){.benefits-track .benefit-card{flex-basis:33.3333%;padding-inline:20px}}
@media(max-width:600px){.hero#top .hero-capabilities{padding:23px 14px 13px;border-radius:18px}.benefits-track .benefit-card{flex-basis:50%;gap:14px;padding:4px 17px 8px;min-height:156px}.hero-capabilities strong{font-size:16px}.hero-capabilities small{font-size:11px}.hero-capabilities .capability-icon{width:36px;height:36px}.hero-capabilities .capability-icon svg{width:32px;height:32px}.hero-capabilities>.benefits-controls{margin-top:12px}.benefits-controls>button{width:44px;height:44px}.benefits-dots button{height:44px;width:21px}}
@media(max-width:380px){.benefits-track .benefit-card{flex-basis:85%;padding-inline:20px;min-height:145px}.hero-capabilities strong{font-size:17px}.hero-capabilities small{font-size:12px}}
@media(prefers-reduced-motion:reduce){.benefits-controls>button,.benefits-dots button:before{transition:none}}