/* ============================================================================
   留白之境 BlankRealm — 官网样式
   唯一来源：设计稿 tokens（画布 727129559464389）
   原则：白色主导 / 0.5–1px 细线分隔 / 不用卡片阴影 / 强调色面积 < 5%
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  /* 底色 */
  --paper:#FFFFFF;
  --fog:#F6F6F4;
  /* 字色 */
  --ink:#141414;
  --body:#4A4A48;
  --g2:#6B6B69;
  --g3:#A3A3A0;
  /* 线 */
  --line:#EAEAE6;
  --line-2:#DEDED9;
  --line-3:#E2E2DE;
  --wordmark:#E1E1DC;
  /* 强调 —— 印泥 */
  --seal:#A62B1F;
  /* 字体 */
  --serif:"Songti SC","Source Han Serif SC","Noto Serif SC","STSong","SimSun",Georgia,serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --latin:"Inter","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --display:"Instrument Serif","Times New Roman",Georgia,serif;
  /* 节奏 */
  --pad-x:80px;
  --sec-y:170px;
  --max:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.9;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
canvas,svg{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure{margin:0}
::selection{background:var(--seal);color:#fff}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.sec--fog{background:var(--fog)}
.sec--nt{padding-top:0}
.hr{height:1px;background:var(--line-3);border:0}
.hr--q{background:var(--line)}
/* 站内锚点跳转时避开粘顶导航 */
section[id]{scroll-margin-top:104px}

/* ---------- typography ---------- */
.eyebrow{
  margin:0;font-size:13px;line-height:1;color:var(--seal);
  letter-spacing:.02em;font-family:var(--sans);
}
.h-hero{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(46px,6.6vw,96px);line-height:1.16;letter-spacing:.005em;
}
.h-cta{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,5vw,72px);line-height:1.3;
}
.h-sec{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.5vw,36px);line-height:1.62}
.h-page{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.2vw,60px);line-height:1.4}
.h-big{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.7vw,68px);line-height:1.28}
.lede{font-size:19px;line-height:2;color:var(--g2);max-width:820px}
.txt{font-size:16px;line-height:2.1;color:var(--g2)}
.u{color:var(--seal)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:0;cursor:pointer;background:var(--ink);color:#fff;
  font-family:var(--sans);font-size:15px;line-height:1;
  padding:18px 40px;border-radius:999px;white-space:nowrap;
  transition:opacity .18s var(--ease);
}
.btn:hover{opacity:.82}
.btn:focus-visible{outline:2px solid var(--seal);outline-offset:3px}
.btn--nav{font-size:13px;padding:11px 24px}
.btn--seal{background:var(--seal)}
.btn--sm{font-size:14px;padding:14px 26px}
.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:15px;color:var(--ink);transition:gap .18s var(--ease);
}
.link-arrow:hover{gap:16px}
.link-arrow svg{flex:none;overflow:visible}
.link-plain{font-size:14px;color:var(--g2);transition:color .18s var(--ease)}
.link-plain:hover{color:var(--ink)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:88px}
.brand{display:flex;align-items:baseline;gap:12px;flex:none}
.brand__cn{font-family:var(--serif);font-size:19px;font-weight:500;letter-spacing:.01em}
.brand__en{font-family:var(--latin);font-size:12px;color:var(--g3);letter-spacing:.06em}
.nav__links{display:flex;align-items:center;gap:40px}
.nav__links a:not(.btn){font-size:14px;color:var(--g2);transition:color .18s var(--ease)}
.nav__links a:not(.btn):hover{color:var(--ink)}
.nav__links a[aria-current="page"]{color:var(--ink)}
.nav__toggle{
  display:none;border:0;background:none;cursor:pointer;
  font-family:var(--sans);font-size:14px;color:var(--ink);padding:8px 0;
}

/* ---------- hero ---------- */
.hero{padding-top:150px;padding-bottom:120px;background:var(--paper)}
.hero__in{display:flex;flex-direction:column;gap:34px}
.hero .eyebrow{color:var(--g3)}
.hero__lede{font-size:19px;line-height:2;color:var(--g2);max-width:660px}
.hero__act{display:flex;align-items:center;gap:40px;flex-wrap:wrap}

/* ---------- CG band ---------- */
.cg-band{max-width:var(--max);margin:0 auto;background:var(--paper)}
.cg-band canvas{width:100%;height:auto}
.cg-cap{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding-top:30px;font-size:12px;line-height:1.7;color:var(--g3);
}
.cg-cap span:last-child{text-align:right}

/* ---------- page head ---------- */
.pagehead{padding-top:150px;padding-bottom:110px;background:var(--paper)}
.pagehead__in{display:flex;flex-direction:column;gap:34px}

/* ---------- statement (理念) ---------- */
.stmt__in{display:flex;flex-direction:column;gap:56px}
.stmt__body{display:flex;gap:130px;align-items:flex-start}
.stmt__big{flex:none}
.stmt__text{flex:1;display:flex;flex-direction:column;gap:26px}
.stmt__text p{font-size:16px;line-height:2.15;color:var(--g2)}

/* ---------- problem / generic head+body ---------- */
.pb{display:flex;flex-direction:column;gap:84px}
.pb__head{display:flex;gap:140px;align-items:flex-start}
.pb__col{flex:none;width:470px;display:flex;flex-direction:column;gap:26px}
.pb__body{flex:1;font-size:16px;line-height:2.1;color:var(--g2)}

/* ---------- numbered rows ---------- */
.rows{display:flex;flex-direction:column}
.row{display:flex;gap:70px;padding:44px 0}
.row + .row{border-top:1px solid var(--line)}
.row__n{flex:none;width:60px;font-size:13px;line-height:1.7;color:var(--seal);font-family:var(--latin)}
.row__body{flex:1;display:flex;flex-direction:column;gap:16px}
.row__body h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2vw,26px);line-height:1.55}
.row__body p{font-size:16px;line-height:2.05;color:var(--g2)}

/* ---------- capability grid ---------- */
.cap{display:flex;flex-direction:column;gap:76px}
.cap .h-sec{max-width:22em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 96px}
.grid2--pt{padding-top:56px}
.grid2 > div{display:flex;flex-direction:column;gap:18px}
.grid2 h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2vw,24px);line-height:1.55}
.grid2 p{font-size:15px;line-height:2.05;color:var(--g2)}
.cap__more{padding-top:56px}

/* ---------- chain (授权链路) ---------- */
.chain{display:flex;flex-direction:column;gap:76px}
.chain__rule{height:1px;background:var(--line-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;padding-top:46px}
.step{display:flex;flex-direction:column;gap:16px}
.step__n{font-size:12px;line-height:1.6;color:var(--seal);font-family:var(--latin)}
.step__t{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.9vw,24px);line-height:1.5}
.step__d{font-size:15px;line-height:1.95;color:var(--g2)}
.cg2 canvas{width:100%;height:auto}

/* ---------- scenario rows ---------- */
.sc{display:flex;flex-direction:column;gap:70px}
.sc-list{display:flex;flex-direction:column}
.sc-row{display:flex;align-items:center;gap:80px;padding:44px 0}
.sc-row + .sc-row{border-top:1px solid var(--line-3)}
.sc-row__n{flex:none;width:360px;font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.9vw,24px);line-height:1.55}
.sc-row__d{flex:1;font-size:16px;line-height:2.05;color:var(--g2)}
.sc-row__a{flex:none;color:var(--g3);transition:transform .24s var(--ease),color .24s var(--ease)}
.sc-row:hover .sc-row__a{transform:translateX(6px);color:var(--seal)}

/* ---------- research rows ---------- */
.rs{display:flex;flex-direction:column;gap:70px}
.rs-list{display:flex;flex-direction:column}
.rs-row{display:flex;align-items:center;gap:60px;padding:36px 0}
.rs-row + .rs-row{border-top:1px solid var(--line)}
.rs-row__t{flex:1;font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.8vw,22px);line-height:1.6;transition:color .18s var(--ease)}
.rs-row:hover .rs-row__t{color:var(--seal)}
.rs-row__m{flex:none;width:180px;font-size:13px;color:var(--g3);font-family:var(--latin)}
.rs__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}

/* ---------- CTA ---------- */
.cta{padding-top:190px;padding-bottom:190px;background:var(--paper)}
.cta__in{display:flex;flex-direction:column;align-items:center;gap:34px;text-align:center}
.cta__note{font-size:17px;line-height:2;color:var(--g2);max-width:760px}
.cta__fine{font-size:12px;line-height:1.8;color:var(--g3)}

/* ---------- form ---------- */
.form{
  display:flex;align-items:center;
  width:540px;max-width:100%;padding:7px;
  border:1px solid var(--line-3);border-radius:999px;background:var(--paper);
}
.form input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:var(--sans);font-size:15px;color:var(--ink);padding:0 12px 0 24px;
}
.form input::placeholder{color:var(--g3)}
.form button{
  flex:none;border:0;cursor:pointer;height:54px;padding:0 34px;
  border-radius:999px;background:var(--seal);color:#fff;
  font-family:var(--sans);font-size:15px;line-height:1;
  transition:opacity .18s var(--ease);
}
.form button:hover{opacity:.86}
.form__msg{font-size:12.5px;color:var(--seal);min-height:1.6em}

/* ---------- approach list (配合方式 / 原则 / 方法) ---------- */
.list{display:flex;flex-direction:column}
.list__row{display:flex;gap:60px;padding:36px 0}
.list__row + .list__row{border-top:1px solid var(--line-3)}
.list__row h3{flex:none;width:340px;font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.8vw,22px);line-height:1.6}
.list__row p{flex:1;font-size:15px;line-height:2.05;color:var(--g2)}

/* ---------- about two-column ---------- */
.about__cols{display:flex;gap:100px;align-items:flex-start}
.about__text{flex:1;display:flex;flex-direction:column;gap:26px}
.about__text p{font-size:16px;line-height:2.12;color:var(--body)}
.about__facts{flex:none;width:360px;display:flex;flex-direction:column;gap:22px}
.about__facts .t{font-size:13px;color:var(--g3)}
.about__facts .v{font-size:15px;line-height:2;color:var(--g2)}

/* ---------- contact columns ---------- */
.cols3{display:flex;gap:80px;align-items:flex-start}
.cols3 > div{flex:1;display:flex;flex-direction:column;gap:16px}
.cols3 h3{font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.8vw,22px);line-height:1.6}
.cols3 p{font-size:15px;line-height:2.1;color:var(--g2)}
.cols3 .mail{font-family:var(--latin);font-size:14px;color:var(--seal);transition:opacity .18s var(--ease)}
.cols3 .mail:hover{opacity:.75}

/* ---------- footer ---------- */
.foot{background:var(--fog);padding-top:110px}
.foot__top{display:flex;justify-content:space-between;gap:40px}
.foot__brand{flex:0 1 380px;min-width:0;display:flex;flex-direction:column;gap:16px}
.foot__brand .cn{font-family:var(--serif);font-size:22px;font-weight:500}
.foot__brand .en{font-family:var(--latin);font-size:12px;color:var(--g3);letter-spacing:.06em}
.foot__brand .tag{font-size:14px;line-height:1.95;color:var(--g2)}
.foot__cols{display:flex;flex:none;gap:110px}
.foot__col{width:130px;display:flex;flex-direction:column;gap:18px}
.foot__col .t{font-size:13px;color:var(--g3)}
.foot__col a{font-size:14px;color:var(--g2);transition:color .18s var(--ease)}
.foot__col a:hover{color:var(--ink)}
.foot__rule{margin-top:96px;height:1px;background:var(--line-2)}
.foot__meta{display:flex;justify-content:space-between;gap:24px;padding-top:26px;font-size:12px;color:var(--g3)}
.foot__word{
  margin-top:76px;padding-bottom:44px;text-align:center;
  font-family:var(--display);font-size:clamp(56px,11.7vw,168px);line-height:1.05;
  color:var(--wordmark);letter-spacing:.005em;user-select:none;
}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;font-size:14px;
}
.skip:focus{left:0}

/* ---------- section panel（标签 + 标题 + 列表，间距 56） ---------- */
.panel{display:flex;flex-direction:column;gap:56px}
.panel .h-sec{max-width:26em}

/* ---------- 五层链路 ---------- */
.steps--5{grid-template-columns:repeat(5,1fr)}

/* ---------- 无序号的两栏列表（议题名 + 描述） ---------- */
.rows--t .row__n{
  width:340px;color:var(--ink);
  font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2vw,24px);line-height:1.55;
}
.rows--t .row__body{gap:0}
.rows--t .row__body p{font-size:16px;line-height:2.05}

/* ---------- 场景清单（名 / 描述 / 边界） ---------- */
.scene-list{display:flex;flex-direction:column;gap:0}
.scene-row{display:flex;gap:80px;padding:44px 0}
.scene-row + .scene-row{border-top:1px solid var(--line-3)}
.scene-row__n{
  flex:none;width:340px;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,1.9vw,24px);line-height:1.55;
}
.scene-row__d{flex:1;font-size:16px;line-height:2.05;color:var(--g2)}
.scene-row__b{flex:none;width:260px;font-size:13px;line-height:1.9;color:var(--g3)}

/* ---------- 分离式表单（白胶囊输入 + 墨黑按钮） ---------- */
.form2{display:flex;align-items:center;gap:12px;width:100%}
.form2 input{
  flex:1;min-width:0;height:52px;border:0;border-radius:999px;
  background:var(--paper);padding:0 26px;outline:none;
  font-family:var(--sans);font-size:15px;color:var(--ink);
}
.form2 input::placeholder{color:var(--g3)}
.form2 button{
  flex:none;height:52px;padding:0 30px;border:0;cursor:pointer;
  border-radius:999px;background:var(--ink);color:#fff;
  font-family:var(--sans);font-size:14px;line-height:1;
  transition:opacity .18s var(--ease);
}
.form2 button:hover{opacity:.82}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms !important}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  :root{--pad-x:48px;--sec-y:120px}
  .stmt__body{gap:64px}
  .pb__head{gap:64px}
  .pb__col{width:380px}
  .sc-row__n{width:280px}
  .about__cols{gap:64px}
  .foot__cols{gap:64px}
  .foot__brand{flex-basis:300px}
}

@media (max-width:960px){
  :root{--pad-x:32px;--sec-y:96px}
  .nav__toggle{display:block}
  .nav__links{
    position:absolute;left:0;right:0;top:88px;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px var(--pad-x) 24px;
    display:none;
  }
  .nav.is-open .nav__links{display:flex}
  .nav__links a:not(.btn){padding:14px 0;width:100%;font-size:15px}
  .nav__links .btn{margin-top:14px}
  .nav{position:sticky}
  .nav__in{position:relative}

  .hero{padding-top:96px;padding-bottom:80px}
  .pagehead{padding-top:96px;padding-bottom:72px}
  .stmt__body{flex-direction:column;gap:40px}
  .pb__head{flex-direction:column;gap:36px}
  .pb__col{width:auto}
  .grid2{grid-template-columns:1fr;gap:40px 0}
  .grid2--pt{padding-top:40px}
  .steps{grid-template-columns:1fr 1fr;gap:40px}
  .row{flex-direction:column;gap:20px;padding:36px 0}
  .row__n{width:auto}
  .sc-row{flex-direction:column;align-items:flex-start;gap:16px;padding:36px 0}
  .sc-row__n{width:auto}
  .sc-row__a{display:none}
  .rs-row{flex-direction:column;align-items:flex-start;gap:10px;padding:30px 0}
  .rs-row__m{width:auto}
  .rs__head{flex-direction:column;align-items:flex-start;gap:14px}
  .list__row{flex-direction:column;gap:12px;padding:30px 0}
  .list__row h3{width:auto}
  .about__cols{flex-direction:column;gap:48px}
  .about__facts{width:auto}
  .cols3{flex-direction:column;gap:44px}
  .cols3 > div{width:100%}
  .foot__top{flex-direction:column;gap:64px}
  .foot__brand{width:auto}
  .foot__cols{gap:48px;flex-wrap:wrap}
  .foot__word{margin-top:56px;padding-bottom:32px}
}

@media (max-width:960px){
  .steps--5{grid-template-columns:1fr 1fr}
  .rows--t .row__n{width:auto}
  .scene-row{flex-direction:column;align-items:flex-start;gap:12px;padding:36px 0}
  .scene-row__n{width:auto}
  .scene-row__b{width:auto}
}

@media (max-width:600px){
  :root{--pad-x:24px;--sec-y:76px}
  .cta{padding-top:120px;padding-bottom:120px}
  .btn{width:100%}
  .hero__act{flex-direction:column;align-items:stretch;gap:20px}
  .hero__act .link-arrow{justify-content:center}
  .cta__in .btn{width:auto}
  .steps{grid-template-columns:1fr}
  .cg-cap{flex-direction:column;align-items:flex-start;gap:8px}
  .cg-cap span:last-child{text-align:left}
  .foot__meta{flex-direction:column;gap:8px}
  .form2{flex-direction:column;align-items:stretch;gap:10px}
  .form2 button{width:100%}
}