:root { --ink:#172126; --muted:#66747b; --line:#d8dee2; --green:#087f5b; --green-dark:#056b4c; --orange:#e2702e; --surface:#fff; --bg:#eef1f3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:"Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif; letter-spacing:0; }
a { color:inherit; }
.site-header { position:absolute; z-index:5; top:0; left:0; right:0; height:68px; padding:0 max(24px, calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; color:#fff; border-bottom:1px solid rgba(255,255,255,.22); }
.home-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.home-brand span { width:34px; height:34px; display:grid; place-items:center; border-radius:6px; color:#fff; background:var(--green); font-weight:800; }
.home-brand strong { font-size:16px; }
nav { display:flex; align-items:center; gap:22px; }
nav a { font-size:13px; text-decoration:none; }
.nav-primary { padding:9px 14px; border:1px solid rgba(255,255,255,.65); border-radius:5px; }
.hero { position:relative; height:min(78svh,760px); min-height:520px; color:#fff; background:#263238 url('/static/home-hero-v2.png') center center/cover no-repeat; overflow:hidden; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,18,22,.9) 0%,rgba(9,18,22,.7) 39%,rgba(9,18,22,.14) 72%,rgba(9,18,22,.08) 100%); }
.hero-content { position:relative; z-index:2; width:min(1180px,calc(100% - 48px)); margin:0 auto; padding-top:clamp(142px,22vh,220px); }
.eyebrow { margin:0 0 14px; color:#8ae0bf; font-size:12px; font-weight:800; }
.eyebrow.dark { color:var(--green); }
.eyebrow.light { color:#c9f2e2; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:720px; margin-bottom:20px; font-size:54px; line-height:1.13; letter-spacing:0; }
.hero-copy { max-width:650px; margin-bottom:28px; color:#dce6e9; font-size:17px; line-height:1.8; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; border-radius:5px; border:1px solid transparent; font-size:14px; font-weight:700; text-decoration:none; }
.button.primary { color:#fff; background:var(--green); }
.button.primary:hover { background:var(--green-dark); }
.button.secondary { color:#fff; border-color:rgba(255,255,255,.55); background:rgba(8,15,18,.28); }
.hero-facts { position:absolute; z-index:2; left:50%; bottom:0; width:min(1180px,calc(100% - 48px)); transform:translateX(-50%); display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.25); }
.hero-facts span { min-height:70px; display:flex; align-items:center; gap:9px; color:#cfdadd; font-size:13px; border-right:1px solid rgba(255,255,255,.18); }
.hero-facts span:last-child { border-right:0; }
.hero-facts strong { color:#fff; font-size:17px; }
.section-inner { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.feature-band { padding:76px 0 84px; background:#fff; }
.section-heading { max-width:720px; margin-bottom:44px; }
.section-heading h2,.workflow-copy h2,.access-inner h2 { margin-bottom:14px; font-size:34px; line-height:1.25; }
.section-heading > p:last-child { color:var(--muted); line-height:1.8; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0 32px; }
.feature-grid article { min-height:190px; padding:22px 0 26px; border-top:2px solid var(--line); }
.feature-grid article:nth-child(1),.feature-grid article:nth-child(4) { border-top-color:var(--green); }
.feature-grid article:nth-child(2),.feature-grid article:nth-child(5) { border-top-color:var(--orange); }
.feature-grid span { color:var(--muted); font:700 12px/1 system-ui,sans-serif; }
.feature-grid h3 { margin:18px 0 10px; font-size:18px; }
.feature-grid p { color:var(--muted); line-height:1.75; }
.workflow-band { padding:84px 0; background:#eef1f3; }
.workflow-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.9fr); gap:80px; align-items:center; }
.workflow-copy ol { margin:34px 0 0; padding:0; list-style:none; counter-reset:steps; }
.workflow-copy li { position:relative; min-height:76px; padding:0 0 24px 52px; counter-increment:steps; }
.workflow-copy li::before { content:counter(steps); position:absolute; left:0; top:0; width:30px; height:30px; display:grid; place-items:center; color:#fff; background:var(--green); border-radius:50%; font-weight:700; }
.workflow-copy li::after { content:""; position:absolute; left:14px; top:34px; bottom:4px; width:1px; background:#bdc7cc; }
.workflow-copy li:last-child::after { display:none; }
.workflow-copy li strong,.workflow-copy li span { display:block; }
.workflow-copy li span { margin-top:5px; color:var(--muted); line-height:1.6; }
.code-sample { overflow:hidden; border:1px solid #273239; border-radius:7px; background:#12191d; box-shadow:0 18px 42px rgba(24,33,38,.16); }
.code-head { height:46px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; color:#aebcc2; background:#1d272c; font-size:12px; }
.code-sample pre { margin:0; padding:24px; overflow:auto; color:#dce7ec; font:14px/1.8 Consolas,"Courier New",monospace; }
.code-sample b { color:#7bc5ff; }.code-sample i { color:#ff9770; font-style:normal; }.code-sample em { color:#7de2b8; font-style:normal; }
.access-band { padding:48px 0; color:#fff; background:var(--green-dark); }
.access-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.access-inner h2 { margin:0; }
.light-button { color:var(--green-dark); background:#fff; }
footer { min-height:72px; padding:0 max(24px,calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; color:#728087; background:#fff; font-size:12px; }
@media (max-width:900px) { nav > a:not(.nav-primary) { display:none; } h1 { font-size:42px; } .feature-grid { grid-template-columns:repeat(2,1fr); } .workflow-layout { grid-template-columns:1fr; gap:42px; } }
@media (max-width:620px) { .site-header { padding:0 16px; } .home-brand strong { display:none; } .hero { min-height:540px; height:78svh; background-position:62% center; } .hero-shade { background:rgba(9,18,22,.68); } .hero-content { width:calc(100% - 32px); padding-top:128px; } h1 { font-size:34px; } .hero-copy { font-size:15px; } .hero-facts { width:calc(100% - 32px); grid-template-columns:1fr; padding:10px 0; } .hero-facts span { min-height:28px; border:0; } .hero-facts span:nth-child(n+3) { display:none; } .section-inner { width:calc(100% - 32px); } .feature-band,.workflow-band { padding:58px 0; } .feature-grid { grid-template-columns:1fr; } .feature-grid article { min-height:auto; } .section-heading h2,.workflow-copy h2,.access-inner h2 { font-size:28px; } .code-sample pre { font-size:12px; padding:16px; } .access-inner,footer { align-items:flex-start; flex-direction:column; } footer { padding:22px 16px; gap:6px; } }