:root{
  --bg:#f6f9ff;
  --bg2:#eef5ff;
  --card:#ffffff;
  --text:#132238;
  --muted:#607086;
  --line:#dbe7f5;
  --blue:#2f6df6;
  --blue2:#00a3ff;
  --cyan:#2bd4c8;
  --dark:#0b1b35;
  --shadow:0 22px 60px rgba(23,70,161,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial,"Microsoft YaHei",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(47,109,246,.13), transparent 32%),
    radial-gradient(circle at 85% 15%, rgba(43,212,200,.16), transparent 25%),
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}
a{text-decoration:none;color:inherit}
.container{width:min(1120px, calc(100% - 32px));margin:0 auto}
.header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(219,231,245,.8);
}
.nav{
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;color:var(--dark)}
.brand img{width:42px;height:42px;border-radius:12px;box-shadow:0 8px 22px rgba(47,109,246,.18)}
.menu{display:flex;align-items:center;gap:22px;font-size:14px;color:#38506d}
.menu a:hover{color:var(--blue)}
.nav-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 18px;border-radius:999px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;font-weight:700;box-shadow:0 12px 28px rgba(47,109,246,.25);
}
.hero{padding:76px 0 58px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;background:#eaf2ff;color:#1d58d8;
  border:1px solid #d6e5ff;font-size:13px;font-weight:700;
}
.badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(43,212,200,.16)}
h1{font-size:58px;line-height:1.05;margin:18px 0 18px;letter-spacing:-1.8px;color:var(--dark)}
.hero p{font-size:18px;line-height:1.8;color:var(--muted);margin:0 0 26px}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 28px;border-radius:16px;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
  color:#fff;font-weight:800;box-shadow:0 18px 34px rgba(47,109,246,.26);
}
.secondary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 22px;border-radius:16px;border:1px solid var(--line);
  background:rgba(255,255,255,.76);color:#30455f;font-weight:700;
}
.hero-card{
  position:relative;background:rgba(255,255,255,.72);border:1px solid rgba(219,231,245,.9);
  border-radius:32px;padding:30px;box-shadow:var(--shadow);overflow:hidden;
}
.hero-card::before{
  content:"";position:absolute;inset:-80px -80px auto auto;width:230px;height:230px;
  background:linear-gradient(135deg,rgba(47,109,246,.22),rgba(43,212,200,.24));border-radius:50%;
}
.app-logo{width:132px;height:132px;border-radius:34px;display:block;margin:0 auto 22px;position:relative}
.version{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0;
}
.vbox{background:#f8fbff;border:1px solid var(--line);border-radius:18px;padding:16px}
.vbox strong{display:block;font-size:26px;color:var(--dark)}
.vbox span{font-size:13px;color:var(--muted)}
.check-list{display:grid;gap:12px;margin-top:18px}
.check{display:flex;align-items:flex-start;gap:10px;color:#40536b;line-height:1.6}
.check b{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;background:#e8f7f5;color:#039786;flex:0 0 auto}
.section{padding:54px 0}
.section-title{text-align:center;margin-bottom:30px}
.section-title h2{font-size:34px;margin:0 0 12px;color:var(--dark)}
.section-title p{margin:0;color:var(--muted);line-height:1.7}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{
  background:rgba(255,255,255,.78);border:1px solid var(--line);
  border-radius:24px;padding:24px;box-shadow:0 14px 34px rgba(23,70,161,.08);
}
.card .icon{
  width:48px;height:48px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#eaf2ff,#e9fffc);font-size:24px;margin-bottom:16px;
}
.card h3{margin:0 0 10px;font-size:18px;color:var(--dark)}
.card p{margin:0;color:var(--muted);line-height:1.7;font-size:14px}
.platforms{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.platform{
  background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;text-align:center;
  box-shadow:0 14px 32px rgba(23,70,161,.08);
}
.platform img{width:72px;height:72px;object-fit:contain;margin-bottom:12px}
.platform strong{display:block;color:var(--dark)}
.info-band{
  background:linear-gradient(135deg,#0e2344,#173b73);
  color:#fff;border-radius:32px;padding:34px;display:grid;grid-template-columns:1.4fr .6fr;gap:24px;align-items:center;
  box-shadow:0 20px 50px rgba(14,35,68,.24);
}
.info-band h2{font-size:30px;margin:0 0 12px}
.info-band p{margin:0;color:#c9d9ef;line-height:1.8}
.info-band .primary{background:#fff;color:#12325f;box-shadow:none}
.footer{padding:36px 0;color:#607086;font-size:14px;text-align:center;border-top:1px solid var(--line);margin-top:40px}
.footer-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:12px 0}
.footer-links a{color:#38506d}
.page-hero{padding:58px 0 34px;text-align:center}
.page-hero h1{font-size:42px;margin:0 0 12px}
.content-card{
  background:#fff;border:1px solid var(--line);border-radius:26px;
  padding:32px;box-shadow:var(--shadow);line-height:1.9;color:#344763;
}
.content-card h2,.content-card h3{color:var(--dark)}
.content-card p{margin:0 0 14px}
.content-card ol{padding-left:24px}
.content-list{display:grid;gap:14px}
.content-item{padding:16px;border:1px solid var(--line);border-radius:18px;background:#f8fbff}
@media(max-width:900px){
  h1{font-size:42px}
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .platforms{grid-template-columns:repeat(2,1fr)}
  .info-band{grid-template-columns:1fr}
  .menu{display:none}
}
@media(max-width:560px){
  body{background:#f6f9ff}
  h1{font-size:34px}
  .cards,.platforms{grid-template-columns:1fr}
  .nav{height:64px}
  .brand{font-size:17px}
  .hero{padding:44px 0 36px}
}


/* ===============================
   自适应修复版
   解决大屏太空、内容太窄、不同分辨率缩放不自然的问题
   =============================== */

.container{
  width:min(94vw, 1680px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.nav{
  height:clamp(64px, 5vw, 84px) !important;
}

.hero{
  min-height:calc(100vh - 84px) !important;
  padding:clamp(44px, 6vw, 112px) 0 clamp(42px, 5vw, 92px) !important;
  display:flex !important;
  align-items:center !important;
}

.hero-grid{
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr) !important;
  gap:clamp(32px, 5vw, 110px) !important;
  align-items:center !important;
}

h1{
  font-size:clamp(42px, 4.1vw, 82px) !important;
  line-height:1.05 !important;
  letter-spacing:clamp(-2.5px, -0.12vw, -1px) !important;
}

.hero p{
  font-size:clamp(16px, 1.08vw, 22px) !important;
  line-height:1.85 !important;
  max-width:760px !important;
}

.badge{
  font-size:clamp(12px, .78vw, 15px) !important;
}

.primary,
.secondary,
.nav-btn{
  font-size:clamp(14px, .9vw, 17px) !important;
}

.primary{
  padding:clamp(14px, 1vw, 18px) clamp(24px, 2vw, 38px) !important;
}

.secondary{
  padding:clamp(13px, .95vw, 17px) clamp(20px, 1.6vw, 30px) !important;
}

.hero-card{
  width:100% !important;
  max-width:none !important;
  min-height:auto !important;
  padding:clamp(24px, 2.4vw, 48px) !important;
  border-radius:clamp(24px, 2vw, 38px) !important;
}

.app-logo{
  width:clamp(112px, 8vw, 170px) !important;
  height:clamp(112px, 8vw, 170px) !important;
}

.version{
  gap:clamp(10px, 1vw, 18px) !important;
}

.vbox{
  padding:clamp(14px, 1.2vw, 22px) !important;
}

.vbox strong{
  font-size:clamp(22px, 1.7vw, 34px) !important;
}

.check{
  font-size:clamp(13px, .86vw, 16px) !important;
}

.section{
  padding:clamp(46px, 5vw, 86px) 0 !important;
}

.section-title{
  margin-bottom:clamp(24px, 2.8vw, 44px) !important;
}

.section-title h2{
  font-size:clamp(30px, 2.5vw, 48px) !important;
}

.section-title p{
  font-size:clamp(14px, .95vw, 18px) !important;
}

.cards{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:clamp(16px, 1.6vw, 30px) !important;
}

.card{
  min-height:clamp(150px, 12vw, 230px) !important;
  padding:clamp(20px, 1.9vw, 36px) !important;
  border-radius:clamp(20px, 1.6vw, 30px) !important;
}

.card .icon{
  width:clamp(44px, 3.2vw, 60px) !important;
  height:clamp(44px, 3.2vw, 60px) !important;
}

.card h3{
  font-size:clamp(17px, 1.12vw, 22px) !important;
}

.card p{
  font-size:clamp(13px, .88vw, 16px) !important;
}

.platforms{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:clamp(14px, 1.5vw, 26px) !important;
}

.platform{
  padding:clamp(18px, 1.8vw, 34px) !important;
  border-radius:clamp(20px, 1.6vw, 30px) !important;
}

.platform img{
  width:clamp(58px, 4.5vw, 88px) !important;
  height:clamp(58px, 4.5vw, 88px) !important;
}

.info-band{
  width:100% !important;
  padding:clamp(30px, 3.2vw, 62px) clamp(28px, 4vw, 78px) !important;
  border-radius:clamp(24px, 2vw, 38px) !important;
  grid-template-columns:minmax(0, 1.35fr) minmax(220px, .65fr) !important;
  gap:clamp(20px, 3vw, 48px) !important;
}

.info-band h2{
  font-size:clamp(26px, 2.2vw, 42px) !important;
}

.info-band p{
  font-size:clamp(14px, 1vw, 18px) !important;
}

/* 2K / 4K 超宽屏：去掉内容发空，整体继续放大 */
@media(min-width:1800px){
  .container{
    width:min(90vw, 1900px) !important;
  }
  .hero-grid{
    gap:clamp(80px, 6vw, 140px) !important;
  }
  .hero-card{
    transform:scale(1.03);
    transform-origin:center right;
  }
}

/* 普通 1366-1600 宽屏：不要过窄 */
@media(min-width:1200px) and (max-width:1799px){
  .container{
    width:min(92vw, 1480px) !important;
  }
}

/* 平板和小屏：自动变一列，避免挤压 */
@media(max-width:980px){
  .container{
    width:min(100% - 28px, 760px) !important;
  }
  .hero{
    min-height:auto !important;
  }
  .hero-grid{
    grid-template-columns:1fr !important;
    gap:34px !important;
  }
  h1{
    font-size:clamp(34px, 8vw, 48px) !important;
  }
  .hero p{
    font-size:16px !important;
  }
  .cards{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .platforms{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .info-band{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:560px){
  .container{
    width:calc(100% - 22px) !important;
  }
  .cards,
  .platforms{
    grid-template-columns:1fr !important;
  }
  .primary,
  .secondary{
    width:100% !important;
  }
  .hero-card{
    padding:22px !important;
  }
}