@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&display=swap");

:root { --orange: #f34a1e; --white: #fffdfd; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #2f2f31; color: var(--white); font-family: "Outfit", Arial, sans-serif; }

.maintenance-page {
  position: relative; display: grid; min-height: 100vh; min-height: 100dvh;
  place-items: center; overflow: hidden; padding: clamp(16px, 4vw, 48px);
  background: radial-gradient(circle at 85% 10%, rgba(255,255,255,.08), transparent 22%),
    linear-gradient(135deg, #28282a 0 19%, #343436 19% 100%);
}

.maintenance-card {
  isolation: isolate; position: relative; display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(260px, .72fr); align-items: center;
  width: min(1480px, 100%); height: min(820px, calc(100dvh - clamp(32px, 8vw, 96px)));
  min-height: 560px; overflow: hidden; border: 2px solid rgba(255,255,255,.8);
  border-radius: clamp(26px, 3vw, 42px);
  background: linear-gradient(118deg, rgba(255,255,255,.025), transparent 35%),
    linear-gradient(120deg, #84118e 0%, #991582 47%, #b52869 100%);
  box-shadow: 0 30px 90px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.18);
}

.maintenance-card::before, .maintenance-card::after {
  content: ""; position: absolute; z-index: -1; border: 1px solid rgba(255,255,255,.065); transform: rotate(45deg);
}
.maintenance-card::before { width: 480px; height: 480px; right: -130px; top: -190px; background: rgba(88,10,96,.14); }
.maintenance-card::after { width: 290px; height: 290px; left: 37%; bottom: -230px; background: rgba(246,75,28,.05); }

.brand-header {
  position: absolute; z-index: 3; top: clamp(28px, 3.2vw, 46px); right: clamp(28px, 4vw, 62px);
  display: flex; align-items: center; justify-content: flex-end; gap: clamp(18px, 2vw, 32px);
}
.brand-header img { display: block; width: auto; height: clamp(62px, 6vw, 86px); object-fit: contain; }
.brand-header img:first-child { height: clamp(70px, 6.7vw, 96px); }

.message-block { z-index: 2; align-self: center; padding: clamp(100px,12vh,150px) 4vw 6vh clamp(42px,7vw,110px); }
.eyebrow { display: block; margin-bottom: clamp(16px,2.5vh,28px); color: rgba(255,255,255,.75); font-size: clamp(13px,1.2vw,18px); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
h1 { max-width: 800px; margin: 0; color: var(--white); font-size: clamp(48px,6.3vw,98px); font-weight: 500; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.accent-line { display: block; width: clamp(70px,9vw,126px); height: 7px; margin-top: clamp(28px,4vh,46px); border-radius: 99px; background: linear-gradient(90deg,var(--orange),#ff885f); }

.avatar-wrap { position: relative; align-self: end; justify-self: center; width: min(37vw,500px); height: 90%; margin-right: clamp(14px,2vw,36px); }
.avatar { position: absolute; z-index: 2; right: 0; bottom: -1.5%; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 22px 22px rgba(48,4,43,.32)); }
.avatar-glow { position: absolute; right: 2%; bottom: 5%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,rgba(255,168,137,.24),transparent 68%); }
.ambient { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .6; }
.ambient-one { width: 240px; height: 240px; left: -120px; bottom: -120px; background: #ef461d; }
.ambient-two { width: 180px; height: 180px; right: -100px; top: -80px; background: #a7109a; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 720px) {
  .maintenance-page { padding: 0; background: #85128c; }
  .maintenance-card { grid-template-columns: 1fr; grid-template-rows: 1fr minmax(300px,52vh); width: 100%; height: 100dvh; min-height: 580px; border: 0; border-radius: 0; background: linear-gradient(155deg,#80128d 0%,#a41b79 64%,#b42a68 100%); }
  .brand-header { top: 18px; right: 18px; gap: 14px; }
  .brand-header img { height: clamp(42px, 12vw, 52px); }
  .brand-header img:first-child { height: clamp(47px, 13.4vw, 58px); }
  .message-block { align-self: end; padding: clamp(100px,17vh,144px) 24px 8px; text-align: center; }
  .eyebrow { margin-bottom: 14px; font-size: 11px; letter-spacing: .14em; }
  h1 { font-size: clamp(40px,12.6vw,62px); line-height: .96; }
  .accent-line { width: 68px; height: 5px; margin: 22px auto 0; }
  .avatar-wrap { align-self: end; width: min(78vw,340px); height: 100%; margin: 0; }
  .avatar { bottom: -5%; }
  .maintenance-card::before { width: 310px; height: 310px; right: -180px; top: -130px; }
  .maintenance-card::after { left: -170px; bottom: -180px; }
}

@media (max-height: 680px) and (max-width: 720px) {
  .maintenance-card { grid-template-rows: 1fr minmax(230px,45vh); }
  .message-block { padding-top: 86px; }
  .eyebrow { margin-bottom: 10px; }
  .accent-line { margin-top: 15px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }