/* ============================================================
   CDNGOD — base.css
   设计令牌 / 重置 / 排版 / 导航 / 按钮 / 页脚 / 通用动效
   ============================================================ */

:root{
  /* —— 中性色：纸与石墨 —— */
  --paper:      #fbfbfd;
  --paper-2:    #f4f4f6;
  --paper-3:    #ececef;
  --ink:        #1a1a1c;
  --ink-2:      #35353a;
  --muted:      #6c6c72;
  --muted-2:    #8e8e96;
  --line:       rgba(0,0,0,.085);
  --line-2:     rgba(0,0,0,.14);

  /* —— 暗场 —— */
  --dark:       #08090b;
  --dark-2:     #0e1014;
  --dark-3:     #15181d;
  --on-dark:    #f2f3f5;
  --on-dark-2:  #9ea3ac;
  --line-d:     rgba(255,255,255,.10);
  --line-d2:    rgba(255,255,255,.18);

  /* —— 强调：深信号蓝（非霓虹、非紫）—— */
  --accent:     #0b64d8;
  --accent-2:   #3d8ef5;
  --accent-3:   #8fbdf8;
  --accent-ink: #084a9e;

  /* —— 语义（低饱和，克制）—— */
  --ok:    #1f8a55;
  --ok-2:  #35b071;
  --warn:  #b8801e;
  --warn-2:#dba33c;
  --bad:   #b03f2f;
  --bad-2: #d4614d;

  /* —— 版式 —— */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono",
          "Roboto Mono", Menlo, Consolas, monospace;

  /* —— 节奏 —— */
  --pad: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --r-xl: 34px;

  /* —— 缓动：苹果式的“先快后极慢” —— */
  --ease: cubic-bezier(.22,1,.28,1);
  --ease-2: cubic-bezier(.4,0,.2,1);

  --shadow-s: 0 1px 2px rgba(0,0,0,.04), 0 4px 14px rgba(16,18,24,.05);
  --shadow-m: 0 2px 6px rgba(0,0,0,.04), 0 14px 40px rgba(16,18,24,.09);
  --shadow-l: 0 4px 12px rgba(0,0,0,.05), 0 30px 80px rgba(16,18,24,.14);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.55;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* overflow-x:hidden 会把 body 变成滚动容器，从而让内部的 position:sticky 完全失效
     （工作原理一节的管道图就是这样掉下来的）。clip 只裁切、不创建滚动容器。 */
  overflow-x:hidden;   /* 老浏览器兜底 */
  overflow-x:clip;
}
body.is-locked{ overflow:hidden; }

img,svg,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
/* 负字距对拉丁文收紧漂亮，对汉字则是挤压——中文站点取一个很轻的值 */
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.012em; line-height:1.12; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
code{ font-family:var(--mono); font-size:.88em; background:rgba(11,100,216,.07);
      color:var(--accent-ink); padding:.12em .38em; border-radius:5px; }
::selection{ background:rgba(11,100,216,.16); }

:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

/* ============ 纸张颗粒（质感的关键一层） ============ */
.grain{
  position:fixed; inset:-50%; z-index:120; pointer-events:none;
  opacity:.028; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ 容器与章节 ============ */
.container{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--pad);
}
.section{
  position:relative;
  padding-block:clamp(80px, 11vw, 168px);
}
.section--tint{ background:var(--paper-2); }
.section--dark{
  background:var(--dark);
  color:var(--on-dark);
  --line:var(--line-d);
  --muted:var(--on-dark-2);
}
.section--dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 62% at 50% -12%, rgba(61,142,245,.13), transparent 62%),
    radial-gradient(80% 50% at 92% 108%, rgba(11,100,216,.10), transparent 70%);
}
.section--dark > .container{ position:relative; z-index:1; }

/* 深浅衔接处的一道极细高光，避免硬切 */
.section--dark + .section::after,
.section--dark::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14) 22%, rgba(255,255,255,.14) 78%, transparent);
}
.section--dark + .section::after{ background:linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent); }

/* ============ 章节头 ============ */
.eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:.17em; text-transform:uppercase;
  color:var(--accent); margin-bottom:22px;
  font-feature-settings:"tnum";
}
.eyebrow--dark{ color:var(--accent-3); }

.sec-head{ max-width:760px; margin-bottom:clamp(44px, 6vw, 78px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-title{
  font-size:clamp(31px, 4.6vw, 60px);
  letter-spacing:-.03em;
  line-height:1.06;
  /* 中文标题窄屏折行极易留下「调。」这样的孤字尾行，balance 会把各行拉平 */
  text-wrap:balance;
}
.lead{
  margin-top:24px; max-width:60ch;
  font-size:clamp(16.5px, 1.35vw, 19.5px);
  line-height:1.62; color:var(--muted);
  text-wrap:pretty;          /* 正文只避免过短的末行，不改变整体齐落 */
}
.lead--center{ margin-inline:auto; }
.lead b{ color:var(--ink); font-weight:600; }
.section--dark .lead b{ color:var(--on-dark); }

/* ============ 按钮 ============ */
.btn{
  --bh:40px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--bh); padding:0 20px; border:0; border-radius:calc(var(--bh)/2);
  font-size:14.5px; font-weight:500; letter-spacing:.005em;
  cursor:pointer; white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease),
             transform .35s var(--ease), box-shadow .35s var(--ease),
             border-color .35s var(--ease);
}
.btn--lg{ --bh:52px; padding:0 30px; font-size:16.5px; }
.btn--full{ width:100%; }

.btn--solid{
  background:var(--accent); color:#fff;
  box-shadow:0 1px 2px rgba(8,74,158,.24), 0 8px 22px rgba(11,100,216,.22);
}
.btn--solid:hover{ background:#0a58bf; transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(8,74,158,.26), 0 14px 34px rgba(11,100,216,.3); }
.btn--solid:active{ transform:translateY(0) scale(.985); }

.btn--line{
  background:transparent; color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn--line:hover{ background:rgba(0,0,0,.035); box-shadow:inset 0 0 0 1px var(--line-2); }
.section--dark .btn--line{ color:var(--on-dark); box-shadow:inset 0 0 0 1px var(--line-d2); }
.section--dark .btn--line:hover{ background:rgba(255,255,255,.07); }

.btn--quiet{ padding:0 12px; color:var(--muted); }
.btn--quiet:hover{ color:var(--ink); }

.btn__arrow{ transition:transform .4s var(--ease); }
.btn--line:hover .btn__arrow{ transform:translateX(4px); }

/* ============ 导航 ============ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:56px;
  transition:height .4s var(--ease), background .4s var(--ease-2),
             box-shadow .4s var(--ease-2), backdrop-filter .4s var(--ease-2);
}
.nav::before{
  content:""; position:absolute; inset:0;
  background:rgba(251,251,253,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  opacity:0; transition:opacity .4s var(--ease-2);
  border-bottom:1px solid var(--line);
}
.nav.is-stuck::before{ opacity:1; }
.nav.is-dark{ color:var(--on-dark); }
.nav.is-dark::before{ background:rgba(8,9,11,.66); border-bottom-color:var(--line-d); }

.nav__inner{
  position:relative; height:100%;
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad);
  display:flex; align-items:center; gap:clamp(14px,3vw,40px);
}
.brand{ display:inline-flex; align-items:center; gap:9px; flex:none; }
.brand__mark{ width:23px; height:23px; color:var(--accent); }
.nav.is-dark .brand__mark{ color:var(--accent-3); }
.brand__text{ font-size:17.5px; font-weight:600; letter-spacing:-.015em; }
.brand__text i{
  font-style:normal; font-weight:500; font-size:12.5px;
  letter-spacing:.12em; margin-left:6px; opacity:.55;
  font-family:var(--mono); text-transform:uppercase;
  vertical-align:1px;
}

.nav__links{ display:flex; gap:clamp(10px,2vw,28px); margin-inline:auto; }
.nav__links a{
  position:relative; font-size:14px; color:var(--muted);
  padding:6px 2px; transition:color .3s var(--ease);
}
.nav.is-dark .nav__links a{ color:var(--on-dark-2); }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease); opacity:.5;
}
.nav__links a:hover{ color:var(--ink); }
.nav.is-dark .nav__links a:hover{ color:var(--on-dark); }
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--ink); }
.nav.is-dark .nav__links a.is-active{ color:var(--on-dark); }

.nav__actions{ display:flex; align-items:center; gap:8px; flex:none; }
.nav.is-dark .btn--quiet{ color:var(--on-dark-2); }
.nav.is-dark .btn--quiet:hover{ color:var(--on-dark); }

.burger{
  display:none; width:34px; height:34px; background:none; border:0; cursor:pointer;
  position:relative; flex:none; margin-left:auto;
}
.burger span{
  position:absolute; left:8px; width:18px; height:1.5px; background:currentColor;
  border-radius:2px; transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.burger span:nth-child(1){ top:14px; }
.burger span:nth-child(2){ top:19px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(2.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-2.5px) rotate(-45deg); }

.nav__sheet{
  position:absolute; top:100%; left:0; right:0;
  background:rgba(251,251,253,.94);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  border-bottom:1px solid var(--line);
  padding:8px var(--pad) 26px;
  display:flex; flex-direction:column;
}
.nav.is-dark .nav__sheet{ background:rgba(10,11,14,.95); border-bottom-color:var(--line-d); }
.nav__sheet[hidden]{ display:none; }
.nav__sheet a{
  padding:15px 2px; font-size:20px; font-weight:500; letter-spacing:-.015em;
  border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(8px);
  animation:sheetIn .5s var(--ease) forwards;
}
.nav__sheet a:nth-child(1){ animation-delay:.02s }
.nav__sheet a:nth-child(2){ animation-delay:.06s }
.nav__sheet a:nth-child(3){ animation-delay:.1s }
.nav__sheet a:nth-child(4){ animation-delay:.14s }
.nav__sheet a:nth-child(5){ animation-delay:.18s }
.nav__sheet a:nth-child(6){ animation-delay:.22s }
.nav__sheet a:nth-child(7){ animation-delay:.26s }
.nav__sheet-cta{ color:var(--accent); border-bottom:0 !important; }
@keyframes sheetIn{ to{ opacity:1; transform:none; } }

@media (max-width:1000px){
  .nav__links{ display:none; }
  .nav__actions{ display:none; }
  .burger{ display:block; }
}

/* ============ 通用：数字 / 徽标 ============ */
.num, .v, .mono{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  letter-spacing:-.01em;
}

/* ============ 进场动效 ============ */
.reveal{
  opacity:0;
  transform:translateY(26px);
  filter:blur(6px);
  transition:opacity .95s var(--ease), transform 1.05s var(--ease), filter .95s var(--ease);
  transition-delay:calc(var(--d, 0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; filter:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; filter:none; transition:none; }
}

/* ============ 页脚 ============ */
.foot{
  background:var(--paper-2);
  border-top:1px solid var(--line);
  padding-top:clamp(50px,6vw,78px);
  font-size:14px;
}
.foot__grid{
  display:grid; gap:clamp(28px,4vw,44px);
  grid-template-columns:1.5fr repeat(4, 1fr);
  padding-bottom:clamp(40px,5vw,60px);
}
.brand--foot .brand__mark{ width:26px; height:26px; color:var(--ink); }
.brand--foot .brand__text{ font-size:19px; }
.foot__status{
  margin-top:20px; color:var(--muted); font-size:13px;
  display:flex; align-items:center; gap:8px;
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--ok-2); flex:none;
  box-shadow:0 0 0 0 rgba(53,176,113,.55);
  animation:pulseDot 2.6s var(--ease-2) infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(53,176,113,.5) }
  70%{ box-shadow:0 0 0 8px rgba(53,176,113,0) }
  100%{ box-shadow:0 0 0 0 rgba(53,176,113,0) }
}
.foot__col h4{
  font-size:13px; font-weight:600; letter-spacing:.02em;
  margin-bottom:14px;
}
.foot__col{ display:flex; flex-direction:column; gap:11px; }
.foot__col a{ color:var(--muted); font-size:13.5px; width:fit-content;
  transition:color .3s var(--ease); }
.foot__col a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }

.foot__bar{
  display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between;
  align-items:center;
  padding-block:22px; margin-top:0;
  border-top:1px solid var(--line);
  color:var(--muted-2); font-size:12.5px;
}
.foot__legal{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; }
.foot__legal a:hover{ color:var(--ink); }
.foot__legal span{ font-family:var(--mono); font-size:11.5px; opacity:.8; }

/* 备案号：等宽、可点击、与法务链接同一行末尾 */
.beian{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; letter-spacing:.01em; white-space:nowrap;
  color:var(--muted-2);
  transition:color .3s var(--ease);
}
.beian:hover{ color:var(--ink); }
.beian__mark{ width:13px; height:13px; flex:none; opacity:.75; }
.beian--gov:hover .beian__mark{ opacity:1; color:var(--accent); }

@media (max-width:900px){
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .foot__brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  body{ font-size:16px; }
  .foot__grid{ grid-template-columns:1fr; gap:26px; }
}