/* ============================================================
   Líng Shé 灵蛇 · $LINGSHE — porcelain & jade
   ============================================================ */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/vendor/fonts/bodoni-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+00B7;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/vendor/fonts/bodoni-italic-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+00B7;
}
@font-face {
  font-family: 'Archivo';
  src: url('/vendor/fonts/archivo-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+00B7;
}

/* ---------- tokens ---------- */
:root {
  --sage: #99A26B;
  --sage-2: #8A9459;
  --sage-3: #6E7A4A;
  --porcelain: #F7F3E8;
  --porcelain-2: #EDE7D2;
  --ink: #272E19;
  --ink-soft: #4A5238;
  --gold: #8F7222;
  --gold-2: #B3924A;
  --gold-3: #E4D194;
  --rose: #D8A899;
  --rose-2: #BE8B7B;
  --seal: #A93B2A;
  --font-display: 'Bodoni Moda', 'Songti SC', 'STSong', 'Noto Serif SC', 'SimSun', serif;
  --font-ui: 'Archivo', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --wrap: 1160px;
  --radius: 18px;
  --hairline: 1px solid rgba(143, 114, 34, 0.35);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(1100px 600px at 85% -5%, rgba(216, 168, 153, 0.26), transparent 60%),
    radial-gradient(900px 700px at -10% 40%, rgba(228, 209, 148, 0.15), transparent 55%),
    linear-gradient(178deg, #EDEBDB 0%, #C6C89B 9%, #A9B078 24%, var(--sage) 48%, #8A9459 76%, #7C874F 100%);
  background-color: var(--sage);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--gold-3); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

/* ---------- fx layers ---------- */
.fx-wash, .fx-grain, .fx-ring { position: fixed; inset: 0; pointer-events: none; }
.fx-wash { z-index: 0; background: radial-gradient(1200px 800px at 50% 110%, rgba(38, 48, 29, 0.16), transparent 60%); }
.fx-ring {
  z-index: 0;
  background:
    radial-gradient(closest-side, transparent 96.4%, rgba(179, 146, 74, 0.20) 96.7%, rgba(179, 146, 74, 0.20) 97.4%, transparent 97.7%) center 12% / 1500px 1500px no-repeat,
    radial-gradient(closest-side, transparent 95.5%, rgba(247, 243, 232, 0.35) 96%, transparent 96.6%) 118% 30% / 900px 900px no-repeat;
}
.fx-grain {
  z-index: 3;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.17 0 0 0 0 0.10 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .masthead, .footer, .mobile-nav { position: relative; z-index: 1; }

/* ---------- 回纹 fret border ---------- */
.fret-strip {
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M1 17V1h16v12H7V7h13' fill='none' stroke='%238F7222' stroke-width='2'/%3E%3C/svg%3E") repeat-x center / auto 12px;
  opacity: 0.75;
}
.fret-top { position: absolute; top: 0; left: 0; right: 0; z-index: 60; pointer-events: none; }
div.fret-strip:not(.fret-top) { margin-top: 46px; position: relative; z-index: 1; }

/* ---------- type helpers ---------- */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 750;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: 0.005em;
}
.section-sub { max-width: 640px; color: var(--ink-soft); margin: 0 0 34px; }
.title-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.95em;
  height: 0.95em;
  background: var(--seal);
  color: #F3E4CE;
  font-size: 0.6em;
  border-radius: 0.14em;
  margin-right: 0.42em;
  transform: rotate(-4deg) translateY(-0.08em);
  box-shadow: inset 0 0 0 2px rgba(243, 228, 206, 0.35), 0 5px 12px rgba(38, 48, 29, 0.28);
  vertical-align: middle;
  font-weight: 700;
  flex: none;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--seal);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(169, 59, 42, 0.5);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(169, 59, 42, 0.45); }
  70% { box-shadow: 0 0 0 9px rgba(169, 59, 42, 0); }
  100% { box-shadow: 0 0 0 0 rgba(169, 59, 42, 0); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-gold {
  background: linear-gradient(160deg, var(--gold-3) 0%, var(--gold-2) 45%, var(--gold) 120%);
  color: var(--ink);
  border-color: rgba(143, 114, 34, 0.55);
  box-shadow: 0 8px 22px rgba(38, 48, 29, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(38, 48, 29, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55); }
.btn-ghost {
  background: rgba(247, 243, 232, 0.35);
  color: var(--ink);
  border-color: rgba(143, 114, 34, 0.5);
}
.btn-ghost:hover { background: rgba(247, 243, 232, 0.65); transform: translateY(-2px); }
.btn-big { width: 100%; padding: 16px 26px; font-size: 16px; }
.btn:disabled { opacity: 0.55; cursor: wait; transform: none; }

.mini-btn {
  border: 1px solid rgba(143, 114, 34, 0.45);
  background: rgba(247, 243, 232, 0.5);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.mini-btn:hover { background: var(--porcelain); }
.mini-strong { background: var(--ink); color: var(--porcelain-2); border-color: var(--ink); }
.mini-strong:hover { background: var(--ink-soft); }

/* ---------- masthead ---------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.masthead.stuck {
  background: rgba(247, 243, 232, 0.82);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(143, 114, 34, 0.3), 0 10px 30px rgba(38, 48, 29, 0.10);
}
.masthead-in {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { border-radius: 50%; border: 1.5px solid rgba(143, 114, 34, 0.55); box-shadow: 0 3px 10px rgba(38, 48, 29, 0.2); }
.brand-word { display: flex; flex-direction: column; line-height: 1.05; }
.brand-latin { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: 0.01em; }
.brand-cjk { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.5em; color: var(--gold); }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.nav a:hover { border-bottom-color: var(--gold-2); }
.mast-actions { display: flex; align-items: center; gap: 12px; }
.lang-btn {
  border: 1px solid rgba(143, 114, 34, 0.5);
  background: rgba(247, 243, 232, 0.4);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 14px;
  letter-spacing: 0.06em;
  transition: background 0.15s ease;
  font-family: var(--font-ui);
}
.lang-btn:hover { background: var(--porcelain); }
.btn-mast { padding: 10px 20px; font-size: 14px; }
.burger { display: none; background: none; border: 0; padding: 8px; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; }

.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(247, 243, 232, 0.97);
  padding: 110px 30px 40px;
  flex-direction: column;
  gap: 8px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(143, 114, 34, 0.25);
}
.mobile-nav .lang-btn { margin-top: 22px; align-self: flex-start; font-size: 16px; padding: 10px 22px; }
html.nav-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero {
  padding: 46px 0 30px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='56' viewBox='0 0 140 56'%3E%3Cg fill='none' stroke='%238F7222' stroke-opacity='0.38' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M24 40a10 10 0 1 1 10-10 6 6 0 1 0 6-6'/%3E%3Cpath d='M58 46a12 12 0 1 1 12-12 7 7 0 1 0 7-7'/%3E%3Cpath d='M10 50h102'/%3E%3Cpath d='M30 55h48'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='56' viewBox='0 0 140 56'%3E%3Cg fill='none' stroke='%238F7222' stroke-opacity='0.30' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M24 40a10 10 0 1 1 10-10 6 6 0 1 0 6-6'/%3E%3Cpath d='M58 46a12 12 0 1 1 12-12 7 7 0 1 0 7-7'/%3E%3Cpath d='M10 50h102'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: right 6% top 40px, left 3% bottom 8%;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 46px;
  align-items: center;
}
.hero-h1 {
  font-family: var(--font-display);
  font-weight: 820;
  font-size: clamp(42px, 6.4vw, 74px);
  line-height: 1.02;
  margin: 6px 0 20px;
  letter-spacing: 0.002em;
}
.h1-line { display: block; }
.h1-line em { font-style: italic; font-weight: 500; }
.h1-gold {
  background: linear-gradient(105deg, var(--gold) 10%, var(--gold-2) 45%, #8F7222 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lede { font-size: 17.5px; max-width: 560px; color: var(--ink-soft); margin: 0 0 26px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.trust { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.trust li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; font-weight: 550; color: var(--ink); }
.trust svg { width: 15px; height: 15px; fill: var(--gold); flex: none; margin-top: 3px; }

.hero-art { position: relative; justify-self: center; }
.art-frame {
  position: relative;
  width: min(430px, 82vw);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(143, 114, 34, 0.5);
  box-shadow:
    0 0 0 7px rgba(247, 243, 232, 0.5),
    0 0 0 8px rgba(143, 114, 34, 0.35),
    0 30px 70px rgba(38, 48, 29, 0.35);
}
.art-frame img { width: 100%; height: auto; }
.art-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(255, 255, 255, 0.14), transparent 40%);
  pointer-events: none;
}
.js .hero-art img { animation: float 7s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0) scale(1.005); }
  50% { transform: translateY(-8px) scale(1.015); }
}
.art-caption {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--ink-soft);
  margin: 16px 0 0;
}
.seal {
  position: absolute;
  right: -16px;
  bottom: 22px;
  background: var(--seal);
  color: #F3E4CE;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.12;
  padding: 12px 10px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: rotate(4deg);
  box-shadow: 0 10px 24px rgba(38, 48, 29, 0.35), inset 0 0 0 2px rgba(243, 228, 206, 0.4);
}

/* ---------- sections ---------- */
.section { padding: 74px 0; position: relative; }
.section[data-cjk] { overflow: hidden; }
.section[data-cjk]::before {
  content: attr(data-cjk);
  position: absolute;
  top: -40px;
  right: -10px;
  font-family: var(--font-display);
  font-size: 380px;
  line-height: 1;
  color: rgba(38, 48, 29, 0.05);
  pointer-events: none;
  user-select: none;
}

/* ---------- presale ticket ---------- */
.presale-section { padding-top: 40px; }
.ticket {
  position: relative;
  background: linear-gradient(178deg, var(--porcelain) 0%, #F2ECDD 100%);
  border: 1px solid rgba(143, 114, 34, 0.55);
  border-radius: var(--radius);
  padding: 34px clamp(20px, 4vw, 46px) 26px;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: 0 30px 80px rgba(38, 48, 29, 0.30);
}
.ticket::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(143, 114, 34, 0.30);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
}
.ticket-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.ticket-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.6vw, 36px); margin: 0 0 4px; }
.ticket-sub { margin: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.stamp {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--seal);
  border: 2px solid var(--seal);
  border-radius: 5px;
  padding: 7px 13px;
  transform: rotate(5deg);
  animation: stampPulse 2.6s ease-in-out infinite;
  flex: none;
}
.stamp.ended { animation: none; color: var(--ink-soft); border-color: var(--ink-soft); }
@keyframes stampPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.bonus-band {
  background: linear-gradient(120deg, #A93B2A 0%, #C2492F 50%, #A93B2A 100%);
  color: #F7E6C4;
  border: 1px solid rgba(228, 209, 148, 0.85);
  border-radius: 10px;
  padding: 11px 18px;
  font-weight: 700;
  font-size: 14.5px;
  text-align: center;
  margin: 0 0 22px;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(169, 59, 42, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 3px rgba(169, 59, 42, 0.4);
}

.gauge-wrap { margin-bottom: 24px; }
.gauge {
  height: 16px;
  background: var(--porcelain-2);
  border: 1px solid rgba(143, 114, 34, 0.4);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(38, 48, 29, 0.12);
}
.gauge-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rose) 0%, var(--rose-2) 35%, var(--gold-2) 75%, var(--gold-3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.gauge-txt { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-top: 9px; font-size: 13.5px; color: var(--ink-soft); }
.gauge-txt strong { font-family: var(--font-display); font-size: 22px; color: var(--ink); font-weight: 800; }

.cd-label { text-align: center; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 650; color: var(--gold); margin: 0 0 10px; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 28px; }
.cd-cell {
  background: rgba(247, 243, 232, 0.7);
  border: 1px solid rgba(143, 114, 34, 0.35);
  border-top: 2px solid var(--gold-2);
  border-radius: 10px;
  text-align: center;
  padding: 12px 4px 9px;
}
.cd-cell strong { display: block; font-family: var(--font-display); font-size: clamp(26px, 4.5vw, 40px); font-weight: 850; line-height: 1; font-variant-numeric: tabular-nums; }
.cd-cell span { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }

/* ---------- buy box ---------- */
.wallet-bar, .net-warn {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  border: 1px solid rgba(143, 114, 34, 0.4);
  background: rgba(247, 243, 232, 0.75);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13.5px;
}
.wallet-id { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.wallet-meta { color: var(--ink-soft); }
.wallet-btns { margin-left: auto; display: flex; gap: 8px; }
.net-warn { border-color: var(--seal); background: rgba(169, 59, 42, 0.08); color: var(--seal); font-weight: 600; }
.net-warn .mini-btn { margin-left: auto; }

.amount-label { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 650; color: var(--ink-soft); margin-bottom: 8px; }
.amount-row { position: relative; margin-bottom: 12px; }
#amount {
  width: 100%;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 750;
  color: var(--ink);
  background: rgba(247, 243, 232, 0.9);
  border: 1px solid rgba(143, 114, 34, 0.5);
  border-radius: 12px;
  padding: 14px 84px 14px 18px;
}
#amount:focus { outline: 2px solid var(--gold-2); outline-offset: 0; }
#amount::-webkit-outer-spin-button, #amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#amount[type='number'] { -moz-appearance: textfield; appearance: textfield; }
.amount-unit {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-size: 17px;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.chip {
  border: 1px solid rgba(143, 114, 34, 0.45);
  background: rgba(247, 243, 232, 0.55);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 650;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.chip:hover { background: var(--gold-3); border-color: var(--gold); }
.bonus-pill {
  display: inline-block;
  background: var(--seal);
  color: #F7E6C4;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.05em;
  padding: 3px 11px;
  margin-left: 10px;
  vertical-align: 2px;
  box-shadow: inset 0 0 0 1px rgba(228, 209, 148, 0.6);
}
.limits { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 6px; }
.quote { font-size: 15.5px; font-weight: 650; margin: 0 0 18px; color: var(--ink); font-variant-numeric: tabular-nums; }

.picker { display: grid; gap: 8px; margin-bottom: 14px; }
.picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(143, 114, 34, 0.4);
  background: rgba(247, 243, 232, 0.8);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 650;
  transition: background 0.15s ease;
}
.picker-item:hover { background: var(--gold-3); }
.picker-item img { border-radius: 5px; }

.buy-btns { margin-bottom: 6px; }
.tx-line { font-size: 13.5px; margin: 10px 0 0; }
.tx-line a { color: var(--gold); font-weight: 650; }
.no-wallet { border: 1px dashed rgba(143, 114, 34, 0.5); border-radius: 10px; padding: 14px 16px; margin-top: 14px; font-size: 13.5px; }
.no-wallet p { margin: 0 0 10px; }

.divider { display: flex; align-items: center; gap: 14px; margin: 22px 0 14px; color: var(--ink-soft); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 650; }
.divider::before, .divider::after { content: ''; height: 1px; flex: 1; background: rgba(143, 114, 34, 0.35); }

.sendbox {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(38, 48, 29, 0.05);
  border: 1px solid rgba(143, 114, 34, 0.4);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 10px;
}
.addr-code {
  font-size: 12.5px;
  word-break: break-all;
  color: var(--ink);
  flex: 1;
  user-select: all;
}
.manual-note { font-size: 12.5px; color: var(--seal); font-weight: 550; margin: 0 0 8px; }
.scan-link { font-size: 13px; margin: 0; }
.scan-link a { color: var(--gold); font-weight: 650; }
.ticket-foot { text-align: center; font-size: 12.5px; color: var(--ink-soft); margin: 20px 0 0; border-top: var(--hairline); padding-top: 14px; }

/* ---------- numbers band ---------- */
.numbers { padding: 40px 0; border-top: var(--hairline); border-bottom: var(--hairline); background: rgba(247, 243, 232, 0.28); }
.num-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.num { text-align: center; }
.num strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(22px, 3vw, 34px);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--gold) 20%, var(--gold-2) 60%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.num span { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); }

/* ---------- lore ---------- */
.lore-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 46px; align-items: center; }
.lore-still {
  margin: 0;
  background: var(--porcelain);
  border: 1px solid rgba(143, 114, 34, 0.5);
  border-radius: 10px;
  padding: 12px 12px 14px;
  box-shadow: 0 24px 60px rgba(38, 48, 29, 0.28);
  transform: rotate(-2.2deg);
}
.lore-still img { width: 100%; height: auto; border-radius: 5px; }
.lore-still figcaption {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  padding-top: 10px;
  letter-spacing: 0.04em;
  font-weight: 550;
}
.lore-p { color: var(--ink-soft); font-size: 15.5px; max-width: 560px; }
.lore-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 650;
  font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.35;
  color: var(--ink);
  margin: 22px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--gold-2);
}

/* ---------- how to buy ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step {
  background: linear-gradient(178deg, var(--porcelain) 0%, #F1EBDC 100%);
  border: 1px solid rgba(143, 114, 34, 0.45);
  border-top: 3px solid var(--gold-2);
  border-radius: 14px;
  padding: 24px 22px;
  box-shadow: 0 16px 40px rgba(38, 48, 29, 0.16);
}
.step-no {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 850;
  font-style: italic;
  color: rgba(143, 114, 34, 0.4);
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}
.step h3 { font-family: var(--font-display); font-size: 21px; font-weight: 780; margin: 0 0 8px; }
.step p { font-size: 14px; color: var(--ink-soft); margin: 0; }

/* ---------- tokenomics ---------- */
.tok-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 22px; align-items: start; }
.tok-main, .tok-side {
  background: linear-gradient(178deg, var(--porcelain) 0%, #F1EBDC 100%);
  border: 1px solid rgba(143, 114, 34, 0.45);
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: 0 16px 40px rgba(38, 48, 29, 0.16);
}
.tok-bar {
  display: flex;
  height: 30px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(143, 114, 34, 0.45);
  background: var(--porcelain-2);
  margin-bottom: 22px;
}
.tok-seg { width: 0; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); }
.seg-presale { background: linear-gradient(90deg, var(--gold-2), var(--gold-3)); }
.seg-airdrop { background: linear-gradient(90deg, var(--rose-2), var(--rose)); }
.seg-lp { background: var(--sage-3); }
.seg-team { background: var(--ink-soft); }
.tok-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tok-legend li { display: flex; gap: 12px; align-items: flex-start; }
.tok-legend strong { display: block; font-size: 15.5px; }
.tok-legend small { color: var(--ink-soft); font-size: 13px; }
.dot { width: 13px; height: 13px; border-radius: 4px; flex: none; margin-top: 4px; border: 1px solid rgba(38, 48, 29, 0.2); }
.dot-presale { background: var(--gold-2); }
.dot-airdrop { background: var(--rose); }
.dot-lp { background: var(--sage-3); }
.dot-team { background: var(--ink-soft); }
.tok-supply {
  display: block;
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(28px, 3.4vw, 38px);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--gold) 20%, var(--gold-2) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tok-supply-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); display: block; margin: 4px 0 16px; }
.ticks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; font-size: 14px; font-weight: 550; }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--gold-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 12.2L2.8 8.5l1.4-1.4 2.3 2.3 5.3-5.3 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 12.2L2.8 8.5l1.4-1.4 2.3 2.3 5.3-5.3 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- airdrop ---------- */
.air-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 22px; align-items: center; }
.air-card {
  background: linear-gradient(170deg, var(--porcelain) 0%, #F3E9D8 100%);
  border: 1px solid rgba(143, 114, 34, 0.5);
  border-radius: 14px;
  padding: 30px 26px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(38, 48, 29, 0.18);
  position: relative;
}
.air-card::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(143, 114, 34, 0.35);
  border-radius: 10px;
  pointer-events: none;
}
.air-pool {
  display: block;
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(30px, 4vw, 44px);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--rose-2) 10%, var(--gold-2) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.air-pool-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); display: block; margin: 4px 0 20px; }
.air-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; position: relative; }
.air-steps { margin: 0; padding: 0 0 0 20px; display: grid; gap: 14px; font-size: 15.5px; font-weight: 550; }
.air-steps li::marker { font-family: var(--font-display); font-weight: 800; color: var(--gold); }

/* ---------- roadmap ---------- */
.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.phase {
  background: linear-gradient(178deg, var(--porcelain) 0%, #F1EBDC 100%);
  border: 1px solid rgba(143, 114, 34, 0.45);
  border-radius: 14px;
  padding: 22px 20px;
  box-shadow: 0 16px 40px rgba(38, 48, 29, 0.14);
  position: relative;
}
.phase-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 12px;
  border: 1px solid rgba(143, 114, 34, 0.45);
  color: var(--ink-soft);
}
.phase.done .phase-tag { background: var(--gold-2); border-color: var(--gold); color: var(--ink); }
.phase.now .phase-tag { background: var(--seal); border-color: var(--seal); color: #F3E4CE; animation: stampPulse 2.6s ease-in-out infinite; }
.phase h3 { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.phase p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }

/* ---------- faq ---------- */
.faq-list { display: grid; gap: 12px; max-width: 780px; }
.faq details {
  background: linear-gradient(178deg, var(--porcelain) 0%, #F2ECDD 100%);
  border: 1px solid rgba(143, 114, 34, 0.45);
  border-radius: 12px;
  padding: 0 20px;
  box-shadow: 0 10px 26px rgba(38, 48, 29, 0.12);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 18.5px;
  font-weight: 750;
  padding: 17px 34px 17px 0;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 300;
  color: var(--gold);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0; padding: 0 0 18px; color: var(--ink-soft); font-size: 14.5px; border-top: 1px dashed rgba(143, 114, 34, 0.3); padding-top: 14px; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--porcelain-2); margin-top: 12px; }
.foot-grid {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1.3fr;
  gap: 34px;
  padding-top: 54px;
  padding-bottom: 30px;
}
.foot-brand img { border-radius: 50%; border: 1.5px solid rgba(179, 146, 74, 0.6); margin-bottom: 12px; }
.foot-brand strong { font-family: var(--font-display); font-size: 18px; display: block; margin-bottom: 6px; }
.foot-brand p { color: rgba(237, 231, 214, 0.65); font-size: 13.5px; margin: 0; }
.foot-col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.foot-col strong, .foot-legal strong {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-3);
  display: block;
  margin-bottom: 6px;
}
.foot-col a { color: rgba(237, 231, 214, 0.85); text-decoration: none; font-size: 14px; }
.foot-col a:hover { color: var(--gold-3); }
.foot-legal p { color: rgba(237, 231, 214, 0.55); font-size: 12px; line-height: 1.7; margin: 0; }
.foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(179, 146, 74, 0.25);
  padding-top: 18px;
  padding-bottom: 26px;
  font-size: 12.5px;
  color: rgba(237, 231, 214, 0.6);
}
.foot-bottom .addr-code { color: rgba(237, 231, 214, 0.6); font-size: 11.5px; flex: none; }

/* ---------- toast ---------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--porcelain);
  border: 1px solid var(--gold-2);
  border-radius: 12px;
  padding: 13px 22px;
  font-size: 14px;
  font-weight: 550;
  max-width: min(480px, 90vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100;
  box-shadow: 0 18px 50px rgba(38, 48, 29, 0.4);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .nav { display: none; }
  .burger { display: block; }
  .btn-mast { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 38px; }
  .hero-art { order: -1; }
  .art-frame { width: min(320px, 78vw); }
  .tok-grid, .air-grid { grid-template-columns: 1fr; }
  .lore-grid { grid-template-columns: 1fr; gap: 34px; }
  .lore-still { max-width: 340px; margin: 0 auto; }
  .phases { grid-template-columns: 1fr 1fr; }
  .num-grid { grid-template-columns: 1fr 1fr; gap: 26px 12px; }
  .steps { grid-template-columns: 1fr; }
  .section[data-cjk]::before { font-size: 240px; }
}
@media (max-width: 560px) {
  .phases { grid-template-columns: 1fr; }
  .trust { grid-template-columns: 1fr; }
  .hero { padding-top: 26px; }
  .ticket { padding: 26px 16px 20px; }
  .wallet-btns, .net-warn .mini-btn { margin-left: 0; }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .section { padding: 56px 0; }
  .section[data-cjk]::before { font-size: 170px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}