/* ============================================================
   $ZCODE — single-viewport cyber theme
   no scroll · full contract · typing-code bg · network dot
   ============================================================ */

:root{
  --bg:        #03070a;
  --bg-2:      #050d12;
  --neon:      #00ff9c;
  --neon-dim:  #00c97b;
  --cyan:      #22e1ff;
  --violet:    #7b5cff;
  --magenta:   #ff2e88;
  --ink:       #d7ffe9;
  --ink-dim:   #82b1a0;
  --line:      rgba(0,255,156,.16);
  --line-soft: rgba(34,225,255,.10);
  --panel:     rgba(4,16,20,.62);
  --mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display:   'Space Grotesk', system-ui, sans-serif;
  --shadow-neon: 0 0 18px rgba(0,255,156,.35), 0 0 60px rgba(0,255,156,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background: var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- typing-code background canvas ---------- */
#bg{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  pointer-events:none;
  opacity:0.22;
}
.nav, main, .footer{position:relative; z-index:2}

::selection{background:rgba(0,255,156,.32); color:#00150d}

/* ---------- shared bits ---------- */
a{color:inherit; text-decoration:none}
h1,h2,h3{font-family:var(--display); letter-spacing:-.02em; line-height:1.05; margin:0}
.lead{color:var(--ink-dim); max-width:56ch}
.hl{color:var(--neon); text-shadow:var(--shadow-neon)}
.pulse{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--neon); box-shadow:0 0 12px var(--neon);
  animation:pulse 1.6s ease-in-out infinite; vertical-align:middle; margin-right:.5em;
}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.7)}}

/* ---------- blinking green network dot (replaces ▖) ---------- */
.logo-dot{
  display:inline-block;
  width:13px; height:13px;
  border-radius:50%;
  background:var(--neon);
  box-shadow:0 0 10px var(--neon), 0 0 22px rgba(0,255,156,.6);
  animation:net-blink 2s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes net-blink{
  0%,100%{opacity:1; box-shadow:0 0 10px var(--neon), 0 0 22px rgba(0,255,156,.6)}
  50%{opacity:.25; box-shadow:0 0 4px var(--neon), 0 0 8px rgba(0,255,156,.25)}
}

/* ---------- buttons ---------- */
.btn{
  --bh:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:var(--bh); padding:0 1.4em;
  font-family:var(--mono); font-weight:600; font-size:.9rem; letter-spacing:.02em;
  border-radius:10px; cursor:pointer; border:1px solid var(--line);
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, color .2s ease;
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn-buy{
  --bh:58px;
  width:100%; max-width:520px; margin:0 auto; display:flex;
  font-size:1.05rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:#02150e;
  background:linear-gradient(135deg,var(--neon) 0%, #00e6b4 45%, var(--cyan) 100%);
  border:none; box-shadow:0 14px 44px rgba(0,255,156,.34), 0 0 0 1px rgba(0,255,156,.5) inset;
}
.btn-buy::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 20%, rgba(255,255,255,.55) 50%, transparent 80%);
  transform:translateX(-120%); transition:transform .7s ease;
}
.btn-buy:hover{transform:translateY(-3px); box-shadow:0 20px 60px rgba(0,255,156,.5)}
.btn-buy:hover::after{transform:translateX(120%)}
.btn-copy{
  min-width:110px; color:var(--neon); background:rgba(0,255,156,.15);
  border-color:rgba(0,255,156,.42); flex:0 0 auto;
}
.btn-copy:hover{background:rgba(0,255,156,.17); box-shadow:var(--shadow-neon)}
.btn-copy.done{color:#02150e; background:var(--neon); border-color:var(--neon)}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  backdrop-filter:blur(14px);
  background:rgba(3,7,10,.72); border-bottom:1px solid var(--line-soft);
  flex-shrink:0;
}
.nav-inner{
  max-width:1240px; margin:0 auto; padding:.6rem clamp(1rem,4vw,4rem);
  display:flex; align-items:center; gap:1.2rem;
}
.logo{display:flex; align-items:center; gap:.55rem; font-weight:800; letter-spacing:.02em}
.nav-links{display:flex; gap:1.4rem; margin-left:auto; font-size:.84rem; color:var(--ink-dim)}
.nav-links a:hover{color:var(--neon)}

/* ---------- main — fills available height, centers hero ---------- */
main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  min-height:0;
}

/* ---------- hero ---------- */
.hero{
  max-width:900px;
  width:100%;
  margin:0 auto;
  padding:0 clamp(1rem,4vw,3rem);
  text-align:center;
}
.hero-term{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; color:var(--ink-dim);
  border:1px solid var(--line-soft); border-radius:8px;
  padding:.35rem .8rem; margin-bottom:1.2rem;
  background:rgba(0,255,156,.04);
}
.term-path{color:var(--neon-dim)}
.hero-term .dot{width:9px; height:9px; border-radius:50%; background:#183a30}
.hero-term .dot:nth-child(1){background:#ff5f57}
.hero-term .dot:nth-child(2){background:#ffbd2e}
.hero-term .dot:nth-child(3){background:#28c840; box-shadow:0 0 10px #28c840}

.glitch{
  position:relative;
  font-size:clamp(3rem,10vw,8rem); font-weight:700;
  letter-spacing:-.05em; margin:.05em 0 .2em;
  color:#eafff5; text-shadow:0 0 26px rgba(0,255,156,.45), 0 0 90px rgba(0,255,156,.18);
}
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; inset:0;
  clip-path:inset(0 0 55% 0);
}
.glitch::before{color:var(--cyan); animation:gl-1 3.4s infinite steps(2,end); opacity:.7}
.glitch::after{color:var(--magenta); clip-path:inset(58% 0 0 0); animation:gl-2 2.7s infinite steps(2,end); opacity:.55}
@keyframes gl-1{
  0%,88%,100%{transform:translate(0,0); opacity:0}
  90%{transform:translate(-4px,-3px); opacity:.75}
  94%{transform:translate(3px,2px); opacity:.5}
}
@keyframes gl-2{
  0%,84%,100%{transform:translate(0,0); opacity:0}
  86%{transform:translate(5px,3px); opacity:.6}
  92%{transform:translate(-3px,-2px); opacity:.45}
}

.hero-sub{
  color:var(--ink-dim); max-width:58ch;
  margin:0 auto 1.4rem;
  font-size:clamp(.88rem,1.3vw,.98rem);
}

/* ---------- CTA block (contract + buy) ---------- */
.cta-block{
  display:flex; flex-direction:column; align-items:center; gap:1rem;
  max-width:580px; margin:0 auto;
}

/* ---------- contract — full address visible ---------- */
.contract{
  width:100%; text-align:left;
  border:1px solid var(--line); border-radius:14px;
  padding:1rem 1rem .9rem;
  background:linear-gradient(160deg, rgba(0,255,156,.07), rgba(4,16,20,.75));
  box-shadow:inset 0 0 40px rgba(0,255,156,.05);
}
.contract label{
  display:block; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--neon); margin-bottom:.55rem;
}
.contract-row{display:flex; gap:.5rem}
#contractField{
  flex:1 1 auto; min-width:0;
  font-family:var(--mono); font-size:.78rem; color:var(--ink);
  background:rgba(0,0,0,.55); border:1px solid var(--line-soft);
  border-radius:10px; padding:0 .8rem; height:46px;
  /* show full address — no ellipsis clipping */
  text-overflow:clip;
  overflow:hidden;
  white-space:nowrap;
}
#contractField:focus{outline:none; border-color:var(--neon); box-shadow:var(--shadow-neon)}
.contract-hint{font-size:.7rem; color:var(--ink-dim); margin-top:.6rem; transition:color .2s}
.contract-hint.ok{color:var(--neon)}

.buy-note{
  font-size:.74rem; color:#a8cfbd;
  margin:1rem 0 0;
  letter-spacing:.04em;
  text-shadow:0 1px 10px rgba(0,0,0,.95);
}

/* ---------- footer ---------- */
.footer{
  flex-shrink:0;
  border-top:1px solid var(--line-soft);
  background:rgba(3,7,10,.8);
}
.footer-inner{
  max-width:1240px; margin:0 auto;
  padding:1rem clamp(1rem,4vw,4rem);
  display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap;
}
.footer-brand{
  font-family:var(--display); font-weight:700; font-size:1rem;
  display:flex; align-items:center; gap:.4rem;
}
.footer-links{display:flex; gap:1.2rem; font-size:.8rem; color:var(--ink-dim)}
.footer-links a:hover{color:var(--neon)}
.disclaimer{color:#42655a; font-size:.68rem; max-width:50ch; margin:0; line-height:1.5}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav-links{display:none}
  .footer-inner{flex-direction:column; align-items:flex-start; gap:.8rem}
}
@media (max-width:560px){
  .contract-row{flex-direction:column}
  .btn-copy{width:100%}
  #contractField{font-size:.72rem}
  .hero{padding:0 .8rem}
  .glitch{font-size:clamp(2.4rem,12vw,5rem)}
  .hero-sub{font-size:.82rem}
}
@media (max-height:700px){
  .hero-term{margin-bottom:.7rem}
  .glitch{font-size:clamp(2.2rem,8vw,5rem); margin:0}
  .hero-sub{margin-bottom:.8rem; font-size:.8rem}
  .cta-block{gap:.6rem}
  .contract{padding:.7rem .7rem .6rem}
  #contractField{height:40px; font-size:.72rem}
  .btn-buy{--bh:48px; font-size:.9rem}
  .buy-note{margin:.5rem 0 0; font-size:.7rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}