/* ============================================================
   HOODRUPTOR — phosphor console theme
   palette: two hues only, like a green monochrome monitor
   ============================================================ */
:root{
  --ink:      #041108;   /* page background */
  --panel:    #08200f;   /* raised surfaces */
  --panel-2:  #0b2a13;   /* hover / inner surfaces */
  --line:     #1c4a22;   /* hairline borders */
  --acid:     #a9f402;   /* the toxin */
  --acid-hot: #d6ff4d;   /* highlights / glitch layer */
  --acid-dim: #6d9c2a;   /* secondary text */
  --moss:     #3f6b33;   /* muted text */
  --font-display:'Chakra Petch', sans-serif;
  --font-mono:'Share Tech Mono', monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--acid-dim);
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--acid);color:var(--ink)}
img{display:block;max-width:100%;height:auto}
a{color:var(--acid);text-decoration:none}
a:hover{color:var(--acid-hot)}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
b{color:var(--acid);font-weight:400}
em{font-style:italic}

/* faint CRT scanlines over everything */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.16) 3px 4px);
  mix-blend-mode:multiply;
}

/* ---------------- panels: HUD corner brackets ---------------- */
.panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
}
.panel::before,.panel::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
}
.panel::before{top:-1px;left:-1px;border-top:2px solid var(--acid);border-left:2px solid var(--acid)}
.panel::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--acid);border-right:2px solid var(--acid)}

/* ---------------- nav ---------------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1.5rem;
  padding:.7rem clamp(1rem,4vw,2.5rem);
  background:rgba(4,17,8,.9);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.nav-brand{display:flex;align-items:center;gap:.6rem}
.nav-brand img{width:40px;height:40px}
.nav-word{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:1.05rem;letter-spacing:.04em;color:var(--acid);
}
.nav-word em{color:var(--acid-hot)}
.nav-links{display:flex;gap:1.4rem;margin-left:auto}
.nav-links a{color:var(--acid-dim);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.nav-links a:hover{color:var(--acid)}
.nav-cta{display:flex;align-items:center;gap:.7rem}
.ca-pill{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.78rem;color:var(--acid-dim);
  background:var(--panel);border:1px solid var(--line);
  padding:.45rem .7rem;cursor:pointer;max-width:220px;
}
.ca-pill:hover{border-color:var(--acid);color:var(--acid)}
.ca-label{color:var(--ink);background:var(--acid);padding:0 .3rem;font-weight:700}
#caText{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-block;
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:.92rem;letter-spacing:.06em;
  padding:.78rem 1.5rem;border:1px solid var(--acid);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-solid{background:var(--acid);color:var(--ink)}
.btn-solid:hover{background:var(--acid-hot);color:var(--ink);transform:translateY(-2px);box-shadow:0 0 22px rgba(169,244,2,.35)}
.btn-ghost{color:var(--acid);background:transparent}
.btn-ghost:hover{background:rgba(169,244,2,.08);transform:translateY(-2px)}
.btn.is-soon{opacity:.45;pointer-events:none}
.btn.is-soon::after{content:" [SOON]"}

/* ---------------- hero ---------------- */
.hero{position:relative;overflow:hidden;padding:clamp(4rem,10vh,7rem) 1.25rem clamp(3.5rem,8vh,6rem);border-bottom:1px solid var(--line)}
#rain{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.hero-inner{position:relative;max-width:880px;margin:0 auto;text-align:center;z-index:2}
.eyebrow{color:var(--acid-dim);font-size:.85rem;letter-spacing:.22em}
.blink{animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

h1.glitch{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:clamp(3rem,11vw,7.2rem);
  line-height:.95;color:var(--acid);
  letter-spacing:-.01em;
  margin:.35em 0 .18em;
  position:relative;
  text-shadow:0 0 32px rgba(169,244,2,.35);
}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;overflow:hidden;
}
.glitch::before{color:var(--acid-hot);animation:glitchA 5.5s infinite steps(1);opacity:.8}
.glitch::after{color:#2f7a12;animation:glitchB 5.5s infinite steps(1);opacity:.8}
@keyframes glitchA{
  0%,91%,100%{clip-path:inset(0 0 100% 0);transform:none}
  92%{clip-path:inset(12% 0 66% 0);transform:translate(-5px,-2px)}
  94%{clip-path:inset(60% 0 18% 0);transform:translate(4px,2px)}
  96%{clip-path:inset(30% 0 44% 0);transform:translate(-3px,1px)}
}
@keyframes glitchB{
  0%,90%,100%{clip-path:inset(0 0 100% 0);transform:none}
  93%{clip-path:inset(70% 0 8% 0);transform:translate(5px,2px)}
  95%{clip-path:inset(6% 0 78% 0);transform:translate(-4px,-1px)}
  97%{clip-path:inset(42% 0 34% 0);transform:translate(3px,-2px)}
}
.hero-sub{
  font-size:clamp(.8rem,2.4vw,1rem);letter-spacing:.28em;color:var(--acid-dim);
  margin-bottom:2rem;
}

.terminal{max-width:620px;margin:0 auto;text-align:left}
.term-bar{display:flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border-bottom:1px solid var(--line)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.term-bar .dot:first-child{background:var(--acid)}
.term-title{margin-left:auto;font-size:.72rem;color:var(--moss);letter-spacing:.1em}
.term-body{
  font-family:var(--font-mono);font-size:.86rem;color:var(--acid);
  padding:1rem 1.1rem;min-height:9.5em;white-space:pre-wrap;word-break:break-word;
}

.hero-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.hero-actions.center{margin-top:2.5rem}
.hero-links{margin-top:1.3rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase}
.hero-links span{color:var(--moss);margin:0 .55rem}
.hero-links a.is-soon{opacity:.4;pointer-events:none}
.hero-links a.is-soon::after{content:" [soon]"}

/* ---------------- hazard tape ---------------- */
.tape-wrap{position:relative;padding:2.6rem 0;overflow:hidden}
.tape{
  position:relative;white-space:nowrap;overflow:hidden;
  background:var(--acid);color:var(--ink);
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  box-shadow:0 0 26px rgba(169,244,2,.28);
}
.tape-a{transform:rotate(-1.6deg) scale(1.02)}
.tape-b{transform:rotate(1.4deg) scale(1.02);margin-top:.55rem;background:var(--panel-2);color:var(--acid);border-color:var(--acid)}
.tape-track{display:inline-flex;animation:tape 26s linear infinite}
.tape-b .tape-track{animation-direction:reverse;animation-duration:32s}
.tape-track span{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:.95rem;letter-spacing:.12em;padding:.55rem 0;
}
@keyframes tape{to{transform:translateX(-50%)}}

/* ---------------- sections ---------------- */
.section{max-width:1100px;margin:0 auto;padding:clamp(3.5rem,9vh,6.5rem) 1.25rem}
.sec-head{max-width:720px;margin-bottom:2.8rem}
.sec-tag{font-size:.8rem;letter-spacing:.24em;color:var(--acid-dim);margin-bottom:.7rem}
.sec-head h2{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:clamp(1.7rem,5vw,2.7rem);color:var(--acid);line-height:1.08;
}
.sec-head h2 em{color:var(--acid-hot)}
.sec-sub{margin-top:.9rem;font-size:.95rem;max-width:56ch}

/* protocol cards */
.proto-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.proto-card{padding:1.6rem 1.4rem;transition:transform .15s ease,border-color .15s ease}
.proto-card:hover{transform:translateY(-4px);border-color:var(--acid)}
.proto-step{
  display:inline-block;font-size:.72rem;letter-spacing:.2em;color:var(--ink);
  background:var(--acid);padding:.15rem .5rem;margin-bottom:1.1rem;font-weight:700;
}
.proto-icon{width:44px;height:44px;color:var(--acid);display:block;margin-bottom:1rem}
.proto-card h3,.buy-steps h3{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:1.25rem;color:var(--acid);letter-spacing:.04em;margin-bottom:.5rem;
}
.proto-card p{font-size:.9rem}

/* transmission banner */
.transmission{max-width:1100px;margin:0 auto;padding:0 1.25rem}
.trans-frame{padding:.6rem}
.trans-frame img{width:100%;border:1px solid var(--line)}
.trans-frame figcaption{
  padding:.6rem .4rem .2rem;font-size:.72rem;letter-spacing:.22em;color:var(--moss);text-align:center;
}

/* ---------------- burn tracker ---------------- */
.vault{padding:clamp(1.4rem,4vw,2.6rem)}
.vault-status{
  display:flex;align-items:center;gap:.6rem;
  font-size:.78rem;letter-spacing:.12em;color:var(--acid-dim);
  border-bottom:1px dashed var(--line);padding-bottom:1rem;margin-bottom:1.8rem;
  text-transform:uppercase;
}
.live-dot{width:10px;height:10px;border-radius:50%;background:var(--moss);flex:none}
.live-dot.on{background:var(--acid);box-shadow:0 0 10px var(--acid);animation:blink 1.6s steps(2) infinite}
.live-dot.err{background:#c8b400}

.vault-hero{text-align:center;margin-bottom:2.2rem}
.vault-label{font-size:.8rem;letter-spacing:.28em;color:var(--acid-dim)}
.vault-number{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:clamp(2.6rem,9vw,5.2rem);color:var(--acid);line-height:1.1;
  text-shadow:0 0 30px rgba(169,244,2,.3);
}
.vault-ticker{font-size:clamp(.9rem,2.5vw,1.3rem);color:var(--acid-dim)}
.haz-track{
  height:22px;border:1px solid var(--acid);margin:1.4rem auto .5rem;max-width:640px;
  background:var(--ink);padding:3px;
}
.haz-fill{
  height:100%;min-width:2px;
  background:repeating-linear-gradient(45deg,var(--acid) 0 12px,transparent 12px 24px);
  background-size:34px 34px;
  animation:march 1.2s linear infinite;
  transition:width 1s ease;
}
@keyframes march{to{background-position:34px 0}}
.haz-caption{font-size:.8rem;letter-spacing:.2em;color:var(--acid-dim)}
.haz-caption span{color:var(--acid)}

.vault-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:center;margin-bottom:2.2rem}
.vstat{border:1px dashed var(--line);padding:1.1rem .6rem}
.vstat-num{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:clamp(1.3rem,4vw,1.9rem);color:var(--acid);
}
.vstat-label{font-size:.7rem;letter-spacing:.22em;color:var(--moss);margin-top:.25rem}

.purge-head{font-size:.82rem;letter-spacing:.2em;color:var(--acid)}
.purge-note{color:var(--moss);letter-spacing:.08em;text-transform:lowercase}
.purge-rows{margin-top:.9rem;border-top:1px solid var(--line)}
.purge-row{
  display:grid;grid-template-columns:110px 1fr auto;gap:1rem;align-items:baseline;
  padding:.65rem .2rem;border-bottom:1px dashed var(--line);font-size:.85rem;
  animation:rowIn .4s ease both;
}
@keyframes rowIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1}}
.purge-time{color:var(--moss)}
.purge-amt{color:var(--acid)}
.purge-amt::before{content:"− ";color:var(--acid-dim)}
.purge-tx a{font-size:.8rem;letter-spacing:.06em}
.purge-empty{padding:1rem .2rem;color:var(--moss);font-size:.85rem}

/* ---------------- acquire ---------------- */
.buy-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.buy-steps li{padding:1.5rem 1.4rem}
.buy-steps p{font-size:.9rem}

/* ---------------- footer ---------------- */
.footer{
  border-top:1px solid var(--line);text-align:center;
  padding:3.2rem 1.25rem 2.4rem;display:flex;flex-direction:column;align-items:center;gap:.9rem;
}
.foot-line{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  color:var(--acid);letter-spacing:.08em;font-size:1rem;
}
.foot-line em{color:var(--acid-hot)}
.foot-small{font-size:.78rem;max-width:60ch;color:var(--acid-dim)}
.foot-small.dim{color:var(--moss)}

/* toast */
.toast{
  position:fixed;bottom:1.4rem;left:50%;transform:translate(-50%,150%);
  background:var(--acid);color:var(--ink);font-weight:700;font-size:.8rem;letter-spacing:.14em;
  padding:.6rem 1.1rem;z-index:70;transition:transform .25s ease;
}
.toast.show{transform:translate(-50%,0)}

/* ---------------- responsive ---------------- */
@media (max-width:860px){
  .proto-grid,.buy-steps,.vault-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav-links{display:none}
  .nav{gap:.8rem}
  .nav-cta{margin-left:auto}
  #caText{max-width:70px}
}
@media (max-width:600px){
  .proto-grid,.buy-steps{grid-template-columns:1fr}
  .vault-grid{grid-template-columns:1fr;gap:.6rem}
  .purge-row{grid-template-columns:86px 1fr auto;gap:.6rem;font-size:.78rem}
  .btn{width:100%;text-align:center}
  .hero-actions{flex-direction:column;align-items:stretch}
  .tape-track span{font-size:.8rem}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  #rain{display:none}
}

/* ---------------- hero contract address — click to copy ---------------- */
.ca-hero{
  display:inline-flex;align-items:center;gap:.7rem;
  margin-top:1.6rem;padding:.85rem 1.1rem;max-width:100%;
  background:var(--panel);border:1px solid var(--line);
  font-family:var(--font-mono);color:var(--acid);font-size:.95rem;
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.ca-hero:hover{border-color:var(--acid);box-shadow:0 0 20px rgba(169,244,2,.18)}
.ca-hero:active{transform:translateY(1px)}
.ca-hero-label{background:var(--acid);color:var(--ink);font-weight:700;padding:.12rem .45rem;flex:none}
.ca-hero-addr{letter-spacing:.02em;line-height:1.45;word-break:break-all;text-align:left}
.ca-hero-ic{width:15px;height:15px;flex:none;color:var(--acid-dim)}
.ca-hero:hover .ca-hero-ic{color:var(--acid)}
.ca-hero-hint{
  flex:none;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--moss);border-left:1px solid var(--line);padding-left:.7rem;
}
.ca-hero:hover .ca-hero-hint{color:var(--acid-dim)}
@media (max-width:640px){
  .ca-hero{font-size:.78rem;gap:.55rem;padding:.75rem .8rem}
  .ca-hero-hint{display:none}
}