/* Model Gateway: a bento of four feature cards. Motion is CSS-only (one 9 s loop) and off with reduced motion. */
.gateway{padding:120px 24px 100px;background:var(--gallery);text-align:center;scroll-margin-top:90px;overflow:clip}
.gateway-heading{max-width:760px;margin:0 auto 64px}
.gateway .eyebrow{font-size:10px;color:#71617f}
.gateway h2{font-size:clamp(40px,4.6vw,65px);line-height:1.06;margin:0 0 22px}
.gateway h2 span{color:#81738d}
.gateway-heading>p:last-child{font-size:18px;line-height:1.6;color:#71617f;margin:0}
.gw-bento{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;text-align:start}
.gw-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:34px;padding:clamp(28px,3.2vw,48px);border-radius:32px;background:#f3f1f7;color:#1d1730;overflow:hidden;isolation:isolate}
.gw-dark{background:#100925;color:#f6f0fa}
.gw-dark::before{content:"";position:absolute;inset:auto -20% -45% 20%;height:80%;background:radial-gradient(closest-side,#6c4bd955,transparent);z-index:-1}
.gw-auto-card{grid-column:span 12;flex-direction:row;align-items:center;gap:clamp(28px,4vw,64px)}.gw-auto-card .gw-copy{flex:0 1 34%}.gw-auto-card .gw-flow{flex:1 1 0;min-width:0}.gw-save-card{grid-column:span 6}.gw-key-card{grid-column:span 6}.gw-local-card{grid-column:span 12}
.gw-kicker{margin:0 0 14px;font-size:10px;font-weight:600;letter-spacing:.16em;color:#8d7c97}
.gw-dark .gw-kicker{color:#a08ab6}
.gw-card h3{margin:0 0 14px;font-size:clamp(28px,2.7vw,40px);line-height:1.08;letter-spacing:-.04em;font-weight:600}
.gw-copy>p:not(.gw-kicker):not(.gw-big){margin:0;max-width:420px;font-size:16px;line-height:1.55;color:#6d5f79}
.gw-dark .gw-copy>p:not(.gw-kicker){color:#b8a7cb}
.gw-big{margin:0 0 6px;font-size:clamp(72px,9vw,128px);line-height:.95;font-weight:600;letter-spacing:-.06em;background:linear-gradient(120deg,#150474,#7a4fe0 60%,#c47ad9);-webkit-background-clip:text;background-clip:text;color:transparent}
.gw-save-card .gw-copy>p:last-child{font-size:18px;color:#4d4059}
/* Auto flow */
.gw-flow{display:grid;grid-template-columns:minmax(0,1fr) 34px auto 34px minmax(0,1.2fr);align-items:center}
.gw-tasks,.gw-logos,.gw-local-models{list-style:none;margin:0;padding:0}
.gw-tasks{display:grid;gap:10px}
.gw-tasks li{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff1a;opacity:.5;animation:gw-task 9s infinite}
.gw-tasks li:nth-child(2){animation-delay:3s}.gw-tasks li:nth-child(3){animation-delay:6s}
.gw-tasks small{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:#a08ab6}
.gw-tasks b{font-size:14px;font-weight:500;line-height:1.3}
.gw-link{position:relative;height:2px;background:#ffffff22;border-radius:2px;overflow:hidden}
.gw-link i{position:absolute;inset:0 auto 0 0;width:40%;background:linear-gradient(90deg,transparent,#a58bff,transparent);animation:gw-run 3s linear infinite}
.gw-auto{position:relative;display:grid;justify-items:center;gap:3px;width:116px;padding:22px 8px;border-radius:22px;background:linear-gradient(160deg,#7a4fe0,#3b1fa8);color:#fff;text-align:center}
.gw-auto b{font-size:22px;font-weight:600;letter-spacing:-.03em}
.gw-auto small{font-size:9px;line-height:1.3;color:#e3dcff}
.gw-auto-ring{position:absolute;inset:-7px;border-radius:28px;border:1px solid #a58bff66;animation:gw-ring 3s ease-in-out infinite}
.gw-count{margin:0 0 12px;font-size:12px;color:#b8a7cb}.gw-count b{font-size:20px;color:#fff;letter-spacing:-.02em;margin-inline-end:3px}
.gw-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.gw-logos li{display:grid;justify-items:center;gap:6px;padding:11px 4px 9px;border-radius:12px;background:#fff;opacity:.78}
.gw-logos img{width:28px;height:28px;object-fit:contain}
.gw-logos span{font-size:9.5px;line-height:1.15;color:#4d4059;text-align:center}
.gw-logos li[data-m="1"]{animation:gw-model 9s infinite}.gw-logos li[data-m="2"]{animation:gw-model 9s 3s infinite}.gw-logos li[data-m="0"]{animation:gw-model 9s 6s infinite}
/* savings bars */
.gw-bars{display:grid;gap:14px}
.gw-bar{display:grid;gap:7px;font-size:12px;color:#6d5f79}
.gw-bar u{display:block;height:12px;border-radius:99px;background:#cfc9d8;width:100%}
.gw-bar-auto u{width:55%;background:linear-gradient(90deg,#150474,#7a4fe0);transform-origin:left;animation:gw-bar 9s ease-in-out infinite}
/* key */
.gw-key{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:0 14px 34px -22px #2a164a66;color:#150474;font-size:13px;font-weight:500}
.gw-key svg{flex:none}.gw-key span{white-space:nowrap}.gw-key i{margin-inline-start:auto;font-style:normal;letter-spacing:.14em;color:#9a8aa4;overflow:hidden;text-overflow:clip;white-space:nowrap}
/* local */
.gw-local-card{flex-direction:row;align-items:center;gap:28px}
.gw-local-card .gw-copy{flex:1 1 52%}
.gw-more{display:inline-flex;gap:8px;margin-top:22px;font-size:14px;font-weight:500;color:#cdbdff;text-decoration:none}.gw-more:hover{color:#fff}
.gw-device{position:relative;flex:1 1 44%;padding-block:8px;display:grid;justify-items:center;gap:16px;min-width:0}
.gw-device-core{position:relative;display:grid;justify-items:center;gap:3px;width:150px;padding:22px 10px;border-radius:30px;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff26;color:#e3dcff;text-align:center}
.gw-device-core b{font-size:20px;font-weight:600;letter-spacing:-.02em;color:#fff}.gw-device-core small{font-size:11px;color:#b8a7cb}
.gw-device-ring{position:absolute;top:-8px;left:50%;width:166px;height:146px;margin-left:-83px;border-radius:38px;border:1px solid #a58bff55;animation:gw-ring 3s ease-in-out infinite}
.gw-local-models{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.gw-local-models li{padding:8px 13px;border-radius:99px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff1f;font-size:12px;color:#e3dcff;white-space:nowrap}
.gateway-note{max-width:760px;margin:28px auto 0;font-size:11px;line-height:1.6;color:#8d7c97}
@keyframes gw-task{0%,4%{opacity:.5;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff1a}10%,30%{opacity:1;background:#ffffff1c;box-shadow:inset 0 0 0 1px #a58bff}36%,100%{opacity:.5;background:#ffffff0d;box-shadow:inset 0 0 0 1px #ffffff1a}}
@keyframes gw-model{0%,4%{opacity:.78;transform:none}10%,30%{opacity:1;transform:translateY(-2px);box-shadow:0 0 0 2px #a58bff,0 12px 24px -10px #a58bffaa}36%,100%{opacity:.78;transform:none}}
@keyframes gw-run{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes gw-ring{0%,100%{opacity:.25;transform:scale(.98)}50%{opacity:.9;transform:scale(1.02)}}
@keyframes gw-bar{0%,8%{transform:scaleX(1)}30%,90%{transform:scaleX(1)}}
@keyframes gw-run-v{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
@media(prefers-reduced-motion:reduce){.gw-tasks li,.gw-logos li,.gw-link i,.gw-auto-ring,.gw-device-ring,.gw-bar-auto u{animation:none}.gw-tasks li,.gw-logos li{opacity:1}.gw-link i{display:none}}
@media(max-width:1000px){
 .gw-save-card,.gw-key-card{grid-column:1/-1}
 .gw-auto-card{flex-direction:column;align-items:stretch}.gw-auto-card .gw-copy{flex:none}
 .gw-save-card{flex-direction:row;align-items:flex-end;justify-content:space-between}.gw-bars{flex:0 1 46%}
}
@media(max-width:700px){
 .gateway{padding:80px 16px 70px}.gateway-heading{margin-bottom:40px}.gateway-heading>p:last-child{font-size:16px}
 .gw-bento{gap:14px}.gw-card{border-radius:26px;gap:26px;padding:26px 22px}
 .gw-flow{grid-template-columns:1fr;justify-items:center}.gw-tasks,.gw-models{width:100%}
 .gw-link{width:2px;height:30px}.gw-link i{inset:0 0 auto 0;width:100%;height:40%;background:linear-gradient(180deg,transparent,#a58bff,transparent);animation-name:gw-run-v}
 .gw-save-card,.gw-local-card,.gw-auto-card{flex-direction:column;align-items:stretch}.gw-bars{flex:none}
 .gw-device{padding-top:10px}.gw-big{font-size:clamp(76px,24vw,112px)}
}