/* mall.html 页面样式
   2026-09-19 从页面内联 <style> 拆出，内容未做任何修改。
   公共样式见 style.css —— 本文件在 style.css 之后加载，用于页面覆盖。 */

/* ===== 原 <style> 块 1/2（第 10 行）===== */

        :root {
            --primary: #1A56DB;
            --primary-dark: #1040B0;
            --primary-light: #60A5FA;
            --secondary: #F9A826;
            --secondary-dark: #D68910;
            --light: #F5F5F5;
            --dark: #2C3E50;
            --gray: #7F8C8D;
            --white: #FFFFFF;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
            --accent: #F59E0B;
            --accent-dark: #D97706;
            --green: #10B981;
            --dark-2: #1E293B;
            --text: #334155;
            --text-light: #64748B;
            --border: #E2E8F0;
            --bg-light: #F8FAFC;
            --radius: 12px;
            --radius-lg: 20px;
            --shadow-lg: 0 12px 48px rgba(26,86,219,.16);
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            line-height: 1.6;
            color: var(--dark);
            background-color: var(--white);
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        .section { padding: 96px 0; }
        .section-alt { background: var(--bg-light); }
        .tag {
            display: inline-block;
            background: rgba(26,86,219,.1);
            color: var(--primary);
            font-size: .75rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
            padding: 4px 14px;
            border-radius: 100px;
            margin-bottom: 16px;
        }
        .section-title {
            font-size: clamp(1.75rem, 4vw, 2.5rem);
            font-weight: 700;
            color: var(--dark);
            line-height: 1.25;
        }
        .section-title span { color: var(--primary); }
        .section-desc {
            font-size: 1.05rem;
            color: var(--text-light);
            margin-top: 16px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            white-space: nowrap;
}
        .section-header { text-align: center; margin-bottom: 64px; }
        .section-header .section-desc { margin: 16px auto 0; }
        @media (max-width: 768px) {
            .section-desc { white-space: normal; max-width: 560px; }
        }

        /* ===== 按钮 ===== */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 32px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            border: none;
            text-decoration: none;
            transition: all .2s;
            white-space: nowrap;
        }
        .btn-primary {
            background: var(--primary);
            color: #fff;
            box-shadow: 0 4px 16px rgba(26,86,219,.35);
        }
        .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,86,219,.4); }
        .btn-accent {
            background: var(--accent);
            color: #fff;
            box-shadow: 0 4px 16px rgba(245,158,11,.35);
        }
        .btn-accent:hover { background: var(--accent-dark); transform: translateY(-2px); }
        .btn-outline {
            background: transparent;
            border: 2px solid #fff;
            color: #fff;
        }
        .btn-outline:hover { background: rgba(255,255,255,.12); }
        .btn-ghost {
            background: transparent;
            border: 2px solid var(--primary);
            color: var(--primary);
        }
        .btn-ghost:hover { background: var(--primary); color: #fff; }

        /* ===== Hero ===== */
        .hero {
            background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #1A56DB 100%);
            padding: 110px 0 50px;
            height: 620px; overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 800px 600px at 70% 50%, rgba(26,86,219,.25) 0%, transparent 70%),
                radial-gradient(ellipse 400px 400px at 10% 80%, rgba(16,185,129,.12) 0%, transparent 70%);
        }
        /* 网格纹理 */
        .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
            background-size: 60px 60px;
        }
        .hero-body {
            position: relative;
            z-index: 2;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }
        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(245,158,11,.15);
            border: 1px solid rgba(245,158,11,.35);
            color: #FCD34D;
            font-size: .8rem;
            font-weight: 700;
            padding: 6px 16px;
            border-radius: 100px;
            margin-bottom: 24px;
        }
        .hero-badge i, hero-badge .svg-icon { font-size: .75rem; }
        .hero h1 {
            font-size: clamp(2rem, 5vw, 3.25rem);
            font-weight: 700;
            color: #fff;
            line-height: 1.15;
            margin-bottom: 24px;
        }
        .hero h1 .highlight {
            background: linear-gradient(90deg, #60A5FA, #34D399);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .hero-desc {
            font-size: 1.1rem;
            color: rgba(255,255,255,.75);
            line-height: 1.8;
            margin-bottom: 40px;
            white-space: nowrap;
        }
        .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
        .hero-stats {
            display: flex;
            gap: 32px;
            padding-top: 32px;
            border-top: 1px solid rgba(255,255,255,.12);
        }
        .hero-stat-item { text-align: left; }
        .hero-stat-num {
            font-size: 1.8rem;
            font-weight: 700;
            color: #fff;
            line-height: 1;
        }
        .hero-stat-num span { color: #FCD34D; }
        .hero-stat-label { font-size: .8rem; color: rgba(255,255,255,.55); margin-top: 4px; }

        /* Hero 右侧 — 商城界面模拟 */
        .hero-visual {
            position: relative;
            display: flex;
            justify-content: flex-end;
        }
        /* 数据看板卡片 */
        .dashboard-card {
            width: 300px;
            background: rgba(15, 23, 42, .72);
            border-radius: 16px;
            box-shadow: 0 25px 70px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.08);
            overflow: hidden;
            position: relative;
            z-index: 2;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
        .db-header {
            background: rgba(255,255,255,.06);
            padding: 10px 14px;
            display: flex;
            gap: 6px;
        }
        .db-dot {
            width: 10px; height: 10px;
            border-radius: 50%;
        }
        .db-dot-green { background: #22c55e; }
        .db-dot-yellow { background: #eab308; }
        .db-dot-red { background: #ef4444; }
        .db-body {
            padding: 18px 20px 20px;
        }
        .db-stats {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        .db-stat-num {
            font-size: 1.35rem;
            font-weight: 800;
            color: #f1f5f9;
            line-height: 1.2;
        }
        .db-stat-label {
            font-size: .72rem;
            color: #94a3b8;
            margin-top: 3px;
        }
        .db-chart {
            background: linear-gradient(to bottom,rgba(255,255,255,.05),rgba(255,255,255,.02));
            border-radius: 10px;
            padding: 12px 8px 6px;
            margin-bottom: 14px;
            border: 1px solid rgba(255,255,255,.07);
        }
        .db-items {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .db-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: rgba(255,255,255,.05);
            border-radius: 10px;
            transition: background .2s;
        }
        .db-item:hover { background: rgba(255,255,255,.09); }
        .db-item-icon {
            font-size: 1.5rem;
            width: 36px; height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,255,255,.08);
            border-radius: 8px;
        }
        .db-item-info {
            flex: 1;
            min-width: 0;
        }
        .db-item-name {
            font-size: .82rem;
            font-weight: 600;
            color: #e2e8f0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .db-item-meta {
            font-size: .68rem;
            color: #94a3b8;
            margin-top: 1px;
        }
        .db-item-price {
            font-size: .95rem;
            font-weight: 700;
            color: var(--primary);
        }

        /* 漂浮装饰卡 */
        .float-card {
            position: absolute;
            background: #fff;
            border-radius: 12px;
            padding: 12px 16px;
            box-shadow: 0 8px 32px rgba(0,0,0,.18);
            font-size: .8rem;
            font-weight: 700;
            z-index: 3;
            white-space: nowrap;
        }
        .float-card-1 { right: -50px; top: 80px; color: var(--green); }
        .float-card-1 .fc-num { font-size: 1.4rem; color: var(--green); }
        .float-card-2 { right: -50px; top: 190px; color: var(--accent); }
        .float-card-2 .fc-num { font-size: 1.4rem; color: var(--accent); }
        .float-card-3 { right: -50px; top: 300px; }
        .float-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; margin-right: 6px; animation: pulse 2s infinite; }
        @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} }

        /* ===== 客户 Logo ===== */
        .logos-bar {
            background: #fff;
            padding: 40px 0;
            border-bottom: 1px solid var(--border);
        }
        .logos-bar-inner {
            display: flex;
            align-items: center;
            gap: 0;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .logos-label { font-size: .8rem; color: var(--text); font-weight: 700; white-space: nowrap; }
        .logo-item {
            background: linear-gradient(135deg, #f0f4ff, #e8effe);
            border: 1px solid rgba(59,130,246,.2);
            border-radius: 10px;
            padding: 8px 18px;
            font-size: .82rem;
            font-weight: 700;
            color: var(--text);
            letter-spacing: .04em;
            box-shadow: 0 2px 8px rgba(59,130,246,.08);
            transition: all .25s;
            white-space: nowrap;
            text-decoration: none;
            display: inline-block;
        }
        .logo-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(59,130,246,.15);
            border-color: rgba(59,130,246,.35);
        }

        /* ===== 功能特点 ===== */
        .feature-highlight-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        .feature-highlight-card {
            background: linear-gradient(135deg, #4B7BEC, #3867D6);
            border-radius: var(--radius);
            padding: 20px 18px;
            position: relative;
            overflow: hidden;
            transition: all .25s;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            justify-content: center;
        }
        .feature-highlight-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,.12), transparent);
            opacity: 0;
            transition: opacity .25s;
        }
        .feature-highlight-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(26,86,219,.25); }
        .feature-highlight-card:hover::before { opacity: 1; }
        .feature-highlight-card .fh-icon {
            width: 48px; height: 48px;
            border-radius: 50%;
            background: rgba(255,255,255,.15);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            position: relative;
            z-index: 1;
        }
        .feature-highlight-card .fh-icon .svg-icon {
            width: 22px; height: 22px;
            fill: #fff;
        }
        .feature-highlight-card h3 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 6px;
            position: relative;
            z-index: 1;
            line-height: 1.3;
        }
        .feature-highlight-card p {
            font-size: .78rem;
            color: rgba(255,255,255,.85);
            line-height: 1.5;
            position: relative;
            z-index: 1;
        }
        @media (max-width: 768px) {
            .feature-highlight-grid { grid-template-columns: 1fr; }
            .feature-highlight-card { padding: 18px 16px; }
        }
        .fh-btn-wrap {
            margin-top: 56px;
            text-align: center;
        }
        .fh-list-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 40px;
            background: #fff;
            color: var(--primary);
            border: 2px solid var(--primary);
            border-radius: 12px;
            font-size: 1.05rem;
            font-weight: 700;
            text-decoration: none;
            transition: all .3s ease;
            box-shadow: 0 4px 16px rgba(26,86,219,.1);
        }
        .fh-list-btn:hover {
            background: var(--primary);
            color: #fff;
        }
        .fh-btn-tip {
            margin-top: 12px;
            font-size: .85rem;
            color: var(--gray);
        }

        /* ===== 功能模块 ===== */
        .feature-tabs {
            display: flex;
            gap: 6px;
            justify-content: center;
            margin-bottom: 56px;
            flex-wrap: wrap;
        }
        .feature-tab {
            padding: 8px 16px;
            border-radius: 100px;
            font-size: .82rem;
            font-weight: 600;
            cursor: pointer;
            border: 2px solid var(--border);
            color: var(--text-light);
            background: #fff;
            transition: all .2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .feature-tab i, .feature-tab .svg-icon { font-size: .9rem; }
        .feature-tab.active, .feature-tab:hover {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }
        .feature-panels-wrapper { position: relative; min-height: 460px; overflow: visible; }
        .feature-panels {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            visibility: hidden;
            transition: opacity .25s ease;
        }
        .feature-panels.active {
            opacity: 1;
            visibility: visible;
        }
        .feature-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: start;
        }
        .feature-panel-visual {
            background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
            border-radius: var(--radius-lg);
            padding: 48px 40px;
            text-align: center;
            min-height: 360px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            box-shadow: 0 24px 60px rgba(26,86,219,.25);
        }
        .feature-panel-visual::before {
            content: '';
            position: absolute;
            width: 260px; height: 260px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,.12) 0%, transparent 70%);
            top: -40px; right: -40px;
        }
        .feature-panel-visual::after {
            content: '';
            position: absolute;
            width: 180px; height: 180px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
            bottom: -30px; left: -30px;
        }
        .feature-panel-visual .big-icon {
            width: 110px; height: 110px;
            border-radius: 50%;
            background: rgba(255,255,255,.12);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,.18);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3.2rem;
            color: #fff;
            box-shadow: 0 16px 40px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.1);
            margin-bottom: 28px;
            position: relative;
            z-index: 2;
        }
        .fp-visual-title {
            color: #fff;
            font-size: 1.35rem;
            font-weight: 700;
            margin-bottom: 6px;
            position: relative;
            z-index: 2;
        }
        .fp-visual-sub {
            color: rgba(255,255,255,.65);
            font-size: .9rem;
            position: relative;
            z-index: 2;
        }
        .fp-tag {
            position: absolute;
            background: rgba(255,255,255,.15);
            color: #fff;
            font-size: .72rem;
            font-weight: 700;
            padding: 5px 14px;
            border-radius: 100px;
            border: 1px solid rgba(255,255,255,.2);
            z-index: 2;
        }
        .fp-tag-tl { top: 22px; left: 22px; }
        .fp-metric {
            background: rgba(255,255,255,.1);
            border: 1px solid rgba(255,255,255,.15);
            border-radius: 12px;
            padding: 12px 22px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 28px;
            position: relative;
            z-index: 2;
        }
        .fp-metric-num { font-size: 1.5rem; font-weight: 700; color: #fff; }
        .fp-metric-label { font-size: .8rem; color: rgba(255,255,255,.7); }
        .fp-dots {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;
        }
        .fp-dots span {
            position: absolute;
            width: 6px; height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,.25);
        }
        .fp-dots span:nth-child(1) { top: 18%; left: 15%; }
        .fp-dots span:nth-child(2) { top: 28%; right: 18%; width: 10px; height: 10px; }
        .fp-dots span:nth-child(3) { bottom: 22%; left: 22%; width: 8px; height: 8px; }
        .fp-dots span:nth-child(4) { bottom: 30%; right: 12%; width: 5px; height: 5px; }
        .feature-panel-content h3 { font-size: 1.6rem; font-weight: 700; color: var(--dark); margin-bottom: 16px; }
        .feature-panel-content p { font-size: 1rem; color: var(--text-light); line-height: 1.8; margin-bottom: 28px; }
        .fp-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
        .fp-list-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }
        .fp-list-item .check {
            width: 22px; height: 22px;
            background: rgba(16,185,129,.12);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 1px;
        }
        .fp-list-item .check i, check .svg-icon { font-size: .6rem; color: var(--green); }
        .fp-list-item span { font-size: .95rem; color: var(--text); line-height: 1.6; }

        /* ===== 核心能力卡片（全览） ===== */
        .cap-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }
        .cap-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 28px 22px;
            transition: all .25s;
            cursor: default;
            position: relative;
            overflow: hidden;
        }
        .cap-card:hover {
            border-color: var(--primary);
            box-shadow: var(--shadow);
            transform: translateY(-4px);
        }
        .cap-num {
            font-size: 1.6rem;
            font-weight: 800;
            color: rgba(26,86,219,.09);
            line-height: 1;
            margin-bottom: 12px;
            letter-spacing: -0.02em;
            font-family: "DIN Alternate", "Arial Narrow", sans-serif;
        }
        .cap-icon {
            width: 48px; height: 48px;
            background: linear-gradient(135deg, #1a56db 0%, #2563eb 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 14px;
            box-shadow: 0 4px 12px rgba(26,86,219,.2);
        }
        .cap-icon .svg-icon {
            width: 22px; height: 22px;
            color: #fff;
        }
        .cap-card h3 {
            font-size: .95rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 8px;
            line-height: 1.4;
        }
        .cap-card p { font-size: .82rem; color: var(--text-light); line-height: 1.65; }

        /* ===== 数据指标 ===== */
        .metrics-section {
            background: linear-gradient(135deg, var(--dark) 0%, var(--dark-2) 100%);
            padding: 96px 0;
            position: relative;
            overflow: hidden;
        }
        .metrics-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 600px 400px at 80% 50%, rgba(26,86,219,.2) 0%, transparent 70%);
        }
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2px;
            position: relative;
            z-index: 2;
        }
        .metric-item {
            padding: 40px 32px;
            text-align: center;
            border-right: 1px solid rgba(255,255,255,.08);
        }
        .metric-num {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: #fff;
            line-height: 1;
            margin-bottom: 8px;
        }
        .metric-num span { color: #FCD34D; }
        .metric-label { font-size: .9rem; color: rgba(255,255,255,.55); }
        .metric-sub { font-size: .75rem; color: rgba(255,255,255,.35); margin-top: 6px; }

        /* ===== 行业解决方案 ===== */
        .industry-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }
        .industry-card {
            border-radius: var(--radius-lg);
            overflow: hidden;
            position: relative;
            min-height: 240px;
            cursor: pointer;
        }
        .industry-bg {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 5rem;
        }
        .industry-card:nth-child(1) .industry-bg { background: linear-gradient(135deg, #1E3A5F, #1A56DB); }
        .industry-card:nth-child(2) .industry-bg { background: linear-gradient(135deg, #064E3B, #10B981); }
        .industry-card:nth-child(3) .industry-bg { background: linear-gradient(135deg, #4C1D95, #8B5CF6); }
        .industry-card:nth-child(4) .industry-bg { background: linear-gradient(135deg, #7C2D12, #F97316); }
        .industry-card:nth-child(5) .industry-bg { background: linear-gradient(135deg, #0C4A6E, #0EA5E9); }
        .industry-card:nth-child(6) .industry-bg { background: linear-gradient(135deg, #831843, #EC4899); }
        .industry-card:nth-child(7) .industry-bg { background: linear-gradient(135deg, #3B0F4E, #A855F7); }
        .industry-card:nth-child(8) .industry-bg { background: linear-gradient(135deg, #1A3A2A, #22C55E); }
        .industry-card:nth-child(9) .industry-bg { background: linear-gradient(135deg, #3D2B1F, #D97706); }
        .industry-card:nth-child(10) .industry-bg { background: linear-gradient(135deg, #1C3D6B, #3B82F6); }
        .industry-card:nth-child(11) .industry-bg { background: linear-gradient(135deg, #402E3A, #E879F9); }
        .industry-card:nth-child(12) .industry-bg { background: linear-gradient(135deg, #1E293B, #64748B); }
        .industry-overlay {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,.75));
            padding: 40px 28px 28px;
            color: #fff;
            transform: translateY(60px);
            transition: transform .3s;
        }
        .industry-card:hover .industry-overlay { transform: translateY(0); }
        .industry-icon { font-size: 2.2rem; margin-bottom: 12px; }
        .industry-name { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
        .industry-desc { font-size: .85rem; color: rgba(255,255,255,.8); line-height: 1.6; }
        .industry-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
        .industry-tag {
            background: rgba(255,255,255,.2);
            padding: 3px 10px;
            border-radius: 100px;
            font-size: .72rem;
        }

        /* ===== 开店流程 ===== */
        .steps-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 0;
            position: relative;
        }
        .steps-grid::before {
            content: '';
            position: absolute;
            top: 40px;
            left: 8%;
            right: 8%;
            height: 2px;
            background: linear-gradient(90deg, var(--primary), rgba(26,86,219,.2));
        }
        .step-item { text-align: center; padding: 0 8px; }
        .step-num {
            width: 80px; height: 80px;
            margin: 0 auto 24px;
            background: #fff;
            border: 3px solid var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--primary);
            position: relative;
            z-index: 2;
            box-shadow: 0 4px 16px rgba(26,86,219,.2);
        }
        .step-item.highlight .step-num {
            background: var(--primary);
            color: #fff;
        }
        .step-item h3 { font-size: 1.08rem; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
        .step-item p { font-size: .92rem; color: var(--text-light); line-height: 1.6; }
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            align-items: stretch;
        }
        .pricing-card {
            background: var(--white);
            border-radius: 24px;
            padding: 40px 32px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.06);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            border: 2px solid transparent;
        }
        .pricing-card:hover {
            border-color: var(--primary-light);
            transform: translateY(-6px);
            box-shadow: 0 20px 50px rgba(26, 86, 219, 0.14);
        }
        .pricing-card.featured {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: var(--white);
            transform: scale(1.04);
            box-shadow: 0 20px 60px rgba(26, 86, 219, 0.35);
        }
        .pricing-badge {
            display: inline-block;
            background: var(--secondary);
            color: var(--white);
            padding: 4px 14px;
            border-radius: 20px;
            font-size: 0.78rem;
            font-weight: 700;
            margin-bottom: 20px;
        }
        .pricing-desc {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 24px;
        }
        .pricing-card.featured .pricing-desc {
            color: rgba(255,255,255,0.75);
        }
        .pricing-price .pp-num {
            font-size: 2.8rem;
            font-weight: 900;
            color: var(--primary);
            line-height: 1;
        }
        .pricing-card.featured .pricing-price .pp-unit {
            color: rgba(255,255,255,0.6);
        }
        .pricing-card.featured .pricing-divider {
            background: rgba(255,255,255,0.15);
        }
        .pricing-features li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.94rem;
            color: #555;
            margin-bottom: 12px;
        }
        .pricing-card.featured .pricing-features li {
            color: rgba(255,255,255,0.85);
        }
        .pricing-features li i {
            color: var(--green);
            font-size: 0.85rem;
            flex-shrink: 0;
        }
        .pricing-cta {
            display: block;
            text-align: center;
            padding: 14px;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 700;
            text-decoration: none;
            transition: var(--transition);
            background: rgba(26, 86, 219, 0.08);
            color: var(--primary);
            border: 2px solid rgba(26, 86, 219, 0.2);
        }
        .pricing-cta:hover {
            background: var(--primary);
            color: var(--white);
            border-color: var(--primary);
        }
        .pricing-card.featured .pricing-cta {
            background: var(--white);
            color: var(--primary);
            border-color: transparent;
        }

        /* ===== 客户案例 ===== */
        .case-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .case-card {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            padding: 36px 32px;
            transition: all .25s;
        }
        .case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
        .case-company {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border);
        }
        .case-logo {
            width: 48px; height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            flex-shrink: 0;
        }
        .case-logo-1 { background: #EFF6FF; }
        .case-logo-2 { background: #F0FDF4; }
        .case-logo-3 { background: #FFF7ED; }
        .case-logo-4 { background: #FEF2F2; }
        .case-logo-5 { background: #FAF5FF; }
        .case-logo-6 { background: #F0F9FF; }
        .case-company-name { font-size: .95rem; font-weight: 700; color: var(--dark); }
        .case-company-industry { font-size: .8rem; color: var(--text-light); margin-top: 2px; }
        .case-quote {
            font-size: .9rem;
            color: var(--text);
            line-height: 1.75;
            margin-bottom: 20px;
            font-style: italic;
        }
        .case-metrics { display: flex; gap: 20px; flex-wrap: wrap; }
        .case-metric { text-align: center; }
        .case-metric-num { font-size: 1.35rem; font-weight: 700; color: var(--primary); }
        .case-metric-label { font-size: .72rem; color: var(--text-light); margin-top: 2px; }

        /* ===== CTA ===== */
        .cta-section {
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, #3B82F6 100%);
            padding: 100px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .cta-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle 400px at 20% 50%, rgba(255,255,255,.06) 0%, transparent 70%),
                radial-gradient(circle 300px at 80% 60%, rgba(16,185,129,.1) 0%, transparent 70%);
        }
        .cta-inner { position: relative; z-index: 2; }
        .cta-section h2 {
            font-size: clamp(1.75rem, 4vw, 2.75rem);
            font-weight: 700;
            color: #fff;
            margin-bottom: 16px;
            color: #FFFFFF;
            text-shadow: 0 2px 8px rgba(0,0,0,.25); 
        }
        .cta-section p { font-size: 1.05rem; color: rgba(255,255,255,.8); margin-bottom: 40px; }
        .cta-trust {
            display: flex;
            gap: 24px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .cta-trust-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(255,255,255,.7);
            font-size: .875rem;
        }

        /* ===== Footer ===== */
        footer {
            background: var(--dark);
            color: rgba(255,255,255,.7);
            padding: 72px 0 32px;
        }
        .footer-content {
            display: grid;
            grid-template-columns: 2fr 1fr 1.4fr 1fr;
            gap: 48px;
            margin-bottom: 48px;
        }
        .footer-column h3 {
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 20px;
        }
        .footer-column p { font-size: .875rem; line-height: 1.75; margin-top: 16px; }
        .footer-column ul { display: flex; flex-direction: column; gap: 10px; }
        .footer-column ul a { font-size: .875rem; transition: color .2s; }
        .footer-column ul a:hover { color: #fff; }
        .contact-info { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; margin-bottom: 12px; }
        .contact-info i, contact-info .svg-icon { color: var(--primary-light); flex-shrink: 0; margin-top: 2px; }
        .copyright {
            border-top: 1px solid rgba(255,255,255,.08);
            padding-top: 28px;
            text-align: center;
            font-size: .8rem;
        }

        /* ===== 响应式 ===== */
        @media (max-width: 1024px) {
            .cap-grid { grid-template-columns: repeat(2, 1fr); }
            .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
            .steps-grid::before { display: none; }
            .footer-content { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 768px) {
            .section { padding: 64px 0; }
            .hero { height: auto; min-height: 0; padding: 30px 0 50px; overflow: visible; margin-top: 56px; }
            .hero-grid { grid-template-columns: 1fr; gap: 24px; }
            .hero-visual { display: none; }
            .hero-desc { white-space: normal !important; }
            .hero-actions { flex-direction: column; align-items: stretch; }
            .hero-actions .btn { width: 100%; justify-content: center; }
            .hero-stats { gap: 16px; flex-wrap: wrap; }
            .hero-stats .hero-stat { min-width: calc(50% - 8px); }
            .pain-grid { grid-template-columns: 1fr; }
            .industry-grid { grid-template-columns: 1fr 1fr; }
            .feature-panel { grid-template-columns: 1fr; }
            .metrics-grid { grid-template-columns: 1fr 1fr; }
            .metric-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
            .pricing-grid { grid-template-columns: 1fr; }
            .pricing-card.featured { transform: none; }
            .case-grid { grid-template-columns: 1fr; }
            .cap-grid { grid-template-columns: 1fr; }
            .steps-grid { grid-template-columns: 1fr 1fr; }
            .footer-content { grid-template-columns: 1fr; }
        }
    

/* ===== 原 <style> 块 2/2（第 1284 行）===== */

.suite5-section {
    background: linear-gradient(180deg, #f8fbff 0%, #eaf2fe 100%);
    padding: 64px 0 80px;
    position: relative;
    overflow: hidden;
}
.suite5-section::before {
    content: '';
    position: absolute; left: 0; top: 0; right: 0; height: 100%;
    background-image:
        linear-gradient(rgba(26,86,219,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,86,219,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}
.suite5-section .container { position: relative; z-index: 1; }
.suite5-title {
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 800;
    color: var(--dark);
    text-align: center;
    margin-bottom: 12px;
}
.suite5-title .hl {
    background: linear-gradient(90deg, #1A56DB, #60A5FA);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.suite5-subtitle {
    text-align: center;
    color: #475569;
    font-size: 1.05rem;
    margin-bottom: 36px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.suite5-subtitle strong { color: #1A56DB; font-weight: 800; }
.suite5-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 18px;
    max-width: 1180px;
    margin: 0 auto;
}
.suite5-card {
    background: linear-gradient(135deg, #1A56DB 0%, #2563eb 60%, #3b82f6 100%);
    color: #fff;
    border-radius: 16px;
    padding: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(26, 86, 219, .22);
    transition: transform .3s, box-shadow .3s;
}
.suite5-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(26, 86, 219, .32);
}
.suite5-card::after {
    content: '';
    position: absolute; right: -40px; top: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18) 0%, transparent 70%);
    pointer-events: none;
}
.suite5-card .label {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.18);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 14px;
    backdrop-filter: blur(6px);
}
.suite5-card .name {
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 4px;
    line-height: 1.2;
}
.suite5-card .name .tag {
    display: inline-block;
    background: #fff;
    color: #1A56DB;
    border-radius: 8px;
    padding: 2px 12px;
    font-size: 1.05rem;
    font-weight: 700;
    margin-left: 8px;
    vertical-align: middle;
}
/* 五件套标签按功能配色，避免 5 个白底蓝字太单调 */
.suite5-grid > .suite5-card:nth-of-type(1) .name .tag { background: #F97316; color: #fff; } /* 卖货 - 橙色（转化） */
.suite5-grid > .suite5-card:nth-of-type(2) .name .tag { background: #F59E0B; color: #fff; } /* 管货 - 琥珀（仓储） */
.suite5-grid > .suite5-card:nth-of-type(3) .name .tag { background: #EC4899; color: #fff; } /* 管人 - 粉色（客户） */
.suite5-grid > .suite5-card:nth-of-type(4) .name .tag { background: #10B981; color: #fff; } /* 干活 - 绿色（效率） */
.suite5-grid > .suite5-card:nth-of-type(5) .name .tag { background: #8B5CF6; color: #fff; } /* 灵魂 - 紫色（内容） */
.suite5-card ul {
    list-style: none; padding: 0; margin: 16px 0 0;
    display: grid; gap: 10px;
}
.suite5-card ul li {
    font-size: .95rem;
    line-height: 1.5;
    padding-left: 22px;
    position: relative;
}
.suite5-card ul li::before {
    content: '';
    position: absolute; left: 0; top: 8px;
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.85);
    box-shadow: 0 0 0 3px rgba(255,255,255,.18);
}
.suite5-card.featured {
    grid-row: 1 / span 2;
    padding: 36px 32px;
    background: linear-gradient(160deg, #1e40af 0%, #1A56DB 50%, #3b82f6 100%);
}
.suite5-card.featured .name { font-size: 2.1rem; }
.suite5-card.featured .name .tag { font-size: 1.2rem; }
.suite5-card.featured ul li { font-size: 1.02rem; }
.suite5-tag-free {
    position: absolute; right: 24px; top: 24px;
    background: #fff;
    color: #1A56DB;
    font-size: .8rem; font-weight: 800;
    padding: 4px 12px;
    border-radius: 100px;
    box-shadow: 0 4px 10px rgba(0,0,0,.1);
    z-index: 2;
}
@media (max-width: 992px) {
    .suite5-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }
    .suite5-card.featured {
        grid-row: auto;
        grid-column: 1 / -1;
    }
}
@media (max-width: 600px) {
    .suite5-grid { grid-template-columns: 1fr; }
    .suite5-card.featured .name { font-size: 1.7rem; }
}

/* ===== 智能硬件集成（2026-09-19 新增区块，位于「6步开启您的私域商城」之前）===== */
.hw-section { background: #fff; }
.hw-section .section-desc { white-space: normal; max-width: 760px; }

/* 可接入设备 */
.hw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}
.hw-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px 22px;
    transition: all .25s;
}
.hw-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}
.hw-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, #1a56db 0%, #2563eb 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    box-shadow: 0 4px 12px rgba(26,86,219,.2);
}
.hw-icon .svg-icon { width: 22px; height: 22px; color: #fff; }
.hw-card h3 { font-size: .95rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.hw-card p { font-size: .82rem; color: var(--text-light); line-height: 1.65; }
.hw-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hw-tags span {
    font-size: .7rem;
    color: var(--primary);
    background: rgba(26,86,219,.08);
    padding: 3px 10px;
    border-radius: 100px;
}

/* 自动化闭环 */
.hw-flow-box {
    background: linear-gradient(180deg, #f8fbff 0%, #eaf2fe 100%);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    margin-bottom: 48px;
}
.hw-flow-head { text-align: center; margin-bottom: 36px; }
.hw-flow-head h3 { font-size: 1.45rem; font-weight: 700; color: var(--dark); margin-bottom: 10px; }
.hw-flow-head p { font-size: .95rem; color: var(--text-light); }
.hw-flow {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.hw-step {
    background: #fff;
    border: 1px solid rgba(26,86,219,.12);
    border-radius: var(--radius);
    padding: 24px 20px;
    transition: all .25s;
}
.hw-step:hover { box-shadow: 0 10px 26px rgba(26,86,219,.12); transform: translateY(-4px); }
.hw-step-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: rgba(26,86,219,.2);
    line-height: 1;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    font-family: "DIN Alternate", "Arial Narrow", sans-serif;
}
.hw-step h4 { font-size: .95rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.hw-step p { font-size: .8rem; color: var(--text-light); line-height: 1.6; }

/* 对企业意味着什么 */
.hw-value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 28px;
}
.hw-value-card {
    background: #fff;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius);
    padding: 26px 24px;
}
.hw-value-icon {
    width: 40px; height: 40px;
    background: rgba(26,86,219,.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.hw-value-icon .svg-icon { width: 18px; height: 18px; color: var(--primary); }
.hw-value-card h3 { font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.hw-value-card p { font-size: .85rem; color: var(--text-light); line-height: 1.7; }
.hw-note {
    font-size: .78rem;
    color: var(--gray);
    text-align: center;
    line-height: 1.7;
}

@media (max-width: 1024px) {
    .hw-grid { grid-template-columns: repeat(2, 1fr); }
    .hw-flow { grid-template-columns: repeat(2, 1fr); }
    .hw-value-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .hw-grid { grid-template-columns: 1fr; margin-bottom: 32px; }
    .hw-flow { grid-template-columns: 1fr; }
    .hw-flow-box { padding: 32px 20px; margin-bottom: 32px; }
    .hw-flow-head h3 { font-size: 1.2rem; }
    .hw-note { text-align: left; }
}

/* ==========================================================================
   2026-09-21 商城页「移动端修整」（只影响 ≤768px，桌面一行未动）
   1) hero 统计数字：2×2（原选择器写成 .hero-stat，类名实为 .hero-stat-item
      → 规则从未命中，落到「3 个 + 剩下 1 个」）
   2) 「查看完整功能清单（200+项）」：单行不折行
   3) 功能 Tab：等宽网格，消灭「同一行两个长短不一」
   4) Tab 面板：由 absolute 改回文档流（原来容器 min-height 只有 460px，
      而手机上面板高 920~1100px → 溢出 400~640px，被下一屏标题盖住压字）
   5) 纵向节奏统一：屏上下 36px、CTA 80px、标题到内容 32px
      （对齐首页移动端节奏；原为 48/64 与 64/80 混用，且案→CTA 之间有 200px）
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. hero 统计条：2×2，与首页 .banner-stats 同款写法 */
    .hero-stats { gap: 16px 12px; }
    .hero-stats .hero-stat-item { min-width: calc(50% - 8px); }

    /* 2. 查看完整功能清单：原自然宽 366px > 手机可用 350px 必折两行 */
    .fh-list-btn {
        font-size: .875rem;
        padding: 14px;
        gap: 8px;
        white-space: nowrap;
        max-width: 100%;
    }
    .fh-list-btn .svg-icon { font-size: .9em; }

    /* 3. 功能 Tab：等宽网格（>576 四列 / ≤576 两列，8 项刚好填满不留残行） */
    .feature-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        margin-bottom: 24px;
    }
    .feature-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 9px 8px;
        font-size: .78rem;
    }

    /* 4. Tab 面板改回文档流，容器不再用固定 min-height 兜底 */
    .feature-panels-wrapper { min-height: 0; }
    .feature-panels { position: static; opacity: 1; visibility: visible; display: none; }
    .feature-panels.active { display: block; }

    /* 5. 纵向节奏统一 */
    .hero { padding: 24px 0 36px; }
    .logos-bar { padding: 28px 0; }
    .section { padding: 36px 0 !important; }          /* 覆盖 HTML 里的 padding-top:48px */
    .suite5-section { padding: 36px 0; }
    .pricing-section { padding: 36px 0 !important; }  /* 覆盖 HTML 里的 padding-top:48px */
    .cta-section { padding: 80px 0; }

    .section-header { margin-bottom: 32px !important; }  /* 覆盖 HTML 里的 margin-bottom:40px */
    .section-header .section-desc { margin-top: 12px; }
    .fh-btn-wrap { margin-top: 36px; }
    .suite5-subtitle { margin-bottom: 24px; }
    .feature-panel-visual { padding: 32px 20px; min-height: 0; }
    .feature-panel-content p { margin-bottom: 20px; }
    .fp-list { margin-bottom: 24px; }
    .hw-value-grid { margin-bottom: 24px; }
    .cta-section p { margin-bottom: 28px !important; }
}

@media (max-width: 576px) {
    .feature-tabs { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   2026-09-21 商城页「卡片改左图右文」（只影响 ≤768px，桌面端一行未动）
   手机端这 6 类卡片原本都是「序号/图标在上 → 标题 → 描述」竖向堆叠，
   一屏信息密度低、整页很长。改法照首页「为什么选择」移动端的做法：
   左列固定放图标（44px），标题与描述落在右列（上下两行），文字左对齐。
   共 38 张。实测 360px 下前 33 张合计 6667px → 4787px，整页 15411px → 13512px。
     1) 功能特点 .feature-highlight-card ×12
     2) 增值服务 .cap-card ×8（序号 01~08 挪到右上角做小角标，不再占一行）
     3) 智能硬件 .hw-card ×4（标签 .hw-tags 落到第 3 行）
     4) 硬件价值 .hw-value-card ×3
     5) 开店流程 .step-item ×6（原为 2 列，一格只 ~150px 放不下「序号+两行」→ 改单列；
        这 6 张没有图标，序号圆点本身就是左列那个元素，故仍在左列、缩到 44px）
     6) 智能硬件「这 5 步自动跑完」.hw-step ×5（2026-09-21 补：首轮漏掉的一类；
        同样没有图标，序号做成 44px 圆圈留在左列）
   ========================================================================== */
@media (max-width: 768px) {

    .feature-highlight-card,
    .cap-card,
    .hw-card,
    .hw-value-card,
    .step-item {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 12px;
        row-gap: 3px;
        align-items: center;
        text-align: left;
        padding: 16px 14px;
    }

    /* 标题 / 描述 / 标签：统一落到第 2 列的第 1、2、3 行 */
    .feature-highlight-card > h3, .cap-card > h3, .hw-card > h3,
    .hw-value-card > h3, .step-item > h3 {
        grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 0;
    }
    .feature-highlight-card > p, .cap-card > p, .hw-card > p,
    .hw-value-card > p, .step-item > p {
        grid-column: 2; grid-row: 2; align-self: start;
    }
    .hw-card .hw-tags { grid-column: 2; grid-row: 3; margin-top: 8px; }

    /* 图标：左列，纵向跨行居中。图标框缩到 44px，框内 svg 尺寸不变 */
    .feature-highlight-card .fh-icon,
    .cap-card .cap-icon,
    .hw-card .hw-icon {
        grid-column: 1; grid-row: 1 / span 3;
        width: 44px; height: 44px; margin: 0;
    }
    .hw-value-card .hw-value-icon {
        grid-column: 1; grid-row: 1 / span 3;
        width: 40px; height: 40px; margin: 0;
    }

    /* 序号 01~08：从「图标上方大号淡字」改成右上角小角标（卡片本身已 relative） */
    .cap-card .cap-num {
        position: absolute;
        top: 13px; right: 14px;
        margin: 0;
        font-size: .9rem;
        line-height: 1;
        color: rgba(26, 86, 219, .32);
    }
    /* 标题右侧留出角标位，长标题不会钻到序号底下（现有 8 个标题实际都够短，兜底用） */
    .cap-card > h3 { padding-right: 22px; }

    /* 开店流程：改单列，序号圆点缩小留在左列 */
    .steps-grid { grid-template-columns: 1fr; gap: 12px; }
    .step-item .step-num {
        grid-column: 1; grid-row: 1 / span 3;
        width: 44px; height: 44px; margin: 0;
        border-width: 2px;
        font-size: 1.05rem;
        box-shadow: 0 2px 8px rgba(26, 86, 219, .18);
    }

    /* 智能硬件「数据接进来之后，这 5 步自动跑完」：.hw-step ×5 同样是竖向堆叠，
       一并改左序号右文字。这 5 张没有图标，序号本身就是左列元素 →
       顺手把原来的「大号淡字」做成 44px 圆圈（与开店流程同一套视觉），
       否则左列空着、和「左图右文」对不上。 */
    .hw-step {
        display: grid;
        grid-template-columns: 44px 1fr;
        column-gap: 12px;
        row-gap: 3px;
        align-items: center;
        text-align: left;
        padding: 16px 14px;
    }
    .hw-step .hw-step-num {
        grid-column: 1; grid-row: 1 / span 2;
        width: 44px; height: 44px; margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border: 2px solid rgba(26, 86, 219, .24);
        border-radius: 50%;
        color: var(--primary);
        font-size: 1.05rem;
        letter-spacing: 0;
        box-shadow: 0 2px 8px rgba(26, 86, 219, .12);
    }
    .hw-step > h4 { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 0; }
    .hw-step > p { grid-column: 2; grid-row: 2; align-self: start; }
}


/* ==========================================================================
   2026-09-21 移动端 CTA（「给我们一次演示机会，您再做出选择！」联系区块）上下留白收紧
   原来手机上直接沿用桌面值（各页 70 / 80 / 100px），390px 宽下这块内容只有 3~5 行，
   上下各留一大块空白，很空、不紧凑 → 移动端统一收到 40px（约一半），桌面端一行未动。
   ⚠️ 必须写在**页面 CSS** 里：style.css 的媒体查询会被页面 CSS 的基础规则
   （同为 .cta-section 0,1,0，但页面 CSS 后加载）压掉，放 style.css 不生效。
   ========================================================================== */
@media (max-width: 768px) {
    .cta-section { padding: 40px 0; }
}

/* ==========================================================================
   2026-09-21 移动端「覆盖多个行业」标签（.logos-bar）排列变形修复
   原来 .logos-bar-inner 是 flex + flex-wrap + justify-content:space-between + gap:0：
   390px（容器 350px）下一行正好放 3 个 93px 的标签，行内被 space-between 硬拉开
   （左 0 / 中 129 / 右 257，空隙 36px），而行与行之间又没有间距（gap:0）→
   每行看着像"被掰开的参差块"，很乱。
   改法：移动端一行严格 3 个等宽标签、列间距 8px、行间距 10px，整行左起对齐；
   标题「覆盖多个行业」独占第一行（原先是和标签挤在一起当第一个元素）。
   每格宽 = calc((100% - 16px) / 3)（100% 是容器 350px → 111.33px，3 格 + 2×8px = 350px 正好填满），
   所以每行都齐、末行不足 3 个也保持同样宽度靠左 → 不再参差。
   ⚠️ 用 flex: 0 0 <定宽>（不用 flex:1），否则末行只有 2 个时会被拉宽、和上面几行对不齐。
   ========================================================================== */
@media (max-width: 768px) {
    .logos-bar-inner {
        justify-content: flex-start;
        gap: 10px 8px;
    }
    .logos-label { flex: 0 0 100%; }
    .logo-item {
        flex: 0 0 calc((100% - 16px) / 3);
        text-align: center;
        padding: 8px 4px;
    }
}