/* ====== TICKER ====== */
.ticker{
  border-bottom:1px solid var(--rule);
  background:var(--ink);
  color:var(--bg);
  overflow:hidden;
  white-space:nowrap;
  position:sticky; top:0; z-index:40;
}
.ticker-track{
  display:inline-flex;
  gap:48px;
  padding:9px 0;
  animation:ticker 38s linear infinite;
  font-family:"JetBrains Mono", monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.ticker-track span{display:inline-flex;align-items:center;gap:48px;}
.ticker-track i{font-style:normal;color:var(--mag);}
.ticker-track b{font-style:normal;font-weight:400;}

/* ====== HEADER ====== */
header.top{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding:14px var(--pad);
  border-bottom:1px solid var(--rule);
  gap:24px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand .dot{
  width:10px;height:10px;background:var(--mag);
  border:1px solid var(--ink);
  transform:rotate(45deg);
}
.brand .name{font-family:"Archivo Black", sans-serif; font-size:14px; letter-spacing:0.02em;}
.brand .slash{color:var(--mute);}
nav.top-nav{display:flex; gap:22px; justify-content:center;}
nav.top-nav a{position:relative; padding:4px 0;}
nav.top-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--ink);
  transition:right .25s ease;
}
nav.top-nav a:hover::after{ right:0; }
.meta-right{display:flex; justify-content:flex-end; gap:14px; align-items:center;}
.meta-right .pill{
  border:1px solid var(--ink); padding:5px 9px; display:inline-flex; gap:8px; align-items:center;
  font-family:"JetBrains Mono", monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
}
.pill.mag{ background:var(--mag); }
.led{
  width:7px;height:7px;background:var(--acid); border:1px solid var(--ink); display:inline-block;
  animation:blink 1.6s steps(2, end) infinite;
}

/* ====== SECTION HEAD ====== */
.sec-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  border-bottom:1px solid var(--ink);
  padding:18px var(--pad) 14px;
  gap:24px;
}
.sec-head h2{
  margin:0;
  font-family:"Archivo Black", sans-serif;
  font-size:clamp(28px, 4vw, 48px);
  letter-spacing:-0.025em;
  line-height:0.95;
}
.sec-head .idx{
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--mute);
  white-space:nowrap;
}

/* ====== ROLE TAGS ====== */
.role-row{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:18px;
  align-items:center;
}
.role-tag{
  border:1px solid var(--ink);
  padding:7px 12px 6px;
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  background:#fff;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.role-tag:hover{ background:var(--ink); color:var(--bg); transform: translate(-1px,-1px); }
.role-tag.solid{ background:var(--ink); color:var(--bg); }
.role-tag.acid{ background:var(--acid); }
.role-tag.mag{ background:var(--mag); border-color:var(--ink); color:var(--bg); }

/* ====== STICKERS ====== */
.sticker{
  position:absolute;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--ink);
  background:#fff;
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  padding:8px 12px;
  z-index:5;
  user-select:none;
}
.sticker.acid{ background:var(--acid); }
.sticker.mag{ background:var(--mag); color:var(--bg); border-color:var(--ink); }
.sticker.ink{ background:var(--ink); color:var(--bg); }
.sticker.round{
  border-radius:999px;
  width:120px; height:120px;
  padding:0;
  text-align:center; line-height:1.1;
  font-size:10.5px;
}
/* sticker placements (hero) */
.s1{ top:18px; left:38%; transform:rotate(-6deg); background:var(--acid);}
.s4{ bottom:30px; right:38%; transform:rotate(4deg); background:var(--mag); color:var(--bg);}

/* ====== BUTTONS ====== */
a.btn-acid{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--acid); color:var(--ink);
  font-family:"JetBrains Mono", monospace; font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:14px 16px;
  border:1px solid var(--acid);
  transition: transform .2s ease, background .2s ease;
}
a.btn-acid:hover{ transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--bg);}
a.btn-ghost-w, button.btn-ghost-w{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--bg); border:1px solid #3a3a3a;
  font-family:"JetBrains Mono", monospace; font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:14px 16px;
  background:transparent;
  cursor:pointer;
}
a.btn-ghost-w:hover, button.btn-ghost-w:hover{ border-color:var(--bg); background:#1a1a1a;}

/* ====== MODAL ====== */
.modal-backdrop{
  position:fixed; inset:0; z-index:100;
  background:rgba(10,10,10,0.78);
  backdrop-filter: blur(4px);
  display:none;
  align-items:center; justify-content:center;
  padding:24px;
  opacity:0;
  transition: opacity .2s ease;
}
.modal-backdrop.open{ display:flex; opacity:1;}
.modal{
  background:var(--bg);
  color:var(--ink);
  border:1.5px solid var(--ink);
  box-shadow: 14px 14px 0 var(--acid), 14px 14px 0 1.5px var(--ink);
  max-width:620px; width:100%;
  position:relative;
  transform: translateY(10px);
  transition: transform .25s ease;
}
.modal-backdrop.open .modal{ transform: none;}
.modal-top{
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--ink);
  padding:14px 18px;
  background:var(--ink);
  color:var(--bg);
  font-family:"JetBrains Mono", monospace; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
}
.modal-top .mt-l{display:flex; align-items:center; gap:10px;}
.modal-top .mt-l .dt{ width:8px; height:8px; background:var(--acid); display:inline-block; transform:rotate(45deg);}
.modal-close{
  background:transparent; border:1px solid #444;
  color:var(--bg);
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-family:"JetBrains Mono", monospace; font-size:14px;
  line-height:1;
  transition: background .15s ease, border-color .15s ease;
}
.modal-close:hover{ background:var(--acid); color:var(--ink); border-color:var(--acid);}
.modal-body{ padding:32px 28px 28px; }
.modal-body .mini-title{
  font-family:"JetBrains Mono", monospace; font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--mute); margin-bottom:14px;
  display:flex; gap:10px; align-items:center;
}
.modal-body .mini-title::before{
  content:""; display:inline-block; width:24px; height:1px; background:var(--ink);
}
.modal-body h3.mt{
  margin:0 0 22px;
  font-family:"Archivo Black", sans-serif;
  font-size:clamp(26px, 3.4vw, 40px);
  line-height:1.02; letter-spacing:-0.025em;
  max-width:22ch; text-wrap:balance;
}
.modal-body h3.mt em{
  font-style:normal; background:var(--acid); padding:0 5px 2px;
}
.modal-body p.bd{
  margin:0 0 16px; font-size:17px; line-height:1.55; max-width:54ch;
}
.modal-body p.bd strong{ background:var(--acid); padding:0 4px; font-weight:700; }
.modal-body p.bd .price{
  font-family:"Archivo Black", sans-serif;
  background:var(--ink); color:var(--bg);
  padding:0 6px 2px; letter-spacing:-0.01em;
}
.modal-body .ps{
  margin-top:18px;
  border-top:1px dashed var(--ink);
  padding-top:14px;
  font-family:"JetBrains Mono", monospace; font-size:11.5px;
  letter-spacing:0.04em; color:var(--ink); line-height:1.5;
}
.modal-body .ps b{
  font-family:"JetBrains Mono", monospace; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; margin-right:6px;
}
.modal-actions{ margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }
.modal-actions a.btn-acid-dark{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--bg);
  font-family:"JetBrains Mono", monospace; font-size:12px;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:13px 16px; border:1px solid var(--ink);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.modal-actions a.btn-acid-dark:hover{ background:var(--acid); color:var(--ink); transform:translate(-1px,-1px);}
.modal-actions button.btn-dismiss{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--ink);
  font-family:"JetBrains Mono", monospace; font-size:12px;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:13px 14px; border:1px solid var(--ink); cursor:pointer;
}
.modal-actions button.btn-dismiss:hover{ background:var(--ink); color:var(--bg);}
@media (max-width:640px){
  .modal{ box-shadow: 8px 8px 0 var(--acid), 8px 8px 0 1.5px var(--ink);}
  .modal-body{ padding:24px 20px 22px;}
}

/* ====== FOOTER ====== */
footer.bot{
  padding:18px var(--pad);
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:24px;
  font-family:"JetBrains Mono", monospace;
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink);
  align-items:center;
}
footer.bot .left{ text-align:left;}
footer.bot .mid{ text-align:center; color:var(--mute);}
footer.bot .right{ text-align:right;}
footer.bot a:hover{ color:var(--mute);}

/* ====== CHROME RESPONSIVE ====== */
@media (max-width: 640px){
  nav.top-nav{ display:none;}
  header.top{ grid-template-columns: 1fr auto;}
  .s1, .s2, .s3, .s4{ display:none;}
  footer.bot{ grid-template-columns:1fr; text-align:left;}
  footer.bot .mid, footer.bot .right{ text-align:left;}
}