/* 苏息官网 · 设计系统
   Token 全部来自 brand-spec.md，禁止临时发明色值 */

:root{
  --ink:#1F3D2B; --ink-2:#2A4A38; --deep:#16281D;
  --paper:#F7F5EF; --paper-2:#FFFDF8;
  --amber:#C08B3E; --amber-l:#E4C58C;
  --moss:#6B8E6B; --text:#2A3430; --muted:#6E7A72;
  --line:rgba(31,61,43,.16); --line-2:rgba(31,61,43,.07);
  --serif:"Songti SC","SimSun","Source Han Serif SC","Noto Serif CJK SC",serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Heiti SC",sans-serif;
  --r:2px;                      /* 档案感：近乎直角 */
  --sp:8px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--text);
  font-family:var(--sans); font-size:15px; line-height:1.78;
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
}
/* 纸张质感 */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--amber-l);color:var(--ink)}
a{color:inherit}
img,svg{display:block;max-width:100%}

/* ---------- 布局 ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 40px;position:relative;z-index:2}
main{position:relative;z-index:2;min-height:64vh}
.sec{padding:72px 0}
.sec+.sec{border-top:1px solid var(--line)}
.rule{height:1px;background:var(--line)}

/* ---------- 站点头 ---------- */
.hd{position:sticky;top:0;z-index:50;background:rgba(247,245,239,.93);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.hd-in{max-width:1180px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:70px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand .nm{font-family:var(--serif);font-size:19px;letter-spacing:5px;color:var(--ink);line-height:1}
.brand .sl{display:block;font-size:9px;letter-spacing:2.4px;color:var(--moss);margin-top:5px;line-height:1}
.nav{display:flex;gap:30px;font-size:14px}
.nav a{text-decoration:none;color:var(--text);padding:5px 0;border-bottom:1.5px solid transparent;transition:.18s var(--ease);white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a.on{color:var(--ink);border-color:var(--ink)}

/* ---------- 统一深色页头（夜林孤灯图） ---------- */
.phero{position:relative;z-index:2;background:#0D1A12;overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;
  background:url("hero-lantern.png") center/cover no-repeat;transform:scale(1.02)}
.phero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,16,11,.66) 0%,rgba(8,16,11,.30) 38%,rgba(8,16,11,.80) 100%),
             radial-gradient(120% 90% at 78% 40%,rgba(6,12,9,.34) 0%,rgba(6,12,9,0) 62%)}
.phero-in{position:relative;z-index:3;padding:118px 40px 46px}
.phero-sm .phero-in{padding-bottom:34px}
.phero .crumb{color:rgba(247,245,239,.58);padding:0 0 16px}
.phero .crumb a{color:rgba(247,245,239,.58)}
.phero .crumb a:hover{color:var(--paper)}
.phero .crumb i{opacity:.4}
.phero .page-hd{border:0;padding:0}
.phero .eyebrow{color:var(--amber-l)}
.phero .eyebrow::before{background:var(--amber-l);opacity:.75}
.phero h1{color:#F5F1E6;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.phero .lead{color:rgba(247,245,239,.72)}
/* 内页导航：与页头同源的夜林孤灯图 + 深色罩，白字始终压在暗底上 */
body.has-phero .hd{
  background-color:#0D1A12;
  background-image:linear-gradient(180deg,rgba(8,16,11,.74),rgba(8,16,11,.74)),url("hero-lantern.png");
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  border-bottom:1px solid rgba(247,245,239,.14);backdrop-filter:none;
}
body.has-phero .hd .brand .nm{color:var(--paper)}
body.has-phero .hd .brand .sl{color:rgba(228,197,140,.88)}
body.has-phero .hd .nav a{color:rgba(247,245,239,.88)}
body.has-phero .hd .nav a:hover{color:var(--paper)}
body.has-phero .hd .nav a.on{color:var(--paper);border-color:var(--amber-l)}
body.has-phero .hd /* 滚动离开页头后：加深一层并落下阴影，与浅色正文区拉开 */
body.has-phero.hd-solid .hd{
  background-image:linear-gradient(180deg,rgba(8,16,11,.88),rgba(8,16,11,.88)),url("hero-lantern.png");
  box-shadow:0 10px 30px -18px rgba(8,16,11,.8);
}

/* ---------- 排版 ---------- */
.eyebrow{font-size:10.5px;letter-spacing:3.4px;color:var(--moss);text-transform:uppercase;display:flex;align-items:center;gap:11px;margin-bottom:16px}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--moss);opacity:.6}
h1{font-family:var(--serif);font-size:clamp(34px,4.6vw,58px);line-height:1.22;font-weight:400;color:var(--ink);letter-spacing:2.5px}
h2{font-family:var(--serif);font-size:clamp(24px,2.6vw,33px);font-weight:400;color:var(--ink);letter-spacing:1.6px;line-height:1.36}
h3{font-family:var(--serif);font-size:19px;font-weight:400;color:var(--ink);letter-spacing:.6px;line-height:1.5}
h4{font-size:14px;font-weight:500;color:var(--ink);letter-spacing:.4px}
.lead{font-size:16.5px;color:var(--muted);line-height:1.95;max-width:600px}
.muted{color:var(--muted)}
.sm{font-size:13.5px}
.en{font-size:10px;letter-spacing:2.6px;color:var(--moss);text-transform:uppercase}
.num{font-size:10.5px;letter-spacing:2px;color:var(--moss);font-variant-numeric:tabular-nums}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:34px;flex-wrap:wrap}
.sec-hd p{margin-top:10px;font-size:14px;color:var(--muted);max-width:520px;line-height:1.85}
.crumb{font-size:12.5px;color:var(--muted);padding:24px 0 20px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--muted);text-decoration:none;transition:.18s}
.crumb a:hover{color:var(--ink)}
.crumb i{font-style:normal;opacity:.45}
.page-hd{padding:8px 0 44px;border-bottom:1px solid var(--line);margin-bottom:0}
.page-hd .lead{margin-top:20px}
.more{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;transition:.18s var(--ease)}
.more:hover{border-color:var(--ink)}
.more svg{width:12px;height:12px}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:12px 26px;border-radius:999px;font-size:14px;text-decoration:none;transition:.2s var(--ease);border:1px solid transparent;font-family:var(--sans);cursor:pointer;white-space:nowrap}
.btn-1{background:var(--ink);color:var(--paper)}
.btn-1:hover{background:var(--ink-2)}
.btn-2{border-color:var(--ink);color:var(--ink)}
.btn-2:hover{background:rgba(31,61,43,.06)}
.btn-s{padding:8px 18px;font-size:13px}
.btn svg{width:13px;height:13px}

/* ---------- 待填标记 ---------- */
.todo{display:inline-block;font-size:10px;letter-spacing:1px;color:var(--amber);border:1px dashed rgba(192,139,62,.55);border-radius:2px;padding:1px 7px;vertical-align:middle;white-space:nowrap}

/* ---------- 标本档案卡占位（诚实占位，不冒充实拍） ---------- */
.specimen{position:relative;background:linear-gradient(150deg,#22362A 0%,#121F18 100%);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:18px}
.specimen::before{ /* 四角定位标记 */
  content:"";position:absolute;inset:12px;border:1px dashed rgba(247,245,239,.16);pointer-events:none;
}
.specimen::after{ /* 侧光 */
  content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 20%,rgba(228,197,140,.13),transparent 60%);pointer-events:none;
}
.sp-body{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center}
.sp-no{font-size:10px;letter-spacing:2.4px;color:var(--amber-l);font-variant-numeric:tabular-nums}
.sp-cap{font-size:12px;color:rgba(247,245,239,.82);letter-spacing:.5px;line-height:1.6;max-width:250px}
.sp-req{font-size:10px;letter-spacing:1.2px;color:rgba(247,245,239,.42);line-height:1.7;max-width:260px}
.sp-mark{position:absolute;z-index:2;width:9px;height:9px;border-left:1px solid rgba(247,245,239,.4);border-top:1px solid rgba(247,245,239,.4)}
.sp-mark.tl{top:8px;left:8px} .sp-mark.tr{top:8px;right:8px;transform:rotate(90deg)}
.sp-mark.bl{bottom:8px;left:8px;transform:rotate(-90deg)} .sp-mark.br{bottom:8px;right:8px;transform:rotate(180deg)}

/* ---------- 网格 ---------- */
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ---------- 卡片：细线档案感 ---------- */
.card{border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);transition:.22s var(--ease);position:relative}
.card-hover:hover{border-color:rgba(31,61,43,.4);transform:translateY(-3px);box-shadow:0 12px 30px -22px rgba(31,61,43,.6)}
.pad{padding:26px}

/* 业务板块 */
.cat{padding:24px 22px 26px;cursor:pointer;display:block;text-decoration:none}
.cat .num{margin-bottom:20px;display:block}
.cat h3{margin:14px 0 8px}
.cat p{font-size:13px;color:var(--muted);line-height:1.8}
.cat .go{margin-top:16px;font-size:12px;color:var(--ink);display:flex;align-items:center;gap:6px;letter-spacing:.5px}
.cat .go svg{width:12px;height:12px}
.cat .specimen{height:104px}

/* 商品卡 */
.gd{cursor:pointer;overflow:hidden;display:flex;flex-direction:column;text-decoration:none}
.gd .specimen{aspect-ratio:1/1}
.gd-b{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.gd-b h3{font-size:16px;margin:10px 0 6px;line-height:1.45}
.gd-b p{font-size:12.5px;color:var(--muted);line-height:1.72;min-height:42px}
.gd-f{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:10px}
.price{font-size:13.5px;color:var(--ink);letter-spacing:.4px}
.price.na{color:var(--muted);font-size:12.5px}
.tag{font-size:10px;letter-spacing:1.2px;color:var(--amber);border:1px solid rgba(192,139,62,.45);border-radius:2px;padding:2px 7px;white-space:nowrap}

/* 课程卡（横向） */
.cs{display:grid;grid-template-columns:260px 1fr;overflow:hidden;cursor:pointer;text-decoration:none}
.cs .specimen{min-height:180px}
.cs-b{padding:24px 28px}
.cs-b h3{margin:8px 0 10px;font-size:20px}
.cs-b p{font-size:13.5px;color:var(--muted);line-height:1.82}
.meta{display:flex;gap:26px;margin-top:16px;flex-wrap:wrap}
.meta div{display:flex;flex-direction:column;gap:4px}
.meta b{font-weight:500;color:var(--ink);font-size:13.5px;letter-spacing:.3px}
.meta span{font-size:9.5px;letter-spacing:1.6px;color:var(--moss);text-transform:uppercase}

/* 文章行 */
.ar{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);align-items:center;text-decoration:none;transition:.2s}
.ar:first-of-type{border-top:1px solid var(--line)}
.ar:hover{background:rgba(255,253,248,.6)}
.ar .specimen{height:126px}
.ar h3{margin-bottom:8px;font-size:18px;line-height:1.5}
.ar p{font-size:13px;color:var(--muted);line-height:1.76}

/* 筛选 pill（直角，档案感） */
.fil{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.pill{border:1px solid var(--line);border-radius:2px;padding:6px 15px;font-size:12.5px;color:var(--muted);cursor:pointer;transition:.18s var(--ease);background:transparent;font-family:var(--sans)}
.pill:hover{border-color:rgba(31,61,43,.38);color:var(--ink)}
.pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* 检索条 */
.srch{display:flex;align-items:center;gap:13px;border:1px solid var(--ink);border-radius:2px;padding:14px 22px;background:var(--paper-2);margin-bottom:30px}
.srch svg{width:15px;height:15px;color:var(--moss);flex:none}
.srch input{flex:1;border:0;outline:0;background:transparent;font-size:15px;font-family:var(--sans);color:var(--text)}
.srch input::placeholder{color:var(--muted)}

/* 知识库分类 */
.kb-cat{padding:24px}
.kb-cat h3{margin-bottom:9px}
.kb-cat>p{font-size:12.5px;color:var(--muted);line-height:1.78;margin-bottom:16px;min-height:44px}
.kb-cat ul{list-style:none;font-size:13px}
.kb-cat li{border-top:1px solid var(--line-2);transition:.18s}
.kb-cat li a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;color:var(--muted);text-decoration:none}
.kb-cat li a:hover{color:var(--ink)}
.kb-cat li i{font-style:normal;font-size:10px;color:var(--moss);letter-spacing:1.4px;text-transform:uppercase}

/* 规格表 */
.spec{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.spec table{width:100%;border-collapse:collapse;font-size:13.5px}
.spec td{padding:13px 20px;border-bottom:1px solid var(--line-2);vertical-align:top}
.spec td:first-child{color:var(--moss);width:31%;font-size:12px;letter-spacing:1.2px;white-space:nowrap}
.spec tr:last-child td{border-bottom:0}

/* 步骤 */
.steps{counter-reset:s;list-style:none;margin-top:20px}
.steps li{counter-increment:s;position:relative;padding:0 0 20px 44px;border-left:1px solid var(--line);margin-left:11px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:-11px;top:0;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:10px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.steps h4{margin-bottom:4px}
.steps p{font-size:13.5px;color:var(--muted);line-height:1.78}
.chk{list-style:none;margin-top:12px}
.chk li{position:relative;padding-left:20px;font-size:13.5px;color:var(--muted);line-height:1.95}
.chk li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;border:1px solid var(--moss);border-radius:50%}

/* 正文 */
.art{max-width:720px}
.art p{font-size:15.5px;line-height:2.05;color:#3A453F;margin-bottom:20px}
.art h3{margin:34px 0 14px;font-size:21px}
.art blockquote{margin:28px 0;padding:20px 26px;border-left:2px solid var(--amber);background:rgba(192,139,62,.07);font-family:var(--serif);font-size:17px;line-height:1.85;color:var(--ink)}
.art .specimen{height:280px;margin:28px 0}

/* 深色 banner */
.bn{background:var(--ink);border-radius:var(--r);padding:50px 54px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;position:relative;overflow:hidden}
.bn::after{content:"";position:absolute;right:-70px;top:-70px;width:300px;height:300px;border-radius:50%;background:rgba(228,197,140,.07)}
.bn h2{color:var(--paper)}
.bn p{color:rgba(247,245,239,.66);font-size:14.5px;margin-top:12px;max-width:430px;line-height:1.85}
.qr{width:110px;height:110px;border:1px solid rgba(247,245,239,.22);display:flex;align-items:center;justify-content:center;color:rgba(247,245,239,.5);font-size:10px;text-align:center;line-height:1.8;letter-spacing:1px}

/* 页脚 */
.ft{border-top:1px solid var(--line);margin-top:64px;padding:50px 0 56px;position:relative;z-index:2}
.ft-t{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.3fr;gap:40px}
.ft h4{font-size:10.5px;letter-spacing:2.4px;color:var(--moss);margin-bottom:15px;font-weight:400;text-transform:uppercase}
.ft ul{list-style:none;font-size:13.5px;line-height:2.15}
.ft ul a{color:var(--muted);text-decoration:none;transition:.18s}
.ft ul a:hover{color:var(--ink)}
.ft-b{margin-top:42px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.ft-legal{margin-top:16px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);font-size:12.5px;color:var(--muted);line-height:1.9}
/* 备案号：ICP 号须链工信部，公安备案号须带图标 —— 拿到号后替换 .todo 内文字即可 */
.ft-beian{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ft-beian a{color:var(--muted);text-decoration:none;transition:.18s}
.ft-beian a:hover{color:var(--ink)}
.ft-gab{display:flex;align-items:center;gap:7px}
.ga-badge{width:14px;height:15px;flex:none;border-radius:1px;background:var(--moss);position:relative}
.ga-badge::after{content:"";position:absolute;left:3px;top:4px;width:8px;height:6px;border:1px solid var(--paper);border-radius:1px 1px 0 0}

/* 数据行（档案式） */
.stats{display:flex;gap:44px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);margin-top:34px}
.stats div span{display:block}
.stats .v{font-family:var(--serif);font-size:26px;color:var(--ink);line-height:1.2}
.stats .k{font-size:12px;color:var(--muted);margin-top:6px}

/* 入场动画 */
.reveal{opacity:0;transform:translateY(12px);animation:rise .5s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;animation:none}*{transition:none!important}}

@media(max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(2,1fr)}
  .cs{grid-template-columns:1fr} .ft-t{grid-template-columns:1fr 1fr}
  .nav{display:none} .wrap,.hd-in{padding:0 22px} .sec{padding:52px 0}
  .phero-in{padding:100px 22px 34px}
  .ar{grid-template-columns:1fr}
  .bn{padding:36px 28px}
}
@media(max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr} .ft-t{grid-template-columns:1fr}
  .stats{gap:24px}
  .phero-in{padding:92px 22px 28px}
}