:root{
  --void:#0a0410;
  --void-2:#140a1e;
  --magenta:#ff2d95;
  --cyan:#00e5ff;
  --purple:#7b2dff;
  --hot-red:#ff1a3c;
  --gold:#ffc83d;
  --white:#ffffff;
  --ink:#0a0410;
}
*{ box-sizing:border-box; margin:0; padding:0 }
html, body{
  background:var(--void);
  color:var(--white);
  font-family:"Martian Mono", ui-monospace, monospace;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{ min-height:100vh }
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0 }
:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px }
.visually-hidden{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:90px 24px 70px;
  overflow:hidden;
  background:#000;
}
.hero-bg{
  position:absolute; inset:0;
  background:url(assets/hero_street.jpg) center/cover no-repeat;
  z-index:0;
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 30%, transparent 20%, rgba(10,4,16,.55) 75%),
    linear-gradient(180deg, rgba(10,4,16,.35) 0%, transparent 30%, rgba(10,4,16,.85) 100%);
}
/* rain overlay */
.rain{
  position:absolute; inset:-20% 0; z-index:1;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(102deg, transparent 0 7px, rgba(180,220,255,.10) 7px 8px),
    repeating-linear-gradient(99deg, transparent 0 13px, rgba(255,255,255,.06) 13px 14px);
  background-size:140px 140px, 200px 200px;
  animation:rain-fall 0.55s linear infinite;
  opacity:.7;
}
@keyframes rain-fall{
  from{ transform:translateY(-140px) }
  to{ transform:translateY(0) }
}
/* glitch hologram badge */
.holo{
  position:relative; z-index:3;
  font-family:"Rye", serif;
  font-size:clamp(20px, 3.4vw, 38px);
  letter-spacing:4px;
  color:var(--cyan);
  margin-bottom:12px;
  text-shadow:0 0 14px var(--cyan), 0 0 30px rgba(0,229,255,.5);
  animation:holo-jitter 3.4s steps(1) infinite;
}
.holo::before, .holo::after{
  content:"$CMC // KNOCKOFF DIVISION";
  position:absolute; left:0; top:0; width:100%;
  opacity:.65;
}
.holo::before{ color:var(--magenta); animation:holo-shift-a 2.1s steps(2) infinite }
.holo::after{ color:var(--hot-red); animation:holo-shift-b 1.7s steps(2) infinite }
@keyframes holo-jitter{
  0%,92%,100%{ transform:translate(0,0); opacity:1 }
  93%{ transform:translate(-3px,1px); opacity:.7 }
  95%{ transform:translate(3px,-2px); opacity:1 }
  97%{ transform:translate(-2px,0); opacity:.5 }
}
@keyframes holo-shift-a{
  0%,100%{ transform:translate(0,0) }
  50%{ transform:translate(-3px,-1px) }
}
@keyframes holo-shift-b{
  0%,100%{ transform:translate(0,0) }
  50%{ transform:translate(3px,1px) }
}

.hero-title{
  position:relative; z-index:3;
  font-family:"Rye", serif;
  font-size:clamp(56px, 11vw, 168px);
  line-height:.92;
  text-align:center;
  color:var(--white);
  letter-spacing:1px;
  text-shadow:
    0 0 6px rgba(255,255,255,.5),
    4px 4px 0 var(--hot-red),
    8px 8px 0 var(--purple),
    0 0 40px rgba(255,45,149,.6);
  max-width:14ch;
  margin-bottom:36px;
}
.hero-title .flick{ animation:neon-flicker 4.5s infinite }
.hero-title .flick2{ animation:neon-flicker 3.1s infinite 0.6s }
@keyframes neon-flicker{
  0%,18%,22%,25%,53%,57%,100%{ opacity:1 }
  19%,24%,55%{ opacity:.35 }
  20%,56%{ opacity:.8 }
}

/* CA neon box + COPY */
.hero-actions{
  position:relative; z-index:3;
  width:min(640px, 94vw);
  display:flex; flex-direction:column; gap:14px; align-items:stretch;
}
.ca-strip{
  display:flex; align-items:stretch;
  border:2px solid var(--cyan);
  box-shadow:0 0 16px rgba(0,229,255,.5), inset 0 0 14px rgba(0,229,255,.15);
  background:rgba(10,4,16,.82);
}
.ca-strip .ca-text{
  flex:1; min-width:0;
  padding:15px 18px;
  font-family:"Martian Mono", monospace;
  font-size:13px;
  letter-spacing:.5px;
  color:var(--cyan);
  word-break:break-all;
  display:flex; align-items:center;
}
.ca-strip .ca-text b{ color:var(--white); margin-right:8px; font-weight:700 }
.copy-btn{
  background:var(--hot-red);
  color:var(--white);
  font-family:"Rye", serif;
  font-size:16px;
  letter-spacing:2px;
  padding:0 26px;
  border-left:2px solid var(--cyan);
  white-space:nowrap;
  transition:background .14s, box-shadow .14s;
}
.copy-btn:hover{ background:#ff3b58; box-shadow:0 0 20px rgba(255,26,60,.7) }
.copy-btn.is-copied{ background:var(--purple) }

.hero-btns{ display:flex; gap:14px; flex-wrap:wrap }
.btn{
  flex:1; min-width:160px;
  text-align:center;
  font-family:"Rye", serif;
  font-size:19px;
  letter-spacing:2px;
  padding:16px 20px;
  transition:transform .12s, box-shadow .16s, background .16s;
}
.btn-ghost{
  background:rgba(10,4,16,.6);
  color:var(--cyan);
  border:2px solid var(--cyan);
  box-shadow:0 0 14px rgba(0,229,255,.4), inset 0 0 12px rgba(0,229,255,.12);
}
.btn-ghost:hover:not(.disabled){ background:rgba(0,229,255,.12); transform:translateY(-2px) }
.btn-get{
  background:var(--hot-red);
  color:var(--white);
  border:2px solid var(--magenta);
  box-shadow:0 0 18px rgba(255,45,149,.6);
}
.btn-get:hover:not(.disabled){ background:#ff3b58; transform:translateY(-2px); box-shadow:0 0 28px rgba(255,45,149,.85) }
.btn.disabled{ opacity:.45; cursor:not-allowed }

/* ============ MARQUEE ============ */
.marquee{
  background:var(--hot-red);
  border-top:3px solid var(--magenta);
  border-bottom:3px solid var(--magenta);
  overflow:hidden;
  padding:12px 0;
  position:relative;
  z-index:4;
}
.marquee-track{
  display:flex; gap:0;
  white-space:nowrap;
  width:max-content;
  animation:marquee 26s linear infinite;
}
.marquee-track span{
  font-family:"Rye", serif;
  font-size:24px;
  letter-spacing:2px;
  color:var(--white);
  padding:0 28px;
  text-shadow:0 0 10px rgba(255,255,255,.45);
}
.marquee-track span::after{ content:"//"; color:var(--gold); margin-left:56px }
@keyframes marquee{
  from{ transform:translateX(0) }
  to{ transform:translateX(-50%) }
}

/* ============ LORE ============ */
.lore{
  position:relative;
  background:var(--void);
  padding:110px 24px 120px;
  overflow:hidden;
  text-align:center;
}
.lore-coin{
  position:absolute; left:50%; top:50%;
  width:min(560px, 86vw); height:auto;
  transform:translate(-50%,-50%);
  opacity:.14;
  animation:coin-spin 22s linear infinite;
  pointer-events:none;
  z-index:0;
  filter:drop-shadow(0 0 40px rgba(255,26,60,.5));
}
@keyframes coin-spin{ from{ transform:translate(-50%,-50%) rotate(0) } to{ transform:translate(-50%,-50%) rotate(360deg) } }
.lore p{
  position:relative; z-index:2;
  font-family:"Rye", serif;
  font-size:clamp(22px, 3.2vw, 40px);
  line-height:1.4;
  color:var(--white);
  max-width:18ch;
  margin:0 auto;
  text-shadow:0 2px 0 #000, 0 0 30px rgba(0,0,0,.8);
}
.lore p .red{ color:var(--hot-red); text-shadow:0 0 16px rgba(255,26,60,.7) }
.lore p .cyan{ color:var(--cyan); text-shadow:0 0 16px rgba(0,229,255,.7) }

/* ============ DIVISIONS (alternating bands) ============ */
.divisions{ background:var(--void) }
.band{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  min-height:380px;
  border-top:3px solid var(--purple);
}
.band:last-child{ border-bottom:3px solid var(--purple) }
.band.flip .band-visual{ order:2 }
.band.flip .band-text{ order:1 }
.band-visual{
  position:relative;
  overflow:hidden;
  background:#000;
  min-height:320px;
}
.band-visual img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s ease;
}
.band:hover .band-visual img{ transform:scale(1.05) }
.band-visual::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 60%, rgba(123,45,255,.25));
  pointer-events:none;
}
.band-text{
  display:flex; flex-direction:column; justify-content:center;
  padding:48px 56px;
  background:var(--void-2);
}
.band-num{
  font-family:"Martian Mono", monospace;
  font-size:13px;
  letter-spacing:4px;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(0,229,255,.6);
  margin-bottom:10px;
}
.band-text h3{
  font-family:"Rye", serif;
  font-size:clamp(30px, 3.8vw, 52px);
  line-height:1;
  color:var(--white);
  margin-bottom:16px;
  text-shadow:3px 3px 0 var(--hot-red), 0 0 24px rgba(255,45,149,.5);
}
.band-text p{
  font-family:"Martian Mono", monospace;
  font-size:13px;
  line-height:1.7;
  color:#c9bcd8;
}
.band:nth-child(odd) .band-text h3{ text-shadow:3px 3px 0 var(--cyan), 0 0 24px rgba(0,229,255,.5) }
.band:nth-child(odd) .band-num{ color:var(--magenta); text-shadow:0 0 12px rgba(255,45,149,.6) }

/* ============ FOOTER ============ */
footer{
  background:#000;
  border-top:3px solid var(--magenta);
  padding:40px 24px 18px;
  text-align:center;
}
.foot-coin{
  width:64px; height:64px; margin:0 auto 18px;
  display:block;
  filter:drop-shadow(0 0 18px rgba(255,200,61,.6));
}
.foot-links{
  display:flex; gap:34px; justify-content:center; flex-wrap:wrap;
  margin-bottom:24px;
}
.foot-links a{
  font-family:"Rye", serif;
  font-size:20px;
  letter-spacing:2px;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(0,229,255,.55);
  transition:color .14s, text-shadow .14s;
}
.foot-links a:hover:not(.disabled){ color:var(--magenta); text-shadow:0 0 16px rgba(255,45,149,.8) }
.foot-links a.disabled{ opacity:.4; cursor:not-allowed }
.foot-copy{
  font-family:"Martian Mono", monospace;
  font-size:11px;
  letter-spacing:3px;
  color:#5a4a6a;
}

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(40px);
  background:var(--void-2);
  color:var(--cyan);
  border:2px solid var(--cyan);
  box-shadow:0 0 22px rgba(0,229,255,.6);
  padding:13px 24px;
  font-family:"Martian Mono", monospace;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:0;
  transition:transform .25s, opacity .25s;
  z-index:200;
  pointer-events:none;
}
.toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .hero{ padding:70px 18px 50px; min-height:auto }
  .hero-title{ font-size:54px; margin-bottom:26px }
  .holo{ font-size:18px; letter-spacing:2px }
  .ca-strip{ flex-direction:column }
  .copy-btn{ border-left:none; border-top:2px solid var(--cyan); padding:12px }
  .ca-strip .ca-text{ font-size:11px }
  .hero-btns{ flex-direction:column }
  .marquee-track span{ font-size:18px }
  .band{ grid-template-columns:1fr; min-height:auto }
  .band.flip .band-visual{ order:1 }
  .band.flip .band-text{ order:2 }
  .band-visual{ min-height:240px }
  .band-text{ padding:34px 26px }
  .lore{ padding:80px 20px 90px }
  .foot-links{ gap:22px }
}

@media (prefers-reduced-motion: reduce){
  .rain, .holo, .holo::before, .holo::after,
  .hero-title .flick, .hero-title .flick2,
  .marquee-track, .lore-coin{ animation:none !important }
  .holo::before, .holo::after{ display:none }
  .band:hover .band-visual img{ transform:none }
}