:root {
    --bg: #ffffff;
    --bg-secondary: #f5f5f4;
    --text: #1a1a18;
    --muted: #6b6b67;
    --border: rgba(0,0,0,0.12);
    --accent: #141d9e;
    --yellow: #dade10;
    --radius: 12px;
    --radius-sm: 8px;
    --font: 'Nokora', sans-serif;
    --green-mid:  #2d6a4a;
    --green-dark: #1a3a2a;
    --green-bright: #3ab26a;
    --green-push: #309156;
    --green-seven:#75D7A6;
    --green-light: #d4f1e2;
    --green-back: #e8f5ee;
    --green-back-top: #bbb9b99d;
    --green-back-topitop: #91b39a3f;
    --head-color: #70d17d41;
    --white: #ffffff;
    --text-main: #1a2b22;
    --text-muted: #5a7a67;
    --border: #d2e8da;
    --gold:#dab94e;
    --orange: #e8a030;
    --red: #eb0000;
    --black: #000;
    --grey: #f5f5f5;
    --oranssi: #252525;
    --turquoise: #1a6650;
    --purple: #36caa5;
    --purple-v2: #36caa531;
    --purple-v3: #36caa57e;
    --grey-v3:#313135;
    --grey-v4:#464649;
    --radius: 14px;
  }

.shine-button {
  position: relative;
  /*background: #0f5c5b; /* Base color */
  background-color: #f0f0f0;
  color: #333;
  padding: 12px 24px; 
  border: 1.6px solid var(--turquoise);
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  font-size: 15px; font-weight: 520; 
  min-width: 300px;
}

/* The shine layer */
.shine-button::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Use variables for center point */
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%), 
    rgba(186, 251, 253, 0.322) 20%, 
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.shine-button:hover { transform: translateY(-1px); box-shadow: 0 3px 5px rgba(100, 124, 110, 0.479); }
  .shine-button:hover::after { transform: translateX(100%); }

.shine-button:hover::before {
  opacity: 1;
}

/* Keep text on top */
.shine-button span {
  position: relative;
  z-index: 1;
}



/* The shine lists button */

.shine-button-list {
  position: relative;
  min-width: 500px;
  background: var(--green-push); /* Base color */
  color: var(--white);
  padding: 12px 24px;
  border: 2px solid var(--green-bright);
  border-radius: 15px;
  overflow: hidden;
  cursor: pointer;
  font-size: 15px; font-weight: 500; 
}

.shine-button-list::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Use variables for center point */
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%), 
    rgba(186, 253, 192, 0.322) 20%, 
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.shine-button-list:hover { transform: translateY(-1px); box-shadow: 0 8px 15px rgba(100, 124, 110, 0.479); }
  .shine-button-list:hover::after { transform: translateX(100%); }

.shine-button-list:hover::before {
  opacity: 1;
}

/* Keep text on top */
.shine-button-list span {
  position: relative;
  z-index: 1;
}

<!-- Second --->

.shine {
 position: relative;
} 

.shine-button-second {
  position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--green-back-topitop); color: var(--white);
    font-family: 'Nokora', sans-serif; font-weight: 600; font-size: 20px;
    padding: 15px 50px; border-radius: 20px;
    text-decoration: none; border: none; cursor: pointer;
    border: 1.8px solid #099986;
    box-shadow: 0 4px 15px #e2fffb27;
    transition: transform .2s, box-shadow .2s;
    position: relative; overflow: hidden;
}

/* The shine layer */
.shine-button-second::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Use variables for center point 
  background: radial-gradient(
    circle at var(--x, 20%) var(--y, 20%), 
    rgba(186, 253, 192, 0.384) 10%, 
    transparent 50%
  ); */
  background: radial-gradient(
    circle at var(--x, 20%) var(--y, 20%), 
    rgba(66, 194, 187, 0.384) 10%, 
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.shine-button-second:hover { transform: translateY(-1px); box-shadow: 0 8px 15px rgba(100, 124, 110, 0.479); }
  .shine-button-second:hover::after { transform: translateX(100%); }

.shine-button-second:hover::before {
  opacity: 1;
}

/* Keep text on top */
.shine-button-second span {
  position: relative;
  z-index: 1;
}

<!-- top --->

.shine {
 position: relative;
} 

.shine-button-top {
  position: relative;
    display: flex; align-items: center; gap: 10px;
    width: 200px;
    background: var(--purple-v2); color: var(--white);
    font-family: 'Nokora', sans-serif; font-weight: 700; font-size: 17px;
    padding: 10px 12px; border-radius: 20px;
    text-decoration: none; border: none; cursor: pointer;
    border: 1px solid var(--green-bright);
    box-shadow: 0 5px 24px rgba(58, 178, 106, 0.507);
    transition: transform .2s, box-shadow .2s;
    position: relative; overflow: hidden;
}

/* The shine layer */
.shine-button-top::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Use variables for center point */
  background: radial-gradient(
    circle at var(--x, 20%) var(--y, 20%), 
    rgba(186, 253, 192, 0.384) 10%, 
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.shine-button-top:hover { transform: translateY(-1px); box-shadow: 0 8px 15px rgba(100, 124, 110, 0.479); }
  .shine-button-top:hover::after { transform: translateX(100%); }

.shine-button-top:hover::before {
  opacity: 1;
}

/* Keep text on top */
.shine-button-top span {
  position: relative;
  z-index: 1;
}
 
  /* The button itself stays still on top of the rings */
  .cta-btn {
    position: relative;
    z-index: 2;
    display: inline-block;
    border: 1px solid rgba(63, 207, 142, 0.6);
    color: #f5f0e0;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: #1a1410;
    font-family: Arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
  }

  .shine-button-mobile {
      visibility: visible;
  position: relative;
  background: #0f5c5b; /* Base color */
  color: var(--grey);
  letter-spacing: 0.7px;
  padding: 2px 5px;
  border: 1.5px solid #1ebdba;
  border-radius: 28px;
  overflow: hidden;
  cursor: pointer;
  font-size: 18px; font-weight: 700; 
}

/* The shine layer */
.shine-button-mobile::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Use variables for center point */
  background: radial-gradient(
    circle at var(--x, 50%) var(--y, 50%), 
    rgba(186, 253, 192, 0.322) 20%, 
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s;
}

.shine-button-mobile:hover { transform: translateY(-1px); box-shadow: 0 8px 15px rgba(100, 124, 110, 0.479); }
  .shine-button-mobile:hover::after { transform: translateX(100%); }

.shine-button-mobile:hover::before {
  opacity: 1;
}

/* Keep text on top */
.shine-button-mobile span {
  position: relative;
  z-index: 1;
}

.float-login {
  position: fixed;
  left: 0px;
  bottom: 18px;
  z-index: 1000;
  padding: 16px 16px;
  font-size: 20px;
  border: none;
  border-radius:0 15px 15px 0;
  border: solid 1px #1ebdba;
  background: #0f5c5b;
  color: var(--grey);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.float-login:hover{
  background-color: #1ebdba;
}

.back-to-top {
  position: fixed;
  right: 25px;
  bottom: 25px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0f5c5b;
  text-decoration: none;
}

  .back-to-top:hover {
    background: #1ebdba;
  }


@media (min-width: 1023px) {
  .shine-button-mobile{
    visibility: hidden;
  }
  .float-login{
    visibility: hidden ;
  }
}

 /* ── Responsive ── */
    @media (max-width: 1023px) {
      .float-login{
        visibility: visible;
      }
      .shine-button{
        width: 100%;
        min-height: 60px;
        border-radius: 28px;
      }
      .hero-one{
        width: fit-content;
        justify-content: center;
      }
      .shine-button-mobile{
        visibility: visible;
        margin-top: 40px;
        padding: 20px 40px;
        text-align: center;
        justify-content: center;
      }
      .features{
        margin-top: -100px;
      }
    @media (prefers-reduced-motion: reduce) {
      * { animation: none !important; transition: none !important; }
    
    }
  }