:root{ --btn-radius: 999px; --btn-py: .8rem; --btn-px: 2.2rem; --btn-font: 700 28px/1.05 system-ui, -apple-system, "Segoe UI", Inter, Arial, sans-serif; --btn-letter: -0.01em; --ease: cubic-bezier(.2,.9,.2,1); --dur: 220ms;  --shadow-rest: 0 10px 22px rgba(12, 26, 44, .10); --shadow-hover: 0 16px 34px rgba(12, 26, 44, .16); --shadow-press: 0 8px 18px rgba(12, 26, 44, .14);  --ring: 0 0 0 4px rgba(15, 111, 255, .18); }  .btn-premium{ display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--btn-py) var(--btn-px); border-radius: var(--btn-radius); border: 2px solid transparent; font: var(--btn-font); letter-spacing: var(--btn-letter); text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; position: relative; overflow: hidden; transform: translateZ(0); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), filter var(--dur) var(--ease); }  .btn-premium::before{ content: ""; position: absolute; inset: -40% -30%; background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60% ); transform: translateX(-60%) rotate(6deg); opacity: 0; transition: transform 520ms var(--ease), opacity 260ms var(--ease); pointer-events: none; }  .btn-premium:hover{ transform: translateY(-2px); box-shadow: var(--shadow-hover); } .btn-premium:hover::before{ opacity: 1; transform: translateX(60%) rotate(6deg); } .btn-premium:active{ transform: translateY(0px) scale(.99); box-shadow: var(--shadow-press); }  .btn-premium:focus-visible{ outline: none; box-shadow: var(--shadow-rest), var(--ring); }  .btn-premium:disabled, .btn-premium[aria-disabled="true"]{ opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; } .btn-premium:disabled::before, .btn-premium[aria-disabled="true"]::before{ display: none; }  @media (prefers-reduced-motion: reduce){ .btn-premium, .btn-premium::before{ transition: none !important; } }   .btn-premium--outline{ background: transparent; border-color: #cfd9e2; color: #0b4f7e; box-shadow: none; } .btn-premium--outline:hover{ background: rgba(11, 79, 126, .06); border-color: #b8c7d5; box-shadow: 0 12px 26px rgba(12, 26, 44, .10); }  .btn-premium--navy{ background: #0b4f7e; color: #ffffff; box-shadow: var(--shadow-rest); border-color: rgba(255,255,255,.10); } .btn-premium--navy{  background-image: radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.18) 0%, transparent 55%), linear-gradient(180deg, rgba(0,0,0,.06), transparent 40%); } .btn-premium--navy:hover{ filter: brightness(1.03) saturate(1.03); }  .btn-premium--mint{ background: #43c6a0; color: #073b36; box-shadow: var(--shadow-rest); border-color: rgba(0,0,0,.06); } .btn-premium--mint{ background-image: radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.22) 0%, transparent 55%), linear-gradient(180deg, rgba(0,0,0,.05), transparent 40%); } .btn-premium--mint:hover{ filter: brightness(1.02) saturate(1.05); }  :root{ --card-radius: 36px; --card-pad: 52px; --card-border: rgba(10, 22, 40, .06); --shadow-rest: 0 18px 46px rgba(12, 26, 44, .08); --shadow-hover: 0 30px 70px rgba(12, 26, 44, .14); --ease: cubic-bezier(.2,.9,.2,1); --dur: 240ms; --mint: #43c6a0; --ink: #0b2133; --muted: rgba(11, 33, 51, .65); --ring: 0 0 0 4px rgba(67, 198, 160, .18); }  .card-premium{ position: relative; display: grid; justify-items: center; gap: 18px; padding: var(--card-pad); border-radius: var(--card-radius); border: 1px solid var(--card-border); background: radial-gradient(120% 90% at 20% 10%, rgba(67,198,160,.10), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)); box-shadow: var(--shadow-rest); transform: translateZ(0); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); text-decoration: none; color: inherit; overflow: hidden; }  .card-premium::before{ content: ""; position: absolute; inset: -40% -30%; background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.18) 50%, transparent 58% ); transform: translateX(-55%) rotate(6deg); opacity: 0; transition: transform 520ms var(--ease), opacity 260ms var(--ease); pointer-events: none; }  .card-premium__title{ margin: 0; font: 800 clamp(28px, 2.1vw, 44px)/1.15 system-ui, -apple-system, "Segoe UI", Inter, Arial, sans-serif; letter-spacing: -0.02em; color: var(--ink); text-align: center; } .card-premium__text{ margin: 0; font: 500 22px/1.7 system-ui, -apple-system, "Segoe UI", Inter, Arial, sans-serif; color: var(--muted); text-align: center; max-width: 28ch; }  .card-premium__icon{ width: 96px; height: 96px; border-radius: 999px; display: grid; place-items: center; background: rgba(67, 198, 160, .14); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 22px rgba(12, 26, 44, .08); transform: translateZ(0); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }  .card-premium__icon svg, .card-premium__icon img{ width: 44px; height: 44px; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }  .card-premium:hover{ transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: rgba(10, 22, 40, .10); } .card-premium:hover::before{ opacity: 1; transform: translateX(55%) rotate(6deg); } .card-premium:hover .card-premium__icon{ background: var(--mint); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 34px rgba(12, 26, 44, .16); transform: translateY(-2px) scale(1.03); }  .card-premium:active{ transform: translateY(-2px) scale(.995); }  .card-premium:focus-visible{ outline: none; box-shadow: var(--shadow-rest), var(--ring); }  @media (prefers-reduced-motion: reduce){ .card-premium, .card-premium::before, .card-premium__icon, .card-premium__icon svg, .card-premium__icon img{ transition: none !important; } }