/* =========================================================
   乐动在线 · 共享样式表  /assets/site.css
   视觉母题：数据脉冲（Data Pulse）
   ========================================================= */

/* ---------- 1. Reset ---------- */
*,
*::before,
*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:116px;
}

body,
h1,h2,h3,h4,h5,h6,
p,ul,ol,li,figure,figcaption,blockquote,dl,dt,dd{margin:0;padding:0}

ul,ol{list-style:none}

img,svg,video,canvas{display:block;max-width:100%}

button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}

button{cursor:pointer}

a{color:inherit;text-decoration:none}

table{border-collapse:collapse;width:100%}

[hidden]{display:none !important}

/* ---------- 2. 变量 ---------- */
:root{
  --c-blue:#0A84FF;
  --c-blue-deep:#0A6BD0;
  --c-orange:#FF6B1A;
  --c-orange-deep:#C64A0A;
  --c-deep:#1C1F26;
  --c-deep-2:#141821;
  --c-cyan:#00E5D0;
  --c-cloud:#F4F6F9;
  --c-card:#FFFFFF;
  --c-ink:#0E1116;
  --c-stone:#5A6472;
  --c-line:#2A303B;
  --c-peach:#FFD9C0;

  --glass-dark:rgba(20,24,33,.74);
  --glass-line:rgba(255,255,255,.14);
  --glass-line-soft:rgba(255,255,255,.08);

  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

  --w-wide:1240px;
  --w-read:720px;

  --r-xs:8px;
  --r-sm:12px;
  --r-md:18px;
  --r-lg:28px;
  --r-pill:999px;

  --header-h:72px;

  --sh-card:0 18px 40px -30px rgba(14,17,22,.5);
  --sh-float:0 26px 60px -34px rgba(0,0,0,.85);

  --ease:cubic-bezier(.22,.7,.28,1);
  --dur:320ms;
}

/* ---------- 3. 基础排版 ---------- */
body{
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:400;
  line-height:1.8;
  color:var(--c-ink);
  background-color:var(--c-cloud);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4,h5,h6{
  font-weight:800;
  line-height:1.16;
  letter-spacing:-.02em;
  line-break:strict;
  overflow-wrap:break-word;
}

p,li,dd,dt,figcaption{overflow-wrap:break-word}

h1{font-size:clamp(2.4rem,5.4vw,4.2rem)}
h2{font-size:clamp(1.72rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.24rem,2vw,1.6rem)}
h4{font-size:1.12rem;letter-spacing:-.01em}

main{display:block}

#main-content{scroll-margin-top:116px}

::selection{background:rgba(10,132,255,.22);color:var(--c-ink)}

:focus{outline:none}

:focus-visible{
  outline:2px solid var(--c-blue);
  outline-offset:3px;
  border-radius:6px;
}

.section-dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.scroll-progress :focus-visible{outline-color:var(--c-cyan)}

/* ---------- 4. 无障碍工具类 ---------- */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.skip-link{
  position:fixed;
  top:12px;left:12px;
  z-index:220;
  display:inline-block;
  padding:11px 20px;
  border-radius:var(--r-pill);
  background:var(--c-cyan);
  color:var(--c-deep-2);
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
  transform:translateY(-220%);
  transition:transform .2s var(--ease);
}

.skip-link:focus{
  transform:translateY(0);
  outline:2px solid #fff;
  outline-offset:2px;
}

/* ---------- 5. 容器与分区 ---------- */
.container{
  width:100%;
  max-width:var(--w-wide);
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);
}

.container-read{
  width:100%;
  max-width:calc(var(--w-read) + clamp(32px,8vw,64px));
  margin-inline:auto;
  padding-inline:clamp(16px,4vw,32px);
}

.section{
  position:relative;
  padding-block:clamp(48px,7vw,104px);
}

.section-dark{
  background-color:var(--c-deep);
  background-image:
    radial-gradient(120% 90% at 82% 0%,rgba(10,132,255,.22),transparent 60%),
    radial-gradient(90% 70% at 0% 100%,rgba(0,229,208,.12),transparent 62%);
  color:var(--c-cloud);
}

.section-cloud{background-color:var(--c-cloud);color:var(--c-ink)}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4{color:var(--c-cloud)}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--c-blue-deep);
}

.eyebrow::before{
  content:"";
  width:22px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--c-blue),var(--c-cyan));
}

.section-dark .eyebrow{color:var(--c-cyan)}

.section-head{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:760px;
  margin-bottom:clamp(28px,4vw,52px);
}

.section-title{
  font-size:clamp(1.62rem,3.2vw,2.5rem);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.16;
}

.section-desc{
  font-size:16.5px;
  line-height:1.85;
  color:var(--c-stone);
}

.section-dark .section-desc{color:rgba(244,246,249,.66)}

.lead{
  font-size:clamp(1.04rem,1.5vw,1.22rem);
  line-height:1.85;
  color:var(--c-stone);
}

.section-dark .lead{color:rgba(244,246,249,.74)}

.text-accent{color:var(--c-orange)}
.text-cyan{color:var(--c-cyan)}

/* ---------- 6. 栅格 ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,28px)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ---------- 7. 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 21px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.3;
  white-space:nowrap;
  transition:transform .22s var(--ease),background-color .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}

.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

.btn-primary{
  background:var(--c-blue);
  color:#fff;
  box-shadow:0 14px 26px -16px rgba(10,132,255,.95);
}
.btn-primary:hover{background:#2C97FF;box-shadow:0 18px 32px -16px rgba(10,132,255,1)}

.btn-accent{
  background:var(--c-orange);
  color:#1A0E05;
  box-shadow:0 14px 26px -16px rgba(255,107,26,.9);
}
.btn-accent:hover{background:#FF823F}

.btn-ghost{
  background:rgba(255,255,255,.06);
  color:var(--c-cloud);
  border-color:rgba(255,255,255,.22);
}
.btn-ghost:hover{border-color:var(--c-cyan);color:#fff;background:rgba(0,229,208,.1)}

.btn-outline{
  background:var(--c-card);
  color:var(--c-ink);
  border-color:rgba(14,17,22,.16);
}
.btn-outline:hover{border-color:var(--c-blue);color:var(--c-blue-deep)}

.btn-sm{padding:8px 16px;font-size:13.5px}
.btn-lg{padding:15px 30px;font-size:16px}

/* ---------- 8. 顶部阅读进度 ---------- */
.scroll-progress{
  position:fixed;
  top:0;left:0;right:0;
  height:3px;
  z-index:210;
  pointer-events:none;
  background:transparent;
}

.scroll-progress-bar{
  display:block;
  width:0%;
  height:100%;
  background:linear-gradient(90deg,var(--c-blue) 0%,var(--c-cyan) 58%,var(--c-orange) 100%);
  transition:width .1s linear;
}

/* ---------- 9. 页头 ---------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:200;
  padding:14px clamp(12px,3vw,32px) 0;
  pointer-events:none;
}

.header-capsule{
  position:relative;
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:clamp(8px,1.4vw,20px);
  width:100%;
  max-width:var(--w-wide);
  margin-inline:auto;
  padding:8px 10px 8px 14px;
  border-radius:var(--r-pill);
  background:var(--glass-dark);
  border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 20px 44px -30px rgba(0,0,0,.9);
  transition:box-shadow .3s var(--ease),border-color .3s var(--ease),background-color .3s var(--ease);
}

.header-capsule::after{
  content:"";
  position:absolute;
  left:24px;right:24px;bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,229,208,.4),rgba(255,107,26,.32),transparent);
  opacity:.75;
  pointer-events:none;
}

.site-header[data-stuck="true"] .header-capsule{
  background:rgba(16,20,28,.86);
  border-color:rgba(255,255,255,.2);
  box-shadow:0 26px 54px -30px rgba(0,0,0,.95);
}

/* 品牌 */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  padding:2px;
}

.brand-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  flex:none;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,var(--c-blue),var(--c-cyan));
  box-shadow:0 8px 18px -10px rgba(10,132,255,.9);
}

.brand-mark svg{width:22px;height:22px}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.12;
}

.brand-name{
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--c-cloud);
}

.brand-tagline{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  color:rgba(244,246,249,.6);
}

/* 主导航 */
.primary-nav{
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;
  -ms-overflow-style:none;
  pointer-events:auto;
}

.primary-nav::-webkit-scrollbar{display:none}

.nav-list{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
}

.nav-item{flex:0 0 auto}

.nav-link{
  position:relative;
  display:block;
  padding:9px 14px;
  border-radius:var(--r-pill);
  font-size:15px;
  font-weight:500;
  line-height:1.4;
  white-space:nowrap;
  color:rgba(244,246,249,.74);
  transition:color .22s var(--ease),background-color .22s var(--ease);
}

.nav-link:hover{color:#fff;background:rgba(255,255,255,.09)}

.nav-link[aria-current="page"]{
  color:#fff;
  background:rgba(10,132,255,.24);
  box-shadow:inset 0 0 0 1px rgba(10,132,255,.4);
}

.nav-link[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:12px;height:2px;
  border-radius:2px;
  transform:translateX(-50%);
  background:var(--c-cyan);
}

/* 工具区 */
.header-tools{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.tool-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px;
  border-radius:var(--r-pill);
  border:1px solid var(--glass-line-soft);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.03em;
  white-space:nowrap;
  color:rgba(244,246,249,.7);
}

.tool-chip::before{
  content:"";
  width:6px;height:6px;
  flex:none;
  border-radius:50%;
  background:var(--c-cyan);
  box-shadow:0 0 0 3px rgba(0,229,208,.16);
}

.tool-chip + .tool-chip::before{
  background:var(--c-orange);
  box-shadow:0 0 0 3px rgba(255,107,26,.18);
}

/* 移动菜单按钮 */
.nav-toggle{
  display:none;
  align-items:center;
  gap:9px;
  margin-left:auto;
  padding:9px 15px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--c-cloud);
  font-size:13.5px;
  font-weight:600;
  transition:background-color .22s var(--ease),border-color .22s var(--ease);
}

.nav-toggle:hover{background:rgba(255,255,255,.14)}

.nav-toggle-bars{
  position:relative;
  display:block;
  width:16px;height:2px;
  border-radius:2px;
  background:currentColor;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:16px;height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .24s var(--ease);
}

.nav-toggle-bars::before{top:-5px}
.nav-toggle-bars::after{top:5px}

.site-header[data-open="true"] .nav-toggle-bars{background:transparent}
.site-header[data-open="true"] .nav-toggle-bars::before{transform:translateY(5px) rotate(45deg)}
.site-header[data-open="true"] .nav-toggle-bars::after{transform:translateY(-5px) rotate(-45deg)}

/* ---------- 10. 页脚 ---------- */
.site-footer{
  position:relative;
  background-color:var(--c-deep);
  background-image:
    radial-gradient(100% 80% at 88% 0%,rgba(10,132,255,.16),transparent 62%),
    radial-gradient(80% 70% at 4% 100%,rgba(0,229,208,.1),transparent 60%);
  color:var(--c-cloud);
  padding:clamp(48px,7vw,88px) 0 30px;
  overflow:hidden;
}

.site-footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,
    var(--c-blue) 0%,var(--c-blue) 26%,
    var(--c-cyan) 26%,var(--c-cyan) 34%,
    var(--c-orange) 34%,var(--c-orange) 44%,
    rgba(255,255,255,.14) 44%,rgba(255,255,255,.14) 100%);
}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(250px,1.5fr) repeat(3,minmax(110px,1fr));
  gap:clamp(26px,4vw,56px);
}

.footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}

.footer-brand-name{
  font-size:clamp(1.35rem,2.2vw,1.7rem);
  font-weight:800;
  letter-spacing:-.02em;
}

.footer-tagline{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.2em;
  color:var(--c-cyan);
}

.footer-note{
  max-width:34ch;
  font-size:14.5px;
  line-height:1.8;
  color:rgba(244,246,249,.62);
}

.footer-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  padding:9px 18px;
  border-radius:var(--r-pill);
  border:1px solid rgba(0,229,208,.42);
  background:rgba(0,229,208,.08);
  color:var(--c-cyan);
  font-size:14px;
  font-weight:600;
  transition:background-color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);
}

.footer-cta::after{content:"→";font-family:var(--font-mono);transition:transform .22s var(--ease)}
.footer-cta:hover{background:rgba(0,229,208,.16);border-color:var(--c-cyan);transform:translateY(-2px)}
.footer-cta:hover::after{transform:translateX(3px)}

.footer-col{display:block}

.footer-col-title{
  margin-bottom:16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(244,246,249,.5);
}

.footer-list li + li{margin-top:11px}

.footer-link{
  display:inline-block;
  font-size:15px;
  color:rgba(244,246,249,.74);
  transition:color .2s var(--ease),transform .2s var(--ease);
}

.footer-link:hover{color:var(--c-cyan);transform:translateX(3px)}

.footer-contact{
  margin-top:clamp(36px,5vw,64px);
  padding-top:clamp(22px,3vw,32px);
  border-top:1px solid var(--c-line);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer-contact-line{
  font-family:var(--font-mono);
  font-size:15px;
  letter-spacing:.02em;
  color:var(--c-cloud);
}

.footer-address-line{
  font-size:14.5px;
  color:rgba(244,246,249,.66);
}

.footer-service-line{
  max-width:70ch;
  font-size:13.5px;
  line-height:1.75;
  color:rgba(244,246,249,.5);
}

.footer-legal{
  margin-top:clamp(26px,4vw,44px);
  padding-top:22px;
  border-top:1px solid var(--c-line);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 26px;
}

.footer-copyright{
  font-size:13px;
  color:rgba(244,246,249,.52);
}

.footer-legal-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
}

.footer-legal-links .footer-link{font-size:13px;color:rgba(244,246,249,.58)}
.footer-legal-links .footer-link:hover{color:var(--c-cyan)}

.footer-icp{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.03em;
  color:rgba(244,246,249,.48);
}

/* ---------- 11. 卡片 ---------- */
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(18px,2.2vw,26px);
  border-radius:var(--r-md);
  background:var(--c-card);
  border:1px solid rgba(14,17,22,.09);
  box-shadow:var(--sh-card);
  transition:transform .24s var(--ease),border-color .24s var(--ease),box-shadow .24s var(--ease);
}

.card:hover{
  transform:translateY(-4px);
  border-color:rgba(10,132,255,.5);
  box-shadow:0 26px 46px -28px rgba(10,132,255,.5);
}

.card-dark{
  background:#232833;
  border-color:var(--c-line);
  color:var(--c-cloud);
  box-shadow:0 22px 44px -32px rgba(0,0,0,.9);
}

.card-dark:hover{
  border-color:rgba(0,229,208,.55);
  box-shadow:0 28px 52px -30px rgba(0,229,208,.4);
}

.card-dark .card-text,
.card-dark .section-desc{color:rgba(244,246,249,.7)}

.card-title{
  font-size:1.14rem;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.35;
}

.card-text{
  font-size:15.5px;
  line-height:1.8;
  color:var(--c-stone);
}

/* ---------- 12. 数据与标签 ---------- */
.data-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:clamp(18px,3vw,46px);
}

.data-item{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.data-value{
  font-family:var(--font-mono);
  font-size:clamp(1.5rem,3vw,2.25rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--c-orange);
}

.data-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-stone);
}

.section-dark .data-label{color:rgba(244,246,249,.5)}

.batch-code{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px;
  border-radius:var(--r-pill);
  border:1px dashed rgba(10,132,255,.42);
  background:rgba(10,132,255,.1);
  color:var(--c-blue-deep);
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:500;
  letter-spacing:.04em;
  line-height:1.5;
  cursor:copy;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}

.batch-code:hover{background:rgba(10,132,255,.2);border-color:rgba(10,132,255,.75)}

.section-dark .batch-code,
.card-dark .batch-code{
  background:rgba(0,229,208,.08);
  border-color:rgba(0,229,208,.42);
  color:var(--c-cyan);
}

.section-dark .batch-code:hover,
.card-dark .batch-code:hover{background:rgba(0,229,208,.16)}

.batch-code[data-copied="true"]{
  background:rgba(0,229,208,.2);
  border-style:solid;
  border-color:var(--c-cyan);
  color:#0A6E66;
}

.section-dark .batch-code[data-copied="true"],
.card-dark .batch-code[data-copied="true"]{color:var(--c-cyan)}

.batch-code[data-copied="true"]::after{
  content:"已复制";
  font-size:11px;
  letter-spacing:.06em;
  opacity:.85;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:var(--r-pill);
  border:1px solid rgba(10,132,255,.24);
  background:rgba(10,132,255,.1);
  color:var(--c-blue-deep);
  font-size:12.5px;
  font-weight:500;
  line-height:1.6;
  white-space:nowrap;
}

.tag-accent{
  border-color:rgba(255,107,26,.3);
  background:rgba(255,107,26,.12);
  color:var(--c-orange-deep);
}

.section-dark .tag,
.card-dark .tag{
  border-color:rgba(0,229,208,.32);
  background:rgba(0,229,208,.1);
  color:var(--c-cyan);
}

.status-dot{
  display:inline-block;
  width:8px;height:8px;
  flex:none;
  border-radius:50%;
  background:var(--c-cyan);
  box-shadow:0 0 0 4px rgba(0,229,208,.18);
  vertical-align:middle;
}

.status-dot-orange{
  background:var(--c-orange);
  box-shadow:0 0 0 4px rgba(255,107,26,.2);
}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:15px;
  font-weight:600;
  color:var(--c-blue-deep);
  transition:gap .2s var(--ease),color .2s var(--ease);
}

.link-arrow::after{content:"→";font-family:var(--font-mono)}
.link-arrow:hover{gap:11px;color:var(--c-blue)}

.section-dark .link-arrow,
.card-dark .link-arrow{color:var(--c-cyan)}

/* ---------- 13. 媒体容器 ---------- */
.media{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border-radius:var(--r-md);
  aspect-ratio:16 / 9;
  background-color:var(--c-deep);
  background-image:
    linear-gradient(135deg,rgba(10,132,255,.88),rgba(0,229,208,.42)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 1px,transparent 1px 34px);
  isolation:isolate;
}

.media > img,
.media > picture,
.media > picture > img,
.media > svg,
.media > video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.media-4x3{aspect-ratio:4 / 3}
.media-1x1{aspect-ratio:1 / 1}
.media-21x9{aspect-ratio:21 / 9}
.media-3x4{aspect-ratio:3 / 4}

.media-corner::after{
  content:"";
  position:absolute;
  left:0;top:0;
  width:min(64px,32%);
  height:5px;
  background:linear-gradient(90deg,var(--c-cyan),rgba(0,229,208,0));
  pointer-events:none;
}

.media-caption{
  margin-top:10px;
  font-size:13.5px;
  line-height:1.65;
  color:var(--c-stone);
}

.section-dark .media-caption{color:rgba(244,246,249,.6)}

/* ---------- 14. 流程线 ---------- */
.timeline{
  position:relative;
  padding-left:30px;
}

.timeline::before{
  content:"";
  position:absolute;
  left:7px;
  top:8px;
  bottom:8px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--c-blue),var(--c-cyan) 62%,rgba(0,229,208,0));
}

.timeline-item{
  position:relative;
  padding-bottom:28px;
}

.timeline-item:last-child{padding-bottom:0}

.timeline-item::before{
  content:"";
  position:absolute;
  left:-30px;
  top:7px;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--c-cloud);
  border:3px solid var(--c-blue);
}

.section-dark .timeline-item::before{background:var(--c-deep)}

.timeline-title{
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.4;
  margin-bottom:4px;
}

.timeline-meta{
  display:block;
  margin-bottom:6px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--c-orange);
}

/* ---------- 15. 横向滚动条带 ---------- */
.rail{position:relative}

.rail-track{
  display:flex;
  gap:clamp(14px,2vw,24px);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding:6px 6px 20px;
  margin-inline:-6px;
  scrollbar-width:thin;
  scrollbar-color:var(--c-blue) rgba(14,17,22,.1);
}

.rail-track::-webkit-scrollbar{height:6px}
.rail-track::-webkit-scrollbar-track{background:rgba(14,17,22,.1);border-radius:99px}
.rail-track::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--c-blue),var(--c-cyan));border-radius:99px}

.section-dark .rail-track{scrollbar-color:var(--c-cyan) rgba(255,255,255,.12)}
.section-dark .rail-track::-webkit-scrollbar-track{background:rgba(255,255,255,.12)}

.rail-item{
  flex:0 0 clamp(230px,30vw,330px);
  scroll-snap-align:start;
}

/* ---------- 16. 面包屑 ---------- */
.breadcrumbs{
  padding-top:calc(var(--header-h) + 26px);
}

.breadcrumb-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--c-stone);
}

.breadcrumb-link{color:var(--c-stone);transition:color .2s var(--ease)}
.breadcrumb-link:hover{color:var(--c-blue)}

.breadcrumb-sep{opacity:.5}

.breadcrumb-current{color:var(--c-ink);font-weight:500}

.section-dark .breadcrumb-list{color:rgba(244,246,249,.6)}
.section-dark .breadcrumb-link{color:rgba(244,246,249,.6)}
.section-dark .breadcrumb-current{color:var(--c-cloud)}

/* ---------- 17. 滚动渐显 ---------- */
.js [data-reveal]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}

.js [data-reveal].is-revealed{
  opacity:1;
  transform:translateY(0);
}

/* ---------- 18. 响应式 ---------- */
@media (max-width:1180px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1100px){
  .header-tools{display:none}
  .nav-link{padding:9px 12px;font-size:14.5px}
}

@media (max-width:960px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1 / -1}
  .footer-note{max-width:52ch}
}

@media (max-width:900px){
  :root{--header-h:64px}

  .site-header{padding-top:10px}

  .header-capsule{
    padding:7px 8px 7px 12px;
    border-radius:26px;
  }

  .header-capsule::after{left:18px;right:18px}

  .brand-mark{width:32px;height:32px;border-radius:10px}
  .brand-mark svg{width:20px;height:20px}
  .brand-name{font-size:15px}
  .brand-tagline{display:none}

  .nav-toggle{display:inline-flex;padding:8px 13px}

  .primary-nav{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 10px);
    z-index:5;
    display:none;
    flex:0 0 auto;
    overflow:visible;
    padding:10px;
    border-radius:var(--r-lg);
    background:rgba(16,20,28,.94);
    border:1px solid var(--glass-line);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    backdrop-filter:blur(20px) saturate(150%);
    box-shadow:0 30px 60px -34px rgba(0,0,0,.95);
  }

  .site-header[data-open="true"] .primary-nav{display:block}

  .nav-list{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:4px;
    max-height:min(66vh,460px);
    overflow-y:auto;
    scrollbar-width:none;
  }

  .nav-list::-webkit-scrollbar{display:none}

  .nav-item{flex:1 1 auto}

  .nav-link{
    padding:13px 16px;
    border-radius:14px;
    font-size:16px;
    color:rgba(244,246,249,.86);
  }

  .nav-link[aria-current="page"]{background:rgba(10,132,255,.28)}
  .nav-link[aria-current="page"]::after{left:auto;right:16px;transform:none;bottom:50%;margin-bottom:-1px}

  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:620px){
  body{font-size:16px;line-height:1.78}

  .grid-2,
  .grid-3,
  .grid-4{grid-template-columns:minmax(0,1fr)}

  .footer-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .footer-legal{flex-direction:column;align-items:flex-start}
  .footer-legal-links{gap:6px 18px}

  .rail-item{flex:0 0 min(78vw,290px)}
  .data-row{gap:18px 28px}
}

/* ---------- 19. 动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }

  .js [data-reveal]{
    opacity:1;
    transform:none;
  }

  .btn:hover,
  .card:hover,
  .footer-cta:hover,
  .footer-link:hover{transform:none}
}