:root{
  --brand:#007ee5;
  --brand-600:#006fd1;
  --ink:#1f2a44;
  --muted:#5f6b85;
  --bg:#f7f9fc;
  --card:#ffffff;
  --border:#e7eef7;
  --ring:0 0 0 3px rgba(0,126,229,.2);
  --radius:12px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:none;box-shadow:var(--ring)}

.dl-breadcrumb{
  background:#f6f9ff;
  border-bottom:1px solid var(--border);
  padding:10px 20px;
  color:var(--muted);
  font-size:14px;
}
.dl-breadcrumb a{color:var(--brand);font-weight:600}
.dl-breadcrumb span{margin:0 6px}

.dl-hero{
  max-width:1120px;
  margin:28px auto 8px;
  padding:0 20px 8px;
  display:grid;
  grid-template-columns: 1.05fr 1.6fr;
  gap:22px;
}
.dl-hero__platforms{
  align-content:flex-start;
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:10px;
}
.plat{
  appearance:none;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--ink);
  padding:10px 12px;
  border-radius:10px;
  font-weight:600;
  text-align:left;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:transform .08s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease;
}
.plat:hover{border-color:#d7e5ff}
.plat:active{transform:translateY(1px)}
.plat.is-active{
  border-color:var(--brand);
  background:linear-gradient(180deg,#fff, #f5f9ff);
  box-shadow:0 6px 18px rgba(43,114,255,.10);
  color:#173a8a;
}
.plat__icon{width:20px;height:20px;flex:0 0 20px}

.dl-hero__content{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 20px 18px;
  box-shadow:0 10px 24px rgba(0,0,0,.04);
}
.dl-hero__content h1{
  margin:0 0 8px;
  font-size:28px;
  line-height:1.3;
  letter-spacing:.2px;
  color:#121a2e;
}
.dl-hero__content p{margin:0 0 14px;color:var(--muted)}

.dl-hero__cta{display:flex;align-items:center;gap:14px;margin:8px 0 6px}
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  min-width:140px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  letter-spacing:.2px;
  border:1px solid transparent;
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary:hover{background:var(--brand-600);text-decoration:none}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:focus-visible{box-shadow:var(--ring)}

.dl-hero__sub{font-size:14px;color:#3b4a68}
.dl-hero__note{margin-top:6px;color:#6a7692;font-size:14px}

.dl-features{
  max-width:1120px;
  margin:10px auto 20px;
  padding:0 20px;
}
.feat-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}
.feat{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 14px;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
  transition:transform .08s ease, box-shadow .15s ease, border-color .15s ease;
}
.feat:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.06)}
.feat h3{margin:0 0 6px;font-size:16px;color:#17223a}
.feat p{margin:0;color:#5b6884}
.feat .more{display:inline-block;margin-top:10px;font-size:14px;font-weight:600}

.dl-steps{
  max-width:1120px;
  margin:14px auto 8px;
  padding:0 20px;
}
.dl-steps h2{margin:0 0 8px;font-size:22px;color:#121a2e}
.steps{
  counter-reset:step;
  list-style:none;
  margin:10px 0 4px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px;
}
.steps li{
  position:relative;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 14px 14px 44px;
}
.steps li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:12px;top:12px;
  width:24px;height:24px;
  border-radius:50%;
  background:#eef3ff;
  color:#244cbd;
  font-weight:700;
  display:grid;place-items:center;
  font-size:13px;
}
.steps__tip{color:#6a7692;font-size:14px;margin:8px 0 0}

.dl-sysreq{
  max-width:1120px;
  margin:8px auto 18px;
  padding:0 20px;
}
.dl-sysreq h2{margin:0 0 10px;font-size:22px}
.sysreq-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.sysreq-grid>div{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}
.sysreq-grid h3{margin:0 0 6px;font-size:16px;color:#17223a}
.sysreq-grid p{margin:0;color:#5b6884}

.dl-faq{
  max-width:1120px;
  margin:8px auto 28px;
  padding:0 20px;
}
.dl-faq h2{margin:0 0 10px;font-size:22px}
.dl-faq details{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 14px;
  background:#fff;
  margin:10px 0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dl-faq details[open]{box-shadow:0 10px 24px rgba(0,0,0,.05)}
.dl-faq summary{
  cursor:pointer;
  list-style:none;
  font-weight:700;
  color:#17223a;
}
.dl-faq summary::-webkit-details-marker{display:none}
.dl-faq summary::after{
  content:"+";
  float:right;
  color:#7b879a;
  transition:transform .2s ease;
}
.dl-faq details[open] summary::after{
  content:"–";
  transform:translateY(-1px);
}
.dl-faq p{margin:8px 0 0;color:#5f6b85}

@media (max-width:1024px){
  .dl-hero{grid-template-columns:1fr;gap:16px}
  .dl-hero__platforms{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .sysreq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .dl-hero__platforms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sysreq-grid{grid-template-columns:1fr}
}