* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --sky-blue-light: #7BCDEF;
  --true-cobalt: #0A2F82;
  --bright-ocean: #3C8ACB;
  --sapphire: #1750A9;
  --light-cyan: #CBF1FA;
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: #f0faff;
  color: var(--true-cobalt);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding-top: 28vh;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Waves — pinned to bottom of viewport */
.wave {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.wave svg {
  display: block;
  width: 200%;
  height: 100%;
}

.wave--back {
  height: 50vh;
}

.wave--back svg {
  animation: scroll-wave 12s linear infinite;
}

.wave--mid {
  height: 45vh;
}

.wave--mid svg {
  animation: scroll-wave 9s linear infinite;
}

.wave--front {
  height: 40vh;
}

.wave--front svg {
  animation: scroll-wave 15s linear infinite;
}

@keyframes scroll-wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  body { padding-top: 12vh; }
  .wave--back { height: 35vh; }
  .wave--mid { height: 30vh; }
  .wave--front { height: 25vh; }
}

main {
  text-align: center;
  padding: 2rem;
  position: relative;
  z-index: 1;
}

.logo {
  width: 120px;
  margin: 0 auto 2.5rem;
}

h1 {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--true-cobalt);
  margin-bottom: 1rem;
}

p {
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bright-ocean);
}