:root { --ink:#20282b; --muted:#647076; --forest:#286655; --forest-dark:#19483d; --rose:#bd4f62; --cool:#f3f6f5; --line:#dce5e1; --white:#fff; }

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body { margin:0; color:var(--ink); background:#fff; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,Helvetica,sans-serif; line-height:1.72; }

a { color:inherit; text-decoration:none; }

img { display:block; max-width:100%; height:auto; }

.container,.header-inner,.hero-inner { width:min(1140px,calc(100% - 40px)); margin-inline:auto; }

.site-header { position:sticky; top:0; z-index:25; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); }

.header-inner { height:72px; display:flex; align-items:center; gap:36px; }

.brand { display:flex; align-items:center; gap:10px; margin-right:auto; font-size:19px; font-weight:850; }

.brand img { border-radius:7px; }

.nav { display:flex; gap:28px; font-size:14px; font-weight:700; }

.nav a.active,.nav a:hover { color:var(--forest); }

.download { color:#fff; background:var(--rose); padding:9px 18px; border-radius:5px; font-weight:800; }

.menu-toggle { display:none; border:0; background:none; font-size:25px; }

.hero { background:linear-gradient(180deg,#fff 0 88%,var(--cool) 88%); }

.hero-inner { min-height:625px; display:grid; grid-template-columns:1fr .86fr; gap:72px; align-items:center; padding:46px 0 72px; }

.eyebrow,.section-head>span,.cta span,.process article>section>span,.guide-callout span { display:block; color:var(--forest); font-size:12px; font-weight:850; letter-spacing:0; }

h1,h2,h3,p { margin-top:0; }

h1 { margin:10px 0 20px; font-size:clamp(44px,5.4vw,67px); line-height:1.08; letter-spacing:0; }

.hero-copy>p { color:var(--muted); max-width:590px; font-size:17px; }

.hero-actions { display:flex; align-items:center; gap:25px; margin:28px 0 30px; }

.download.big { display:inline-flex; padding:12px 23px; }

.text-link { color:var(--forest); font-weight:800; }

.utility-strip { display:flex; gap:18px; padding-top:16px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }

.utility-strip span { display:flex; align-items:center; gap:7px; }

.utility-strip i { width:7px; height:7px; border-radius:50%; background:var(--forest); }

.hero-media { min-height:500px; display:grid; grid-template-columns:85px 1fr; align-items:center; }

.hero-media img { width:280px; max-width:400px; max-height:470px; object-fit:contain; border-radius:18px; box-shadow:0 22px 50px rgba(35,65,57,.18); }

.status-rail { display:flex; flex-direction:column; gap:10px; writing-mode:vertical-rl; align-items:center; color:var(--muted); font-size:11px; }

.status-rail b { color:var(--forest); padding:8px 5px; border:1px solid #a9c3bb; border-radius:3px; }

.modes,.support-desk,.gallery { padding:86px 0; }

.section-head { display:flex; align-items:baseline; gap:17px; margin-bottom:34px; }

.section-head h2 { margin:0; font-size:34px; }

.mode-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

.mode-grid article { padding:28px; border:1px solid var(--line); background:#fff; }

.mode-grid b { color:var(--forest); }

.mode-grid h3 { margin:20px 0 7px; font-size:22px; }

.mode-grid p { color:var(--muted); margin:0; }

.functions { padding:86px 0; color:#fff; background:var(--forest-dark); }

.section-head.inverse>span,.section-head.inverse h2 { color:#fff; }

.function-table { border-top:1px solid rgba(255,255,255,.35); }

.function-table>div { display:grid; grid-template-columns:180px 1fr 110px; gap:25px; padding:21px 0; border-bottom:1px solid rgba(255,255,255,.2); align-items:center; }

.function-table span { font-weight:800; font-size:18px; }

.function-table p { margin:0; color:#c8d9d4; }

.function-table b { text-align:right; color:#a9c9c0; font-size:11px; }

.support-desk .container { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; }

.desk-copy p { color:var(--muted); font-size:17px; }

.desk-copy a { color:var(--rose); font-weight:800; }

.desk-list { border-top:2px solid var(--ink); }

.desk-list a { display:grid; grid-template-columns:70px 1fr 40px; gap:20px; padding:20px 5px; border-bottom:1px solid var(--line); align-items:center; }

.desk-list span { color:var(--forest); font-size:12px; }

.desk-list i { font-style:normal; color:var(--rose); font-weight:800; }

.gallery { background:var(--cool); }

.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; align-items:end; }

.gallery-grid figure { margin:0; }

.gallery-grid img { max-height:360px; max-width:240px; width:auto; margin:auto; object-fit:contain; border-radius:10px; box-shadow:0 15px 36px rgba(35,65,57,.14); }

.gallery-grid figcaption { display:flex; justify-content:space-between; gap:15px; margin-top:14px; font-size:13px; }

.gallery-grid figcaption span { color:var(--muted); }

.cta { padding:48px 0; color:#fff; background:#1e292b; }

.cta .container { display:flex; align-items:center; justify-content:space-between; gap:25px; }

.cta span { color:#9dc2b7; }

.cta h2 { margin:4px 0 0; font-size:29px; }

footer { padding:44px 0; text-align:center; color:#9aa6a2; background:#151c1e; }

.footer-top { display:flex; justify-content:center; align-items:center; gap:26px; color:#fff; }

.footer-top .brand { margin:0; }

footer p { max-width:760px; text-align:center; margin:20px auto 8px; font-size:13px; }

.inner-main { background:#fff; }

.inner-hero { padding:76px 0 60px; background:var(--cool); border-bottom:1px solid var(--line); }

.inner-hero h1 { max-width:850px; font-size:clamp(38px,5vw,57px); margin:8px 0 15px; }

.inner-hero p { max-width:730px; color:var(--muted); font-size:17px; }

.process { display:grid; grid-template-columns:230px 1fr; gap:80px; padding-top:70px; padding-bottom:90px; }

.process aside { position:sticky; top:100px; align-self:start; display:grid; background:var(--cool); padding:18px; }

.process aside b { margin-bottom:10px; }

.process aside a { display:flex; align-items:center; gap:9px; padding:10px 0; color:var(--muted); border-bottom:1px solid var(--line); font-size:13px; }

.process aside i { width:7px; height:7px; border-radius:50%; background:var(--forest); }

.process article { max-width:780px; }

.process article>section { padding-bottom:42px; margin-bottom:42px; border-bottom:1px solid var(--line); scroll-margin-top:100px; }

.process h2 { margin:7px 0 16px; font-size:30px; }

.process p { color:#4e5a5d; }

.process article a { color:var(--rose); text-decoration:underline; }

.faq-area { padding-top:55px; padding-bottom:90px; }

.faq-tabs { display:flex; gap:9px; flex-wrap:wrap; margin-bottom:28px; }

.faq-tabs button { padding:8px 15px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:4px; cursor:pointer; }

.faq-tabs button.active { color:#fff; background:var(--forest); border-color:var(--forest); }

.faq-list { max-width:930px; border-top:2px solid var(--ink); }

.faq-list details { border-bottom:1px solid var(--line); }

.faq-list details[hidden] { display:none; }

.faq-list summary { cursor:pointer; list-style:none; padding:18px 8px; font-weight:800; }

.faq-list summary span { display:inline-block; width:85px; color:var(--forest); font-size:11px; }

.faq-list details p { padding:0 8px 20px 93px; color:var(--muted); margin:0; }

.guide-callout { max-width:930px; margin-top:40px; padding:28px; display:flex; align-items:center; justify-content:space-between; gap:28px; background:var(--cool); border-left:4px solid var(--rose); }

.guide-callout h2 { margin:4px 0; }

.guide-callout p { margin:0; color:var(--muted); }

.guide-callout a { color:var(--forest); font-weight:800; }

@media(max-width:880px){.header-inner>.download{display:none}
.menu-toggle{display:block}
.nav{display:none;position:absolute;top:72px;left:20px;right:20px;padding:16px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 30px rgba(35,65,57,.14);flex-direction:column}
.nav.open{display:flex}
.hero-inner{grid-template-columns:1fr;gap:24px}
.hero-media{min-height:370px}
.support-desk .container{grid-template-columns:1fr;gap:38px}
.mode-grid{grid-template-columns:1fr}
.process{grid-template-columns:1fr;gap:35px}
.process aside{position:static;grid-template-columns:repeat(2,1fr)}
.gallery-grid{overflow-x:auto;grid-template-columns:repeat(3,220px)}
}

@media(max-width:580px){.container,.header-inner,.hero-inner{width:min(100% - 28px,1140px)}
.header-inner{height:64px}
.nav{top:64px;left:14px;right:14px}
h1{font-size:39px}
.hero-inner{padding:28px 0 36px}
.hero-copy>p{font-size:15px}
.hero-actions{margin:22px 0}
.utility-strip{gap:10px;flex-wrap:wrap}
.hero-media{min-height:270px;grid-template-columns:54px 1fr}
.hero-media img{width:150px;max-height:265px}
.modes,.support-desk,.gallery,.functions{padding:60px 0}
.section-head h2{font-size:29px}
.function-table>div{grid-template-columns:1fr}
.function-table b{text-align:left}
.gallery-grid img{height:290px}
.gallery-grid figcaption{flex-direction:column}
.cta .container{align-items:flex-start;flex-direction:column}
.inner-hero{padding:50px 0 44px}
.inner-hero h1{font-size:37px}
.process{padding-top:42px}
.process aside{grid-template-columns:1fr 1fr}
.faq-list summary span{width:72px}
.faq-list details p{padding-left:8px}
.guide-callout{align-items:flex-start;flex-direction:column}
.footer-top{flex-wrap:wrap}
}