@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#1B2A4A;
  --sun:#F2B705;
  --paper:#F5F6F8;
  --white:#ffffff;
  --line:#D7DCE5;
  --soft:#EDEFF4;
  --mute:#B9C2D6;
  --radius:28px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.65 'IBM Plex Sans',system-ui,-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  letter-spacing:.2px;
}

img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 16px}
h1,h2,h3,h4{line-height:1.25;font-weight:700}

/* ---------- 头部 ---------- */
.site-head{
  background:var(--white);
  border-bottom:2px solid var(--ink);
}

.brand-row{
  max-width:1120px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;
  text-decoration:none;
  color:var(--ink);
}

.mark{
  width:34px;
  height:34px;
  border:2px solid var(--ink);
  border-radius:4px;
  background:var(--sun);
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:18px;
  overflow:hidden;
  flex:0 0 auto;
}
.mark img{width:100%;height:100%;object-fit:cover}

.brand-name{
  font-size:21px;
  font-weight:700;
  letter-spacing:2px;
}

.contact{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:6px 12px;
  border:2px solid var(--ink);
  border-radius:4px;
  font-size:16px;
  font-weight:500;
  color:var(--ink);
  background:var(--paper);
}
.contact b{
  background:var(--sun);
  border-radius:2px;
  padding:0 5px;
  font-weight:700;
}

.nav{
  background:var(--ink);
  position:sticky;
  top:0;
  z-index:30;
}

.nav p{
  max-width:1120px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:stretch;
  overflow-x:auto;
  scrollbar-width:none;
}
.nav p::-webkit-scrollbar{display:none}

.nav a{
  display:flex;
  align-items:center;
  min-height:50px;
  padding:12px 14px;
  color:var(--paper);
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  white-space:nowrap;
  border-right:1px solid rgba(245,246,248,.22);
  transition:background-color 160ms ease,color 160ms ease;
}
.nav a:last-child{border-right:0}
.nav a:hover,.nav a:focus-visible{
  background:var(--sun);
  color:var(--ink);
  outline:none;
}

/* ---------- 首屏 ---------- */
.hero{
  max-width:1120px;
  margin:0 auto;
  padding:30px 20px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:30px;
  align-items:center;
  min-height:45vh;
}

.hero-txt{min-width:0}

.eyebrow{
  display:inline-block;
  background:var(--sun);
  border:2px solid var(--ink);
  border-radius:4px;
  padding:3px 10px;
  font-size:16px;
  font-weight:600;
  letter-spacing:1px;
}

.hero h1{
  margin:14px 0 22px;
  font-size:clamp(30px,4.6vw,50px);
  line-height:1.1;
  letter-spacing:-.5px;
}

.btn{
  display:inline-flex;
  align-items:center;
  min-height:50px;
  padding:12px 26px;
  background:var(--ink);
  color:var(--sun);
  border:2px solid var(--ink);
  border-radius:4px;
  font-size:16px;
  font-weight:700;
  letter-spacing:2px;
  text-decoration:none;
  transition:background-color 160ms ease,color 160ms ease;
}
.btn:hover,.btn:focus-visible{
  background:var(--sun);
  color:var(--ink);
  outline:none;
}

.hero-fig{
  margin:0;
  border:2px solid var(--ink);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--soft);
  aspect-ratio:4/3;
}
.hero-fig img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- 主体骨架 ---------- */
.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:8px 20px 56px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:32px;
  align-items:start;
}

.body-sec{min-width:0}

/* ---------- 正文 ---------- */
.prose{
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:26px 28px 34px;
  overflow-wrap:break-word;
}

.prose > article{
  scroll-margin-top:78px;
  padding-bottom:6px;
}
.prose > article + article{
  border-top:2px solid var(--line);
  margin-top:34px;
  padding-top:6px;
}

.prose h2{
  margin:34px 0 0;
  font-size:clamp(22px,2.6vw,28px);
  letter-spacing:.4px;
  color:var(--ink);
}
.prose > article > h2:first-child{margin-top:24px}

.prose h3{
  margin:26px 0 0;
  font-size:20px;
  color:var(--ink);
}

.prose h4{margin:20px 0 0;font-size:17px}

hr{
  border:0;
  height:4px;
  width:64px;
  background:var(--sun);
  margin:12px 0 20px;
}

.prose p{line-height:1.85;margin:0 0 16px}

.prose a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--sun);
  text-decoration-thickness:2px;
  text-underline-offset:4px;
  transition:background-color 160ms ease;
}
.prose a:hover{background:var(--sun)}

.prose ul,.prose ol{padding-left:24px;margin:0 0 18px}
.prose li{margin:8px 0;line-height:1.8}
.prose li::marker{color:var(--ink);font-weight:700}

.prose blockquote{
  margin:22px 0;
  padding:14px 18px;
  border-left:6px solid var(--sun);
  background:#FBF3DA;
  border-radius:0 var(--radius) var(--radius) 0;
}
.prose blockquote p:last-child{margin-bottom:0}

.prose img{
  border:2px solid var(--ink);
  border-radius:var(--radius);
  margin:18px 0;
  height:auto;
}

.prose table{
  width:100%;
  border-collapse:collapse;
  font-size:16px;
  margin:18px 0;
}
.prose th,.prose td{
  border:1px solid var(--line);
  padding:10px 12px;
  text-align:left;
}
.prose th{background:var(--soft);font-weight:700}

.prose pre{
  overflow-x:auto;
  background:var(--soft);
  border:2px solid var(--line);
  border-radius:20px;
  padding:14px 16px;
  font-size:16px;
}

.prose strong,.prose b{font-weight:700}

/* ---------- 侧栏 ---------- */
.side{
  position:sticky;
  top:74px;
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:20px 20px 12px;
}

.side h2{
  margin:0;
  font-size:20px;
  letter-spacing:2px;
}

.side ul{
  list-style:none;
  margin:0;
  padding:0;
}

.side li + li{border-top:1px solid var(--line)}

.side a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:8px 4px;
  font-size:16px;
  font-weight:500;
  text-decoration:none;
  color:var(--ink);
  transition:color 160ms ease,background-color 160ms ease;
}
.side a:hover,.side a:focus-visible{
  background:var(--sun);
  color:var(--ink);
  outline:none;
}

/* ---------- 页脚 ---------- */
.foot{
  background:var(--ink);
  color:var(--paper);
  padding:44px 20px 28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.foot p{margin:0}

.foot-cta{
  grid-column:1/-1;
  border:2px solid var(--sun);
  border-radius:var(--radius);
  padding:22px 24px;
}
.foot-cta a{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:14px;
  text-decoration:none;
  color:var(--sun);
  transition:opacity 160ms ease;
}
.foot-cta a:hover{opacity:.75}
.foot-cta b{font-size:clamp(24px,4vw,34px);letter-spacing:2px}
.foot-cta span{font-size:16px;color:var(--paper)}

.foot-about{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:16px;
  color:var(--mute);
}
.foot-about b{
  font-size:19px;
  color:var(--paper);
  letter-spacing:2px;
}

.foot-links{
  display:flex;
  flex-wrap:wrap;
  gap:0 18px;
}
.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:6px 0;
  font-size:16px;
  color:var(--paper);
  text-decoration:none;
  transition:color 160ms ease;
}
.foot-links a:hover{color:var(--sun);text-decoration:underline;text-underline-offset:4px}

.foot-copy{
  grid-column:1/-1;
  display:block;
  border-top:2px solid rgba(245,246,248,.25);
  padding-top:16px;
  font-size:16px;
  color:var(--mute);
}

/* ---------- 动效 ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform:translateY(14px);
    transition:opacity 420ms ease,transform 420ms ease;
  }
  .reveal.in{opacity:1;transform:none}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ---------- 断点 ---------- */
@media (min-width:1160px){
  .foot{
    padding-left:calc((100% - 1120px)/2);
    padding-right:calc((100% - 1120px)/2);
  }
}

@media (max-width:900px){
  .hero{
    grid-template-columns:1fr;
    min-height:0;
    gap:22px;
  }
  .hero-fig{aspect-ratio:16/10}
  .wrap{grid-template-columns:1fr;gap:24px;padding-bottom:40px}
  .side{position:static;order:2}
  .foot{grid-template-columns:1fr}
  .foot-cta,.foot-copy{grid-column:auto}
}

@media (max-width:600px){
  body{font-size:17px}
  .brand-row{padding:12px 14px}
  .brand-name{font-size:19px;letter-spacing:1px}
  .contact{font-size:16px;padding:6px 10px}
  .nav p{padding:0 10px}
  .nav a{padding:12px 12px}
  .hero{padding:22px 14px}
  .wrap{padding:6px 14px 36px}
  .prose{padding:20px 18px 26px;border-radius:22px}
  .hero-fig{border-radius:22px}
  .side{border-radius:22px;padding:16px 16px 10px}
  .foot{padding:32px 14px 24px;gap:18px}
  .foot-cta{padding:18px 18px;border-radius:22px}
}

button[aria-expanded]{min-width:44px;min-height:44px}