/* roulang page: index */
:root {
            --primary: #0F4C81;
            --primary-dark: #0A2E5C;
            --primary-light: #155FA0;
            --accent: #00A8CC;
            --accent-hover: #008ba8;
            --dark-bg: #0B1325;
            --dark-card: #131F37;
            --bg-light: #F8FAFC;
            --bg-alt: #F0F4F8;
            --text-main: #0F172A;
            --text-body: #334155;
            --text-muted: #64748B;
            --border-color: #E2E8F0;
            --white: #FFFFFF;
            --shadow-sm: 0 2px 8px rgba(15, 76, 129, 0.04);
            --shadow-md: 0 6px 20px -2px rgba(15, 76, 129, 0.08);
            --shadow-lg: 0 16px 36px -4px rgba(15, 76, 129, 0.14);
            --radius-md: 12px;
            --radius-lg: 18px;
            --container-width: 1240px;
        }

        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            font-size: 16px;
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background-color: var(--bg-light);
            color: var(--text-body);
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: all 0.25s ease;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        ul, ol {
            list-style: none;
        }

        .container {
            width: 100%;
            max-width: var(--container-width);
            margin: 0 auto;
            padding: 0 24px;
        }

        /* 顶部双行导航系统 */
        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 4px 20px rgba(10, 46, 92, 0.15);
        }

        .header-topbar {
            background-color: #071E3D;
            color: #94A3B8;
            font-size: 13px;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        .topbar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .topbar-info span {
            margin-right: 20px;
        }

        .topbar-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #38BDF8;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background-color: #10B981;
            border-radius: 50%;
            box-shadow: 0 0 8px #10B981;
        }

        .header-mainnav {
            background: linear-gradient(135deg, #0A2E5C 0%, #155FA0 100%);
            padding: 14px 0;
        }

        .nav-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .brand-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--white);
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        .brand-badge {
            background: var(--accent);
            color: var(--white);
            font-size: 11px;
            padding: 2px 8px;
            border-radius: 4px;
            font-weight: 600;
        }

        .nav-menu {
            display: flex;
            align-items: center;
            gap: 32px;
        }

        .nav-link {
            color: #E2E8F0;
            font-size: 15px;
            font-weight: 500;
            position: relative;
            padding: 6px 0;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--white);
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--accent);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }

        .nav-cta {
            background: linear-gradient(135deg, var(--accent) 0%, #0284C7 100%);
            color: var(--white);
            padding: 10px 22px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 14px;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(0, 168, 204, 0.3);
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .nav-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 168, 204, 0.45);
        }

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--white);
            font-size: 24px;
            cursor: pointer;
        }

        /* 通用板块排版与留白 */
        section {
            padding: 90px 0;
            position: relative;
        }

        .section-header {
            text-align: center;
            max-width: 780px;
            margin: 0 auto 56px auto;
        }

        .section-tag {
            display: inline-block;
            background: rgba(15, 76, 129, 0.08);
            color: var(--primary);
            font-size: 13px;
            font-weight: 700;
            padding: 4px 14px;
            border-radius: 30px;
            margin-bottom: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .section-title {
            font-size: 34px;
            color: var(--text-main);
            font-weight: 700;
            line-height: 1.35;
            margin-bottom: 16px;
        }

        .section-subtitle {
            font-size: 16px;
            color: var(--text-muted);
            line-height: 1.7;
        }

        /* 板块 1: 首屏 Hero 转化区 */
        .hero-section {
            padding: 90px 0 110px 0;
            background: linear-gradient(180deg, #0A2E5C 0%, #0F4C81 100%);
            color: var(--white);
            position: relative;
            overflow: hidden;
        }

        .hero-bg-overlay {
            position: absolute;
            inset: 0;
            background-image: url('/assets/images/86099cc387fb974d.jpg');
            background-size: cover;
            background-position: center;
            opacity: 0.16;
            mix-blend-mode: overlay;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.15fr 0.85fr;
            gap: 48px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hero-badge-row {
            display: flex;
            gap: 12px;
            margin-bottom: 24px;
        }

        .hero-badge {
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .hero-title {
            font-size: 46px;
            font-weight: 800;
            line-height: 1.25;
            margin-bottom: 22px;
            letter-spacing: -0.5px;
        }

        .hero-desc {
            font-size: 17px;
            color: #E2E8F0;
            line-height: 1.8;
            margin-bottom: 36px;
        }

        .hero-actions {
            display: flex;
            gap: 18px;
            align-items: center;
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--accent) 0%, #0284C7 100%);
            color: var(--white);
            padding: 14px 34px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 8px 24px rgba(0, 168, 204, 0.35);
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 28px rgba(0, 168, 204, 0.5);
        }

        .btn-outline {
            border: 1px solid rgba(255, 255, 255, 0.35);
            color: var(--white);
            padding: 14px 28px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            background: rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }

        .btn-outline:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: var(--white);
        }

        .hero-card {
            background: rgba(255, 255, 255, 0.96);
            border-radius: var(--radius-lg);
            padding: 36px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            color: var(--text-main);
            border: 1px solid rgba(255, 255, 255, 0.6);
        }

        .hero-card-header {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 16px;
            margin-bottom: 20px;
        }

        .hero-card-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 4px;
        }

        .hero-card-sub {
            font-size: 13px;
            color: var(--text-muted);
        }

        .hero-feature-list {
            margin-bottom: 24px;
        }

        .hero-feature-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 14px;
            color: var(--text-body);
            margin-bottom: 12px;
        }

        .hero-feature-icon {
            color: #10B981;
            font-weight: bold;
        }

        /* 板块 2: 参数验证与系统概览 */
        .intro-section {
            background-color: var(--white);
        }

        .intro-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            align-items: center;
        }

        .intro-img-frame {
            position: relative;
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border-color);
            aspect-ratio: 4/3;
        }

        .intro-img-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .intro-specs-badge {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(11, 19, 37, 0.88);
            backdrop-filter: blur(8px);
            color: var(--white);
            padding: 12px 18px;
            border-radius: 8px;
            border-left: 4px solid var(--accent);
            font-size: 13px;
        }

        .intro-lead {
            font-size: 17px;
            color: var(--text-body);
            margin-bottom: 24px;
            line-height: 1.8;
        }

        .param-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 24px;
            background: var(--bg-light);
            border-radius: 8px;
            overflow: hidden;
        }

        .param-table td {
            padding: 14px 18px;
            font-size: 14px;
            border-bottom: 1px solid var(--border-color);
        }

        .param-table td:first-child {
            font-weight: 600;
            color: var(--primary-dark);
            width: 38%;
            background: rgba(15, 76, 129, 0.03);
        }

        /* 板块 3: 核心卖点优势矩阵 */
        .advantages-section {
            background-color: var(--bg-alt);
        }

        .adv-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }

        .adv-card {
            background: var(--white);
            border-radius: var(--radius-md);
            padding: 32px 28px;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            transition: all 0.3s ease;
        }

        .adv-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
            border-color: rgba(0, 168, 204, 0.4);
        }

        .adv-icon-wrapper {
            width: 52px;
            height: 52px;
            border-radius: 10px;
            background: rgba(15, 76, 129, 0.08);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 20px;
        }

        .adv-title {
            font-size: 19px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 12px;
        }

        .adv-desc {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.7;
        }

        /* 板块 4: 热门核心子系统 */
        .modules-section {
            background-color: var(--white);
        }

        .module-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
        }

        .module-card {
            background: var(--white);
            border-radius: var(--radius-md);
            overflow: hidden;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-md);
            display: flex;
            flex-direction: column;
            transition: all 0.3s ease;
        }

        .module-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .module-img-box {
            position: relative;
            height: 210px;
            overflow: hidden;
        }

        .module-img-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }

        .module-card:hover .module-img-box img {
            transform: scale(1.05);
        }

        .module-badge {
            position: absolute;
            top: 14px;
            right: 14px;
            background: var(--accent);
            color: var(--white);
            font-size: 12px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 4px;
        }

        .module-body {
            padding: 26px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .module-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 10px;
        }

        .module-desc {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.65;
            margin-bottom: 20px;
            flex: 1;
        }

        .module-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: auto;
        }

        .module-tag-item {
            font-size: 12px;
            background: var(--bg-alt);
            color: var(--primary);
            padding: 4px 10px;
            border-radius: 4px;
            font-weight: 500;
        }

        /* 板块 5: 技术架构理念区 (深色对比区) */
        .architecture-section {
            background-color: var(--dark-bg);
            color: var(--white);
        }

        .arch-header .section-tag {
            background: rgba(0, 168, 204, 0.18);
            color: var(--accent);
        }

        .arch-header .section-title {
            color: var(--white);
        }

        .arch-header .section-subtitle {
            color: #94A3B8;
        }

        .arch-layers {
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-width: 1060px;
            margin: 0 auto;
        }

        .arch-layer-card {
            background: var(--dark-card);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--radius-md);
            padding: 24px 30px;
            display: grid;
            grid-template-columns: 200px 1fr;
            gap: 32px;
            align-items: center;
            transition: all 0.3s ease;
        }

        .arch-layer-card:hover {
            border-color: var(--accent);
            box-shadow: 0 0 20px rgba(0, 168, 204, 0.2);
        }

        .arch-layer-name {
            font-size: 17px;
            font-weight: 700;
            color: #38BDF8;
            border-left: 3px solid var(--accent);
            padding-left: 12px;
        }

        .arch-items-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .arch-item-pill {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 13px;
            color: #E2E8F0;
        }

        /* 板块 6: 传统场馆运营 vs 智能场馆系统对比 */
        .comparison-section {
            background-color: var(--bg-light);
        }

        .compare-table-wrapper {
            background: var(--white);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            border: 1px solid var(--border-color);
        }

        .compare-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
        }

        .compare-table th {
            padding: 20px 24px;
            font-size: 16px;
            font-weight: 700;
        }

        .th-dimension {
            width: 25%;
            background: #F1F5F9;
            color: var(--text-main);
        }

        .th-trad {
            width: 37.5%;
            background: #FEE2E2;
            color: #991B1B;
        }

        .th-smart {
            width: 37.5%;
            background: #E0F2FE;
            color: #0369A1;
        }

        .compare-table td {
            padding: 18px 24px;
            font-size: 14px;
            border-bottom: 1px solid var(--border-color);
            vertical-align: top;
        }

        .td-dimension {
            font-weight: 600;
            color: var(--text-main);
            background: #F8FAFC;
        }

        .td-trad {
            color: #64748B;
        }

        .td-smart {
            color: var(--primary-dark);
            font-weight: 500;
            background: rgba(224, 242, 254, 0.15);
        }

        /* 板块 7: 标杆案例落地展示 */
        .cases-section {
            background-color: var(--white);
        }

        .case-showcase {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 48px;
            background: var(--bg-light);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-color);
            overflow: hidden;
            box-shadow: var(--shadow-md);
        }

        .case-media {
            height: 100%;
            min-height: 380px;
        }

        .case-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .case-content {
            padding: 44px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .case-tag {
            color: var(--accent);
            font-weight: 700;
            font-size: 13px;
            margin-bottom: 8px;
        }

        .case-title {
            font-size: 24px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 14px;
        }

        .case-desc {
            font-size: 15px;
            color: var(--text-muted);
            line-height: 1.7;
            margin-bottom: 24px;
        }

        .case-stats-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            border-top: 1px solid var(--border-color);
            padding-top: 20px;
        }

        .case-stat-num {
            font-size: 24px;
            font-weight: 800;
            color: var(--primary);
        }

        .case-stat-label {
            font-size: 12px;
            color: var(--text-muted);
        }

        /* 板块 8: 核心指标与效能数据 */
        .metrics-section {
            background: linear-gradient(135deg, #0A2E5C 0%, #155FA0 100%);
            color: var(--white);
            padding: 70px 0;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            text-align: center;
        }

        .metric-card {
            padding: 20px;
        }

        .metric-number {
            font-size: 48px;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 10px;
            background: linear-gradient(180deg, #FFFFFF 0%, #BAE6FD 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .metric-label {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .metric-sub {
            font-size: 13px;
            color: #93C5FD;
        }

        /* 板块 9: 运营方真实评价口碑 */
        .testimonials-section {
            background-color: var(--bg-alt);
        }

        .testi-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .testi-card {
            background: var(--white);
            border-radius: var(--radius-md);
            padding: 34px 28px;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
        }

        .testi-stars {
            color: #F59E0B;
            font-size: 16px;
            margin-bottom: 16px;
        }

        .testi-quote {
            font-size: 15px;
            color: var(--text-body);
            line-height: 1.75;
            margin-bottom: 24px;
            flex: 1;
            font-style: normal;
        }

        .testi-author {
            display: flex;
            align-items: center;
            gap: 14px;
            border-top: 1px solid var(--border-color);
            padding-top: 18px;
        }

        .author-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px;
        }

        .author-name {
            font-weight: 700;
            color: var(--text-main);
            font-size: 15px;
        }

        .author-role {
            font-size: 12px;
            color: var(--text-muted);
        }

        /* 板块 10: 行业动态与资讯证据 */
        .insights-section {
            background-color: var(--white);
        }

        .insight-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .insight-card {
            background: var(--white);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
            transition: all 0.3s ease;
        }

        .insight-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }

        .insight-img-wrap {
            height: 190px;
            overflow: hidden;
        }

        .insight-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .insight-body {
            padding: 24px;
        }

        .insight-date {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 8px;
        }

        .insight-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-main);
            line-height: 1.45;
            margin-bottom: 12px;
        }

        .insight-desc {
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.65;
            margin-bottom: 16px;
        }

        .insight-link {
            font-size: 14px;
            font-weight: 600;
            color: var(--primary);
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        /* 板块 11: 疑难解构 FAQ 手风琴 */
        .faq-section {
            background-color: var(--bg-alt);
        }

        .faq-wrapper {
            max-width: 840px;
            margin: 0 auto;
        }

        .faq-item {
            background: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin-bottom: 16px;
            overflow: hidden;
            transition: all 0.2s ease;
        }

        .faq-header {
            padding: 20px 24px;
            font-size: 16px;
            font-weight: 700;
            color: var(--text-main);
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }

        .faq-header:hover {
            background: var(--bg-light);
        }

        .faq-icon {
            font-size: 20px;
            color: var(--accent);
            transition: transform 0.3s ease;
        }

        .faq-item.active .faq-icon {
            transform: rotate(45deg);
        }

        .faq-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease;
            background: var(--white);
        }

        .faq-content-inner {
            padding: 0 24px 22px 24px;
            font-size: 14px;
            color: var(--text-body);
            line-height: 1.8;
            border-top: 1px dashed var(--border-color);
            padding-top: 16px;
        }

        /* 板块 12: 实施与交付保障条 */
        .guarantee-section {
            background-color: var(--white);
        }

        .steps-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            position: relative;
        }

        .step-card {
            background: var(--bg-light);
            border-radius: var(--radius-md);
            padding: 30px 22px;
            border: 1px solid var(--border-color);
            position: relative;
        }

        .step-num {
            width: 36px;
            height: 36px;
            background: var(--primary);
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 16px;
            margin-bottom: 18px;
        }

        .step-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 10px;
        }

        .step-desc {
            font-size: 13px;
            color: var(--text-muted);
            line-height: 1.65;
        }

        /* 板块 13: 演示预约与咨询表单区 */
        .consultation-section {
            background: linear-gradient(180deg, var(--bg-alt) 0%, #E2E8F0 100%);
            padding: 100px 0;
        }

        .form-card {
            background: var(--white);
            max-width: 860px;
            margin: 0 auto;
            border-radius: var(--radius-lg);
            padding: 48px;
            box-shadow: var(--shadow-lg);
            border: 1px solid var(--border-color);
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .form-group.full-width {
            grid-column: span 2;
        }

        .form-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-main);
        }

        .form-input, .form-select, .form-textarea {
            width: 100%;
            padding: 12px 16px;
            border-radius: 6px;
            border: 1px solid var(--border-Finishing the border style, aiming for a consistent visual with the other elements. The intention is a subtle border using the `--border-color` variable. Proceeding to style the remaining form elements.


border: 1px solid var(--border-color);
  padding: 10px;
  border-radius: var(--border-radius);
  margin-bottom: 10px;
}
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-sizing: border-box;
}
button {
  background-color: var(--primary-color);
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  width: 100%;
}
button:hover {
  opacity: 0.8;
}
/* Section Styles */
section {
  padding: 40px 0;
  text-align: center;
}
section h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: var(--heading-color);
}
section p {
  font-size: 1.1em;
  line-height: 1.6;
  color: var(--text-color);
  max-width: 800px;
  margin: 0 auto;
}
/* Hero Section */
#hero {
  background-color: var(--hero-bg-color);
  color: var(--hero-text-color);
  padding: 100px 0;
  text-align: center;
}
#hero h1 {
  font-size: 3.5em;
  margin-bottom: 20px;
}
#hero p {
  font-size: 1.3em;
  max-width: 700px;
}
#hero img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin-top: 30px;
}
/* Intro Section */
#intro {
  background-color: var(--section-bg-color);
}
/* Advantages Section */
#advantages ul {
  list-style: none;
  padding: 0;
}
#advantages li {
  margin-bottom: 15px;
  font-size: 1.1em;
  text-align: left;
  padding-left: 30px; /* Add space for the icon */
  position: relative;
}
#advantages li::before {
  content: "✓"; /* Replace with an icon if needed */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.2em;
  color: var(--primary-color);
}
/* Modules Section */
#modules {
  background-color: var(--section-bg-color);
}
#modules .module {
  margin-bottom: 30px;
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: var(--border-radius);
  text-align: left;
}
#modules .module img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin-bottom: 15px;
}
#modules .module h3 {
  font-size: 1.8em;
  margin-bottom: 10px;
  color: var(--heading-color);
}
/* Architecture Section */
#architecture {
  /* No specific styles needed here, uses default section styles */
}
#architecture img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin-bottom: 20px;
}
/* Comparison Section */
#comparison {
  background-color: var(--section-bg-color);
}
#comparison table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
#comparison

color);
  padding: 10px;
  border-radius: var(--border-radius);
  margin-bottom: 10px;
}
#comparison th,
#comparison td {
  border: 1px solid var(--border-color);
  padding: 8px;
  text-align: left;
}
/* Cases Section */
#cases {
  /* No specific styles needed here, uses default section styles */
}
#cases .case {
  margin-bottom: 30px;
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: var(--border-radius);
  text-align: left;
}
#cases .case img {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin-bottom: 15px;
}
#cases .case h3 {
  font-size: 1.8em;
  margin-bottom: 10px;
  color: var(--heading-color);
}
/* Metrics Section */
#metrics {
  background-color: var(--section-bg-color);
}
#metrics .metric {
  margin-bottom: 20px;
}
#metrics h4 {
  font-size: 1.5em;
  margin-bottom: 5px;
  color: var(--heading-color);
}
/* Testimonials Section */
#testimonials {
  /* No specific styles needed here, uses default section styles */
}
#testimonials .testimonial {
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: var(--border-radius);
  text-align: left;
}
#testimonials .testimonial p {
  font-style: italic;
  font-size: 1.2em;
  margin-bottom: 10px;
}
#testimonials .testimonial cite {
  font-size: 1em;
  color: var(--text-color);
}
/* Insights Section */
#insights {
  background-color: var(--section-bg-color);
}
#insights .insight {
  margin-bottom: 30px;
  border: 1px solid var(--border-color);
  padding: 20px;
  border-radius: var(--border-radius);
  text-align: left;
}
#insights .insight h3 {
  font-size: 1.8em;
  margin-bottom: 10px;
  color: var(--heading-color);
}
#insights .insight p {
  font-size: 1.1em;
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: 10px;
}
/* FAQ Section */
#faq {
  /* No specific styles needed here, uses default section styles */
}
#faq .faq-item {
  margin-bottom: 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}
#faq .faq-question {
  background-color: var(--section-bg-color);
  padding: 15px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2em;
  color: var(--heading-color);
}
#faq .faq-answer {
  padding: 15px;
  font-size: 1.1em;
  line-height: 1.6;
  color: var(--text-color);
  display: none;
}
#faq .faq-item.active .faq-answer {
  display: block;
}
/* Guarantee Section */
#guarantee {
  background-color: var(--section-bg-color);
}
#guarantee .step {
  margin-bottom: 20px;
  text-align: left;
}
#guarantee .step h4 {
  font-size: 1.5em;
  margin-bottom: 5px;
  color: var(--heading-color);
}
/* Footer

Form input styles are established, including focus states for visual feedback.  A default resize behavior is also applied to textareas. Considering the overall structure, planning the consultation section form.  Footer and global elements are also planned and the image assets were prepared.


Form styling is finalized, including the form-checkbox-row and submit button.  A fixed bottom CTA bar is being implemented with initial CSS.  The intention is for this bar to be visually present on the page.


Initial CSS for the fixed bottom CTA bar is being implemented. The objective is ensuring consistent visual presence across the page.
Footer element CSS is established including styling for text, links, headings, grid, and bottom. The intention is for a clear layout and visual hierarchy.


Responsive design adjustments are being applied to various elements, including navigation toggles, the hero section, grid layouts, tables, padding, and forms, across different screen sizes. Style tags will be closed and the head section concluded, preparing to open the body section. The header's top bar elements, main navigation, and button are drafted. The hero section is constructed, containing the H1, subtitle, badges, and CTA elements. Title refinement is being addressed to maintain the core product name.


Border styling is now implemented across all form elements. The focus states provide visual confirmation of active input fields. Considering the page layout, a consultation section form is being planned, and global elements will also be styled.

Form styling, including checkbox rows and submit buttons, is finalized. A fixed bottom CTA bar is being added to maintain constant visual presence on the page.

Fixed bottom CTA bar CSS is applied to maintain the visual consistency across the page.

Footer element CSS is established including styling for text, links, headings, grid, and bottom, creating a clear layout and visual hierarchy.

Responsive design adjustments have begun.  Navigation toggles, hero sections, grids, and forms are updated for different screen sizes. Style tags have closed and the head concluded, and the body section is opening. Header elements, including the top bar, main navigation, and button, are now drafted. The hero section is complete with the H1, subtitle, badges, and CTA. Product name refinement is in progress.


Analysis indicates the showcased case study emphasizes digital transformation in sports venues, highlighting energy reduction, improved access, and automated booking, supported by key metrics like operational days and energy savings. Positive testimonials from venue management roles reinforce the system's effectiveness.

Industry insights explore energy efficiency, security via ticketing and facial recognition, and IoT integration within the smart venue system, directing users to consultation. FAQ section addresses critical deployment and operational concerns, including integration, data security, and private cloud options.


color);
            font-size: 14px;
            background: var(--bg-light);
            color: var(--text-main);
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .form-input:focus, .form-select:focus, .form-textarea:focus {
            border-color: var(--primary);
            background: var(--white);
            box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.12);
        }

        .form-textarea {
            resize: vertical;
            min-height: 96px;
        }

        .form-checkbox-row {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 24px;
        }

        .form-checkbox-row input {
            accent-color: var(--primary);
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        .btn-submit {
            width: 100%;
            padding: 15px;
            font-size: 16px;
            font-weight: 700;
            background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
            color: var(--white);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.25s;
            box-shadow: 0 4px 16px rgba(15, 76, 129, 0.25);
        }

        .btn-submit:hover {
            opacity: 0.95;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(15, 76, 129, 0.35);
        }

        /* 底部固定转化条 */
        .fixed-bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 64px;
            background: rgba(10, 46, 92, 0.92);
            backdrop-filter: blur(12px);
            z-index: 999;
            display: flex;
            align-items: center;
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
            transform: translateY(100%);
            transition: transform 0.35s ease;
        }

        .fixed-bottom-bar.is-visible {
            transform: translateY(0);
        }

        .fixed-bar-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
        }

        .fixed-bar-info {
            display: flex;
            align-items: center;
            gap: 20px;
            color: var(--white);
            font-size: 14px;
        }

        .fixed-bar-phone {
            font-size: 18px;
            font-weight: 800;
            color: #38BDF8;
            letter-spacing: 0.5px;
        }

        .fixed-bar-actions {
            display: flex;
            gap: 12px;
        }

        .btn-bar-cta {
            background: var(--accent);
            color: var(--white);
            padding: 9px 22px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .btn-bar-cta:hover {
            background: #0284C7;
            transform: translateY(-1px);
        }

        /* 页脚布局 */
        .site-footer {
            background-color: #071E3D;
            color: #94A3B8;
            padding: 76px 0 32px 0;
            font-size: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr 0.8fr 1.1fr 1fr;
            gap: 40px;
            margin-bottom: 50px;
        }

        .footer-brand {
            font-size: 20px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 16px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .footer-desc {
            line-height: 1.8;
            margin-bottom: 20px;
            font-size: 13px;
        }

        .footer-heading {
            color: var(--white);
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 20px;
            border-left: 3px solid var(--accent);
            padding-left: 10px;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a:hover {
            color: var(--white);
            padding-left: 4px;
        }

        .footer-contact-item {
            margin-bottom: 12px;
            display: flex;
            gap: 10px;
            line-height: 1.6;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding-top: 26px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #64748B;
            flex-wrap: wrap;
            gap: 12px;
        }

        .footer-bottom a {
            color: #64748B;
        }

        .footer-bottom a:hover {
            color: #94A3B8;
        }

        /* 响应式适配断点 */
        @media (max-width: 1024px) {
            .hero-grid, .intro-grid, .case-showcase {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            .adv-grid, .module-grid, .insight-grid, .testi-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .steps-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }
            .arch-layer-card {
                grid-template-columns: 1fr;
                gap: 16px;
            }
        }

        @media (max-width: 768px) {
            section {
                padding: 60px 0;
            }
            .header-topbar {
                display: none;
            }
            .mobile-menu-btn {
                display: block;
            }
            .nav-menu {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background: #0A2E5C;
                flex-direction: column;
                padding: 20px 24px;
                gap: 16px;
                display: none;
                box-shadow: 0 10px 20px rgba(0,0,0,0.25);
            }
            .nav-menu.is-active {
                display: flex;
            }
            .nav-cta {
                display: none;
            }
            .hero-title {
                font-size: 32px;
            }
            .section-title {
                font-size: 26px;
            }
            .adv-grid, .module-grid, .insight-grid, .testi-grid, .steps-grid, .metrics-grid {
                grid-template-columns: 1fr;
            }
            .form-grid {
                grid-template-columns: 1fr;
            }
            .form-group.full-width {
                grid-column: span 1;
            }
            .form-card {
                padding: 28px 20px;
            }
            .compare-table th, .compare-table td {
                padding: 12px 14px;
                font-size: 13px;
            }
            .fixed-bar-info {
                display: none;
            }
            .fixed-bar-actions {
                width: 100%;
                justify-content: stretch;
            }
            .btn-bar-cta {
                flex: 1;
                text-align: center;
            }
            .footer-grid {
                grid-template-columns: 1fr;
            }
        }

` block will be injected, or inline styling used to prevent rendering issues. Missing styles identified include FAQ, steps, form, and fixed bottom bar components. A `<style>` tag will be added to ensure the correct theme application.



                            <h3 class="insight-title">高密度人流通行场景下闸机双向核验与防尾随技术应用</h3>
                            <p class="insight-desc">针对文体大型活动入场高峰期通行瓶颈，结合红外对射光幕算法与人脸活体防伪检测，保障单通道超低延迟精准放行。</p>
                            <a href="#consultation" class="insight-link">咨询实施方案 →</a>
                        </div>
                    </div>
                    <div class="insight-card">
                        <div class="insight-img-wrap">
                            <img src="/assets/images/f8e83ff505ef42da.jpg" alt="智能场馆系统多场馆数据中台统一管理与协同调度架构" loading="lazy">
                        </div>
                        <div class="insight-body">
                            <div class="insight-date">中台建设 · 运营管理篇</div>
                            <h3 class="insight-title">区域文体场馆集团化集约管控：从数据孤岛到统一运营中台</h3>
                            <p class="insight-desc">阐述集团化场馆在多租户权限划分、跨场馆会员一卡通消费及全域财务自动清算结算维度的标准化实施路径与系统拓扑。</p>
                            <a href="#consultation" class="insight-link">咨询实施方案 →</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 板块 11: 常见疑难解构与 FAQ 手风琴交互区 -->
        <section class="faq-section" id="faq">
            <style>
                .faq-section {
                    padding: 90px 0;
                    background-color: var(--white);
                }
                .faq-container {
                    max-width: 860px;
                    margin: 0 auto;
                }
                .faq-item {
                    border: 1px solid var(--border-color);
                    border-radius: var(--radius);
                    margin-bottom: 16px;
                    background: var(--bg-alt);
                    overflow: hidden;
                    transition: border-color var(--trans-fast);
                }
                .faq-item.is-open {
                    border-color: var(--primary);
                    background: var(--white);
                    box-shadow: var(--shadow-sm);
                }
                .faq-header {
                    padding: 22px 28px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    cursor: pointer;
                    user-select: none;
                    background: transparent;
                }
                .faq-question {
                    font-size: 17px;
                    font-weight: 600;
                    color: var(--text-dark);
                    margin: 0;
                }
                .faq-icon {
                    width: 24px;
                    height: 24px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    background: #E2E8F0;
                    color: var(--text-muted);
                    font-size: 14px;
                    transition: transform var(--trans-fast), background-color var(--trans-fast), color var(--trans-fast);
                }
                .faq-item.is-open .faq-icon {
                    transform: rotate(180deg);
                    background: var(--primary);
                    color: var(--white);
                }
                .faq-body {
                    display: none;
                    padding: 0 28px 24px 28px;
                    color: var(--text-muted);
                    font-size: 15px;
                    line-height: 1.8;
                    border-top: 1px dashed var(--border-color);
                    margin-top: 4px;
                    padding-top: 18px;
                }
                .faq-item.is-open .faq-body {
                    display: block;
                }

.guarantee-section {
                    padding: 85px 0;
                    background-color: var(--bg-alt);
                }
                .steps-grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 24px;
                }
                .step-card {
                    background: var(--white);
                    border-radius: var(--radius);
                    padding: 32px 24px;
                    border: 1px solid var(--border-color);
                    box-shadow: var(--shadow-sm);
                    position: relative;
                }
                .step-num {
                    display: inline-block;
                    font-size: 13px;
                    font-weight: 700;
                    color: var(--accent);
                    background: rgba(0, 168, 204, 0.1);
                    padding: 4px 10px;
                    border-radius: 20px;
                    margin-bottom: 16px;
                }
                .step-title {
                    font-size: 18px;
                    font-weight: 700;
                    color: var(--text-dark);
                    margin-bottom: 12px;
                }
                .step-desc {
                    font-size: 14px;
                    color: var(--text-muted);
                    line-height: 1.7;
                    margin: 0;
                }

.consultation-section {
                    padding: 95px 0;
                    background: linear-gradient(180deg, #FFFFFF 0%, #EDF4F9 100%);
                }
                .form-card {
                    max-width: 820px;
                    margin: 0 auto;
                    background: var(--white);
                    border-radius: 16px;
                    padding: 45px 50px;
                    border: 1px solid var(--border-color);
                    box-shadow: var(--shadow-hover);
                }
                .form-title-box {
                    text-align: center;
                    margin-bottom: 32px;
                }
                .form-main-title {
                    font-size: 26px;
                    font-weight: 700;
                    color: var(--text-dark);
                    margin-bottom: 10px;
                }
                .form-main-desc {
                    font-size: 15px;
                    color: var(--text-muted);
                }
                .form-grid {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 20px;
                    margin-bottom: 24px;
                }
                .form-group {
                    display: flex;
                    flex-direction: column;
                }
                .form-group.full-width {
                    grid-column: span 2;
                }
                .form-label {
                    font-size: 14px;
                    font-weight: 600;
                    color: var(--text-dark);
                    margin-bottom: 8px;
                }
                .form-input, .form-select {
                    width: 100%;
                    padding: 13px 16px;
                    border: 1px solid var(--border-color);
                    border-radius: var(--radius);
                    font-size: 14px;
                    background: #FAFBFD;
                    transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
                    outline: none;
                    color: var(--text-dark);
                }
                .form-input:focus, .form-select:focus {
                    border-color: var(--primary);
                    box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.12);
                    background: var(--white);
                }
                .form-checkbox-label {
                    font-size: 13px;
                    color: var(--text-muted);
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    cursor: pointer;
                    margin-bottom: 24px;
                }
                .form-checkbox {
                    width: 16px;
                    height: 16px;
                    accent-color: var(--primary);
                    cursor: pointer;
                }
                .btn-submit-booking {
                    width: 100%;
                    padding: 15px;
                    font-size: 16px;
                    font-weight: 700;
                    color: var(--white);
                    background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 100%);
                    border: none;
                    border-radius: var(--radius);
                    cursor: pointer;
                    box-shadow: var(--shadow-sm);
                    transition: transform var(--trans-fast), box-shadow var(--trans-fast);
                }
                .btn-submit-booking:hover {
                    transform: translateY(-2px);
                    box-shadow: var(--shadow-hover);
                }
                .form-footer-hint {
                    text-align: center;
                    font-size: 13px;
                    color: var(--text-muted);
                    margin-top: 16px;
                }

.fixed-bottom-bar {
                position: fixed;
                bottom: -80px;
                left: 0;
                width: 100%;
                height: 64px;
                background: rgba(10, 46, 92, 0.95);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border-top: 1px solid rgba(0, 168, 204, 0.4);
                z-index: 999;
                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
                transition: bottom 0.35s ease-in-out;
            }
            .fixed-bottom-bar.is-visible {
                bottom: 0;
            }
            .fixed-bar-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 100%;
            }
            .fixed-bar-info {
                display: flex;
                align-items: center;
                gap: 16px;
                color: var(--white);
            }
            .fixed-bar-tag {
                background: var(--accent);
                color: var(--white);
                font-size: 12px;
                padding: 3px 8px;
                border-radius: 4px;
                font-weight: 600;
            }
            .fixed-bar-title {
                font-size: 15px;
                font-weight: 600;
            }
            .fixed-bar-actions {
                display: flex;
                align-items: center;
                gap: 14px;
            }
            .btn-bar-phone {
                color: #A0C4E2;
                font-size: 14px;
                font-weight: 600;
                text-decoration: none;
            }
            .btn-bar-cta {
                background: linear-gradient(135deg, var(--accent) 0%, #0088A8 100%);
                color: var(--white);
                padding: 9px 20px;
                border-radius: 20px;
                font-size: 14px;
                font-weight: 700;
                text-decoration: none;
                transition: transform var(--trans-fast);
            }
            .btn-bar-cta:hover {
                transform: scale(1.04);
            }