* {
  box-sizing: border-box;
}

:root {
  --bg: #020a12;
  --panel: rgba(7, 29, 48, 0.72);
  --line: rgba(118, 211, 255, 0.18);
  --cyan: #67d9ff;
  --blue: #318bff;
  --white: #f2fbff;
  --muted: #8aa5b7;
  --status: #52e2a7;
  --status-rgb: 82, 226, 167;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--white);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 72% 42%, rgba(20, 113, 180, 0.16), transparent 34%),
    linear-gradient(125deg, #020810 0%, #051725 50%, #020a12 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

.page-noise {
  position: fixed;
  inset: 0;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

.ocean-glow {
  position: fixed;
  border-radius: 999px;
  filter: blur(90px);
  pointer-events: none;
}

.ocean-glow--one {
  width: 420px;
  height: 420px;
  right: -150px;
  top: 15%;
  background: rgba(27, 132, 255, .18);
}

.ocean-glow--two {
  width: 300px;
  height: 300px;
  left: -150px;
  bottom: -50px;
  background: rgba(32, 227, 255, .09);
}

.topbar {
  width: min(1500px, calc(100% - 72px));
  margin: 0 auto;
  height: 118px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 10;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -3px;
  color: #00111c;
  background: linear-gradient(145deg, #85e8ff, #2d8cff);
  box-shadow: 0 0 30px rgba(63, 180, 255, .25);
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-copy strong {
  font-size: 19px;
  letter-spacing: .16em;
}

.brand-copy small {
  margin-top: 7px;
  color: #6f91a7;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .19em;
}

.server-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #b8d0dc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  background: rgba(5, 21, 34, .58);
  backdrop-filter: blur(12px);
}

.server-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status);
  box-shadow: 0 0 13px rgba(var(--status-rgb), .75);
  animation: pulse 2.2s infinite;
}

.hero {
  width: min(1500px, calc(100% - 72px));
  min-height: calc(100vh - 205px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  align-items: center;
  gap: 7vw;
  position: relative;
  z-index: 2;
  padding: 35px 0 95px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #77d9ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .28em;
}

.eyebrow-line {
  width: 34px;
  height: 1px;
  background: #67d9ff;
  box-shadow: 0 0 12px #67d9ff;
}

h1 {
  max-width: 920px;
  margin: 25px 0 25px;
  font-size: clamp(58px, 6.35vw, 112px);
  line-height: .88;
  letter-spacing: -.07em;
  font-weight: 900;
}

h1 span {
  display: block;
  color: transparent;
  -webkit-text-stroke: 1px rgba(147, 221, 255, .82);
  text-shadow: 0 0 40px rgba(45, 156, 255, .12);
}

.lead {
  max-width: 670px;
  color: #8ea9b9;
  font-size: clamp(15px, 1.08vw, 18px);
  line-height: 1.75;
}

.lead strong {
  color: #d8f4ff;
  font-weight: 700;
}

.countdown {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 44px 0 38px;
}

.time-card {
  width: clamp(105px, 8vw, 132px);
  aspect-ratio: 1 / .86;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(107, 204, 255, .16);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(13, 52, 78, .74), rgba(4, 18, 30, .74));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 60px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
}

.time-value {
  font-size: clamp(38px, 3.45vw, 58px);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

.time-label {
  margin-top: 12px;
  color: #66869a;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .19em;
}

.separator {
  margin-top: -20px;
  color: #3c7593;
  font-size: 32px;
  font-weight: 700;
}

.opening-status {
  max-width: 690px;
  display: flex;
  align-items: center;
  gap: 19px;
  padding: 19px 22px;
  border: 1px solid rgba(var(--status-rgb), .19);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(var(--status-rgb), .08), rgba(4, 17, 28, .22));
  transition: .35s ease;
}

.status-icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--status-rgb), .35);
  border-radius: 14px;
  color: var(--status);
  font-size: 20px;
  font-weight: 900;
  background: rgba(var(--status-rgb), .08);
  box-shadow: 0 0 28px rgba(var(--status-rgb), .08);
}

.status-kicker {
  display: block;
  margin-bottom: 5px;
  color: var(--status);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .21em;
}

.opening-status h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
}

.opening-status p {
  margin: 5px 0 0;
  color: #819bad;
  font-size: 12px;
  line-height: 1.5;
}

.visual-card {
  width: min(35vw, 520px);
  aspect-ratio: 1;
  justify-self: center;
  position: relative;
  display: grid;
  place-items: center;
}

.visual-card::before {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 196, 255, .18), rgba(31, 102, 176, .06) 45%, transparent 70%);
  filter: blur(24px);
}

.planet-rings {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(101, 210, 255, .15);
  border-radius: 50%;
  transform: rotate(-17deg) scaleY(.55);
  box-shadow:
    0 0 0 34px rgba(79, 181, 255, .025),
    0 0 0 72px rgba(79, 181, 255, .018);
  animation: ringDrift 10s ease-in-out infinite alternate;
}

.planet-rings::before,
.planet-rings::after {
  content: "";
  position: absolute;
  inset: 15%;
  border: 1px solid rgba(101, 210, 255, .11);
  border-radius: 50%;
}

.logo-core {
  width: 47%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid rgba(133, 225, 255, .25);
  border-radius: 39% 61% 55% 45% / 45% 39% 61% 55%;
  background:
    radial-gradient(circle at 33% 27%, rgba(181, 244, 255, .9), transparent 11%),
    linear-gradient(145deg, #40d4ff 0%, #1377db 46%, #041c42 100%);
  box-shadow:
    inset -26px -24px 60px rgba(0, 15, 50, .56),
    inset 10px 10px 25px rgba(179, 244, 255, .26),
    0 0 75px rgba(41, 160, 255, .26);
  transform: rotate(-8deg);
  animation: float 5s ease-in-out infinite;
}

.logo-wave {
  color: rgba(235, 252, 255, .94);
  font-size: clamp(78px, 8.5vw, 145px);
  font-weight: 900;
  letter-spacing: -.13em;
  text-shadow: 0 8px 24px rgba(0, 30, 80, .25);
  transform: rotate(8deg) translateX(-4%);
}

.orbit-dot {
  position: absolute;
  border-radius: 50%;
  background: #8de8ff;
  box-shadow: 0 0 18px #54ccff;
}

.orbit-dot--one {
  width: 9px;
  height: 9px;
  left: 11%;
  top: 33%;
}

.orbit-dot--two {
  width: 5px;
  height: 5px;
  right: 14%;
  bottom: 28%;
}

.visual-caption {
  position: absolute;
  right: 3%;
  bottom: 7%;
  padding-left: 17px;
  border-left: 1px solid rgba(104, 211, 255, .5);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.visual-caption span {
  color: #5c7e93;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .2em;
}

.visual-caption strong {
  font-size: 15px;
  letter-spacing: .16em;
}

footer {
  width: min(1500px, calc(100% - 72px));
  height: 87px;
  margin: -87px auto 0;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 3;
  color: #496579;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .16em;
}

.footer-divider {
  width: 28px;
  height: 1px;
  background: #28485b;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.78); }
}

@keyframes float {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50% { transform: rotate(-5deg) translateY(-14px); }
}

@keyframes ringDrift {
  from { transform: rotate(-17deg) scaleY(.55); }
  to { transform: rotate(-10deg) scaleY(.59); }
}

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 60px;
    padding-bottom: 150px;
  }

  .visual-card {
    position: absolute;
    width: 520px;
    right: -220px;
    top: 40px;
    opacity: .32;
    z-index: -1;
  }
}

@media (max-width: 720px) {
  .topbar,
  .hero,
  footer {
    width: min(100% - 34px, 1500px);
  }

  .topbar {
    height: 92px;
  }

  .brand-copy small {
    display: none;
  }

  .server-pill {
    max-width: 155px;
    font-size: 8px;
    text-align: right;
  }

  .hero {
    min-height: auto;
    padding-top: 46px;
    padding-bottom: 130px;
  }

  h1 {
    font-size: clamp(48px, 15vw, 76px);
  }

  .lead {
    font-size: 14px;
  }

  .countdown {
    gap: 6px;
    margin: 35px 0 30px;
  }

  .time-card {
    width: calc((100vw - 68px) / 4);
    max-width: 110px;
    border-radius: 13px;
  }

  .time-value {
    font-size: clamp(27px, 9vw, 42px);
  }

  .time-label {
    margin-top: 8px;
    font-size: 7px;
    letter-spacing: .11em;
  }

  .separator {
    display: none;
  }

  .opening-status {
    padding: 16px;
  }

  .opening-status p {
    font-size: 11px;
  }

  .visual-card {
    width: 380px;
    right: -210px;
    top: 90px;
  }

  footer {
    height: 80px;
    margin-top: -80px;
  }
}