/* ============================================================
   智慧楼宇（smart.html）页面样式
   复用 styles.css 的设计变量与基础排版
   ============================================================ */

/* --- 页头 --- */
.page-hero{
  padding:150px 0 0;border-bottom:1px solid var(--border);
}
.crumb{
  display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--gray-3);margin-bottom:26px;letter-spacing:.06em;
}
.crumb a{transition:color .2s}
.crumb a:hover{color:var(--red)}
.crumb span{opacity:.5}
.page-hero .section-eyebrow{margin-bottom:18px}
.page-hero h1{
  font-size:clamp(36px,4.6vw,64px);font-weight:900;line-height:1.1;
  letter-spacing:-.025em;max-width:20em;margin:0 0 22px;
}
.page-hero .lead{
  font-size:16px;color:var(--gray-4);line-height:1.9;max-width:780px;
}
.page-hero-img{margin-top:52px;aspect-ratio:21/9;overflow:hidden;background:#eee}
.page-hero-img img{width:100%;height:100%;object-fit:cover;display:block}

/* --- 通用小节头部 --- */
.sec-head{
  display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;
  padding-bottom:44px;border-bottom:1px solid var(--border);margin-bottom:54px;
}
.sec-head .section-title{margin-bottom:0}
.sec-head .section-lead{margin:0;font-size:15px}

/* --- 深色区块 --- */
.dark-block{background:var(--gray-1);color:#222;padding:96px 0}
.dark-block .section-eyebrow{color:#ff5252}
.dark-block .section-title{color:#111}
.dark-block .section-lead{color:#5a5a5f}
.dark-block .sec-head{border-color:var(--border)}

/* --- 数据条 --- */
.smart-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border);
}
.smart-stats>div{padding:26px 0 0 20px;border-right:1px solid var(--border)}
.smart-stats>div:first-child{padding-left:0}
.smart-stats>div:last-child{border-right:0}
.smart-stats b{
  display:block;font-family:"Inter",sans-serif;font-size:32px;font-weight:800;
  letter-spacing:-.02em;color:#111;line-height:1.1;
}
.smart-stats span{display:block;margin-top:8px;font-size:12px;color:#77777c}
.smart-stats.k5{grid-template-columns:repeat(5,1fr)}
.smart-stats.k5>div{padding-left:26px}
.smart-stats.k5>div:first-child{padding-left:0}
.smart-stats.k5 b{font-size:28px}
.content-note{
  margin-top:26px;font-size:13px;color:#8a8a8f;letter-spacing:.04em;
}

/* --- 四大能力平台 --- */
.services{background:#fff}
.platform-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--border);border-left:1px solid var(--border);
}
.platform-card{
  padding:40px 36px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  background:#fff;transition:background .3s ease;
}
.platform-card:hover{background:#fcfcfc}
.pc-no{
  font-family:"Inter",sans-serif;font-size:11.5px;letter-spacing:.24em;
  color:var(--red);font-weight:700;
}
.platform-card h3{font-size:23px;font-weight:800;margin:14px 0 12px;color:#111}
.platform-card p{font-size:13.5px;color:var(--gray-4);line-height:1.9;max-width:34em}
.platform-card .pc-img{
  aspect-ratio:16/9;overflow:hidden;margin-bottom:22px;
  background:#0d1117;border:1px solid var(--border);
}
.platform-card .pc-img img{
  width:100%;height:100%;object-fit:cover;object-position:top;
  display:block;transition:transform .6s ease;
}
.platform-card:hover .pc-img img{transform:scale(1.04)}
.pc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pc-chips span{
  padding:6px 12px;border:1px solid var(--border);border-radius:999px;
  font-size:12px;color:var(--gray-4);background:var(--gray-1);
}

/* --- 数据驾驶舱 --- */
.cockpit-sec{background:var(--gray-1);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cockpit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.cockpit-grid figure{margin:0;background:#0d1117;border:1px solid var(--border);overflow:hidden;transition:transform .35s ease, box-shadow .35s ease}
.cockpit-grid figure:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.cockpit-grid img{width:100%;aspect-ratio:787/461;object-fit:cover;display:block}
.cockpit-grid figcaption{
  font-size:12.5px;color:#fff;text-align:center;padding:12px 8px;letter-spacing:.06em;
}

/* --- 产品模块矩阵 --- */
.mod-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--border);border-left:1px solid var(--border);
}
.mod-grid>div{
  padding:28px 26px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  background:#fff;
}
.mod-grid h5{font-size:15.5px;color:#111;margin:0 0 8px;font-weight:700}
.mod-grid p{font-size:12.5px;color:#66666b;line-height:1.8}

/* --- 技术架构 --- */
.arch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.arch-grid>div{border-top:1px solid #111;padding-top:24px}
.arch-ico{display:block;font-size:20px;color:var(--red);margin-bottom:16px;line-height:1}
.arch-grid h5{font-size:16px;font-weight:800;margin:0 0 10px}
.arch-grid p{font-size:13px;color:var(--gray-4);line-height:1.85}

/* --- AI 场景 --- */
.cam-show{max-width:760px;margin:0 auto 44px;border:1px solid var(--border);background:#fff}
.cam-show img{width:100%;display:block}
.cam-show span{
  display:block;font-size:12.5px;color:#77777c;
  text-align:center;padding:14px;letter-spacing:.06em;
}
.smart-scenes{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border);border-left:1px solid var(--border);
}
.smart-scenes>div{
  padding:26px 24px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);
  background:#fff;
  transition:background .3s ease;
}
.smart-scenes>div:hover{background:#fbfbfc}
.smart-scenes h5{font-size:16px;font-weight:700;margin:0 0 8px;color:#111}
.smart-scenes p{font-size:12.5px;color:#66666b;line-height:1.75}

/* --- 底部行动区 --- */
.cta-band{background:var(--gray-1);border-top:1px solid var(--border);padding:76px 0}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-band h2{font-size:clamp(24px,2.4vw,34px);font-weight:900;margin:0 0 10px;letter-spacing:-.02em}
.cta-band p{font-size:14.5px;color:var(--gray-4);margin:0;line-height:1.8}

/* --- 响应式 --- */
@media (max-width:1180px){
  .cockpit-grid{grid-template-columns:repeat(2,1fr)}
  .mod-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  .sec-head{grid-template-columns:1fr;gap:24px}
  .smart-stats.k5{grid-template-columns:repeat(3,1fr);gap:24px 0}
  .smart-stats.k5>div{padding-left:20px}
  .platform-grid{grid-template-columns:1fr}
  .arch-grid{grid-template-columns:repeat(2,1fr);gap:28px}
}
@media (max-width:680px){
  .page-hero{padding:120px 0 0}
  .page-hero-img{margin-top:32px;aspect-ratio:16/9}
  .dark-block{padding:70px 0}
  .smart-stats,.smart-stats.k5{grid-template-columns:repeat(2,1fr);gap:22px 0}
  .smart-stats.k5 b{font-size:22px}
  .smart-scenes{grid-template-columns:1fr}
  .arch-grid{grid-template-columns:1fr}
  .mod-grid{grid-template-columns:1fr}
  .cockpit-grid{grid-template-columns:1fr}
  .platform-card{padding:30px 22px}
  .pc-chips span{font-size:11px}
}