:root{
  --void:#14101c;
  --gold:#00ccff;
  --ink:#111;
  --white:#ffffff;
  --grey-mid:#6b6b6b;
  --grey-line:#2a2a2a;
  --body-font: 'Space Grotesk', sans-serif;
  --mono-font: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--body-font);
  color:var(--white);
  background:#000;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}

/* ---------- NAV ---------- */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
}
.nav.dark{ background:#000; }
.nav.light{ background:#fff; }
.nav .logo img{ height:55px; width:auto; }
.nav-right{
  display:flex;
  align-items:center;
  gap:20px;
}
.icon-btn svg{ width:22px; height:22px; display:block; }
.nav.dark .icon-btn svg path{ fill:#fff; }
.nav.light .icon-btn svg path{ fill:#111; } /* see note in README about spec */
.enter-btn{
  font-family:var(--mono-font);
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  background:var(--gold);
  color:#14101c;
  border:none;
  padding:10px 22px;
  border-radius:5px;
  cursor:pointer;
  font-weight: 600;
  transition:transform .15s ease, box-shadow .3s ease;
}
.enter-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(255,193,69,.4); }

/* ---------- HEADER ---------- */
.header{
  min-height:92vh;
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
  position:relative;
}
.header::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(0, 0, 0, 0.735);
}
.header > *{ position:relative; z-index:1; }

.brand-title{
  font-size:clamp(44px, 17vw, 195px);
  font-weight:700;
  letter-spacing:2px;
  line-height: 1.05;
}
.brand-sub{
  font-size:clamp(16px, 2.4vw, 22px);
  color:rgba(255,255,255,0.85);
  font-family:var(--mono-font);
  letter-spacing:1px;
}
.chain-meta{
  margin-top:26px;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-family:var(--mono-font);
  font-size:clamp(16px, 2.4vw, 22px);
  color:rgba(255,255,255,0.85);
}
.chain-meta .label{
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:clamp(16px, 2.4vw, 22px);
  color:#00ccff;
  margin-top:10px;
}
.chain-meta div {
  padding-bottom: 10px;
}

.cta-btn{
  margin-top:34px;
  font-family:var(--mono-font);
  font-size:23px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:18px 44px;
  border-radius:10px;
  border:none;
  background:var(--gold);
    font-weight: 400;
  color:#14101c;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .3s ease, background .3s ease;
}
.cta-btn:disabled{
  background:#000000;
  color:#999;
  cursor:not-allowed;
}
.cta-btn:not(:disabled):hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0, 109, 173, 0.4);
}
.cta-note{
  margin-top:14px;
  font-family:var(--mono-font);
  font-size:16px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(255,255,255,0.65);
}

/* ---------- COUNTDOWN SECTION ---------- */
.countdown-section{
  background:#000;
  padding:80px 20px 64px;
  text-align:center;
}
.countdown{
  display:flex;
  justify-content:center;
  gap:clamp(12px,3.5vw,30px);
  margin-bottom:20px;
  flex-wrap:wrap;
}
.countdown .unit{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.countdown .num{
  font-family:var(--mono-font);
  font-weight:600;
  font-size:clamp(34px,8vw,60px);
  border:1px solid var(--grey-line);
  border-radius:12px;
  padding:18px 16px;
  min-width:84px;
}
.countdown .label{
  font-family:var(--mono-font);
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#888;
}
.launch-date{
  font-family:var(--mono-font);
  font-size:18px;
  letter-spacing:1px;
  color:#aaa;
}

/* ---------- SECOND SECTION (door / light) ---------- */
.door-section{
  position:relative;
  min-height:70vh;
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}
.door-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, 0.502);
}
.door-section > *{
  position:relative;
  z-index:1;
}

/* ---------- CONTRACT / BLOCKS SECTION ---------- */
.contract-section{
  background:#fff;
  color:#111;
  padding:70px 20px;
  text-align:center;
}
.contract-section p, .contract-section a {
  padding-bottom: 10px;
}
.subtitle{
  font-family:var(--mono-font);
  font-size:clamp(18px, 2.4vw, 22px);
  letter-spacing:3px;
  text-transform:uppercase;
  color:#888;
  margin-bottom:10px;
}
.contract-address{
  font-family:var(--mono-font);
  font-size:clamp(16px, 2.4vw, 22px);
  word-break:break-all;
  max-width:600px;
  margin:0 auto 10px;
  padding:0 10px;
  font-weight: 800;
}
.blockscout-link{
  font-family:var(--mono-font);
  font-size:clamp(16px, 2.4vw, 22px);
  text-decoration:underline;
  color:#111;
}
.blocks-title{
  font-size:clamp(24px,4vw,34px);
  font-weight:700;
  margin:60px 0 30px;
}
.blocks-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  max-width:820px;
  margin:0 auto;
}
.blocks-grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
@media (max-width:640px){
  .blocks-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- LIGHT-IS-HERE SECTION ---------- */
.light-section{
  position:relative;
  min-height:60vh;
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px;
}
.light-title{
  font-size:clamp(42px, 7.5vw, 70px);
  font-weight:700;
  text-shadow:0 4px 30px rgba(0,0,0,0.5);
}
.light-sub{
  margin-top:14px;
  font-family:var(--mono-font);
  font-size:clamp(16px, 2.4vw, 22px);
  letter-spacing:1px;
  color:rgba(255,255,255,0.85);
}


.light-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0, 0, 0, 0.554);
}
.light-section > *{
  position:relative;
  z-index:1;
}

/* ---------- FOOTER ---------- */
.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px clamp(20px,5vw,56px);
  font-family:var(--mono-font);
  font-size:12px;
}
.footer.dark{ background:#000; color:#aaa; }
.footer.light{ background:#fff; color:#555; }
.footer-icons{ display:flex; gap:18px; }
.footer-icons svg{ width:18px; height:18px; }
.footer.dark .footer-icons svg path{ fill:#fff; }
.footer.light .footer-icons svg path{ fill:#111; }