:root {
  color-scheme: light;
  --ink: #242936;
  --muted: #697386;
  --cream: #fff9ed;
  --paper: #ffffff;
  --yellow: #ffd968;
  --orange: #fb9833;
  --purple: #9f74ed;
  --cyan: #53bebd;
  --blue: #6389ee;
  --line: #ebe6dc;
  --shadow: 0 18px 52px rgb(90 70 30 / 13%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 4% 56%, #fff2c8 0 5%, transparent 5.2%), var(--cream);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  line-height: 1.8;
}

.hero {
  min-height: 248px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(115deg, #fff4c9, var(--yellow));
}

.hero__content, .policy-shell, .footer { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }

.hero__content { position: relative; z-index: 1; }
.eyebrow { margin: 0; color: #936617; font-size: .92rem; font-weight: 700; letter-spacing: .14em; }
h1 { margin: 3px 0 0; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.2; letter-spacing: .04em; }
.hero__summary { margin: 10px 0 0; font-size: 1.08rem; }

.hero__decor span { position: absolute; display: block; box-shadow: 0 10px 22px rgb(89 67 20 / 20%); }
.puzzle { width: 76px; height: 76px; border-radius: 19px; transform: rotate(14deg); }
.puzzle::before, .puzzle::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.puzzle::before { width: 27px; height: 27px; left: -12px; top: 24px; }
.puzzle::after { width: 27px; height: 27px; right: 25px; bottom: -12px; }
.puzzle--cyan { top: 88px; right: 30%; background: var(--cyan); }
.puzzle--purple { right: 11%; bottom: -36px; background: var(--purple); }
.screw { border-radius: 24px; background: linear-gradient(135deg, #ffdf77, #ec9e2f); transform: rotate(20deg); }
.screw::after { content: "+"; position: absolute; inset: 12px; display: grid; place-items: center; border: 3px solid #a26617; border-radius: 50%; color: #a26617; font: 800 32px/1 Arial, sans-serif; }
.screw--large { width: 126px; height: 126px; top: 27px; right: 17%; }
.screw--small { width: 31px; height: 31px; top: 76px; right: 6%; }
.screw--small::after { inset: 4px; border-width: 1px; font-size: 13px; }

.policy-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 42px; margin-top: -30px; position: relative; z-index: 2; }
.policy-nav, .policy-content { background: var(--paper); box-shadow: var(--shadow); border-radius: 24px; }
.policy-nav { align-self: start; position: sticky; top: 24px; padding: 21px 16px; }
.policy-nav a { display: block; padding: 12px 14px; color: #555e6d; text-decoration: none; border-radius: 12px; border-bottom: 1px solid var(--line); font-size: .93rem; }
.policy-nav a:hover, .policy-nav a:focus { background: #fff7e8; color: #b96b16; outline: none; }
.policy-nav .policy-nav__brand { color: var(--ink); font-weight: 800; border: 0; padding-top: 4px; }
.policy-content { padding: clamp(24px, 5vw, 56px); }
.policy-content section + section { margin-top: 43px; }
.policy-content h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: clamp(1.3rem, 2.4vw, 1.65rem); line-height: 1.35; }
.policy-content p, .policy-content li { max-width: 800px; }
.policy-content ol, .policy-content ul { padding-left: 1.45em; }
.policy-content li + li { margin-top: 12px; }
.policy-meta { color: var(--muted); font-size: .9rem; }
.policy-intro { border-bottom: 1px solid var(--line); padding-bottom: 26px; }
.section-icon { display: inline-grid; width: 35px; height: 35px; place-items: center; border-radius: 50%; color: #fff; font-size: .95rem; box-shadow: 0 4px 8px rgb(30 30 30 / 12%); }
.section-icon--orange { background: var(--orange); }
.section-icon--purple { background: var(--purple); }
.section-icon--cyan { background: var(--cyan); }
.section-icon--blue { background: var(--blue); }
.contact-card { padding: 26px; border: 1px solid #bce8e4; border-radius: 18px; background: linear-gradient(135deg, #f5fffd, #f5f9ff); }
.contact-card a { color: #127f80; font-weight: 700; }
.contact-card__hint { color: var(--muted); font-size: .88rem; }
.footer { padding: 42px 0; color: var(--muted); font-size: .88rem; text-align: center; }

@media (max-width: 820px) {
  .hero { min-height: 220px; }
  .hero__decor { opacity: .52; }
  .screw--large { right: 7%; }
  .puzzle--cyan { right: 35%; }
  .policy-shell { display: block; margin-top: -17px; }
  .policy-nav { position: static; display: flex; gap: 7px; margin-bottom: 18px; overflow-x: auto; padding: 10px; white-space: nowrap; }
  .policy-nav a { border: 0; padding: 8px 10px; }
  .policy-nav .policy-nav__brand { display: none; }
}

@media (max-width: 520px) {
  .hero__content, .policy-shell, .footer { width: min(100% - 28px, 1120px); }
  .hero__summary { max-width: 240px; }
  .puzzle--cyan { display: none !important; }
  .screw--large { width: 98px; height: 98px; top: 46px; }
  .policy-content { border-radius: 18px; }
  .policy-content ol, .policy-content ul { padding-left: 1.2em; }
}