:root { color-scheme: light; --navy:#08263d; --blue:#1268e8; --cyan:#16b6aa; --ink:#142838; --muted:#5c6c79; --line:#dce6ec; --soft:#f2f7fa; --white:#fff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; color:var(--ink); background:#fff; font-size:16px; }
a { color:var(--blue); }
.site-header { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; min-height:72px; padding:0 max(24px,7vw); border-bottom:1px solid rgba(220,230,236,.92); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--navy); font-weight:800; text-decoration:none; letter-spacing:.01em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px 4px 10px 4px; color:#fff; background:linear-gradient(145deg,var(--blue),var(--cyan)); box-shadow:0 7px 20px rgba(18,104,232,.2); }
nav { display:flex; gap:28px; }
nav a { position:relative; padding:25px 0 23px; color:#465968; font-size:14px; text-decoration:none; }
nav a:hover, nav a.active { color:var(--blue); }
nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:3px 3px 0 0; background:var(--blue); }
nav .workbench-link { align-self:center; margin:12px 0; padding:10px 17px; border-radius:9px; color:#fff; background:var(--blue); font-weight:700; box-shadow:0 8px 20px rgba(18,104,232,.2); }
nav .workbench-link:hover { color:#fff; background:#0e5dcc; }
nav .workbench-link::after { display:none; }
main { min-height:calc(100vh - 160px); }
.hero { position:relative; overflow:hidden; padding:100px max(24px,calc((100vw - 1120px)/2)) 86px; background:radial-gradient(circle at 82% 30%,rgba(22,182,170,.17),transparent 27%),radial-gradient(circle at 70% 70%,rgba(18,104,232,.12),transparent 28%),linear-gradient(135deg,#f7fbff 0%,#fff 55%,#f1fcfa 100%); border-bottom:1px solid var(--line); }
.hero::after { content:""; position:absolute; right:8vw; top:80px; width:220px; height:220px; border:1px solid rgba(18,104,232,.16); border-radius:50%; box-shadow:0 0 0 42px rgba(18,104,232,.035),0 0 0 84px rgba(22,182,170,.025); pointer-events:none; }
.eyebrow, .kicker { color:var(--blue); font-weight:800; letter-spacing:.13em; font-size:13px; text-transform:uppercase; }
h1 { color:var(--navy); max-width:860px; margin:16px 0 22px; font-size:clamp(38px,6vw,68px); line-height:1.08; letter-spacing:-.035em; }
h2 { color:var(--navy); font-size:clamp(25px,3.5vw,38px); line-height:1.25; }
h3 { color:var(--navy); font-size:19px; }
.lead { color:var(--muted); max-width:800px; font-size:18px; line-height:1.85; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:34px; }
.button { display:inline-flex; padding:13px 22px; border-radius:10px; background:var(--blue); color:#fff; font-weight:700; text-decoration:none; box-shadow:0 10px 25px rgba(18,104,232,.2); }
.text-link { font-weight:700; text-decoration:none; }
.identity { display:inline-flex; align-items:center; gap:10px; margin-top:42px; color:#48606f; font-size:14px; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 5px rgba(22,182,170,.12); }
.section { max-width:1120px; margin:0 auto; padding:82px 24px; }
.section.compact { padding-top:46px; padding-bottom:58px; }
.section-heading { display:flex; justify-content:space-between; gap:60px; align-items:end; margin-bottom:34px; }
.section-heading h2 { max-width:620px; margin:10px 0 0; }
.section-heading > p { max-width:400px; margin:0 0 6px; color:var(--muted); line-height:1.75; }
.grid { display:grid; gap:18px; }
.grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.card, .feature { position:relative; padding:28px; border:1px solid var(--line); border-radius:16px; background:var(--white); box-shadow:0 16px 42px rgba(8,38,61,.06); }
.card-index { color:var(--blue); font-family:ui-monospace,monospace; font-size:13px; font-weight:800; }
.card h3, .feature h2 { margin:22px 0 10px; }
.card p, .feature p, .feature li { color:var(--muted); line-height:1.75; }
.feature h2 { font-size:24px; }
.feature ul { margin:18px 0 0; padding-left:20px; }
.process { padding-top:30px; }
.process > h2 { margin:10px 0 34px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0; padding:0; list-style:none; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--line); }
.steps li { display:flex; flex-direction:column; gap:10px; padding:28px; background:#fff; }
.steps strong { color:var(--navy); }
.steps span { color:var(--muted); line-height:1.65; }
.notice { margin-top:26px; padding:20px 22px; border-left:4px solid var(--cyan); background:#edfbf9; color:#285a5d; line-height:1.75; }
.page-main { max-width:1120px; margin:0 auto; padding:82px 24px; }
.page-main > h1 { font-size:clamp(36px,5vw,58px); }
.prose { max-width:880px; margin-top:50px; }
.prose.wide { max-width:100%; }
.prose h2 { margin:38px 0 10px; font-size:23px; }
.prose p, .prose li { color:var(--muted); line-height:1.85; }
.prose li + li { margin-top:8px; }
.updated { padding-top:26px; border-top:1px solid var(--line); font-size:14px; }
.product-demo { margin-top:52px; padding:30px; border:1px solid #d7e4ef; border-radius:20px; background:linear-gradient(145deg,#f5faff,#fff); box-shadow:0 24px 70px rgba(8,38,61,.08); }
.demo-top { display:flex; justify-content:space-between; align-items:center; }
.demo-top h2 { margin:5px 0 0; font-size:26px; }
.demo-label, .demo-time { color:var(--muted); font-size:13px; }
.demo-time { padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:26px 0; }
.metric-grid > div { display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:12px; background:#fff; border:1px solid #e4edf3; }
.metric-grid span, .metric-grid small { color:var(--muted); }
.metric-grid strong { color:var(--navy); font-size:28px; }
.demo-table { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; }
.demo-row { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; padding:15px 18px; border-top:1px solid #edf1f4; color:#425564; }
.demo-row:first-child { border-top:0; }
.demo-head { background:#f4f7f9; color:#697985; font-size:14px; font-weight:700; }
.good { color:#17836f; }.attention { color:#c06b14; }
.demo-note { margin:16px 0 0; color:#7c8993; font-size:13px; }
.facts, .contact-panel { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:48px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:var(--line); }
.facts > div, .contact-panel > div { display:flex; flex-direction:column; gap:9px; padding:24px; background:#fff; }
.facts span, .contact-panel span { color:var(--muted); font-size:14px; }
.facts strong, .contact-panel strong { color:var(--navy); line-height:1.6; }
.status { display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border-radius:999px; background:#ecf8f0; color:#287a45; font-weight:700; font-size:14px; }
.status.is-error { background:#fff0ec; color:#9a3827; }
.is-error .dot { background:#d34b36; box-shadow:0 0 0 4px rgba(211,75,54,.14); }
code { background:var(--soft); padding:2px 6px; border-radius:6px; }
.site-footer { display:flex; justify-content:space-between; gap:30px; align-items:center; padding:28px max(24px,7vw); border-top:1px solid var(--line); background:#f8fafb; color:var(--muted); font-size:13px; }
.site-footer > div:first-child { display:flex; flex-direction:column; gap:6px; }
.site-footer strong { color:var(--navy); }
.footer-links { display:flex; flex-wrap:wrap; justify-content:end; gap:20px; }
.footer-links a { color:#516572; text-decoration:none; }
@media (max-width:900px) { .grid.four,.metric-grid { grid-template-columns:repeat(2,1fr); }.section-heading { align-items:start; flex-direction:column; gap:10px; }.hero::after { opacity:.4; } }
@media (max-width:720px) { .site-header { position:static; align-items:flex-start; gap:14px; padding-top:18px; padding-bottom:14px; flex-direction:column; } nav { width:100%; gap:18px; overflow-x:auto; } nav a { flex:0 0 auto; padding:9px 0; }.hero { padding-top:68px; }.hero-actions,.site-footer { align-items:flex-start; flex-direction:column; }.grid.two,.steps,.facts,.contact-panel { grid-template-columns:1fr; }.footer-links { justify-content:start; }.page-main { padding-top:58px; } }
@media (max-width:480px) { .grid.four,.metric-grid { grid-template-columns:1fr; }.product-demo { padding:18px; }.demo-row { grid-template-columns:1.5fr .8fr .8fr; }.demo-row span:nth-child(3) { display:none; } h1 { font-size:38px; } }