/* ============================================================================
 * tokendidi 官网原型 v2 · 设计系统（客户视角：现代、专业、有质感）
 * 方向：浅色、克制、有质感 —— 渐变强调色 + 产品实拍感窗口 + 卡片层级 + 充足留白
 * 约束：零外链 / 零 JS（关键文字服务端可读）/ 390px 不溢出 / 不用金融感视觉
 * ========================================================================== */
:root{
  --bg:#ffffff;
  --bg-soft:#f6f8fc;
  --surface:#ffffff;
  --ink:#0b1220;
  --ink-2:#334155;
  
  --muted:#5d6b80;
  --line:#e6eaf2;
  --line-2:#f1f4f9;

  --b1:#2563eb;
  --b2:#6d28d9;
  --b3:#0891b2;
  --grad:linear-gradient(120deg,#2563eb 0%,#6d28d9 55%,#0891b2 110%);
  --grad-soft:linear-gradient(120deg,rgba(37,99,235,.10),rgba(109,40,217,.10) 55%,rgba(8,145,178,.10));

  
  --ok:#047857; --ok-soft:#e7f8f1;
  --amber:#b45309; --amber-soft:#fef4e6;
  --rose:#be123c; --rose-soft:#fdeef2;

  --r-s:10px; --r:14px; --r-l:20px; --r-xl:28px;
  --maxw:1180px;
  --sh-1:0 1px 2px rgba(11,18,32,.04), 0 2px 8px rgba(11,18,32,.05);
  --sh-2:0 8px 24px rgba(11,18,32,.07), 0 2px 6px rgba(11,18,32,.05);
  --sh-3:0 24px 60px rgba(11,18,32,.12), 0 8px 20px rgba(11,18,32,.06);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--b1);text-decoration:none;}
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.2;margin:0;}
p{margin:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.muted{color:var(--muted);}
.small{font-size:.875rem;}
.center{text-align:center;}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- 顶部导航 ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);}
.nav .in{max-width:var(--maxw);margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:28px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);font-size:1.06rem;letter-spacing:-.01em;}
.brand .mk{width:30px;height:30px;border-radius:9px;background:var(--grad);color:#fff;display:grid;place-items:center;
  font-size:15px;font-weight:800;box-shadow:0 4px 12px rgba(37,99,235,.28);}
.nav a.link{color:var(--ink-2);font-size:.94rem;font-weight:500;padding:8px 2px;}
.nav a.link:hover{color:var(--b1);}
.nav .sp{flex:1;}
.nav .side{display:flex;align-items:center;gap:10px;}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;
  padding:12px 20px;font-size:.95rem;font-weight:600;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(37,99,235,.28);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(37,99,235,.34);}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--sh-1);}
.btn-ghost:hover{border-color:#cfd8e6;transform:translateY(-1px);}
.btn-dark{background:var(--ink);color:#fff;}
.btn-lg{padding:15px 26px;font-size:1rem;border-radius:14px;}
.btn-sm{padding:8px 14px;font-size:.86rem;border-radius:10px;}
.btn-block{width:100%;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 460px at 12% -8%, rgba(37,99,235,.14), transparent 62%),
  radial-gradient(760px 420px at 92% 4%, rgba(109,40,217,.13), transparent 60%),
  radial-gradient(620px 380px at 62% 100%, rgba(8,145,178,.10), transparent 62%),
  var(--bg-soft);}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(11,18,32,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,18,32,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(70% 60% at 50% 0%,#000 20%,transparent 75%);}
.hero .in{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:72px 24px 84px;
  display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;}
.eyebrow{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:.83rem;color:var(--ink-2);box-shadow:var(--sh-1);margin-bottom:22px;}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft);}
.hero h1{font-size:3.05rem;font-weight:800;line-height:1.14;margin-bottom:20px;}
.hero .lead{font-size:1.09rem;color:var(--ink-2);max-width:560px;margin-bottom:28px;}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;}
.chips{display:flex;gap:10px;flex-wrap:wrap;}
.chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;font-size:.85rem;color:var(--ink-2);box-shadow:var(--sh-1);}
.chip svg{width:14px;height:14px;color:var(--ok);}

/* Hero 右侧：产品窗口 */
.mock{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-3);overflow:hidden;}
.mock .bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line-2);background:#fbfcfe;}
.mock .bar i{width:10px;height:10px;border-radius:50%;background:#e2e8f0;}
.mock .bar i:nth-child(1){background:#fca5a5;} .mock .bar i:nth-child(2){background:#fcd34d;} .mock .bar i:nth-child(3){background:#86efac;}
.mock .bar span{margin-left:8px;font-size:.8rem;color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace;}
.mock .body{padding:18px;}
.mock .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.mock .head b{font-size:.95rem;}
.mock .head em{font-style:normal;font-size:.78rem;color:var(--ok);background:var(--ok-soft);padding:3px 9px;border-radius:999px;}
.mock table{width:100%;border-collapse:collapse;font-size:.82rem;}
.mock td{padding:10px 6px;border-bottom:1px solid var(--line-2);color:var(--ink-2);}
.mock tr:last-child td{border-bottom:0;}
.pill{display:inline-block;white-space:nowrap;font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:7px;}
.pill.r{background:var(--rose-soft);color:var(--rose);}
.pill.a{background:var(--amber-soft);color:var(--amber);}
.pill.g{background:var(--ok-soft);color:var(--ok);}
.mock .foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;
  border-top:1px dashed var(--line);font-size:.78rem;color:var(--muted);}

/* ---------- 数字条 ---------- */
.stats{background:var(--ink);color:#fff;}
.stats .in{max-width:var(--maxw);margin:0 auto;padding:28px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.stat b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;}
.stat span{color:rgba(255,255,255,.66);font-size:.86rem;}

/* ---------- 分区 ---------- */
.sec{padding:80px 0 8px;}
.sec-head{max-width:680px;margin:0 auto 42px;text-align:center;}
.sec-head .kicker{font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--b1);margin-bottom:12px;}
.sec-head h2{font-size:2.05rem;font-weight:800;margin-bottom:12px;}
.sec-head p{color:var(--muted);font-size:1.02rem;}

/* ---------- 工具卡 ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:24px;box-shadow:var(--sh-1);transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease;overflow:hidden;}
.card::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad);opacity:0;transition:opacity .2s;}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#dbe3ef;}
.card:hover::before{opacity:1;}
.tile{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;color:#fff;font-weight:800;font-size:1rem;}
.t1{background:linear-gradient(135deg,#2563eb,#1d4ed8);} .t2{background:linear-gradient(135deg,#0d9488,#047857);}
.t3{background:linear-gradient(135deg,#d97706,#b45309);} .t4{background:linear-gradient(135deg,#7c3aed,#5b21b6);}
.t5{background:linear-gradient(135deg,#0891b2,#0e7490);} .t6{background:linear-gradient(135deg,#db2777,#9d174d);}
.card h3{font-size:1.1rem;font-weight:700;margin-bottom:8px;}
.card .desc{color:var(--muted);font-size:.93rem;min-height:66px;margin-bottom:16px;}
.card .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line-2);}
.pr{font-weight:800;font-size:1.18rem;}
.pr em{font-style:normal;font-size:.78rem;font-weight:600;color:var(--muted);margin-left:6px;}
.go{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;color:var(--b1);}
.go svg{width:15px;height:15px;transition:transform .16s;}
.card:hover .go svg{transform:translateX(3px);}

/* ---------- 特性三栏 ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:26px;box-shadow:var(--sh-1);}
.feat .fic{width:42px;height:42px;border-radius:12px;background:var(--grad-soft);color:var(--b2);
  display:grid;place-items:center;margin-bottom:16px;}
.feat h4{font-size:1.04rem;margin-bottom:8px;}
.feat p{color:var(--muted);font-size:.93rem;}

/* ---------- 步骤 ---------- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.stepc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:26px;box-shadow:var(--sh-1);}
.stepc .num{width:34px;height:34px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:.95rem;margin-bottom:14px;}
.stepc h4{font-size:1.02rem;margin-bottom:8px;}
.stepc p{color:var(--muted);font-size:.93rem;}

/* ---------- 适用场景 ---------- */
.scenes{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.scene{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:.9rem;color:var(--ink-2);box-shadow:var(--sh-1);}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.qa{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--sh-1);}
.qa b{display:block;margin-bottom:8px;font-size:.98rem;}
.qa p{color:var(--muted);font-size:.92rem;}

/* ---------- CTA ---------- */
.cta{position:relative;overflow:hidden;margin:72px 0 0;border-radius:var(--r-xl);padding:52px 44px;
  background:radial-gradient(700px 320px at 12% 0%,rgba(37,99,235,.55),transparent 60%),
             radial-gradient(600px 300px at 88% 100%,rgba(8,145,178,.45),transparent 60%),var(--ink);color:#fff;}
.cta h2{font-size:1.85rem;font-weight:800;margin-bottom:12px;}
.cta p{color:rgba(255,255,255,.72);max-width:560px;margin-bottom:26px;}
.cta .acts{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------- 页脚 ---------- */
footer{margin-top:40px;background:var(--bg-soft);border-top:1px solid var(--line);}
footer .in{max-width:var(--maxw);margin:0 auto;padding:44px 24px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;}
footer h5{margin:0 0 12px;font-size:.92rem;color:var(--ink);}
footer a,footer p{color:var(--muted);font-size:.9rem;display:block;padding:3px 0;}
footer a:hover{color:var(--b1);}
footer .legal{max-width:var(--maxw);margin:0 auto;padding:0 24px 40px;color:var(--muted);font-size:.83rem;line-height:2;}
footer .legal a{display:inline-block;padding:0 2px;}
footer .legal .sep{margin:0 8px;color:#cbd5e1;}

/* ---------- 商品详情 ---------- */
.crumb{color:var(--muted);font-size:.88rem;padding:22px 0 6px;}
.crumb a{color:var(--muted);}
.pd{display:grid;grid-template-columns:1.55fr .95fr;gap:34px;align-items:start;padding:6px 0;}
.pd h1{font-size:2.15rem;font-weight:800;margin:10px 0 12px;}
.pd .lead{color:var(--ink-2);font-size:1.04rem;margin-bottom:24px;}
.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:26px;margin-bottom:18px;box-shadow:var(--sh-1);}
.block h2{font-size:1.1rem;margin-bottom:14px;}
ul.clean{margin:0;padding-left:0;list-style:none;}
ul.clean li{position:relative;padding-left:26px;margin:9px 0;color:var(--ink-2);font-size:.95rem;}
ul.clean li::before{content:"";position:absolute;left:0;top:.5em;width:15px;height:15px;border-radius:50%;
  background:var(--ok-soft);border:1px solid #9ae6c6;}
ul.clean li::after{content:"";position:absolute;left:5px;top:.75em;width:5px;height:9px;border:solid var(--ok);
  border-width:0 2px 2px 0;transform:rotate(45deg);}
.steps{display:grid;gap:14px;}
.step{display:flex;gap:14px;align-items:flex-start;}
.step .n{flex:0 0 28px;height:28px;border-radius:9px;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem;}
.step p{color:var(--ink-2);font-size:.95rem;}
table.sample{width:100%;border-collapse:collapse;font-size:.9rem;}
table.sample th,table.sample td{border-bottom:1px solid var(--line-2);padding:11px 8px;text-align:left;}
table.sample th{color:var(--muted);font-weight:600;background:#fafbfe;}
table.sample th:first-child,table.sample td:first-child{width:88px;}
table.sample th:nth-child(2),table.sample td:nth-child(2){min-width:104px;white-space:nowrap;}
table.sample tr:last-child td{border-bottom:0;}
.buy{position:sticky;top:86px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:26px;box-shadow:var(--sh-3);}
.buy .lab{font-size:.85rem;color:var(--muted);}
.buy .big{font-size:2.2rem;font-weight:800;letter-spacing:-.02em;margin:4px 0 4px;}
.buy .note{color:var(--muted);font-size:.88rem;margin-bottom:18px;}
.buy ul{margin:0 0 20px;padding-left:0;list-style:none;}
.buy ul li{position:relative;padding-left:22px;margin:8px 0;color:var(--ink-2);font-size:.9rem;}
.buy ul li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800;}
.buy .acts{display:grid;gap:10px;}
.trustline{margin-top:14px;font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:8px;}

/* ---------- 支付页 ---------- */
.pay{display:grid;grid-template-columns:1.5fr .95fr;gap:30px;align-items:start;padding:10px 0 16px;}
.pay h1{font-size:1.8rem;font-weight:800;margin-bottom:20px;}
.kv{width:100%;border-collapse:collapse;font-size:.95rem;}
.kv th,.kv td{padding:14px 6px;border-bottom:1px solid var(--line-2);text-align:left;}
.kv th{color:var(--muted);font-weight:500;width:130px;}
.kv tr.total td{border-bottom:0;padding-top:18px;font-weight:800;font-size:1.35rem;}
.payway{display:flex;align-items:center;gap:14px;border:1.5px solid var(--b1);
  background:linear-gradient(120deg,rgba(37,99,235,.06),rgba(109,40,217,.05));
  border-radius:var(--r);padding:16px;box-shadow:0 0 0 4px rgba(37,99,235,.06);}
.payway .mark{width:36px;height:36px;border-radius:10px;background:var(--b1);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem;}
.radio{width:17px;height:17px;border-radius:50%;border:5px solid var(--b1);background:#fff;flex:0 0 auto;}
.ordno{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem;color:var(--ink-2);
  
  overflow-wrap:anywhere;word-break:break-word;}
.alert{background:var(--amber-soft);border:1px solid #fcd9a4;color:#8a5300;border-radius:var(--r);padding:14px 16px;font-size:.9rem;}

/* ---------- 手机预览外壳 ---------- */
iframe.phone{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh-2);}


.plans{grid-template-columns:repeat(4,1fr);}
@media (max-width:1000px){.plans{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.plans{grid-template-columns:1fr;}}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .hero .in{grid-template-columns:1fr;gap:36px;padding:52px 24px 64px;}
  .hero h1{font-size:2.35rem;}
  .hero .lead{max-width:none;}
  .grid,.cols3,.steps3{grid-template-columns:1fr 1fr;}
  .pd,.pay{grid-template-columns:1fr;}
  .buy{position:static;}
  .faq{grid-template-columns:1fr;}
  footer .in{grid-template-columns:1fr 1fr;gap:22px;}
  .stats .in{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .hero h1{font-size:1.95rem;}
  .hero .lead{font-size:1rem;}
  .sec{padding:56px 0 6px;}
  .sec-head h2{font-size:1.6rem;}
  .grid,.cols3,.steps3{grid-template-columns:1fr;}
  
  .nav .in{gap:8px 14px;flex-wrap:wrap;overflow:visible;padding:10px 16px;}
  .nav a.link{white-space:nowrap;font-size:.88rem;padding:6px 2px;}
  .nav .sp{display:none;}
  .nav .side{flex-wrap:wrap;gap:8px;}
  .cta{padding:34px 24px;border-radius:var(--r-l);}
  .cta h2{font-size:1.4rem;}
  .pd h1{font-size:1.7rem;}
  .card .desc{min-height:0;}
  footer .in{grid-template-columns:1fr;}
}