.hero-cta{ background:#2B57FF; color:#fff; height:44px; padding:0 22px; border:none; border-radius:9999px; font-weight:700; font-size:14px; letter-spacing:.18em; text-transform:uppercase; box-shadow:0 8px 18px rgba(4,26,85,.22); transition:transform .18s ease, box-shadow .25s ease, filter .25s ease; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; position:relative; overflow:hidden; isolation:isolate; cursor:pointer; text-decoration:none; line-height:44px; } .hero-cta::before{ content:""; position:absolute; inset:0; background:#041A55; transform:scaleX(0); transform-origin:left center; transition:transform .35s ease; z-index:-1; pointer-events:none; } .hero-cta:hover::before{ transform:scaleX(1); } .hero-cta:hover{ box-shadow:0 12px 24px rgba(4,26,85,.35); } .hero-cta:active{ transform:translateY(0) scale(.995); box-shadow:0 6px 18px rgba(4,26,85,.28); } .hero-cta:focus{ outline:none; }.hero-yellow-cta{ background:#dee33e; color:#000; height:44px; padding:0 22px; border:none; border-radius:9999px; font-weight:700; font-size:14px; letter-spacing:.18em; text-transform:uppercase; box-shadow:0 8px 18px rgba(4,26,85,.22); transition:transform .18s ease, box-shadow .25s ease, filter .25s ease; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; position:relative; overflow:hidden; isolation:isolate; cursor:pointer; text-decoration:none; line-height:44px; } .hero-yellow-cta::before{ content:""; position:absolute; inset:0; background:#FFFFFF; transform:scaleX(0); transform-origin:left center; transition:transform .35s ease; z-index:-1; pointer-events:none; } .hero-yellow-cta:hover::before{ transform:scaleX(1); } .hero-yellow-cta:hover{ box-shadow:0 12px 24px rgba(4,26,85,.35); } .hero-yellow-cta:active{ transform:translateY(0) scale(.995); box-shadow:0 6px 18px rgba(4,26,85,.28); } .hero-yellow-cta:focus{ outline:none; }