/* roulang page: index */
/* ==================== 设计变量 ==================== */
        :root {
            --color-primary: #0d7c3f;
            --color-primary-dark: #095a2e;
            --color-primary-light: #10994f;
            --color-accent: #e8a817;
            --color-accent-dark: #c48c10;
            --color-accent-light: #f5c44a;
            --color-bg: #f5f6f8;
            --color-bg-alt: #edf0f3;
            --color-surface: #ffffff;
            --color-text: #1a1a2e;
            --color-text-secondary: #5a5d6e;
            --color-text-muted: #8b8fa3;
            --color-border: #e2e5ea;
            --color-border-light: #eef0f4;
            --color-success: #0d7c3f;
            --color-warning: #e8a817;
            --color-danger: #d94040;
            --radius-sm: 8px;
            --radius-md: 14px;
            --radius-lg: 20px;
            --radius-xl: 28px;
            --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
            --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.08);
            --shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.10);
            --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.12);
            --transition-fast: 0.18s ease;
            --transition-base: 0.28s ease;
            --transition-slow: 0.4s ease;
            --font-heading: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --font-body: 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            --header-height: 60px;
            --container-max: 1200px;
            --section-gap: 80px;
            --section-gap-mobile: 48px;
        }

        /* ==================== 基础 Reset & Base ==================== */
        *,*::before,*::after{box-sizing:border-box;}
        html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
        body{
            margin:0;
            padding:0;
            font-family:var(--font-body);
            font-size:16px;
            line-height:1.7;
            color:var(--color-text);
            background-color:var(--color-bg);
            overflow-x:hidden;
            padding-top:var(--header-height);
        }
        a{text-decoration:none;color:inherit;transition:color var(--transition-fast);}
        a:hover{color:var(--color-primary);}
        img{max-width:100%;height:auto;display:block;}
        button,input,select,textarea{font-family:inherit;font-size:inherit;}
        h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.3;color:var(--color-text);margin-top:0;}
        h1{font-size:2.8rem;letter-spacing:-0.02em;}
        h2{font-size:2.1rem;letter-spacing:-0.01em;}
        h3{font-size:1.45rem;}
        h4{font-size:1.2rem;}
        p{margin-top:0;margin-bottom:1rem;color:var(--color-text-secondary);}
        .container{max-width:var(--container-max);padding-left:20px;padding-right:20px;}
        @media(min-width:1400px){
            .container{max-width:1240px;}
        }

        /* ==================== 自定义 Bootstrap 覆盖 ==================== */
        .btn{border-radius:var(--radius-sm);font-weight:600;padding:10px 22px;transition:all var(--transition-base);border:none;font-family:var(--font-body);}
        .btn:focus{box-shadow:0 0 0 3px rgba(13,124,63,0.18);outline:none;}
        .btn-primary{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff;}
        .btn-primary:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md);}
        .btn-primary:active{background-color:var(--color-primary-dark);transform:translateY(0);}
        .btn-outline-primary{border:2px solid var(--color-primary);color:var(--color-primary);background:transparent;}
        .btn-outline-primary:hover{background-color:var(--color-primary);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md);}
        .btn-accent{background-color:var(--color-accent);color:#1a1a2e;font-weight:700;}
        .btn-accent:hover{background-color:var(--color-accent-dark);color:#1a1a2e;transform:translateY(-1px);box-shadow:var(--shadow-md);}
        .btn-lg{padding:14px 32px;font-size:1.05rem;border-radius:var(--radius-md);}
        .btn-sm{padding:7px 16px;font-size:0.875rem;}
        .btn-white{background-color:#fff;color:var(--color-text);box-shadow:var(--shadow-xs);}
        .btn-white:hover{background-color:#f9fafb;box-shadow:var(--shadow-sm);transform:translateY(-1px);color:var(--color-primary);}
        .card{border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-base);background:var(--color-surface);overflow:hidden;}
        .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);}
        .card-body{padding:24px 28px;}
        .badge{font-weight:600;padding:6px 14px;border-radius:20px;font-size:0.8rem;letter-spacing:0.01em;}
        .badge-primary{background-color:rgba(13,124,63,0.1);color:var(--color-primary);}
        .badge-accent{background-color:rgba(232,168,23,0.12);color:var(--color-accent-dark);}
        .badge-live{background-color:#d94040;color:#fff;animation:livePulse 2s ease-in-out infinite;}
        @keyframes livePulse{0%,100%{opacity:1;}50%{opacity:0.7;}}
        .form-control{border-radius:var(--radius-sm);border:2px solid var(--color-border);padding:10px 16px;transition:all var(--transition-fast);font-size:0.95rem;}
        .form-control:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(13,124,63,0.1);outline:none;}
        .accordion-button{font-weight:600;font-size:1rem;border-radius:var(--radius-md) !important;padding:18px 22px;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border-light);transition:all var(--transition-base);}
        .accordion-button:not(.collapsed){background-color:rgba(13,124,63,0.04);color:var(--color-primary);border-color:rgba(13,124,63,0.2);box-shadow:none;}
        .accordion-button:focus{box-shadow:0 0 0 3px rgba(13,124,63,0.1);border-color:var(--color-primary);}
        .accordion-button::after{transition:all var(--transition-base);}
        .accordion-item{border:none;margin-bottom:10px;background:transparent;}
        .accordion-body{background:var(--color-surface);border-radius:0 0 var(--radius-md) var(--radius-md);padding:18px 22px;color:var(--color-text-secondary);line-height:1.7;}

        /* ==================== Header / 导航 ==================== */
        .site-header{
            position:fixed;
            top:0;
            left:0;
            right:0;
            height:var(--header-height);
            background:rgba(255,255,255,0.94);
            backdrop-filter:blur(14px);
            -webkit-backdrop-filter:blur(14px);
            border-bottom:1px solid var(--color-border-light);
            z-index:1050;
            display:flex;
            align-items:center;
            transition:all var(--transition-base);
        }
        .site-header.scrolled{box-shadow:var(--shadow-md);}
        .header-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            width:100%;
            max-width:var(--container-max);
            margin:0 auto;
            padding:0 20px;
            height:100%;
        }
        .header-left{display:flex;align-items:center;gap:32px;flex-shrink:0;}
        .header-logo{
            font-family:var(--font-heading);
            font-weight:800;
            font-size:1.25rem;
            color:var(--color-text);
            display:flex;
            align-items:center;
            gap:9px;
            white-space:nowrap;
            letter-spacing:-0.01em;
            transition:color var(--transition-fast);
        }
        .header-logo:hover{color:var(--color-primary);}
        .header-logo .logo-icon{
            display:flex;
            align-items:center;
            justify-content:center;
            width:38px;
            height:38px;
            border-radius:var(--radius-sm);
            background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));
            color:#fff;
            font-size:1.15rem;
            flex-shrink:0;
        }
        .header-nav{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;}
        .header-nav li a{
            display:block;
            padding:8px 16px;
            border-radius:var(--radius-sm);
            font-weight:600;
            font-size:0.93rem;
            color:var(--color-text-secondary);
            transition:all var(--transition-fast);
            white-space:nowrap;
        }
        .header-nav li a:hover{color:var(--color-primary);background:rgba(13,124,63,0.05);}
        .header-nav li a.active{color:var(--color-primary);background:rgba(13,124,63,0.08);}
        .header-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}
        .header-cta-btn{padding:9px 20px;font-size:0.9rem;font-weight:700;border-radius:var(--radius-sm);white-space:nowrap;}
        .header-search-btn{
            width:38px;height:38px;border-radius:50%;border:none;background:var(--color-bg-alt);
            display:flex;align-items:center;justify-content:center;cursor:pointer;
            transition:all var(--transition-fast);color:var(--color-text-secondary);font-size:0.95rem;
        }
        .header-search-btn:hover{background:var(--color-border);color:var(--color-text);}
        .mobile-toggle{
            display:none;width:38px;height:38px;border-radius:var(--radius-sm);border:none;
            background:var(--color-bg-alt);cursor:pointer;align-items:center;justify-content:center;
            font-size:1.25rem;color:var(--color-text);transition:all var(--transition-fast);
        }
        .mobile-toggle:hover{background:var(--color-border);}

        /* ==================== Hero / 首屏 ==================== */
        .hero-section{
            position:relative;
            background:var(--color-surface);
            overflow:hidden;
            padding:50px 0 60px;
            border-bottom:1px solid var(--color-border-light);
        }
        .hero-section::before{
            content:'';
            position:absolute;
            top:-180px;
            right:-120px;
            width:600px;
            height:600px;
            border-radius:50%;
            background:radial-gradient(circle,rgba(13,124,63,0.06) 0%,transparent 70%);
            pointer-events:none;
            z-index:0;
        }
        .hero-section::after{
            content:'';
            position:absolute;
            bottom:-100px;
            left:-80px;
            width:400px;
            height:400px;
            border-radius:50%;
            background:radial-gradient(circle,rgba(232,168,23,0.05) 0%,transparent 70%);
            pointer-events:none;
            z-index:0;
        }
        .hero-grid{display:flex;align-items:center;gap:40px;position:relative;z-index:1;}
        .hero-content{flex:1;min-width:0;padding-right:10px;}
        .hero-badge{display:inline-block;margin-bottom:14px;}
        .hero-title{font-size:2.9rem;font-weight:800;line-height:1.2;margin-bottom:18px;letter-spacing:-0.02em;}
        .hero-title .highlight{color:var(--color-primary);position:relative;}
        .hero-title .highlight::after{
            content:'';
            position:absolute;
            bottom:3px;
            left:0;
            right:0;
            height:10px;
            background:rgba(232,168,23,0.3);
            border-radius:4px;
            z-index:-1;
        }
        .hero-desc{font-size:1.1rem;color:var(--color-text-secondary);line-height:1.7;margin-bottom:28px;max-width:520px;}
        .hero-buttons{display:flex;gap:14px;flex-wrap:wrap;}
        .hero-visual{
            flex:1;
            min-width:0;
            display:flex;
            align-items:center;
            justify-content:center;
            position:relative;
        }
        .hero-visual-inner{
            width:100%;
            max-width:480px;
            aspect-ratio:16/10;
            background:linear-gradient(145deg,#1a3a2a 0%,#0d2a1a 40%,#0a1f14 100%);
            border-radius:var(--radius-xl);
            display:flex;
            align-items:center;
            justify-content:center;
            position:relative;
            overflow:hidden;
            box-shadow:var(--shadow-xl);
        }
        .hero-visual-inner::before{
            content:'';
            position:absolute;
            inset:0;
            background:radial-gradient(ellipse at 30% 25%,rgba(13,124,63,0.3) 0%,transparent 60%),
                       radial-gradient(ellipse at 70% 60%,rgba(232,168,23,0.15) 0%,transparent 50%);
            z-index:1;
        }
        .hero-visual-play{
            position:relative;
            z-index:2;
            width:80px;
            height:80px;
            border-radius:50%;
            background:rgba(255,255,255,0.95);
            display:flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            transition:all var(--transition-base);
            box-shadow:0 8px 32px rgba(0,0,0,0.3);
            font-size:1.6rem;
            color:var(--color-primary);
        }
        .hero-visual-play:hover{transform:scale(1.08);box-shadow:0 14px 44px rgba(0,0,0,0.4);}
        .hero-visual-label{
            position:absolute;
            bottom:22px;
            left:50%;
            transform:translateX(-50%);
            z-index:2;
            color:rgba(255,255,255,0.85);
            font-size:0.85rem;
            font-weight:600;
            letter-spacing:0.03em;
            white-space:nowrap;
        }
        .hero-stats-row{display:flex;gap:28px;margin-top:30px;flex-wrap:wrap;}
        .hero-stat{text-align:left;}
        .hero-stat-num{font-size:1.8rem;font-weight:800;color:var(--color-text);letter-spacing:-0.01em;}
        .hero-stat-label{font-size:0.85rem;color:var(--color-text-muted);margin-top:2px;}

        /* ==================== 板块通用 ==================== */
        .section{padding:var(--section-gap) 0;}
        .section-header{text-align:center;margin-bottom:48px;}
        .section-header .section-badge{margin-bottom:10px;display:inline-block;}
        .section-title{font-size:2rem;font-weight:800;margin-bottom:10px;letter-spacing:-0.01em;}
        .section-subtitle{font-size:1.05rem;color:var(--color-text-muted);max-width:600px;margin:0 auto;}
        .section-bg-alt{background:var(--color-bg-alt);}
        .section-bg-surface{background:var(--color-surface);}

        /* ==================== 特点卡片 ==================== */
        .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
        .feature-card{
            background:var(--color-surface);
            border-radius:var(--radius-lg);
            padding:30px 26px;
            text-align:center;
            border:1px solid var(--color-border-light);
            transition:all var(--transition-base);
            position:relative;
            overflow:hidden;
        }
        .feature-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-lg);transform:translateY(-4px);}
        .feature-card::before{
            content:'';
            position:absolute;
            top:0;
            left:0;
            right:0;
            height:3px;
            background:linear-gradient(90deg,var(--color-primary),var(--color-accent));
            transform:scaleX(0);
            transform-origin:left;
            transition:transform var(--transition-slow);
        }
        .feature-card:hover::before{transform:scaleX(1);}
        .feature-icon-wrap{
            width:60px;height:60px;border-radius:var(--radius-md);
            margin:0 auto 18px;
            display:flex;align-items:center;justify-content:center;
            font-size:1.5rem;
            background:rgba(13,124,63,0.07);
            color:var(--color-primary);
            transition:all var(--transition-base);
        }
        .feature-card:hover .feature-icon-wrap{background:var(--color-primary);color:#fff;transform:scale(1.05);}
        .feature-card h4{font-size:1.1rem;margin-bottom:8px;font-weight:700;}
        .feature-card p{font-size:0.9rem;color:var(--color-text-muted);margin-bottom:0;line-height:1.6;}

        /* ==================== 直播赛事卡片 ==================== */
        .matches-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
        .match-card{
            background:var(--color-surface);
            border-radius:var(--radius-lg);
            overflow:hidden;
            border:1px solid var(--color-border-light);
            transition:all var(--transition-base);
        }
        .match-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--color-border);}
        .match-card-img{
            height:180px;
            background:linear-gradient(145deg,#1a3a2a,#0d2a1a);
            position:relative;
            display:flex;
            align-items:center;
            justify-content:center;
            overflow:hidden;
        }
        .match-card-img .match-teams{
            display:flex;
            align-items:center;
            gap:20px;
            z-index:1;
            color:#fff;
            font-weight:800;
            font-size:1.1rem;
        }
        .match-card-img .match-vs{font-size:1.5rem;color:var(--color-accent);}
        .match-card-img .live-dot{
            position:absolute;
            top:14px;
            right:16px;
            z-index:2;
        }
        .match-card-body{padding:18px 20px;}
        .match-card-body .match-time{font-size:0.85rem;color:var(--color-text-muted);margin-bottom:6px;}
        .match-card-body .match-title{font-weight:700;font-size:1rem;margin-bottom:10px;color:var(--color-text);}
        .match-card-body .match-info{font-size:0.85rem;color:var(--color-text-secondary);display:flex;gap:16px;flex-wrap:wrap;}

        /* ==================== 数据统计板块 ==================== */
        .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
        .stat-card{
            background:var(--color-surface);
            border-radius:var(--radius-lg);
            padding:28px 22px;
            text-align:center;
            border:1px solid var(--color-border-light);
            transition:all var(--transition-base);
        }
        .stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
        .stat-card .stat-number{font-size:2.5rem;font-weight:800;color:var(--color-primary);letter-spacing:-0.02em;}
        .stat-card .stat-label{font-size:0.9rem;color:var(--color-text-muted);margin-top:6px;}
        .stat-card .stat-icon{font-size:1.3rem;color:var(--color-accent);margin-bottom:8px;}

        /* ==================== 步骤流程 ==================== */
        .steps-list{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
        .step-item{
            flex:1;
            min-width:200px;
            max-width:260px;
            text-align:center;
            position:relative;
        }
        .step-item:not(:last-child)::after{
            content:'';
            position:absolute;
            top:40px;
            right:-30px;
            width:50px;
            height:2px;
            background:var(--color-border);
            z-index:0;
        }
        .step-num{
            width:80px;height:80px;border-radius:50%;
            background:var(--color-surface);
            border:3px solid var(--color-border);
            display:flex;align-items:center;justify-content:center;
            margin:0 auto 16px;
            font-size:1.8rem;
            font-weight:800;
            color:var(--color-primary);
            position:relative;
            z-index:1;
            transition:all var(--transition-base);
        }
        .step-item:hover .step-num{border-color:var(--color-primary);box-shadow:var(--shadow-md);background:rgba(13,124,63,0.03);}
        .step-item h4{font-size:1.05rem;font-weight:700;margin-bottom:6px;}
        .step-item p{font-size:0.88rem;color:var(--color-text-muted);margin-bottom:0;}

        /* ==================== 亮点/评价卡片 ==================== */
        .highlights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
        .highlight-card{
            background:var(--color-surface);
            border-radius:var(--radius-lg);
            padding:26px 24px;
            border-left:4px solid var(--color-primary);
            transition:all var(--transition-base);
            border-top:1px solid var(--color-border-light);
            border-right:1px solid var(--color-border-light);
            border-bottom:1px solid var(--color-border-light);
        }
        .highlight-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
        .highlight-card .highlight-quote{font-size:0.95rem;color:var(--color-text-secondary);line-height:1.7;margin-bottom:14px;font-style:italic;}
        .highlight-card .highlight-author{font-weight:700;color:var(--color-text);font-size:0.9rem;}
        .highlight-card .highlight-role{font-size:0.8rem;color:var(--color-text-muted);}

        /* ==================== CTA 板块 ==================== */
        .cta-section{
            background:linear-gradient(145deg,var(--color-primary-dark),var(--color-primary));
            border-radius:var(--radius-xl);
            padding:50px 40px;
            text-align:center;
            color:#fff;
            position:relative;
            overflow:hidden;
        }
        .cta-section::before{
            content:'';
            position:absolute;
            top:-100px;
            right:-80px;
            width:350px;
            height:350px;
            border-radius:50%;
            background:rgba(255,255,255,0.04);
            pointer-events:none;
        }
        .cta-section::after{
            content:'';
            position:absolute;
            bottom:-120px;
            left:-60px;
            width:300px;
            height:300px;
            border-radius:50%;
            background:rgba(255,255,255,0.03);
            pointer-events:none;
        }
        .cta-section h2{color:#fff;font-size:2rem;margin-bottom:12px;position:relative;z-index:1;}
        .cta-section p{color:rgba(255,255,255,0.8);font-size:1.05rem;margin-bottom:28px;position:relative;z-index:1;max-width:560px;margin-left:auto;margin-right:auto;}
        .cta-section .cta-buttons{position:relative;z-index:1;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

        /* ==================== FAQ ==================== */
        .faq-grid{max-width:800px;margin:0 auto;}

        /* ==================== Footer ==================== */
        .site-footer{
            background:var(--color-text);
            color:rgba(255,255,255,0.7);
            padding:48px 0 28px;
        }
        .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:32px;}
        .footer-brand{font-family:var(--font-heading);font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:10px;}
        .footer-desc{font-size:0.9rem;line-height:1.6;color:rgba(255,255,255,0.55);max-width:280px;}
        .footer-col h5{color:#fff;font-size:0.95rem;margin-bottom:14px;font-weight:700;}
        .footer-col ul{list-style:none;padding:0;margin:0;}
        .footer-col ul li{margin-bottom:8px;}
        .footer-col ul li a{color:rgba(255,255,255,0.6);font-size:0.88rem;transition:color var(--transition-fast);}
        .footer-col ul li a:hover{color:var(--color-accent-light);}
        .footer-bottom{
            border-top:1px solid rgba(255,255,255,0.1);
            padding-top:20px;
            display:flex;
            justify-content:space-between;
            align-items:center;
            flex-wrap:wrap;
            gap:14px;
            font-size:0.85rem;
            color:rgba(255,255,255,0.45);
        }
        .footer-bottom a{color:rgba(255,255,255,0.5);}
        .footer-bottom a:hover{color:var(--color-accent-light);}
        .footer-social{display:flex;gap:12px;}
        .footer-social a{
            width:36px;height:36px;border-radius:50%;
            background:rgba(255,255,255,0.08);
            display:flex;align-items:center;justify-content:center;
            transition:all var(--transition-fast);color:rgba(255,255,255,0.6);font-size:0.95rem;
        }
        .footer-social a:hover{background:var(--color-primary);color:#fff;}

        /* ==================== 响应式 ==================== */
        @media(max-width:1024px){
            .hero-grid{flex-direction:column;gap:30px;}
            .hero-content{text-align:center;padding-right:0;}
            .hero-desc{margin-left:auto;margin-right:auto;}
            .hero-buttons{justify-content:center;}
            .hero-stats-row{justify-content:center;}
            .hero-stat{text-align:center;}
            .hero-visual-inner{max-width:380px;aspect-ratio:16/9;}
            .features-grid{grid-template-columns:repeat(2,1fr);}
            .matches-grid{grid-template-columns:repeat(2,1fr);}
            .stats-row{grid-template-columns:repeat(2,1fr);}
            .highlights-grid{grid-template-columns:repeat(2,1fr);}
            .footer-grid{grid-template-columns:1fr 1fr;}
            .step-item:not(:last-child)::after{display:none;}
            .steps-list{gap:30px;}
        }
        @media(max-width:768px){
            :root{--section-gap:var(--section-gap-mobile);}
            h1{font-size:2rem;}
            h2{font-size:1.6rem;}
            .hero-title{font-size:2rem;}
            .hero-desc{font-size:1rem;}
            .section-title{font-size:1.55rem;}
            .header-nav{display:none;}
            .header-right .header-search-btn{display:none;}
            .mobile-toggle{display:flex;}
            .header-left{gap:16px;}
            .hero-section{padding:32px 0 40px;}
            .hero-visual-inner{max-width:300px;aspect-ratio:4/3;}
            .hero-visual-play{width:60px;height:60px;font-size:1.3rem;}
            .features-grid{grid-template-columns:1fr 1fr;gap:14px;}
            .feature-card{padding:22px 16px;}
            .matches-grid{grid-template-columns:1fr;}
            .stats-row{grid-template-columns:1fr 1fr;gap:14px;}
            .stat-card{padding:20px 14px;}
            .stat-card .stat-number{font-size:1.8rem;}
            .highlights-grid{grid-template-columns:1fr;}
            .steps-list{flex-direction:column;align-items:center;}
            .step-item{max-width:100%;}
            .cta-section{padding:32px 20px;border-radius:var(--radius-lg);}
            .cta-section h2{font-size:1.5rem;}
            .footer-grid{grid-template-columns:1fr;gap:24px;}
            .footer-bottom{flex-direction:column;text-align:center;}
            .hero-stats-row{gap:16px;}
            .hero-stat-num{font-size:1.4rem;}
            .header-logo{font-size:1.05rem;}
            .header-logo .logo-icon{width:32px;height:32px;font-size:1rem;}
        }
        @media(max-width:520px){
            .features-grid{grid-template-columns:1fr;}
            .stats-row{grid-template-columns:1fr;}
            .hero-title{font-size:1.7rem;}
            .hero-buttons{flex-direction:column;align-items:center;}
            .hero-buttons .btn{width:100%;max-width:280px;}
            .hero-visual-inner{max-width:260px;aspect-ratio:4/3;}
            .hero-visual-play{width:50px;height:50px;font-size:1.1rem;}
            .hero-visual-label{font-size:0.75rem;bottom:14px;}
            .match-card-img{height:140px;}
            .cta-buttons{flex-direction:column;align-items:center;}
            .cta-buttons .btn{width:100%;max-width:260px;}
        }

        /* 移动端导航面板 */
        .mobile-nav-panel{
            position:fixed;
            top:var(--header-height);
            left:0;
            right:0;
            bottom:0;
            background:var(--color-surface);
            z-index:1049;
            display:none;
            flex-direction:column;
            padding:20px;
            overflow-y:auto;
            border-top:1px solid var(--color-border-light);
        }
        .mobile-nav-panel.open{display:flex;}
        .mobile-nav-panel a{
            display:block;
            padding:14px 18px;
            border-radius:var(--radius-sm);
            font-weight:600;
            font-size:1rem;
            color:var(--color-text);
            transition:all var(--transition-fast);
        }
        .mobile-nav-panel a:hover{background:rgba(13,124,63,0.05);color:var(--color-primary);}
        .mobile-nav-panel a.active{color:var(--color-primary);background:rgba(13,124,63,0.08);}
        .mobile-nav-panel .mobile-cta{margin-top:16px;}
        .mobile-nav-panel .mobile-cta .btn{width:100%;}