/* 基础设置 */
:root{
  --primary:#0055AE;
  --primary-600:#004a98;
  --bg:#ffffff;
  --text:#111314;
  --muted:#6b7280;
  --line:#e5e7eb;
  --surface:#f7f8fb;
  --container:1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans CJK SC', 'Source Han Sans SC', 'Alibaba PuHuiTi', 'Microsoft YaHei', sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:16px;top:16px;background:#000;color:#fff;padding:8px 12px;border-radius:6px;z-index:9999}

/* 头部 */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{height:32px;width:auto}
.site-header .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-name{font-weight:600;font-size:16px;white-space:nowrap}
.top-nav ul{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.top-nav a{color:var(--text);text-decoration:none;font-size:14px}
.top-nav a:hover{color:var(--primary)}
.header-cta{display:flex;gap:10px}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:8px;border:1px solid transparent;text-decoration:none;font-weight:600;cursor:pointer;transition:.2s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-secondary{background:#e8f1fb;color:var(--primary)}
.btn-secondary:hover{background:#dbe9f9}
.btn-outline{background:#fff;border-color:var(--line);color:var(--text)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}

/* 区块通用 */
.section{padding:64px 0}
.section-header{margin-bottom:24px}
.section-header.center{text-align:center}
.section-subtitle{color:var(--muted);margin:6px 0 0}
.section-cta{margin-top:24px;text-align:center}
.section-cta .btn{height:48px;padding:0 22px;font-size:16px}
.section-cta .btn-primary{box-shadow:0 6px 14px rgba(0,85,174,.18)}
.bullet{padding-left:18px}
.bullet li{margin:6px 0}
.tip{color:var(--muted);font-size:14px}

/* 首屏 */
.hero{
  background-image: radial-gradient(800px 600px at 10% 10%, #eaf2fb 0%, rgba(234,242,251,0) 60%), url('img/kbd.jpg');
  background-repeat: no-repeat, no-repeat;
  background-position: 10% 10%, center center;
  background-size: auto, cover;
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.hero h1{font-size:45px;line-height:1.2;margin:0 0 12px}
.subtitle{font-size:20px;color:var(--muted);margin:0 0 16px}
.policy-note{background:#e8f1fb;border-left:4px solid var(--primary);padding:10px 12px;border-radius:8px;color:#0b3b6f}
.hero-actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.device-figure figcaption{color:var(--muted);font-size:12px;margin-top:6px}

/* 科普区 */
.cards-grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.card h3{margin:8px 0}
.icon{width:40px;height:40px;border:2px solid var(--primary);border-radius:10px}
.icon-fat{border-style:dashed}
.icon-muscle{border-color:#3b82f6}
.icon-metabolism{border-color:#10b981}
.why-text{margin-top:16px}
/* why 左右栅格与图片样式 */
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:start}
.why-media img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff}

.policy-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.policy-media img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff}
.policy-content{grid-column:2;align-self:center}
.policy-media{grid-column:1}

/* 优势 3x3 */
.grid-3x3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.adv-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px}
.adv-item h3{margin:0;display:inline-block;vertical-align:middle}
.adv-ic{width:36px;height:36px;border-radius:8px;background:#e8f1fb;border:1px solid #cfe0f6;display:inline-block;margin:0 8px 0 0;position:relative;color:#0b3b6f;vertical-align:middle}
.adv-ic::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.ic-precision::before{content:"精"}
.ic-cert::before{content:"证"}
.ic-coverage::before{content:"参"}
.ic-children::before{content:"波"}
.ic-prescription::before{content:"简"}
.ic-system::before{content:"系"}
.ic-easy::before{content:"管"}
.ic-score::before{content:"广"}
.ic-scenario::before{content:"校"}
/* 优势 + 轮播 两列布局 */
.adv-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.adv-col{min-width:0}
.rep-col{min-width:0}
.rep-col .carousel{margin:0}

/* 轮播 */
.carousel{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff}
.carousel-viewport{outline:none}
.carousel-track{display:flex;transition:transform .35s ease}
.slide{flex:0 0 100%;padding:16px;transform:scale(.98);transition:transform .2s}
.slide.is-active{transform:scale(1)}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:#ffffffcc;border:1px solid var(--line);width:36px;height:36px;border-radius:50%;cursor:pointer}
.carousel-btn:hover{border-color:var(--primary)}
.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}
.carousel-dots{display:flex;gap:8px;justify-content:center;padding:12px}
.carousel-dots .dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--muted);background:#fff;cursor:pointer}
.carousel-dots .dot.is-active{background:var(--primary);border-color:var(--primary)}

/* 单图报告：图片与文字下方居中 */
.report-single{margin:0;text-align:center}
.report-single img{display:block;margin:0 auto;max-width:100%;height:500px;}
.report-single figcaption{margin-top:6px;color:var(--muted);font-size:12px;text-align:center}

/* 参数区 */
.spec-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:center}
.spec-list{margin:0;padding-left:18px}
.spec-list li{margin:8px 0}
.spec-actions{margin-top:12px}

/* 品牌实力 */
.brand-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.brand-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.brand-gallery img{border-radius:8px;border:1px solid var(--line);background:#fff}

/* CTA 区 + 表单 */
.cta-container{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.contact-form{display:grid;grid-template-columns:1fr;gap:10px}
.contact-form input[type="text"],
.contact-form input[type="tel"]{height:40px;border:1px solid var(--line);border-radius:8px;padding:0 12px}
.contact-form .required{color:#ef4444}
.form-tip{color:var(--muted);font-size:14px}
.qr img{width:160px;height:auto;border:1px solid var(--line);border-radius:8px;background:#fff}

/* 页脚 */
.site-footer{background:#0b3b6f;color:#dbeafe}
.site-footer a{color:#93c5fd}
.site-footer .container{padding:18px 20px;text-align:center}

/* 响应式 */
@media (max-width: 1280px){
  :root{--container:1100px}
}
@media (max-width: 1024px){
  .hero-grid,.spec-grid,.brand-grid,.cta-container{grid-template-columns:1fr}
  .hero{background:radial-gradient(800px 600px at 10% 10%, #eaf2fb 0%, rgba(234,242,251,0) 60%)}
  .why-grid{grid-template-columns:1fr}
  .adv-layout{grid-template-columns:1fr}
}
@media (max-width: 768px){
  :root{--container:100%}
  .section{padding:40px 0}
  .hero h1{font-size:32px}
  .cards-grid.three{grid-template-columns:1fr}
  .grid-3x3{grid-template-columns:1fr}
  .policy-grid{grid-template-columns:1fr}
  .policy-content,.policy-media{grid-column:auto;align-self:auto}
}
