/* pixel-amp.com — coming soon.
   Single committed look: dark "amp" energy, neon magenta→cyan, pixel accents.
   Colours are all explicit so it holds on any host background. */
:root{
  --bg:#0a0a12; --bg2:#121022; --ink:#f4f2ff; --muted:#9a97b8;
  --mag:#ff2e88; --cyan:#22e0ff; --lime:#b6ff3a; --card:#171528;
  --pixel:8px; color-scheme:dark;
}
*{box-sizing:border-box}
html{height:100%}
body{
  margin:0; min-height:100%; color:var(--ink); background:var(--bg);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  display:flex; flex-direction:column;
}
img,svg{max-width:100%}
a{color:var(--cyan)}
:focus-visible{outline:3px solid var(--lime); outline-offset:3px; border-radius:6px}

/* animated backdrop: drifting neon glows + faint pixel grid */
.bg{position:fixed; inset:0; z-index:-2; overflow:hidden; background:
  radial-gradient(60% 55% at 78% 18%, rgba(255,46,136,.22), transparent 70%),
  radial-gradient(55% 50% at 15% 82%, rgba(34,224,255,.18), transparent 70%),
  linear-gradient(160deg,#0a0a12,#121022 60%,#0a0a12);}
.grid{position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:var(--pixel) var(--pixel);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 30%,transparent 78%);
  mask-image:radial-gradient(circle at 50% 40%,#000 30%,transparent 78%);}

main{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1.25rem; gap:1.6rem; position:relative}

.badge{display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cyan);
  border:1px solid rgba(34,224,255,.3); background:rgba(34,224,255,.07);
  padding:.4rem .9rem; border-radius:999px}
.badge .dot{width:8px;height:8px;border-radius:2px;background:var(--lime);
  box-shadow:0 0 10px var(--lime); animation:blink 1.4s steps(2) infinite}

/* wordmark: pixel font, magenta→cyan */
.logo{font-family:'Press Start 2P',monospace; line-height:1.15;
  font-size:clamp(1.5rem,6vw,3.4rem); margin:0;
  background:linear-gradient(92deg,var(--mag),var(--cyan)); -webkit-background-clip:text;
  background-clip:text; color:transparent; text-shadow:0 0 34px rgba(255,46,136,.25);
  word-break:break-word}
.logo .amp{color:var(--lime); -webkit-text-fill-color:var(--lime)}
.tagline{max-width:30rem; color:var(--muted); font-size:clamp(1rem,2.4vw,1.2rem); margin:0}

/* equalizer — the "amp" motif */
.eq{display:flex; align-items:flex-end; gap:6px; height:52px; margin:.2rem 0}
.eq span{width:9px; height:28px; border-radius:3px 3px 0 0; background:linear-gradient(var(--cyan),var(--mag));
  animation:bounce 1.1s ease-in-out infinite}
.eq span:nth-child(1){height:20px}.eq span:nth-child(2){height:44px}.eq span:nth-child(3){height:30px}
.eq span:nth-child(4){height:52px}.eq span:nth-child(5){height:24px}.eq span:nth-child(6){height:40px}
.eq span:nth-child(7){height:16px}
.eq span:nth-child(1){animation-delay:-.9s}.eq span:nth-child(2){animation-delay:-.2s}
.eq span:nth-child(3){animation-delay:-.5s}.eq span:nth-child(4){animation-delay:-.1s}
.eq span:nth-child(5){animation-delay:-.7s}.eq span:nth-child(6){animation-delay:-.3s}
.eq span:nth-child(7){animation-delay:-.6s}

/* countdown */
.count{display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; margin-top:.4rem}
.unit{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:16px;
  padding:1rem 1.1rem; min-width:88px; box-shadow:0 10px 30px rgba(0,0,0,.35)}
.unit b{display:block; font-family:'Space Grotesk',monospace; font-weight:700;
  font-size:clamp(2rem,7vw,3rem); font-variant-numeric:tabular-nums; line-height:1;
  background:linear-gradient(180deg,#fff,#c7c3ff); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.unit small{display:block; margin-top:.5rem; font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}
.launched{font-size:clamp(1.3rem,5vw,2rem); font-weight:700; color:var(--lime)}

.cta{display:inline-flex; align-items:center; gap:.5rem; margin-top:.4rem; text-decoration:none;
  font-weight:600; color:#0a0a12; background:linear-gradient(92deg,var(--lime),var(--cyan));
  padding:.85rem 1.5rem; border-radius:12px; transition:transform .18s ease, box-shadow .18s ease}
.cta:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(34,224,255,.3)}

footer{padding:1.4rem; text-align:center; color:var(--muted); font-size:.82rem}

@keyframes bounce{0%,100%{height:14px}50%{height:52px}}
@keyframes blink{50%{opacity:.25}}

@media (prefers-reduced-motion:reduce){
  .eq span{animation:none;height:32px}
  .badge .dot{animation:none}
}