/* FLUXIP maintenance page — self-hosted, responsive, no JavaScript or external dependencies. */
:root { color-scheme: dark; --surface: #06101d; --muted: #a1adbf; }
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--surface); }
body { margin: 0; min-height: 100%; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.maintenance {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(42px, 7vh, 82px) 24px 48px;
  color: #f7faff;
  text-align: center;
  background:
    radial-gradient(ellipse 55% 55% at 49% 35%, rgba(23, 64, 104, 0.31), transparent 78%),
    radial-gradient(ellipse 70% 65% at 50% 104%, rgba(2, 42, 92, .26), transparent 75%),
    linear-gradient(170deg, #07131f 2%, #071424 47%, #03101f 100%);
}
.maintenance::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background-image: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.015) 45%, transparent 60%);
  pointer-events: none;
}
.ambient { position: absolute; z-index: -1; filter: blur(40px); opacity: .34; pointer-events: none; border-radius: 50%; }
.ambient-left { left: -22vw; bottom: -23vw; width: 48vw; height: 48vw; background: radial-gradient(circle, rgba(0,107,215,.28), transparent 65%); }
.ambient-right { right: -25vw; bottom: -25vw; width: 55vw; height: 55vw; background: radial-gradient(circle, rgba(0,128,224,.28), transparent 60%); }
.waves {
  position: absolute; z-index: -1; inset: auto 0 0;
  height: min(53vw, 530px);
  min-height: 260px;
  background: url("assets/waves.svg") center bottom / cover no-repeat;
  opacity: .92;
  pointer-events: none;
}
.content { width: 100%; max-width: 920px; margin: -82px auto 0; position: relative; z-index: 1; }
.logo { display: block; width: clamp(280px, 36vw, 435px); max-width: 100%; height: auto; margin: 0 auto 16px; filter: drop-shadow(0 12px 28px rgba(2, 116, 234, .08)); }
h1 { font-size: clamp(31px, 3.35vw, 51px); font-weight: 530; letter-spacing: -0.038em; line-height: 1.22; margin: 0 auto 15px; text-wrap: balance; }
.subtitle { margin: 0 auto; color: var(--muted); font-size: clamp(17px, 1.8vw, 25px); line-height: 1.55; letter-spacing: -.011em; }
.accent-bar { height: 5px; width: 89px; border-radius: 10px; margin: 43px auto 0; background: linear-gradient(90deg, #086BF0, #27C6F6); box-shadow: 0 0 24px rgba(0,130,247,.21); }
.footer { position: absolute; z-index: 1; bottom: 17px; left: 20px; right: 20px; color: rgba(178,200,220,.48); font-size: 12px; line-height: 1.5; letter-spacing: .03em; }
@media (min-width: 1800px) { .waves { height: 560px; } }
@media (max-width: 700px) {
  .maintenance { padding: 42px 22px 38px; }
  .content { margin-top: -38px; }
  .logo { width: min(84vw, 360px); margin-bottom: 12px; }
  h1 { max-width: 490px; font-size: clamp(29px, 6.8vw, 39px); line-height: 1.24; letter-spacing: -.04em; margin-bottom: 13px; }
  .desktop-break { display: none; }
  .subtitle { font-size: clamp(16px, 4vw, 19px); }
  .accent-bar { margin-top: 35px; width: 72px; height: 4px; }
  .waves { height: 45vh; min-height: 240px; max-height: 420px; width: 160%; left: -30%; right: auto; background-size: auto 100%; background-position: center bottom; opacity: .80; }
  .footer { bottom: 13px; font-size: 11px; }
}
@media (max-width: 380px) {
  .content { margin-top: -18px; }
  .logo { width: min(84vw, 300px); }
  h1 { font-size: 27px; }
}
@media (max-height: 660px) and (min-width: 701px) {
  .maintenance { padding-top: 24px; padding-bottom: 30px; }
  .content { margin-top: -15px; }
  .logo { width: min(28vh + 170px, 325px); margin-bottom: -5px; }
  h1 { font-size: clamp(30px, 4.3vh, 42px); }
  .accent-bar { margin-top: 24px; }
}
@media (max-height: 590px) and (max-width: 700px) {
  .maintenance { justify-content: flex-start; padding-top: 24px; }
  .content { margin-top: 0; }
  .logo { width: 200px; margin-bottom: -4px; }
  h1 { font-size: 25px; }
  .subtitle { font-size: 15px; }
  .accent-bar { margin-top: 20px; }
  .footer { position: relative; bottom: auto; margin-top: 45px; }
}