export function FrostedBlurButton() {
  return (
    <div
      className="p-12 grid place-items-center relative overflow-hidden"
      style={{
        background:
          "linear-gradient(160deg, #0c4a6e 0%, #0e7490 35%, #14532d 70%, #064e3b 100%)",
      }}
    >
      <div
        aria-hidden
        className="absolute -top-20 -left-10 h-56 w-56 rounded-full"
        style={{ background: "#22d3ee", filter: "blur(60px)", opacity: 0.45 }}
      />
      <div
        aria-hidden
        className="absolute -bottom-16 -right-10 h-64 w-64 rounded-full"
        style={{ background: "#84cc16", filter: "blur(70px)", opacity: 0.4 }}
      />
      <style>{`
        .frost-btn {
          position: relative;
          background: rgba(255,255,255,0.08);
          color: #ecfeff;
          border: 1px solid rgba(255,255,255,0.22);
          backdrop-filter: blur(22px) saturate(160%);
          -webkit-backdrop-filter: blur(22px) saturate(160%);
          box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.4),
            inset 0 -1px 0 rgba(255,255,255,0.06),
            0 14px 30px -12px rgba(0,0,0,0.45);
          transition: background .3s ease, transform .25s ease;
        }
        .frost-btn:hover {
          background: rgba(255,255,255,0.18);
          transform: translateY(-1px);
        }
        .frost-btn:active { transform: scale(.98); }
      `}</style>
      <button
        type="button"
        className="frost-btn px-7 py-3.5 rounded-2xl text-[14px] font-medium"
      >
        ❄ Frost coat
      </button>
    </div>
  );
}
Frosted Blur Button
