/* BuyBridge 首页 —— 提单美学的具体实现 */

/* ── 抬头条：公司主体前置 ─────────────────────────── */
.bb-topstrip{background:var(--tj-ink); color:#fff; font-size:.7rem; letter-spacing:.05em}
.bb-topstrip-in{display:flex; align-items:center; justify-content:space-between; gap:var(--tj-s4); height:34px; opacity:.86}
.bb-topstrip-r{display:flex; align-items:center; gap:var(--tj-s2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bb-dot{width:6px; height:6px; border-radius:50%; background:#4ADE80; flex:none; box-shadow:0 0 0 3px rgba(74,222,128,.2)}

/* ── 导航 ─────────────────────────────────────────── */
.bb-nav{position:sticky; top:0; z-index:60; background:rgba(251,250,247,.86); backdrop-filter:saturate(180%) blur(14px); border-bottom:var(--bb-hair)}
.bb-nav-in{display:flex; align-items:center; gap:var(--tj-s6); height:72px}
.bb-brand{display:flex; align-items:center; gap:var(--tj-s3); text-decoration:none; flex:none}
.bb-brand-t{display:flex; flex-direction:column; line-height:1.05; font-family:var(--tj-font-display); font-weight:600; font-size:1.02rem; letter-spacing:.02em}
.bb-brand-t em{font-style:normal; font-family:var(--tj-font-mono); font-size:.6rem; font-weight:400; letter-spacing:.11em; text-transform:uppercase; color:var(--tj-ink-3); margin-top:2px}
.bb-links{display:flex; gap:var(--tj-s6); margin-inline-start:auto; font-size:.92rem}
.bb-links a{text-decoration:none; color:var(--tj-ink-2); padding:6px 0; position:relative; transition:color var(--tj-dur)}
.bb-links a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; background:var(--tj-accent); transform:scaleX(0); transform-origin:left; transition:transform var(--tj-dur) var(--tj-ease)}
.bb-links a:hover{color:var(--tj-ink)}
.bb-links a:hover::after{transform:scaleX(1)}
.bb-nav-r{display:flex; align-items:center; gap:var(--tj-s3); margin-inline-start:auto}
.bb-links + .bb-nav-r{margin-inline-start:0}
.bb-lang{display:flex; align-items:center; gap:6px; background:none; border:1px solid var(--tj-line); border-radius:var(--tj-r2); padding:8px 11px; font-family:var(--tj-font-mono); font-size:.76rem; font-weight:500; color:var(--tj-ink-2); cursor:pointer; transition:border-color var(--tj-dur),color var(--tj-dur)}
.bb-lang:hover{border-color:var(--tj-ink); color:var(--tj-ink)}
.bb-menu-toggle{display:none; width:40px; height:40px; border:1px solid var(--tj-line); border-radius:var(--tj-r2); background:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.bb-menu-toggle span{width:16px; height:1.5px; background:var(--tj-ink); transition:transform var(--tj-dur) var(--tj-ease)}
.bb-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.bb-menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ── HERO ─────────────────────────────────────────── */
.bb-hero{position:relative; padding:var(--tj-s9) 0 var(--tj-s8); overflow:hidden}
.bb-hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.bb-hero-bg svg{width:100%; height:100%}
/* 全站唯一的动画：航线画一次。同时运动的元素不超过 1 个。 */
.bb-route{stroke-dasharray:5 7; stroke-dashoffset:600; animation:bbdraw 2.4s var(--tj-ease) .3s forwards}
@keyframes bbdraw{to{stroke-dashoffset:0}}

.bb-hero-in{position:relative; z-index:1; display:grid; grid-template-columns:1.12fr .88fr; gap:var(--tj-s9); align-items:start}
/* 文字区是"纸"，压在航线图上方 —— 线可以经过，但绝不许压住字。
   用一层与底色同色的柔和渐变把线在文字范围内淡掉，而不是把线砍掉。 */
.bb-hero-l{position:relative; z-index:2}
.bb-hero-l::before{
  content:""; position:absolute; z-index:-1;
  inset:-40px -80px -40px -60px;
  background:radial-gradient(70% 62% at 34% 46%, var(--tj-bg) 0%, var(--tj-bg) 56%, rgba(251,250,247,.86) 74%, rgba(251,250,247,0) 100%);
  pointer-events:none;
}
.bb-hero-eyebrow{margin-bottom:var(--tj-s5)}
.bb-h1-2{display:block; color:var(--tj-ink-3)}
h1 + .lede{margin-top:var(--tj-s5)}

/* 报价框 */
.bb-quote{margin-top:var(--tj-s7); max-width:600px}
.bb-quote .bb-field{margin-bottom:var(--tj-s3)}
.bb-quote-row{display:flex; gap:var(--tj-s2); background:var(--tj-surface); border:1.5px solid var(--tj-ink); border-radius:var(--tj-r3); padding:6px; transition:box-shadow var(--tj-dur)}
.bb-quote-row:focus-within{box-shadow:var(--tj-ring)}
.bb-quote-row input{flex:1; min-width:0; border:0; background:none; padding:0 var(--tj-s4); font-family:var(--tj-font-mono); font-size:.88rem; color:var(--tj-ink); outline:none}
.bb-quote-row input::placeholder{color:var(--tj-ink-3); opacity:.75}
.bb-quote-note{margin-top:var(--tj-s3); font-size:.8rem; color:var(--tj-ink-3); line-height:1.55}

/* 单据卡 */
.bb-doc-quote{position:relative}
.bb-doc-quote::before{content:""; position:absolute; inset:0; border-radius:var(--tj-r3); pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.bb-doc-title{font-family:var(--tj-font-display); font-weight:600; font-size:1.06rem; margin-top:3px}
.bb-stamp{
  font-family:var(--tj-font-mono); font-size:.6rem; font-weight:600; letter-spacing:.1em;
  color:var(--tj-accent); border:1.5px solid var(--tj-accent); border-radius:var(--tj-r1);
  padding:6px 9px; transform:rotate(-3.5deg); opacity:.9; text-align:center; line-height:1.15; max-width:110px;
}
.bb-free{color:var(--tj-ok)}
.bb-doc-foot{margin-top:var(--tj-s5); padding-top:var(--tj-s4); border-top:1px dashed var(--tj-line); font-size:.78rem; line-height:1.6; color:var(--tj-ink-3)}

/* ── 数据条 ───────────────────────────────────────── */
.bb-stats{border-block:var(--bb-hair); background:var(--tj-surface)}
.bb-stats-in{display:grid; grid-template-columns:repeat(4,1fr)}
.bb-stat{padding:var(--tj-s6) var(--tj-s5) var(--tj-s6) 0; display:flex; flex-direction:column; gap:6px; position:relative}
.bb-stat + .bb-stat{padding-inline-start:var(--tj-s6)}
.bb-stat + .bb-stat::before{content:""; position:absolute; inset-inline-start:0; top:var(--tj-s6); bottom:var(--tj-s6); width:1px; background:var(--tj-line)}
.bb-stat strong{font-size:2.05rem; font-weight:600; letter-spacing:-.03em; line-height:1}
.bb-stat span{font-size:.79rem; color:var(--tj-ink-3); line-height:1.4}

/* ── 响应式 ───────────────────────────────────────── */
@media(max-width:1000px){
  .bb-hero-in{grid-template-columns:1fr; gap:var(--tj-s8)}
  .bb-hero{padding-top:var(--tj-s8)}
  .bb-hero-r{max-width:520px}
}
@media(max-width:860px){
  .bb-links{position:fixed; inset:106px 0 auto; flex-direction:column; gap:0; background:var(--tj-surface); border-bottom:var(--bb-hair); padding:var(--tj-s3) var(--tj-s5) var(--tj-s5); box-shadow:var(--tj-sh3); display:none}
  .bb-links.open{display:flex}
  .bb-links a{padding:15px 0; border-bottom:1px solid var(--tj-line-soft); font-size:1rem}
  .bb-menu-toggle{display:flex}
  .bb-hide-sm{display:none}
  .bb-nav-in{height:64px; gap:var(--tj-s4)}
  .bb-stats-in{grid-template-columns:repeat(2,1fr)}
  .bb-stat:nth-child(3){padding-inline-start:0}
  .bb-stat:nth-child(3)::before{display:none}
  .bb-stat:nth-child(n+3){border-top:var(--bb-hair)}
}
@media(max-width:560px){
  .bb-topstrip-in .mono{font-size:.62rem}
  .bb-quote-row{flex-direction:column; padding:var(--tj-s3)}
  .bb-quote-row input{padding:var(--tj-s3) var(--tj-s2)}
  .bb-quote-row .btn{width:100%}
  .bb-stat strong{font-size:1.7rem}
}

/* RTL：阿拉伯语整站镜像 */
[dir="rtl"] .bb-stamp{transform:rotate(3.5deg)}
[dir="rtl"] .bb-links a::after{transform-origin:right}
[dir="rtl"] .bb-route{display:none}

/* ── 五堵墙 ───────────────────────────────────────── */
.bb-walls{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:1px; background:var(--tj-line); border:var(--bb-hair); border-radius:var(--tj-r3); overflow:hidden}
.bb-wall{background:var(--tj-surface); padding:var(--tj-s6) var(--tj-s5); display:flex; flex-direction:column; gap:var(--tj-s3)}
.bb-wall .bb-no{color:var(--tj-accent); font-weight:600; font-size:.8rem}
.bb-wall h3{margin-bottom:2px}
.bb-wall > p{font-size:.9rem; color:var(--tj-ink-2); line-height:1.6}
.bb-fix{margin-top:auto; padding-top:var(--tj-s4); border-top:1px dashed var(--tj-line)}
.bb-fix span{display:block; font-size:.875rem; line-height:1.6; color:var(--tj-ink); padding-inline-start:var(--tj-s4); border-inline-start:2px solid var(--tj-accent)}

/* ── 七步 ─────────────────────────────────────────── */
.bb-how{background:var(--tj-surface); border-block:var(--bb-hair)}
.bb-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:0}
.bb-step{position:relative; padding:var(--tj-s5) var(--tj-s5) var(--tj-s6) 0; display:flex; flex-direction:column; gap:var(--tj-s3)}
.bb-step + .bb-step{padding-inline-start:var(--tj-s5)}
/* 顶部的流程横线 —— 单据流转 */
.bb-step::before{content:""; position:absolute; inset-inline:0; top:0; height:1px; background:var(--tj-line)}
.bb-step::after{content:""; position:absolute; inset-inline-start:0; top:-3.5px; width:7px; height:7px; border-radius:50%; background:var(--tj-line-soft); border:1.5px solid var(--tj-line)}
.bb-step-pay::after{background:var(--tj-accent); border-color:var(--tj-accent)}
.bb-step-pay .bb-step-n{color:var(--tj-accent)}
.bb-step-n{font-size:.72rem; font-weight:600; letter-spacing:.1em; color:var(--tj-ink-3); margin-top:var(--tj-s4)}
.bb-step h3{font-size:1.02rem}
.bb-step p{font-size:.855rem; color:var(--tj-ink-2); line-height:1.58}

/* ── 费率表 ───────────────────────────────────────── */
.bb-fee-doc{max-width:none}
.bb-table{width:100%; border-collapse:collapse; font-size:.9rem}
.bb-table th{text-align:start; font-family:var(--tj-font-mono); font-size:.68rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--tj-ink-3); padding:0 var(--tj-s4) var(--tj-s3) 0; border-bottom:var(--bb-rule); white-space:nowrap}
.bb-table td{padding:var(--tj-s4) var(--tj-s4) var(--tj-s4) 0; border-bottom:1px dashed var(--tj-line-soft); vertical-align:top; line-height:1.55}
.bb-table tr:last-child td{border-bottom:0}
.bb-table td:first-child{font-weight:600; white-space:nowrap; padding-inline-end:var(--tj-s5)}
.bb-table td:nth-child(2){font-family:var(--tj-font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; padding-inline-end:var(--tj-s5)}
.bb-table td:last-child{color:var(--tj-ink-2); font-size:.85rem; padding-inline-end:0}
.bb-hl{color:var(--tj-accent); font-weight:600; font-size:1.05rem}

/* ── 国家合伙人：深色区，全站唯一一块，用来断节奏 ── */
.bb-agents{background:var(--tj-ink); color:#F2F5F8}
.bb-agents h2{color:#fff}
.bb-agents .lede{color:#A9BACB}
.bb-field-inv{color:#6D8399}
.bb-field-inv::after{background:rgba(255,255,255,.14)}
.bb-agents-head{max-width:none; margin-bottom:var(--tj-s8)}
.bb-agents-head h2{margin:var(--tj-s4) 0}
.bb-agents-head .lede{max-width:74ch}
.bb-agents-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.13); border-radius:var(--tj-r3); overflow:hidden}
.bb-agent-col{background:var(--tj-ink); padding:var(--tj-s6) var(--tj-s5)}
.bb-alist{list-style:none; margin:var(--tj-s5) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--tj-s4)}
.bb-alist li{font-size:.9rem; line-height:1.55; color:#D3DEE8; padding-inline-start:var(--tj-s5); position:relative}
.bb-alist li::before{content:""; position:absolute; inset-inline-start:0; top:.6em; width:9px; height:1.5px; background:var(--tj-accent)}
.bb-agent-money{background:#08203A}
.bb-split{display:flex; align-items:baseline; gap:var(--tj-s4); padding:var(--tj-s4) 0; border-bottom:1px dashed rgba(255,255,255,.14)}
.bb-split-n{font-size:1.85rem; font-weight:600; color:var(--tj-accent); line-height:1; min-width:64px; letter-spacing:-.02em}
.bb-split span:last-child{font-size:.855rem; line-height:1.5; color:#C3D2DF}
.bb-agent-cta{margin-top:var(--tj-s6); width:100%}

.bb-map{margin-top:var(--tj-s8)}
.bb-terr{list-style:none; margin:var(--tj-s5) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:1px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.13); border-radius:var(--tj-r3); overflow:hidden}
.bb-terr li{background:var(--tj-ink); padding:15px var(--tj-s4); display:flex; align-items:center; gap:var(--tj-s3); font-size:.9rem}
.bb-terr li em{margin-inline-start:auto; font-style:normal; font-family:var(--tj-font-mono); font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; color:#4ADE80; border:1px solid rgba(74,222,128,.35); border-radius:var(--tj-r1); padding:3px 7px}
.bb-terr li.taken{opacity:.42}
.bb-terr li.taken em{color:#8FA4B6; border-color:rgba(255,255,255,.16)}

/* ── 保障 ─────────────────────────────────────────── */
.bb-trust-grid h3{margin-bottom:var(--tj-s3); font-size:1.02rem}
.bb-trust-grid p{font-size:.875rem; color:var(--tj-ink-2); line-height:1.6}

/* ── FAQ ──────────────────────────────────────────── */
.bb-faq{background:var(--tj-surface); border-block:var(--bb-hair)}
.bb-faq-in{display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--tj-s9); align-items:start}
.bb-faq .sec-head{margin-bottom:0; position:sticky; top:104px}
.bb-faq-list details{border-bottom:var(--bb-hair)}
.bb-faq-list details:first-child{border-top:var(--bb-hair)}
.bb-faq-list summary{cursor:pointer; list-style:none; padding:var(--tj-s5) var(--tj-s7) var(--tj-s5) 0; font-weight:600; font-size:1rem; position:relative; transition:color var(--tj-dur)}
.bb-faq-list summary::-webkit-details-marker{display:none}
.bb-faq-list summary:hover{color:var(--tj-accent)}
.bb-faq-list summary::after{content:"+"; position:absolute; inset-inline-end:0; top:50%; transform:translateY(-50%); font-family:var(--tj-font-mono); font-size:1.15rem; color:var(--tj-ink-3); transition:transform var(--tj-dur) var(--tj-ease)}
.bb-faq-list details[open] summary::after{content:"−"}
.bb-faq-list details[open] summary{color:var(--tj-accent)}
.bb-faq-list details p{padding:0 var(--tj-s7) var(--tj-s5) 0; font-size:.9rem; color:var(--tj-ink-2); line-height:1.65; max-width:64ch}

/* ── 终 CTA ───────────────────────────────────────── */
.bb-final-in{display:flex; align-items:center; justify-content:space-between; gap:var(--tj-s7); flex-wrap:wrap}
.bb-final h2{margin-bottom:var(--tj-s3)}
.bb-final-btns{display:flex; gap:var(--tj-s3); flex-wrap:wrap}

@media(max-width:900px){
  .bb-agents-grid{grid-template-columns:1fr}
  .bb-faq-in{grid-template-columns:1fr; gap:var(--tj-s6)}
  .bb-faq .sec-head{position:static; margin-bottom:var(--tj-s5)}
  .bb-step + .bb-step{padding-inline-start:0}
  .bb-step{padding-inline-end:var(--tj-s4)}
}
@media(max-width:560px){
  .bb-table td:last-child{font-size:.8rem}
  .bb-final-btns .btn{width:100%}
  .bb-final-btns{width:100%}
}

/* ── 报价结果 ─────────────────────────────────────── */
.bb-qresult{margin-top:var(--tj-s5); font-size:.88rem; line-height:1.6}
.bb-qresult.is-err{color:var(--tj-err-ink); background:var(--tj-err-bg); border:1px solid var(--tj-err-line); border-radius:var(--tj-r2); padding:var(--tj-s4)}
.bb-qdoc .bb-doc-head{padding:var(--tj-s4) var(--tj-s5)}
.bb-qcta{margin-top:var(--tj-s5); width:100%}
.bb-qresult.is-ask{background:var(--tj-surface); border:var(--bb-hair); border-radius:var(--tj-r3); padding:var(--tj-s5)}
.bb-ask-t{font-size:.88rem; color:var(--tj-ink-2); margin-bottom:var(--tj-s4); line-height:1.55}
.bb-ask-row{display:flex; align-items:stretch; gap:var(--tj-s2); border:1.5px solid var(--tj-ink); border-radius:var(--tj-r3); padding:5px; background:var(--tj-bg)}
.bb-ask-cur{display:flex; align-items:center; padding:0 var(--tj-s3); font-size:.85rem; color:var(--tj-ink-3); white-space:nowrap}
.bb-ask-row input{flex:1; min-width:0; border:0; background:none; outline:none; font-family:var(--tj-font-mono); font-size:1rem; font-variant-numeric:tabular-nums; color:var(--tj-ink)}
.bb-ask-row .btn{padding:11px 18px; font-size:.88rem}

/* 终 CTA 旁的联系与条款 —— 关键操作旁必须能看到联系方式和政策 */
.bb-final-in{align-items:flex-start}
.bb-final-side{flex:1 1 320px; min-width:280px; padding-inline-start:var(--tj-s6); border-inline-start:var(--bb-hair)}
.bb-contact{margin-top:var(--tj-s4); font-family:var(--tj-font-mono); font-size:1rem}
.bb-contact a{color:var(--tj-accent); text-decoration:none; border-bottom:1px solid var(--tj-accent-line)}
.bb-contact-sub{margin-top:var(--tj-s3); font-size:.76rem; line-height:1.6; color:var(--tj-ink-3)}
.bb-policy{display:flex; flex-wrap:wrap; gap:var(--tj-s2) var(--tj-s4); margin-top:var(--tj-s4); padding-top:var(--tj-s4); border-top:1px dashed var(--tj-line)}
.bb-policy a{font-size:.8rem; color:var(--tj-ink-2); text-decoration:none; border-bottom:1px solid var(--tj-line)}
.bb-policy a:hover{color:var(--tj-accent); border-color:var(--tj-accent-line)}
@media(max-width:860px){ .bb-final-side{padding-inline-start:0; border-inline-start:0; border-top:var(--bb-hair); padding-top:var(--tj-s5)} }
.bb-faq-q{font-size:inherit; font-weight:inherit; letter-spacing:inherit; display:inline; margin:0}
.bb-updated{padding:0 var(--tj-s5) var(--tj-s8); }
.bb-updated p{font-size:.78rem; color:var(--tj-ink-3); line-height:1.65; border-top:1px dashed var(--tj-line); padding-top:var(--tj-s5); max-width:80ch}