:root { --ink:#202536; --muted:#60687a; --indigo:#4051a3; --indigo-dark:#2f3d7e; --berry:#bd476b; --line:#dfe2eb; --soft:#f4f6fa; --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.75; }
a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; height:auto; } button { font:inherit; }
.container,.header-inner,.hero-inner { width:min(1160px,calc(100% - 40px)); margin:0 auto; }
header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); }
.header-inner { min-height:72px; display:flex; align-items:center; gap:32px; }
.brand { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; }
.brand img { border-radius:7px; }
nav { margin-left:auto; display:flex; gap:24px; } nav a { color:#555e71; padding:23px 0 20px; border-bottom:3px solid transparent; } nav a:hover,nav a.active { color:var(--indigo); border-color:var(--indigo); }
.button { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:0 24px; color:#fff; background:var(--indigo); border-radius:6px; font-weight:800; }
.button:hover { background:var(--indigo-dark); } .button.small { min-height:40px; padding:0 18px; } .menu { display:none; width:43px; height:43px; border:1px solid var(--line); background:#fff; border-radius:6px; }
.hero { background:linear-gradient(180deg,#f8f9fc,#eef1f8); border-bottom:1px solid var(--line); }
.hero-inner { min-height:680px; padding:52px 0 46px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:70px; }
.tag { display:block; margin-bottom:13px; color:var(--indigo); font-size:12px; font-weight:900; } h1,h2,h3,p { margin-top:0; }
.hero h1 { max-width:620px; margin-bottom:22px; font-size:clamp(44px,5vw,66px); line-height:1.1; letter-spacing:0; }
.hero-copy>p { max-width:650px; color:var(--muted); font-size:17px; }
.actions { display:flex; align-items:center; gap:24px; margin:28px 0; } .actions>a:last-child { color:var(--indigo); font-weight:800; }
.progress-panel { display:grid; grid-template-columns:repeat(3,1fr); max-width:500px; border-top:1px solid #cfd4df; }
.progress-panel div { padding:14px 12px 0 0; display:grid; border-right:1px solid #cfd4df; } .progress-panel div:last-child { border:0; padding-left:12px; } .progress-panel span { color:var(--muted); font-size:12px; } .progress-panel b { color:var(--berry); }
.control-stage { position:relative; min-height:500px; display:flex; align-items:center; justify-content:center; padding:45px 80px; }
.control-stage>img { width:240px; max-width:400px; border-radius:22px; box-shadow:0 24px 48px rgba(32,37,54,.2); }
.meter { position:absolute; left:0; right:0; top:10px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; background:#fff; border:1px solid var(--line); }
.meter span { color:var(--muted); font-size:12px; } .meter i { position:absolute; left:0; bottom:-3px; width:68%; height:3px; background:var(--berry); }
.control-card { position:absolute; width:170px; padding:14px; display:grid; background:#fff; border-left:4px solid var(--berry); box-shadow:0 12px 30px rgba(32,37,54,.1); }
.control-card span { color:var(--muted); font-size:12px; } .control-card.top { left:0; top:130px; } .control-card.bottom { right:0; bottom:80px; }
.section { padding:82px 0; } .heading { display:flex; align-items:center; gap:14px; margin-bottom:32px; } .heading>span { color:var(--berry); font-weight:900; } .heading h2 { margin:0; font-size:clamp(30px,3vw,40px); }
.control-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .control-grid article { min-height:240px; padding:25px; border:1px solid var(--line); border-radius:7px; } .control-grid article>b { color:var(--berry); font-size:12px; } .control-grid h3 { margin:38px 0 10px; font-size:21px; } .control-grid p { margin:0; color:var(--muted); }
.stations { background:var(--soft); } .station-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .station-grid figure { margin:0; padding:20px; display:grid; grid-template-columns:150px 1fr; gap:18px; align-items:center; background:#fff; border-radius:7px; } .station-grid img { width:150px; max-width:400px; max-height:410px; object-fit:cover; object-position:top; border-radius:5px; } .station-grid figcaption { display:grid; gap:8px; } .station-grid figcaption span { color:var(--muted); font-size:13px; }
.matrix { color:#fff; background:#242a3d; } .matrix .heading>span { color:#e684a2; } .matrix-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#535a70; border:1px solid #535a70; } .matrix-grid div { padding:24px; display:grid; background:#242a3d; } .matrix-grid span { color:#bdc3d2; }
.faq-preview .container { display:flex; align-items:center; justify-content:space-between; gap:50px; } .faq-preview .heading { margin-bottom:12px; } .faq-preview p { max-width:760px; margin:0; color:var(--muted); }
.outline { min-height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0 20px; color:var(--indigo); border:1px solid var(--indigo); border-radius:6px; font-weight:800; white-space:nowrap; }
.download-band { padding:48px 0; color:#fff; background:var(--indigo); } .download-band .container { display:flex; align-items:center; justify-content:space-between; gap:30px; } .download-band span { color:#c9d0f3; font-size:12px; } .download-band h2 { margin:0; font-size:29px; } .button.light { color:var(--indigo-dark); background:#fff; }
footer { padding:30px 0; color:#aeb5c7; background:#1b2030; text-align:center; font-size:13px; } footer p { margin:4px 0; }
.page-hero { padding:72px 0 60px; background:var(--soft); border-bottom:1px solid var(--line); } .page-hero h1 { margin-bottom:14px; font-size:clamp(36px,5vw,56px); line-height:1.18; } .page-hero p { margin:0; color:var(--muted); font-size:17px; }
.article { display:grid; grid-template-columns:220px minmax(0,790px); justify-content:space-between; gap:70px; } .article>aside { position:sticky; top:100px; align-self:start; display:grid; gap:11px; padding:24px; color:#fff; background:var(--indigo-dark); border-radius:7px; } .article>aside a { color:#d5daf3; } .article article section { padding-bottom:45px; margin-bottom:45px; border-bottom:1px solid var(--line); } .article article section>span { color:var(--berry); font-size:12px; font-weight:900; } .article h2 { margin-top:7px; font-size:30px; } .article p { color:#50586b; }
.support { display:grid; grid-template-columns:290px minmax(0,780px); justify-content:space-between; gap:65px; } .support>aside { align-self:start; padding:28px; background:var(--soft); border-top:5px solid var(--indigo); } .support>aside p { color:var(--muted); } .support>aside a { color:var(--indigo); font-weight:800; } .questions { border-top:1px solid var(--line); } .questions details { border-bottom:1px solid var(--line); } .questions summary { cursor:pointer; padding:21px 40px 21px 0; font-size:18px; font-weight:800; } .questions p { margin:0; padding:0 40px 21px 0; color:var(--muted); }
@media(max-width:960px){.hero-inner{grid-template-columns:1fr 410px;gap:30px}.control-grid{grid-template-columns:1fr 1fr}.station-grid{grid-template-columns:1fr}.station-grid figure{grid-template-columns:180px 1fr}}
@media (max-width: 760px) {
  .container, .header-inner, .hero-inner { width: min(100% - 28px, 1160px); }
  .header-inner { min-height: 64px; }
  .menu { display: grid; place-items: center; margin-left: auto; }
  header .button.small { display: none; }
  nav { display: none; position: absolute; top: 64px; left: 14px; right: 14px; padding: 10px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(32,37,54,.15); }
  nav.open { display: grid; }
  nav a { padding: 11px; border: 0; }
  .hero-inner { min-height: auto; padding: 36px 0 18px; grid-template-columns: 1fr; gap: 16px; }
  .hero h1 { font-size: clamp(38px,12vw,52px); }
  .hero-copy > p { font-size: 15px; }
  .actions { margin: 22px 0 16px; }
  .progress-panel { display: none; }
  .control-stage { min-height: 250px; padding: 35px 45px 10px; }
  .control-stage > img { width: 140px; border-radius: 16px; }
  .meter { top: 0; padding: 8px 10px; }
  .control-card { width: 135px; padding: 8px; }
  .control-card.top { top: 82px; }
  .control-card.bottom { bottom: 18px; }
  .section { padding: 58px 0; }
  .control-grid, .matrix-grid, .article, .support { grid-template-columns: 1fr; gap: 30px; }
  .control-grid article { min-height: 190px; }
  .station-grid figure { grid-template-columns: 125px 1fr; padding: 14px; }
  .station-grid img { width: 125px; max-height: 330px; }
  .faq-preview .container, .download-band .container { align-items: flex-start; flex-direction: column; }
  .page-hero { padding: 54px 0 46px; }
  .article > aside { position: static; }
}
@media(max-width:390px){.brand span{font-size:17px}.actions{flex-direction:column;align-items:flex-start;gap:12px}.control-stage{min-height:238px}.control-card{width:120px}.control-card span{font-size:10px}.station-grid figure{grid-template-columns:105px 1fr}.station-grid img{width:105px}}