/* stok24.com — 币安美股 / 代币化股票 bStocks · 设计系统
   风格：亮底「华尔街上链」币安黄场景插画（bright wall-street uplink）
   标题拉丁 Schibsted Grotesk · 中文标题 钉钉进步体 · 正文 Noto Sans SC · mono Chivo Mono */

/* ---------- 字体（自托管；文件在 assets/fonts/） ---------- */
@font-face{font-family:'Schibsted Grotesk';src:url('fonts/schibsted-grotesk-latin.woff2') format('woff2');font-weight:500 900;font-style:normal;font-display:swap;}
/* 中文标题 钉钉进步体：见 fonts/dingtalk/font.css（75 unicode-range 分片·按需加载·由 index.html 引入） */
@font-face{font-family:'Chivo Mono';src:url('fonts/chivo-mono-latin.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap;}
@font-face{font-family:'tabler-icons';src:url('fonts/tabler-subset.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

/* ---------- Tabler 图标（子集 · 仅本站用到的 9 个） ---------- */
.ti{font-family:'tabler-icons'!important;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;display:inline-block;vertical-align:-.125em;-webkit-font-smoothing:antialiased}
.ti-arrow-right:before{content:"\ea1f"}
.ti-chevron-right:before{content:"\ea61"}
.ti-building-bank:before{content:"\ebe2"}
.ti-lock:before{content:"\eae2"}
.ti-clock-hour-4:before{content:"\f319"}
.ti-discount-2:before{content:"\ee7c"}
.ti-tools:before{content:"\ebca"}
.ti-alert-triangle:before{content:"\ea06"}

/* ---------- 设计 token ---------- */
:root{
  /* 配色（币安黄主导 + 明度阶梯） */
  --paper:#FDF9EF; --paper-2:#F7F1E3; --paper-3:#F3EAD3;
  --white:#ffffff;
  --ink:#181A20; --ink-2:#3a3d46; --muted:#5c5647; --muted-2:#8a8065;
  --byellow:#F0B90B; --byellow-d:#E0A509; --byellow-t:#b07f08; --byellow-bg:#fffaec; --byellow-line:#e7ddc4;
  --skyline:#dcd0b0; --skyline-2:#d0c39c; --hair:#e7ddc4; --border-strong:#d6ccb2;
  --up:#12936A; --down:#C4472E; --danger:#a3542d;

  /* 字体栈 */
  --font-display:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  --font-cjk-title:'DingTalk JinBuTi','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --font-mono:'Chivo Mono',ui-monospace,'Cascadia Code',Consolas,monospace;

  /* 字阶（模块化 1.25） */
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:1rem; --fs-md:1.125rem;
  --fs-lg:1.375rem; --fs-xl:1.75rem; --fs-2xl:2.125rem; --fs-hero:clamp(1.9rem,5vw,2.75rem);

  /* 间距 8pt */
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem; --sp-5:3rem; --sp-6:4rem;

  /* 圆角体系 */
  --r-sm:6px; --r:10px; --r-card:12px; --r-lg:14px; --r-pill:999px;

  /* 阴影（柔和多层） */
  --sh-sm:0 1px 2px rgba(80,66,26,.06),0 2px 6px rgba(80,66,26,.05);
  --sh-card:0 2px 8px rgba(120,100,40,.07),0 8px 24px rgba(120,100,40,.06);
  --sh-yellow:0 8px 26px rgba(200,150,20,.20);

  --wrap:1120px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:var(--fs-base);line-height:1.75;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-cjk-title);font-weight:400;line-height:1.3;letter-spacing:.2px}
h1{font-size:var(--fs-hero)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)}
:focus-visible{outline:3px solid var(--byellow);outline-offset:2px}

/* ---------- 布局 ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:var(--sp-5) 0}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:1.5px;text-transform:uppercase;color:var(--byellow-t)}
.mono{font-family:var(--font-mono)}
.lat{font-family:var(--font-display)}

/* ---------- 顶栏 nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(253,249,239,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-family:var(--font-display);font-weight:900;font-size:1.35rem;letter-spacing:-1px;color:var(--ink)}
.brand span{color:var(--byellow-d)}
.nav-links{display:flex;gap:22px;font-size:var(--fs-sm);color:var(--ink-2)}
.nav-links a:hover{color:var(--byellow-t)}
.partner-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--byellow);background:var(--byellow-bg);border-radius:var(--r-pill);padding:5px 12px 5px 9px;font-size:var(--fs-xs);color:var(--byellow-t);font-weight:500}
.bnb-logo{display:inline-block;vertical-align:middle}

/* ---------- HERO 场景 ---------- */
.hero{position:relative;overflow:hidden;min-height:560px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero-inner{position:absolute;inset:0;z-index:2}
.hero-title{position:absolute;top:146px;left:0;right:0;text-align:center;padding:0 24px}
.hero-title h1{color:var(--ink);text-shadow:0 1px 12px rgba(255,247,225,.9)}
.hero-title .hl{background:var(--byellow);padding:0 10px;border-radius:5px;box-decoration-break:clone}
.hero-title p{max-width:520px;margin:14px auto 0;color:var(--muted);font-size:var(--fs-md);text-shadow:0 1px 8px rgba(255,247,225,.9)}

/* 浮动代币 / 凭证 / 光束粒子 */
.tok{position:absolute;border-radius:15px;background:var(--white);border:2px solid var(--byellow);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(240,185,11,.5);animation:flo 4s ease-in-out infinite;z-index:2}
.tok .t-code{font-family:var(--font-display);font-weight:700}
.tok .t-tag{font-size:.5rem;color:var(--byellow-t)}
.cert{position:absolute;width:54px;height:68px;border-radius:5px;background:var(--white);border:1px solid #e2d9c2;box-shadow:0 4px 12px rgba(120,100,40,.16);animation:flo 5s ease-in-out infinite;overflow:hidden;z-index:2}
.cert .cap{height:11px;background:var(--byellow)}
.cert .nm{padding:5px;font-family:var(--font-display);font-weight:700;font-size:.7rem}
.pt{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--byellow);box-shadow:0 0 9px var(--byellow);animation:rise 3.2s linear infinite}

.btn-y{background:var(--byellow);color:var(--ink);border:none;border-radius:var(--r);padding:12px 18px;font-size:var(--fs-base);font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:transform .12s,background .12s}
.btn-y:hover{background:var(--byellow-d)}
.btn-y:active{transform:scale(.98)}
/* ---------- 官方黄信任带 ---------- */
.trust-bar{background:var(--byellow);color:var(--ink)}
.trust-bar .wrap{display:flex;padding:0}
.trust-item{flex:1;padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:500;border-right:1px solid #d9a608}
.trust-item:last-child{border-right:none}
.trust-item i{font-size:18px}

/* ---------- 4 步注册流程 ---------- */
.steps{display:flex;align-items:stretch;gap:0;margin-top:var(--sp-3)}
.step{flex:1;padding:0 16px}
.step:first-child{padding-left:0} .step:last-child{padding-right:0}
.step .n{font-family:var(--font-mono);color:var(--byellow-d);font-weight:700;font-size:var(--fs-sm)}
.step h4{font-family:var(--font-cjk-title);font-size:var(--fs-base);margin-top:4px}
.step p{font-size:var(--fs-sm);color:var(--muted);margin-top:4px}
.step-arrow{align-self:center;color:#e6c877;font-size:20px}
.link-y{color:var(--byellow-t);font-weight:500}
.link-y:hover{text-decoration:underline}

/* ---------- cornerstone featured ---------- */
.feat-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}
.feat-card{background:var(--white);border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-sm)}
.feat-head{height:104px;background:var(--byellow);position:relative;display:flex;align-items:center;padding:0 20px}
.feat-head .eyebrow{color:#7a5c06}
.feat-badge{position:absolute;right:18px;top:16px;width:56px;height:56px;border-radius:13px;background:var(--white);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.72rem}
.feat-body{padding:16px 18px}
.feat-body h3{font-family:var(--font-cjk-title);font-size:var(--fs-md)}
.feat-body p{font-size:var(--fs-sm);color:var(--muted);margin:6px 0 8px}
.side-list{display:flex;flex-direction:column;gap:0}
.side-list .hd{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted-2);margin-bottom:6px}
.side-list a{padding:9px 0;border-bottom:1px solid var(--hair);font-size:var(--fs-sm);font-weight:500;display:block}
.side-list a:last-child{border-bottom:none}
.side-list a:hover{color:var(--byellow-t)}

/* ---------- 工具台 ---------- */
.tools-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.tool-flagship{background:var(--white);border:1px solid var(--hair);border-radius:var(--r-card);padding:18px;box-shadow:var(--sh-sm)}
.tool-flagship h3{font-family:var(--font-cjk-title);font-size:var(--fs-md)}
.tool-flagship .desc{font-size:var(--fs-sm);color:var(--muted-2);margin:4px 0 14px}
.tool-field{display:flex;gap:8px;align-items:center;background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);padding:10px 12px;font-family:var(--font-mono);font-size:var(--fs-sm)}
.tool-out{display:flex;justify-content:space-between;margin-top:10px;font-size:var(--fs-sm)}
.tool-out.hi{padding:8px 12px;background:var(--byellow-bg);border-radius:var(--r-sm);font-weight:700;color:var(--byellow-t);margin-top:8px}
.tool-list .row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--hair)}
.tool-list .row:last-child{border-bottom:none}
.tool-list .tno{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--byellow-d);font-weight:700}

/* ---------- 文章流（编号列表） ---------- */
.art-list{display:flex;flex-direction:column}
.art-row{display:flex;gap:16px;padding:13px 0;border-top:1px solid var(--hair);align-items:baseline}
.art-row:last-child{border-bottom:1px solid var(--hair)}
.art-row .num{font-family:var(--font-mono);font-size:var(--fs-md);color:var(--byellow-d);font-weight:700;min-width:28px}
.art-row h4{font-family:var(--font-cjk-title);font-size:var(--fs-base)}
.art-row .meta{font-size:var(--fs-xs);color:var(--muted-2);margin-top:3px}
.art-row:hover h4{color:var(--byellow-t)}

/* ---------- 风险披露条 ---------- */
.risk{background:var(--paper-3);display:flex;align-items:flex-start;gap:10px;padding:16px 0}
.risk .wrap{display:flex;align-items:flex-start;gap:10px}
.risk i{color:var(--danger);margin-top:2px;font-size:18px}
.risk p{font-size:var(--fs-xs);color:#6a5c48;line-height:1.6}

/* ---------- 页脚 ---------- */
.foot{background:var(--ink);color:#aab2c4;padding:var(--sp-4) 0 var(--sp-3)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:22px}
.foot .brand{color:var(--white)}
.foot .brand span{color:var(--byellow)}
.foot .about{font-size:var(--fs-sm);line-height:1.65;color:#818aa0;margin-top:10px}
.foot h5{color:var(--white);font-size:var(--fs-sm);font-weight:500;margin-bottom:8px;font-family:var(--font-body)}
.foot ul{list-style:none;font-size:var(--fs-sm);line-height:2}
.foot ul a{color:#818aa0}
.foot ul a:hover{color:var(--byellow)}
.foot-bottom{border-top:1px solid #2a2e38;margin-top:20px;padding-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:var(--fs-xs);color:#727a90}
.foot-bottom .pp{display:inline-flex;align-items:center;gap:6px;color:#a9b0c0}

/* ---------- 动画 ---------- */
@keyframes flo{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-215px);opacity:0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- 响应式 ---------- */
.nav-toggle{display:none}
@media (max-width:860px){
  .feat-grid,.tools-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav .wrap{position:relative}
  .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;padding:8px;cursor:pointer;margin-left:auto}
  .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px}
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--hair);flex-direction:column;padding:6px 24px;gap:0;z-index:40}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--hair)}
  .partner-badge{display:none}
}
@media (max-width:560px){
  .trust-bar .wrap{flex-wrap:wrap}
  .trust-item{flex:1 1 50%;border-right:1px solid #d9a608;border-bottom:1px solid #d9a608}
  .steps{flex-wrap:wrap;gap:12px}
  .step{flex:1 1 44%;padding:0}
  .step-arrow{display:none}
  .hero-title{top:116px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .tok{transform:scale(.85)}
}
@media (max-width:380px){
  .foot-grid{grid-template-columns:1fr}
}
/* 触摸目标 */
@media (hover:none){
  .btn-y,.art-row{min-height:44px}
  .nav-links a,.side-list a,.related a,.tool-list .row,.foot ul a,.toc a,.chip{min-height:44px;display:flex;align-items:center}
  .brand,.nav-toggle,.breadcrumb a{min-height:44px;display:inline-flex;align-items:center}
  .toc a,.chip{display:inline-flex}
}
@media (max-width:560px){
  .btn-y,.art-row{min-height:44px}
  .nav-links a,.side-list a,.related a,.tool-list .row,.foot ul a{min-height:44px;display:flex;align-items:center}
  .brand,.nav-toggle,.breadcrumb a,.toc a,.chip,.link-y{min-height:44px;display:inline-flex;align-items:center}
  .nav-toggle{min-height:44px;min-width:44px;justify-content:center}
}

/* ========== 文章 / 合规页 ========== */
.breadcrumb{max-width:820px;margin:0 auto;padding:16px 24px 0;font-size:var(--fs-sm);color:var(--muted-2)}
.breadcrumb a:hover{color:var(--byellow-t)}
.article{max-width:760px;margin:0 auto;padding:0 24px 34px}
.article h1{font-size:clamp(1.6rem,4vw,2.2rem);margin:18px 0 10px;line-height:1.3}
.article-meta{font-size:var(--fs-sm);color:var(--muted-2);display:flex;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--hair);padding-bottom:16px;margin-bottom:6px}
.toc{background:var(--paper-2);border:1px solid var(--hair);border-radius:var(--r-card);padding:14px 18px;margin:20px 0}
.toc .toc-h{font-family:var(--font-cjk-title);font-size:var(--fs-sm);color:var(--muted);margin-bottom:8px}
.toc ol{list-style:none;counter-reset:toc;font-size:var(--fs-sm);line-height:1.95;padding:0}
.toc ol li{counter-increment:toc}
.toc ol li:before{content:counter(toc,decimal-leading-zero) "  ";font-family:var(--font-mono);color:var(--byellow-d)}
.toc a{color:var(--ink-2)} .toc a:hover{color:var(--byellow-t)}
.prose{font-size:1.0625rem;line-height:1.85}
.prose h2{font-size:1.5rem;margin:34px 0 12px}
.prose h3{font-size:1.2rem;margin:24px 0 10px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px 1.3em}
.prose li{margin:6px 0}
.prose a{color:var(--byellow-t);text-decoration:underline;text-underline-offset:2px}
.prose blockquote{border-left:3px solid var(--byellow);background:var(--paper-2);padding:12px 16px;margin:16px 0;border-radius:0 var(--r) var(--r) 0;color:var(--muted)}
.prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:var(--fs-sm)}
.prose th,.prose td{border:1px solid var(--hair);padding:9px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--paper-2);font-weight:500}
.prose strong{font-weight:500}
.note{background:var(--byellow-bg);border:1px solid var(--byellow-line);border-radius:var(--r);padding:12px 16px;margin:16px 0;font-size:var(--fs-sm)}
.cta-box{background:var(--ink);color:#e7ebf3;border-radius:var(--r-lg);padding:20px 22px;margin:26px 0;text-align:center}
.cta-box .code{font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--byellow);letter-spacing:2px}
.cta-box p{margin:6px 0 14px;font-size:var(--fs-sm);color:#b9c0cf}
.cta-box .btn-y{text-decoration:none}
.faq{max-width:760px;margin:0 auto;padding:0 24px 30px}
.faq h2{font-size:1.5rem;margin-bottom:12px}
.faq details{border:1px solid var(--hair);border-radius:var(--r);padding:12px 16px;margin-bottom:10px;background:var(--white)}
.faq summary{font-family:var(--font-cjk-title);font-size:1.05rem;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--byellow-d);font-weight:700;margin-right:8px}
.faq details[open] summary:before{content:"\2013"}
.faq details .a{margin-top:10px;font-size:var(--fs-sm);color:var(--muted);line-height:1.8}
.related{max-width:760px;margin:0 auto;padding:20px 24px 38px;border-top:1px solid var(--hair)}
.related h3{font-size:1.1rem;margin-bottom:10px}
.related a{display:block;padding:9px 0;border-bottom:1px solid var(--hair);font-size:var(--fs-sm);font-weight:500}
.related a:hover{color:var(--byellow-t)}
.disclosure{max-width:760px;margin:0 auto;padding:8px 24px 20px;font-size:var(--fs-xs);color:var(--muted-2);line-height:1.6}
@media (max-width:560px){.prose{font-size:1rem}.prose h2{font-size:1.3rem}}

/* ========== 工具通用 ========== */
.calc{background:var(--white);border:1px solid var(--hair);border-radius:var(--r-card);padding:20px;margin:18px 0;box-shadow:var(--sh-sm)}
.calc label{display:block;font-size:var(--fs-sm);color:var(--muted);margin:12px 0 5px}
.calc input,.calc select{width:100%;padding:11px 13px;font-size:1rem;font-family:var(--font-body);border:1px solid var(--border-strong);border-radius:var(--r);background:var(--paper)}
.calc input:focus,.calc select:focus{outline:2px solid var(--byellow);border-color:var(--byellow)}
.calc fieldset{border:1px solid var(--hair);border-radius:var(--r);padding:12px 14px;margin:12px 0}
.calc fieldset label{display:flex;align-items:center;gap:8px;margin:6px 0;cursor:pointer}
.calc fieldset input[type=radio],.calc fieldset input[type=checkbox]{width:auto;margin:0}
.res{margin-top:18px;border-top:1px dashed var(--hair);padding-top:14px}
.res .line{display:flex;justify-content:space-between;padding:6px 0;font-size:.95rem}
.res .big{background:var(--byellow-bg);border:1px solid var(--byellow-line);border-radius:var(--r);padding:12px 14px;margin-top:10px;display:flex;justify-content:space-between;align-items:center;font-weight:500}
.res .big .v{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--byellow-t)}
.cmp-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:var(--fs-sm)}
.cmp-table th,.cmp-table td{border:1px solid var(--hair);padding:10px 12px;text-align:left;vertical-align:top}
.cmp-table th{background:var(--paper-2);font-weight:500}
.cmp-table tr.hl td{background:var(--byellow-bg)}
.chip{display:inline-block;padding:8px 15px;background:var(--byellow-bg);border:1px solid var(--byellow-line);border-radius:var(--r-pill);font-size:.9rem;color:var(--byellow-t);transition:background .12s}
.chip:hover{background:#fdefc4}
.faq .a a{color:var(--byellow-t);text-decoration:underline;text-underline-offset:2px}