:root{
  --bg-1:#0f3149;
  --bg-2:#061e31;
  --bg-3:#163d59;
  --card:#233f57cc;
  --card-border:#ffffff1a;
  --text:#f7fbff;
  --muted:rgba(255,255,255,.78);
  --muted-2:rgba(255,255,255,.58);
  --white:#ffffff;
  --cyan:#23a8d5;
  --cyan-2:#8ee8ff;
  --orange:#ff6a25;
  --green:#7df3bc;
  --shadow:0 24px 60px rgba(0,0,0,.26);
  --font:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-title:Georgia, "Times New Roman", serif;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  font-size:62.5%;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100svh;
  overflow-x:hidden;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(circle at 18% 20%, rgba(35,168,213,.18), transparent 32rem),
    radial-gradient(circle at 82% 54%, rgba(255,106,37,.12), transparent 26rem),
    linear-gradient(135deg, var(--bg-1), var(--bg-2) 72%);
}

.page{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(1.6rem, 2vw, 3rem);
  isolation:isolate;
}

.bg-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(1px);
  opacity:.16;
  z-index:-2;
  pointer-events:none;
}

.orb-left{
  width:min(38rem, 45vw);
  aspect-ratio:1;
  left:-12rem;
  bottom:6rem;
  background:#23a8d5;
}

.orb-right{
  width:min(24rem, 34vw);
  aspect-ratio:1;
  right:-6rem;
  top:10rem;
  background:#ffd08a;
}

.particles{
  position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
}

.particle{
  position:absolute;
  width:.45rem;
  height:.45rem;
  border-radius:50%;
  background:rgba(255,255,255,.38);
  animation:float-particle linear infinite;
}

.maintenance-card{
  width:min(132rem, 100%);
  min-height:min(72rem, calc(100svh - 4rem));
  display:grid;
  grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr);
  align-items:center;
  gap:clamp(2.4rem, 3vw, 4.8rem);
  padding:clamp(2.4rem, 3vw, 4.4rem);
  border:1px solid var(--card-border);
  border-radius:3rem;
  background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.visual-side,
.content-side{
  min-width:0;
}

.visual-side{
  position:relative;
  display:grid;
  place-items:center;
  min-height:42rem;
}

.visual-ring{
  position:absolute;
  width:min(46rem, 85%);
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 0 0 4px rgba(35,168,213,.08),
    0 0 0 48px rgba(255,255,255,.02);
  animation:rotate-slow 30s linear infinite;
}

.hero-svg{
  width:min(100%, 55rem);
  height:auto;
  display:block;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.16));
}

.gear,
.clock-hand,
.cloud,
.arrow-up,
.screen-glow,
.visual-ring,
.particle{
  will-change:transform, opacity;
  backface-visibility:hidden;
}

.gear{
  transform-box:fill-box;
  transform-origin:center;
}

.gear-a{ animation:spin 10s linear infinite; }
.gear-b{ animation:spin-reverse 13s linear infinite; }
.gear-c{ animation:spin 8s linear infinite; }
.gear-d{ animation:spin-reverse 15s linear infinite; }

.belt{
  stroke-dasharray:18 8;
  animation:belt-flow 1.6s linear infinite;
}

.cloud{
  animation:cloud-move 7s ease-in-out infinite;
}

.arrow-up{
  opacity:0;
  animation:arrow-flight 3.2s ease-in-out infinite;
}

.arrow-2{ animation-delay:.35s; }
.arrow-3{ animation-delay:.7s; }
.arrow-4{ animation-delay:1.05s; }
.arrow-5{ animation-delay:1.4s; }
.arrow-6{ animation-delay:1.75s; }

.screen-glow{
  animation:screen-glow 3.2s ease-in-out infinite;
}

.clock-hand{
  transform-box:fill-box;
  transform-origin:50% 85%;
  animation:clock-tick 6s steps(12) infinite;
}

.content-side{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  max-width:56rem;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  margin-bottom:2rem;
  padding:1rem 1.5rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  color:var(--muted);
  font-size:clamp(1.3rem, 1.2vw, 1.55rem);
}

.status-dot{
  width:.9rem;
  height:.9rem;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 0 rgba(125,243,188,.7);
  animation:live-dot 1.8s infinite;
}

#page-title{
  margin:0 0 1.8rem;
  font-family:var(--font-title);
  font-size:clamp(4rem, 5.6vw, 7.6rem);
  line-height:.96;
  letter-spacing:.01em;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
  text-wrap:balance;
}

.lead{
  margin:0 0 2.6rem;
  color:var(--muted);
  font-size:clamp(1.7rem, 1.4vw, 2.05rem);
  line-height:1.7;
  max-width:52rem;
}

.actions{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:1.2rem;
  margin-bottom:2.8rem;
}

.email-btn,
.copy-btn{
  min-height:5rem;
  padding:1.2rem 1.8rem;
  border-radius:1.6rem;
  border:1px solid rgba(255,255,255,.16);
  font-size:clamp(1.45rem, 1.15vw, 1.65rem);
  font-weight:700;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}

.email-btn{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  background:var(--white);
  color:#102f47;
  text-decoration:none;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
  max-width:100%;
  overflow-wrap:anywhere;
}

.copy-btn{
  background:rgba(255,255,255,.08);
  color:var(--white);
  cursor:pointer;
  font-family:inherit;
}

.email-btn:hover,
.copy-btn:hover{
  transform:translateY(-2px);
}

.copy-btn:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);
}

.progress-wrap{
  width:min(44rem, 100%);
}

.progress-top{
  display:flex;
  justify-content:space-between;
  gap:1.2rem;
  margin-bottom:1rem;
  font-size:1.35rem;
  color:var(--muted-2);
}

.progress-bar{
  width:100%;
  height:.9rem;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.14);
}

.progress-fill{
  width:68%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--cyan), var(--cyan-2), var(--orange));
  transition:width .8s ease;
}

.toast{
  position:fixed;
  left:50%;
  bottom:2.4rem;
  transform:translate(-50%, 1.6rem);
  min-width:min(32rem, calc(100vw - 3rem));
  max-width:calc(100vw - 3rem);
  padding:1.25rem 1.6rem;
  border-radius:1.4rem;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(7,23,36,.88);
  color:var(--white);
  font-size:1.45rem;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}

.toast.show{
  opacity:1;
  transform:translate(-50%, 0);
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

@keyframes spin-reverse{
  to{ transform:rotate(-360deg); }
}

@keyframes rotate-slow{
  to{ transform:rotate(360deg); }
}

@keyframes belt-flow{
  to{ stroke-dashoffset:-26; }
}

@keyframes cloud-move{
  0%,100%{ transform:translateX(-7px); }
  50%{ transform:translateX(9px); }
}

@keyframes arrow-flight{
  0%{
    opacity:0;
    transform:translate(-8px, 12px);
  }
  35%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:translate(16px, -18px);
  }
}

@keyframes screen-glow{
  0%,100%{ opacity:.95; }
  50%{ opacity:.78; }
}

@keyframes clock-tick{
  to{ transform:rotate(360deg); }
}

@keyframes live-dot{
  0%{ box-shadow:0 0 0 0 rgba(125,243,188,.7); }
  70%{ box-shadow:0 0 0 12px rgba(125,243,188,0); }
  100%{ box-shadow:0 0 0 0 rgba(125,243,188,0); }
}

@keyframes float-particle{
  from{
    transform:translateY(102vh) translateX(0);
    opacity:0;
  }
  15%,80%{
    opacity:.55;
  }
  to{
    transform:translateY(-12vh) translateX(30px);
    opacity:0;
  }
}

@media (max-width: 1180px){
  .maintenance-card{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  #page-title{
    font-size:clamp(3.6rem, 6vw, 6.8rem);
  }
}

@media (max-width: 920px){
  .maintenance-card{
    min-height:auto;
    grid-template-columns:1fr;
    gap:1.6rem;
    padding:2.2rem;
  }

  .visual-side{
    min-height:28rem;
    order:1;
  }

  .content-side{
    order:2;
    max-width:none;
    align-items:center;
    text-align:center;
  }

  .lead{
    max-width:62rem;
  }

  .actions{
    justify-content:center;
  }

  .progress-wrap{
    width:min(50rem, 100%);
  }
}

@media (max-width: 640px){
  .page{
    padding:1.2rem;
  }

  .maintenance-card{
    border-radius:2.2rem;
    padding:1.8rem;
  }

  .visual-side{
    min-height:22rem;
  }

  .hero-svg{
    width:min(100%, 38rem);
  }

  #page-title{
    font-size:clamp(3.2rem, 10vw, 5rem);
    line-height:1.02;
  }

  .lead{
    font-size:1.6rem;
  }

  .email-btn,
  .copy-btn{
    width:100%;
    justify-content:center;
  }

  .progress-top{
    font-size:1.25rem;
  }
}

@media (max-width: 380px){
  html{
    font-size:58%;
  }

  .maintenance-card{
    padding:1.5rem;
  }

  .status-pill{
    width:100%;
    justify-content:center;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}