/* ============ pages-solutions.css = 5 个 solutions 页共享 ============ */

body { font-family: var(--font); background: var(--white); color: var(--dark-600); line-height: 1.7; -webkit-font-smoothing: antialiased; }

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

/* NAVBAR */ .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--nav-height);
            background: transparent;
            border-bottom: 1px solid rgba(226, 232, 240, 0);
            z-index: 1000;
            display: flex;
            align-items: center;
            transition: background 0.25s ease, border-color 0.25s ease;
        }

.navbar.nav-hero {
            background: rgba(255, 255, 255, 0.55);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom-color: rgba(226, 232, 240, 0.5);
        }

.navbar.nav-scrolled {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom-color: rgba(226, 232, 240, 0.6);
        }

.navbar:not(.nav-hero):not(.nav-scrolled) .nav-links .nav-cta {
            background: #fff;
            color: var(--primary);
            border: 1px solid var(--primary-200);
            box-shadow: none;
        }

.navbar:not(.nav-hero):not(.nav-scrolled) .nav-links .nav-cta:hover {
            background: var(--primary-50);
            color: var(--primary-dark);
            box-shadow: none;
            transform: translateY(-1px);
        }

.navbar.nav-hero .nav-links .nav-cta,
        .navbar.nav-scrolled .nav-links .nav-cta {
            background: var(--primary);
            color: #fff;
            border-color: transparent;
            box-shadow: none;
        }

.navbar.nav-hero .nav-links .nav-cta:hover,
        .navbar.nav-scrolled .nav-links .nav-cta:hover {
            background: var(--primary-dark);
            box-shadow: none;
            transform: translateY(-1px);
        }

.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active { background: var(--primary-50); color: var(--primary); }

.hamburger span { width: 22px; height: 2px; background: var(--dark); border-radius: 2px; }

.mobile-menu { display: none; position: fixed; top: 88px; left: 16px; right: 16px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--dark-200); padding: 12px; z-index: 999; }

.mobile-menu a { display: block; padding: 14px 20px; font-size: 15px; font-weight: 500; color: var(--dark-700); border-radius: var(--radius-sm); }

.mobile-menu a.sub { padding-left: 32px; color: var(--dark-500); font-size: 14px; }

.mobile-menu a:hover { background: var(--primary-50); color: var(--primary); }
.mobile-menu .mobile-group { padding: 16px 20px 4px; font-size: 12px; font-weight: 700; color: var(--dark-400); letter-spacing: 0.5px; text-transform: uppercase; }
.mobile-menu a.mobile-phone { display: flex; align-items: center; gap: 8px; color: var(--primary); font-weight: 700; }
.mobile-menu a.mobile-phone svg { width: 16px; height: 16px; flex-shrink: 0; }
.mobile-menu a.mobile-phone span { color: var(--primary); }

/* PAGE BANNER */ .page-banner { padding-top: calc(var(--nav-height) + 64px); padding-bottom: 80px; text-align: center; background: linear-gradient(180deg, #f0f4ff 0%, #f8faff 60%, var(--white) 100%); position: relative; border-bottom: 1px solid var(--dark-200); overflow: hidden; }

.page-banner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), #6366f1, var(--primary-light)); opacity: 0.7; z-index: 1; }

.page-banner::after { content: ""; position: absolute; top: -100px; right: -120px; width: 400px; height: 400px; border-radius: 50%; border: 48px solid rgba(26,86,219,0.06); pointer-events: none; }

.page-banner .container { position: relative; z-index: 1; }

.page-banner h1 span { color: var(--primary); }

.page-banner p { font-size: 17px; color: var(--dark-500); max-width: 560px; margin: 0 auto; line-height: 1.8; }

.page-banner-tags { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 28px; }

.page-banner-tag { font-size: 13px; font-weight: 600; color: var(--dark-600); background: var(--dark-100); padding: 6px 18px; border-radius: 20px; }

.section-subtitle { font-size: 16px; color: var(--dark-500); text-align: center; max-width: 680px; margin: 0 auto 56px; line-height: 1.8; }

/* PAIN POINTS */ .pain-section { background: var(--white); position: relative; overflow: hidden; }

.pain-section::before {
            content: "";
            position: absolute;
            top: -30%; right: -10%;
            width: 400px; height: 400px;
            background: radial-gradient(circle, rgba(245,158,11,0.06) 0%, transparent 65%);
            pointer-events: none;
        }

.pain-card {
            max-width: 800px; margin: 0 auto;
            background: linear-gradient(135deg, #fff 40%, #fffbeb 100%);
            border: 1px solid #fde68a;
            border-radius: 20px;
            padding: 40px;
            position: relative;
            z-index: 1;
            box-shadow: 0 4px 24px rgba(245,158,11,0.06);
        }

.pain-card-header {
            display: flex; align-items: center; gap: 14px;
            margin-bottom: 20px;
        }

.pain-card-badge {
            width: 42px; height: 42px;
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            background: linear-gradient(135deg, #f59e0b, #d97706);
            box-shadow: 0 4px 12px rgba(245,158,11,0.3);
            flex-shrink: 0;
        }

.pain-card-badge svg { width: 20px; height: 20px; color: #fff; }

.pain-card-header span {
            font-size: 15px; font-weight: 700; color: #92400e; letter-spacing: 0.5px;
        }

.pain-card p { font-size: 15px; color: var(--dark-600); line-height: 2; text-align: justify; }

/* SOLUTION CARDS — 2x2 */ .solution-section { background: var(--dark-50); }

.solution-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(26,86,219,0.08), 0 4px 12px rgba(15,23,42,0.04); border-color: var(--primary-200); }

.solution-card:hover .solution-card-num { background: linear-gradient(135deg, var(--primary), var(--primary-light)); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(26,86,219,0.28); }

.solution-card h4 { font-size: 17px; font-weight: 800; color: var(--dark); line-height: 1.35; margin-bottom: 10px; letter-spacing: -0.2px; }

.solution-card p { font-size: 14px; color: var(--dark-500); line-height: 1.85; }

/* BUSINESS TRANSFORMATION */ .change-section { background: linear-gradient(180deg, var(--white) 0%, #f8fafc 50%, var(--white) 100%); }

.change-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }

.change-item:hover {
            transform: translateX(4px);
            border-color: transparent;
            box-shadow: 0 8px 24px rgba(59,130,246,0.1);
            background: linear-gradient(135deg, #fff 60%, #f8faff);
        }

.change-item p { font-size: 15px; color: var(--dark-600); line-height: 1.8; }

/* CORE SCENARIOS */ .scenarios-section { background: var(--dark-50); }

.scenarios-tags { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; max-width: 700px; margin: 0 auto; }

.scenario-tag { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--white); border: 1px solid var(--dark-200); border-radius: var(--radius-md); font-size: 15px; font-weight: 600; color: var(--dark-700); transition: all 0.25s; }

.scenario-tag svg { width: 18px; height: 18px; color: var(--primary); flex-shrink: 0; }

.scenario-tag:hover { border-color: var(--primary-200); box-shadow: var(--shadow-sm); transform: translateY(-2px); }

/* Q&A */ .qa-section { background: var(--white); }

.qa-list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }

.qa-card { background: var(--dark-50); border: 1px solid var(--dark-200); border-radius: var(--radius-lg); overflow: hidden; }

.qa-question { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px; background: var(--primary-50); border-bottom: 1px solid var(--primary-100); }

.qa-q-icon { flex-shrink: 0; width: 28px; height: 28px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }

.qa-question p { font-size: 15px; font-weight: 600; color: var(--dark); padding-top: 3px; }

.qa-answer { display: flex; align-items: flex-start; gap: 12px; padding: 20px 24px; }

.qa-a-icon { flex-shrink: 0; width: 28px; height: 28px; background: var(--white); border: 1px solid var(--dark-200); color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }

.qa-answer p { font-size: 14px; color: var(--dark-600); line-height: 1.85; padding-top: 3px; }

/* CTA */ .cta-section { background: var(--white); text-align: center; }

.btn-primary:hover { box-shadow: 0 8px 28px rgba(26,86,219,0.4); transform: translateY(-2px); }

/* CONSULTATION MODAL */ .consult-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15,23,42,0.6); backdrop-filter: blur(8px); z-index: 9999; align-items: center; justify-content: center; }

.consult-modal-content { background: var(--white); border-radius: var(--radius-xl); padding: 48px 40px; text-align: center; max-width: 380px; width: 90%; position: relative; box-shadow: var(--shadow-lg); animation: modalIn 0.3s ease; }

.consult-modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--dark-100); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }