* { box-sizing: border-box; }
 html { scroll-behavior: smooth; scroll-padding-top: 32px; }
 body { margin:0; background:var(--background); color:var(--foreground); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; font-size:16px; line-height:1.8; }
 a { color:inherit; text-decoration:none; }
 button,a { -webkit-tap-highlight-color:transparent; }
 a:focus-visible { outline:3px solid #42679a; outline-offset:5px; }
 h1,h2,h3,p,figure { margin:0; }

:root {
 --background:#ffffff; --foreground:#19273b; --card:#fff; --card-foreground:#19273b;
 --popover:#fff; --popover-foreground:#1a283b; --primary:#21334d; --primary-foreground:#fff;
 --secondary:#e9ebef; --secondary-foreground:#1a283b; --muted:#eceef1; --muted-foreground:#585f6a;
 --accent:#dadfe6; --accent-foreground:#1a283b; --destructive:#b42e37; --border:#dadee3;
 --input:#dadee3; --ring:#35527a; --radius:.5rem;
 --font-geist-sans:Arial,"PingFang SC","Microsoft YaHei",sans-serif; --font-geist-mono:monospace;
}
.skip-link { position:absolute; top:-100px; left:20px; background:white; padding:12px; z-index:20; }
.skip-link:focus { top:10px; }
.draft-ribbon { text-align:center; background:#e7eaee; color:#4c5562; font-size:14px; padding:6px 20px; }
.site-header { max-width:1440px; margin:auto; padding:28px 6%; display:flex; justify-content:space-between; align-items:center; gap:28px; }
.brand { display:flex; align-items:center; gap:13px; }
.brand-initials { font-size:34px; font-weight:700; letter-spacing:-4px; padding-right:4px; border-bottom:3px solid #7188a8; line-height:1.2; }
.brand strong { display:block; font-size:23px; letter-spacing:4px; line-height:1.4; }
.brand small { display:block; font-size:10px; letter-spacing:1.8px; }
nav { display:flex; align-items:center; flex-wrap:wrap; gap:30px; font-size:15px; }
nav a:hover,.text-link:hover { color:#324d74; }
.portal-link { display:flex; gap:6px; align-items:center; border-left:1px solid var(--border); padding-left:28px; }
.hero-inner { max-width:1440px; margin:auto; padding:62px 6% 48px; }
.eyebrow,.section-label { font-size:14px; letter-spacing:1.5px; color:#4d5c71; margin-bottom:24px; }
.eyebrow { display:flex; align-items:center; gap:10px; }
.eyebrow>span { width:7px; height:7px; background:#385782; border-radius:50%; }
h1 { font-size:clamp(38px,4.7vw,68px); line-height:1.38; letter-spacing:-2px; font-weight:500; }
h1>span { color:#546a88; }
.hero-bottom { display:flex; justify-content:space-between; gap:28px; align-items:end; margin-top:30px; }
.hero-bottom p { color:#606770; }
.primary-link { background:var(--primary); color:#fff; display:inline-flex; justify-content:space-between; align-items:center; gap:36px; padding:16px 24px; transition:background .2s; }
.primary-link:hover { background:#2d4668; }
.hero-image { position:relative; margin:0 3%; overflow:hidden; }
.hero-image img { width:100%; height:clamp(280px,37vw,530px); object-fit:cover; display:block; }
.hero-image figcaption { background:#19273b; color:#fff; padding:15px 3%; display:flex; justify-content:space-between; gap:16px; font-size:15px; }
.hero-image figcaption span { color:#c3c9d1; font-size:14px; }
.section { padding:96px 6%; max-width:1440px; margin:auto; }
.section-top { display:flex; justify-content:space-between; align-items:end; gap:28px; margin-bottom:46px; }
h2 { font-size:clamp(27px,2.8vw,40px); font-weight:500; line-height:1.5; letter-spacing:-.5px; }
.section-note { color:#646a72; }
.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--border); border-left:1px solid var(--border); }
.service-card { padding:32px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); background:#fff; }
.service-top { display:flex; justify-content:space-between; color:#576983; margin-bottom:32px; }
.service-top span { font-size:14px; }
h3 { font-size:21px; font-weight:500; margin-bottom:12px; }
.service-card p { color:#646a72; min-height:86px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.tags span { font-size:14px; background:#eef1f4; padding:3px 9px; color:#5f6772; }
.approach { background:#eaedf1; }
.text-link { display:inline-flex; gap:12px; align-items:center; padding-bottom:5px; border-bottom:1px solid #9ba3af; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; padding:0; margin:0; gap:32px; }
.steps li { border-top:1px solid #a5adb9; padding-top:20px; }
.step-number { font-size:14px; color:#526176; display:block; margin-bottom:28px; }
.steps p { color:#5e6672; }
.about { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-top:110px; padding-bottom:110px; }
.about-signature { font-size:clamp(35px,4vw,58px); letter-spacing:3px; color:#cfd5dd; display:block; line-height:1.2; margin-top:58px; }
.about-signature span { display:block; font-size:14px; letter-spacing:8px; margin-top:8px; }
.about-copy>p { color:#646a72; }
.about-copy .about-lead { font-size:23px; color:#25364d; margin-bottom:20px; }
dl { margin:30px 0 0; } dl>div { display:flex; gap:28px; padding:14px 0; border-top:1px solid var(--border); }
dt { color:#747981; flex:0 0 70px; font-size:14px; } dd { margin:0; }
.contact { background:#1a293d; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:40px; padding-top:60px; padding-bottom:60px; }
.contact .section-label { color:#b3becd; } .contact h2 { font-size:30px; margin-bottom:16px; } .contact p:not(.section-label) { color:#c1c6ce; }
.contact-status { border-left:1px solid #566274; padding-left:28px; min-width:240px; } .contact-status small { font-size:14px; color:#b3bbc7; }
footer { max-width:1440px; margin:auto; padding:35px 6%; display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; font-size:14px; color:#636a73; }
.footer-brand { font-size:19px; color:#213046; }.footer-brand span { font-size:12px; margin-left:8px; letter-spacing:1px; }
.portal-page { min-height:100vh; padding:40px 7%; background:radial-gradient(ellipse at top right,#dfe3e8,transparent 70%); }
.portal-message { max-width:680px; margin:80px auto; }.portal-message>.section-label { margin-top:26px; }.portal-message h1 { margin-bottom:24px; }.portal-message>p { color:#5e6773; }.portal-notice { margin:28px 0; padding:18px 24px; border-left:3px solid #7b8ca3; background:#e6e9ee; }
@media(max-width:900px) { nav { gap:18px; }.portal-link { padding-left:18px; }.service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.steps { grid-template-columns:repeat(2,minmax(0,1fr)); }.about { gap:36px; }.contact { flex-direction:column; align-items:start; }.section-note { max-width:250px; } }
@media(max-width:600px) { .site-header { flex-direction:column; align-items:start; padding:22px 6%; gap:24px; } nav { width:100%; gap:12px 20px; font-size:14px; }.portal-link { border-left:0; padding-left:0; }.hero-inner { padding-top:36px; }.eyebrow { font-size:14px; letter-spacing:0; } h1 { letter-spacing:-1px; }.hero-bottom,.section-top { flex-direction:column; align-items:start; }.hero-bottom { gap:24px; }.hero-image { margin:0; }.hero-image figcaption { flex-direction:column; gap:3px; padding:14px 6%; }.section { padding:60px 6%; }.section-note { max-width:none; }.service-grid { grid-template-columns:1fr; }.service-card { padding:26px; }.service-card p { min-height:0; }.service-top { margin-bottom:22px; }.steps { gap:30px 24px; }.about { grid-template-columns:1fr; gap:36px; }.about-signature { margin-top:30px; }.contact h2 { font-size:26px; }.contact-status { min-width:0; }.portal-message { margin:55px auto; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

/* 青枫官网：轻量、清晰的浅色视觉主题。 */
:root { --foreground:#1d1d1f; --primary:#24599b; --border:#d9dce1; }
body { font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.65; }
html { scroll-padding-top:32px; }
.draft-ribbon { display:flex; justify-content:center; gap:24px; background:#f5f5f7; color:#55565b; padding:9px 5%; font-size:12px; }
.site-header { max-width:1200px; padding:20px 4%; gap:24px; }
.brand-initials { border:0; border-radius:12px; background:#24599b; color:#fff; font-size:22px; letter-spacing:-1px; padding:9px; }
.brand strong { font-size:19px; letter-spacing:1px; }
.brand small { font-size:9px; letter-spacing:.8px; color:#65676d; }
nav { gap:22px; font-size:14px; }
nav a { padding:8px 0; }
.nav-contact { display:inline-flex; align-items:center; gap:5px; }
.nav-internal { color:#24599b; }
.hero { display:block; max-width:1440px; margin:auto; background:#fff; }
.hero-inner { padding:76px 6% 44px; text-align:center; max-width:1080px; }
.hero .eyebrow { justify-content:center; font-size:12px; letter-spacing:1.7px; margin-bottom:22px; }
.hero .eyebrow>span { display:none; }
h1 { font-size:clamp(36px,5.2vw,72px); line-height:1.22; letter-spacing:-1.8px; font-weight:650; }
h1>span { color:#24599b; }
.hero-bottom { display:block; margin-top:25px; }
.hero-bottom p { font-size:clamp(17px,1.8vw,22px); line-height:1.65; color:#62636a; }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:24px; margin-top:28px; }
.primary-link { border-radius:999px; padding:12px 24px; gap:14px; font-size:16px; justify-content:center; }
.primary-link:hover { background:#1c477e; color:white; }
.text-link { color:#24599b; border:0; padding-bottom:0; gap:7px; }
.text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.hero-caption { display:flex; justify-content:center; gap:18px; color:#6b6d74; font-size:13px; margin-top:28px; }
.hero-image { margin:0 5%; border-radius:28px; background:#f5f5f7; }
.hero-image img { height:clamp(260px,38vw,500px); min-height:0; object-position:center; }
.hero-image figcaption { position:static; background:#f5f5f7; color:#43464d; padding:15px 24px; font-size:14px; }
.hero-image figcaption span { color:#65676e; font-size:12px; }
.section { max-width:1200px; padding:96px 4%; }
h2 { font-size:clamp(29px,3.3vw,44px); font-weight:600; line-height:1.3; letter-spacing:-1px; }
.section-label { font-size:12px; letter-spacing:1.5px; color:#526680; margin-bottom:16px; }
.section-top { align-items:center; margin-bottom:38px; }
.section-note { font-size:16px; color:#65676e; }
.service-grid { border:0; gap:20px; background:transparent; }
.service-card { display:flex; flex-direction:column; border:0; border-radius:24px; padding:30px; background:#f5f5f7; transition:background .18s ease; }
.service-card:hover { background:#edf1f6; }
.service-top { color:#24599b; margin-bottom:28px; }
.service-card h3 { font-size:22px; font-weight:600; line-height:1.4; }
.service-card p { min-height:0; color:#5c6067; }
.service-card .tags { margin:0 0 12px; }
.tags span { border-radius:999px; padding:3px 10px; background:#e7ebf0; color:#4e5866; font-size:12px; }
.service-card .service-focus { padding-top:22px; margin-top:auto; font-size:14px; color:#60656f; }
.service-bottom { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:28px; color:#64676e; }
.service-bottom a { flex-shrink:0; }
.approach { background:#f5f5f7; border-radius:28px; }
.steps { gap:28px; }
.steps li { border-color:#d4d8df; }
.step-number { font-size:36px; color:#24599b; font-weight:500; margin-bottom:22px; }
.steps h3 { font-weight:600; }
.steps p { color:#62666e; }
.about { gap:8%; }
.about-signature { color:#d4dce7; letter-spacing:1px; }
.about-copy .about-lead { color:#282b31; font-size:22px; }
.about-copy>p { color:#62666e; }
.contact { background:#f5f5f7; color:#1d1d1f; border-radius:28px; gap:48px; }
.contact .section-label { color:#526680; }
.contact h2 { font-size:clamp(30px,3.3vw,44px); }
.contact p:not(.section-label) { color:#62666e; }
.contact-status { border:0; padding:0; min-width:0; }
.contact-status>span { display:block; color:#62666e; font-size:14px; }
.contact-phone { display:flex; align-items:center; gap:12px; font-size:clamp(23px,2.8vw,34px); font-weight:600; margin:12px 0; white-space:nowrap; }
.contact-email { display:flex; align-items:center; gap:12px; color:#24599b; overflow-wrap:anywhere; }
.contact-city { margin-top:20px; }
footer { max-width:1200px; font-size:12px; padding:32px 4%; color:#666970; }
.footer-links { display:flex; flex-wrap:wrap; gap:20px; }
.footer-links a { display:inline-flex; align-items:center; gap:5px; }
.portal-page { background:#f5f5f7; }
.portal-message { background:white; padding:40px; border-radius:28px; }
.portal-message h1 { font-size:clamp(30px,4vw,48px); }
.portal-notice { border:0; border-radius:16px; background:#f0f3f7; }
a:focus-visible { outline:3px solid #24599b; outline-offset:5px; }
@media(max-width:1000px) {
 .site-header { flex-wrap:wrap; justify-content:center; }
 nav { justify-content:center; }
 .service-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .approach,.contact { border-radius:0; }
}
@media(max-width:700px) {
 .draft-ribbon>span { display:none; }
 .site-header { flex-direction:column; align-items:center; padding:18px 6%; gap:12px; }
 nav { width:100%; gap:4px 18px; font-size:14px; }
 nav a { min-height:44px; display:inline-flex; align-items:center; }
 .hero-inner { padding:42px 6% 30px; }
 .hero .eyebrow { font-size:10px; letter-spacing:.5px; }
 h1 { letter-spacing:-1px; }
 .hero-bottom { margin-top:20px; }
 .hero-actions { gap:18px; }
 .hero-caption { font-size:12px; }
 .hero-image { margin:0 4%; border-radius:20px; }
 .hero-image img { height:280px; }
 .hero-image figcaption { display:flex; flex-direction:column; align-items:flex-start; padding:14px 18px; gap:5px; }
 .section { padding:60px 6%; }
 .section-top { flex-direction:column; align-items:flex-start; gap:20px; }
 .section-note { max-width:none; }
 .service-grid { grid-template-columns:1fr; gap:16px; }
 .service-card { padding:28px; }
 .steps { grid-template-columns:1fr; gap:26px; }
 .step-number { margin-bottom:12px; }
 .about { grid-template-columns:1fr; gap:32px; }
 .contact { flex-direction:column; align-items:flex-start; gap:30px; }
 .contact-phone { white-space:normal; }
 .service-bottom { flex-direction:column; align-items:flex-start; gap:16px; }
 .portal-page { padding:24px 5%; }
 .portal-message { margin:36px auto; padding:28px 22px; }
 footer { padding:28px 6%; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }

/* Apple Design: clear hierarchy, immediate feedback, accessible alternatives. */
body { font-optical-sizing:auto; }
.primary-link,.text-link,nav a { touch-action:manipulation; }
.primary-link { min-height:2.75rem; transition:background 160ms ease-out,transform 160ms ease-out; }
.primary-link:active { transform:scale(.97); background:#183e70; transition-duration:80ms; }
.text-link { min-height:2.75rem; }
.text-link:active,nav a:active { color:#173a66; text-decoration:underline; text-underline-offset:.25em; }
nav a { min-height:2.75rem; display:inline-flex; align-items:center; }
button:focus-visible { outline:3px solid #24599b; outline-offset:5px; }
@media (hover:none) {
 .service-card:hover { background:#f5f5f7; }
}
@media (prefers-reduced-motion:reduce) {
 .primary-link:active { transform:none; }
}
@media (prefers-contrast:more) {
 :root { --border:#62666e; }
 .service-card,.approach,.contact { outline:1px solid #62666e; outline-offset:-1px; }
 .section-label,.section-note,.hero-bottom p,.service-card p,.steps p,.about-copy>p,
 .contact p:not(.section-label),footer { color:#30343b; }
 a:focus-visible,button:focus-visible { outline-color:#111; }
}