/* roulang page: index */
/* :root 设计变量 */
    :root {
      --primary: #0F4C81;
      --primary-dark: #0A3A62;
      --accent: #F39C12;
      --accent-hover: #E08A0B;
      --bg-light: #F8F9FA;
      --white: #FFFFFF;
      --text-main: #212529;
      --text-muted: #6C757D;
      --border-light: #E5E7EB;
      --shadow-card: 0 10px 30px -10px rgba(0,0,0,0.05);
      --shadow-hover: 0 20px 40px -10px rgba(0,0,0,0.1);
      --radius-card: 12px;
      --radius-btn: 8px;
      --radius-img: 16px;
      --font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
      --transition-base: all 0.25s ease;
    }

    * {
      box-sizing: border-box;
    }

    body {
      font-family: var(--font-family);
      background-color: var(--bg-light);
      color: var(--text-main);
      line-height: 1.7;
      margin: 0;
      padding-top: 76px; /* 补偿固定导航高度 */
    }

    a {
      text-decoration: none;
      transition: var(--transition-base);
    }

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

    /* 容器自定义微调 */
    .container-custom {
      max-width: 1280px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

    /* 导航栏：固定顶部，毛玻璃效果 */
    .navbar {
      background-color: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 2px 15px rgba(0,0,0,0.03);
      padding-top: 0.9rem;
      padding-bottom: 0.9rem;
      transition: background-color 0.3s ease;
    }

    .navbar .navbar-brand {
      font-weight: 700;
      font-size: 1.8rem;
      color: var(--primary);
      letter-spacing: -0.5px;
    }
    .navbar .navbar-brand i {
      color: var(--accent);
      margin-right: 6px;
      font-size: 1.7rem;
    }
    .navbar-nav .nav-link {
      color: var(--text-main) !important;
      font-weight: 500;
      margin: 0 0.5rem;
      padding: 0.5rem 0.8rem !important;
      border-radius: 6px;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
      color: var(--primary) !important;
      background-color: rgba(15, 76, 129, 0.05);
    }

    /* 区块通用间距 */
    .section-padding {
      padding-top: 5rem;
      padding-bottom: 5rem;
    }

    /* 标题装饰短横线 */
    .section-title {
      font-size: 2.25rem;
      font-weight: 600;
      color: var(--text-main);
      margin-bottom: 1rem;
      position: relative;
      display: inline-block;
    }
    .section-title::after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background-color: var(--accent);
      margin-top: 0.5rem;
      border-radius: 2px;
    }

    /* 按钮风格 */
    .btn-primary-custom {
      background-color: var(--primary);
      border: none;
      color: white;
      font-weight: 600;
      border-radius: var(--radius-btn);
      padding: 0.7rem 2rem;
      transition: var(--transition-base);
      box-shadow: 0 4px 10px rgba(15,76,129,0.2);
    }
    .btn-primary-custom:hover {
      background-color: var(--primary-dark);
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(15,76,129,0.3);
    }
    .btn-accent {
      background-color: var(--accent);
      border: none;
      color: white;
      font-weight: 600;
      border-radius: var(--radius-btn);
      padding: 0.7rem 2rem;
      transition: var(--transition-base);
      box-shadow: 0 4px 10px rgba(243,156,18,0.25);
    }
    .btn-accent:hover {
      background-color: var(--accent-hover);
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(243,156,18,0.35);
    }
    .btn-outline-light-custom {
      border: 2px solid white;
      color: white;
      background: transparent;
      font-weight: 600;
      border-radius: var(--radius-btn);
      padding: 0.6rem 2rem;
    }
    .btn-outline-light-custom:hover {
      background-color: white;
      color: var(--primary);
    }

    /* 卡片基础样式 */
    .card-custom {
      background: var(--white);
      border: none;
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-card);
      transition: var(--transition-base);
      padding: 2rem;
      height: 100%;
    }
    .card-custom:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-5px);
    }

    /* 功能卡片差异化：水平布局 */
    .feature-horizontal {
      display: flex;
      align-items: flex-start;
      gap: 1.5rem;
    }
    .feature-icon {
      width: 55px;
      height: 55px;
      background-color: rgba(15, 76, 129, 0.08);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      font-size: 1.8rem;
      flex-shrink: 0;
    }
    .feature-horizontal h3 {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
    .text-link {
      color: var(--primary);
      font-weight: 600;
      font-size: 0.95rem;
    }
    .text-link:hover {
      color: var(--accent);
    }

    /* 使用场景图文交替 */
    .scene-img {
      border-radius: var(--radius-img);
      box-shadow: 0 15px 30px rgba(0,0,0,0.08);
      width: 100%;
      height: auto;
    }

    /* 客户案例卡片 */
    .case-stat {
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--primary);
      line-height: 1.2;
    }

    /* FAQ 手风琴自定义 */
    .accordion-button:not(.collapsed) {
      background-color: rgba(15, 76, 129, 0.03);
      color: var(--primary);
      font-weight: 600;
      box-shadow: none;
    }
    .accordion-button:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 0.2rem rgba(15,76,129,0.15);
    }
    .accordion-item {
      border: none;
      border-bottom: 1px solid var(--border-light);
      background: transparent;
    }

    /* 底部CTA深色区块 */
    .cta-dark {
      background-color: var(--primary);
      border-radius: 24px;
      padding: 3.5rem 2rem;
      color: white;
    }
    .cta-dark input {
      border-radius: var(--radius-btn);
      padding: 0.7rem 1.2rem;
      border: none;
    }

    /* 页脚 */
    .footer {
      background-color: #212529;
      color: #ADB5BD;
    }
    .footer a {
      color: #ADB5BD;
    }
    .footer a:hover {
      color: white;
    }
    .social-icon {
      font-size: 1.3rem;
      margin-right: 1rem;
      color: #ADB5BD;
    }
    .social-icon:hover {
      color: var(--accent);
    }

    /* 背景网格线条（Hero区域） */
    .hero-grid-bg {
      background-image: linear-gradient(rgba(15,76,129,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(15,76,129,0.03) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    @media (max-width: 768px) {
      .section-padding {
        padding-top: 3rem;
        padding-bottom: 3rem;
      }
      .section-title {
        font-size: 1.75rem;
      }
      h1 {
        font-size: 2.5rem !important;
      }
      .feature-horizontal {
        flex-direction: column;
        align-items: flex-start;
      }
    }