/* ========================================
   BIGBONE Global Bone Health Platform
   Main Stylesheet
======================================== */


/* ========================================
   1. CSS Variables
======================================== */

:root{
  --bg:#f5f7f5;
  --surface:#ffffff;
  --text:#17352f;
  --muted:#6d7c77;

  --primary:#167d6d;
  --primary-dark:#0d5d51;

  --accent:#a8d7cb;
  --accent-light:#e4f3ef;

  --border:#dce5e1;

  --dark:#153b35;

  --shadow:0 12px 35px rgba(20,55,48,.08);

  --radius:22px;
}


/* ========================================
   2. Reset
======================================== */

*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  font-family:
    "Microsoft YaHei",
    "微软雅黑",
    "PingFang SC",
    "Hiragino Sans GB",
    Arial,
    sans-serif;

  background:var(--bg);

  color:var(--text);

  line-height:1.6;
}


button,
input,
select{
  font:inherit;
}


/* Button Reset：把 button 当普通容器用 */
button{
  border:none;
  background:transparent;
  color:inherit;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:inherit;
  display:block;
  width:100%;
  font:inherit;
}

button:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
}


a{
  color:inherit;
  text-decoration:none;
}


/* ========================================
   3. App Container
======================================== */

.app{
  min-height:100vh;
}


/* ========================================
   4. Header / Navigation
======================================== */

.topbar{
  position:sticky;
  top:0;

  z-index:100;

  background:rgba(255,255,255,.92);

  backdrop-filter:blur(16px);

  border-bottom:1px solid var(--border);
}


.nav-wrap{
  max-width:1400px;

  margin:auto;

  padding:14px 28px;

  display:flex;

  align-items:center;

  gap:28px;
}


/* ========================================
   5. Brand
======================================== */

.brand{
  display:flex;

  align-items:center;

  gap:10px;

  cursor:pointer;

  flex-shrink:0;

  width:auto;
}


.brand-logo{
  width:46px;
  height:46px;
  object-fit:contain;
  border-radius:8px;
  display:block;
}


.logo{
  width:42px;
  height:42px;

  border-radius:14px;

  display:flex;

  align-items:center;
  justify-content:center;

  font-weight:800;

  font-size:22px;

  color:white;

  background:
    linear-gradient(
      135deg,
      #1aa88e,
      #126a5d
    );

  box-shadow:
    0 8px 20px
    rgba(22,125,109,.25);
}


.brand h1{
  margin:0;

  font-size:20px;

  line-height:1;

  letter-spacing:.5px;
}


.brand small{
  color:var(--muted);

  font-size:11px;

  display:block;

  margin-top:3px;
}


/* ========================================
   6. Navigation
======================================== */

.nav{
  display:flex;

  align-items:center;

  gap:4px;

  flex:1;

  overflow-x:auto;

  scrollbar-width:none;
}


.nav::-webkit-scrollbar{
  display:none;
}


.nav button{
  border:none;

  background:transparent;

  color:var(--muted);

  padding:8px 10px;

  border-radius:10px;

  white-space:nowrap;

  transition:.2s;

  width:auto;
}


.nav button:hover{
  color:var(--primary);

  background:var(--accent-light);
}


.nav button.active{
  color:var(--primary);

  background:var(--accent-light);

  font-weight:700;
}


/* 双语导航 */

.bilingual-nav{
  display:flex;

  flex-direction:column;

  align-items:center;

  line-height:1.15;
}


.bilingual-nav .en{
  font-size:13px;
}


.bilingual-nav .cn{
  font-size:10px;

  opacity:.75;

  margin-top:2px;
}


/* ========================================
   7. Main
======================================== */

main{
  max-width:1400px;

  margin:auto;

  padding:30px 28px 70px;
}


/* ========================================
   8. Pages
======================================== */

.page{
  display:none;

  animation:fadeIn .35s ease;
}


.page.active{
  display:block;
}


@keyframes fadeIn{

  from{
    opacity:0;
    transform:translateY(8px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}


/* ========================================
   9. Hero
======================================== */

.hero{
  position:relative;

  overflow:hidden;

  border-radius:32px;

  padding:70px;

  min-height:500px;

  display:grid;

  grid-template-columns:
    1.2fr .8fr;

  align-items:center;

  gap:40px;

  background:
    linear-gradient(
      135deg,
      #e7f4f0,
      #f7fbfa
    );
}


.home-hero:before{
  content:"";

  position:absolute;

  width:500px;
  height:500px;

  border-radius:50%;

  right:-180px;
  top:-180px;

  background:
    radial-gradient(
      circle,
      rgba(91,205,180,.25),
      transparent 70%
    );
}


.hero > div{
  position:relative;

  z-index:1;
}


.eyebrow{
  display:inline-block;

  font-size:12px;

  font-weight:700;

  letter-spacing:1.5px;

  color:var(--primary);

  margin-bottom:20px;
}


/* 副标题（英文，大字号） */
.hero-subtitle{
  margin:0 0 18px;

  font-size:clamp(
    42px,
    5vw,
    76px
  );

  line-height:1.05;

  letter-spacing:-2px;

  font-weight:800;
}


.hero-subtitle em{
  color:var(--primary);

  font-style:normal;
}


/* 主品牌标题（中文，小字号） */
.hero-brand{
  margin:0 0 22px;

  font-size:clamp(
    24px,
    2.6vw,
    36px
  );

  line-height:1.2;

  letter-spacing:-0.5px;

  font-weight:700;

  white-space:nowrap;
}


/* BIGBONE 灰色 */
.hero-brand .brand-en{
  color:var(--muted);
}


/* 骨健康大放送 绿色 */
.hero-brand .brand-cn{
  color:var(--primary);

  margin-left:10px;
}

.hero p{
  max-width:680px;

  color:var(--muted);

  font-size:17px;
}


/* ========================================
   10. Buttons
======================================== */

.hero-actions{
  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-top:30px;
}


.btn{
  border:none;

  border-radius:12px;

  padding:12px 22px;

  font-weight:700;

  transition:.2s;

  width:auto;

  display:inline-block;
}


.btn:hover{
  transform:translateY(-2px);
}


.btn.primary{
  background:var(--primary);

  color:white;

  box-shadow:
    0 10px 25px
    rgba(22,125,109,.25);
}


.btn.primary:hover{
  background:var(--primary-dark);
}


.btn.secondary{
  background:white;

  color:var(--text);

  border:1px solid var(--border);
}


/* ========================================
   11. Hero Stats
======================================== */

.hero-stats{
  display:flex;

  flex-wrap:wrap;

  gap:22px;

  margin-top:42px;
}


.hero-stat{
  display:flex;

  flex-direction:column;

  gap:2px;
}


.hero-stat b{
  font-size:13px;
}


.hero-stat span{
  font-size:12px;

  color:var(--muted);
}


/* ========================================
   12. Hero Bone Wheel（首页双层转盘）
======================================== */

.bone-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:360px;
}


.wheel{
  position:relative;

  width:min(100%, 430px);
  aspect-ratio:1 / 1;

  container-type:inline-size;   /* 让内部文字随转盘大小缩放 */

  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}


/* 转盘背后的柔光 */
.wheel::before{
  content:"";
  position:absolute;
  inset:6%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(91,205,180,.30), transparent 70%);
  filter:blur(12px);
}


/* ---------- 外圈 ---------- */

.wheel-ring{
  position:relative;
  display:block;
  width:100%;
  height:100%;

  pointer-events:none;          /* 只有圆弧本身响应拖拽 */
  touch-action:none;            /* 触屏拖拽时不滚动页面 */

  filter:drop-shadow(0 16px 26px rgba(22,125,109,.18));
  transition:transform .15s ease;
}

.ring-layer{
  pointer-events:auto;
  cursor:grab;
}

.wheel.dragging .ring-layer{
  cursor:grabbing;
}

/* 按下骨头时，整体（圆环 + 骨头）一起有"按压"感 */
.wheel:has(.wheel-hub:active) .wheel-ring{
  transform:scale(.975);
}


/* 普通圆弧 */
.seg path{
  fill:rgba(255,255,255,.88);
  stroke:#bddbd2;
  stroke-width:2;
  transition:fill .28s ease, stroke .28s ease;
}

.seg:not(.active):hover path{
  fill:#ecf7f3;
}

.seg text{
  fill:var(--text);
  pointer-events:none;
  transition:fill .28s ease;
}

.seg .seg-en{
  font-size:16px;
  font-weight:600;
  letter-spacing:.3px;
}

.seg .seg-cn{
  font-size:14px;
  font-weight:500;
  opacity:.85;
}

/* 转到最上方的圆弧：换一种风格 */
.seg.active path{
  fill:var(--primary);
  stroke:var(--primary-dark);
}

.seg.active text{
  fill:#ffffff;
}

.seg.active .seg-en{
  font-weight:800;
}

.seg.active .seg-cn{
  font-weight:700;
  opacity:1;
}


/* 圆环内侧底盘 + 顶部指示三角 */
.wheel-base{
  fill:rgba(255,255,255,.55);
  stroke:#cfe5de;
  stroke-width:1.5;
}

.wheel-pointer{
  fill:var(--primary-dark);
  stroke:var(--primary-dark);
  stroke-width:3;
  stroke-linejoin:round;
}


/* ---------- 内圈：骨头按钮 ---------- */

.wheel-hub{
  position:absolute;
  inset:0;
  margin:auto;

  width:52%;
  height:52%;

  border-radius:50%;
  border:1px solid rgba(22,125,109,.18);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;

  text-align:center;
  cursor:pointer;
  z-index:2;

  background:
    radial-gradient(circle at 35% 28%, #ffffff, #eef7f4 72%);

  box-shadow:
    0 14px 32px rgba(22,125,109,.22),
    inset 0 -5px 0 rgba(22,125,109,.07);

  transition:
    transform .14s ease,
    box-shadow .14s ease;

  -webkit-tap-highlight-color:transparent;
}

.wheel-hub:hover{
  transform:translateY(-2px);

  box-shadow:
    0 18px 38px rgba(22,125,109,.28),
    inset 0 -5px 0 rgba(22,125,109,.07);
}

.wheel-hub:active{
  transform:scale(.93);

  box-shadow:
    0 4px 10px rgba(22,125,109,.20),
    inset 0 5px 12px rgba(22,125,109,.16);
}

.wheel-hub-bone{
  font-size:64px;               /* 不支持容器单位时的后备值 */
  font-size:19cqw;
  line-height:1;

  filter:drop-shadow(0 6px 8px rgba(22,125,109,.25));
  transition:transform .14s ease;
}

.wheel-hub:active .wheel-hub-bone{
  transform:scale(.9);
}

.wheel-hub-label{
  margin-top:4px;

  font-size:12px;
  font-size:max(11px, 3.4cqw);
  font-weight:800;

  color:var(--primary-dark);
}

.wheel-hub-go{
  font-size:10px;
  font-size:max(10px, 2.6cqw);

  color:var(--muted);
}

.wheel-hint{
  margin-top:14px;

  font-size:12px;
  letter-spacing:.5px;

  color:var(--muted);
}


/* ========================================
   13. Home Intro
======================================== */

.home-intro{
  display:grid;

  grid-template-columns:
    1fr;

  gap:26px;

  margin-top:35px;
}


.mission{
  padding:35px;

  border-radius:24px;

  background:white;

  box-shadow:var(--shadow);
}


.section-kicker{
  font-size:11px;

  font-weight:800;

  letter-spacing:1.4px;

  color:var(--primary);

  margin-bottom:10px;
}


.section-kicker-light{
  color:#74e7dc;
}


.mission h3{
  font-size:28px;

  line-height:1.25;

  margin:0 0 15px;
}


.mission p{
  color:var(--muted);
}


/* ========================================
   14. Quick Links
======================================== */

.quick-links{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:14px;
}


.quick{
  background:white;

  border:1px solid var(--border);

  border-radius:18px;

  padding:22px;

  cursor:pointer;

  transition:.25s;

  text-align:left;
}


.quick:hover{
  transform:translateY(-4px);

  border-color:var(--accent);

  box-shadow:var(--shadow);
}


.quick b{
  display:block;

  margin-bottom:7px;
}


.quick span{
  color:var(--muted);

  font-size:13px;
}


/* ========================================
   15. Sections
======================================== */

.section{
  margin-top:65px;
}


.section-head{
  display:flex;

  align-items:end;

  justify-content:space-between;

  gap:20px;

  margin-bottom:22px;
}


.section-head h3{
  margin:5px 0;

  font-size:30px;
}


.section-head p{
  margin:0;

  color:var(--muted);
}


.link{
  color:var(--primary);

  font-weight:700;

  cursor:pointer;

  white-space:nowrap;

  width:auto;

  display:inline-block;
}


/* ========================================
   16. Grid
======================================== */

.grid{
  display:grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:20px;
}


.grid.four{
  grid-template-columns:
    repeat(4, 1fr);
}


/* ========================================
   17. Cards
======================================== */

.card{
  background:white;

  border:1px solid var(--border);

  border-radius:22px;

  padding:25px;

  transition:.25s;

  overflow:hidden;

  text-align:left;
}


.card:hover{
  transform:translateY(-5px);

  box-shadow:var(--shadow);
}


.clickable{
  cursor:pointer;
}


.card h4{
  margin:14px 0 10px;

  font-size:19px;

  line-height:1.35;
}


.card p{
  margin:0;

  color:var(--muted);

  font-size:14px;
}


/* ========================================
   18. Tags / Meta
======================================== */

.tag{
  display:inline-flex;

  align-items:center;

  padding:5px 10px;

  border-radius:999px;

  background:var(--accent-light);

  color:var(--primary);

  font-size:11px;

  font-weight:800;
}


.meta{
  display:flex;

  justify-content:space-between;

  gap:10px;

  margin-top:20px;

  padding-top:15px;

  border-top:1px solid var(--border);

  font-size:12px;

  color:var(--muted);
}


/* ========================================
   19. Feature Cards
======================================== */

.feature-card{
  min-height:230px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

  cursor:pointer;
}


.feature-icon{
  font-size:34px;

  margin-bottom:12px;
}


.card-bilingual{
  display:flex;

  flex-direction:column;

  gap:4px;
}


.en-card{
  font-size:20px;
}


.cn-card{
  font-size:13px;

  color:var(--muted);

  font-weight:500;
}


/* 文章卡片中的中文标题（<p class="cn-card">），需压过 .card p 的样式 */
.card p.cn-card{
  margin:0 0 8px;

  font-size:20px;

  line-height:1.35;

  color:#000;

  font-weight:700;
}


/* ========================================
   20. Platform Strip
======================================== */

.platform-strip{
  margin-top:70px;

  padding:50px;

  border-radius:28px;

  background:
    linear-gradient(
      135deg,
      #123e37,
      #1c6358
    );

  color:white;

  display:grid;

  grid-template-columns:
    1.2fr .8fr;

  gap:40px;

  align-items:center;
}


.platform-strip h3{
  font-size:34px;

  margin:10px 0;
}


.platform-strip-sub{
  font-size:.62em;
  font-weight:500;
}


.platform-strip p{
  color:
    rgba(255,255,255,.72);

  max-width:650px;
}


.platform-pill{
  display:flex;

  flex-wrap:wrap;

  gap:10px;
}


.platform-pill span{
  padding:10px 14px;

  border-radius:999px;

  background:
    rgba(255,255,255,.1);

  border:
    1px solid
    rgba(255,255,255,.15);

  font-size:13px;
}


/* ========================================
   21. Page Titles
======================================== */

.page-title{
  margin-bottom:35px;

  padding:25px 0;
}


.page-title h2{
  margin:0 0 15px;

  font-size:42px;
}


.page-title p{
  max-width:800px;

  color:var(--muted);

  font-size:16px;
}


.en-title{
  display:block;

  line-height:1.1;
}


.cn-subtitle{
  display:block;

  margin-top:8px;

  font-size:.5em;

  color:var(--primary);

  font-weight:500;
}


/* ========================================
   22. Filters
======================================== */

.filters{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-bottom:25px;
}


.chip{
  border:1px solid var(--border);

  background:white;

  padding:9px 15px;

  border-radius:999px;

  color:var(--muted);

  transition:.2s;

  width:auto;

  display:inline-block;
}


.chip:hover,
.chip.active{
  background:var(--primary);

  color:white;

  border-color:var(--primary);
}


/* ========================================
   23. Tools
======================================== */

.tool-card{
  position:relative;
}


.coming{
  position:absolute;

  top:18px;
  right:18px;

  font-size:10px;

  font-weight:800;

  color:var(--primary);

  background:var(--accent-light);

  padding:5px 8px;

  border-radius:999px;
}


.tool-ui{
  margin-top:22px;

  display:flex;

  flex-direction:column;

  gap:10px;
}


.tool-ui label{
  font-size:12px;

  color:var(--muted);

  margin-top:4px;
}


.tool-ui input,
.tool-ui select{
  padding:10px 12px;

  border-radius:10px;

  border:1px solid var(--border);

  outline:none;
}


.tool-ui input:focus,
.tool-ui select:focus{
  border-color:var(--primary);
}


.result{
  min-height:22px;

  font-size:13px;

  color:var(--primary);

  font-weight:700;
}


/* ========================================
   24. AI Banner
======================================== */

.banner{
  background:
    linear-gradient(
      135deg,
      #e5f4f0,
      #ffffff
    );

  border:1px solid var(--border);

  border-radius:24px;

  padding:35px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:30px;

  margin-bottom:35px;
}


.banner h3{
  margin:0 0 10px;

  font-size:24px;
}


.banner p{
  margin:0;

  color:var(--muted);
}


.ai-banner{
  flex-direction:column;
  align-items:stretch;
}

.ai-banner-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  flex-wrap:wrap;
}


/* ========================================
   25. Footer
======================================== */

footer{
  margin-top:80px;

  background:#123e37;

  color:white;
}


.footer-wrap{
  max-width:1400px;

  margin:auto;

  padding:55px 28px;

  display:grid;

  grid-template-columns:
    2fr 1fr 1fr;

  gap:45px;
}


.footer-wrap .brand h1{
  color:white;
}


.footer-wrap .brand small{
  color:
    rgba(255,255,255,.6);
}


.footer-wrap p{
  color:
    rgba(255,255,255,.65);
}


.footer-wrap h4{
  margin-top:0;
}


.footer-wrap a{
  display:inline-block;

  margin:4px 0;

  color:
    rgba(255,255,255,.7);

  width:auto;
}


.footer-wrap a:hover{
  color:white;
}


.footer-beian{
  text-align:center;
  padding:16px 28px 24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12px;
  color:rgba(255,255,255,.5);
}

.footer-beian a{
  color:rgba(255,255,255,.5);
  text-decoration:none;
  width:auto;
}

.footer-beian a:hover{
  color:white;
  text-decoration:underline;
}


/* ---------- Explore BIGBONE:2×3(手机 1×6) ---------- */

.grid.explore-grid{
  grid-template-columns:repeat(2, 1fr);
}

#explore{
  scroll-margin-top:120px;              /* 「开始探索」滚动到此处时,不被吸顶页眉遮住 */
}

@media (max-width:1100px){
  #explore{ scroll-margin-top:170px; }  /* 窄屏下导航换行,页眉更高 */
}

@media (max-width:760px){
  .grid.explore-grid{ grid-template-columns:1fr; }
}

/* ---------- Explore BIGBONE:六个标签使用图片背景 ---------- */

.explore-grid .feature-card{
  position:relative;
  min-height:240px;
  background-color:#12362f;              /* 图片缺失时的底色 */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:none;    /* 完全移除边框，线条+颜色一起消失 */
}

/* 深色渐变遮罩:保证白字在任何图片上都清晰 */
.explore-grid .feature-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(252, 252, 252, 0.493) 100%);
  transition:opacity .3s;
}
.explore-grid .feature-card:hover::before{ opacity:.8; }

/* 文字放在遮罩之上 */
.explore-grid .feature-card > *{ position:relative; }

.explore-grid .feature-card .en-card{ color:#167d6d; text-shadow:0 1px 8px rgb(225, 255, 200); }
.explore-grid .feature-card .cn-card{ color:rgba(22, 125, 109,0.654); }
/* ↓↓↓新增下面两行，只修改Explore模块中文标题，别处不受影响 */
.explore-grid .feature-card .cn-card {
  font-size:20px;
  font-weight:700;
}
.explore-grid .feature-card p{ color:rgba(97, 97, 97, 0.751); }
.explore-grid .feature-card .link{ color:#060606; }

/* 各标签对应的图片:文件名 = 标签名小写 */
.explore-grid .feature-card[data-page="learn"]   { background-image:url("../assets/images/learn.jpg"); }
.explore-grid .feature-card[data-page="science"] { background-image:url("../assets/images/science.jpg"); }
.explore-grid .feature-card[data-page="pro"]     { background-image:url("../assets/images/pro.jpg"); }
.explore-grid .feature-card[data-page="library"] { background-image:url("../assets/images/library.jpg"); }
.explore-grid .feature-card[data-page="now"]     { background-image:url("../assets/images/now.jpg"); }
.explore-grid .feature-card[data-page="insights"]{ background-image:url("../assets/images/insights.jpg"); }

/* ---------- 页脚扩展:logo 放大 / 公司版权行 / 备案行 ---------- */

.footer-wrap .brand-logo{
  width:184px;
  height:184px;
}

.footer-brand-text{
  font-size:36px;
  font-weight:800;
  line-height:1.25;
  color:white;
}

.footer-copyright{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  font-size:14px;
  color:rgba(255,255,255,.65);
}

.footer-company-logo{
  width:20px;
  height:20px;
  display:block;
}

.footer-beian{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.beian-sep{
  color:rgba(255,255,255,.35);
}

.gongan-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.gongan-icon{
  width:16px;
  height:16px;
  display:block;
}

@media (max-width:760px){
  .footer-wrap .brand-logo{ width:120px; height:120px; }
  .footer-brand-text{ font-size:26px; }
}


/* ========================================
   26. Article Modal
======================================== */

.article-modal{
  display:none;

  position:fixed;

  inset:0;

  z-index:1000;

  background:
    rgba(10,30,25,.55);

  padding:25px;

  align-items:center;
  justify-content:center;
}


.article-modal.show{
  display:flex;
}


.modal-card{
  position:relative;

  width:min(760px, 100%);

  max-height:85vh;

  overflow-y:auto;

  background:white;

  border-radius:26px;

  padding:45px;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.25);
}


.modal-card h2{
  margin-top:18px;

  line-height:1.3;
}


.modal-card p{
  color:var(--muted);

  white-space:pre-line;
}


.modal-close{
  position:absolute;

  top:16px;
  right:16px;

  width:36px;
  height:36px;

  border:none;

  border-radius:50%;

  background:var(--accent-light);

  color:var(--primary);

  font-size:18px;
}


/* ========================================
   27. Search Result
======================================== */

.search-result-empty{
  padding:30px;

  text-align:center;

  color:var(--muted);

  background:white;

  border-radius:20px;

  border:1px solid var(--border);
}


/* ========================================
   28. Responsive
======================================== */

@media(max-width:1100px){

  .nav-wrap{
    flex-wrap:wrap;
  }

  .nav{
    order:3;
    width:100%;
  }

  .hero{
    grid-template-columns:1fr;
    padding:55px;
  }

  .home-intro{
    grid-template-columns:1fr;
  }

  .grid.four{
    grid-template-columns:repeat(2,1fr);
  }

  .platform-strip{
    grid-template-columns:1fr;
  }

}


@media(max-width:760px){

  .nav-wrap{
    padding:12px 16px;
  }

  main{
    padding:20px 16px 50px;
  }

  .hero{
    padding:38px 25px;
    border-radius:24px;
    min-height:auto;
  }

  .hero-subtitle{
    font-size:45px;
  }

  .hero-brand{
    font-size:20px;
    white-space:normal;
  }

  .bone-visual{
    min-height:auto;
  }

  .wheel{
    width:min(100%, 360px);
  }

  .home-intro{
    margin-top:20px;
  }

  .quick-links{
    grid-template-columns:1fr;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .grid.four{
    grid-template-columns:1fr;
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .section-head h3{
    font-size:25px;
  }

  .page-title h2{
    font-size:34px;
  }

  .platform-strip{
    padding:32px 25px;
    border-radius:24px;
  }

  .platform-strip h3{
    font-size:27px;
  }

  .banner{
    padding:25px;
    flex-direction:column;
    align-items:flex-start;
  }

  .footer-wrap{
    grid-template-columns:1fr;
    padding:45px 20px;
  }

  .modal-card{
    padding:32px 24px;
  }

  .hero-stats{
    gap:14px;
  }

}


/* ========================================
   29. Card Thumbnail（文章卡片缩略图）
======================================== */

.card-thumb{
  display:block;
  width:calc(100% + 50px);
  margin:-25px -25px 16px;
  height:150px;
  object-fit:cover;
  border-radius:22px 22px 0 0;
  background:var(--accent-light);
}


/* ========================================
   30. AI Principle（内联展开，替代原弹窗）
======================================== */

.ai-principle-box{
  display:none;
  margin-top:18px;
  padding:16px 20px;
  border-radius:16px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--border);
  font-size:14px;
  line-height:1.8;
  color:var(--text);
  white-space:pre-line;
}

.ai-principle-box.show{
  display:block;
}


/* ========================================
   31. Mobile tweaks（卡片缩略图）
======================================== */

@media(max-width:760px){

  .card-thumb{
    height:170px;
  }

}


/* ========================================
   32. Misc
======================================== */

.coming-soon{
  margin-top:10px;
  font-size:12px;
  color:var(--muted);
  font-style:italic;
}

.card-pending{
  opacity:.75;
}

.card-pending:hover{
  transform:none;
  box-shadow:none;
}


/* ========================================
   33. Pagination（分类页页码）
======================================== */

.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin:36px 0 10px;
}

.page-btn{
  min-width:38px;
  height:38px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
  width:auto;
}

.page-btn:hover:not(:disabled):not(.active){
  border-color:var(--primary);
  color:var(--primary);
}

.page-btn.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  cursor:default;
}

.page-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.page-ellipsis{
  color:var(--muted);
  padding:0 4px;
}