/* Button Component with Glow Effect */
.w-button-wrapper {
  display: inline-block;
  position: relative;
  border-radius: 50px;
  overflow: visible;
  filter: drop-shadow(0 0 10px rgba(0, 174, 224, 0.7));
  transition: filter 0.3s ease;
  margin-left: 1rem;
}

.w-button-wrapper:hover {
  filter: drop-shadow(0 0 25px rgba(0, 174, 224, 0.9));
}

:root {
  /* Base */
  --color--light--rgb: 255, 255, 255;
  --color--dark--rgb: 0, 0, 50;

  /* Default */
  --color: #fff;
  --color--accent: #4CBB17; /* Risk.Surf green */
  --color--accent-dark: #2e8b10; /* Darker green for hover/active states */
  --color--accent-light: #ff0000; /* Risk.Surf red (used in gradients/glow) */
  --color--highlight: #e1967d;
  --color--significant: #af4b7d;
  --color--background: #323264;

  /* Transition */
  --transition--duration: 0.3s;
  --transition--timing-function: cubic-bezier(0.25, 0.25, 0.5, 1);

  /* Button */
  --button--color: var(--color);
  --button--color--active: var(--color);
  --button--background-color: var(--color--accent);
  --button--background-color--active: #0088b3; /* Darker blue for active state */
  --button--border-radius: 50px; /* More rounded corners */

  /* Button - Shadow */
  --button--shadow--size: 0.75em;
  --button--shadow--color: rgba(0, 0, 0, 0.2);

  /* Button - Border */
  --button--border--mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  --button--border--width: 1px;
  --button--border--color--1: rgba(255, 255, 255, 20%);
  --button--border--color--2: transparent;

  /* Button - Glow */
  --button--glow--inset: 0.5em;
  --button--glow--opacity: 1;
  --button--glow--angle: -30deg;
  --button--glow--duration: 8s;
  --button--glow--delay: 0s;
  --button--glow--color--01: #ff0000;
  --button--glow--color--02: #4CBB17;
  --button--glow--blur: 12px;
  --button--glow--opacity: 0.9;
  --button--glow--spread: 10px;
}

/* Navigation Button Specific Styles */
.w-button--nav {
  padding: 0.6rem 1.5rem;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Button Base */
.w-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 2.5rem;
  z-index: 1;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  appearance: none;
  user-select: none;
  color: var(--button--color);
  background-color: var(--button--background-color);
  background: linear-gradient(135deg, #ff0000 0%, #4CBB17 100%);
  border: none;
  border-radius: var(--button--border-radius);
  box-shadow: 0 0.2rem 0.5rem var(--button--shadow--color);
  outline: 2px solid transparent;
  outline-offset: 4px;
  cursor: pointer;
  transition: all var(--transition--duration) var(--transition--timing-function);
  overflow: hidden;
}

/* Button Hover/Focus States */
.w-button:is(:hover, :focus) {
  --button--glow--opacity: 1;
  --button--glow--blur: 15px;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(76, 187, 23, 0.25);
  color: var(--button--color--active);
  background: linear-gradient(135deg, #ff0000 0%, #4CBB17 100%);
}

.w-button-wrapper:hover {
  filter: drop-shadow(0 0 25px rgba(0, 174, 224, 0.6));
}

/* Button Active State */
.w-button:active {
  --button--shadow--size: 0.5em;
  transform: translateY(1px);
  box-shadow: 0 0.1rem 0.3rem var(--button--shadow--color);
}

/* Focus Visible */
.w-button:focus-visible {
  outline: 2px solid #4CBB17;
  outline-offset: 2px;
}

/* Glow Effect */
.w-button__glow {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    45deg,
    var(--button--glow--color--01),
    var(--button--glow--color--02),
    var(--button--glow--color--01)
  );
  background-size: 200% 200%;
  z-index: -1;
  opacity: var(--button--glow--opacity);
  filter: blur(var(--button--glow--blur));
  animation: glowMove 4s linear infinite;
  transition: all 0.3s ease;
}

.w-button__glow::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translate3d(-100%, 0, 0);
  background-image: linear-gradient(
    var(--button--glow--angle, -30deg),
    transparent 0,
    transparent 25%,
    var(--button--glow--color--01) 37.5%,
    var(--button--glow--color--02) 62.5%,
    transparent 75%,
    transparent 100%
  );
  background-size: 100% 120%;
  animation: buttonGlowMove var(--button--glow--duration, 8s) steps(240) infinite;
  animation-delay: var(--button--glow--delay, 0s);
}

/* Back Glow */
.w-button__glow--back {
  filter: blur(20px) opacity(0.7);
  opacity: 0.7;
  z-index: -2;
  animation-delay: 0.5s;
  animation-duration: 6s;
}

/* Button Content */
.w-button__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Animation */
@keyframes glowMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .header-actions {
    width: 100%;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .w-button--nav {
    width: 100%;
    justify-content: center;
    padding: 0.8rem 2rem;
  }
}

@media (max-width: 768px) {
  .w-button {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }
  
  .w-button--nav {
    font-size: 1rem;
  }
}

/* Hero Actions Specific Styling */
.hero-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Ensure button takes full width on mobile */
@media (max-width: 480px) {
  .w-button {
    width: 100%;
    justify-content: center;
  }
}