:root {
  --accent: #4cbea6;
  --navy: #053450;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--white); }

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: Arial, Helvetica, sans-serif;
}

.maintenance-page {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: 48px 20px 32px;
  background: radial-gradient(circle at 50% 40%, rgba(76, 190, 166, .08), transparent 38%), var(--white);
}

.maintenance-content {
  z-index: 1;
  width: min(100%, 680px);
  padding: 32px 20px;
  text-align: center;
}

.brand-logo {
  display: block;
  width: 300px !important;
  height: 282px !important;
  margin: 0 auto 32px;
  object-fit: contain;
}

h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.25rem, 6vw, 3.65rem);
  letter-spacing: -.045em;
  line-height: 1.03;
}

.intro {
  max-width: 520px;
  margin: 22px auto 0;
  color: rgba(5, 52, 80, .72);
  font-size: 1.04rem;
  line-height: 1.75;
}

.divider {
  width: 54px;
  height: 3px;
  margin: 31px auto 27px;
  background: var(--accent);
  border-radius: 99px;
}

.support-label {
  margin: 0 0 15px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.contact-list {
  display: flex;
  justify-content: center;
}

.contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 310px);
  padding: 14px 16px;
  color: var(--navy);
 
  border: 1px solid rgba(5, 52, 80, .1);
  border-radius: 14px;
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: 180ms ease;
}

.contact-link:hover { transform: translateY(-2px); border-color: var(--accent); }

.contact-link small {
  display: block;
  margin-bottom: 3px;
  color: rgba(5, 52, 80, .52);
  font-size: .68rem;
  text-transform: uppercase;
}

.contact-icon {
  display: grid;
  flex: 0 0 36px;
  height: 36px;
  place-items: center;
  color: var(--accent);
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(5, 52, 80, .08);
}

.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin-top: 22px;
  padding: 16px 24px;
  color: var(--white);
  background: var(--navy);
  border-radius: 14px;
  box-shadow: 0 13px 24px rgba(5, 52, 80, .2);
  font-weight: 700;
  text-decoration: none;
  transition: 180ms ease;
}

.back-button:hover { transform: translateY(-2px); background: var(--navy); }
.contact-link:focus-visible, .back-button:focus-visible { outline: 3px solid rgba(76, 190, 166, .35); outline-offset: 3px; }

.footer-note { position: absolute; bottom: 11px; color: rgba(5, 52, 80, .46); font-size: .78rem; }

.decor { position: absolute; z-index: -1; width: 340px; height: 340px; border-radius: 50%; opacity: .62; }
.decor-one { top: -185px; right: -125px; background: radial-gradient(circle, rgba(76, 190, 166, .26), transparent 68%); }
.decor-two { bottom: -210px; left: -115px; background: radial-gradient(circle, rgba(5, 52, 80, .2), transparent 70%); }

@media (max-width: 620px) {
  .maintenance-page { align-items: start; overflow: auto; padding: 24px 14px 42px; }
  .maintenance-content { padding: 28px 8px; }
  .brand-logo { width: 300px !important; height: 282px !important; }
  .footer-note { position: static; margin-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}