/* ========== 首页 v4.0 样式 - 贸易代理商专属优化版 ========== */

/* --- 顶部工具栏 --- */
.hm-topbar{background:#1e293b;color:#94a3b8;font-size:13px;padding:8px 0}
.hm-topbar .hm-container{display:flex;justify-content:space-between;align-items:center}
.hm-topbar-left span{margin-right:20px}
.hm-topbar-left i{margin-right:4px;color:#60a5fa}
.hm-topbar-right{display:flex;align-items:center;gap:16px}
.hm-topbar-quote{color:#60a5fa;font-weight:500;text-decoration:none;margin-left:8px}
.hm-topbar-quote:hover{color:#93c5fd}

/* --- 主导航栏 --- */
.hm-header{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);position:sticky;top:0;z-index:1000;transition:box-shadow .3s}
.hm-header-fixed{box-shadow:0 4px 20px rgba(0,0,0,.12)}
.hm-header-inner{display:flex;align-items:center;padding:12px 0;gap:20px}
.hm-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.hm-logo-icon{width:42px;height:42px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.hm-logo-name{font-size:18px;font-weight:700;color:#1e293b}
.hm-logo-slogan{font-size:12px;color:#64748b}
.hm-search{flex:1;max-width:520px;display:flex;position:relative}
.hm-search input{flex:1;border:2px solid #e2e8f0;border-radius:8px 0 0 8px;padding:10px 16px;font-size:14px;outline:none;transition:border-color .2s}
.hm-search input:focus{border-color:#2563eb}
.hm-search button{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;border-radius:0 8px 8px 0;padding:10px 20px;font-size:14px;cursor:pointer;white-space:nowrap}
.hm-search button:hover{background:linear-gradient(135deg,#1d4ed8,#1e40af)}
.hm-nav{display:flex;align-items:center;gap:4px}
.hm-nav-link{padding:8px 14px;color:#475569;text-decoration:none;font-size:14px;font-weight:500;border-radius:6px;transition:all .2s}
.hm-nav-link:hover,.hm-nav-link.active{color:#2563eb;background:#eff6ff}
.hm-nav-btn{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff!important;padding:8px 18px;border-radius:8px;font-weight:600;font-size:14px}
.hm-nav-btn:hover{background:linear-gradient(135deg,#1d4ed8,#1e40af);transform:translateY(-1px)}
.hm-mobile-toggle{display:none;background:none;border:none;font-size:22px;color:#1e293b;cursor:pointer}

/* --- 移动端菜单 --- */
.hm-mobile-menu{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;z-index:2000;padding:60px 20px 20px;overflow-y:auto}
.hm-mobile-menu.active{display:block}
.hm-mobile-search{margin-bottom:20px}
.hm-mobile-search input{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:16px}
.hm-mobile-menu a{display:block;padding:14px 0;color:#1e293b;font-size:16px;text-decoration:none;border-bottom:1px solid #f1f5f9}
.hm-nav-btn-mobile{background:#2563eb!important;color:#fff!important;text-align:center;border-radius:8px;margin-top:16px;padding:14px!important}

/* --- Hero Banner --- */
.hm-hero{position:relative;overflow:hidden}
.hm-hero-slides{position:relative}
.hm-hero-slide{display:none;padding:60px 0;min-height:340px}
.hm-hero-slide.active{display:flex;align-items:center}
.hm-hero-content{color:#fff;max-width:600px}
.hm-hero-tag{display:inline-block;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);padding:6px 16px;border-radius:20px;font-size:13px;margin-bottom:16px;letter-spacing:1px}
.hm-hero h1{font-size:38px;font-weight:800;line-height:1.2;margin:0 0 16px;text-shadow:0 2px 8px rgba(0,0,0,.2)}
.hm-hero p{font-size:16px;opacity:.9;margin:0 0 24px;line-height:1.6}
.hm-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hm-btn-hero{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:#fff;color:#1e293b;border-radius:8px;font-weight:600;font-size:15px;text-decoration:none;transition:all .3s}
.hm-btn-hero:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.hm-btn-hero-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)}
.hm-btn-hero-outline:hover{background:rgba(255,255,255,.15);border-color:#fff;color:#fff}
.hm-hero-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.hm-hero-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);border:none;cursor:pointer;transition:all .3s}
.hm-hero-dot.active{background:#fff;width:28px;border-radius:5px}
.hm-hero-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);border:none;color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:18px;transition:all .3s}
.hm-hero-arrow:hover{background:rgba(255,255,255,.3)}
.hm-hero-prev{left:16px}
.hm-hero-next{right:16px}

/* --- 4大核心服务入口 --- */
.hm-quick-services{background:#fff;padding:32px 0;margin-top:-20px;position:relative;z-index:10}
.hm-qs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.hm-qs-card{display:flex;flex-direction:column;align-items:center;padding:24px 16px;background:#f8fafc;border-radius:12px;text-decoration:none;transition:all .3s;border:1px solid #e2e8f0}
.hm-qs-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.08);border-color:#2563eb}
.hm-qs-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;margin-bottom:12px}
.hm-qs-title{font-size:16px;font-weight:700;color:#1e293b;margin-bottom:4px}
.hm-qs-desc{font-size:13px;color:#64748b;text-align:center}

/* --- 核心数据条 --- */
.hm-stats{background:linear-gradient(135deg,#1e293b,#0f172a);padding:32px 0}
.hm-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.hm-stat-num{font-size:36px;font-weight:800;color:#60a5fa}
.hm-stat-label{font-size:14px;color:#94a3b8;margin-top:4px}

/* --- 通用section --- */
.hm-section{padding:56px 0}
.hm-section-alt{background:#f8fafc}
.hm-section-header{text-align:center;margin-bottom:40px;position:relative}
.hm-section-header h2{font-size:28px;font-weight:800;color:#1e293b;margin:0 0 8px}
.hm-section-header p{color:#64748b;font-size:15px;margin:0}
.hm-section-more{position:absolute;right:0;top:50%;transform:translateY(-50%);color:#2563eb;font-size:14px;font-weight:500;text-decoration:none}
.hm-section-more:hover{text-decoration:underline}

/* --- 产品分类 v2 --- */
.hm-cat-grid-v2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.hm-cat-card-v2{display:flex;align-items:center;gap:16px;padding:20px 24px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;text-decoration:none;transition:all .3s;position:relative;overflow:hidden}
.hm-cat-card-v2:hover{border-color:var(--cat-color);box-shadow:0 8px 24px rgba(0,0,0,.06);transform:translateY(-2px)}
.hm-cat-card-v2::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cat-color);border-radius:4px 0 0 4px;opacity:0;transition:opacity .3s}
.hm-cat-card-v2:hover::before{opacity:1}
.hm-cat-v2-icon{width:52px;height:52px;background:color-mix(in srgb,var(--cat-color) 10%,transparent);color:var(--cat-color);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.hm-cat-v2-info{flex:1;min-width:0}
.hm-cat-v2-name{font-size:16px;font-weight:700;color:#1e293b}
.hm-cat-v2-sub{font-size:12px;color:var(--cat-color);font-weight:500;margin:2px 0 4px}
.hm-cat-v2-desc{font-size:13px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-cat-v2-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.hm-cat-v2-tags span{font-size:11px;padding:2px 8px;background:#f1f5f9;color:#475569;border-radius:4px}
.hm-cat-v2-count{font-size:14px;font-weight:700;color:var(--cat-color);flex-shrink:0}
.hm-cat-v2-arrow{color:#cbd5e1;font-size:14px;transition:all .3s;flex-shrink:0}
.hm-cat-card-v2:hover .hm-cat-v2-arrow{color:var(--cat-color);transform:translateX(4px)}
.hm-cat-brand{--cat-color:#6366f1}

/* --- 品牌专区 v2 --- */
.hm-brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.hm-brand-card-v2{display:flex;flex-direction:column;align-items:center;padding:24px 16px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;text-decoration:none;transition:all .3s}
.hm-brand-card-v2:hover{border-color:#6366f1;box-shadow:0 8px 24px rgba(99,102,241,.08);transform:translateY(-3px)}
.hm-brand-v2-logo{width:64px;height:64px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;margin-bottom:10px}
.hm-brand-v2-en{font-size:11px;color:#94a3b8;letter-spacing:1px;margin-bottom:4px}
.hm-brand-v2-count{font-size:14px;color:#1e293b;font-weight:600}
.hm-brand-v2-kw{font-size:11px;color:#64748b;margin-top:4px;text-align:center;line-height:1.4}
.hm-brand-v2-action{font-size:12px;color:#6366f1;font-weight:500;margin-top:8px}
.hm-brand-v2-action i{font-size:10px;transition:transform .2s}
.hm-brand-card-v2:hover .hm-brand-v2-action i{transform:translateX(3px)}

/* --- 今日现货爆款 --- */
.hm-hot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.hm-hot-card{padding:18px;background:#fff;border:1px solid #e2e8f0;border-radius:10px;text-decoration:none;transition:all .3s}
.hm-hot-card:hover{border-color:#2563eb;box-shadow:0 8px 20px rgba(37,99,235,.08);transform:translateY(-2px)}
.hm-hot-brand{font-size:12px;color:#6366f1;font-weight:600;margin-bottom:4px}
.hm-hot-name{font-size:15px;font-weight:700;color:#1e293b;margin-bottom:8px;line-height:1.3}
.hm-hot-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.hm-hot-count{font-size:13px;color:#64748b}
.hm-hot-stock{font-size:12px;color:#059669;font-weight:500}
.hm-hot-action{font-size:13px;color:#2563eb;font-weight:600}
.hm-hot-action i{font-size:11px;transition:transform .2s}
.hm-hot-card:hover .hm-hot-action i{transform:translateX(3px)}

/* --- 工程配套案例 --- */
.hm-case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hm-case-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:24px;transition:all .3s}
.hm-case-card:hover{box-shadow:0 12px 32px rgba(0,0,0,.06);transform:translateY(-3px)}
.hm-case-icon{width:48px;height:48px;background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px}
.hm-case-title{font-size:16px;font-weight:700;color:#1e293b;margin-bottom:8px}
.hm-case-desc{font-size:13px;color:#64748b;line-height:1.6;margin-bottom:12px}
.hm-case-tag{display:inline-block;font-size:12px;padding:3px 10px;background:#eff6ff;color:#2563eb;border-radius:4px;font-weight:500}

/* --- 配套服务 --- */
.hm-service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.hm-service-card{display:flex;flex-direction:column;align-items:center;padding:28px 20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;text-decoration:none;transition:all .3s;text-align:center}
.hm-service-card:hover{border-color:#2563eb;box-shadow:0 8px 24px rgba(37,99,235,.08);transform:translateY(-3px)}
.hm-service-icon{width:56px;height:56px;background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#2563eb;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:14px}
.hm-service-card h3{font-size:15px;font-weight:700;color:#1e293b;margin:0 0 6px}
.hm-service-card p{font-size:13px;color:#64748b;line-height:1.5;margin:0}

/* --- 底部服务保障条 --- */
.hm-guarantee{background:linear-gradient(135deg,#1e293b,#0f172a);padding:36px 0}
.hm-guarantee-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.hm-guarantee-item{display:flex;align-items:center;gap:14px;color:#fff}
.hm-guarantee-item i{font-size:28px;color:#60a5fa;flex-shrink:0}
.hm-guarantee-title{font-size:15px;font-weight:700}
.hm-guarantee-desc{font-size:12px;color:#94a3b8}

/* --- 响应式 --- */
@media(max-width:1200px){
    .hm-cat-grid-v2{grid-template-columns:1fr 1fr}
    .hm-case-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:992px){
    .hm-nav,.hm-search{display:none}
    .hm-mobile-toggle{display:block}
    .hm-qs-grid{grid-template-columns:1fr 1fr}
    .hm-stats-grid{grid-template-columns:1fr 1fr}
    .hm-guarantee-grid{grid-template-columns:1fr 1fr}
    .hm-header-inner{justify-content:space-between}
}
@media(max-width:768px){
    .hm-hero h1{font-size:26px}
    .hm-hero p{font-size:14px}
    .hm-hero-slide{padding:40px 0;min-height:260px}
    .hm-section{padding:36px 0}
    .hm-section-header h2{font-size:22px}
    .hm-section-more{position:static;display:block;margin-top:8px}
    .hm-cat-grid-v2{grid-template-columns:1fr}
    .hm-qs-grid{grid-template-columns:1fr 1fr}
    .hm-hot-grid{grid-template-columns:1fr 1fr}
    .hm-case-grid{grid-template-columns:1fr}
    .hm-service-grid{grid-template-columns:1fr 1fr}
    .hm-stats-grid{grid-template-columns:1fr 1fr}
    .hm-guarantee-grid{grid-template-columns:1fr}
    .hm-brand-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
    .hm-topbar-right span{display:none}
}
@media(max-width:480px){
    .hm-qs-grid{grid-template-columns:1fr}
    .hm-hot-grid{grid-template-columns:1fr}
    .hm-service-grid{grid-template-columns:1fr}
    .hm-hero-actions{flex-direction:column}
    .hm-btn-hero{width:100%;justify-content:center}
}