:root {
  color-scheme: dark;
  --background: #050b16;
  --surface: #0b1425;
  --surface-soft: rgba(11, 20, 37, 0.72);
  --foreground: #f5f7ff;
  --muted: #9eabc3;
  --border: rgba(255, 255, 255, 0.13);
  --cyan: #25dfdf;
  --purple: #825eff;
  --pink: #f25e9d;
  --shadow: 0 34px 100px rgba(0, 0, 0, 0.42);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(37, 223, 223, 0.13), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(130, 94, 255, 0.16), transparent 32rem),
    radial-gradient(circle at 54% 92%, rgba(242, 94, 157, 0.12), transparent 34rem),
    var(--background);
  color: var(--foreground);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, black, transparent 84%);
  content: "";
}

.maintenance-shell {
  display: grid;
  width: min(1440px, calc(100% - 48px));
  min-height: 100vh;
  margin: 0 auto;
  grid-template-rows: auto 1fr auto;
}

.maintenance-header,
.maintenance-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.maintenance-header { min-height: 96px; }

.maintenance-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 950;
  letter-spacing: -.045em;
  text-decoration: none;
}

.maintenance-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(37, 223, 223, 0.18));
}

.maintenance-brand span { display: grid; gap: 2px; }

.maintenance-brand small {
  color: var(--muted);
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.maintenance-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 13px;
  background: rgba(8, 16, 31, .66);
  color: #d9e6f7;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(16px);
}

.maintenance-chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(37, 223, 223, .85);
}

.maintenance-main {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
  align-items: center;
  gap: clamp(54px, 7vw, 120px);
  padding: 52px 0 74px;
}

.maintenance-copy { position: relative; z-index: 2; }

.maintenance-eyebrow {
  margin: 0 0 18px;
  color: #b7f6ff;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .18em;
}

.maintenance-copy h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.8rem, 9vw, 9.2rem);
  font-weight: 500;
  letter-spacing: -.085em;
  line-height: .82;
}

.maintenance-lead {
  max-width: 660px;
  margin: 31px 0 0;
  color: #c2cce0;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.72;
}

.maintenance-status {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 31px;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 17px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.4;
  backdrop-filter: blur(18px);
}

.maintenance-status strong { color: var(--foreground); }

.maintenance-pulse {
  position: relative;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 7px rgba(242, 94, 157, .12), 0 0 26px rgba(242, 94, 157, .55);
}

.maintenance-scene {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 42px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), transparent 34%),
    radial-gradient(circle at 50% 49%, rgba(37,223,223,.12), transparent 15rem),
    #07101f;
  box-shadow: var(--shadow);
  isolation: isolate;
}

.maintenance-scene::before,
.maintenance-scene::after {
  position: absolute;
  z-index: -1;
  width: 320px;
  height: 92px;
  border-radius: 999px;
  content: "";
  filter: blur(1px);
  opacity: .72;
}

.maintenance-scene::before {
  top: 15%;
  left: -82px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  transform: rotate(34deg);
}

.maintenance-scene::after {
  right: -96px;
  bottom: 18%;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  transform: rotate(-42deg);
}

.maintenance-orbit {
  position: absolute;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
}

.orbit-one { inset: 14% 11% 18% 13%; transform: rotate(18deg); }
.orbit-two { inset: 24% -12% 10% 29%; transform: rotate(-29deg); }
.orbit-three { inset: 6% 33% 39% -18%; transform: rotate(45deg); }

.maintenance-core {
  position: absolute;
  top: 47%;
  left: 50%;
  display: grid;
  width: 158px;
  height: 158px;
  place-items: center;
  transform: translate(-50%, -50%);
}

.maintenance-core-glow {
  position: absolute;
  inset: 8px;
  border-radius: 40px;
  background: linear-gradient(145deg, rgba(37,223,223,.34), rgba(130,94,255,.34) 54%, rgba(242,94,157,.32));
  box-shadow: 0 26px 80px rgba(67, 94, 255, .34);
  transform: rotate(11deg);
}

.maintenance-core img {
  position: relative;
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.26));
}

.maintenance-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 13px;
  max-width: 260px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  padding: 13px 15px;
  background: rgba(8, 16, 31, .79);
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  backdrop-filter: blur(18px);
}

.maintenance-card img { width: 45px; height: 45px; object-fit: contain; }

.maintenance-card > span {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  font-size: 1.2rem;
  font-weight: 900;
}

.maintenance-card div { display: grid; gap: 4px; }

.maintenance-card small {
  color: #9fb2ce;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .11em;
}

.maintenance-card strong {
  font-size: .76rem;
  line-height: 1.35;
}

.card-map { right: 6%; bottom: 8%; }
.card-build { top: 10%; left: 7%; }

.maintenance-footer {
  min-height: 74px;
  border-top: 1px solid rgba(255,255,255,.09);
  color: #7f8ca3;
  font-size: .67rem;
  font-weight: 700;
}

@media (max-width: 980px) {
  .maintenance-main {
    grid-template-columns: 1fr;
    gap: 42px;
    padding-top: 34px;
  }

  .maintenance-copy {
    max-width: 760px;
    padding-top: 36px;
  }

  .maintenance-scene { min-height: 520px; }
}

@media (max-width: 640px) {
  .maintenance-shell { width: min(100% - 28px, 1440px); }

  .maintenance-header { min-height: 82px; }

  .maintenance-chip {
    padding: 8px 10px;
    font-size: .57rem;
    letter-spacing: .05em;
  }

  .maintenance-brand small { display: none; }

  .maintenance-main {
    gap: 30px;
    padding: 38px 0 46px;
  }

  .maintenance-copy h1 { font-size: clamp(4rem, 22vw, 6.2rem); }

  .maintenance-lead {
    margin-top: 24px;
    font-size: .96rem;
  }

  .maintenance-status {
    width: 100%;
    align-items: flex-start;
  }

  .maintenance-scene {
    min-height: 430px;
    border-radius: 28px;
  }

  .maintenance-core {
    top: 46%;
    width: 132px;
    height: 132px;
  }

  .maintenance-core img { width: 92px; height: 92px; }

  .maintenance-card { max-width: 210px; padding: 11px 12px; }

  .maintenance-card strong { font-size: .68rem; }
  .card-map { right: 4%; bottom: 5%; }
  .card-build { top: 6%; left: 4%; }

  .maintenance-footer {
    min-height: 66px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .maintenance-pulse { animation: maintenance-pulse 2.2s ease-in-out infinite; }
  .maintenance-core { animation: maintenance-float 5.5s ease-in-out infinite; }
}

@keyframes maintenance-pulse {
  0%, 100% { transform: scale(.9); opacity: .75; }
  50% { transform: scale(1.08); opacity: 1; }
}

@keyframes maintenance-float {
  0%, 100% { transform: translate(-50%, -50%) translateY(-4px); }
  50% { transform: translate(-50%, -50%) translateY(8px); }
}