body {
  color: #dae9fd;
  background: radial-gradient(circle at 10% 20%, #2a3b4d, transparent 60%), radial-gradient(circle at 80% 30%, #1d2b39, transparent 50%), radial-gradient(circle at 50% 70%, #1b1f21, transparent 40%), radial-gradient(circle at 30% 50%, #040e1a, transparent 70%), radial-gradient(circle at 70% 80%, #0a1126, transparent 60%);
  background-color: #131b26;
  padding-bottom: 10vh;
}

h3 {
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: .2rem;
  text-align: center;
  margin-top: 7rem;
  position: relative;
}

img {
  filter: hue-rotate(260deg);
  width: 100%;
  mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9) 60%, rgba(0, 0, 0, 0) 70%);
  -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0.9) 60%, rgba(0, 0, 0, 0) 70%);
    position: relative;
    z-index: 1;
}

.button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary {
  color: #FFF;
  background-color: #2b8faf;
  border-color: #33C3F0;
}

.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
  color: #eee;
}

.footer {
  margin-top: 10% ;
}

.parts {
  margin-bottom: 9rem;
}

.center {
  text-align: center;
}

.parts .row {
  display: flex;
  align-items: center; /* Vertically center content in the row */
}

.parts .one-half.column {
  display: flex;
  flex-direction: column; /* Maintains vertical layout of children */
  justify-content: center; /* Center content vertically within this column */
}

.parts .column img {
  max-width: 100%; /* Ensures the image scales properly */
  height: auto; /* Maintains aspect ratio */
}

.wip {
  opacity: 0.7;
}


.wip::after{
  content: "in-progress";
  position: absolute;
  top: 0%;
  right: 50px;
  transform: translateY(-50%) rotate(9deg);
  transform-origin: center;
  font-size: 12px;
  font-weight: bold;
  color: #e74c3c;
  white-space: nowrap;
  width: 20px;
  text-align: center;
}

.sine-wave {
  position: fixed;
  z-index: -1;
  top: 0%;
  width: 100%;
  height: 30vh;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 1' preserveAspectRatio='none'><path fill='%2399aaff' d='M 0 0 C .37 0, .63 1, 1 1 C 1.37 1, 1.63 0, 2 0 Z'/></svg>");
  opacity: 0.4; /* Optional for visual blending */
  background-size: 200% 100%;
  background-repeat: repeat-x;
  animation: wave 40s ease-in-out infinite, swell 13s ease-in-out infinite;

}

.wave-2 {
  background: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1" preserveAspectRatio="none"><path d="M 0 0 C .37 0, .63 1, 1 1 C 1.37 1, 1.63 0, 2 0 Z" fill="none" stroke="#7eb2dd" stroke-width="0.05"/></svg>");

  background-size: 200% 100%;
  opacity: 0.2; /* Optional for visual blending */
  animation: wave 55s ease-in-out infinite, swell 19s ease-in-out infinite;
  animation-delay: -5s, -3s; /* slight phase offset */
}

@keyframes wave {
  0%   { background-position:   0%  0; }
  20%  { background-position: -40%  2%; }
  50%  { background-position:-130%  0; }
  80%  { background-position:-200% -2%; }
  100% { background-position:-200%  0; } /* was -260% 0 */
}



@keyframes swell {
  0%, 100% {
    transform: translate3d(0, 0, 0) scaleY(1);
  }
  50% {
    transform: translate3d(0, -8px, 0) scaleY(1.06);
  }
}

/* Mobile adjustments */
@media (max-width: 549px) {
  
  /* Reduce top margins on mobile */
  h3 {
    margin-top: 3rem;
    font-size: 1.5rem;
  }
  
  /* Reduce section spacing */
  .parts {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  
  /* Reverse order: show images after text on mobile */
  .parts .row {
    display: flex;
    flex-direction: column;
  }
  
    /* Images always appear first on mobile */
  .parts .column:has(img) {
    order: 2;
  }

  /* Add spacing between stacked columns */
  .parts .column {
      display: flex;
  flex-direction: column;
  justify-content: center;
    margin-bottom: 2rem;
  }

  .parts .column img {
    width: 100%;
    max-width: 200px;
    margin: 0px auto;
  }
  
  /* Smaller wave height on mobile */
  .sine-wave {
    height: 20vh;
  }
  
  /* Adjust header margin for mobile */
  .header .footer {
    margin-top: 30% !important;
  }
}