/* Krypto Snatcher landing page · the app's Neon Grid look (colours and fonts as miniapp/src/style.css). */
@font-face { font-family: "Orbitron"; font-weight: 400 900; font-display: swap; src: url("fonts/orbitron.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 500; font-display: swap; src: url("fonts/rajdhani-500.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-weight: 700; font-display: swap; src: url("fonts/rajdhani-700.woff2") format("woff2"); }

:root {
  --bg: #05010f;
  --text: #e8f9ff;
  --hint: #8f9cc8;
  --cyan: #00f0ff;
  --pink: #ff2bd6;
  --green: #39ff88;
  --red: #ff3b6b;
  --amber: #ffb800;
  --panel: #0a0f24d9;
  --row: #0c0a22d9;
  --display: "Orbitron", "Rajdhani", sans-serif;
  --cut: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --cut-s: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: linear-gradient(180deg, #05010f 0%, #0b0420 55%, #1a0633 100%) fixed;
  color: var(--text);
  font: 500 18px/1.45 "Rajdhani", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
/* neon grid floor */
body::before {
  content: ""; position: fixed; left: -50%; right: -50%; bottom: 0; height: 42vh; z-index: 0; pointer-events: none;
  background:
    linear-gradient(#ff2bd626 2px, transparent 2px) 0 0 / 100% 26px,
    linear-gradient(90deg, #00f0ff38 2px, transparent 2px) 0 0 / 34px 100%;
  transform: perspective(220px) rotateX(58deg); transform-origin: bottom;
  -webkit-mask: linear-gradient(transparent, #000 70%); mask: linear-gradient(transparent, #000 70%);
  animation: floor 3s linear infinite;
}
@keyframes floor { to { background-position: 0 26px, 0 0; } }
/* CRT scanlines */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(0deg, #ffffff07 0 1px, transparent 1px 3px);
}
main { position: relative; z-index: 1; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
a { color: var(--cyan); }
p { margin: 0 0 14px; }
b { font-weight: 700; }
.muted { color: var(--hint); }

/* ---------- headings ---------- */
.kicker { font: 600 12px/1.2 var(--display); text-transform: uppercase; letter-spacing: 3px; color: var(--pink); margin: 0 0 10px; text-shadow: 0 0 10px #ff2bd688; }
h2 { font: 900 clamp(24px, 5.4vw, 38px)/1.12 var(--display); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 16px; color: #fff; text-shadow: 2px 0 var(--pink), -2px 0 var(--cyan), 0 0 18px #00f0ff66; }
h3 { font: 700 15px/1.25 var(--display); text-transform: uppercase; letter-spacing: 1.2px; margin: 0 0 8px; color: var(--cyan); text-shadow: 0 0 10px #00f0ff66; }
section { padding: 48px 0; position: relative; }
.lead { font-size: 20px; color: var(--text); max-width: 640px; }

/* glitch text (as the app's brand name) */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.glitch::before { color: var(--cyan); text-shadow: -2px 0 var(--pink); animation: slice 3.2s infinite steps(1); }
.glitch::after { color: var(--pink); text-shadow: 2px 0 var(--cyan); animation: slice 2.7s infinite steps(1) reverse; }
@keyframes slice {
  0%, 86%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  88% { clip-path: inset(20% 0 55% 0); transform: translate(-3px, 0); }
  90% { clip-path: inset(60% 0 10% 0); transform: translate(3px, 0); }
  92% { clip-path: inset(40% 0 35% 0); transform: translate(-2px, 0); }
  94% { clip-path: inset(0 0 100% 0); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 26px;
  font: 700 14px/1 var(--display); text-transform: uppercase; letter-spacing: 1.6px; text-decoration: none; cursor: pointer;
  border: 0; clip-path: var(--cut-s); color: #001014; background: var(--cyan); box-shadow: inset 0 0 14px #ffffff66;
  transition: filter 0.15s, transform 0.15s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: scale(0.98); filter: brightness(1.3); }
.btn.pink { background: var(--pink); color: #fff; text-shadow: 0 0 6px #ffffffaa; }
.btn.gold { background: var(--amber); color: #1a1000; }
.btn.ghost { background: #00f0ff14; color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.btn:disabled, .btn.locked { background: #1a1830; color: var(--hint); box-shadow: inset 0 0 0 1px #8f9cc855; cursor: not-allowed; filter: none; transform: none; text-shadow: none; }
.btn.wide { width: 100%; }
.textlink { background: none; border: 0; padding: 6px 2px; color: var(--cyan); font: 700 16px "Rajdhani", sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- top bar ---------- */
.top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .logo { width: 38px; height: 38px; display: grid; place-items: center; background: var(--cyan); color: #000; font: 900 20px/1 serif; clip-path: var(--cut-s); box-shadow: 0 0 18px var(--cyan); }
.brand .name { font: 900 17px/1 var(--display); letter-spacing: 1px; color: #fff; text-shadow: 2px 0 var(--pink), -2px 0 var(--cyan), 0 0 16px #00f0ff88; }
.top .tag { font: 700 11px var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--amber); border: 1px solid #ffb80088; padding: 6px 9px; clip-path: var(--cut-s); background: #ffb80012; white-space: nowrap; }

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: flex-end; padding: 0 0 56px; overflow: hidden; }
.hero .scene { position: absolute; inset: 0; z-index: -1; }
.hero .scene img, .hero .scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero .scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #05010f99 0%, #05010f22 30%, #05010fcc 68%, #05010f 100%); }
.hero h1 { font: 900 clamp(36px, 9vw, 76px)/1.02 var(--display); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 14px; color: #fff; text-shadow: 3px 0 var(--pink), -3px 0 var(--cyan), 0 0 28px #00f0ff88; }
.hero .price { font: 700 clamp(18px, 4.4vw, 24px)/1.3 "Rajdhani", sans-serif; margin: 0 0 22px; }
.hero .price b { color: var(--green); text-shadow: 0 0 10px #39ff8899; }
.hero .term { font: 13px/1.4 ui-monospace, Menlo, monospace; color: var(--green); margin: 0 0 12px; }
.hero .term .cur { display: inline-block; width: 0.6em; height: 1em; vertical-align: -2px; background: var(--green); animation: blink 0.9s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- panels ---------- */
.card { position: relative; padding: 20px; clip-path: var(--cut); background: var(--panel); border: 1px solid #00f0ff55; }
.card p:last-child { margin-bottom: 0; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feature { border-left: 3px solid var(--pink); }
.feature .ico { font: 900 26px/1 serif; color: var(--pink); text-shadow: 0 0 12px #ff2bd6aa; margin-bottom: 10px; }
.feature p { color: #c9d6f0; font-size: 17px; }

/* trust strip */
.trust { text-align: center; }
.trust .big { font: 900 clamp(22px, 5vw, 34px)/1.2 var(--display); color: var(--green); text-shadow: 0 0 18px #39ff8888; text-transform: uppercase; margin: 0 0 12px; }
.trust .lead { margin: 0 auto 14px; }

/* tiers */
.tiers { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.tier { cursor: pointer; text-align: left; font: inherit; color: inherit; border: 1px solid #00f0ff44; transition: box-shadow 0.15s, border-color 0.15s; }
.tier:hover { border-color: var(--cyan); }
.tier.on { border-color: var(--pink); box-shadow: inset 0 0 24px #ff2bd633, inset 0 0 0 1px var(--pink); }
.tier .days { font: 600 12px var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--hint); }
.tier .usd { font: 900 34px/1.1 var(--display); color: var(--cyan); text-shadow: 0 0 14px #00f0ffaa; margin: 6px 0 2px; }
.tier .sol { font-size: 15px; color: var(--hint); min-height: 1.4em; }
.tier .per { font-weight: 700; color: var(--green); margin-top: 8px; }
.tier .save { position: absolute; top: 14px; right: 18px; font: 700 10.5px var(--display); letter-spacing: 1px; color: var(--amber); text-transform: uppercase; }
.tier.on .usd { color: #fff; text-shadow: 2px 0 var(--pink), -2px 0 var(--cyan), 0 0 14px #ff2bd6aa; }
.fine { font-size: 15px; color: var(--hint); margin-top: 14px; }

/* steps */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 10px; }
.steps li { counter-increment: s; position: relative; padding: 14px 14px 14px 54px; background: var(--row); clip-path: var(--cut-s); }
.steps li::before { content: counter(s); position: absolute; left: 18px; top: 12px; color: var(--pink); font: 900 22px var(--display); text-shadow: 0 0 8px #ff2bd688; }
.steps li b { color: var(--cyan); }

/* MoonPay */
.moon { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: center; border-color: #ffb80066; }
.moon h3 { color: var(--amber); text-shadow: 0 0 10px #ffb80066; }
.moon .acts { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* affiliates */
.earn { border-color: #39ff8866; }
.earn .math { font: 900 clamp(22px, 5vw, 30px)/1.2 var(--display); color: var(--green); text-shadow: 0 0 14px #39ff8888; margin: 4px 0 14px; }
.earn ul { margin: 0; padding-left: 20px; }
.earn li { margin-bottom: 6px; }

/* join */
.join { border-color: var(--pink); box-shadow: inset 0 0 30px #ff2bd622; }
.join .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.join input {
  flex: 1 1 240px; min-height: 52px; padding: 12px 14px; color: var(--text); background: #05010f; border: 1px solid #00f0ff66;
  font: 500 17px "Rajdhani", sans-serif; clip-path: var(--cut-s); outline: none;
}
.join input:focus { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan); }
.join input.bad { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.join .msg { min-height: 1.4em; margin-top: 8px; font-size: 16px; }
.join .msg.ok { color: var(--green); }
.join .msg.bad { color: var(--red); }
.invite { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--display); letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); border: 1px solid #39ff8888; background: #39ff8812; padding: 8px 10px; clip-path: var(--cut-s); margin-bottom: 14px; }
.lockline { display: inline-flex; align-items: center; gap: 8px; font: 700 12px var(--display); letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
.picked { font-size: 17px; margin: 10px 0 0; color: var(--hint); }
.picked b { color: var(--text); }

/* sealed (cap reached) */
.sealed { text-align: center; border-color: var(--red); box-shadow: inset 0 0 40px #ff3b6b22; }
.sealed .seal { font: 900 clamp(26px, 6vw, 44px)/1.1 var(--display); color: #fff; text-transform: uppercase; letter-spacing: 1px; text-shadow: 3px 0 var(--red), -3px 0 var(--amber), 0 0 24px #ff3b6b88; margin: 6px 0 18px; }
.sealed p { max-width: 620px; margin-left: auto; margin-right: auto; }
.sealed .dawn { color: var(--amber); font-weight: 700; text-shadow: 0 0 10px #ffb80066; }

/* footer */
footer { padding: 40px 0 60px; color: var(--hint); font-size: 15px; text-align: center; }
footer a { margin: 0 8px; }

/* reveal on scroll */
.rise { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.rise.in { opacity: 1; transform: none; }

@media (min-width: 760px) {
  .moon { grid-template-columns: 1.4fr 1fr; }
  section { padding: 84px 0; }
}

/* ---------- terms page ---------- */
.doc { max-width: 760px; margin: 0 auto; padding: 96px 16px 40px; }
.doc h1 { font: 900 clamp(26px, 6vw, 40px)/1.1 var(--display); text-transform: uppercase; color: #fff; text-shadow: 2px 0 var(--pink), -2px 0 var(--cyan), 0 0 18px #00f0ff66; margin: 0 0 8px; }
.doc h2 { font-size: 18px; margin: 34px 0 10px; color: var(--cyan); text-shadow: 0 0 10px #00f0ff66; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc .upd { color: var(--hint); font-size: 15px; margin-bottom: 26px; }

/* ---------- the 盗 boot screen glitching out (as the app's .bootfx) ---------- */
.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; font-family: ui-monospace, Menlo, monospace; }
.boot .oni { font-size: 88px; line-height: 1; color: #ff2bd6; text-shadow: 0 0 18px #ff2bd6, 2px 0 #00f0ff; }
.boot .name { font: 700 20px/1 system-ui, sans-serif; letter-spacing: 0.22em; color: #00f0ff; text-shadow: 0 0 10px #00f0ff; }
.boot .t { font-size: 13px; color: #8f9cc8; }
.boot .t b { display: inline-block; width: 0.6em; height: 1em; vertical-align: -2px; background: #39ff88; animation: blink 0.9s steps(1) infinite; }
.bootfx { position: fixed; inset: 0; z-index: 9999; pointer-events: none; background: #05010f; }
.bootfx .bf { position: absolute; inset: 0; }
.bootfx.go { animation: bootoff 0.8s steps(1, end) forwards, bootshut 0.8s cubic-bezier(0.7, 0, 0.9, 0.4) forwards; transform-origin: 50% 50%; }
.bootfx .cy, .bootfx .pk, .bootfx .s1, .bootfx .s2, .bootfx .bflash { display: none; }
.bootfx.go .cy, .bootfx.go .pk, .bootfx.go .s1, .bootfx.go .s2, .bootfx.go .bflash { display: block; }
.bootfx .cy, .bootfx .pk { mix-blend-mode: screen; opacity: 0.85; }
.bootfx.go .cy { filter: hue-rotate(160deg); animation: bootcy 0.8s steps(1, end) forwards; }
.bootfx.go .pk { filter: hue-rotate(-40deg) saturate(2); animation: bootpk 0.8s steps(1, end) forwards; }
.bootfx .s1 { clip-path: inset(38% 0 52% 0); background: #05010f; }
.bootfx .s2 { clip-path: inset(58% 0 30% 0); background: #05010f; }
.bootfx.go .s1 { animation: boots1 0.8s steps(1, end) forwards; }
.bootfx.go .s2 { animation: boots2 0.8s steps(1, end) forwards; }
.bootfx .bflash { position: absolute; left: 0; right: 0; top: 46%; height: 8%; background: linear-gradient(90deg, #ff2bd6, #e8f9ff 40%, #00f0ff); opacity: 0; mix-blend-mode: screen; filter: blur(6px); }
.bootfx.go .bflash { animation: bootflash 0.8s linear forwards; }
@keyframes bootcy { 0% { transform: translate(-3px, 0); } 15% { transform: translate(-9px, 1px); } 30% { transform: translate(4px, -1px); } 45% { transform: translate(-14px, 0); } 60% { transform: translate(7px, 0); } 100% { transform: translate(0, 0); } }
@keyframes bootpk { 0% { transform: translate(3px, 0); } 15% { transform: translate(10px, -1px); } 30% { transform: translate(-5px, 1px); } 45% { transform: translate(15px, 0); } 60% { transform: translate(-8px, 0); } 100% { transform: translate(0, 0); } }
@keyframes boots1 { 0% { transform: translateX(0); } 10% { transform: translateX(-26px); clip-path: inset(38% 0 52% 0); } 25% { transform: translateX(34px); clip-path: inset(20% 0 72% 0); } 40% { transform: translateX(-48px); clip-path: inset(44% 0 44% 0); } 55% { transform: translateX(22px); clip-path: inset(66% 0 26% 0); } 70% { transform: translateX(0); clip-path: inset(50% 0 50% 0); } }
@keyframes boots2 { 0% { transform: translateX(0); } 12% { transform: translateX(30px); } 28% { transform: translateX(-22px); clip-path: inset(10% 0 82% 0); } 42% { transform: translateX(40px); clip-path: inset(72% 0 18% 0); } 58% { transform: translateX(-30px); clip-path: inset(30% 0 62% 0); } 70% { transform: translateX(0); clip-path: inset(50% 0 50% 0); } }
@keyframes bootflash { 0%, 50% { opacity: 0; } 56% { opacity: 0.9; } 62% { opacity: 0.3; } 68% { opacity: 1; } 100% { opacity: 1; } }
@keyframes bootshut { 0%, 64% { transform: scale(1, 1); } 82% { transform: scale(1, 0.01); } 95% { transform: scale(0.03, 0.01); } 100% { transform: scale(0, 0); } }
@keyframes bootoff { 0% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } }
main.glitchin { animation: glitchin 0.9s steps(1, end); }
@keyframes glitchin { 0%, 60% { transform: none; filter: none; } 66% { transform: translate(-6px, 0) skewX(-4deg); filter: hue-rotate(60deg) saturate(2); } 72% { transform: translate(5px, 0); filter: hue-rotate(-50deg); } 78% { transform: translate(-2px, 0); filter: contrast(1.6); } 86% { transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  body::before, .glitch::before, .glitch::after, .hero .term .cur { animation: none; }
  .bootfx.go { animation: bootfade 0.2s linear forwards; }
  .bootfx.go .cy, .bootfx.go .pk, .bootfx.go .s1, .bootfx.go .s2, .bootfx.go .bflash { display: none; }
  main.glitchin { animation: none; }
  .rise { opacity: 1; transform: none; transition: none; }
}
@keyframes bootfade { to { opacity: 0; } }
.join .row.center { justify-content: center; }
[hidden] { display: none !important; }
.sealtext { text-align: center; }

/* ---------- the pay page (v16.5) ---------- */
.pay { max-width: 560px; display: grid; gap: 16px; }
.pay .term { margin: 0; }
.payc h2, .payc h3 { margin-top: 0; }
.payc .amount { font: 900 clamp(34px, 10vw, 52px)/1 var(--display); color: #fff; margin: 4px 0 6px; text-shadow: 2px 0 var(--pink), -2px 0 var(--cyan), 0 0 18px #00f0ff66; }
.payc .amount span { font-size: 0.45em; color: var(--cyan); }
.payc .usdline { color: var(--hint); font-size: 18px; margin: 0 0 16px; }
.payc .usdline b { color: var(--amber); }
.qr { text-align: center; }
.qr img { display: block; margin: 10px auto 0; background: #fff; padding: 8px; width: 232px; height: 232px; image-rendering: pixelated; }
.manual summary { cursor: pointer; font: 700 18px "Rajdhani", sans-serif; color: var(--cyan); }
.copyrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.copyrow code { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; font-size: 15px; padding: 8px 10px; background: #00f0ff0d; border: 1px solid #00f0ff33; }
.pay .term { font: 13px/1.4 ui-monospace, Menlo, monospace; color: var(--green); }
.pay .term .cur { display: inline-block; width: 0.6em; height: 1em; vertical-align: -2px; background: var(--green); animation: blink 0.9s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .pay .term .cur { animation: none; } }