/* roulang page: index */
@import url('/assets/css/vendor/1ecd1de215-css2.css');

    :root {
      --primary: #4A3B32;
      --primary-hover: #3A2E26;
      --accent: #8B2E3E;
      --accent-hover: #6F1E2D;
      --ivory: #F7F4EF;
      --charcoal: #2C2C2C;
      --mid-gray: #6B6B6B;
      --border-light: #E8E4DD;
      --serif: 'Noto Serif SC', 'Georgia', 'Times New Roman', serif;
      --sans: 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
      --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
      --transition-base: all 0.3s ease;
      --content-offset: 6rem;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: var(--sans);
      background-color: var(--ivory);
      color: var(--charcoal);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, .serif {
      font-family: var(--serif);
    }

    .text-balance {
      text-wrap: balance;
    }

    /* 自定义焦点样式 */
    a:focus-visible, button:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }

    /* 左侧竖向导航桌面样式 */
    .vertical-nav {
      background-color: var(--ivory);
      border-right: 1px solid var(--border-light);
      transition: var(--transition-base);
      width: 5rem;
    }
    @media (min-width: 1024px) {
      .vertical-nav {
        width: 6rem;
      }
    }

    .nav-link {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      color: var(--charcoal);
      font-weight: 500;
      letter-spacing: 0.05em;
      transition: color 0.2s, transform 0.2s;
      position: relative;
      padding: 0.75rem 0;
    }
    .nav-link:hover {
      color: var(--accent);
      transform: translateX(2px);
    }
    .nav-link.active {
      color: var(--accent);
      font-weight: 600;
    }
    .nav-link.active::before {
      content: '';
      position: absolute;
      left: -0.5rem;
      top: 10%;
      height: 60%;
      width: 3px;
      background-color: var(--accent);
      border-radius: 4px;
      transition: height 0.2s;
    }

    /* 移动端导航 */
    .mobile-nav {
      background-color: rgba(247, 244, 239, 0.96);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-light);
    }

    /* 卡片悬停效果 */
    .card-hover {
      transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
      border: 1px solid var(--border-light);
      background: #FFFFFF;
      border-radius: 8px;
    }
    .card-hover:hover {
      transform: translateY(-4px);
      border-color: var(--accent);
      box-shadow: var(--shadow-sm);
    }

    .img-hover-scale {
      transition: transform 0.4s ease;
    }
    .card-hover:hover .img-hover-scale {
      transform: scale(1.03);
    }

    /* 按钮样式 */
    .btn-primary {
      background-color: var(--accent);
      color: #FFFFFF;
      font-weight: 600;
      border-radius: 4px;
      padding: 0.75rem 2rem;
      transition: background-color 0.3s, transform 0.2s;
      display: inline-block;
      text-align: center;
      border: none;
      cursor: pointer;
    }
    .btn-primary:hover {
      background-color: var(--accent-hover);
      transform: translateY(-1px);
    }
    .btn-outline {
      border: 1.5px solid var(--accent);
      color: var(--accent);
      font-weight: 600;
      border-radius: 4px;
      padding: 0.75rem 2rem;
      transition: background-color 0.3s, color 0.3s, transform 0.2s;
      display: inline-block;
      text-align: center;
      background: transparent;
      cursor: pointer;
    }
    .btn-outline:hover {
      background-color: var(--accent);
      color: #FFFFFF;
      transform: translateY(-1px);
    }

    /* FAQ 动画 */
    .faq-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
    }
    .faq-item.open .faq-content {
      max-height: 200px;
    }
    .faq-icon {
      transition: transform 0.3s;
    }
    .faq-item.open .faq-icon {
      transform: rotate(45deg);
    }

    /* 淡入动画 */
    .fade-up {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* 横向滚动案例 */
    .case-scroll {
      scrollbar-width: thin;
      scrollbar-color: var(--border-light) transparent;
    }
    .case-scroll::-webkit-scrollbar {
      height: 6px;
    }
    .case-scroll::-webkit-scrollbar-track {
      background: transparent;
    }
    .case-scroll::-webkit-scrollbar-thumb {
      background: var(--border-light);
      border-radius: 8px;
    }