/* 爪遇 · 品牌内容页（关于 / 招商）共享样式 —— 暖白编辑风
   注意：工具页（下载/邀请/协议等）仍走 page.css，两套不要混用 */
:root {
  --bg: #FFFFFF;
  --bg2: #F7F5F2;
  --ink: #221B14;
  --ink2: #5D554B;
  --ink3: #94897C;
  --line: #ECE6DF;
  --brand: #FF6A2B;
  --brand-deep: #EE5716;
  --brand-text: #D9490B;
  --brand-tint: #FFF1E8;
  --dark: #181410;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei","Source Han Sans SC","Noto Sans SC",sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
.wrap { max-width:1160px; margin:0 auto; padding:0 40px; }

/* ---- 文字层级 ---- */
.eyebrow { font-size:13px; font-weight:600; color:var(--brand-text); letter-spacing:.18em; margin-bottom:14px; }
.h1 { margin:0 0 22px; font-size:clamp(34px,4.8vw,52px); line-height:1.24; letter-spacing:-.02em; font-weight:600; }
.h2 { margin:0 0 14px; font-size:clamp(26px,3.4vw,36px); line-height:1.28; letter-spacing:-.015em; font-weight:600; }
.lead { margin:0; font-size:16.5px; line-height:1.8; color:var(--ink2); }

/* ---- 按钮 ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 26px; border-radius:12px; font-size:15px; font-weight:600;
  transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn-primary { background:var(--brand); color:#221B14; }
.btn-primary:hover { background:var(--brand-deep); }
.btn-ghost { background:var(--bg); color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover { border-color:var(--ink3); }

/* ---- 顶栏 ---- */
#nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .25s ease; }
.nav-inner { max-width:1160px; margin:0 auto; padding:15px 40px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:600; letter-spacing:-.02em; }
.brand img { width:34px; height:34px; border-radius:8px; }
.nav-links { display:flex; align-items:center; gap:30px; }
.navlink { font-size:14.5px; font-weight:500; color:var(--ink2); transition:color .15s ease; }
.navlink:hover { color:var(--ink); }
.nav-links a.on { color:var(--ink); font-weight:600; }
.navcta { padding:9px 20px; border-radius:10px; background:var(--brand); color:#221B14; font-size:14px; font-weight:600; transition:background-color .15s ease; }
.navcta:hover { background:var(--brand-deep); }
.hamb { display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer; padding:11px 9px; flex-direction:column; justify-content:space-between; }
.hamb span { display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.hamb.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.hamb.open span:nth-child(2){ opacity:0; }
.hamb.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }
.mobile-menu { display:none; flex-direction:column; padding:6px 22px 20px; border-top:1px solid var(--line); background:rgba(255,255,255,.98); }
.mobile-menu.open { display:flex; }
.mobile-menu a { padding:14px 4px; font-size:16px; font-weight:500; color:var(--ink2); border-bottom:1px solid var(--line); }
.mobile-menu a.on { color:var(--brand-text); }
.mobile-menu a.mm-cta { margin-top:14px; border:0; text-align:center; background:var(--brand); color:#221B14; font-weight:600; border-radius:12px; padding:14px; }

/* ---- 区块 ---- */
section { padding:88px 0; }
.band { background:var(--bg2); }
.sec-head { max-width:640px; margin:0 auto 48px; text-align:center; }
.sec-head .lead { font-size:16px; }
.page-hero { padding-block:84px 76px; text-align:center; }
.page-hero .lead { max-width:680px; margin:0 auto; }

/* ---- 卡片 ---- */
.grid { display:grid; gap:16px; }
.g4 { grid-template-columns:repeat(4,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g2 { grid-template-columns:repeat(2,1fr); }
.card { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:26px 24px; }
.card h3 { margin:0 0 7px; font-size:17px; font-weight:600; }
.card p { margin:0; font-size:14px; line-height:1.7; color:var(--ink2); }
.ico { width:40px; height:40px; border-radius:12px; background:var(--brand-tint); color:var(--brand-text);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.check { display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--ink2); }
.check .ck { flex:none; width:22px; height:22px; border-radius:7px; background:var(--brand-tint); color:var(--brand-text);
  display:flex; align-items:center; justify-content:center; margin-top:3px; }

/* ---- 联系区 ---- */
.contact-band { background:var(--bg2); }
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; text-align:left; }
.contact-card { background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:20px 22px; }
.contact-card .lab { display:flex; align-items:center; gap:8px; color:var(--brand-text); font-size:12.5px; font-weight:600; margin-bottom:7px; }
.contact-card .val { color:var(--ink); font-size:15.5px; font-weight:600; line-height:1.55; }
.contact-card a.val:hover { color:var(--brand-text); }

/* ---- 滚动进场（区块淡入 + 网格错峰，一次性无循环） ---- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
.stagger > * { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.stagger.in > * { opacity:1; transform:none; }
.stagger.in > *:nth-child(2) { transition-delay:.08s; }
.stagger.in > *:nth-child(3) { transition-delay:.16s; }
.stagger.in > *:nth-child(4) { transition-delay:.24s; }
@keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.hero-anim { opacity:0; animation:fadeUp .7s ease .05s both; }
.hero-anim.d2 { animation-delay:.18s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal, .stagger > * { opacity:1 !important; transform:none !important; transition:none !important; }
  .hero-anim { opacity:1 !important; animation:none !important; }
}

/* ---- 桌面字阶与节奏 ---- */
@media (min-width: 921px) {
  .h2 { font-size:clamp(30px,3.2vw,42px); }
  .sec-head { max-width:700px; }
  section { padding:104px 0; }
}

/* ---- 响应式 ---- */
@media (max-width: 920px) {
  .wrap { padding:0 22px; }
  .nav-inner { padding:13px 22px; }
  .nav-links { display:none; }
  .hamb { display:flex; }
  section { padding:60px 0; }
  .page-hero { padding-block:56px 52px; }
  .g4, .g3, .g2 { grid-template-columns:1fr; }
}
