/* roulang page: index */
@layer base {
      :root {
        --primary: #FF5E13;
        --primary-dark: #E54D00;
        --accent: #00C9A7;
        --dark: #1A1D2E;
        --gray-bg: #F7F8FA;
        --text-main: #1f2937;
        --text-soft: #6b7280;
        --border-light: #e5e7eb;
        --shadow-card: 0 4px 20px rgba(0,0,0,0.04);
        --shadow-hover: 0 20px 30px -10px rgba(0,0,0,0.08);
      }
      * {
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif;
        background-color: #ffffff;
        color: #1f2937;
        line-height: 1.6;
        margin: 0;
        -webkit-font-smoothing: antialiased;
      }
      img {
        max-width: 100%;
        height: auto;
        display: block;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button, input, select, textarea {
        font-family: inherit;
      }
      .container-custom {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
      }
      @media (min-width: 768px) {
        .container-custom {
          padding-left: 2rem;
          padding-right: 2rem;
        }
      }
      @media (min-width: 1024px) {
        .container-custom {
          padding-left: 2.5rem;
          padding-right: 2.5rem;
        }
      }
    }

    /* 导航吸顶效果 */
    .navbar-scrolled {
      background-color: rgba(255,255,255,0.95);
      backdrop-filter: blur(12px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.06);
      transition: all 0.3s ease;
    }
    .nav-link {
      position: relative;
      font-weight: 500;
      color: #374151;
      transition: color 0.2s;
    }
    .nav-link:hover {
      color: #FF5E13;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0%;
      height: 2px;
      background-color: #FF5E13;
      transition: width 0.25s ease;
    }
    .nav-link:hover::after {
      width: 100%;
    }

    /* 卡片浮动效果 */
    .card-hover {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 14px rgba(0,0,0,0.02);
    }
    .card-hover:hover {
      transform: translateY(-6px);
      box-shadow: 0 24px 32px -10px rgba(0,0,0,0.1);
    }

    /* FAQ动画 */
    .faq-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.3s;
      background-color: #ffffff;
    }
    .faq-item.active .faq-content {
      max-height: 300px;
      padding: 1rem 0 1rem 0;
    }
    .faq-item.active .faq-icon {
      transform: rotate(45deg);
      color: #FF5E13;
    }
    .faq-icon {
      transition: transform 0.3s ease, color 0.2s;
      font-size: 1.5rem;
      line-height: 1;
    }

    /* 进度条 */
    .progress-bar {
      height: 8px;
      background: linear-gradient(90deg, #FF5E13, #00C9A7);
      border-radius: 10px;
      width: 0%;
      transition: width 1.2s ease;
    }

    /* 搜索栏 */
    .search-bar {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.2s;
    }
    .search-bar.open {
      max-height: 80px;
      padding: 0.75rem 0;
    }

    @media (max-width: 767px) {
      .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
      }
      .mobile-menu {
        display: none;
        flex-direction: column;
        background: white;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
      }
      .mobile-menu.open {
        display: flex;
      }
    }