:root {
  --bg: #03070a;
  --bg-2: #061011;
  --panel: rgba(8, 20, 18, .72);
  --panel-solid: #07130f;
  --line: rgba(43, 255, 136, .16);
  --line-soft: rgba(43, 255, 136, .09);
  --accent: #2bff88;
  --accent-dim: #19c76a;
  --teal: #19f0c0;
  --text: #cdeede;
  --muted: #6c9a84;
  --warn: #ffcf4d;
  --discord: #5865f2;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --pixel: "VT323", var(--mono);
  --glow: 0 0 22px rgba(43, 255, 136, .35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(43,255,136,.10), transparent 62%),
    radial-gradient(800px 500px at 100% 110%, rgba(25,240,192,.07), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px; line-height: 1.55;
  overflow: hidden;                 /* no page scroll, ever */
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.hidden { display: none !important; }
b { font-weight: 700; }

/* ---------- ambient fx ---------- */
#hexrain { position: fixed; inset: 0; z-index: 0; opacity: .05; pointer-events: none; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 58%, rgba(0,0,0,.5)); }
.scanlines { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .14;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 3px, rgba(0,0,0,.14) 4px); }

/* ---------- shared bits ---------- */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .24em; color: var(--accent); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulse 2.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }
.cursor { animation: blink 1.05s steps(1) infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }
.fine { font-size: 12px; color: var(--muted); }
.good { color: var(--accent); }

.wordmark {
  font-family: var(--pixel);
  font-size: clamp(58px, 11vw, 96px);
  line-height: .82; letter-spacing: .04em;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(43,255,136,.5), 0 0 44px rgba(43,255,136,.22);
  position: relative;
}
.wordmark.big { font-size: clamp(66px, 12vw, 118px); }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%;
}
/* static chromatic depth — soft, no jitter */
.glitch::before { color: var(--teal); z-index: -1; opacity: .28; transform: translate(-1.5px, 0); }
.glitch::after  { color: var(--accent-dim); z-index: -2; opacity: .24; transform: translate(1.5px, 0); }

.tagline { color: var(--teal); letter-spacing: .14em; font-size: 13px; margin-top: 10px; min-height: 1.3em; }

/* ---------- buttons ---------- */
.btn {
  --b: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 22px; border: 1px solid var(--b);
  background: linear-gradient(180deg, rgba(43,255,136,.14), rgba(43,255,136,.05));
  color: var(--accent); font-family: var(--mono); font-weight: 700; font-size: 13px;
  letter-spacing: .09em; text-transform: uppercase; cursor: pointer;
  border-radius: 10px; transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}
.btn:hover { background: var(--accent); color: #042; box-shadow: var(--glow); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-ghost { border-color: var(--line); color: var(--text); background: rgba(255,255,255,.02); }
.btn-ghost:hover { border-color: var(--teal); color: #042; background: var(--teal); box-shadow: 0 0 22px rgba(25,240,192,.4); }
.btn-big { width: 100%; padding: 15px; font-size: 14px; }
.btn-discord { background: var(--discord); border: none; color: #fff; margin-top: 22px; padding: 15px 26px; }
.btn-discord:hover { background: #4752e6; color: #fff; box-shadow: 0 0 26px rgba(88,101,242,.55); }
.btn-mini { background: none; border: 1px solid var(--line); color: var(--muted); width: 30px; height: 30px;
  cursor: pointer; border-radius: 8px; font-family: var(--mono); font-size: 14px; transition: .15s; }
.btn-mini:hover { color: var(--accent); border-color: var(--accent); box-shadow: var(--glow); }

/* ---------- gate ---------- */
.gate { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; }
.gate-box {
  width: min(500px, 100%); text-align: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 38px 30px; backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px var(--line-soft);
  animation: rise .5s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.terminal { text-align: left; margin: 22px auto 0; max-width: 340px; min-height: 86px;
  background: #02060588; border: 1px solid var(--line-soft); border-radius: 10px; padding: 13px 15px; font-size: 13px; }
.terminal .tl { color: var(--muted); }
.terminal .tl b { color: var(--text); }
.terminal .ok { color: var(--accent); } .terminal .rq { color: var(--warn); }
.demo-note, #demo-note { margin-top: 12px; }

/* ================= APP SHELL ================= */
#app { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; animation: rise .5s ease both; }

.topbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(6,16,14,.92), rgba(6,16,14,.7)); backdrop-filter: blur(10px);
}
.logo { font-family: var(--pixel); font-size: 26px; color: var(--accent); letter-spacing: .06em; cursor: pointer; text-shadow: 0 0 14px rgba(43,255,136,.4); }
.status.mid { margin: 0 auto 0 8px; color: var(--muted); }
.status.mid .dot { background: var(--accent); }
.user { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; }
.user img { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--accent); box-shadow: 0 0 10px rgba(43,255,136,.3); }

/* stage = swapping panels, centered, no scroll */
.stage { flex: 1 1 auto; position: relative; overflow: hidden; }
.view {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  gap: 18px; padding: 22px clamp(16px, 4vw, 40px);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);
}
.view.active { opacity: 1; transform: none; pointer-events: auto; }
.view-head h2 { font-family: var(--pixel); font-size: clamp(34px, 6vw, 46px); color: var(--accent); letter-spacing: .05em; }
.view-head p { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* home */
.welcome { color: var(--muted); } .welcome b { color: var(--accent); }
.flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.flow-step { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; min-width: 104px;
  background: var(--panel); display: grid; gap: 1px; }
.flow-step .n { font-family: var(--pixel); font-size: 22px; color: var(--accent); }
.flow-step b { font-size: 12px; letter-spacing: .12em; }
.flow-step small { color: var(--muted); font-size: 11px; }
.flow-arrow { color: var(--accent-dim); font-size: 20px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.stats { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.stats > div { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 24px; min-width: 110px; background: var(--panel); }
.stats b { display: block; font-family: var(--pixel); font-size: 28px; color: var(--accent); letter-spacing: .03em; }
.stats span { font-size: 10px; letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }

/* plans */
.plans { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; width: 100%; max-width: 940px; }
.plan { flex: 1 1 200px; max-width: 300px; }
.plan { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
  padding: 22px 20px; display: flex; flex-direction: column; text-align: left;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease; }
.plan:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 40px rgba(43,255,136,.14); }
.plan.popular { border-color: var(--teal); box-shadow: 0 0 0 1px rgba(25,240,192,.25) inset; }
.plan .tag { position: absolute; top: -10px; left: 16px; background: var(--teal); color: #032; font-size: 10px;
  letter-spacing: .14em; padding: 3px 10px; font-weight: 800; border-radius: 6px; }
.plan .pname { font-size: 12px; letter-spacing: .18em; color: var(--muted); }
.plan .price { font-family: var(--pixel); font-size: 46px; color: var(--accent); line-height: 1; margin: 6px 0; }
.plan .price small { font-size: 16px; color: var(--muted); }
.plan ul { list-style: none; margin: 8px 0 16px; display: grid; gap: 6px; font-size: 12px; color: var(--text); }
.plan li::before { content: "◆ "; color: var(--accent-dim); }
.plan .btn { margin-top: auto; padding: 10px; font-size: 12px; }

/* loader + support panels */
.panel { border: 1px solid var(--line); border-radius: 16px; background: var(--panel); padding: 24px; width: min(620px, 100%); }
.loader-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; text-align: left; }
.loader-info { display: grid; gap: 11px; font-size: 14px; }
.info-row { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border-bottom: 1px dashed var(--line-soft); padding-bottom: 10px; }
.info-row span { color: var(--muted); }
.info-row b { color: var(--text); }
.term-line { color: var(--muted); } .term-line b { color: var(--text); }
.progress { height: 8px; border: 1px solid var(--line); border-radius: 6px; margin-top: 12px; overflow: hidden; }
.progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--teal)); box-shadow: 0 0 12px var(--accent); transition: width .18s; }
.support { display: grid; gap: 12px; text-align: left; }
.support-row { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line-soft); padding-bottom: 10px; font-size: 13px; }
.support-row b { color: var(--accent); font-weight: 600; } .support-row span { color: var(--muted); }
.support .btn-big { margin-top: 6px; }

/* bottom tab bar */
.tabbar { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 8px; border-top: 1px solid var(--line);
  background: linear-gradient(0deg, rgba(6,16,14,.95), rgba(6,16,14,.75)); backdrop-filter: blur(10px); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px;
  background: none; border: 1px solid transparent; border-radius: 10px; cursor: pointer;
  color: var(--muted); font-family: var(--mono); font-size: 10px; letter-spacing: .14em; font-weight: 600; transition: .16s; }
.tab span { font-size: 15px; line-height: 1; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); background: rgba(43,255,136,.1); box-shadow: inset 0 2px 0 var(--accent), 0 0 18px rgba(43,255,136,.18); text-shadow: 0 0 8px rgba(43,255,136,.5); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px;
  background: rgba(2,5,4,.76); backdrop-filter: blur(4px); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.modal-box { width: min(440px, 100%); background: var(--panel-solid); border: 1px solid var(--accent);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(43,255,136,.2); animation: rise .25s ease both; overflow: hidden; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px;
  border-bottom: 1px solid var(--line); color: var(--accent); letter-spacing: .1em; font-weight: 700; }
.modal-body { padding: 18px 16px; display: grid; gap: 10px; }
.kv { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--line-soft); padding-bottom: 8px; }
.kv span { color: var(--muted); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.kv b { color: var(--text); }
.modal .btn-big { border-radius: 0; margin: 0; }

/* toast */
.toast { position: fixed; z-index: 80; bottom: 86px; left: 50%; transform: translateX(-50%);
  background: var(--panel-solid); border: 1px solid var(--accent); border-radius: 10px; color: var(--text);
  padding: 12px 18px; font-size: 13px; box-shadow: 0 0 26px rgba(43,255,136,.3); animation: rise .25s ease; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .plans { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
  .plan .price { font-size: 38px; }
}
@media (max-width: 680px) {
  .status.mid { display: none; }
  .loader-panel { grid-template-columns: 1fr; text-align: center; }
  .loader-info { justify-items: center; }
  .flow-arrow { display: none; }
  .view { gap: 14px; }
}
@media (max-height: 640px) {
  .wordmark.big { font-size: clamp(44px, 9vw, 64px); }
  .flow { display: none; }
  .view { gap: 10px; }
  .hero-logo { display: none; }
}

/* ================= IMAGE ART ================= */
/* green-on-black PNGs: screen blend drops the black, keeps the glow */
.art { mix-blend-mode: screen; -webkit-user-drag: none; user-select: none; }

/* topbar logo */
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo-img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(43,255,136,.5)); }

/* badge in gate + hero logo on home */
.badge { width: 72px; height: 72px; object-fit: contain; margin: 0 auto 6px; display: block;
  filter: drop-shadow(0 0 14px rgba(43,255,136,.55)); animation: float 4s ease-in-out infinite; }
.hero-logo { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(43,255,136,.5)); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }

/* tab icons */
.tab-ico { width: 26px; height: 26px; object-fit: contain; }
.tab.active .tab-ico { filter: drop-shadow(0 0 7px rgba(43,255,136,.7)); }

/* ================= CLARITY BITS ================= */
/* gate */
.gate-box { position: relative; }
.lock-chip { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 10px; padding: 6px 15px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent); font-size: 11px; letter-spacing: .18em; font-weight: 700;
  background: rgba(43,255,136,.08); box-shadow: 0 0 16px rgba(43,255,136,.14); }

/* small inline icons on the chips (transparent PNGs — no blend) */
.chip-ico { width: 15px; height: 15px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(43,255,136,.6)); }

/* icon on each plan card */
.plan-ico { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; object-fit: contain;
  opacity: .95; filter: drop-shadow(0 0 7px rgba(43,255,136,.45)); pointer-events: none; }
.plan .pname { padding-right: 38px; }
.gate-lead { color: var(--text); font-size: 14px; line-height: 1.6; }
#unlock-note { margin-top: 12px; }

/* home: verified + big download */
.verified { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent); font-size: 12px; letter-spacing: .14em; font-weight: 700;
  background: rgba(43,255,136,.1); box-shadow: 0 0 18px rgba(43,255,136,.18); }
.verified b { color: var(--text); font-weight: 600; letter-spacing: 0; }
.lead { color: var(--text); font-size: 15px; max-width: 420px; }

.btn-xl { font-size: 16px; padding: 18px 40px; border-radius: 14px; letter-spacing: .1em;
  animation: breathe 3.4s ease-in-out infinite; }
.btn-xl small { font-weight: 500; opacity: .85; letter-spacing: 0; text-transform: none; margin-left: 4px; }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 16px rgba(43,255,136,.18); }
  50% { box-shadow: 0 0 30px rgba(43,255,136,.4); }
}
.btn-small { padding: 9px 18px; font-size: 12px; }

/* completed flow step */
.flow-step.done { border-color: var(--accent); background: rgba(43,255,136,.08); box-shadow: 0 0 16px rgba(43,255,136,.12); }
.flow-step.done .n { color: var(--accent); }