/* INU 犬 — BNB Chain. Palette: BNB yellow on deep black, gold + lantern red accents. */
:root {
  --bg: #070707;
  --bg-2: #0d0c0a;
  --ink: #efeae0;
  --dim: #b8b0a2;
  --soft: #d9d3c7;
  --line: rgba(240, 185, 11, 0.18);
  --line-soft: rgba(255, 255, 255, 0.1);
  --bnb: #F0B90B;
  --gold-hi: #FFE08A;
  --gold-lo: #9C7200;
  --red: #C8102E;
  --radius: 18px;
  --f-display: "Bebas Neue", "Noto Serif SC", Impact, sans-serif;
  --f-cn: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --f-body: "Manrope", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--bnb); color: #000; }
:focus-visible { outline: 2px solid var(--bnb); outline-offset: 3px; border-radius: 6px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
em { font-style: normal; color: var(--bnb); }

/* ---------- background ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; }
.bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(2px) saturate(.95) brightness(.62);
  transform: scale(1.08);
}
.bg-tint {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 55%, rgba(0,0,0,.45), rgba(0,0,0,.2) 75%),
    linear-gradient(180deg, rgba(7,7,7,.75) 0%, rgba(7,7,7,.35) 20%, rgba(7,7,7,.4) 55%, rgba(7,7,7,.92) 100%);
  transition: background-color .4s ease;
}
.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 110% 85% at 50% 45%, transparent 35%, rgba(0,0,0,.85) 100%);
}
.grain {
  position: fixed; inset: -100%; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 280px 280px;
  opacity: .05;
  mix-blend-mode: overlay;
  animation: grain .8s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-4%); }
  60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(-1%,4%); }
}

/* ---------- header ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px clamp(16px, 3vw, 32px);
  transition: background .3s ease, border-color .3s ease, padding .3s ease;
  border-bottom: 1px solid transparent;
}
.top.scrolled {
  background: rgba(7,7,7,.78);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
  padding-top: 10px; padding-bottom: 10px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 40px; height: 40px; transform: rotate(-4deg); filter: drop-shadow(0 4px 10px rgba(200,16,46,.35)); }
.brand-name { font-family: var(--f-display); font-size: 28px; letter-spacing: .08em; line-height: 1; color: #fff; }
.brand-cn { font-family: var(--f-cn); font-weight: 900; font-size: 20px; color: var(--bnb); margin-left: 8px; letter-spacing: 0; }
.nav { display: flex; gap: clamp(16px, 2.4vw, 34px); }
.nav a {
  text-decoration: none; font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; line-height: 1.2; color: #fff;
  transition: color .2s ease, text-shadow .2s ease;
}
.nav a .cn { font-family: var(--f-cn); font-weight: 600; letter-spacing: .12em; font-size: 13px; color: var(--bnb); margin-bottom: 2px; }
.nav a:hover { color: var(--bnb); text-shadow: 0 0 14px rgba(240,185,11,.5); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  border: 1px solid var(--line-soft); background: rgba(10,10,10,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.icon-btn svg { width: 16px; height: 16px; fill: #fff; }
.icon-btn:hover { border-color: var(--bnb); background: rgba(240,185,11,.1); transform: translateY(-1px); }
.icon-btn:hover svg { fill: var(--bnb); }

/* ---------- buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-body); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  padding: 16px 28px; min-height: 54px; border-radius: 14px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn .cn { font-family: var(--f-cn); font-weight: 900; letter-spacing: .06em; font-size: 15px; text-transform: none; }
.btn::after { /* grain inside buttons */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.btn-gold {
  color: #140f00;
  background: linear-gradient(180deg, #FFD95A 0%, var(--bnb) 55%, #D9A300 100%);
  border: 1px solid #FFE58F;
  box-shadow: 0 4px 0 #A87C00, 0 8px 0 #5A4200, 0 14px 30px rgba(0,0,0,.75), 0 0 34px rgba(240,185,11,.22);
}
.btn-gold:hover { transform: translateY(2px); box-shadow: 0 2px 0 #A87C00, 0 5px 0 #5A4200, 0 10px 22px rgba(0,0,0,.75), 0 0 44px rgba(240,185,11,.35); }
.btn-gold:active { transform: translateY(6px); box-shadow: 0 1px 0 #5A4200, 0 6px 14px rgba(0,0,0,.75); }
.btn-glass {
  color: var(--ink); background: rgba(10,10,10,.55); border: 1px solid rgba(240,185,11,.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 0 rgba(240,185,11,.12), 0 14px 30px rgba(0,0,0,.65);
}
.btn-glass .cn { color: var(--bnb); }
.btn-glass:hover { transform: translateY(2px); border-color: var(--bnb); background: rgba(240,185,11,.08); box-shadow: 0 2px 0 rgba(240,185,11,.14), 0 10px 22px rgba(0,0,0,.65); }
.btn-glass:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(240,185,11,.14), 0 6px 14px rgba(0,0,0,.65); }
.btn-icon { padding: 15px 17px; }
.btn-lg { padding: 18px 34px; font-size: 15px; min-height: 60px; }
.btn-lg .cn { font-size: 17px; }
.x-ico { width: 16px; height: 16px; fill: currentColor; position: relative; z-index: 1; }
.btn-icon svg { width: 17px; height: 17px; fill: var(--ink); position: relative; z-index: 1; }
.btn-icon:hover svg { fill: var(--bnb); }
.btn-sm { padding: 10px 16px; min-height: 40px; font-size: 12px; border-radius: 12px; box-shadow: 0 3px 0 #A87C00, 0 6px 0 #5A4200, 0 10px 20px rgba(0,0,0,.6); }
.btn-sm:hover { box-shadow: 0 2px 0 #A87C00, 0 4px 0 #5A4200, 0 8px 16px rgba(0,0,0,.6); }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 14px; }

/* ---------- hero ---------- */
main { position: relative; z-index: 5; }
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 2.4vh, 26px);
  padding: 104px 20px 96px; text-align: center; position: relative;
}
.hero::before { /* local darkening behind the stack so text reads over any frame */
  content: ""; position: absolute; inset: 8% 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 48% at 50% 56%, rgba(0,0,0,.7), rgba(0,0,0,.25) 60%, transparent 80%);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; color: var(--bnb);
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(7,7,7,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.diamond { width: 8px; height: 8px; background: var(--bnb); transform: rotate(45deg); display: inline-block; box-shadow: 0 0 10px rgba(240,185,11,.7); }
.wordmark-wrap { position: relative; perspective: 900px; margin-top: -6px; }
.wordmark {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(150px, min(28vw, 44vh), 420px); line-height: .8; letter-spacing: .05em;
  transform-style: preserve-3d; transform: rotateX(12deg);
  animation: floatY 6s ease-in-out infinite;
  user-select: none;
}
.wm-text {
  display: block; position: relative;
  color: var(--bnb);
  background: linear-gradient(180deg, #FFF3C4 0%, #FFD84D 26%, var(--bnb) 52%, #C58F00 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 #D9A200) drop-shadow(0 2px 0 #C49200) drop-shadow(0 3px 0 #A97C00) drop-shadow(0 4px 0 #8C6600)
          drop-shadow(0 5px 0 #6E5000) drop-shadow(0 7px 0 #4E3900) drop-shadow(0 10px 0 #2E2200) drop-shadow(0 22px 26px rgba(0,0,0,.9));
}
@keyframes floatY { 0%,100% { transform: rotateX(12deg) translateY(0); } 50% { transform: rotateX(12deg) translateY(-12px); } }
.hero-seal {
  position: absolute; width: clamp(64px, 9vw, 132px); height: auto;
  right: -2%; top: -8%;
  transform: rotate(-9deg);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.7));
  animation: stamp .9s cubic-bezier(.2,1.6,.4,1) .5s both;
}
@keyframes stamp { 0% { opacity: 0; transform: rotate(-9deg) scale(2.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(-9deg) scale(1); } }
.pitch { max-width: 820px; }
.pitch-cn {
  font-family: var(--f-cn); font-weight: 900; color: #fff;
  font-size: clamp(24px, 2.8vw, 38px); line-height: 1.4; letter-spacing: .04em;
  text-shadow: 0 2px 18px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9);
}
.pitch-cn em { color: var(--bnb); text-shadow: 0 0 18px rgba(240,185,11,.45), 0 2px 14px rgba(0,0,0,.9); }
.br-m { display: none; }
.pitch-en { margin-top: 10px; color: #f1ece2; font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; letter-spacing: .01em; line-height: 1.45; text-shadow: 0 2px 12px rgba(0,0,0,.95); }
.pitch-en strong { color: var(--bnb); font-weight: 800; }
.hero-cta { margin-top: 6px; }
.hero-help { font-size: 14px; font-weight: 600; color: var(--soft); text-decoration: none; border-bottom: 1px solid rgba(240,185,11,.35); padding-bottom: 2px; text-shadow: 0 2px 10px rgba(0,0,0,.9); margin-top: -6px; }
.hero-help:hover { color: var(--bnb); border-color: var(--bnb); }

/* ---------- CA box ---------- */
.ca {
  display: inline-flex; align-items: center; gap: 14px; width: min(92vw, 560px);
  padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgba(7,7,7,.82); border: 1px solid rgba(240,185,11,.4);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ca-label { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .2em; color: var(--bnb); flex-shrink: 0; }
.ca-label .cn { font-family: var(--f-cn); font-weight: 900; font-size: 13px; letter-spacing: .04em; color: #F7E9CC; }
.ca-addr { flex: 1; text-align: left; font-family: var(--f-mono); font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ca-copy {
  flex-shrink: 0; cursor: pointer; font: 800 11px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase;
  color: #140f00; background: var(--bnb); border: 0; border-radius: 999px; padding: 11px 18px; min-height: 40px;
  display: inline-flex; align-items: center; gap: 6px; transition: background .2s ease, transform .15s ease;
}
.ca-copy .cn { font-family: var(--f-cn); font-weight: 900; font-size: 12px; letter-spacing: .04em; }
.ca-copy:hover { background: var(--gold-hi); }
.ca-copy:active { transform: scale(.96); }
.ca-lg { width: min(92vw, 640px); }
.ca-lg .ca-addr { font-size: 16px; }

.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); width: 24px; height: 38px; border: 1.5px solid rgba(240,185,11,.55); border-radius: 12px; }
.scroll-cue span { position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--bnb); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---------- marquee ---------- */
.marquee-wrap { position: relative; z-index: 5; overflow: hidden; padding: 14px 0; margin-top: -14px; }
.marquee {
  position: relative; overflow: hidden; background: var(--bnb); color: #0a0800;
  border-top: 5px solid #000; border-bottom: 5px solid #000;
  box-shadow: 0 -1px 0 var(--bnb), 0 1px 0 var(--bnb);
  transform: rotate(-1.2deg); margin: 0 -2%;
}
.marquee-track { display: flex; align-items: center; gap: 26px; width: max-content; padding: 14px 0; animation: marquee 32s linear infinite; }
.marquee span { font-family: var(--f-display); font-size: 30px; letter-spacing: .08em; line-height: 1; white-space: nowrap; }
.marquee span.cn { font-family: var(--f-cn); font-weight: 900; font-size: 26px; letter-spacing: .06em; }
.marquee i { width: 10px; height: 10px; background: #0a0800; transform: rotate(45deg); flex-shrink: 0; }
.marquee i:nth-of-type(3n) { background: var(--red); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(72px, 9vw, 120px) clamp(20px, 4vw, 40px); max-width: var(--maxw); margin: 0 auto; }
.story, .why, .how, .token, .closer { isolation: isolate; }
main > .section::before, main > .divider::before { /* opaque-ish backdrop so the video only glows through faintly */
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none;
  background: rgba(7,7,7,.93);
}
.sec-head { text-align: center; margin-bottom: clamp(44px, 5.5vw, 64px); }
.sec-head.left { text-align: left; margin-bottom: 34px; }
.sec-kicker { font-size: 13px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--soft); margin-bottom: 18px; display: inline-flex; align-items: center; gap: 12px; }
.cn-num {
  font-family: var(--f-cn); font-weight: 900; font-size: 15px; letter-spacing: 0; color: #F7E9CC;
  width: 30px; height: 30px; display: inline-grid; place-items: center; background: var(--red); border-radius: 5px; transform: rotate(-4deg);
}
h2 { font-weight: 400; }
.h-cn { display: block; font-family: var(--f-cn); font-weight: 900; font-size: clamp(32px, 4.4vw, 58px); line-height: 1.25; letter-spacing: .03em; color: #fff; }
.h-en { display: block; margin-top: 16px; font-family: var(--f-display); font-size: clamp(24px, 2.4vw, 34px); letter-spacing: .08em; color: var(--bnb); line-height: 1.1; }

/* story */
.lede { max-width: 760px; margin: 28px auto 0; display: grid; gap: 12px; }
.lede-cn { font-size: clamp(18px, 1.6vw, 20px); line-height: 1.85; color: #f3eee5; font-weight: 500; }
.lede-en { font-size: 17px; line-height: 1.7; color: var(--dim); }
.chapters { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 28px); align-items: stretch; }
.chapter {
  display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  border: 1px solid var(--line-soft); box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.frame-img { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #000; border-bottom: 1px solid var(--line); }
.frame-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.frame-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 50px rgba(0,0,0,.45); }
.chapter:hover .frame-img img { transform: scale(1.04); }
.ch-body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.ch-num { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.ch-num span { font-family: var(--f-display); font-size: 30px; letter-spacing: .04em; color: var(--bnb); line-height: 1; }
.chapter h3 { display: flex; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.chapter h3 .cn { font-family: var(--f-cn); font-weight: 900; font-size: 26px; letter-spacing: .06em; text-transform: none; color: var(--bnb); line-height: 1.3; }
.ch-cn { font-size: 17px; line-height: 1.85; color: #f1ece2; }
.ch-en { font-size: 15.5px; line-height: 1.65; color: var(--dim); }
.story-close { margin: clamp(48px, 6vw, 72px) auto 0; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.sc-cn { font-family: var(--f-cn); font-weight: 900; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.3; color: #fff; letter-spacing: .04em; }
.sc-en { font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 30px); letter-spacing: .08em; color: var(--bnb); line-height: 1.15; }

/* dividers: upturned eave + cloud scrolls + BNB diamond */
.divider { position: relative; display: flex; align-items: stretch; height: 64px; padding: 0 clamp(18px, 4vw, 40px); max-width: var(--maxw); margin: 0 auto; }
.divider svg { height: 64px; overflow: visible; }
.dv-side { flex: 1 1 0; min-width: 0; }
.dv-mid { flex: 0 0 auto; width: 220px; }
.dv-flip { transform: scaleX(-1); }

/* why */
.why-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.why-glyph { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.why-glyph::before { /* faint gold halo + thin frame like a hanging scroll */
  content: ""; position: absolute; inset: 6%; border: 1px solid var(--line); border-radius: 50%;
  background: radial-gradient(circle, rgba(240,185,11,.14), transparent 62%);
}
.why-glyph img { position: relative; width: 78%; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(240,185,11,.18)); }
.why .h-cn { font-size: clamp(30px, 3.6vw, 50px); }
.points { list-style: none; display: grid; gap: 14px; }
.points li {
  display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: start;
  padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: rgba(255,255,255,.025);
}
.pt-cn { font-family: var(--f-cn); font-weight: 900; font-size: 20px; color: var(--bnb); letter-spacing: .08em; line-height: 1.4; }
.points strong { color: #fff; }
.points li div { color: var(--soft); font-size: 16.5px; line-height: 1.65; }

/* how to buy */
.steps { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
.step {
  position: relative; padding: 30px 30px 30px 26px; border-radius: 22px; display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; align-content: start;
  background: linear-gradient(180deg, rgba(240,185,11,.07), rgba(255,255,255,.015) 40%);
  border: 1px solid var(--line);
  box-shadow: 0 4px 0 rgba(240,185,11,.08), 0 20px 40px rgba(0,0,0,.5);
}
.step-num {
  position: relative; z-index: 0; display: grid; place-items: center; width: 50px; height: 50px; margin: 0 0 22px 2px;
  font-family: var(--f-display); font-size: 28px; color: #140f00; line-height: 1; padding-top: 3px; grid-row: span 3; margin: 0;
}
.step-num::before { /* BNB diamond behind an upright numeral */
  content: ""; position: absolute; inset: 7px; z-index: -1; border-radius: 5px; transform: rotate(45deg);
  background: linear-gradient(135deg, #FFE08A, var(--bnb) 60%, #C99600);
  box-shadow: 0 0 20px rgba(240,185,11,.35);
}
.step h3 { font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin-bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.step h3 .cn { font-family: var(--f-cn); font-weight: 900; font-size: 22px; line-height: 1.35; letter-spacing: .04em; text-transform: none; color: var(--bnb); }
.step-cn { font-size: 16px; line-height: 1.8; color: #f1ece2; margin-bottom: 10px; }
.step-en { font-size: 15px; line-height: 1.6; color: var(--dim); }
.how-bottom { margin-top: 56px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.fine { font-size: 14.5px; line-height: 1.6; color: var(--dim); text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }

/* token */
.token::after { /* faint auspicious-cloud pattern */
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none; opacity: .028;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='70' viewBox='0 0 120 70'%3E%3Cg fill='none' stroke='%23F0B90B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 50c-9 0-14-6-14-12s6-11 12-11c5 0 9 4 9 8 0 3-3 6-6 6-2 0-4-2-4-4'/%3E%3Cpath d='M27 35c3-8 10-12 17-12 9 0 15 7 15 14 0 7-5 13-13 13H20'/%3E%3Cpath d='M46 37c0-4 3-6 5-6 3 0 5 2 5 5'/%3E%3Cpath d='M80 22c9 0 14 6 14 12s-6 11-12 11c-5 0-9-4-9-8 0-3 3-6 6-6 2 0 4 2 4 4' transform='translate(12 10)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 70px;
}
.token-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tk { padding: 26px 26px 24px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: rgba(10,10,10,.75); position: relative; overflow: hidden; }
.tk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--bnb), transparent); }
.tk dt { font-size: 12.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; }
.tk dt .cn { font-family: var(--f-cn); font-weight: 900; font-size: 15px; letter-spacing: .06em; color: #F7E9CC; }
.tk dd { font-family: var(--f-display); font-size: 40px; letter-spacing: .05em; line-height: 1; color: #fff; }
.tk dd small { font-family: var(--f-mono); font-size: 13px; color: var(--soft); letter-spacing: 0; margin-left: 6px; vertical-align: middle; }
.dd-cn { font-family: var(--f-cn); font-weight: 900; color: var(--bnb); font-size: 32px; margin-left: 6px; }
.tk dd.tba { color: #cfc7b8; display: flex; align-items: center; gap: 12px; }
.tba-cn { font-family: var(--f-cn); font-weight: 900; font-size: 14px; line-height: 1; color: #fff; background: var(--red); padding: 5px 8px; border-radius: 5px; letter-spacing: .1em; }
.tk-wide { grid-column: 1 / -1; }
.tk-wide dd { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tk-wide .ca-addr { font-size: 18px; flex: 0 1 auto; }
.token .fine { margin-top: 28px; }

/* closer */
.closer { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: clamp(40px, 4vw, 56px); padding-bottom: clamp(90px, 12vw, 160px); }
.closer::after { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none; background: radial-gradient(ellipse 45% 50% at 50% 55%, rgba(240,185,11,.1), transparent 70%); }
main > .closer::before { background: linear-gradient(180deg, rgba(7,7,7,.9), rgba(7,7,7,.35) 45%, rgba(7,7,7,.95)); }
.closer-seal { width: clamp(84px, 10vw, 120px); height: auto; transform: rotate(-6deg); filter: drop-shadow(0 12px 30px rgba(200,16,46,.35)); }
.closer .h-cn { font-size: clamp(40px, 6.4vw, 88px); }
.closer .h-en { font-size: clamp(24px, 3vw, 40px); }
.closer-sub { color: var(--soft); letter-spacing: .18em; font-size: 14px; text-transform: uppercase; font-weight: 700; }

/* footer */
.foot { position: relative; z-index: 5; background: #050505; border-top: 1px solid var(--line); }
.cloud-band {
  height: 22px; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='22' viewBox='0 0 88 22'%3E%3Cg fill='none' stroke='%23F0B90B' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M4 18c0-6 4-10 9-10s8 3 8 7c0 3-2 5-5 5s-4-2-4-4 1-3 3-3'/%3E%3Cpath d='M21 15c2-7 8-11 14-11 7 0 12 5 12 11'/%3E%3Cpath d='M47 15c0-4 3-7 7-7 3 0 6 2 6 6'/%3E%3Cpath d='M60 14c4-4 10-4 14 0 3 3 3 7 0 8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88px 22px; background-repeat: repeat-x; background-position: center;
  border-bottom: 1px solid rgba(200,16,46,.35);
}
.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 40px clamp(18px, 4vw, 40px) 50px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.foot .brand img { width: 34px; height: 34px; }
.foot .brand { margin-bottom: 8px; }
.disclaimer { font-size: 14px; line-height: 1.6; color: var(--dim); max-width: 680px; }
.copy { font-size: 12.5px; color: #8f887c; letter-spacing: .12em; margin-top: 8px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 90; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: #0d0c0a; color: var(--ink); border: 1px solid var(--bnb); border-radius: 999px; padding: 12px 22px;
  font-size: 14px; font-weight: 700; box-shadow: 0 16px 40px rgba(0,0,0,.7); transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* reveal on scroll */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav { display: none; }
  .chapters { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .why-grid { grid-template-columns: 1fr; }
  .why-glyph { max-width: 320px; margin: 0 auto; width: 100%; }
  .sec-head.left { text-align: center; }
  .token-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .top { padding: 12px 16px; }
  .brand img { width: 34px; height: 34px; }
  .brand-name { font-size: 24px; }
  .icon-btn { width: 40px; height: 40px; border-radius: 12px; }
  .hero { padding: 92px 20px 84px; gap: 16px; }
  .wordmark { font-size: clamp(150px, 50vw, 230px); }
  .hero-seal { width: 60px; right: -10%; top: -6%; }
  .br-m { display: inline; }
  .eyebrow { font-size: 11px; letter-spacing: .2em; padding: 7px 14px; }
  .pitch-cn { font-size: 25px; }
  .pitch-en { font-size: 17px; }
  .cta-row { gap: 12px; }
  .hero-cta, .how .cta-row, .closer .cta-row { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 400px; }
  .hero-cta .btn-gold, .how .cta-row .btn-gold, .closer .cta-row .btn-gold { grid-column: 1 / -1; }
  .how .cta-row .btn-glass:last-child { grid-column: 1 / -1; }
  .btn { padding: 14px 18px; }
  .btn-lg { padding: 16px 20px; }
  .btn-sm { padding: 9px 12px; }
  .ca, .ca-lg { width: 100%; max-width: 400px; padding-left: 16px; gap: 10px; }
  .ca-label { letter-spacing: .12em; }
  .hero-help { font-size: 13.5px; }
  .section { padding-left: 20px; padding-right: 20px; }
  .lede { margin-top: 22px; text-align: left; }
  .lede-cn { font-size: 17.5px; }
  .lede-en { font-size: 16px; }
  .ch-body { padding: 22px 20px 24px; }
  .chapter h3 .cn { font-size: 24px; }
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .step { grid-template-columns: 50px 1fr; column-gap: 16px; padding: 22px 20px; }
  .step h3 { margin-bottom: 8px; }
  .step-cn { font-size: 16px; }
  .points li { grid-template-columns: 1fr; gap: 6px; padding: 20px; }
  .marquee span { font-size: 24px; }
  .token-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tk { padding: 20px 16px 18px; }
  .tk dt { flex-direction: column; gap: 2px; font-size: 11px; letter-spacing: .14em; }
  .tk dd { font-size: 30px; }
  .tk dd small { display: block; margin: 6px 0 0; }
  .dd-cn { font-size: 24px; }
  .tk dd.tba { gap: 8px; }
  .tba-cn { font-size: 12px; padding: 4px 6px; }
  .tk-wide dd { gap: 10px; }
  .tk-wide .ca-addr { font-size: 14px; flex: 1 1 100%; }
  .divider { padding: 0 10px; }
  .dv-mid { width: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grain, .wordmark, .marquee-track, .scroll-cue span, .hero-seal { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* live chart */
.chart-sec[hidden] { display: none; }
.chart-frame { position: relative; width: 100%; height: clamp(420px, 62vh, 640px); border: 1px solid rgba(240,185,11,.35); border-radius: 16px; overflow: hidden; background: #0b0b0b; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.chart-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }