.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 28px;border-radius:999px;font-weight:800;font-size:15.5px;border:1px solid transparent;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s;will-change:transform;text-decoration:none;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent-500);color:#0a0a0a;box-shadow:0 8px 20px rgba(212,175,55,.28)}
.btn-primary::after{content:"";position:absolute;top:0;bottom:0;width:46%;left:-70%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .6s var(--ease)}
.btn-primary:hover{background:var(--accent-700);box-shadow:0 12px 26px rgba(212,175,55,.32);transform:translateY(-2px)}
.btn-primary:hover::after{left:130%}
.btn-ghost{border-color:var(--border-strong);color:var(--text);background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent-500);color:var(--accent-300);background:var(--accent-50);transform:translateY(-2px);box-shadow:0 10px 24px rgba(212,175,55,.14)}
.btn-ghost::after{content:"";position:absolute;top:0;bottom:0;width:46%;left:-70%;background:linear-gradient(105deg,transparent,rgba(212,175,55,.28),transparent);transform:skewX(-20deg);transition:left .6s var(--ease)}
.btn-ghost:hover::after{left:130%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* Mobile buttons airy premium (<=767px only, desktop untouched) */
@media(max-width:767px){
.btn{font-size:14px;padding:12px 22px}
.btn-row{flex-direction:column;gap:0;align-items:stretch}
.btn-row .btn{display:block;width:100%;margin-bottom:10px;font-size:14.5px;padding:13px 20px;border-radius:999px;white-space:normal;text-align:center}
.btn-row .btn:last-child{margin-bottom:0}
}
.magnetic{will-change:transform;transition:transform .35s var(--ease-spring)}