:root{
  --bg:#0a0a0a;
  --bg2:#101010;
  --paper:#f4f3ef;
  --fg:#f2f2f0;
  --mute:#9a9a95;
  --dim:#7a7a74;
  --line:rgba(255,255,255,.16);
  --line-2:rgba(255,255,255,.07);
  --pad:clamp(20px,4.6vw,72px);
  --gap:clamp(28px,4.4vw,64px)
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--fg);
  font:400 16px/1.72 "PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}

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

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

ol,ul{list-style:none}

:focus-visible{outline:2px solid var(--fg);outline-offset:4px}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:80;background:var(--fg);color:var(--bg);padding:10px 18px;font-size:14px}

.prog{
  position:fixed;top:0;left:0;z-index:70;
  width:100%;height:2px;background:var(--fg);
  transform:scaleX(0);transform-origin:0 0
}

/* ---------- 页头 ---------- */
.hd{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.94);
  border-bottom:1px solid var(--line-2)
}

.hd-in{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);padding:16px var(--pad)}

.brand{display:flex;align-items:center;gap:11px;margin-right:auto}

.logo-slot{display:flex;align-items:center;justify-content:center;flex:none}

.logo-slot img{width:auto;height:auto;max-width:128px;max-height:26px;object-fit:contain}

.brand-name{font-size:19px;font-weight:700;letter-spacing:.03em}

.nav{display:flex;gap:clamp(14px,2.2vw,30px);font-size:14px;color:var(--mute)}

.nav a{padding:4px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover{color:var(--fg);border-bottom-color:var(--fg)}

.nav-cta{
  font-size:13px;letter-spacing:.08em;
  border:1px solid var(--line);padding:9px 18px;
  transition:background .2s,color .2s,border-color .2s
}

.nav-cta:not([hidden]){display:inline-flex;align-items:center}

.nav-cta:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* ---------- 通用区块头 ---------- */
.sec-h{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(12px,2.6vw,44px);
  align-items:end;
  border-top:1px solid var(--line);
  padding-top:clamp(14px,1.8vw,22px);
  margin-bottom:clamp(26px,3.6vw,48px)
}

.sec-n{
  grid-column:1/-1;
  font-size:11px;
  letter-spacing:.24em;
  color:var(--dim);
  margin-bottom:clamp(8px,1.4vw,16px)
}

.sec-h h2{
  font-size:clamp(1.75rem,3.6vw,3rem);
  line-height:1.14;
  letter-spacing:-.025em;
  font-weight:700
}

.sec-note{
  font-size:13.5px;
  line-height:1.8;
  color:var(--mute);
  max-width:30em;
  padding-bottom:6px
}

/* ---------- 首屏 ---------- */
.hero{padding:clamp(46px,7vw,96px) var(--pad) 0}

.hero-h1{font-weight:600}

.hero-mark{
  display:block;
  font-size:clamp(11px,1vw,13px);
  font-weight:400;
  letter-spacing:.26em;
  color:var(--mute);
  margin-bottom:clamp(18px,3vw,34px)
}

.hero-line{
  display:block;
  font-size:clamp(3.2rem,16.1vw,15rem);
  line-height:.88;
  letter-spacing:-.035em;
  font-weight:800;
  margin-left:-.03em
}

.hero-foot{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,4vw,64px);
  align-items:end;
  margin-top:clamp(26px,3.4vw,44px)
}

.hero-in>.lead{margin-top:clamp(22px,3vw,34px)}

.hero-in>.hero-act{margin-top:clamp(20px,2.6vw,28px)}

.lead{
  max-width:33em;
  font-size:clamp(15px,1.15vw,17px);
  color:var(--mute)
}

.hero-act{display:flex;flex-wrap:wrap;gap:12px}

.cta{
  font-size:15px;
  letter-spacing:.04em;
  padding:15px 30px;
  border:1px solid var(--line);
  transition:background .2s,color .2s,border-color .2s
}

.cta:not([hidden]){display:inline-flex;align-items:center;justify-content:center}

.cta:hover{background:rgba(255,255,255,.08)}

.cta.cta-primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cta.cta-primary:hover{background:var(--paper);color:#141414}

.hero-meta{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:clamp(34px,5vw,64px);
  border-top:1px solid var(--line)
}

.hero-meta>div{padding:16px 0 0}
.hero-meta>div+div{border-left:1px solid var(--line-2);padding-left:clamp(12px,2vw,24px)}

.hero-meta dt{font-size:11px;letter-spacing:.18em;color:var(--dim)}
.hero-meta dd{margin-top:6px;font-size:clamp(15px,1.3vw,18px);font-weight:600;letter-spacing:-.01em}

/* ---------- 全幅图 ---------- */
.plate{padding-top:clamp(46px,6.5vw,92px)}

.plate figure,.band figure{width:100%}

.plate-cap{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(10px,2vw,32px);
  margin:0 var(--pad);
  padding-top:14px;
  border-top:1px solid var(--line-2);
  font-size:12px;
  line-height:1.7;
  letter-spacing:.04em;
  color:var(--dim)
}

.plate-cap b{color:var(--fg);font-weight:600;letter-spacing:.14em;margin-right:8px}

/* ---------- 论点 ---------- */
.statement{padding:clamp(76px,11vw,168px) var(--pad)}

.stmt-in{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(24px,5vw,80px);
  align-items:end
}

.statement h2{
  font-size:clamp(1.85rem,4.5vw,3.8rem);
  line-height:1.16;
  letter-spacing:-.025em;
  font-weight:700
}

.stmt-body{display:grid;gap:16px;font-size:14.5px;line-height:1.85;color:var(--mute)}

.stmt-body p:first-child{border-top:1px solid var(--line);padding-top:18px}

/* ---------- 目录 ---------- */
.index{padding:0 var(--pad) clamp(64px,9vw,120px)}

.idx-list{border-top:1px solid var(--line)}

.idx-list a{
  display:grid;
  grid-template-columns:clamp(40px,5vw,64px) clamp(72px,11vw,170px) minmax(0,1fr) auto;
  gap:clamp(10px,2vw,26px);
  align-items:baseline;
  padding:clamp(18px,2.4vw,28px) 0;
  border-bottom:1px solid var(--line-2);
  transition:background .2s,padding .2s
}

.idx-list a:hover{background:rgba(255,255,255,.035);padding-left:12px}

.idx-list b{font-size:11px;font-weight:400;letter-spacing:.2em;color:var(--dim)}

.idx-k{font-size:clamp(1.15rem,1.9vw,1.6rem);font-weight:700;letter-spacing:-.01em}

.idx-d{
  display:flex;
  align-items:baseline;
  gap:14px;
  font-size:13.5px;
  color:var(--mute)
}

.idx-d::after{
  content:"";
  flex:1;
  border-bottom:1px dotted rgba(255,255,255,.26);
  transform:translateY(-4px)
}

.idx-go{font-size:11px;letter-spacing:.14em;color:var(--dim);white-space:nowrap}

/* ---------- 能力 ---------- */
.caps{padding:0 var(--pad) clamp(56px,8vw,104px)}

.cap-list{border-top:1px solid var(--line)}

.cap{
  display:grid;
  grid-template-columns:clamp(46px,6vw,86px) minmax(0,1fr) clamp(70px,10vw,150px);
  gap:0 clamp(14px,2.6vw,30px);
  padding:clamp(24px,3.4vw,40px) 0;
  border-bottom:1px solid var(--line-2);
  transition:background .2s
}

.cap:nth-child(even){padding-left:clamp(0px,4vw,72px)}
.cap:hover{background:rgba(255,255,255,.025)}

.cap-n{font-size:12px;letter-spacing:.2em;color:var(--dim);padding-top:10px;transition:color .2s}
.cap:hover .cap-n{color:var(--fg)}

.cap h3{font-size:clamp(1.35rem,2.4vw,2.1rem);letter-spacing:-.02em;font-weight:700}

.cap p{margin-top:8px;max-width:32em;font-size:14.5px;color:var(--mute)}

.cap-tag{
  padding-top:12px;
  text-align:right;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--dim)
}

/* ---------- 界面 ---------- */
.screens{padding:0 var(--pad) clamp(58px,8vw,108px)}

.scr-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:clamp(14px,2.4vw,40px)
}

.scr{flex:none}
.scr-a{width:32%}
.scr-b{width:23%;margin-top:clamp(30px,4.4vw,66px)}
.scr-c{width:27%;margin-top:clamp(10px,1.6vw,26px)}

.scr img{width:100%;height:auto;border:1px solid var(--line-2);transition:border-color .2s}
.scr:hover img{border-color:var(--line)}

.scr p{
  display:flex;
  gap:9px;
  margin-top:12px;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--dim)
}

.scr p b{color:var(--fg);font-weight:600}

.scr-legend{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,2.4vw,36px);
  margin-top:clamp(34px,4.6vw,62px);
  border-top:1px solid var(--line);
  padding-top:18px;
  font-size:13px;
  line-height:1.75;
  color:var(--mute)
}

.scr-legend b{
  display:block;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--dim);
  margin-bottom:6px
}

/* ---------- 题材 ---------- */
.genre{padding:0 var(--pad) clamp(58px,8.2vw,110px)}

.genre-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.genre-list li{
  border-bottom:1px solid var(--line-2);
  border-left:1px solid var(--line-2);
  padding:clamp(18px,2.4vw,30px) clamp(14px,1.6vw,22px) clamp(20px,2.6vw,32px);
  transition:background .2s
}

.genre-list li:nth-child(3n+1){border-left:0}
.genre-list li:nth-child(n+7){border-bottom:0}

.genre-list li:hover{background:#141414}

.genre-list b{
  display:block;
  font-size:clamp(1.25rem,2vw,1.75rem);
  font-weight:700;
  letter-spacing:-.01em
}

.genre-list span{
  display:block;
  margin-top:8px;
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--dim)
}

/* ---------- 对照表 ---------- */
.compare{padding:0 var(--pad) clamp(62px,8.6vw,116px)}

.tbl-wrap{width:100%;overflow-x:auto}

.tbl{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:14px
}

.tbl caption{
  caption-side:top;
  text-align:left;
  font-size:11px;
  letter-spacing:.2em;
  color:var(--dim);
  padding-bottom:14px
}

.tbl thead th{
  text-align:left;
  font-size:11px;
  font-weight:400;
  letter-spacing:.16em;
  color:var(--mute);
  padding:0 0 14px;
  border-bottom:1px solid var(--line)
}

.tbl thead th:first-child{width:clamp(96px,12vw,180px)}

.tbl tbody th{
  text-align:left;
  font-weight:600;
  font-size:14px;
  letter-spacing:0;
  color:var(--fg);
  padding:20px 24px 20px 0;
  border-bottom:1px solid var(--line-2);
  white-space:nowrap
}

.tbl tbody td{
  padding:20px clamp(12px,2vw,28px) 20px 0;
  border-bottom:1px solid var(--line-2);
  color:var(--mute);
  vertical-align:top
}

.tbl tbody tr:hover td,.tbl tbody tr:hover th{background:rgba(255,255,255,.03);color:var(--fg)}

.cmp-note{
  margin-top:clamp(18px,2.4vw,28px);
  max-width:52em;
  font-size:13.5px;
  line-height:1.85;
  color:var(--dim)
}

/* ---------- 分镜墙 ---------- */
.band{padding:0 0 clamp(56px,8vw,104px)}

.band img{width:100%;height:auto}

.band .plate-cap{padding-top:14px}

/* ---------- 核对（反相） ---------- */
.check{
  background:var(--paper);
  color:#141414;
  padding:clamp(56px,8.5vw,108px) var(--pad)
}

.check .sec-h{border-top-color:rgba(20,20,20,.3)}
.check .sec-n{color:#6d6a62}
.check .sec-h h2{color:#141414}

.check dl{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,40px);
  margin-top:clamp(26px,3.6vw,46px)
}

.check dt{
  font-size:12px;
  letter-spacing:.2em;
  border-top:1px solid rgba(20,20,20,.32);
  padding-top:13px
}

.check dd{margin-top:10px;font-size:14px;line-height:1.78;color:#3b3b36}

.check-note{
  margin-top:clamp(24px,3.4vw,40px);
  padding-top:14px;
  border-top:1px solid rgba(20,20,20,.18);
  font-size:12.5px;
  letter-spacing:.02em;
  color:#5c584f
}

/* ---------- 问答 ---------- */
.faq{padding:clamp(56px,8vw,104px) var(--pad) clamp(34px,5vw,64px)}

.faq-list{border-top:1px solid var(--line)}

.faq details{border-bottom:1px solid var(--line-2)}

.faq summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  cursor:pointer;
  list-style:none;
  padding:clamp(18px,2.4vw,26px) 0;
  font-size:clamp(15px,1.5vw,18px);
  font-weight:600;
  letter-spacing:-.01em;
  transition:color .2s
}

.faq summary::-webkit-details-marker{display:none}

.faq summary::after{
  content:"+";
  font-size:20px;
  font-weight:400;
  color:var(--dim);
  line-height:1
}

.faq details[open] summary::after{content:"−"}
.faq summary:hover{color:var(--mute)}

.faq details p{
  padding:0 0 clamp(18px,2.4vw,26px);
  max-width:44em;
  font-size:14px;
  line-height:1.85;
  color:var(--mute)
}

/* ---------- 下载 ---------- */
.dl{padding:clamp(46px,6.4vw,88px) var(--pad) clamp(58px,8.2vw,112px)}

.dl .sec-h{
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  margin-bottom:clamp(22px,3vw,36px)
}

.dl-h{
  font-size:clamp(3.6rem,13vw,10.5rem);
  line-height:.84;
  letter-spacing:-.05em;
  font-weight:800
}

.dl-list{border-top:1px solid var(--line)}

.dl-list:not(:has(.dl-row:not([hidden]))){border-top:0}

.dl-row{
  padding:26px 0;
  border-bottom:1px solid var(--line);
  transition:background .2s,padding .2s
}

.dl-row:not([hidden]){
  display:grid;
  grid-template-columns:clamp(30px,3.4vw,52px) clamp(72px,9vw,130px) minmax(0,1fr) auto;
  gap:clamp(12px,2.2vw,26px);
  align-items:center
}

.dl-row:hover{background:rgba(255,255,255,.03);padding-left:10px}

.dl-n{font-size:11px;letter-spacing:.18em;color:var(--dim)}

.dl-k{font-size:clamp(1.15rem,1.9vw,1.65rem);font-weight:700;letter-spacing:-.01em}

.dl-d{font-size:13.5px;color:var(--mute)}

.dl-go{font-size:12px;letter-spacing:.12em;border-bottom:1px solid var(--fg);padding-bottom:4px;white-space:nowrap}

.dl-note{
  margin-top:clamp(18px,2.4vw,26px);
  font-size:12.5px;
  letter-spacing:.02em;
  color:var(--dim)
}

/* ---------- 页脚 ---------- */
.ft{border-top:1px solid var(--line);padding:clamp(38px,4.6vw,64px) var(--pad) 26px}

.ft-in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(20px,3vw,40px)}

.ft-brand{display:flex;flex-direction:column;align-items:flex-start;gap:12px;color:var(--mute);font-size:14px}

.ft-small{font-size:11px;letter-spacing:.14em;color:var(--dim)}

.ft-col h2{font-size:11px;font-weight:400;letter-spacing:.22em;color:#7c7c78;margin-bottom:14px}

.ft-col ul{display:grid;gap:9px;font-size:14px;color:var(--mute)}
.ft-col a:hover{color:var(--fg)}

.ft-base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-top:clamp(30px,4vw,50px);
  padding-top:18px;
  border-top:1px solid var(--line-2);
  font-size:11px;letter-spacing:.12em;color:var(--dim)
}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .stmt-in{grid-template-columns:1fr;align-items:start}
  .sec-h{grid-template-columns:1fr;align-items:start}
  .sec-note{max-width:38em}
}

@media (max-width:900px){
  .hero-foot{grid-template-columns:1fr}
  .scr-row{flex-wrap:wrap}
  .scr-a{width:52%}
  .scr-b{width:40%}
  .scr-c{width:46%;margin-top:0}
  .scr-legend{grid-template-columns:1fr 1fr}
  .check dl{grid-template-columns:1fr 1fr}
  .check dl>div:last-child{grid-column:1/3}
  .idx-d::after{display:none}
}

@media (max-width:700px){
  .nav{display:none}
  .brand-name{font-size:17px}
  .hero-line{font-size:clamp(2.9rem,16.6vw,5rem)}
  .statement h2 br{display:none}
  .hero-meta{grid-template-columns:1fr 1fr}
  .hero-meta>div:nth-child(3){border-left:0;padding-left:0}
  .hero-meta>div:nth-child(n+3){border-top:1px solid var(--line-2);margin-top:14px}
  .plate-cap{grid-template-columns:1fr;gap:6px}
  .cap{grid-template-columns:38px minmax(0,1fr);gap:0 14px}
  .cap-tag{display:none}
  .cap:nth-child(even){padding-left:0}
  .scr-row{flex-direction:column;gap:28px}
  .scr{width:100%;margin-top:0}
  .scr-b{width:74%}
  .scr-c{width:88%}
  .scr-legend{grid-template-columns:1fr}
  .tbl{min-width:0;font-size:12px}
  .tbl caption{font-size:10.5px}
  .tbl thead th{font-size:10px;letter-spacing:.1em;padding:8px 8px 8px 0}
  .tbl tbody th{padding:10px 8px 10px 0;font-size:12px}
  .tbl tbody td{padding:10px 8px 10px 0}
  .tbl-wrap{overflow-x:visible}
  .genre-list{grid-template-columns:1fr 1fr}
  .genre-list li:nth-child(3n+1){border-left:1px solid var(--line-2)}
  .genre-list li:nth-child(2n+1){border-left:0}
  .genre-list li:nth-child(n+7){border-bottom:1px solid var(--line-2)}
  .genre-list li:nth-child(n+9){border-bottom:0}
  .idx-list a{grid-template-columns:34px minmax(0,1fr);gap:6px 12px}
  .idx-d{grid-column:2;font-size:13px}
  .idx-go{display:none}
  .check dl{grid-template-columns:1fr}
  .check dl>div:last-child{grid-column:auto}
  .dl-row:not([hidden]){grid-template-columns:36px minmax(0,1fr);gap:6px 12px;padding:22px 0}
  .dl-k{font-size:1.2rem}
  .dl-d{grid-column:2}
  .dl-go{grid-column:2;justify-self:start;margin-top:6px}
  .ft-in{grid-template-columns:1fr 1fr}
  .ft-brand{grid-column:1/3}
  .faq{padding-bottom:clamp(24px,4vw,40px)}
  .dl{padding-top:clamp(28px,4vw,48px)}
  .index{padding-bottom:clamp(48px,7vw,72px)}
  .caps{padding-bottom:clamp(46px,6vw,64px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none}
}