/* Button 01 - Golden Premium */
    .btn01 {
      background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
      border: 0;
      border-radius: 50px;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-size: 15px;
      font-weight: 900;
      outline: 0;
      padding: 16px 20px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      overflow: hidden;
      box-shadow: 
        0 6px 0 #cc8400,
        0 10px 25px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 215, 0, 0.4);
      
      -webkit-text-stroke: 1.5px #000;
      text-shadow: 
        0 2px 3px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(255, 215, 0, 0.6);
    }

    .btn01:before {
      background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
      border-radius: 125px;
      content: "";
      height: 50%;
      left: 4%;
      opacity: 0.4;
      position: absolute;
      top: 0;
      transition: all 0.3s;
      width: 92%;
    }

    .btn01:hover {
      box-shadow: 
        rgba(255, 255, 255, 0.3) 0 3px 15px inset,
        0 4px 0 #cc8400,
        0 8px 20px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(255, 215, 0, 0.6);
      transform: scale(1.05) translateY(-2px);
    }

    .btn01:active {
      transform: scale(0.98) translateY(4px);
      box-shadow: 
        0 2px 0 #cc8400,
        0 4px 15px rgba(0, 0, 0, 0.5);
    }

    /* Button 02 - Neon Blue */
    .btn02 {
      background: linear-gradient(180deg, #00d4ff 0%, #0088cc 100%);
      border: 0;
      border-radius: 50px;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-size: 15px;
      font-weight: 900;
      outline: 0;
      padding: 16px 20px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      overflow: hidden;
      box-shadow: 
        0 6px 0 #0066aa,
        0 10px 25px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(0, 212, 255, 0.5);
      
      text-shadow: 
        0 2px 3px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(0, 212, 255, 0.8);
    }

    .btn02:before {
      background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
      border-radius: 125px;
      content: "";
      height: 50%;
      left: 4%;
      opacity: 0.5;
      position: absolute;
      top: 0;
      transition: all 0.3s;
      width: 92%;
    }

    .btn02:hover {
      box-shadow: 
        rgba(255, 255, 255, 0.3) 0 3px 15px inset,
        0 4px 0 #0066aa,
        0 8px 20px rgba(0, 0, 0, 0.6),
        0 0 35px rgba(0, 212, 255, 0.7);
      transform: scale(1.05) translateY(-2px);
    }

    .btn02:active {
      transform: scale(0.98) translateY(4px);
      box-shadow: 
        0 2px 0 #0066aa,
        0 4px 15px rgba(0, 0, 0, 0.5);
    }

    /* Button 03 - Red Alert */
    .btn03 {
      background: linear-gradient(180deg, #ff3333 0%, #cc0000 100%);
      border: 0;
      border-radius: 50px;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-size: 15px;
      font-weight: 900;
      outline: 0;
      padding: 16px 20px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      overflow: hidden;
      box-shadow: 
        0 6px 0 #990000,
        0 10px 25px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 51, 51, 0.4);
      
      -webkit-text-stroke: 1.5px #000;
      text-shadow: 
        0 2px 3px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(255, 100, 100, 0.6);
    }

    .btn03:before {
      background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
      border-radius: 125px;
      content: "";
      height: 50%;
      left: 4%;
      opacity: 0.4;
      position: absolute;
      top: 0;
      transition: all 0.3s;
      width: 92%;
    }

    .btn03:hover {
      box-shadow: 
        rgba(255, 255, 255, 0.3) 0 3px 15px inset,
        0 4px 0 #990000,
        0 8px 20px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(255, 51, 51, 0.6);
      transform: scale(1.05) translateY(-2px);
    }

    .btn03:active {
      transform: scale(0.98) translateY(4px);
      box-shadow: 
        0 2px 0 #990000,
        0 4px 15px rgba(0, 0, 0, 0.5);
    }

    /* Button 04 - Purple Premium */
    .btn04 {
      background: linear-gradient(135deg, #9b59b6 0%, #6c3483 100%);
      border: 0;
      border-radius: 50px;
      color: #fff;
      cursor: pointer;
      display: inline-block;
      font-size: 15px;
      font-weight: 900;
      outline: 0;
      padding: 16px 20px;
      position: relative;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: all 0.3s;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
      overflow: hidden;
      box-shadow: 
        0 6px 0 #5b2c6f,
        0 10px 25px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(155, 89, 182, 0.5);
      
      text-shadow: 
        0 2px 3px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(187, 143, 206, 0.6);
    }

    .btn04:before {
      background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
      border-radius: 125px;
      content: "";
      height: 50%;
      left: 4%;
      opacity: 0.5;
      position: absolute;
      top: 0;
      transition: all 0.3s;
      width: 92%;
    }

    .btn04:after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      transform: rotate(45deg);
      animation: shine 3s infinite;
    }

    @keyframes shine {
      0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
      50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
    }

    .btn04:hover {
      box-shadow: 
        rgba(255, 255, 255, 0.3) 0 3px 15px inset,
        0 4px 0 #5b2c6f,
        0 8px 20px rgba(0, 0, 0, 0.6),
        0 0 35px rgba(155, 89, 182, 0.7);
      transform: scale(1.05) translateY(-2px);
    }

    .btn04:active {
      transform: scale(0.98) translateY(4px);
      box-shadow: 
        0 2px 0 #5b2c6f,
        0 4px 15px rgba(0, 0, 0, 0.5);
    }

    /* Demo Container */
    .demo-box {
      background: rgba(255, 255, 255, 0.05);
      padding: 30px;
      border-radius: 15px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    h2 {
      color: #fff;
      margin-bottom: 20px;
      text-align: center;
      font-size: 14px;
      letter-spacing: 1px;
      opacity: 0.6;
      font-weight: 400;
    }

    @media (min-width: 768px) {
      .btn01, .btn02, .btn03, .btn04 {
        padding: 16px 48px;
      }
    }