:root {
  --ink: #17312b;
  --muted: #61706b;
  --green: #0c5947;
  --green-deep: #073c32;
  --green-soft: #eaf4ef;
  --gold: #d8a72d;
  --red: #c94d3d;
  --cream: #faf7ef;
  --white: #fff;
  --line: #dfe8e3;
  --shadow: 0 22px 60px rgba(15, 57, 47, .12);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid rgba(17, 63, 52, .1);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(16px);
}
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 6px 16px rgba(14, 75, 61, .18); }
.brand span { display: grid; line-height: 1.25; }
.brand strong { font-size: 17px; letter-spacing: .03em; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 11px; }
nav { display: flex; gap: 26px; font-size: 14px; }
nav a { position: relative; text-decoration: none; color: #40534d; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 2px; background: var(--green); transition: right .2s ease; }
nav a:hover::after { right: 0; }

.hero { position: relative; overflow: hidden; padding: 84px 0 92px; color: #fff; background: linear-gradient(135deg, #073c32 0%, #0c5947 56%, #18715b 100%); }
.hero-pattern { position: absolute; inset: 0; opacity: .16; background-image: radial-gradient(circle at 16% 24%, #fff 0 2px, transparent 3px), radial-gradient(circle at 83% 72%, #d8a72d 0 3px, transparent 4px); background-size: 90px 90px, 140px 140px; }
.hero::before { content: ""; position: absolute; width: 540px; height: 540px; right: -230px; top: -260px; border: 80px solid rgba(255,255,255,.05); border-radius: 50%; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: center; }
.eyebrow { margin: 0 0 12px; color: var(--green); font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.hero .eyebrow { color: #f4d473; }
.hero h1 { margin: 0; font-size: clamp(52px, 7vw, 84px); line-height: 1.06; letter-spacing: -.03em; }
.alias { display: inline-block; margin: 18px 0 0; padding: 6px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #dcebe7; font-size: 14px; }
.lead { max-width: 720px; margin: 24px 0 0; color: #e3efeb; font-size: 18px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; padding: 0 24px; border-radius: 12px; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #3b2c09; background: linear-gradient(135deg, #f5d66e, #d8a72d); box-shadow: 0 12px 30px rgba(17, 29, 25, .25); }
.button-light { color: #fff; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.09); }
.download-note { margin: 14px 0 0; color: #c7dbd5; font-size: 13px; }
.trust-list { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 26px 0 0; padding: 0; color: #d7e8e3; font-size: 13px; list-style: none; }
.trust-list li::before { content: "✓"; margin-right: 7px; color: #f4d473; font-weight: 900; }

.hero-card { display: grid; grid-template-columns: 130px 1fr; gap: 24px; align-items: start; padding: 34px; border: 1px solid rgba(255,255,255,.19); border-radius: 30px; background: rgba(255,255,255,.1); box-shadow: 0 30px 70px rgba(0, 26, 20, .25); backdrop-filter: blur(16px); }
.app-icon-wrap img { width: 130px; height: 130px; border: 6px solid rgba(255,255,255,.18); border-radius: 30px; object-fit: cover; }
.status-pill { display: inline-block; padding: 4px 10px; border-radius: 999px; color: #f8df8b; background: rgba(0,0,0,.16); font-size: 12px; }
.hero-card h2 { margin: 10px 0 2px; font-size: 27px; }
.hero-card > div > p { margin: 0; color: #cfe0db; font-size: 14px; }
.hero-card dl { grid-column: 1 / -1; margin: 8px 0 0; }
.hero-card dl div { display: grid; grid-template-columns: 88px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.13); font-size: 13px; }
.hero-card dt { color: #a9c5bd; }
.hero-card dd { margin: 0; color: #fff; }

.section { padding: 92px 0; scroll-margin-top: 72px; }
.section-tint { background: var(--cream); }
.section-heading { max-width: 760px; margin-bottom: 44px; }
.section-heading.centered { margin-right: auto; margin-left: auto; text-align: center; }
.section-heading h2, .contact-card h2, .compliance-grid h2 { margin: 0; font-size: clamp(32px, 4vw, 46px); line-height: 1.25; letter-spacing: -.02em; }
.section-heading > p:last-child { margin: 16px 0 0; color: var(--muted); font-size: 16px; }
.intro-grid { display: grid; grid-template-columns: .94fr 1.06fr; gap: 30px; align-items: stretch; }
.paper-card { padding: 40px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.intro-copy h3 { margin: 0 0 16px; font-size: 24px; }
.intro-copy p { margin: 0 0 16px; color: #53635e; }
.intro-copy p:last-child { margin-bottom: 0; }
.fact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.fact-card { position: relative; overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: #f8fbf9; }
.fact-card span { display: block; color: var(--gold); font-family: Georgia, serif; font-size: 32px; font-weight: 800; }
.fact-card h3 { margin: 10px 0 7px; font-size: 19px; }
.fact-card p { margin: 0; color: var(--muted); font-size: 14px; }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card { padding: 30px; border: 1px solid #e6e0d2; border-radius: 22px; background: #fff; }
.feature-icon { display: grid; width: 50px; height: 58px; place-items: center; border: 1px solid #d9d2bd; border-radius: 9px; color: var(--green); background: linear-gradient(145deg, #fff, #f2efe5); box-shadow: inset 0 0 0 5px #f9f7f0, 0 6px 14px rgba(79, 62, 18, .08); font-family: STKaiti, KaiTi, serif; font-size: 25px; font-weight: 800; }
.feature-card h3 { margin: 20px 0 7px; font-size: 20px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 14px; }

.flow-title { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 24px; }
.flow-title > div { max-width: 780px; }
.text-link { flex: none; padding-bottom: 7px; color: var(--green); font-weight: 800; text-decoration: none; }
.flow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.flow-card { position: relative; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 12px 34px rgba(17, 63, 52, .08); }
.step-number { position: absolute; z-index: 2; top: 10px; left: 10px; display: grid; width: 42px; height: 42px; place-items: center; border: 4px solid #fff; border-radius: 50%; color: #fff; background: var(--red); box-shadow: 0 6px 14px rgba(137, 44, 31, .22); font-weight: 900; }
.shot { display: grid; height: 305px; overflow: hidden; place-items: center; border-radius: 17px; background: #eef3f0; }
.shot img { width: 100%; height: 100%; object-fit: contain; }
.phone-shot { background: linear-gradient(145deg, #e5efe8, #f6efe3); }
.phone-shot img { width: auto; }
.landscape-shot img { object-fit: cover; }
.flow-card h3 { margin: 22px 0 6px; font-size: 21px; }
.flow-card p { margin: 0; color: var(--muted); font-size: 14px; }
.flow-summary { background: linear-gradient(150deg, #f7faf7, #edf5f1); }
.table-visual { position: relative; display: grid; height: 305px; overflow: hidden; place-items: center; border-radius: 17px; background: radial-gradient(circle, #188061 0 33%, #0d644d 34% 64%, #064535 65%); box-shadow: inset 0 0 0 12px rgba(255,255,255,.1); }
.table-center { display: grid; width: 145px; height: 145px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: #d8ede6; text-align: center; line-height: 1.5; }
.table-center strong { color: #f4d473; font-size: 17px; }
.tile { position: absolute; display: grid; width: 48px; height: 62px; place-items: center; border: 3px solid #efe9da; border-radius: 7px; color: var(--red); background: #fffdf7; box-shadow: 0 7px 14px rgba(0,0,0,.18); font-family: STKaiti, KaiTi, serif; font-size: 23px; font-weight: 800; }
.t1 { top: 18px; left: 31%; transform: rotate(-5deg); }.t2 { top: 18px; right: 31%; transform: rotate(5deg); }.t3 { bottom: 18px; left: 31%; transform: rotate(5deg); }.t4 { right: 31%; bottom: 18px; transform: rotate(-5deg); }
.flow-note { margin: 24px 0 0; padding: 14px 18px; border-left: 4px solid var(--gold); color: #53635e; background: #f9f6ec; font-size: 14px; }

.section-dark { color: #fff; background: #0a4035; }
.eyebrow.light { color: #f1d06a; }
.compliance-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: start; }
.compliance-lead { color: #c5dcd5; font-size: 17px; }
.compliance-list { display: grid; gap: 14px; }
.compliance-list article { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 20px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.06); }
.compliance-list article > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: #174133; background: #f1d06a; font-weight: 900; }
.compliance-list h3 { margin: 0 0 3px; font-size: 17px; }
.compliance-list p { margin: 0; color: #bdd4cd; font-size: 13px; }

.contact-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; padding: 52px; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg, #fff, #f5f9f7); box-shadow: var(--shadow); }
.contact-card > div > p:last-child { color: var(--muted); }
.contact-list { margin: 0; }
.contact-list div { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.contact-list dt { color: var(--muted); font-size: 14px; }
.contact-list dd { margin: 0; font-weight: 700; }
.contact-list a { color: var(--green); }

.site-footer { padding: 26px 0; color: #9db2ac; background: #062f27; font-size: 13px; }
.footer-wrap { display: flex; justify-content: space-between; gap: 20px; }
.footer-wrap p { margin: 0; }
.footer-wrap a { color: #c5d8d2; text-decoration: none; }

/* Legal and flow documents */
.document-page { background: #f3f6f4; }
.document-page .site-header { position: static; }
.document-hero { padding: 54px 0; color: #fff; background: linear-gradient(135deg, var(--green-deep), var(--green)); }
.document-hero h1 { margin: 0; font-size: clamp(34px, 5vw, 52px); }
.document-hero p { margin: 10px 0 0; color: #d3e4df; }
.document { margin: 38px auto 70px; padding: 48px 56px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 14px 45px rgba(15,57,47,.08); }
.document h2 { margin: 34px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--green); font-size: 22px; }
.document h2:first-child { margin-top: 0; }
.document h3 { margin: 22px 0 8px; font-size: 17px; }
.document p, .document li { color: #465a54; }
.document li { margin: 7px 0; }
.document-meta { margin-bottom: 28px; padding: 16px 18px; border-left: 4px solid var(--gold); background: var(--cream); }
.back-link { color: var(--green); font-weight: 800; text-decoration: none; }

.flow-page .document { max-width: 1050px; }
.flow-page-intro { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.print-button { border: 0; cursor: pointer; }
.audit-step { display: grid; grid-template-columns: 58px 1fr 360px; gap: 24px; align-items: center; margin: 26px 0; padding: 24px; border: 1px solid var(--line); border-radius: 18px; }
.audit-number { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; color: #fff; background: var(--red); font-size: 22px; font-weight: 900; }
.audit-step h2 { margin: 0 0 7px; padding: 0; border: 0; color: var(--ink); }
.audit-step p { margin: 0; }
.audit-image { height: 210px; overflow: hidden; border-radius: 12px; background: #edf3ef; }
.audit-image img { width: 100%; height: 100%; object-fit: contain; }
.audit-image.landscape img { object-fit: cover; }
.audit-final { display: grid; height: 210px; place-items: center; border-radius: 12px; color: #fff; background: radial-gradient(circle, #188061, #084a3a); text-align: center; }
.audit-final strong { color: #f3d370; font-size: 24px; }
.identity-box { margin-top: 30px; padding: 24px; border: 2px solid #d9b34d; border-radius: 14px; background: #fffbef; }
.identity-box strong { color: #8a5d00; }

@media (max-width: 980px) {
  nav { display: none; }
  .hero-grid, .intro-grid, .compliance-grid, .contact-card { grid-template-columns: 1fr; }
  .hero-card { max-width: 620px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .audit-step { grid-template-columns: 52px 1fr; }
  .audit-image, .audit-final { grid-column: 1 / -1; height: auto; min-height: 260px; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 28px, 1180px); }
  .site-header { position: static; }
  .brand img { width: 42px; height: 42px; }
  .hero { padding: 58px 0 64px; }
  .hero-grid { gap: 42px; }
  .hero h1 { font-size: 48px; }
  .lead { font-size: 16px; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .hero-card { grid-template-columns: 88px 1fr; padding: 24px; }
  .app-icon-wrap img { width: 88px; height: 88px; border-radius: 22px; }
  .hero-card h2 { font-size: 21px; }
  .section { padding: 64px 0; }
  .paper-card, .contact-card { padding: 28px; }
  .fact-grid, .feature-grid, .flow-grid { grid-template-columns: 1fr; }
  .flow-title { display: block; }
  .text-link { display: inline-block; margin-top: 12px; }
  .shot, .table-visual { height: 230px; }
  .footer-wrap { display: grid; }
  .contact-list div { grid-template-columns: 90px 1fr; gap: 12px; }
  .document { margin-top: 20px; padding: 28px 22px; }
  .flow-page-intro { display: block; }
  .print-button { margin-top: 15px; }
  .audit-step { grid-template-columns: 44px 1fr; padding: 18px; gap: 14px; }
  .audit-number { width: 42px; height: 42px; }
}

@media print {
  .site-header, .site-footer, .print-button { display: none !important; }
  .document-page { background: #fff; }
  .document-hero { padding: 24px 0; color: #111; background: #fff; border-bottom: 2px solid #0c5947; }
  .document-hero p { color: #555; }
  .document { margin: 0 auto; padding: 20px 0; border: 0; box-shadow: none; }
  .audit-step { break-inside: avoid; grid-template-columns: 45px 1fr 300px; padding: 15px; }
  .audit-image, .audit-final { height: 165px; min-height: 0; }
}