.gradient-btn {
      background: linear-gradient(90deg, #2e9e96, #ffffff, #f7a36f);
      border: none;
      padding: 10px 28px;
      border-radius: 25px;
      font-size: 22px;
      font-weight: 500;
      cursor: pointer;
      text-align: center;
      display: flex;
      align-items: center;
      gap: 12px;
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
      line-height: 1.2;
    }
    .gradient-btn svg.arrow-icon {
      vertical-align: middle;
      margin-left: 8px;
      width: 1.2em;
      height: 1.2em;
      transition: transform 0.2s;
    }
    .gradient-btn:hover svg.arrow-icon {
      transform: translateX(6px) scale(1.1);
    }
    .gradient-btn:focus {
      outline: 2px solid #ffa163;
      outline-offset: 2px;
    }
    .gradient-btn-container {
      background: #1a1a1a;
      padding: 6px 36px;
      border-radius: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
/* Tablets and small laptops */
@media (max-width: 992px) {
  .cta-button,
  .gradient-btn {
    font-size: 16px;
    padding: 12px 24px;
    min-height: 44px;    /* keeps button tall enough */
    border-radius: 40px;
  }
}

/* Small phones up to 480px */
@media (max-width: 480px) {
  .cta-button,
  .gradient-btn {
    font-size: 15px;
    padding: 9px 16px;
    width: 100%;       /* full width for small phones */
    max-width: 280px;  /* keeps it from being too wide */
    margin: 0 auto;    /* center align */
    display: block;
  }
}

/* Extra small screens (iPhone SE / fold ~375px) */
@media (max-width: 375px) {
.cta-button, .gradient-btn {
    font-size: 14px;
    padding: 8px  14px;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    align-items: center;
}
}