:root {
  --primary-teal: #00bfa6;
  --secondary-navy: #ffffff;
  --white: #ffffff;
  --font-main: 'Poppins', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: var(--font-main); color: var(--secondary-navy); background: #0d1f2d; overflow:hidden; }

#networkCanvas {
  position: fixed;
  top:0; left:0;
  width:100%;
  height:100%;
  z-index:0;
}

section.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 3rem 5%;
  z-index:1;
}

.logo { font-size:3rem; font-weight:400; margin-bottom:1rem; position:relative; z-index:2; }
.logo .alphin { font-weight:700; color: var(--primary-teal); }
.logo .code { font-weight:400; color: var(--secondary-navy); }

h1 { font-size:2.8rem; margin-bottom:1rem; z-index:2; position:relative; }
p { font-size:1.2rem; margin-bottom:2rem; max-width:600px; z-index:2; position:relative; }

.countdown {
  display:flex;
  gap:1.5rem;
  margin-bottom:2rem;
  flex-wrap: wrap;
  justify-content: center;
  z-index:2;
  position:relative;
}
.countdown div {
  background: var(--primary-teal);
  padding:1rem 1.5rem;
  border-radius:12px;
  font-weight:700;
  min-width:80px;
  color: var(--white);
}
.countdown span { display:block; font-size:2rem; }

footer { text-align:center; margin-top:3rem; font-size:0.9rem; z-index:2; position:relative; color: var(--secondary-navy); }

@media(max-width:480px){
  h1 { font-size:1.6rem; }
  p { font-size:0.9rem; }
  .countdown div { min-width:50px; padding:0.4rem 0.8rem; font-size:0.9rem; }
}