/* roulang page: index */
:root {
            --deep-green: #0B3D2E;
            --vivid-orange: #F85C1E;
            --warm-gray: #F7F6F3;
            --pure-white: #FFFFFF;
            --charcoal: #1E1E1E;
            --muted-gray: #5C5C5C;
            --soft-green-bg: rgba(11, 61, 46, 0.08);
            --light-green-surface: #F0F7F4;
            --border-subtle: rgba(0,0,0,0.06);
            --radius-card: 20px;
            --radius-btn: 30px;
            --radius-input: 12px;
            --radius-badge: 100px;
            --shadow-default: 0 4px 20px rgba(0,0,0,0.04);
            --shadow-hover: 0 12px 32px rgba(0,0,0,0.08);
            --shadow-orange-glow: 0 0 0 6px rgba(248,92,30,0.25);
            --font-zh: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
            --font-number: "Inter", "Roboto", system-ui, sans-serif;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-zh);
            background-color: var(--warm-gray);
            color: var(--charcoal);
            line-height: 1.7;
            -webkit-font-smoothing: antialiased;
            scroll-behavior: smooth;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 30px;
        }

        /* 沉浸式导航 PC */
        #header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background: linear-gradient(180deg, rgba(11,61,46,0.92) 0%, rgba(6,37,28,0.7) 70%, transparent 100%);
            backdrop-filter: blur(8px);
            padding: 16px 0;
            transition: all 0.25s ease;
        }

        .nav-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1250px;
            margin: 0 auto;
            padding: 0 30px;
        }

        .logo-area {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .logo-icon {
            width: 32px;
            height: 32px;
            fill: var(--pure-white);
            opacity: 0.95;
        }

        .logo-text {
            font-size: 1.8rem;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: white;
            line-height: 1;
            font-family: var(--font-zh);
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .desktop-nav {
            display: flex;
            align-items: center;
            gap: 36px;
        }

        .desktop-nav a {
            color: rgba(255,255,255,0.9);
            text-decoration: none;
            font-size: 1rem;
            font-weight: 500;
            transition: color 0.2s;
            letter-spacing: 0.3px;
            position: relative;
        }

        .desktop-nav a::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--vivid-orange);
            transition: width 0.25s ease;
        }

        .desktop-nav a:hover {
            color: white;
        }
        .desktop-nav a:hover::after {
            width: 100%;
        }

        .btn-consult {
            background: linear-gradient(90deg, #0B3D2E 0%, #F85C1E 100%);
            color: white;
            border: none;
            padding: 12px 28px;
            border-radius: var(--radius-btn);
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: none;
            letter-spacing: 0.4px;
            display: inline-block;
            text-decoration: none;
        }
        .btn-consult:hover {
            filter: brightness(1.15);
            box-shadow: var(--shadow-orange-glow);
            transform: scale(1.02);
        }

        /* 移动端底部导航 */
        .mobile-bottom-nav {
            display: none;
            position: fixed;
            bottom: 15px;
            left: 15px;
            right: 15px;
            background: rgba(11,61,46,0.92);
            backdrop-filter: blur(16px);
            border-radius: 50px;
            padding: 6px 18px;
            z-index: 1100;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            justify-content: space-around;
            align-items: center;
            border: 1px solid rgba(255,255,255,0.15);
        }
        .mobile-nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: rgba(255,255,255,0.7);
            text-decoration: none;
            font-size: 0.7rem;
            font-weight: 500;
            transition: 0.2s;
            padding: 6px 8px;
            border-radius: 30px;
        }
        .mobile-nav-item i { font-size: 1.2rem; margin-bottom: 2px; }
        .mobile-nav-item.active, .mobile-nav-item:hover {
            color: var(--vivid-orange);
            background: rgba(255,255,255,0.1);
        }

        main {
            padding-top: 90px;
        }

        h1, h2, h3, h4 {
            font-family: var(--font-zh);
            font-weight: 700;
        }

        h1 { font-size: 48px; line-height: 1.15; }
        h2 { font-size: 36px; margin-bottom: 12px; }
        h3 { font-size: 24px; }

        section {
            padding: 70px 0;
        }

        .icon-orange { color: var(--vivid-orange); }
        .bg-soft-green { background-color: var(--soft-green-bg); }

        /* 按钮基础 */
        .btn-primary {
            background: linear-gradient(90deg, #0B3D2E, #F85C1E);
            color: white;
            border-radius: 30px;
            padding: 16px 36px;
            font-weight: 700;
            border: none;
            cursor: pointer;
            transition: all 0.25s;
            text-decoration: none;
            display: inline-block;
        }
        .btn-primary:hover { filter: brightness(1.1); box-shadow: 0 8px 22px rgba(248,92,30,0.35); }
        .btn-outline {
            background: transparent;
            border: 2px solid var(--deep-green);
            color: var(--deep-green);
            border-radius: 30px;
            padding: 14px 32px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
            text-decoration: none;
        }
        .btn-outline:hover { background: var(--deep-green); color: white; }

        @media (max-width: 768px) {
            .desktop-nav { display: none; }
            #header { background: rgba(11,37,28,0.98); padding: 12px 0; }
            .mobile-bottom-nav { display: flex; }
            .container { padding: 0 20px; }
            h1 { font-size: 36px; }
            section { padding: 50px 0; }
        }

.highlight-card { background: white; border-radius:20px; padding:35px 30px; position:relative; box-shadow:0 4px 20px rgba(0,0,0,0.04); transition:0.2s; display:flex; flex-direction:column; }
            .highlight-card:hover { transform:translateY(-6px); box-shadow:0 12px 32px rgba(0,0,0,0.08); }
            .card-decor { position:absolute; left:0; top:20px; bottom:20px; width:4px; background:var(--deep-green); border-radius:0 4px 4px 0; }
            .highlight-card:hover .card-decor { background:var(--vivid-orange); width:8px; }
            .badge-data { margin-top:15px; align-self:flex-end; background:rgba(11,61,46,0.07); color:var(--deep-green); padding:6px 20px; border-radius:100px; font-weight:700; }

.case-card { break-inside:avoid; margin-bottom:28px; background:white; border-radius:20px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.04); transition:0.25s; }
            .case-card:hover { transform:translateY(-5px); box-shadow:0 14px 30px rgba(0,0,0,0.1); }
            .case-card img { width:100%; display:block; }
            .case-info { padding:20px; }
            .tag { background:transparent; border:1px solid var(--deep-green); color:var(--deep-green); padding:4px 14px; border-radius:20px; font-size:0.8rem; }

.faq-item { border-bottom:1px solid #ddd; padding:20px 0; cursor:pointer; }
            .faq-question { font-weight:700; display:flex; align-items:center; gap:15px; }
            .faq-question span { background:var(--deep-green); color:white; width:28px; height:28px; border-radius:50%; text-align:center; line-height:28px; }
            .faq-answer { max-height:0; overflow:hidden; transition:0.3s; padding-left:45px; color:var(--muted-gray); }
            .faq-item.active .faq-answer { max-height:120px; padding-top:12px; }
