:root {
  color-scheme: light;
  --navy: #11245b;
  --cyan: #009bbd;
  --text: #40516a;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; background: #f8fbfd; color: var(--navy); font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #8966b6; outline-offset: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.maintenance { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; position: relative; isolation: isolate; overflow: hidden; padding: 40px 24px 56px; background: radial-gradient(ellipse 48% 42% at 50% 36%, #fff 30%, #f8fcfe 100%); }
.maintenance::before { content: ""; position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 14% 34%, rgba(16,171,204,.11), transparent 21%), radial-gradient(circle at 87% 16%, rgba(143,109,187,.12), transparent 19%), radial-gradient(circle at 80% 78%, rgba(3,172,204,.07), transparent 19%); }
.maintenance::after { content: ""; position: absolute; z-index: -1; width: 980px; height: 980px; top: -158px; left: calc(50% - 490px); border-radius: 50%; border: 1px solid rgba(0,158,194,.08); box-shadow: 0 0 0 100px rgba(255,255,255,.18), 0 0 0 101px rgba(0,158,194,.045), 0 0 0 220px rgba(255,255,255,.14), 0 0 0 221px rgba(0,158,194,.035); pointer-events: none; }
.background-circle { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.circle-left { width: 135px; height: 135px; top: 23%; left: 13%; background: linear-gradient(135deg,rgba(0,170,201,.2),rgba(0,170,201,0)); }
.circle-right { width: 82px; height: 82px; top: 31%; right: 17%; background: linear-gradient(135deg,rgba(137,102,182,.22),rgba(137,102,182,0)); }
.circle-small { width: 34px; height: 34px; bottom: 16%; right: 24%; background: rgba(0,158,194,.13); }
.content { width: min(100%, 680px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.logo-frame { width: min(100%, 500px); aspect-ratio: 500 / 345; position: relative; overflow: hidden; margin-bottom: 48px; mix-blend-mode: multiply; }
.logo-frame img { position: absolute; display: block; width: 197%; max-width: none; height: auto; left: -48.5%; top: -44.5%; }
.message { max-width: 535px; margin: 0; color: var(--text); font-size: 17px; line-height: 1.75; text-wrap: pretty; }
.actions { display: flex; justify-content: center; gap: 12px; margin-top: 32px; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: transform .2s, box-shadow .2s, background-color .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--cyan); color: #fff; box-shadow: 0 8px 20px rgba(0,155,189,.15); }
.button-primary:hover { background: #0085a6; box-shadow: 0 12px 26px rgba(0,155,189,.21); }
.button-primary svg { width: 20px; height: 20px; flex: none; }
.button-secondary { color: var(--navy); border-color: #dce8ee; background: #fff; }
.button-secondary:hover { background: #f6fafc; }

@media (max-width: 560px) {
  .maintenance { padding: 28px 22px 42px; }
  .maintenance::after { width: 700px; height: 700px; top: calc(50% - 350px); left: calc(50% - 350px); }
  .circle-left { width: 100px; height: 100px; left: 4%; top: 25%; }
  .circle-right { right: 5%; top: 36%; }
  .circle-small { right: 11%; bottom: 17%; }
  .logo-frame { width: min(100%, 340px); margin-bottom: 36px; }
  .message { font-size: 15px; line-height: 1.7; }
  .actions { width: 100%; max-width: 340px; flex-direction: column; margin-top: 28px; }
  .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}