/* cards.css — generic cards and step cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--space)*1.1)}
.card{position:relative;background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) + 2px);
  padding:clamp(18px,2.2vw,28px);transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
  box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.card::before{content:""; position:absolute; inset:-1px; border-radius: inherit; background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  z-index:0; opacity:0; transition:opacity .35s ease; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); padding:1px; -webkit-mask-composite: xor; mask-composite: exclude}
.card .inner{position:relative; z-index:1}
.card .icon{width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg, var(--grad-a), var(--grad-b));
  display:inline-grid; place-items:center; font-weight:800; color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.15); margin-bottom:.7rem}
.card:hover{ transform: translateY(-6px); box-shadow: var(--card-glow); border-color: transparent }
.card:hover::before{ opacity:1 }
@media (max-width: 900px){ .cards{grid-template-columns:1fr} }

/* Step cards */
.cards.steps{gap: clamp(14px, 2vw, 24px)}
.card.step{background: var(--card); border:1px solid var(--border); border-radius: calc(var(--radius) + 2px); padding: clamp(18px, 2.2vw, 28px)}
.card.step .stripe{height:6px; border-radius:6px 6px 0 0; margin:-4px -4px 14px -4px; background: linear-gradient(90deg, var(--grad-a), var(--grad-b))}
.card.step .chip{width:40px;height:40px;border-radius:10px;margin:0 auto .6rem auto; display:grid;place-items:center;background:linear-gradient(135deg, var(--grad-a), var(--grad-b));color:#fff;font-weight:800}
.card.step h3{text-align:center;margin:.2rem 0 .6rem}
.card.step .features{list-style:none;padding:0;margin:0;display:grid;gap:.4rem;justify-items:center}
.card.step .features li{position:relative;padding-left:1.3rem}
.card.step .features li::before{content:"✔";position:absolute;left:0;top:0;color:var(--muted)}