/* ===== 综合布线方案页- 独立样式 ===== */
/* 琥珀橙主频· 拓扑图式布局 */

/* Breadcrumb */
.cb-breadcrumb{padding:90px 0 0;background:var(--white);font-size:.85rem;color:var(--slate-400)}
.cb-breadcrumb .wrap{display:flex;gap:8px;align-items:center;padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--slate-100)}
.cb-breadcrumb a{color:var(--slate-500);transition:color .2s}
.cb-breadcrumb a:hover{color:#1E50CC}
.cb-breadcrumb .current{color:#1E50CC;font-weight:600}

/* 工程风Hero */
.cb-hero{position:relative;overflow:hidden;background:#1C1917}
.cb-hero-bg{position:absolute;inset:0;background-image:url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1920&q=90&auto=format&fit=crop');background-size:cover;background-position:center;opacity:.15;z-index:1;pointer-events:none}
.cb-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center;padding:80px 0 72px}
.cb-hero-left{max-width:560px}
.cb-hero-label{font-size:.82rem;font-weight:700;letter-spacing:.15em;color:#3B82F6;margin-bottom:20px}
.cb-hero-title{font-size:2.8rem;font-weight:800;letter-spacing:-.03em;line-height:1.15;color:#fff;margin-bottom:24px}
.cb-hero-title .hl{background:linear-gradient(135deg,#60A5FA,#2563EB);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cb-hero-sub{font-size:1rem;color:rgba(255,255,255,.55);line-height:1.7;margin-bottom:28px}
.cb-hero-tags{display:flex;flex-wrap:wrap;gap:8px}
.cb-hero-tags span{font-size:.78rem;padding:5px 14px;border-radius:6px;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.15);color:#60A5FA;font-weight:500}
.cb-hero-spec{background:rgba(255,255,255,.04);border:1px solid rgba(251,191,36,.15);border-radius:16px;padding:28px;backdrop-filter:blur(10px)}
.cb-spec-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.cb-spec-row:last-child{border-bottom:none}
.cb-spec-label{font-size:.82rem;color:rgba(255,255,255,.4);font-weight:500}
.cb-spec-val{font-size:.88rem;color:#60A5FA;font-weight:600}

/* Section Head */
.cb-sec-head{margin-bottom:48px}
.cb-sec-head.center{text-align:center}
.cb-sec-head .s-title{font-size:2rem;font-weight:800;color:var(--slate-900);letter-spacing:-.02em;margin-bottom:12px}
.cb-sec-head .s-sub{font-size:.95rem;color:var(--slate-500)}

/* 树状拓扑图*/
.cb-topology{padding:96px 0;background:var(--white)}
.cb-topo-tree{max-width:800px;margin:0 auto}
.cb-topo-root{display:flex;flex-direction:column;align-items:center}
.cb-topo-node{background:var(--slate-50);border:2px solid var(--slate-200);border-radius:16px;padding:24px 28px;width:100%;max-width:560px;transition:all .3s var(--ease);position:relative}
.cb-topo-node:hover{border-color:#2563EB;box-shadow:0 8px 24px rgba(37,99,235,.08)}
.cb-topo-l1{border-color:#2563EB;background:linear-gradient(135deg,#EFF6FF,#DBEAFE)}
.cb-topo-l2{border-left:4px solid #2563EB}
.cb-topo-l3{border-left:4px solid #3B82F6}
.cb-topo-l4{border-left:4px solid #60A5FA}
.cb-topo-icon{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#2563EB,#1246B8);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.cb-topo-icon svg{width:22px;height:22px;color:#fff}
.cb-topo-info h4{font-size:1.05rem;font-weight:700;color:var(--slate-900);margin-bottom:6px}
.cb-topo-info p{font-size:.85rem;color:var(--slate-500);line-height:1.5;margin-bottom:10px}
.cb-topo-tags{display:flex;flex-wrap:wrap;gap:6px}
.cb-topo-tags span{font-size:.76rem;padding:4px 10px;border-radius:5px;background:#EFF6FF;color:#0D3A8C;font-weight:500}
.cb-topo-branch{display:flex;flex-direction:column;align-items:center;width:100%;position:relative;padding-top:32px}
.cb-topo-branch::before{content:'';position:absolute;top:0;left:50%;width:2px;height:32px;background:#2563EB;opacity:.3}
.cb-topo-branch .cb-topo-node{max-width:480px}
.cb-topo-branch .cb-topo-branch .cb-topo-node{max-width:400px}

/* 标准规范 */
.cb-standards{padding:96px 0;background:var(--slate-50)}
.cb-std-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cb-std{background:var(--white);border:1px solid var(--slate-200);border-radius:14px;padding:28px 24px;text-align:center;transition:all .3s var(--ease)}
.cb-std:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.06);border-color:#3B82F6}
.cb-std-code{display:inline-block;padding:6px 16px;border-radius:8px;background:#EFF6FF;color:#0D3A8C;font-size:.82rem;font-weight:700;letter-spacing:.02em;margin-bottom:16px}
.cb-std h4{font-size:1rem;font-weight:700;color:var(--slate-800);margin-bottom:8px}
.cb-std p{font-size:.82rem;color:var(--slate-500);line-height:1.5}

/* 施工流程（进度条式） */
.cb-construction{padding:96px 0;background:var(--white)}
.cb-construction-track{max-width:700px;margin:0 auto}
.cb-const-step{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:center;margin-bottom:20px}
.cb-const-progress{height:8px;background:var(--slate-100);border-radius:4px;overflow:hidden}
.cb-const-bar{height:100%;background:linear-gradient(90deg,#2563EB,#3B82F6);border-radius:4px;transition:width .8s var(--ease)}
.cb-const-info{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:12px;padding:20px 24px;transition:all .3s var(--ease)}
.cb-const-info:hover{border-color:#3B82F6;background:var(--white);box-shadow:0 4px 16px rgba(37,99,235,.06)}
.cb-const-num{font-size:.76rem;font-weight:700;color:#2563EB;letter-spacing:.08em;margin-bottom:6px}
.cb-const-info h4{font-size:1rem;font-weight:700;color:var(--slate-800);margin-bottom:6px}
.cb-const-info p{font-size:.84rem;color:var(--slate-500);line-height:1.5}

/* 材料规格行*/
.cb-materials{padding:96px 0;background:var(--slate-50)}
.cb-mat-table{max-width:900px;margin:0 auto;background:var(--white);border-radius:16px;overflow:hidden;border:1px solid var(--slate-200);box-shadow:0 8px 32px rgba(0,0,0,.04)}
.cb-mat-head{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;background:#0D3A8C}
.cb-mat-head>div{padding:18px 24px;color:#fff;font-weight:700;font-size:.9rem}
.cb-mat-row{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;border-bottom:1px solid var(--slate-100);transition:background .2s}
.cb-mat-row:last-child{border-bottom:none}
.cb-mat-row:hover{background:#EFF6FF}
.cb-mat-row>div{padding:16px 24px;font-size:.88rem;color:var(--slate-600)}
.cb-mat-row>div:first-child{font-weight:600;color:var(--slate-800)}

/* 应用场景 */
.cb-scenes{padding:96px 0;background:var(--white)}
.cb-scenes-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cb-scene-item{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:14px;padding:28px 24px;transition:all .3s var(--ease)}
.cb-scene-item:hover{transform:translateY(-4px);border-color:#3B82F6;box-shadow:0 8px 24px rgba(37,99,235,.06)}
.cb-scene-ico{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,#EFF6FF,#DBEAFE);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cb-scene-ico svg{width:24px;height:24px;color:#1E50CC}
.cb-scene-item h4{font-size:1rem;font-weight:700;color:var(--slate-800);margin-bottom:8px}
.cb-scene-item p{font-size:.84rem;color:var(--slate-500);line-height:1.5}

/* Responsive */
@media(max-width:968px){
  .cb-hero-inner{grid-template-columns:1fr;gap:40px}
  .cb-hero-title{font-size:2.1rem}
  .cb-topo-branch .cb-topo-node{max-width:100%}
  .cb-std-grid{grid-template-columns:repeat(2,1fr)}
  .cb-const-step{grid-template-columns:80px 1fr;gap:16px}
  .cb-mat-head,.cb-mat-row{grid-template-columns:1fr 1fr}
  .cb-mat-head>div:nth-child(3),.cb-mat-head>div:nth-child(4),.cb-mat-row>div:nth-child(3),.cb-mat-row>div:nth-child(4){display:none}
  .cb-scenes-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .cb-hero-title{font-size:1.6rem}
  .cb-std-grid{grid-template-columns:1fr}
  .cb-const-step{grid-template-columns:1fr}
  .cb-const-progress{display:none}
  .cb-scenes-list{grid-template-columns:1fr}
}

/* SVG装饰 - 波浪分割线 + 浮动图形 */
.cb-types{position:relative}
.cb-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60px;background-image:url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,70 720,10 1080,40 C1260,55 1380,30 1440,40 L1440,80 L0,80 Z' fill='%23F8FAFC'/%3E%3C/svg%3E');background-size:cover;z-index:2;pointer-events:none}
.cb-types::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='40' cy='40' r='3' fill='%232563EB' opacity='0.1'/%3E%3Ccircle cx='160' cy='60' r='5' fill='%231E50CC' opacity='0.08'/%3E%3Ccircle cx='80' cy='150' r='4' fill='%2360A5FA' opacity='0.1'/%3E%3Ccircle cx='170' cy='170' r='6' fill='%232563EB' opacity='0.06'/%3E%3C/svg%3E');background-repeat:repeat;background-size:200px 200px;opacity:.5;pointer-events:none;z-index:0}