/* ============================================================
* 智帮咨询 V4 · 基础样式 base.css
* - reset + typography + 共享组件（nav/footer/breadcrumb）
* - 工具类（.container .reveal .text-* .grid-*）
* - 引用方式：在 中先 tokens.css，后 base.css
* 版本：V4.0
* ============================================================ */
/* ========== Reset ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
font-family:var(--font-body);
color:var(--text);
background:var(--white);
line-height:var(--lh-normal);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color var(--duration-fast) var(--ease-out)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
ul,ol{list-style:none}
table{border-collapse:collapse;border-spacing:0}
/* 标题用阿里巴巴普惠体 */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:800;line-height:var(--lh-tight);color:var(--text)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-xl)}
h5{font-size:var(--fs-lg)}
h6{font-size:var(--fs-md)}
/* 等宽用于数据 */
.num,.stat-value,.kpi-num,[class*="-num"]{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* ========== 容器与栅格 ========== */
.container{max-width:var(--container-base);margin:0 auto;padding:0 var(--space-md);width:100%}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--space-md);width:100%}
.container-wide{max-width:var(--container-wide);margin:0 auto;padding:0 var(--space-md);width:100%}
/* ========== 区块通用 ========== */
section{padding:var(--space-2xl) 0}
.section-alt{background:var(--bg-2nd)}
.section-dark{background:#263238;color:var(--white)}
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--white)}
.section-head{text-align:center;margin-bottom:var(--space-xl)}
.section-label{display:inline-block;font-size:var(--fs-sm);font-weight:700;color:var(--accent);letter-spacing:1.5px;margin-bottom:var(--space-sm);padding:4px 12px;background:var(--accent-light);border-radius:var(--radius-pill)}
.section-title{font-size:var(--fs-h2);margin-bottom:var(--space-sm)}
.section-desc{font-size:var(--fs-md);color:var(--text-gray);max-width:720px;margin:0 auto;line-height:var(--lh-loose)}
.section-dark .section-desc{color:var(--white-60)}
/* ========== 按钮 ========== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:700;line-height:1;transition:all var(--duration-base) var(--ease-out);cursor:pointer}
.btn-primary{background:var(--accent);color:var(--white);box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 8px 28px rgba(var(--accent-rgb),.4)}
.btn-primary:active{transform:translateY(0);background:var(--accent-deep)}
.btn-secondary{background:var(--white);color:var(--text-title);border:1.5px solid var(--text-title)}
.btn-secondary:hover{background:#263238;color:var(--white);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--text-title);padding:8px 0;font-weight:600;border-bottom:1.5px solid var(--text-title)}
.btn-ghost:hover{color:var(--accent);border-color:var(--accent)}
.btn-on-dark{background:var(--white);color:var(--text-title)}
.btn-on-dark:hover{background:var(--accent);color:var(--white)}
/* 导航栏样式见 assets/nav.css（全站统一）*/
/* ========== Breadcrumb ========== */
.breadcrumb{padding:var(--space-sm) 0;font-size:var(--fs-sm);color:var(--text-gray)}
.breadcrumb a{color:var(--text-gray)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb .sep{margin:0 8px;color:var(--text-light)}
.breadcrumb .current{color:var(--text);font-weight:600}
/* ========== Footer ========== */
footer.site-footer{background:#263238;color:var(--white-60);padding:var(--space-2xl) 0 var(--space-md);margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-xl);margin-bottom:var(--space-xl)}
.footer-brand h4{font-size:var(--fs-md);font-weight:700;color:var(--white);margin-bottom:var(--space-xs);letter-spacing:1px;font-family:var(--font-heading)}
.footer-brand p{font-size:var(--fs-sm);line-height:var(--lh-loose);margin-top:var(--space-sm)}
.footer-col h5{font-size:var(--fs-sm);font-weight:700;color:var(--white);margin-bottom:var(--space-sm);letter-spacing:.5px}
.footer-col a{display:block;padding:6px 0;font-size:var(--fs-sm);color:var(--white-60)}
.footer-col a:hover{color:var(--white)}
.footer-col .hot{display:inline-block;font-size:10px;padding:1px 6px;background:var(--accent);color:var(--white);border-radius:3px;margin-left:6px;font-weight:700;vertical-align:middle}
.footer-brand p,
.footer-col p{color:var(--footer-subtle)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-md);border-top:1px solid rgba(255,255,255,.12);font-size:var(--fs-xs);color:var(--footer-text)}
/* ========== 卡片基础 ========== */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-md);transition:all var(--duration-base) var(--ease-out)}
.card:hover{box-shadow:var(--shadow-float);transform:translateY(-4px);border-color:var(--accent)}
.card-alt{background:var(--bg-3rd)}
/* ========== Reveal 动画（IntersectionObserver） ========== */
.reveal{opacity:0;transform:translateY(30px);transition:all var(--duration-deliberate) var(--ease-out)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:100ms}
.reveal-delay-2{transition-delay:200ms}
.reveal-delay-3{transition-delay:300ms}
.reveal-delay-4{transition-delay:400ms}
.reveal-delay-5{transition-delay:500ms}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}
/* ========== 工具类 ========== */
.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}
.text-gray{color:var(--text-gray)}
.text-light{color:var(--text-light)}
.text-vermilion{color:var(--accent)}
.text-navy{color:var(--text-title)}
.text-gold{color:var(--accent)}
.text-success{color:var(--success)}
.mt-xs{margin-top:var(--space-xs)} .mt-sm{margin-top:var(--space-sm)} .mt-md{margin-top:var(--space-md)} .mt-lg{margin-top:var(--space-lg)} .mt-xl{margin-top:var(--space-xl)}
.mb-xs{margin-bottom:var(--space-xs)} .mb-sm{margin-bottom:var(--space-sm)} .mb-md{margin-bottom:var(--space-md)} .mb-lg{margin-bottom:var(--space-lg)} .mb-xl{margin-bottom:var(--space-xl)}
.flex{display:flex} .flex-col{flex-direction:column}
.items-center{align-items:center} .justify-between{justify-content:space-between} .justify-center{justify-content:center}
.gap-xs{gap:var(--space-xs)} .gap-sm{gap:var(--space-sm)} .gap-md{gap:var(--space-md)} .gap-lg{gap:var(--space-lg)}
.grid{display:grid}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
/* ========== 工业徽章 / 标签 ========== */
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-pill);font-size:var(--fs-xs);font-weight:600;letter-spacing:.5px}
.badge-navy{background:#263238;color:var(--white)}
.badge-vermilion{background:var(--accent-light);color:var(--accent-deep)}
.badge-gold{background:var(--bg-3rd);color:var(--text-body);border:1px solid var(--accent)}
.badge-outline{background:transparent;border:1px solid var(--border-soft);color:var(--text-gray)}
.badge-hr{background:var(--hr-bg-2);color:var(--hr-text);border:1px solid var(--hr-border)}
/* ========== 图片占位 / 视觉资产位 ========== */
.image-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);width:100%;aspect-ratio:3/2;min-height:0;padding:var(--space-md);border:2px dashed rgba(var(--accent-rgb),.9);border-radius:var(--radius-lg);background:linear-gradient(135deg,rgba(23,38,51,.92),rgba(23,38,51,.86)),repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 1px,transparent 1px 14px);color:var(--white);overflow:hidden;box-shadow:var(--shadow-soft);text-align:center}
.image-slot::before{content:'请替换为真实图片';position:absolute;top:14px;right:14px;z-index:1;padding:5px 10px;border-radius:var(--radius-pill);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.75);font-size:11px;font-weight:800;letter-spacing:1px}
.image-slot::after{content:'';position:absolute;inset:14px;border:1px solid rgba(255,255,255,.18);border-radius:calc(var(--radius-lg) - 4px);pointer-events:none}
.image-slot .slot-kicker{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:120px;padding:7px 14px;border-radius:var(--radius-pill);background:rgba(var(--accent-rgb),.2);border:1px solid rgba(var(--accent-rgb),.55);color:var(--accent);font-size:0;font-weight:900;letter-spacing:1px}
.image-slot .slot-kicker::before{content:'图片占位图';color:var(--accent);font-family:var(--font-heading);font-size:14px;letter-spacing:1px}
.image-slot .slot-title{display:none}
.image-slot .slot-meta{position:relative;z-index:1;width:min(100%,560px);margin-top:0;padding:8px 10px;border-radius:var(--radius-sm);background:rgba(23,38,51,.58);border:1px dashed rgba(var(--accent-rgb),.55);font-size:12px;line-height:var(--lh-loose);color:rgba(255,255,255,.78)}
.image-slot.light{background:linear-gradient(135deg,var(--white),var(--bg-3rd)),repeating-linear-gradient(45deg,rgba(26,29,32,.04) 0 1px,transparent 1px 14px);color:var(--text);border-color:var(--accent);box-shadow:var(--shadow-card)}
.image-slot.light::before{background:var(--bg-3rd);border-color:var(--accent);color:var(--accent-deep)}
.image-slot.light::after{border-color:var(--border-soft)}
.image-slot.light .slot-kicker{background:var(--bg-3rd);color:var(--accent-deep);border-color:var(--accent)}
.image-slot.light .slot-kicker::before{color:var(--text-light)}
.image-slot.light .slot-title{color:var(--text-title)}
.image-slot.light .slot-meta{background:var(--white);border-color:var(--border-soft);color:var(--text-gray)}
.image-slot.compact{aspect-ratio:3/2;padding:var(--space-sm)}
.image-slot.hero-media{aspect-ratio:4/3}
.image-slot.case-media{aspect-ratio:900/520;border-style:solid;border-color:rgba(255,255,255,.14);border-radius:var(--radius-md);box-shadow:none}
.image-slot.report-media{aspect-ratio:10/7}
.image-slot.report-wide{aspect-ratio:5/3}
.image-slot.map-media{aspect-ratio:12/7}
.visual-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-lg);align-items:center}
@media(max-width:900px){.visual-grid{grid-template-columns:1fr}}
/* ========== 数据卡片 ========== */
.stat{display:flex;flex-direction:column;align-items:flex-start;padding:var(--space-md);border-left:3px solid var(--accent);background:var(--white)}
.stat-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-h2);font-weight:800;color:var(--text-title);line-height:1}
.stat-label{margin-top:var(--space-xs);font-size:var(--fs-sm);color:var(--text-gray);font-weight:500}
/* ========== CTA 区（全局共享） ========== */
.product-cta{padding:var(--space-2xl) 0;background:#263238;color:#E8ECF0;text-align:center;position:relative;overflow:hidden}
.product-cta::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml;utf8,");background-size:100px 100px;pointer-events:none}
.product-cta .container{position:relative;z-index:1}
.product-cta h2{color:#E8ECF0;font-size:clamp(24px,3.5vw,36px);margin-bottom:var(--space-sm);max-width:760px;margin-left:auto;margin-right:auto}
.product-cta h2 span{color:var(--accent)}
.product-cta p{color:#AEB8C1;font-size:var(--fs-md);max-width:600px;margin:0 auto var(--space-lg);line-height:var(--lh-loose)}
.product-cta-actions{display:flex;justify-content:center;gap:var(--space-md);flex-wrap:wrap}
.product-cta-actions .btn-secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
.product-cta-actions .btn-secondary:hover{background:var(--accent);color:var(--white)}
.product-cta-note{margin-top:var(--space-md);font-size:var(--fs-xs);color:#AEB8C1}
/* ========== 工业纹理（齿轮装饰）SVG 背景 ========== */
.industrial-bg{position:relative;overflow:hidden}
.industrial-bg::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-image:url("data:image/svg+xml;utf8,");background-size:80px 80px;pointer-events:none;z-index:0}
.industrial-bg>*{position:relative;z-index:1}
/* ========== 响应式 ========== */
@media(max-width:1024px){
:root{--fs-hero:48px;--fs-h1:40px;--fs-h2:32px}
.footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-lg)}
.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
:root{--fs-hero:36px;--fs-h1:32px;--fs-h2:26px;--space-2xl:64px;--space-xl:48px}
.footer-grid{grid-template-columns:1fr;gap:var(--space-md)}
.footer-bottom{flex-direction:column;gap:var(--space-xs);text-align:center}
.grid-3,.grid-2{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr 1fr}
section{padding:var(--space-xl) 0}
}
@media(max-width:480px){
:root{--fs-hero:28px;--fs-h1:24px;--fs-h2:22px;--fs-h3:20px}
.grid-4{grid-template-columns:1fr}
.container{padding:0 16px}
.btn{padding:12px 22px;font-size:var(--fs-sm)}
.product-cta-actions .btn{width:100%;justify-content:center}
}