/* Buttons (3-tier + onsurface) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px var(--font);text-transform:uppercase;letter-spacing:.4px;padding:14px 26px;border-radius:var(--radius);border:0;cursor:pointer;transition:all var(--dur) var(--ease);white-space:nowrap;text-align:center}
.btn--primary{background:var(--cta);color:var(--cta-text)}
.btn--primary:hover{background:var(--cta-dark);transform:translateY(-1px);box-shadow:var(--shadow-hover);color:var(--cta-text)}
.btn--ghost{background:transparent;color:var(--primary);padding:14px 10px;text-transform:none;letter-spacing:0;font-weight:600}
.btn--ghost:hover{color:var(--primary-dark)}
.btn--onprimary{background:#fff;color:var(--primary-dark)}
.btn--onprimary:hover{background:#f3f0ea;color:var(--primary-darker)}
.btn--onsurface{background:#fff;color:var(--primary-dark);border:1px solid var(--border);text-transform:none;letter-spacing:0;font-weight:600;padding:12px 20px}
.btn--onsurface:hover{border-color:var(--primary);box-shadow:var(--shadow-card);color:var(--primary-dark);transform:translateY(-1px)}

/* Card */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);display:block;color:inherit}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px);color:inherit}

/* Category card */
.cat-card__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--surface)}
.cat-card__body{display:block;padding:var(--s16) var(--s20)}
.cat-card__body b{display:block;font-weight:600;font-size:16px;color:var(--text);margin-bottom:2px}
.cat-card__body span{font-size:var(--small);color:var(--text-secondary)}

/* Trust item */
.trust-item{display:flex;align-items:center;gap:10px;font:500 14px var(--font);color:var(--text-secondary)}
.trust-item svg{width:22px;height:22px;color:var(--primary);flex:none}

/* Use-case card */
.usecase{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .16s var(--ease),box-shadow .28s var(--ease);color:inherit}
.usecase:hover{transform:translateY(-2px);color:inherit}
.usecase__img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.usecase__body{padding:var(--s20)}
.usecase__body b{display:block;color:var(--text);font-size:16px;margin-bottom:2px}
.usecase__body span{color:var(--text-secondary);font-size:var(--small)}

/* Sale badge — red is legitimate here */
.badge--sale{background:var(--sale);color:#fff;font:700 11px var(--font);padding:3px 8px;border-radius:999px;letter-spacing:.4px}