@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --deep:#0E2A2F;
  --deeper:#0A1F23;
  --lift:#14383E;
  --amber:#E8A33D;
  --ink:#F4F1EA;
  --line:rgba(244,241,234,.16);
  --line-soft:rgba(244,241,234,.09);
  --glass:rgba(244,241,234,.07);
  --mute:rgba(244,241,234,.72);
  --shadow:0 20px 44px rgba(0,0,0,.32);
}

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

html{
  background:var(--deep);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.78;
  font-weight:400;
  letter-spacing:.005em;
  overflow-x:hidden;
  min-height:100%;
}

img{max-width:100%;height:auto;display:block}

a{color:inherit}

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

/* 背景视差层 */
.atmos{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.atmos span{
  position:absolute;
  display:block;
  will-change:transform;
}
.a1{
  inset:-25%;
  background:
    radial-gradient(58% 42% at 18% 10%,rgba(232,163,61,.20),transparent 62%),
    radial-gradient(48% 38% at 88% 6%,rgba(244,241,234,.10),transparent 66%);
}
.a2{
  inset:-20%;
  background-image:radial-gradient(rgba(244,241,234,.26) 1px,transparent 1px);
  background-size:28px 28px;
  opacity:.34;
  -webkit-mask-image:linear-gradient(#000 0%,rgba(0,0,0,.35) 58%,transparent 92%);
  mask-image:linear-gradient(#000 0%,rgba(0,0,0,.35) 58%,transparent 92%);
}
.a3{
  inset:-30%;
  background:radial-gradient(46% 34% at 72% 88%,rgba(232,163,61,.14),transparent 72%);
}

/* 顶部两行导航 */
.navbar{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(10,31,35,.86);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  backdrop-filter:blur(16px) saturate(130%);
  border-bottom:1px solid var(--line);
}

.brandrow{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  max-width:1180px;
  margin:0 auto;
  padding:10px clamp(14px,4vw,40px) 0;
}

.brand{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:20px;
  font-weight:700;
  letter-spacing:.03em;
  text-decoration:none;
  color:var(--ink);
  padding-right:6px;
}
.brand:hover{color:var(--amber)}

.strip{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:rgba(244,241,234,.62);
  border-left:2px solid var(--amber);
  padding-left:10px;
}

.menu{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(14px,4vw,40px);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}
.menu ul{
  display:flex;
  align-items:center;
  gap:4px;
  margin:0;
  padding:4px 0 8px;
  list-style:none;
  min-height:44px;
}
.menu a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 12px;
  border-radius:10px;
  font-size:16px;
  white-space:nowrap;
  text-decoration:none;
  color:rgba(244,241,234,.84);
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.menu a:hover,
.menu a:focus-visible{
  background:rgba(232,163,61,.18);
  color:var(--ink);
  transform:translateY(-1px);
}

/* 主体栅格 */
.shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) 268px;
  gap:clamp(22px,3.4vw,52px);
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(14px,4vw,40px) clamp(48px,7vw,90px);
  align-items:start;
}

.stage{min-width:0}

.stage > section{
  position:relative;
  scroll-margin-top:132px;
  margin:0 0 clamp(24px,3.6vw,44px);
  padding:clamp(20px,3.2vw,38px);
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(158deg,rgba(244,241,234,.10),rgba(244,241,234,.032));
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  box-shadow:var(--shadow);
}

/* 首屏 */
.stage > section.hero{
  min-height:70vh;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:16px;
  text-align:center;
  padding:clamp(54px,9vh,104px) clamp(6px,2vw,22px);
  border:0;
  border-radius:0;
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  overflow:hidden;
  isolation:isolate;
  scroll-margin-top:118px;
}

.hero-art{
  position:absolute;
  inset:-14% -12% 0;
  margin:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.hl{
  position:absolute;
  display:block;
  border-radius:50%;
  will-change:transform;
}
.hl1{
  width:min(430px,62vw);
  height:min(430px,62vw);
  left:-8%;
  top:4%;
  background:radial-gradient(circle,rgba(232,163,61,.30),transparent 68%);
  filter:blur(4px);
}
.hl2{
  width:min(330px,48vw);
  height:min(330px,48vw);
  right:-5%;
  bottom:0;
  background:radial-gradient(circle,rgba(244,241,234,.18),transparent 70%);
}
.hero-img{
  position:absolute;
  right:clamp(0px,5vw,74px);
  top:2%;
  width:clamp(84px,12vw,146px);
  height:auto;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--lift);
  box-shadow:var(--shadow);
}

.stage > section.hero h1{
  margin:0;
  max-width:24ch;
  font-size:clamp(30px,5.4vw,56px);
  line-height:1.14;
  font-weight:600;
  letter-spacing:-.015em;
  text-wrap:balance;
  color:var(--ink);
}

.stage > section.hero .lead{
  margin:0;
  max-width:54ch;
  font-size:clamp(16px,1.5vw,18px);
  line-height:1.7;
  color:var(--mute);
}

/* 正文排印 */
.stage > section small{
  display:block;
  margin:0 0 8px;
  font-size:14px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--amber);
}
.stage > section h2{
  margin:0 0 14px;
  font-size:clamp(22px,3vw,32px);
  line-height:1.28;
  font-weight:600;
  letter-spacing:-.01em;
}
.stage > section h3{
  margin:26px 0 10px;
  font-size:clamp(18px,2.1vw,22px);
  line-height:1.34;
  font-weight:600;
}
.stage > section h4{
  margin:20px 0 8px;
  font-size:17px;
  font-weight:600;
}
.stage > section p{
  margin:0 0 1em;
  max-width:70ch;
  color:rgba(244,241,234,.9);
}
.stage > section p:last-child{margin-bottom:0}
.stage > section ul,
.stage > section ol{
  margin:0 0 1.1em;
  padding-left:1.35em;
  max-width:70ch;
}
.stage > section li{margin:0 0 .45em}
.stage > section li::marker{color:var(--amber)}
.stage > section a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:rgba(232,163,61,.62);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.stage > section a:hover{color:var(--amber)}
.stage > section strong{color:#fff;font-weight:600}
.stage > section blockquote{
  margin:0 0 1.1em;
  padding:12px 18px;
  border-left:3px solid var(--amber);
  border-radius:0 10px 10px 0;
  background:rgba(232,163,61,.09);
  color:rgba(244,241,234,.92);
}
.stage > section blockquote p:last-child{margin:0}

.stage > section figure{
  margin:0 0 1.2em;
  border:1px solid var(--line-soft);
  border-radius:10px;
  overflow:hidden;
  background:rgba(10,31,35,.55);
}
.stage > section figure img{width:100%}
.stage > section figcaption{
  padding:10px 14px;
  font-size:15px;
  color:rgba(244,241,234,.6);
  border-top:1px solid var(--line-soft);
}
.stage > section aside{
  margin:0 0 1.2em;
  padding:14px 18px;
  border:1px dashed rgba(232,163,61,.4);
  border-radius:10px;
  background:rgba(232,163,61,.07);
  font-size:16px;
}
.stage > section table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 1.2em;
  font-size:16px;
}
.stage > section th,
.stage > section td{
  padding:9px 12px;
  border-bottom:1px solid var(--line-soft);
  text-align:left;
  vertical-align:top;
}
.stage > section th{color:var(--amber);font-weight:600}

/* 右侧目录 */
.rail{
  position:sticky;
  top:124px;
  padding:18px 16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:linear-gradient(160deg,rgba(244,241,234,.11),rgba(244,241,234,.04));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
}
.rail-kicker{
  display:block;
  font-size:14px;
  letter-spacing:.18em;
  color:var(--amber);
}
.rail-title{
  margin:6px 0 12px;
  font-size:20px;
  line-height:1.3;
  font-weight:600;
}
.rail-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}
.rail-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:2px 9px;
  border-radius:8px;
  font-size:16px;
  line-height:1.4;
  text-decoration:none;
  color:rgba(244,241,234,.78);
  transition:background .2s ease,color .2s ease,padding-left .2s ease;
}
.rail-list a:hover,
.rail-list a:focus-visible{
  background:rgba(232,163,61,.18);
  color:var(--ink);
  padding-left:13px;
}

/* 页脚 */
.colophon{
  border-top:1px solid var(--line);
  background:rgba(10,31,35,.92);
  padding:clamp(30px,5.4vw,60px) clamp(14px,4vw,40px) 26px;
}
.mega{
  max-width:1180px;
  margin:0 auto clamp(18px,3vw,32px);
  font-size:clamp(36px,8.6vw,92px);
  line-height:.94;
  font-weight:700;
  letter-spacing:-.02em;
  color:rgba(244,241,234,.10);
  -webkit-text-stroke:1px rgba(232,163,61,.45);
  overflow-wrap:anywhere;
}
.colophon-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  max-width:1180px;
  margin:0 auto;
  padding-top:16px;
  border-top:1px solid var(--line-soft);
}
.colophon-row address{
  font-style:normal;
  font-size:16px;
  color:rgba(244,241,234,.66);
}
.foot-links{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
}
.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 10px;
  border-radius:8px;
  font-size:16px;
  text-decoration:none;
  color:rgba(244,241,234,.78);
}
.foot-links a:hover,
.foot-links a:focus-visible{background:rgba(232,163,61,.18);color:var(--ink)}
.colophon-copy{
  max-width:1180px;
  margin:14px auto 0;
  text-align:center;
  font-size:15px;
  color:rgba(244,241,234,.5);
}

/* 滚动揭示 */
body.js .stage > section:not(.hero){
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.72,.2,1);
  will-change:opacity,transform;
}
body.js .stage > section.in{
  opacity:1;
  transform:none;
}

@media (max-width:980px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;top:auto;order:2;margin-top:8px}
  .rail-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .rail-list a{min-height:42px}
}

@media (max-width:760px){
  body{font-size:17px}
  .brandrow{padding-top:8px}
  .strip{font-size:15px}
  .stage > section.hero{min-height:64vh;padding-top:clamp(46px,8vh,80px)}
  .hero-img{
    position:absolute;
    right:10px;
    top:auto;
    bottom:10px;
    width:78px;
    opacity:.92;
  }
  .colophon-row{justify-content:flex-start}
  .mega{-webkit-text-stroke:1px rgba(232,163,61,.4)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.js .stage > section:not(.hero),
  body.js .stage > section.in{opacity:1;transform:none;transition:none}
  .atmos span,.hl{transform:none !important}
  .menu a,.rail-list a{transition:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}