:root{
    --btn-color: #ffffff;
    --btn-radius: 14px;
    --btn-padding: 14px 28px;
    --transition: 360ms cubic-bezier(.2,.9,.3,1);
  }
  
  .PurpleBtn{
    appearance:none;
    border: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    color: var(--btn-color);
    background-color: #65308F;
    width: 190px;
    font-size: 18px;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 28px rgba(101,48,143,0.22);
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
    overflow: hidden;
    transform: translateZ(0);
  }
  
  .PurpleBtn .label{position:relative;z-index:4}
  
  .PurpleBtn .sweep{
    position:absolute;
    top:-20%;
    left:-40%;
    width:40%;
    height:140%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(-18deg) translateX(-220%);
    filter: blur(8px) saturate(1.1);
    z-index:2;
    pointer-events:none;
    transition: transform 700ms cubic-bezier(.2,.9,.3,1), opacity 450ms;
    opacity:0.9;
  }
  
  .PurpleBtn .sweep.s2{
    width:18%;
    left:-20%;
    top:-10%;
    height:120%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(-12deg) translateX(-240%);
    filter: blur(6px) saturate(1.05);
    transition-duration: 520ms;
    z-index:3;
    opacity:0.95;
  }
  
  .PurpleBtn::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
    z-index:1;
    pointer-events:none;
  }
  
  .PurpleBtn:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(101,48,143,0.22);
    filter: none;
  }
  .PurpleBtn:hover .sweep{
    transform: rotate(-18deg) translateX(260%);
    opacity: 0;
    transition-duration: 760ms;
  }
  .PurpleBtn:hover .sweep.s2{
    transform: rotate(-12deg) translateX(240%);
    opacity: 0;
    transition-duration: 520ms;
  }
  
  .PurpleBtn:focus{outline:none}
  .PurpleBtn:focus-visible{box-shadow: 0 0 0 6px rgba(101,48,143,0.14), 0 20px 48px rgba(7,10,25,0.55)}
  
  .PurpleBtn.lg{padding:18px 36px;font-size:18px;border-radius:16px}
  .PurpleBtn.sm{padding:10px 18px;font-size:14px;border-radius:10px}
  .helper{margin-top:18px;text-align:center;font-size:13px;color:#b6c7e6;opacity:0.9}
  
  @media (max-width:420px){.fancy-btn{padding:12px 20px;font-size:15px}}
  .PurpleBtn::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background: radial-gradient(circle at center, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
    opacity:0;
    transform: scale(0.6);
    transition: opacity 500ms ease, transform 600ms cubic-bezier(.2,.8,.3,1);
    pointer-events:none;
    z-index:0;
  }
  
  .PurpleBtn:hover::after{
    opacity:0.45;
    transform: scale(1.35);
  }

  :root{
    --btn-color: #ffffff;
    --btn-radius: 12px;
    --btn-padding: 14px 28px;
    --transition: 360ms cubic-bezier(.2,.9,.3,1);
    --main: #FAAE1C;
  }
  
  .YellowBtn{
    appearance:none;
    width: 190px;
    border: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding: var(--btn-padding);
    border-radius: var(--btn-radius);
    color: var(--btn-color);
    background: linear-gradient(180deg, var(--main), color-mix(in srgb, var(--main) 85%, black 15%));
    font-size: 18px;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 28px rgba(101,48,143,0.22);
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
    overflow: hidden;
    transform: translateZ(0);
  }
  
  .YellowBtn .label{position:relative;z-index:4}
  
  .YellowBtn .sweep{
    position:absolute;
    top:-20%;
    left:-40%;
    width:40%;
    height:140%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(-18deg) translateX(-220%);
    filter: blur(8px) saturate(1.1);
    z-index:2;
    pointer-events:none;
    transition: transform 700ms cubic-bezier(.2,.9,.3,1), opacity 450ms;
    opacity:0.9;
  }
  
  .YellowBtn .sweep.s2{
    width:18%;
    left:-20%;
    top:-10%;
    height:120%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(-12deg) translateX(-240%);
    filter: blur(6px) saturate(1.05);
    transition-duration: 520ms;
    z-index:3;
    opacity:0.95;
  }
  
  .YellowBtn::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
    z-index:1;
    pointer-events:none;
  }
  
  .YellowBtn:hover{
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(101,48,143,0.22);
    filter: none;
  }
  .YellowBtn:hover .sweep{
    transform: rotate(-18deg) translateX(260%);
    opacity: 0;
    transition-duration: 760ms;
  }
  .YellowBtn:hover .sweep.s2{
    transform: rotate(-12deg) translateX(240%);
    opacity: 0;
    transition-duration: 520ms;
  }
  
  .YellowBtn:focus{outline:none}
  .PurpleBtn:focus-visible{box-shadow: 0 0 0 6px rgba(101,48,143,0.14), 0 20px 48px rgba(7,10,25,0.55)}
  
  .YellowBtn.lg{padding:18px 36px;font-size:18px;border-radius:16px}
  .YellowBtn.sm{padding:10px 18px;font-size:14px;border-radius:10px}
  .helper{margin-top:18px;text-align:center;font-size:13px;color:#b6c7e6;opacity:0.9}
  
  @media (max-width:420px){.fancy-btn{padding:12px 20px;font-size:15px}}
  .YellowBtn::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background: radial-gradient(circle at center, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
    opacity:0;
    transform: scale(0.6);
    transition: opacity 500ms ease, transform 600ms cubic-bezier(.2,.8,.3,1);
    pointer-events:none;
    z-index:0;
  }
  
  .YellowBtn:hover::after{
    opacity:0.45;
    transform: scale(1.35);
  }