/* roulang page: index */
:root {
      --primary: #c5e31a;
      --primary-glow: #d4f02e;
      --secondary: #1a3c2a;
      --accent: #00c2ba;
      --bg: #f9f9f5;
      --text: #333333;
      --text-light: #5f6b5a;
      --white: #ffffff;
      --border: #e0e4d8;
      --shadow-sm: 0 4px 12px rgba(0,0,0,0.06);
      --shadow-hover: 0 12px 24px rgba(0,0,0,0.12);
      --radius-card: 16px;
      --radius-btn: 8px;
      --radius-badge: 20px;
      --radius-input: 6px;
      --transition: 0.25s ease;
      --font-sans: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
      --font-number: "DIN Alternate", "Roboto", "PingFang SC", sans-serif;
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      font-family: var(--font-sans);
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
    }
    img { max-width:100%; height:auto; display:block; }
    a { text-decoration:none; color:inherit; }
    .container { max-width:1200px; margin:0 auto; padding:0 24px; }

    /* 导航 */
    .navbar {
      position:fixed; top:0; left:0; width:100%; z-index:1000;
      background:transparent; transition: background 0.3s, backdrop-filter 0.3s;
      padding:16px 0;
    }
    .navbar.scrolled {
      background:rgba(26,60,42,0.88); backdrop-filter:blur(12px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    }
    .navbar .container {
      display:flex; align-items:center; justify-content:space-between;
    }
    .logo {
      font-size:1.7rem; font-weight:700; letter-spacing:1px;
      display:flex; align-items:center; gap:8px;
    }
    .logo .lemon-icon {
      width:32px; height:32px; background:var(--primary);
      border-radius:50% 50% 50% 0; transform:rotate(-20deg);
    }
    .logo-text {
      background:linear-gradient(135deg, var(--primary-glow), var(--accent));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .nav-links { display:flex; gap:28px; align-items:center; }
    .nav-links a {
      font-weight:500; font-size:0.95rem; color:var(--white);
      opacity:0.9; transition:opacity 0.2s, border-bottom 0.2s;
      border-bottom:2px solid transparent; padding-bottom:4px;
    }
    .nav-links a:hover,
    .nav-links a.active { opacity:1; border-bottom-color:var(--primary); }
    .desktop-nav { display:flex; }
    .mobile-tab { display:none; }

    /* Hero */
    .hero {
      min-height:100vh; background:url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
      position:relative; display:flex; align-items:center;
    }
    .hero::before {
      content:''; position:absolute; inset:0;
      background:linear-gradient(135deg, rgba(197,227,26,0.75) 0%, rgba(26,60,42,0.8) 100%);
    }
    .hero-content {
      position:relative; z-index:2; max-width:680px;
      color:var(--white); padding:120px 0 80px;
    }
    .hero h1 {
      font-size:clamp(2.4rem, 6vw, 3.5rem); font-weight:700;
      line-height:1.2; margin-bottom:20px; color:var(--white);
      text-shadow:0 4px 12px rgba(0,0,0,0.25);
    }
    .hero .subtitle {
      font-size:1.25rem; opacity:0.9; margin-bottom:32px;
    }
    .hero-badges {
      display:flex; flex-wrap:wrap; gap:16px; margin-bottom:36px;
    }
    .badge {
      background:rgba(26,60,42,0.7); backdrop-filter:blur(8px);
      border-radius:var(--radius-badge); padding:12px 22px;
      display:flex; align-items:center; gap:10px;
      font-weight:600; color:var(--white);
    }
    .badge .number {
      font-family:var(--font-number); font-size:1.5rem;
      color:var(--primary); font-weight:800;
    }
    .btn-primary {
      display:inline-block; background:var(--primary);
      color:var(--secondary); font-weight:700; padding:14px 36px;
      border-radius:var(--radius-btn); font-size:1.1rem;
      transition: background 0.2s, transform 0.15s;
      border:none; cursor:pointer; letter-spacing:0.5px;
    }
    .btn-primary:hover { background:var(--secondary); color:var(--white); transform:translateY(-2px); }

    /* 数据看板 */
    .dashboard {
      padding:80px 0; background:var(--white);
    }
    .section-title {
      font-size:2rem; font-weight:600; color:var(--secondary);
      margin-bottom:16px; text-align:center;
    }
    .section-sub {
      text-align:center; color:var(--text-light); max-width:640px;
      margin:0 auto 48px;
    }
    .stats-grid {
      display:flex; flex-wrap:wrap; gap:24px; justify-content:center;
    }
    .stat-card {
      background:var(--bg); border-radius:var(--radius-card);
      padding:28px 32px; flex:1 1 220px; max-width:260px;
      box-shadow:var(--shadow-sm); transition: all 0.3s;
    }
    .stat-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
    .stat-number {
      font-family:var(--font-number); font-size:3rem; font-weight:800;
      color:var(--accent); line-height:1.1;
    }
    .stat-label { color:var(--secondary); font-weight:500; margin-top:8px; }
    .trend-icon { font-size:1.2rem; color:var(--primary); margin-left:4px; }

    /* 服务矩阵 */
    .services {
      padding:80px 0; background:var(--bg);
    }
    .services-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
    }
    .service-card {
      background:var(--white); border-radius:var(--radius-card);
      overflow:hidden; box-shadow:var(--shadow-sm);
      transition: transform 0.25s, box-shadow 0.25s;
      display:flex; flex-direction:column;
    }
    .service-card.featured { grid-column:span 2; }
    .service-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-hover); }
    .service-img {
      height:200px; background-size:cover; background-position:center;
    }
    .service-body { padding:24px; }
    .service-body h3 { font-size:1.4rem; color:var(--secondary); margin-bottom:8px; }
    .service-body p { color:var(--text-light); margin-bottom:16px; font-size:0.95rem; }
    .text-link {
      color:var(--accent); font-weight:600; display:inline-flex;
      align-items:center; gap:6px; transition:color 0.2s;
    }
    .text-link:hover { color:var(--secondary); }

    /* 案例对比 */
    .cases {
      padding:80px 0; background:var(--white);
    }
    .compare-grid {
      display:grid; grid-template-columns:1fr 1fr; gap:32px;
    }
    .compare-col {
      background:var(--bg); border-radius:var(--radius-card);
      padding:32px; transition:0.2s;
    }
    .compare-col.highlight {
      background:linear-gradient(135deg, rgba(197,227,26,0.12), rgba(212,240,46,0.25));
      border:1px solid var(--primary);
    }
    .compare-col h4 { color:var(--secondary); margin-bottom:20px; font-size:1.3rem; }
    .metric { display:flex; justify-content:space-between; margin-bottom:18px; }
    .metric .label { color:var(--text-light); }
    .metric .value { font-weight:700; color:var(--secondary); }
    .progress-bar {
      height:8px; background:var(--border); border-radius:10px;
      margin-top:4px; overflow:hidden;
    }
    .progress-fill {
      height:100%; background:var(--accent); border-radius:10px;
      transition: width 0.4s;
    }
    .client-logos {
      display:flex; flex-wrap:wrap; gap:24px; justify-content:center;
      margin-top:40px; filter:grayscale(1); opacity:0.7;
    }
    .client-logos img { height:40px; object-fit:contain; }

    /* FAQ */
    .faq { padding:80px 0; background:var(--bg); }
    .accordion { max-width:800px; margin:0 auto; }
    .accordion-item {
      background:var(--white); border-radius:12px;
      margin-bottom:12px; box-shadow:var(--shadow-sm);
    }
    .accordion-header {
      padding:20px 24px; font-weight:600; color:var(--secondary);
      display:flex; justify-content:space-between; align-items:center;
      cursor:pointer; background:transparent; border:none; width:100%;
      font-size:1.05rem; transition:0.2s;
    }
    .accordion-header:hover { background:#f0f3e8; }
    .accordion-icon { font-size:1.5rem; transition:transform 0.3s; }
    .accordion-body {
      max-height:0; overflow:hidden; transition:max-height 0.3s ease;
      background:#fafaf7; border-radius:0 0 12px 12px;
    }
    .accordion-body p { padding:0 24px 20px; color:var(--text-light); }
    .accordion-item.active .accordion-icon { transform:rotate(45deg); }
    .accordion-item.active .accordion-body { max-height:200px; }

    /* 联系表单 */
    .contact {
      padding:80px 0; background:var(--secondary);
      color:var(--white);
    }
    .contact-grid {
      display:grid; grid-template-columns:1fr 1.5fr; gap:48px;
      align-items:center;
    }
    .contact-text h2 { font-size:2rem; margin-bottom:16px; color:var(--primary); }
    .contact-form input, .contact-form textarea {
      width:100%; padding:14px; margin-bottom:16px;
      border-radius:var(--radius-input); border:1px solid var(--border);
      background:var(--white); font-family:var(--font-sans);
    }
    .contact-form input:focus, .contact-form textarea:focus {
      outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(197,227,26,0.3);
    }
    .btn-submit {
      background:var(--primary); color:var(--secondary);
      font-weight:700; padding:14px 32px; border:none;
      border-radius:var(--radius-btn); cursor:pointer;
      transition:0.2s; width:100%;
    }
    .btn-submit:hover { background:var(--secondary); color:var(--white); }

    /* 页脚 */
    .footer {
      background:#0e2418; color:rgba(255,255,255,0.7);
      padding:48px 0 32px;
    }
    .footer-grid {
      display:flex; flex-wrap:wrap; justify-content:space-between;
      gap:24px; margin-bottom:32px;
    }
    .footer-links a { color:var(--primary); margin-right:20px; font-weight:500; }
    .copyright { border-top:1px solid rgba(255,255,255,0.15); padding-top:24px; text-align:center; font-size:0.9rem; }

    /* 响应式 */
    @media (max-width:1024px) {
      .services-grid { grid-template-columns:repeat(2,1fr); }
      .service-card.featured { grid-column:span 2; }
    }
    @media (max-width:768px) {
      .desktop-nav { display:none; }
      .mobile-tab {
        display:flex; position:fixed; bottom:0; left:0; width:100%;
        background:var(--white); border-top:1px solid var(--border);
        justify-content:space-around; padding:8px 0; z-index:1000;
      }
      .mobile-tab a {
        display:flex; flex-direction:column; align-items:center;
        font-size:0.7rem; color:var(--text-light); gap:4px;
      }
      .mobile-tab a.active, .mobile-tab a:hover { color:var(--primary); }
      .tab-icon {
        width:22px; height:22px; background:currentColor;
        border-radius:4px;
      }
      .hero { text-align:center; }
      .hero-content { margin:0 auto; }
      .hero-badges { justify-content:center; }
      .compare-grid { grid-template-columns:1fr; }
      .services-grid { grid-template-columns:1fr; }
      .service-card.featured { grid-column:span 1; }
      .contact-grid { grid-template-columns:1fr; }
    }
    @media (max-width:520px) {
      .stats-grid { flex-direction:column; align-items:center; }
      .stat-card { max-width:100%; width:100%; }
    }