/* four numbered feature cards, each with a live mini-scene */
.cards{position:relative;padding:clamp(80px,14vh,160px) 0 clamp(60px,10vh,120px);background:linear-gradient(rgba(4,10,28,0),rgba(4,10,28,.5) 18%,rgba(4,10,28,.5) 82%,rgba(4,10,28,0))}
.cards-head{text-shadow:0 2px 18px rgba(4,10,28,.95);display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;padding:0 var(--gut);margin-bottom:clamp(28px,5vh,56px)}
.cards-head .big{max-width:10em}
.arrows{display:flex;gap:10px;flex:none}
.arrows button{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid var(--line);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s,transform .25s}
.arrows button:hover{background:rgba(79,184,255,.3);transform:scale(1.06)}
.arrows button:disabled{opacity:.35;cursor:default;transform:none;background:rgba(255,255,255,.04)}
.arrows svg{width:22px;height:22px}
.track{list-style:none;padding:0 var(--gut) 24px;display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.card{flex:0 0 clamp(270px,27vw,400px);scroll-snap-align:start;padding:14px 14px 28px;display:flex;flex-direction:column;position:relative;
  opacity:var(--r,1);transform:translateY(calc((1 - var(--r,1)) * 70px)) rotateX(calc((1 - var(--r,1)) * 12deg));transform-origin:50% 100%}
.mini{width:100%;aspect-ratio:4/3;border-radius:14px;background:#081330;border:1px solid var(--line)}
.num{position:absolute;top:26px;left:28px;padding:.25rem .65rem;border-radius:999px;background:rgba(4,10,28,.7);border:1px solid var(--line);color:var(--lilac)}
.card h3{font-size:2rem;margin:1.3rem 12px .5rem}
.card p{margin:0 12px;color:#d3dcf5;font-size:.96rem}
.card .add{margin:.8rem 12px 0;color:var(--blue);font-size:.85rem;font-family:"JetBrains Mono",monospace;letter-spacing:.06em}
@media (max-width:760px){
  .cards-head{flex-direction:column;align-items:flex-start}
  .card{flex-basis:78vw}
  .arrows button{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){.card{opacity:1!important;transform:none!important}}