/* ═══════════════════════════════════════════════════════════
   首页样式 — ai-token-proxy-landing-page 模板（ref6）
   白底 + ink #101b32 + blue #2563eb
   DM Sans + Manrope + Noto Sans SC + DM Mono
   ═══════════════════════════════════════════════════════════ */



.display{font-family:Manrope,"Noto Sans SC",sans-serif;letter-spacing:-.055em}

/* ─── Hero ─── */






















/* hero 主区 */
.hero{overflow:hidden}
.hero-copy{padding-top:97px;padding-bottom:87px}
.eyebrow{display:flex;align-items:center;gap:11px;color:var(--primary);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.eyebrow:before{content:"";width:21px;height:1px;background:currentColor}
.hp-hero h1,.section-title{margin-top:0}
.hp-hero h1{max-width:1020px;margin:26px 0 22px;font-size:clamp(52px,6.4vw,96px);line-height:1.12;font-weight:700;font-family:Manrope,"Noto Sans SC",sans-serif;letter-spacing:-.055em}
.hp-hero h1 .hero-name{color:var(--primary)}
.hp-hero h1 .hero-line{display:block}
.hero-sub{max-width:540px;color:var(--muted);font-size:17px;line-height:1.9;margin-bottom:29px}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px}
.primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:29px;min-height:48px;padding:0 19px;background:#2563eb;border:1px solid #2563eb;border-radius:9px;color:#fff;font-size:13px;font-weight:700;text-decoration:none;transition:transform .25s,background .25s,box-shadow .25s}
.primary-btn:hover{transform:translateY(-3px);background:#164fcb;box-shadow:0 12px 25px rgba(37,99,235,.2);color:#fff}
.text-link{display:inline-flex;align-items:center;gap:9px;color:var(--text);font-size:13px;font-weight:700;transition:gap .2s,color .2s;text-decoration:none}
.text-link:hover{gap:14px;color:var(--primary)}

/* hero 路由图 */
.hero-stage{height:348px;position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background-color:#edf4ff;background-image:linear-gradient(to right,transparent calc(100% - 1px),var(--line) 100%),linear-gradient(to bottom,transparent calc(100% - 1px),var(--line) 100%);background-size:80px 80px}
:root.dark .hero-stage{background-color:#122441}
.hero-stage:before,.hero-stage:after{content:"";position:absolute;z-index:1;top:0;bottom:0;width:17%;pointer-events:none}
.hero-stage:before{left:0;background:linear-gradient(90deg,var(--soft-blue,#edf4ff),transparent)}
.hero-stage:after{right:0;background:linear-gradient(270deg,var(--soft-blue,#edf4ff),transparent)}
:root.dark .hero-stage:before{background:linear-gradient(90deg,#122441,transparent)}
:root.dark .hero-stage:after{background:linear-gradient(270deg,#122241,transparent)}
.stage-inner{position:relative;height:100%;width:min(100%,1440px);margin:auto}
.routes{position:absolute;width:100%;height:100%;inset:0;overflow:visible}
.route{fill:none;stroke:#91b4f7;stroke-width:1.25;opacity:.65}
:root.dark .route{stroke:#4869a6}
.route-flow{fill:none;stroke:#2563eb;stroke-width:2;stroke-dasharray:5 15;animation:flow 3s linear infinite}
:root.dark .route-flow{stroke:#5b8dff}
.route-flow.out{animation-duration:3.8s}
@keyframes flow{to{stroke-dashoffset:-40}}
.stage-source,.stage-dest,.stage-hub{position:absolute;z-index:2}
.stage-source{left:9%;top:50%;transform:translateY(-50%)}
.stage-source strong,.stage-dest strong{display:block;font-size:14px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;color:var(--text)}
.stage-source span,.stage-dest span{display:block;margin-top:5px;font-size:10px;color:var(--muted);letter-spacing:.02em;white-space:nowrap}
.stage-hub{left:50%;top:50%;width:78px;height:78px;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:18px;background:#2563eb;box-shadow:0 19px 55px rgba(37,99,235,.28),0 0 0 10px rgba(37,99,235,.07);animation:breathe 4s ease-in-out infinite}
.stage-hub .brand-mark{transform:rotate(-27deg) scale(1.35)}
.stage-hub .brand-mark i{background:#fff}
@keyframes breathe{50%{box-shadow:0 19px 55px rgba(37,99,235,.2),0 0 0 17px rgba(37,99,235,.045)}}
.stage-dest{left:82%;transform:translateY(-50%)}
.stage-dest.d1{top:14%}.stage-dest.d2{top:38%}.stage-dest.d3{top:62%}.stage-dest.d4{top:86%}
.stage-node{position:absolute;z-index:2;width:8px;height:8px;margin:-4px;border-radius:50%;background:#2563eb;box-shadow:0 0 0 5px var(--soft-blue,#edf4ff)}
:root.dark .stage-node{box-shadow:0 0 0 5px #122441}
.stage-node.source-node{left:20%;top:50%}.stage-node.n1{left:80%;top:14%}.stage-node.n2{left:80%;top:38%}.stage-node.n3{left:80%;top:62%}.stage-node.n4{left:80%;top:86%}

/* ─── section 公共 ─── */
.section{padding:126px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:53px}
.section-title{max-width:660px;font-size:clamp(38px,4.2vw,60px);line-height:1.2;font-weight:700;margin:19px 0 0;font-family:Manrope,"Noto Sans SC",sans-serif;letter-spacing:-.055em}
.section-desc{width:290px;flex:none;margin:0 0 6px;color:var(--muted);font-size:14px;line-height:1.85}

/* ─── 01 模型网络 ─── */
.model-table{border-top:1px solid var(--line)}
.model-row{display:grid;grid-template-columns:72px minmax(0,1.35fr) minmax(0,1fr) auto 25px;gap:20px;align-items:center;min-height:103px;border-bottom:1px solid var(--line);transition:padding .25s,background .25s}
.model-row:hover{padding-inline:12px;background:var(--soft)}
.model-logo{display:grid;place-items:center;width:43px;height:43px;border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:9px;object-fit:contain}:root.dark .model-logo.anthropic{filter:invert(1)}:root.dark .model-logo.openai{filter:brightness(1.6)}

.model-name{font-size:18px;font-weight:700;letter-spacing:-.035em;color:var(--text)}
.model-provider{color:var(--muted);font-size:13px}
.model-status{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;white-space:nowrap}
.model-status:before{content:"";width:6px;height:6px;background:#27ad80;border-radius:50%}
.model-status.free:before{background:#e0a12c}
.model-arrow{color:var(--muted);font-size:18px;font-weight:400}
.model-foot{margin-top:25px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted);font-size:12px}
.model-foot a{color:var(--primary);font-weight:700;text-decoration:none}

/* ─── 02 定价 ─── */
.pricing{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pricing-layout{display:grid;grid-template-columns:1fr 1fr;gap:11%;align-items:center}
.pricing .section-title{max-width:530px}
.pricing-copy{max-width:470px;margin:23px 0 28px;color:var(--muted);font-size:15px;line-height:1.9}
.price-display{border-top:1px solid var(--line);padding-top:29px}
.price-caption{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.price-number{margin:11px 0 25px;font-family:Manrope,sans-serif;font-size:clamp(85px,10vw,145px);font-weight:600;letter-spacing:-.105em;line-height:1;color:var(--primary)}
.price-number small{font-size:25px;letter-spacing:-.04em;color:var(--muted);font-weight:500}
.price-list{border-top:1px solid var(--line)}
.price-line{display:flex;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}
.price-line span{color:var(--muted)}.price-line strong{font-weight:700;text-align:right}
.price-free-tag{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:7px 13px;border-radius:8px;background:var(--soft-blue,#edf4ff);color:#9a6b0a;font-size:12px;font-weight:700}
:root.dark .price-free-tag{background:#122441;color:#e8c268}
:root.dark .price-free-tag:before{content:"";width:6px;height:6px;border-radius:50%;background:#e0a12c}

/* ─── 03 开发者 ─── */
.developer-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:9%;align-items:center}
.developer .section-title{max-width:480px}
.developer-copy{max-width:360px;margin:24px 0 27px;color:var(--muted);font-size:15px;line-height:1.9}
.endpoint{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:12px 0;border-top:1px solid var(--line);color:var(--muted);font-size:11px;word-break:break-all}
.endpoint span{color:var(--primary);font-weight:700}
.endpoint .endpoint-name{color:var(--muted);font-weight:600;opacity:.85;padding-right:2px}
.code-window{overflow:hidden;border:1px solid #26364e;border-radius:15px;background:#0d1728;color:#dce7f7;box-shadow:0 28px 70px rgba(18,36,68,.13)}
.code-top{height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px 0 24px;border-bottom:1px solid #26364e}
.code-tabs{display:flex;height:100%;align-items:center;gap:25px}
.code-tab{height:100%;border:0;border-bottom:2px solid transparent;background:none;color:#8294af;font-family:"DM Mono",monospace;font-size:11px;cursor:pointer;padding:0}
.code-tab.active{border-color:#76a3ff;color:#eaf1ff}
.copy-btn{display:flex;align-items:center;gap:7px;padding:7px 8px;border:0;border-radius:6px;color:#a6b6cd;background:transparent;font-size:11px;transition:background .2s,color .2s;cursor:pointer;font-family:inherit}
.copy-btn:hover{background:#1b2b42;color:#fff}
.code-body{min-height:300px;padding:28px 28px 35px;overflow:auto}
.code-body pre{margin:0;font-family:"DM Mono",monospace;font-size:12px;line-height:2;tab-size:2;white-space:pre}
.code-comment{color:#70819e}.code-key{color:#a9bbff}.code-string{color:#a9dfcb}.code-fn{color:#ffc589}
.code-bottom{display:flex;align-items:center;gap:8px;padding:14px 28px;border-top:1px solid #26364e;color:#8497b2;font-family:"DM Mono",monospace;font-size:10px}
.code-bottom:before{content:"";width:6px;height:6px;border-radius:50%;background:#45ca99}

/* ─── Closing ─── */
.closing{position:relative;overflow:hidden;padding:110px 0 115px;background:#2563eb;color:#fff}
:root.dark .closing{background:#1743a8}
.closing:after{content:"";position:absolute;width:560px;height:560px;border:1px solid rgba(255,255,255,.18);border-radius:50%;right:-155px;top:-215px;box-shadow:0 0 0 110px rgba(255,255,255,.045),0 0 0 225px rgba(255,255,255,.035);pointer-events:none}
.closing-inner{position:relative;z-index:1}
.closing .eyebrow{color:#c9dcff}
.closing h2{max-width:850px;margin:21px 0 29px;font-size:clamp(42px,5.4vw,76px);line-height:1.2;font-weight:700;font-family:Manrope,"Noto Sans SC",sans-serif;letter-spacing:-.055em}
.closing-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:42px;min-height:51px;padding:0 19px;border-radius:9px;background:#fff;color:#184bb6;font-size:13px;font-weight:700;text-decoration:none;transition:transform .2s,box-shadow .2s}
.closing-btn:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.13)}

/* ─── footer ─── */








/* ─── 动画 ─── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.hero-copy>*{animation:enter .8s both}
.hero-copy>*:nth-child(2){animation-delay:.1s}
.hero-copy>*:nth-child(3){animation-delay:.18s}
.hero-copy>*:nth-child(4){animation-delay:.26s}
@keyframes enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ─── skip link ─── */
.hp-skip-link{position:absolute;left:-9999px;top:0;background:#2563eb;color:#fff;padding:10px 18px;z-index:100;text-decoration:none}
.hp-skip-link:focus{left:0}

/* ─── 响应式 ─── */
@media(max-width:900px){
  
  
  .hero-copy{padding-top:83px;padding-bottom:78px}
  .section{padding:96px 0}
  .pricing-layout,.developer-layout{gap:6%}
  .stage-source{left:5%}.stage-dest{left:82%}
}
@media(max-width:700px){
  
  
  
  
  
  
  
  .hero-copy{padding-top:70px;padding-bottom:73px}
  .hp-hero h1{margin-top:21px;margin-bottom:19px;font-size:clamp(48px,10.7vw,72px);line-height:1.17}
  .hero-sub{max-width:480px;font-size:14px;line-height:1.85;margin-bottom:26px}
  .hero-stage{height:274px;background-size:56px 56px}
  .stage-source{left:4%}.stage-source strong,.stage-dest strong{font-size:11px}.stage-source span,.stage-dest span{font-size:8px}
  .stage-dest{left:82%}.stage-hub{width:59px;height:59px;border-radius:15px}.stage-hub .brand-mark{transform:rotate(-27deg) scale(1.05)}
  .section{padding:82px 0}.section-head{display:block;margin-bottom:37px}.section-title{font-size:clamp(38px,8vw,52px);margin-top:17px}.section-desc{width:auto;max-width:480px;margin:18px 0 0}
  .model-row{grid-template-columns:50px 1fr auto;gap:12px;min-height:87px}.model-logo{width:40px;height:40px}.model-name{font-size:16px}.model-provider,.model-arrow{display:none}.model-status{font-size:11px}
  .pricing-layout,.developer-layout{grid-template-columns:1fr;gap:48px}.pricing-copy,.developer-copy{margin-bottom:22px}.price-number{font-size:108px}
  .developer-layout{gap:31px}.developer-copy{max-width:500px}.code-body{min-height:275px}
  .closing{padding:86px 0 90px}.closing h2{font-size:clamp(42px,9vw,65px)}.closing:after{right:-410px}
  
}
@media(max-width:430px){
  .wrap{width:calc(100% - 36px)}
  .hero-copy{padding-top:62px;padding-bottom:64px}
  .hp-hero h1{font-size:clamp(43px,11.1vw,49px)}
  .hero-actions{gap:18px}.primary-btn{gap:17px}
  .hero-stage{height:245px}
  .stage-source{left:3%}.stage-source strong{max-width:62px;white-space:normal;line-height:1.2}.stage-source span{max-width:70px;white-space:normal;line-height:1.3}
  .stage-dest{left:82%}.stage-dest strong{font-size:9px}.stage-dest span{display:none}
  .stage-hub{width:52px;height:52px}.stage-node{width:6px;height:6px;margin:-3px}
  .model-row{grid-template-columns:44px minmax(0,1fr) auto;gap:10px}.model-name{font-size:14px}.model-status{font-size:0;gap:0}.model-status:before{width:7px;height:7px}
  .model-foot{align-items:flex-start;line-height:1.6}.model-foot span{max-width:220px}
  .price-number{font-size:94px}.price-number small{font-size:20px}
  .code-top{padding-inline:14px}.code-tabs{gap:17px}.code-body{padding:23px 16px 30px}.code-body pre{font-size:10px}.code-bottom{padding-inline:16px}
  .p-footer{padding:32px 0}.footer-inner{display:block}.footer-right{margin-top:25px;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}