/* =====================================================
   index.html 专属定制层 —— 严格对照 02.psd 制作
   色板：主黄 #ffeb00 / teal #34b7af / 深蓝 #0f2552
         浅底 #f9f5f2 / 联系蓝 #0c1b5c / 版权条 #060d2c
   有效区域：≥1200 视口两侧各留 100px（1920 下 = 1720px）
   rem 基准：模板 html 12px / 13px@768 / 14px@992
   ===================================================== */

body { font-family: poppins, "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif; }

/* ---- 主色：PSD 主黄即模板 text-primary 黄 ---- */
.text-primary { color: #ffeb00 !important; }

/* ---- 浅色屏上白色 chrome（汉堡/圆点）加淡蓝描边保证可见 ---- */
.navbar-toggle .icon-bar { box-shadow: 0 0 0 1px rgba(15, 37, 82, .18); }
#pp-nav span, .pp-slidesNav span { box-shadow: 0 0 0 1px rgba(15, 37, 82, .18); }

/* ---- 右侧圆点导航（PSD：直径14px，间距30px，激活黄） ---- */
#pp-nav li { width: 1rem; height: 1rem; margin: 1.14rem auto; }
#pp-nav span { width: 1rem; height: 1rem; background: #fff; }
#pp-nav li .active span, .pp-slidesNav .active span { background: #ffeb00; transform: none; }

/* ---- 1720px 有效区（≥1200；1920 视口下内容区恰为 1720px） ---- */
@media (min-width: 1200px) {
  .pagepiling .boxed-inner { padding-left: 0; padding-right: 0; }
  .pagepiling .boxed-inner > .boxed { padding-left: 100px; padding-right: 100px; }
  .pagepiling .container { width: auto; max-width: none; padding-left: 0; padding-right: 0; }
  .navbar.boxed { padding-left: 100px; padding-right: 100px; }
}

/* ---- navbar（PSD：仅 logo + 右上汉堡） ---- */
.navbar { padding-top: 2.6rem; }
/* navbar-bg 是无样式的孤类（无 CSS/JS 用途），但会占 flex 第一槽把 logo 顶向中间，隐藏 */
.navbar-bg { display: none; }
.brand img { display: block; height: 3.07rem; width: auto; margin-right: 0; }
.brand-info { display: none; }
.navbar .contacts { display: none !important; }
/* 首页下拉离开第一屏后隐藏 logo，只保留右侧导航按钮（保留占位，汉堡不跳动） */
.navbar .brand { transition: opacity .3s ease, visibility .3s ease; }
.navbar.navbar-nologo .brand { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- 圆点导航靠内（PSD 点中心距右缘约 112px） ---- */
#pp-nav { right: 105px; }
/* 汉堡横条全站统一 42×4；<480 缩小一点 */
.navbar-toggle .icon-bar { width: 42px; height: 4px; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 8px; }
/* 内页 flex：归零 margin 交给 align-items:center 居中；首页 float 单独保留原 margin */
.navbar .navbar-toggle { margin-top: 0; }
.page-home .navbar-toggle { margin-top: .8rem; }
@media (max-width: 479px) {
  .navbar-toggle .icon-bar { width: 28px; height: 3px; }
  .navbar-toggle .icon-bar + .icon-bar { margin-top: 5px; }
}

/* ---- 隐藏分节内滚滚动条（模板黄色滚动条在移动端内滚时很突兀） ---- */
.pp-scrollable { scrollbar-width: none; -ms-overflow-style: none; }
.pp-scrollable::-webkit-scrollbar { display: none; }

/* ---- 模板左下角版权隐藏（版权进第四屏底部深条） ---- */
.copy-bottom { display: none !important; }

/* ---- 逐层入场动画（fx）：count-up.js 在 load+1.1s 给 body 加 fx-go，
        各屏 .active 的 .fx 子元素按 fx-dN 依次上浮进场；
        离屏 0.4s 快速淡出复位，回看可重播；接管模板 .intro 整体动画 ---- */
.pagepiling .section .intro { opacity: 1; transform: none; transition: none; }
.fx { opacity: 0; transform: translateY(2.2rem); }
.fx-go .pagepiling .section.active .fx {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s ease;
}
.fx-go .pagepiling .section:not(.active) .fx {
  opacity: 0; transform: translateY(2.2rem);
  transition: opacity .4s ease, transform .4s ease; transition-delay: 0s;
}
.fx-go .pagepiling .section.active .fx-d1 { transition-delay: .12s; }
.fx-go .pagepiling .section.active .fx-d2 { transition-delay: .24s; }
.fx-go .pagepiling .section.active .fx-d3 { transition-delay: .36s; }
.fx-go .pagepiling .section.active .fx-d4 { transition-delay: .48s; }
.fx-go .pagepiling .section.active .fx-d5 { transition-delay: .6s; }

/* ---- p2/p3/p4：标题后内容间隔加长（p1 不变） ---- */
.fx-go .pagepiling .section-2.active .fx-d1,
.fx-go .pagepiling .section-3.active .fx-d1,
.fx-go .pagepiling .section-4.active .fx-d1 { transition-delay: .35s; }
.fx-go .pagepiling .section-2.active .fx-d2,
.fx-go .pagepiling .section-3.active .fx-d2,
.fx-go .pagepiling .section-4.active .fx-d2 { transition-delay: .55s; }
.fx-go .pagepiling .section-3.active .fx-d3,
.fx-go .pagepiling .section-4.active .fx-d3 { transition-delay: .72s; }
.fx-go .pagepiling .section-3.active .fx-d4,
.fx-go .pagepiling .section-4.active .fx-d4 { transition-delay: .88s; }
.fx-go .pagepiling .section-4.active .fx-d5 { transition-delay: 1.05s; }

/* ==================== 第一屏 首页 ==================== */
.section-1 .display-2 { font-size: 4.4rem; text-transform: none; letter-spacing: -.02em; }
.section-1 .subtitle-top { font-size: 2.57rem; line-height: 1.5; letter-spacing: 0; margin-bottom: 2.6rem; }
.hero-founder { color: #ffeb00; font-size: 2.57rem; font-weight: 600; line-height: 1.4; margin: 0 0 2.2rem; }
.hero-para { color: rgba(255, 255, 255, .92); font-size: 1.28rem; line-height: 1.7; max-width: 36em; margin-bottom: 0; }
.hero-actions { margin-top: 6.6rem; }
.btn-teal { background-color: #34b7af; border-radius: 4px; font-size: 1.28rem; padding: 1.05em 2.2em 1em; }
.btn-teal:hover, .btn-teal:focus { background-color: #2ba49c; color: #fff; }
.btn-round {
  display: inline-block; width: 4.14rem; height: 4.14rem; line-height: 4rem;
  margin-left: 2px; vertical-align: middle; text-align: center;
  background: #34b7af; color: #fff; border-radius: 50%; font-size: 1.28rem;
}
.btn-round:hover { background: #2ba49c; color: #fff; text-decoration: none; }

/* ---- 底部数据条（白底，数字 #333 / 标签 #666） ---- */
.stats-strip { position: absolute; left: 0; right: 0; top: auto; bottom: 0; z-index: 5; background: rgba(255, 255, 255, .85); padding: 2.4rem 0 2.2rem; }
.stats-strip .row { margin: 0; }
.stats-row { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 10rem; }
.stats-row .col-stat { flex: 0 0 auto !important; width: auto !important; max-width: none !important; }
.stat b {
  display: block; font-family: montserrat, poppins, sans-serif; font-weight: 700;
  font-size: 3.43rem; line-height: 1; color: #333; letter-spacing: -.02em;
}
.stat span { display: block; margin-top: .9rem; font-size: 1.21rem; color: #666; }

/* ==================== 第二屏 媒体报道 ==================== */
.pagepiling .section-2 { background: #11224e; }
.section-2 .title-uppercase { text-align: center; color: #fff; font-size: 3.43rem; margin-bottom: 1.2rem; }
.section-2 .sec-en { text-align: center; color: rgba(255, 255, 255, .55); margin: 0; }

/* 顶对齐定位：标题距屏顶 168px，避开顶部数据条（≈152px 高），不再垂直居中 */
.pagepiling .section-2 { padding-top: 0; padding-bottom: 0; }
.pagepiling .section-2 .vertical-centred { vertical-align: top; padding-top: 10rem; }
/* 三视频轮播：点击侧栏小框平滑滑向中框，正在播放（激活）的始终居中 */
.media-stage { position: relative; height: 34rem; margin-top: 4.9rem; }
.media-item {
  position: absolute; top: 2.5rem; display: block; overflow: hidden;
  border: 0 solid #fff; cursor: pointer;
  transition: left .55s ease, top .55s ease, width .55s ease, height .55s ease,
              border-width .55s ease, box-shadow .55s ease;
}
.media-item video, .media-item img { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b1e44; }
.media-item.is-left { left: 1.4rem; width: 60rem; height: 29rem; z-index: 1; }
.media-item.is-right { left: calc(100% - 61.4rem); width: 60rem; height: 29rem; z-index: 1; }
.media-item.is-center {
  left: calc(50% - 35.25rem); top: 0; width: 70.5rem; height: 34rem; z-index: 3;
  border-width: 4px; box-shadow: 0 24px 70px rgba(6, 13, 44, .5); cursor: default;
}
.media-item .media-play { opacity: 0; transition: opacity .55s ease; }
.media-item.is-center .media-play { opacity: 1; }
.media-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 11.5rem; height: 11.5rem; border: 2px solid #fff; border-radius: 50%;
  background: rgba(255, 255, 255, .18); text-align: center;
}
/* style.css 给 .ion-ios-play 定义了 5rem 圆圈盒子（原模板小播放钮），此处还原为纯三角形图标 */
.media-play .ion-ios-play {
  color: #fff; font-size: 4rem; line-height: 11rem; margin: 0; padding: 0 0 0 .8rem;
  width: auto; height: auto; border: 0; border-radius: 0;
}

/* ==================== 第三屏 常见胸骨感染 ==================== */
.pagepiling .section-3 { background: #f9f5f2; }
.section-3 .title-uppercase { text-align: center; color: #0f2552; font-size: 3.43rem; margin-bottom: 1rem; }
.section-3 .sec-en { text-align: center; color: #8b97a5; margin: 0 0 5rem; }

.case-col { margin-bottom: 3rem; }
.case-card {
  position: relative; background: #fff; border-radius: 8px;
  padding: 2.8rem 2.8rem 2.4rem; margin-bottom: 4rem;
  box-shadow: 0 18px 45px rgba(15, 37, 82, .10);
}
/* 气泡尾巴（左下斜三角） */
.case-card::after {
  content: ''; position: absolute; top: 100%; left: 2.2rem; width: 0; height: 0;
  border-left: 1.57rem solid transparent; border-right: 2.85rem solid transparent;
  border-top: 2.85rem solid #fff;
  filter: drop-shadow(0 6px 4px rgba(15, 37, 82, .05));
}
.case-card p { color: rgba(15, 37, 82, .8); font-size: 1.07rem; line-height: 1.75; margin-bottom: 1.1rem; }
.case-card p:last-of-type { margin-bottom: 0; }
.case-card--dark { background: #0f2552; }
.case-card--dark::after { border-top-color: #0f2552; }
.case-card--dark p { color: rgba(255, 255, 255, .9); }

/* ---- 病例卡悬停变蓝 ---- */
.case-card { transition: background-color .25s ease; }
.case-card:hover { background: #0f2552; }
.case-card:hover p { color: rgba(255, 255, 255, .9); }
.case-card:hover::after { border-top-color: #0f2552; }
.case-card--dark:hover { background: #16337a; }
.case-card--dark:hover::after { border-top-color: #16337a; }

.card-btns { display: flex; align-items: center; margin-top: 1.8rem; }
.btn-pill {
  flex: 0 0 auto; background: #34b7af; color: #fff; border-radius: 2em;
  padding: .3em 1.2em; font-size: 1.42rem; line-height: 1.4; margin-right: .6rem;
}
.btn-arrow {
  flex: 0 0 auto; width: 3.14rem; height: 3.14rem; line-height: 3.1rem;
  background: #34b7af; color: #fff; border-radius: 50%; text-align: center; font-size: 1.28rem;
}
.card-tip { margin-left: 1.2rem; font-size: 1.21rem; color: #9aa3b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-card--dark .card-tip { color: rgba(255, 255, 255, .55); }

/* ==================== 第四屏 联系方式 ==================== */
.pagepiling .section-4 { background: #0c1b5c; }
.section-4 .title-uppercase { font-size: 3.43rem; margin-bottom: .8rem; }
.section-4 .sec-en { color: #747d9a; margin: 0 0 3rem; }
.contact-address { margin-top: 2.2rem; }
.contact-address .phone { color: #ffeb00; font-size: 2.28rem; font-weight: 700; letter-spacing: .04em; }
.section-4 h5.text-muted { color: rgba(255, 255, 255, .92) !important; font-size: 1.42rem; font-weight: 400; margin: 1.2rem 0 0; }
.qr-row { margin-top: 4.4rem; }
.qr-item { display: inline-block; width: 11.8rem; margin: 0 1.8rem 0 0; }
.qr-item img { display: block; width: 11.8rem; height: 11.8rem; }

.form-title { color: #fff; font-size: 2.57rem; font-weight: 600; margin: 5.4rem 0 2.5rem; }
.js-form input, .js-form textarea {
  width: 100%; height: 3.7rem; padding: 0 1.4rem;
  background: rgba(255, 255, 255, .4); border: 0; border-radius: 4px;
  color: #fff; font-size: 1.28rem; outline: none;
}
.js-form textarea { height: 12.3rem; padding: 1.1rem 1.4rem; resize: none; }
.js-form input:focus, .js-form textarea:focus { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.js-form ::placeholder { color: rgba(255, 255, 255, .85); opacity: 1; }
.section-4 .btn-teal {
  float: right; background: #fff; color: #0f2552;
  border-radius: 2em; font-size: 1.28rem; padding: 1.1em 2.6em 1em;
}
.section-4 .btn-teal:hover, .section-4 .btn-teal:focus { background: #f3ca2f; color: #0f2552; }

/* ---- 第四屏底部版权条 ---- */
.copy-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 3.14rem; line-height: 3.14rem; background: #060d2c;
  color: #d2d2d2; text-align: center; font-size: 1rem;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ==================== 响应式微调 ==================== */
@media (max-width: 991px) {
  .media-stage { height: auto; margin-top: 3rem; }
  .media-stage .media-item { position: static; width: 100%; height: auto; }
  .media-item.is-left, .media-item.is-right { display: none; }
  .media-item video, .media-item img { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  /* 移动端整体缩小：rem 基准 12px -> 10px（约 -17%，标题/正文/间距同步缩小） */
  html { font-size: 10px; }
  /* 数据条改为文档流（不再遮挡 hero 文案），两列网格 */
  .stats-strip { position: static; background: #fff; padding: 1.8rem 0 1.6rem; margin-top: 2.4rem; }
  .stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; padding: 0 1.7rem; }
  .stat b { font-size: 2.4rem; }
  .stat span { margin-top: .5rem; font-size: 1.1rem; }
  /* 第四屏版权条入流 */
  .copy-strip { position: static; margin-top: 2.2rem; }
  /* 二维码并排 */
  .qr-row { display: flex; gap: 1.2rem; }
  .qr-item { margin: 0; }
  .hero-actions { margin-top: 3rem; }
  .form-title { margin-top: 2.4rem; }
  .card-tip { white-space: normal; }
  .section-3 .sec-en { margin-bottom: 3rem; }
}