:root {
  --ink: #f7f8ff;
  --muted: rgba(235, 238, 255, 0.62);
}

* {
  box-sizing: border-box;
}

html {
  background: #02030a;
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: #02030a;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

.site-shell {
  position: relative;
  display: grid;
  min-height: 100svh;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 45%, rgba(85, 39, 223, 0.42), transparent 34%),
    radial-gradient(circle at 78% 58%, rgba(16, 95, 215, 0.35), transparent 37%),
    #02030a;
}

.shader-canvas,
.ambient-glow,
.grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.shader-canvas { z-index: -4; }

.ambient-glow {
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(1, 2, 8, 0.25) 0%, transparent 26%, transparent 73%, rgba(1, 2, 8, 0.62) 100%),
    radial-gradient(ellipse at center, transparent 32%, rgba(0, 0, 0, 0.42) 100%);
}

.grain {
  z-index: -2;
  opacity: 0.17;
  background-image:
    repeating-radial-gradient(circle at 11% 31%, transparent 0, rgba(255, 255, 255, 0.16) 0.45px, transparent 0.8px, transparent 3px),
    repeating-radial-gradient(circle at 73% 67%, transparent 0, rgba(255, 255, 255, 0.1) 0.4px, transparent 0.75px, transparent 3.5px);
  background-size: 7px 7px, 9px 9px;
  mix-blend-mode: soft-light;
}

.site-header,
.site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(1.35rem, 4vw, 4.5rem);
}

.site-header { padding-top: clamp(1.4rem, 3vw, 2.5rem); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  text-decoration: none;
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.035em;
}

.brand-mark {
  position: relative;
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  transform: rotate(-8deg);
}

.brand-mark i {
  position: absolute;
  width: 0.28rem;
  border-radius: 999px;
  background: currentColor;
}

.brand-mark i:nth-child(1) {
  height: 1.2rem;
  transform: translateX(-0.42rem) rotate(18deg);
}

.brand-mark i:nth-child(2) { height: 0.82rem; }

.brand-mark i:nth-child(3) {
  height: 1.05rem;
  transform: translateX(0.42rem) rotate(-18deg);
}

.suite-label {
  margin: 0;
  color: rgba(246, 247, 255, 0.68);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 10vh, 8rem) 1.35rem;
  text-align: center;
}

.hero h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(3.6rem, 12.2vw, 11.5rem);
  font-weight: 530;
  letter-spacing: -0.085em;
  line-height: 0.82;
  text-shadow: 0 0.04em 0.2em rgba(65, 80, 255, 0.08), 0 0.32em 1em rgba(0, 0, 0, 0.14);
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(4.2rem, 1fr));
  gap: clamp(0.8rem, 3vw, 2.5rem);
  margin-top: clamp(2rem, 5vh, 3.4rem);
  padding: 1rem clamp(0.4rem, 1.5vw, 1rem);
  border-block: 1px solid rgba(255, 255, 255, 0.14);
}

.countdown-unit {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.countdown-value {
  color: #fff;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: clamp(1.55rem, 3.2vw, 2.65rem);
  font-weight: 480;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.055em;
  line-height: 1;
  text-shadow: 0 0 1.2rem rgba(99, 150, 255, 0.25);
}

.countdown-label {
  color: rgba(235, 238, 255, 0.48);
  font-size: clamp(0.52rem, 0.8vw, 0.62rem);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-copy {
  max-width: 34rem;
  margin: clamp(1.8rem, 4.5vh, 3rem) 0 0;
  color: var(--muted);
  font-size: clamp(0.94rem, 1.45vw, 1.14rem);
  font-weight: 420;
  letter-spacing: -0.015em;
  line-height: 1.55;
}

.site-footer {
  padding-bottom: clamp(1.4rem, 3vw, 2.5rem);
  color: rgba(235, 238, 255, 0.48);
  font-size: 0.68rem;
  font-weight: 560;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer p { margin: 0; }

.footer-note {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.footer-note span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
}

@media (max-width: 640px) {
  .hero {
    align-items: flex-start;
    justify-content: flex-end;
    padding-bottom: 15vh;
    text-align: left;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(3.7rem, 19vw, 6.5rem);
    line-height: 0.88;
    overflow-wrap: anywhere;
  }

  .hero-copy { max-width: 18rem; }

  .countdown {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    padding-inline: 0;
  }

  .site-footer { align-items: flex-end; }

  .footer-note {
    max-width: 10rem;
    justify-content: flex-end;
    text-align: right;
    line-height: 1.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (prefers-contrast: more) {
  .hero-copy,
  .site-footer,
  .suite-label { color: #fff; }
}