/* roulang page: index */
/* 设计变量与全局微调 */
    :root {
      --primary: #0F4C5C;
      --primary-light: #1a6b7a;
      --accent: #F28C28;
      --accent-light: #f5a64a;
      --soft-bg: #E5EDEA;
      --dark-text: #1E293B;
      --mid-text: #64748B;
      --white: #FFFFFF;
      --border-light: #e2e8f0;
      --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05);
      --shadow-md: 0 10px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
      --radius-card: 16px;
      --radius-btn: 8px;
      --radius-pill: 24px;
    }
    
    body {
      font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
      color: var(--dark-text);
      background-color: #fbfdfc;
      line-height: 1.7;
      margin: 0;
      -webkit-font-smoothing: antialiased;
    }
    
    /* 容器最大宽度 */
    .container-custom {
      max-width: 1280px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    
    /* 导航栏滚动阴影 */
    .navbar-scrolled {
      box-shadow: 0 1px 8px rgba(0,0,0,0.06);
    }
    
    /* 按钮与交互 */
    .btn-primary {
      background-color: var(--primary);
      color: white;
      border-radius: var(--radius-btn);
      padding: 0.7rem 1.8rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      cursor: pointer;
    }
    .btn-primary:hover {
      background-color: #0d404d;
      transform: translateY(-1px);
      box-shadow: 0 8px 16px -6px rgba(15,76,92,0.3);
    }
    
    .btn-outline {
      background: transparent;
      border: 1.5px solid var(--primary);
      color: var(--primary);
      border-radius: var(--radius-btn);
      padding: 0.7rem 1.8rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .btn-outline:hover {
      background-color: rgba(15,76,92,0.08);
      border-color: var(--primary-light);
      color: var(--primary-light);
    }
    
    .btn-accent {
      background-color: var(--accent);
      color: white;
      border-radius: var(--radius-pill);
      padding: 0.7rem 2rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      transition: all 0.25s ease;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(242,140,40,0.3);
    }
    .btn-accent:hover {
      background-color: #e07b1a;
      transform: scale(1.02);
      box-shadow: 0 8px 18px rgba(242,140,40,0.4);
    }
    
    /* 卡片悬停效果 */
    .card-hover {
      transition: all 0.25s ease;
      background: white;
      border-radius: var(--radius-card);
      box-shadow: var(--shadow-sm);
    }
    .card-hover:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-md);
    }
    
    /* 手风琴动画 */
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, padding 0.35s ease;
      background-color: #f7faf9;
      border-radius: 0 0 12px 12px;
    }
    .faq-item.active .faq-answer {
      max-height: 300px;
      padding: 1rem 1.5rem;
    }
    
    /* 装饰性背景线条 */
    .hero-bg-pattern {
      background-image: radial-gradient(#0F4C5C 0.5px, transparent 0.5px);
      background-size: 30px 30px;
      opacity: 0.03;
    }
    
    /* 移动端导航菜单 */
    .mobile-menu {
      transition: transform 0.3s ease;
    }
    
    @media (max-width: 768px) {
      .grid-masonry {
        column-count: 1;
      }
    }
    
    /* 输入框样式 */
    .input-field {
      background-color: #f0f5f3;
      border: 1px solid transparent;
      border-radius: 6px;
      padding: 0.8rem 1rem;
      width: 100%;
      transition: 0.2s;
    }
    .input-field:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(15,76,92,0.2);
      background-color: white;
    }