/* ============================================================
   NazDoublei — Maintenance page
============================================================ */

:root{
  --bg:        #050505;
  --bg-2:      #0a0a0a;
  --ink:       #e8e8e8;
  --muted:     #6c6c6c;
  --line:      rgba(255,255,255,0.07);
  --line-2:    rgba(255,255,255,0.14);
  --accent:    #00ff9c;
  --accent-2:  #00d97d;
  --display:   "Space Grotesk", -apple-system, sans-serif;
  --sans:      "Inter", -apple-system, sans-serif;
  --mono:      "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease:      cubic-bezier(.7,0,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);color:var(--ink);min-height:100vh;}
body{
  font-family:var(--sans);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
a{color:inherit;text-decoration:none;}
em{font-style:italic;color:var(--accent);text-shadow:0 0 24px rgba(0,255,156,.35);}

::selection{background:var(--accent);color:var(--bg);}

/* ------------------- Backdrop layers ------------------- */
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  animation:gridDrift 40s linear infinite;
}
@keyframes gridDrift{
  0%{background-position:0 0,0 0}
  100%{background-position:64px 64px,64px 64px}
}

.bg-noise{
  position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
  animation:noise 1s steps(6) infinite;
}
@keyframes noise{
  0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}
  50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,2%)}
  100%{transform:translate(0,0)}
}

.bg-glow{
  position:fixed;z-index:0;pointer-events:none;
  top:50%;left:50%;
  width:60vmax;height:60vmax;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at center, rgba(0,255,156,.10), transparent 55%);
  filter:blur(40px);
  animation:pulse 8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.55}
  50%{transform:translate(-50%,-50%) scale(1.15);opacity:.85}
}

/* ------------------- Layout ------------------- */
.mtn{
  position:relative;z-index:2;
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:32px clamp(20px,5vw,64px);
  gap:24px;
}

/* ------------------- Header ------------------- */
.mtn__head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);}
.brand__mark{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line-2);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:0;
  color:var(--accent);
  box-shadow:inset 0 0 18px rgba(0,255,156,.18), 0 0 30px rgba(0,255,156,.12);
}
.brand__name{font-family:var(--display);font-weight:500;letter-spacing:.22em;font-size:12px;color:var(--ink);}

.status{display:inline-flex;align-items:center;gap:10px;}
.status__dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(0,255,156,.15),0 0 22px rgba(0,255,156,.6);
  animation:dot 1.6s ease-in-out infinite;
}
@keyframes dot{0%,100%{opacity:1}50%{opacity:.4}}

/* ------------------- Body ------------------- */
.mtn__body{
  align-self:center;
  max-width:920px;margin:0 auto;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:28px;
  animation:rise .9s var(--ease-out) both;
}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

.kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  color:var(--accent);
  opacity:.85;
}
.title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(40px,7vw,92px);
  line-height:1.02;
  letter-spacing:-0.025em;
  color:var(--ink);
}
.lead{
  max-width:62ch;
  font-size:clamp(15px,1.25vw,17px);
  color:#b5b5b5;
  line-height:1.65;
}

.progress{
  margin-top:14px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  width:min(420px,90vw);
}
.progress__bar{
  position:relative;display:block;width:100%;height:2px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
.progress__bar i{
  position:absolute;left:0;top:0;height:100%;width:35%;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 20px rgba(0,255,156,.6);
  transition:width .8s var(--ease);
}
.progress__val{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:var(--muted);text-transform:uppercase;
}

.actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:14px;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  border-radius:99px;
  font-size:13px;letter-spacing:.04em;
  transition:transform .35s var(--ease-out),background .3s,color .3s,box-shadow .35s,border-color .3s;
  font-family:var(--sans);font-weight:500;
}
.btn svg{width:14px;height:14px;}
.btn--primary{
  background:var(--accent);color:var(--bg);
  box-shadow:0 0 0 1px rgba(0,255,156,.4),0 0 30px rgba(0,255,156,.35);
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(0,255,156,.6),0 0 50px rgba(0,255,156,.55);
}
.btn--ghost{
  border:1px solid var(--line-2);color:var(--ink);
}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);}

/* ------------------- Footer ------------------- */
.mtn__foot{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  color:var(--muted);text-transform:uppercase;
}
.mtn__pulse{display:inline-flex;gap:6px;align-items:center;}
.mtn__pulse i{
  width:5px;height:5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px rgba(0,255,156,.55);
  animation:blink 1.4s infinite;
}
.mtn__pulse i:nth-child(2){animation-delay:.2s;}
.mtn__pulse i:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

/* ------------------- Responsive ------------------- */
@media (max-width:640px){
  .mtn__head{flex-direction:column;gap:10px;align-items:flex-start;}
  .mtn__foot{flex-direction:column;gap:8px;text-align:center;}
}