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

:root{
  --bg:#050505;
  --panel:rgba(17,17,17,.72);
  --gold:#ffc400;
  --gold-2:#ffe27a;
  --text:#f7f7f7;
  --muted:#a9a9a9;
  --line:rgba(255,196,0,.18);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,196,0,.055), transparent 32%),
    linear-gradient(180deg,#050505,#020202);
  color:var(--text);
  font-family:Montserrat,Arial,sans-serif;
  overflow-x:hidden;
}
#network{position:fixed;inset:0;width:100%;height:100%;opacity:.34}
.grain{
  position:fixed;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}
.glow{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none}
.glow-a{width:420px;height:420px;background:rgba(255,196,0,.055);left:-180px;top:8%}
.glow-b{width:360px;height:360px;background:rgba(255,196,0,.04);right:-150px;bottom:5%}

.shell{
  min-height:100svh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:44px 22px 26px;
  position:relative;z-index:1;
}
.hero{width:min(760px,100%);text-align:center;animation:enter .9s ease both}
.brand{display:flex;flex-direction:column;align-items:center}
.brand-symbol{width:88px;height:auto;animation:float 4s ease-in-out infinite}
.wordmark{
  margin-top:12px;font-weight:800;font-size:clamp(40px,7vw,66px);
  line-height:1;letter-spacing:-3px;
}
.wordmark sup{font-size:10px;vertical-align:top;margin-left:4px;color:var(--gold)}
.tagline{margin-top:12px;text-transform:uppercase;letter-spacing:4px;font-size:11px}
.tagline span{display:block;color:var(--gold);font-weight:700}
.tagline strong{display:block;margin-top:6px;color:#fff;font-weight:500;letter-spacing:3.3px}
.status{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:34px;padding:9px 14px;
  border:1px solid var(--line);border-radius:999px;
  color:#d8d8d8;font-size:12px;font-weight:600;
  background:rgba(255,255,255,.025);backdrop-filter:blur(10px);
}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(255,196,0,.6);animation:pulse 2s infinite}
h1{font-size:clamp(28px,5vw,48px);line-height:1.08;letter-spacing:-1.7px;margin:28px 0 14px}
.lead{max-width:630px;margin:0 auto;color:var(--muted);line-height:1.75;font-size:clamp(14px,2vw,17px)}
.build-card{
  margin:32px auto 0;padding:18px;
  width:min(610px,100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(19,19,19,.88),rgba(7,7,7,.78));
  box-shadow:0 22px 70px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.03);
  backdrop-filter:blur(16px);
}
.build-head{display:flex;justify-content:space-between;gap:20px;color:#eee;font-size:11px;font-weight:600}
.build-head span:last-child{color:#888;text-align:right}
.progress{height:4px;background:#252525;border-radius:99px;margin:13px 0 17px;overflow:hidden}
.progress i{display:block;height:100%;width:46%;border-radius:99px;background:linear-gradient(90deg,#bc7c00,var(--gold),var(--gold-2));box-shadow:0 0 14px rgba(255,196,0,.48);animation:working 3.8s ease-in-out infinite}
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;color:#9d9d9d;font-size:10px}
.modules span{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 5px;border-radius:10px;background:rgba(255,255,255,.025)}
.modules b{width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(255,196,0,.55)}
.soon{margin:25px 0 0;color:#c8c8c8;font-size:12px}
footer{
  margin-top:auto;padding-top:35px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  color:#686868;font-size:10px;letter-spacing:.4px;
}
.footer-sep{width:3px;height:3px;border-radius:50%;background:#806400}

@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,196,0,.55)}70%{box-shadow:0 0 0 9px rgba(255,196,0,0)}100%{box-shadow:0 0 0 0 rgba(255,196,0,0)}}
@keyframes working{0%{width:20%;transform:translateX(-40%)}50%{width:68%;transform:translateX(35%)}100%{width:20%;transform:translateX(430%)}}

@media(max-width:560px){
  .shell{padding-top:34px}
  .brand-symbol{width:72px}
  .wordmark{letter-spacing:-2px}
  .tagline{letter-spacing:2.8px;font-size:9px}
  .tagline strong{letter-spacing:2.4px}
  .modules{grid-template-columns:repeat(2,1fr)}
  footer{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
}