:root {
  color-scheme: dark;

  --black: #000000;
  --background: #050505;
  --panel: rgba(8, 8, 8, 0.88);

  --white: #f4f3ef;
  --muted: #b5b5b2;
  --dimmed: #70706d;

  --yellow: #fff200;
  --gold: #ffc400;
  --orange: #ff7a00;
  --deep-orange: #ff4d00;

  --border: rgba(255, 242, 0, 0.48);
  --border-muted: rgba(255, 255, 255, 0.24);

  --font-display:
    "Agency FB",
    "Arial Narrow",
    "Roboto Condensed",
    "DIN Condensed",
    sans-serif;

  --font-body:
    Inter,
    Arial,
    Helvetica,
    sans-serif;
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;

  color: var(--white);
  font-family: var(--font-body);

  background:
    radial-gradient(
      circle at 18% 45%,
      rgba(255, 122, 0, 0.10),
      transparent 27rem
    ),
    radial-gradient(
      circle at 74% 25%,
      rgba(255, 242, 0, 0.045),
      transparent 30rem
    ),
    linear-gradient(
      145deg,
      #030303 0%,
      #080806 48%,
      #020202 100%
    );
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;

  background-image:
    radial-gradient(
      circle at 10% 20%,
      rgba(255, 255, 255, 0.8) 0 1px,
      transparent 1.4px
    ),
    radial-gradient(
      circle at 70% 35%,
      rgba(255, 242, 0, 0.65) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 35% 80%,
      rgba(255, 255, 255, 0.65) 0 1px,
      transparent 1.4px
    );

  background-size:
    170px 170px,
    260px 260px,
    210px 210px;
}

.space-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    linear-gradient(
      115deg,
      transparent 0 66%,
      rgba(255, 122, 0, 0.025) 66% 66.2%,
      transparent 66.2%
    );
}

.page-shell {
  position: relative;
  z-index: 1;

  flex: 1;
  display: grid;
  place-items: center;

  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 54px 0 70px;
}

.hero {
  width: 100%;

  display: grid;
  grid-template-columns:
    minmax(280px, 0.84fr)
    minmax(420px, 1.16fr);

  align-items: center;
  gap: clamp(44px, 7vw, 110px);
}

.logo-column {
  display: grid;
  place-items: center;
}

.logo-glow {
  position: relative;
  isolation: isolate;

  display: grid;
  place-items: center;

  width: min(500px, 100%);
  aspect-ratio: 1;
}

.logo-glow::before {
  content: "";
  position: absolute;
  z-index: -1;

  width: 82%;
  height: 82%;
  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 196, 0, 0.20),
      rgba(255, 122, 0, 0.08) 48%,
      transparent 72%
    );

  filter: blur(32px);
}

.hero-logo {
  display: block;
  width: 100%;
  height: auto;

  filter:
    drop-shadow(0 0 18px rgba(255, 242, 0, 0.18))
    drop-shadow(0 18px 38px rgba(0, 0, 0, 0.85));
}

.content-column {
  max-width: 720px;
}

.eyebrow {
  margin: 0 0 20px;

  color: var(--orange);
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 1.4vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.21em;
  text-transform: uppercase;
}

h1 {
  margin: 0;

  color: var(--white);
  font-family: var(--font-display);
  font-size: clamp(3.75rem, 8vw, 7rem);
  font-stretch: condensed;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.025em;
  text-transform: uppercase;

  text-shadow:
    0 4px 0 rgba(255, 255, 255, 0.04),
    0 16px 35px rgba(0, 0, 0, 0.85);
}

.description {
  max-width: 660px;
  margin: 34px 0 0;

  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.17rem);
  line-height: 1.75;
}

.actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.button {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 15px 16px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border);
  border-radius: 0;

  color: var(--white);
  background: rgba(0, 0, 0, 0.62);

  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;

  clip-path:
    polygon(
      11px 0,
      calc(100% - 11px) 0,
      100% 11px,
      100% calc(100% - 11px),
      calc(100% - 11px) 100%,
      11px 100%,
      0 calc(100% - 11px),
      0 11px
    );

  transition:
    transform 160ms ease,
    filter 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.button::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 6px;

  width: 24px;
  height: 2px;

  background: var(--yellow);
  opacity: 0.62;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-3px);
  filter: brightness(1.12);
  outline: none;
}

.button.primary {
  border-color: transparent;
  color: #090700;

  background:
    linear-gradient(
      110deg,
      var(--yellow) 0%,
      var(--gold) 45%,
      var(--orange) 76%,
      var(--deep-orange) 100%
    );

  box-shadow:
    0 11px 32px rgba(255, 122, 0, 0.22);
}

.button.primary::after {
  background: #181000;
}

.button.secondary:hover,
.button.secondary:focus-visible {
  color: var(--yellow);
  background: rgba(255, 196, 0, 0.055);
}

.construction-status {
  width: min(470px, 100%);
  margin-top: 36px;
  padding: 17px 20px;

  display: flex;
  align-items: center;
  gap: 14px;

  border-top: 1px solid rgba(255, 242, 0, 0.52);
  border-right: 1px solid var(--border-muted);
  border-bottom: 1px solid var(--border-muted);
  border-left: 3px solid var(--orange);

  background:
    linear-gradient(
      90deg,
      rgba(255, 122, 0, 0.08),
      rgba(10, 10, 10, 0.72) 38%
    );

  clip-path:
    polygon(
      0 0,
      calc(100% - 14px) 0,
      100% 14px,
      100% 100%,
      0 100%
    );
}

.status-light {
  flex: 0 0 auto;

  width: 11px;
  height: 11px;
  border-radius: 50%;

  background: var(--yellow);

  box-shadow:
    0 0 0 4px rgba(255, 242, 0, 0.08),
    0 0 20px rgba(255, 196, 0, 0.85);
}

.construction-status strong,
.construction-status span {
  display: block;
}

.construction-status strong {
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.construction-status span {
  margin-top: 4px;
  color: var(--dimmed);
  font-size: 0.87rem;
}

footer {
  position: relative;
  z-index: 2;

  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 22px 0 28px;

  border-top: 1px solid rgba(255, 196, 0, 0.18);

  color: var(--dimmed);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

footer span:first-child {
  color: var(--white);
}

.footer-separator {
  margin: 0 10px;
  color: var(--orange);
}

@media (max-width: 1050px) {
  .actions {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

@media (max-width: 900px) {
  .page-shell {
    padding-top: 32px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }

  .logo-glow {
    width: min(350px, 82vw);
  }

  .content-column {
    margin: 0 auto;
  }

  .description {
    margin-right: auto;
    margin-left: auto;
  }

  .construction-status {
    margin-right: auto;
    margin-left: auto;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .page-shell,
  footer {
    width: min(100% - 28px, 1240px);
  }

  .page-shell {
    padding-top: 18px;
    padding-bottom: 46px;
  }

  .logo-glow {
    width: min(270px, 78vw);
  }

  h1 {
    font-size: clamp(3.1rem, 18vw, 4.8rem);
  }

  .description {
    margin-top: 25px;
    font-size: 0.98rem;
  }

  .actions {
    grid-template-columns: 1fr;
  }

  footer {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .footer-separator {
    display: none;
  }
}