/* HZ 兑换 · 首页与子页版式（VI v4：纸白 × 墨黑 × 品牌紫，青柠只做连接点） */
.home { overflow-x: hidden; }

/* ---------- hero: paper copy panel + ink stage (brand board layout) ---------- */
.x-hero { padding: 28px 0 0; }
.x-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 20px; align-items: stretch; }
.x-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px 8px 40px 0; }
.x-title { margin: 26px 0 22px; font-family: var(--display); font-size: clamp(54px, 6.4vw, 104px); line-height: .98; font-weight: 900; letter-spacing: -.055em; color: var(--hz-ink); }
.x-title .ln { display: block; padding-bottom: .04em; }
.x-title em { font-style: normal; color: var(--hz-violet); }
.x-title .cursor { display: inline-block; width: .42em; height: .16em; margin-left: .06em; background: var(--hz-lime); box-shadow: 0 0 0 1px rgba(19, 20, 26, .12) inset; animation: x-cursor 1.2s steps(2, jump-none) infinite; }
@keyframes x-cursor { 50% { opacity: 0; } }
.x-lead { font-size: 18px; line-height: 1.75; color: var(--hz-muted); max-width: 27em; margin: 0 0 34px; }

/* CDK card: white panel + violet tab + lime corner bracket (VI "快速接入" card) */
.x-redeem { position: relative; max-width: 580px; background: #fff; border: 1px solid var(--hz-line); border-radius: var(--r-lg); padding: 20px 20px 18px; box-shadow: var(--shadow); }
.x-redeem::before { content: ""; position: absolute; top: -1px; right: 22px; width: 96px; height: 28px; border-top: 4px solid var(--hz-lime); border-right: 4px solid var(--hz-lime); border-top-right-radius: 10px; }
.x-redeem-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 4px 14px; font-size: 15px; font-weight: 800; border-bottom: 1px solid var(--hz-line); }
.x-redeem-label > span { position: relative; padding: 4px 0 12px; color: var(--hz-violet); }
.x-redeem-label > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; background: var(--hz-violet); }
.x-redeem-label i { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--hz-faint); padding-bottom: 12px; }
.x-redeem-bar { display: flex; gap: 8px; padding: 6px; background: var(--hz-paper); border: 1.5px solid transparent; border-radius: 16px; transition: border-color .25s, box-shadow .25s, background .25s; }
.x-redeem-bar:focus-within { border-color: var(--hz-violet); background: #fff; box-shadow: 0 0 0 5px rgba(91, 62, 255, .12); }
.x-redeem-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; height: 56px; padding: 0 14px; font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.x-redeem-input::placeholder { color: #A9AAB2; font-weight: 500; }
.x-redeem-input.invalid { color: var(--hz-err); }
.x-redeem-btn { height: 56px; padding: 0 26px; border-radius: 12px; font-size: 16px; }
.x-redeem .msg { margin: 12px 4px 0; }
.x-redeem-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 14px 4px 0; font-size: 13px; color: var(--hz-faint); }
.x-redeem-foot a { color: var(--hz-ink); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.x-redeem-foot a:hover { color: var(--hz-violet); }

/* stage: ink panel, violet structure, BUILD WITH HZAPI */
.x-stage { position: relative; min-height: 620px; border-radius: var(--r-xl); background: radial-gradient(110% 80% at 72% 38%, #261D63 0%, #16152A 46%, var(--hz-ink) 72%); overflow: hidden; color: #fff; isolation: isolate; }
.x-stage-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(80% 70% at 62% 42%, #000 25%, transparent 80%); -webkit-mask-image: radial-gradient(80% 70% at 62% 42%, #000 25%, transparent 80%); z-index: -1; }
.x-stage-motif { position: absolute; width: 104%; max-width: none; left: 2%; top: 8%; transition: transform 1.2s var(--ease); will-change: transform; filter: drop-shadow(0 40px 60px rgba(91, 62, 255, .45)); animation: x-float 8s ease-in-out infinite alternate; }
@keyframes x-float { from { translate: 0 -6px; } to { translate: 0 8px; } }
.x-stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.x-stage.is-live::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(18deg, rgba(19, 20, 26, .82) 0%, rgba(19, 20, 26, .2) 40%, transparent 62%); }
.x-stage.is-live .x-stage-motif, .x-stage.is-live .x-stage-meta.br { display: none; }
.x-stage-word, .x-stage-meta { z-index: 1; }
.x-stage-ctrl { position: absolute; right: 26px; bottom: 28px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(19, 20, 26, .45); color: rgba(255, 255, 255, .8); font: 600 11px/1 var(--mono); letter-spacing: .14em; cursor: pointer; backdrop-filter: blur(6px); }
.x-stage-ctrl:hover { color: #fff; border-color: rgba(255, 255, 255, .55); }
.x-stage-word { position: absolute; left: 40px; bottom: 36px; font-family: var(--display); font-size: clamp(48px, 5vw, 80px); line-height: .9; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; }
.x-stage-word::after { content: ""; display: inline-block; width: .42em; height: .15em; margin-left: .08em; background: var(--hz-lime); }
.x-stage-meta { position: absolute; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .55); display: flex; gap: 14px; align-items: center; }
.x-stage-meta b { color: #fff; letter-spacing: .1em; font-size: 13px; }
.x-stage-meta.tl { left: 40px; top: 34px; }
.x-stage-meta.tr { right: 36px; top: 34px; }
.x-stage-meta.br { right: 36px; bottom: 40px; }
.x-stage-meta .dot { width: 9px; height: 9px; background: var(--hz-lime); animation: x-blink 2.4s ease-in-out infinite; }
@keyframes x-blink { 50% { opacity: .25; } }

/* trust row */
.x-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.x-trust div { background: #fff; border: 1px solid var(--hz-line); border-radius: var(--r-md); padding: 20px 22px; }
.x-trust i { font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--hz-violet); letter-spacing: .12em; }
.x-trust b { display: block; font-size: 16px; font-weight: 800; margin: 8px 0 2px; }
.x-trust span { font-size: 13.5px; color: var(--hz-muted); }

/* ---------- section head ---------- */
.x-sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px 40px; margin-bottom: 36px; }
.x-sec-head .eyebrow { grid-column: 1 / -1; }
.x-sec-head .h2 { margin: 0; font-size: clamp(34px, 4vw, 56px); }
.x-sec-head p { margin: 0; color: var(--hz-muted); max-width: 22em; font-size: 15px; }
.x-sec-head.dark .h2 { color: #fff; }

/* ---------- plans: violet / ink / white cards with stepped path (VI "模型更新 / 开发文档") ---------- */
.x-plans { padding: 112px 0 112px; }
.x-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.x-tile { position: relative; min-height: 340px; border-radius: var(--r-lg); padding: 30px 32px; overflow: hidden; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s var(--ease); isolation: isolate; }
.x-tile:hover { transform: translateY(-4px); box-shadow: 0 40px 60px -40px rgba(19, 20, 26, .5); }
.x-tile.v { background: var(--hz-violet); color: #fff; }
.x-tile.k { background: var(--hz-ink); color: #fff; }
.x-tile.w { background: #fff; color: var(--hz-ink); border: 1px solid var(--hz-line); }
.x-tile .chip { align-self: flex-start; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; background: rgba(255, 255, 255, .16); }
.x-tile.w .chip { background: var(--hz-violet-050); color: var(--hz-violet-600); }
.x-tile h3 { margin: 22px 0 8px; font-family: var(--display); font-size: 32px; letter-spacing: -.035em; font-weight: 900; line-height: 1.1; }
.x-tile h3::after { content: " →"; font-weight: 500; opacity: .7; }
.x-tile p { margin: 0; font-size: 14px; opacity: .72; max-width: 17em; }
.x-tile .days { margin-top: auto; display: flex; align-items: baseline; gap: 6px; }
.x-tile .days b { font-size: 60px; line-height: 1; font-weight: 900; letter-spacing: -.05em; }
.x-tile .days span { font-size: 14px; opacity: .7; }
.x-tile svg.step { position: absolute; right: -2px; bottom: -2px; width: 66%; z-index: -1; transition: transform .7s var(--ease); }
.x-tile:hover svg.step { transform: translate(-6px, -4px); }
.x-tile-empty { grid-column: 1 / -1; text-align: center; padding: 60px; color: var(--hz-faint); border: 1px dashed var(--hz-line-2); border-radius: var(--r-lg); }

/* ---------- steps (ink band) ---------- */
.x-steps { background: var(--hz-ink); color: #fff; padding: 120px 0; position: relative; overflow: hidden; }
.x-steps::before { content: ""; position: absolute; right: -8%; top: -30%; width: 58%; height: 130%; background: radial-gradient(closest-side, rgba(91, 62, 255, .32), transparent); pointer-events: none; }
.x-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.x-steps-list li { padding: 30px 30px 34px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); position: relative; transition: background .3s, border-color .3s; }
.x-steps-list li:hover { background: rgba(91, 62, 255, .16); border-color: rgba(91, 62, 255, .5); }
.x-steps-list li::after { content: ""; position: absolute; right: 24px; top: 24px; width: 10px; height: 10px; background: rgba(255, 255, 255, .15); }
.x-steps-list li:first-child::after { background: var(--hz-lime); }
.x-steps-list .n { display: block; font-family: var(--display); font-size: 88px; line-height: .9; font-weight: 900; letter-spacing: -.06em; color: var(--hz-violet); }
.x-steps-list b { display: block; font-size: 23px; font-weight: 900; margin: 26px 0 10px; letter-spacing: -.02em; }
.x-steps-list p { margin: 0; color: rgba(255, 255, 255, .62); font-size: 14.5px; max-width: 20em; }
.x-steps-cta { margin-top: 56px; display: flex; gap: 28px; align-items: center; position: relative; }
.x-btn-light { background: #fff; color: var(--hz-ink); height: 54px; padding: 0 28px; border-radius: 14px; }
.x-btn-light:hover { background: var(--hz-lime); }
.x-link-light { color: rgba(255, 255, 255, .78); font-size: 15px; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .3); padding-bottom: 2px; }
.x-link-light:hover { color: #fff; border-color: #fff; }

.x-faq-note { color: var(--hz-muted); font-size: 15px; margin: 18px 0 0; max-width: 20em; }

/* ---------- closing card (violet, stepped path) ---------- */
.x-close { padding: 0 0 112px; }
.x-close-card { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--hz-violet); color: #fff; padding: 64px 60px; min-height: 340px; display: flex; align-items: center; isolation: isolate; }
.x-close-copy { position: relative; z-index: 1; }
.x-close-card .eyebrow.dark::before { background: var(--hz-lime); }
.x-close-card h2 { margin: 20px 0 32px; font-family: var(--display); font-size: clamp(36px, 4.2vw, 60px); line-height: 1.06; font-weight: 900; letter-spacing: -.04em; }
.x-close-cta { display: flex; gap: 28px; align-items: center; }
.x-close-card .x-btn-light:hover { background: var(--hz-ink); color: #fff; }
.x-close-art { position: absolute; right: 0; bottom: 0; width: min(560px, 54%); height: auto; z-index: 0; transition: transform 1s var(--ease); }
.x-close-art path { stroke: #fff; }
.x-close-card:hover .x-close-art { transform: translate(-8px, -6px); }

/* ---------- sub pages (兑换 / 查询 / 404) ---------- */
.x-sub { padding: 44px 0 112px; min-height: calc(100vh - 72px - 140px); }
.x-sub-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); gap: 40px; align-items: start; }
.x-sub-grid > * { min-width: 0; }
.x-sub-title { margin: 20px 0 14px; font-family: var(--display); font-size: clamp(40px, 4.6vw, 66px); line-height: 1.04; font-weight: 900; letter-spacing: -.05em; overflow-wrap: anywhere; }
.x-sub .x-lead { margin-bottom: 30px; max-width: 34em; font-size: 16.5px; text-wrap: pretty; overflow-wrap: anywhere; }
.x-sub .stepper { margin-bottom: 18px; }
.x-aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 14px; }
.x-aside-card { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--hz-ink); color: #fff; padding: 28px 30px 180px; isolation: isolate; }
.x-aside-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 60% at 80% 100%, rgba(91, 62, 255, .45), transparent 70%); }
.x-aside-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.x-aside-top b { color: #fff; letter-spacing: .1em; font-size: 13px; }
.x-aside-plan { position: relative; z-index: 1; margin-top: 36px; }
.x-aside-plan .chip { display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; background: var(--hz-violet); }
.x-aside-plan h3 { margin: 18px 0 8px; font-family: var(--display); font-size: 30px; line-height: 1.12; font-weight: 900; letter-spacing: -.035em; }
.x-aside-plan p { margin: 0; color: rgba(255, 255, 255, .62); font-size: 14px; max-width: 20em; }
.x-aside-plan .days { display: flex; align-items: baseline; gap: 6px; margin-top: 26px; }
.x-aside-plan .days b { font-size: 64px; line-height: 1; font-weight: 900; letter-spacing: -.05em; }
.x-aside-plan .days span { color: rgba(255, 255, 255, .6); font-size: 14px; }
.x-aside-code { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.x-aside-code span { color: rgba(255, 255, 255, .5); }
.x-aside-code b { font-family: var(--mono); font-weight: 600; letter-spacing: .06em; color: var(--hz-lime); }
.x-aside-art { position: absolute; right: 0; bottom: 0; width: 62%; z-index: 0; pointer-events: none; }
.x-legend { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.x-legend li { display: flex; align-items: center; gap: 12px; }
.x-legend .badge { min-width: 82px; justify-content: center; background: rgba(255, 255, 255, .1); }
.x-legend .badge.pending { color: #FFD27A; } .x-legend .badge.processing { color: var(--hz-cyan); } .x-legend .badge.done { color: var(--hz-lime); } .x-legend .badge.failed { color: #FF8A9B; }
.x-aside-notes { list-style: none; margin: 0; padding: 6px 20px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--hz-line); border-radius: var(--r-lg); }
.x-aside-notes li { display: flex; gap: 14px; padding: 14px 0; font-size: 14px; color: var(--hz-ink-2); }
.x-aside-notes li + li { border-top: 1px solid var(--hz-line); }
.x-aside-notes i { font-style: normal; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--hz-violet); padding-top: 2px; }
.x-404 { margin-top: 24px; min-height: 460px; }

/* 权益种类以文字呈现，不把本地天数当作统一期限 */
.x-tile .days.product-term, .x-aside-plan .days.product-term { flex-wrap: wrap; }
.x-tile .days.product-term b, .x-aside-plan .days.product-term b { font-size: clamp(36px, 4vw, 52px); overflow-wrap: anywhere; }
.x-tile h3, .x-tile p, .x-aside-plan h3, .x-aside-plan p, .x-aside-code b { min-width: 0; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .x-stage-motif, .x-title .cursor { animation: none; transition: none; }
}
@media (max-width: 1080px) {
  .x-sub-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .x-aside { position: static; }
  .x-aside-card { padding-bottom: 170px; }
  .x-hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .x-hero-copy { padding: 32px 0 24px; }
  .x-stage { min-height: 500px; }
  .x-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .x-hero { padding-top: 8px; }
  .x-title { font-size: clamp(46px, 13vw, 64px); margin: 18px 0 16px; }
  .x-lead { font-size: 16px; margin-bottom: 24px; }
  .x-redeem { padding: 16px 14px 14px; }
  .x-redeem::before { right: 14px; width: 64px; height: 22px; }
  .x-redeem-bar { flex-direction: column; }
  .x-redeem-btn { width: 100%; }
  .x-stage { min-height: 380px; border-radius: 22px; }
  .x-stage-motif { width: 150%; left: -24%; top: 6%; }
  .x-stage-word { left: 22px; bottom: 22px; font-size: 44px; }
  .x-stage-meta.tl { left: 22px; top: 20px; } .x-stage-meta.tr { right: 20px; top: 20px; } .x-stage-meta.br { display: none; }
  .x-trust, .x-tiles, .x-steps-list { grid-template-columns: 1fr; }
  .x-tile { min-height: 280px; }
  .x-steps-list .n { font-size: 68px; }
  .x-sec-head { grid-template-columns: 1fr; }
  .x-plans, .x-steps { padding: 80px 0; }
  .x-close-card { padding: 44px 26px 180px; min-height: 0; }
  .x-close-art { width: 92%; }
  .x-close { padding-bottom: 72px; }
  .x-sub { padding: 24px 0 72px; }
  .x-sub-title { font-size: clamp(34px, 10vw, 46px); }
}

/* Keep the big term clear of the stepped path in the bottom-right corner. */
.x-tile .days, .x-tile .days.product-term { flex-direction: column; align-items: flex-start; gap: 2px; max-width: 48%; position: relative; z-index: 1; }
.x-tile svg.step { width: 56%; }