@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --blue:#0874e8;
  --blue-dark:#061a35;
  --blue-light:#28a0ff;
  --red:#e3262e;
  --white:#ffffff;
  --text:#182332;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{width:100%;min-height:100%}

body{
  font-family:Inter,Arial,sans-serif;
  background:
    radial-gradient(circle at 50% 45%,rgba(10,112,229,.16),transparent 32%),
    radial-gradient(circle at 15% 15%,rgba(8,116,232,.12),transparent 24%),
    linear-gradient(135deg,#030b17 0%,#061a35 48%,#020814 100%);
  color:var(--text);
}

.maintenance-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  position:relative;
  overflow:hidden;
}

/* Decorative industrial beams */
.industrial-line{
  position:absolute;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  opacity:.6;
  width:100%;
  left:0;
}
.line-top{top:12%}
.line-bottom{bottom:12%}

.maintenance-page::before,
.maintenance-page::after{
  content:"";
  position:absolute;
  width:430px;
  height:430px;
  border:1px solid rgba(8,116,232,.18);
  border-radius:50%;
  pointer-events:none;
}
.maintenance-page::before{transform:translate(-48%,0)}
.maintenance-page::after{transform:translate(48%,0)}

.maintenance-card{
  position:relative;
  width:min(720px,100%);
  padding:48px 55px 42px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.7);
  border-radius:22px;
  text-align:center;
  box-shadow:
    0 35px 90px rgba(0,0,0,.45),
    0 0 0 1px rgba(8,116,232,.12);
  overflow:hidden;
  animation:cardIn .8s ease both;
}

.maintenance-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,var(--blue),var(--blue-light),var(--red));
}

.maintenance-card::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-170px;
  bottom:-190px;
  border:1px solid rgba(8,116,232,.12);
  border-radius:50%;
}

.logo-area{
  position:relative;
  width:210px;
  height:190px;
  margin:0 auto 8px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.maintenance-logo{
  position:relative;
  z-index:2;
  width:205px;
  height:185px;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(4,40,90,.18));
}

.logo-glow{
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(8,116,232,.13);
  filter:blur(30px);
}

.separator{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:3px auto 22px;
  max-width:340px;
}

.separator span{
  height:1px;
  flex:1;
  background:linear-gradient(90deg,transparent,#c7d2df);
}

.separator span:last-child{
  background:linear-gradient(90deg,#c7d2df,transparent);
}

.separator i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--red);
  box-shadow:0 0 0 5px rgba(227,38,46,.08);
}

.eyebrow{
  font-size:10px;
  font-weight:800;
  letter-spacing:2.4px;
  color:var(--blue);
  margin-bottom:15px;
}

h1{
  font-family:"Barlow Condensed",Arial,sans-serif;
  text-transform:uppercase;
  font-size:clamp(46px,7vw,72px);
  line-height:.9;
  letter-spacing:-.5px;
  color:#101c2a;
  margin-bottom:24px;
}

h1 strong{
  color:var(--blue);
  font-weight:800;
}

.message{
  max-width:550px;
  margin:0 auto;
  color:#647181;
  font-size:15px;
  line-height:1.8;
}

.status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:27px 0 15px;
  padding:9px 15px;
  border-radius:30px;
  background:#eef6ff;
  color:#075ebd;
  font-size:10px;
  font-weight:800;
  letter-spacing:1.4px;
}

.status-dot{
  width:8px;
  height:8px;
  background:#20a35a;
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(32,163,90,.12);
  animation:pulse 1.8s infinite;
}

.availability{
  font-size:13px;
  font-weight:600;
  color:#303d4d;
}

.footer-brand{
  border-top:1px solid #e4e9ef;
  margin-top:32px;
  padding-top:23px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.footer-brand span{
  font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:20px;
  font-weight:800;
  letter-spacing:1.8px;
  color:#162333;
}

.footer-brand small{
  font-size:9px;
  letter-spacing:2px;
  color:#8793a1;
  font-weight:700;
}

@keyframes cardIn{
  from{opacity:0;transform:translateY(25px) scale(.98)}
  to{opacity:1;transform:none}
}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.8)}
}

@media(max-width:600px){
  .maintenance-page{padding:20px 14px}
  .maintenance-card{padding:34px 22px 30px;border-radius:18px}
  .logo-area{width:180px;height:160px}
  .maintenance-logo{width:180px;height:160px}
  .eyebrow{font-size:8px;letter-spacing:1.7px}
  h1{font-size:50px}
  .message{font-size:13px}
  .status{font-size:8px;letter-spacing:1px}
  .line-top{top:6%}.line-bottom{bottom:6%}
}