* {
  box-sizing: border-box;
}

:root {
  --blue: #0866df;
  --blue-dark: #092b61;
  --blue-deep: #064fb5;
  --text: #18345f;
  --muted: #687b9b;
  --white: #ffffff;
}

html, body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: "Inter", Arial, sans-serif;
  color: var(--text);
  background: var(--white);
}

.page {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: clamp(34px, 7vh, 76px) 24px 42px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(231, 241, 255, .42), transparent 48%),
    #fff;
}

.brand {
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: clamp(0px, 2vh, 22px);
}

.brand-mark {
  width: clamp(54px, 7vw, 76px);
  height: auto;
  color: var(--blue);
  flex: 0 0 auto;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-name {
  color: var(--blue-dark);
  font-size: clamp(38px, 5vw, 54px);
  font-weight: 600;
  letter-spacing: -3px;
  line-height: 1;
}

.brand-tagline {
  color: #7586a5;
  font-size: clamp(10px, 1.25vw, 13px);
  font-weight: 500;
  letter-spacing: .05px;
}

.announcement {
  z-index: 2;
  width: min(100%, 850px);
  margin: clamp(66px, 10vh, 108px) auto 0;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: var(--blue-dark);
  font-size: clamp(54px, 9vw, 108px);
  font-weight: 800;
  letter-spacing: -5px;
  line-height: .98;
}

h1 span {
  color: var(--blue);
}

.accent-line {
  width: 92px;
  height: 6px;
  margin: 28px auto 24px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--blue-deep), #2990ff);
}

.announcement p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(16px, 2.1vw, 23px);
  font-weight: 400;
  line-height: 1.65;
}

.footer {
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 70px;
  color: rgba(255, 255, 255, .88);
  font-size: 11px;
  letter-spacing: .3px;
}

.footer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9bcaff;
}

.wave {
  position: absolute;
  z-index: 1;
  right: -8%;
  bottom: -1px;
  left: -8%;
  height: clamp(115px, 22vh, 210px);
  pointer-events: none;
}

.wave-light {
  bottom: 34px;
  height: clamp(130px, 23vh, 225px);
  border-radius: 48% 52% 0 0 / 34% 40% 0 0;
  background: #e5f1ff;
  transform: rotate(-3deg) translateY(18px);
}

.wave-dark {
  height: clamp(100px, 18vh, 170px);
  border-radius: 48% 52% 0 0 / 38% 44% 0 0;
  background: linear-gradient(110deg, #0752bd 0%, #0873ed 54%, #2c91fa 100%);
  transform: rotate(2.5deg) translateY(28px);
}

.wave-mid {
  height: clamp(75px, 14vh, 135px);
  border-radius: 50% 50% 0 0 / 48% 42% 0 0;
  background: linear-gradient(100deg, #075fcf, #3295f5);
  opacity: .72;
  transform: rotate(-5deg) translateY(58px);
}

@media (max-width: 600px) {
  .page {
    padding: 42px 20px 30px;
  }

  .brand {
    gap: 10px;
  }

  .brand-name {
    letter-spacing: -2px;
  }

  .brand-tagline {
    max-width: 210px;
    line-height: 1.35;
  }

  .announcement {
    margin-top: clamp(78px, 13vh, 120px);
  }

  h1 {
    letter-spacing: -3px;
  }

  .desktop-break {
    display: none;
  }

  .announcement p {
    max-width: 360px;
    margin: 0 auto;
  }

  .footer {
    padding-top: 60px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-mark {
    animation: arrive .8s ease-out both;
  }

  .announcement {
    animation: arrive .9s .08s ease-out both;
  }

  @keyframes arrive {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}