/* ============================================================
   衡和 ConcordNexus — 官网样式
   方案 A「文书·墨」画册版：
   纸面 · 墨蓝 · 编辑排版（大号衬线数字 / 竖排边注 / 条款式列表）
   ============================================================ */

:root{
  --paper:#FCFCFA; --panel:#FFFFFF; --ink:#17181A; --muted:#666A72; --faint:#9B9EA6;
  --hairline:#E3E0D6; --hairline-2:#CFCBBE;
  --accent:#1F4E79; --accent-deep:#173A5A; --accent-soft:#EDF2F7;
  --serif:Georgia,"Times New Roman","Songti SC","Noto Serif SC",serif;
  --sans:-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.85;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 48px}

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

/* ── 顶栏 ── */
.nav{position:sticky;top:0;z-index:50;background:rgba(252,252,250,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.brand{display:flex;align-items:baseline;gap:12px}
.brand .mark{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:.01em}
.brand .mark i{font-style:normal;color:var(--accent)}
.brand .cn{font-size:12px;color:var(--faint);letter-spacing:.28em}
.menu{display:flex;gap:34px;font-size:14px;color:var(--muted);align-items:center}
.menu a:hover{color:var(--ink)}
.menu .cta{background:var(--ink);color:var(--paper);padding:10px 22px;font-weight:600;transition:.2s}
.menu .cta:hover{background:var(--accent-deep)}
.nav-toggle{display:none;background:none;border:1px solid var(--hairline-2);border-radius:6px;width:42px;height:42px;font-size:18px;color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
/* 阅读进度墨线：随滚动生长，像读一份文件的进度 */
.nav::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:calc(var(--progress,0)*100%);background:var(--accent);z-index:1}

/* ── 首屏 ── */
.hero{padding:104px 0 120px;border-bottom:1px solid var(--hairline)}
.kicker{font-size:13px;letter-spacing:.4em;color:var(--muted);margin-bottom:30px}
.kicker::before{content:"";display:inline-block;width:38px;height:1px;background:var(--accent);vertical-align:middle;margin-right:16px}
/* 起笔：短墨线在进场时画出 */
html.reveal-ready .reveal .kicker::before{width:0;transition:width .7s ease .35s}
html.reveal-ready .reveal.in .kicker::before{width:38px}
.kicker b{color:var(--accent);font-weight:600}
h1{font-size:clamp(46px,5.8vw,82px);line-height:1.16;font-weight:700;letter-spacing:.005em}
h1 .serif{font-family:var(--serif);font-style:italic;color:var(--accent)}
.hero .lede{margin-top:34px;font-size:17.5px;color:var(--muted);max-width:31em}
.hero .lede strong{color:var(--ink);font-weight:600}
.actions{margin-top:46px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.btn{display:inline-block;font-size:15px;font-weight:600;padding:16px 36px;transition:.2s;text-align:center}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--accent-deep)}
.btn-line{border:1px solid var(--hairline-2);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.note{margin-top:22px;font-size:13px;color:var(--faint)}
.hero-shot{margin-top:84px}
.doc{background:var(--panel);border:1px solid var(--ink);box-shadow:12px 12px 0 var(--accent-soft),0 32px 64px rgba(23,58,90,.10)}
.doc-bar{display:flex;gap:6px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--hairline)}
.doc-bar i{width:9px;height:9px;border-radius:50%;background:var(--hairline-2)}
.doc-bar span{margin-left:10px;font-family:var(--serif);font-style:italic;font-size:13px;color:var(--faint)}
.doc img{width:100%}
.doc-cap{margin-top:14px;font-size:13px;color:var(--faint)}

/* ── 章节骨架：衬线章号 + 中文系统标签 + 生长细线 ── */
.section{padding:150px 0;border-bottom:1px solid var(--hairline)}
.sec-head{padding-bottom:32px;margin-bottom:84px;position:relative}
/* 章节底线：进场时从左向右生长 */
.sec-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hairline-2)}
html.reveal-ready .sec-head::after{transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.25,.6,.3,1) .2s}
html.reveal-ready .sec-head.in::after{transform:none}
.sec-meta{display:flex;align-items:baseline;gap:18px;margin-bottom:24px}
.sec-no{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--accent)}
.sec-lab{font-size:13px;letter-spacing:.34em;color:var(--faint)}
.sec-head h2{font-size:clamp(32px,3.8vw,52px);line-height:1.26;font-weight:700;letter-spacing:.01em}
.sec-head .sub{margin-top:18px;max-width:38em;font-size:15.5px;color:var(--muted)}

/* 给谁用：之字形图文错排 */
.aud-row{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:center;margin-bottom:76px}
.aud-row.rev{grid-template-columns:5fr 7fr}
.ph{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--hairline-2)}
.ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) sepia(.05) contrast(.99);transition:transform .8s ease}
.ph:hover img{transform:scale(1.03)}
.aud-copy{max-width:34em}
.aud-copy .idx{display:block;font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:.16em;color:var(--accent);margin-bottom:18px}
.aud-copy h3{font-size:27px;font-weight:700;margin-bottom:6px}
.aud-copy .for{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--accent);margin-bottom:20px}
.aud-copy p{font-size:15.5px;color:var(--muted)}
.aud-copy strong{color:var(--ink);font-weight:600}
.aud-foot{max-width:42em;font-size:17.5px;line-height:1.9;color:var(--ink);border-left:3px solid var(--accent);padding-left:28px}

/* 工作台：范围句 + 条款式列表 + 脚注 */
.entries{max-width:56em;margin:0 0 72px;font-size:17px;line-height:2.15;color:var(--muted)}
.entries .lab{display:block;font-family:var(--serif);font-style:italic;font-size:14px;letter-spacing:.06em;color:var(--accent);margin-bottom:8px}
.entries b{color:var(--ink);font-weight:600;white-space:nowrap}
.entries i{font-style:normal;color:var(--hairline-2)}
.band{position:relative;margin:0 0 88px}
.band img{width:100%;aspect-ratio:21/9;object-fit:cover;filter:saturate(.85) sepia(.05) contrast(.99)}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,41,63,0) 52%,rgba(18,41,63,.58));pointer-events:none}
.band figcaption{position:absolute;left:48px;bottom:28px;z-index:1;color:rgba(255,255,255,.94);font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:.06em}
.clauses{border-top:1px solid var(--hairline)}
.clause{display:grid;grid-template-columns:110px 1fr;gap:36px;align-items:baseline;padding:36px 0;border-bottom:1px solid var(--hairline)}
.clause .no{font-family:var(--serif);font-style:italic;font-size:46px;line-height:1;color:var(--faint);transition:color .25s}
.clause:hover .no{color:var(--accent)}
.clause h3{font-size:20px;font-weight:700;margin-bottom:8px}
.clause p{font-size:15px;color:var(--muted);max-width:46em}
.ledger{margin-top:52px;font-size:14.5px;line-height:1.9;color:var(--muted);max-width:52em}
.ledger::before{content:"※　";color:var(--accent)}
.ledger b{color:var(--ink);font-weight:600;margin-right:10px}

/* 界面：不对称双图 + 三小图 */
.shots{display:grid;grid-template-columns:7fr 5fr;gap:52px;align-items:start}
.shot .doc{box-shadow:8px 8px 0 var(--accent-soft)}
.shot figcaption{margin-top:16px;font-size:14px;color:var(--muted);max-width:36em}
.shot figcaption b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.shot-thumbs{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.shot-thumbs img{border:1px solid var(--hairline);filter:saturate(.92)}
.shot-thumbs p{margin-top:12px;font-size:13px;color:var(--faint)}

/* 数据与使用：报纸式三栏 */
.deploy{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.deploy div{padding:44px 40px 44px 0}
.deploy div+div{border-left:1px solid var(--hairline);padding-left:40px}
.deploy h3{font-size:17.5px;font-weight:700;margin-bottom:10px}
.deploy p{font-size:14.5px;color:var(--muted);max-width:24em}
.stage-row{margin-top:68px;display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:center}
.desk img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--hairline-2);filter:saturate(.85) sepia(.05) contrast(.99)}
.stage{border-left:3px solid var(--accent);padding:6px 0 6px 30px}
.stage h3{font-size:19px;margin-bottom:8px}
.stage p{font-size:15px;color:var(--muted);max-width:56em}

/* FAQ */
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:26px;align-items:baseline;padding:26px 0;font-size:17px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:16px;flex:none}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--serif);font-size:24px;color:var(--faint);transition:.18s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 28px 46px;color:var(--muted);font-size:14.5px;max-width:52em}

/* CTA：一次饱和的墨蓝 */
.cta-band{background:linear-gradient(160deg,#1F4E79 0%,#173A5A 58%,#122A42 100%);color:#F4F6F8;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:url("../assets/photos/library-dark.jpg") center/cover;opacity:.10;mix-blend-mode:luminosity;pointer-events:none}
.cta-band .wrap{display:grid;grid-template-columns:1fr auto;gap:72px;align-items:center;padding-top:110px;padding-bottom:110px;position:relative}
.cta-band .kicker{color:rgba(244,246,248,.55)}
.cta-band .kicker::before{background:rgba(244,246,248,.5)}
.cta-band h2{font-size:clamp(32px,4vw,52px);font-weight:700;line-height:1.28}
.cta-band p{margin-top:20px;font-size:15.5px;color:rgba(244,246,248,.75);max-width:32em}
.cta-band .alt{margin-top:24px;font-size:14px}
.cta-band .alt a{border-bottom:1px solid rgba(244,246,248,.5);padding-bottom:2px}
.cta-band .alt a:hover{border-color:#fff}
.qr{background:#fff;color:var(--ink);padding:22px;text-align:center;box-shadow:12px 12px 0 rgba(0,0,0,.18)}
.qr img{width:184px;height:184px}
.qr figcaption{margin-top:12px;font-size:12.5px;color:var(--muted)}

/* 页脚：深色机构级 */
.footer{background:var(--ink);color:#A6ABB3;padding:72px 0 44px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:56px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.14)}
.f-brand .brand .mark{color:#FFFFFF}
.f-brand .brand .mark i{color:#8FB3D9}
.f-brand .brand .cn{color:#8A9099}
.f-brand p{margin-top:16px;font-size:13.5px;line-height:1.95;max-width:28em;color:#9AA0A8}
.f-col b{display:block;font-size:14px;font-weight:600;color:#FFFFFF;margin-bottom:16px}
.f-col a,.f-col span{display:block;font-size:13.5px;color:#9AA0A8;padding:4px 0}
.f-col a:hover{color:#FFFFFF}
.f-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:24px;font-size:12.5px;color:#83898F}
.footer a.icp{color:#83898F;border-bottom:1px solid rgba(255,255,255,.22)}
.footer a.icp:hover{color:#FFFFFF;border-color:#FFFFFF}

/* ── 进场动画：仅在 JS 就绪后启用，带兜底与打印保护 ── */
html.reveal-ready .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
html.reveal-ready .reveal.in{opacity:1;transform:none}

@media print{
  html.reveal-ready .reveal{opacity:1 !important;transform:none !important}
  html.reveal-ready .sec-head::after{transform:none}
  html.reveal-ready .reveal .kicker::before{width:38px}
  .nav{position:static}
  .nav::after{display:none}
  .section{padding:40px 0}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.reveal-ready .reveal{opacity:1;transform:none;transition:none}
  html.reveal-ready .sec-head::after{transform:none;transition:none}
  html.reveal-ready .reveal .kicker::before{width:38px;transition:none}
  .ph img,.band img,.btn,.faq summary::after,.clause .no{transition:none}
}

/* ── 响应式 ── */
@media(max-width:1024px){
  .aud-row,.aud-row.rev{grid-template-columns:1fr;gap:32px;margin-bottom:60px}
  .shots{grid-template-columns:1fr;gap:44px}
  .stage-row{grid-template-columns:1fr;gap:36px}
}
@media(max-width:768px){
  .menu{display:none}
  .nav-toggle{display:inline-flex}
  .nav.open .menu{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--hairline);flex-direction:column;padding:20px 24px;gap:18px;align-items:stretch}
  .wrap{padding:0 24px}
  .hero{padding:72px 0 80px}
  .hero-shot{margin-top:56px}
  .section{padding:96px 0}
  .band{margin:0 0 64px}
  .band img{aspect-ratio:4/3}
  .band figcaption{left:24px;bottom:20px}
  .f-grid{grid-template-columns:1fr;gap:40px}
  .sec-head{grid-template-columns:1fr;gap:10px;padding-bottom:22px;margin-bottom:48px}
  .sec-no{font-size:36px}
  .clause{grid-template-columns:60px 1fr;gap:20px;padding:26px 0}
  .clause .no{font-size:26px}
  .deploy{grid-template-columns:1fr}
  .deploy div{padding:30px 0}
  .deploy div+div{border-left:0;padding-left:0;border-top:1px solid var(--hairline)}
  .cta-band .wrap{grid-template-columns:1fr;gap:44px;padding-top:76px;padding-bottom:76px}
  .shot-thumbs{grid-template-columns:1fr 1fr}
  .faq .a{padding-left:0}
  .qr{justify-self:center}
  .entries{font-size:15px}
}
@media(max-width:560px){
  .actions .btn{width:100%}
  .shot-thumbs{grid-template-columns:1fr}
  .kicker{letter-spacing:.28em}
  .band figcaption{left:20px;bottom:16px;font-size:13.5px}
  h1{font-size:clamp(38px,10.5vw,46px)}
}