/* roulang page: index */
@import url('/assets/css/vendor/1ecd1de215-css2.css');
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: 'PingFang SC', 'Microsoft YaHei', 'Inter', system-ui, sans-serif; color: #1E1E1E; background: #F5F3F0; line-height: 1.6; -webkit-font-smoothing: antialiased; }
    a, button, input { outline: none; transition: all 0.25s ease; }
    a:focus-visible, button:focus-visible { outline: 2px solid #C8A45C; outline-offset: 2px; border-radius: 2px; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
    @media (min-width: 1280px) { .container { max-width: 1280px; } }
    .top-bar { background: #2D1B3E; color: #F5F3F0; font-size: 14px; height: 36px; display: flex; align-items: center; }
    .top-bar a { color: #F5F3F0; text-decoration: none; font-weight: 500; }
    .top-bar a:hover { color: #C8A45C; }
    .nav-link { position: relative; font-weight: 500; color: #1E1E1E; text-decoration: none; padding: 8px 0; }
    .nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #C8A45C; transition: width 0.25s ease; }
    .nav-link:hover, .nav-link.active { color: #C8A45C; }
    .nav-link.active::after, .nav-link:hover::after { width: 100%; }
    .hero-section { background: linear-gradient(135deg, #2D1B3E 0%, #3D2B4E 100%); }
    .btn-primary { background: #C8A45C; color: white; font-weight: 600; padding: 14px 32px; border-radius: 4px; display: inline-block; text-decoration: none; border: 2px solid #C8A45C; letter-spacing: 0.5px; }
    .btn-primary:hover { background: #D4B87A; border-color: #D4B87A; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(200,164,92,0.3); }
    .btn-outline { background: transparent; color: #C8A45C; border: 2px solid #C8A45C; font-weight: 600; padding: 14px 32px; border-radius: 4px; display: inline-block; text-decoration: none; }
    .btn-outline:hover { background: rgba(200,164,92,0.1); transform: translateY(-1px); }
    .section-title { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 1.5rem; color: #1E1E1E; }
    @media (max-width: 768px) { .section-title { font-size: 2rem; } }
    .grid-highlight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; }
    .grid-highlight > div:nth-child(4), .grid-highlight > div:nth-child(5) { grid-column: span 1; }
    @media (min-width: 769px) and (max-width: 1024px) { .grid-highlight { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 768px) { .grid-highlight { grid-template-columns: 1fr; gap: 36px; } }
    .case-grid { column-count: 3; column-gap: 24px; }
    @media (max-width: 1024px) { .case-grid { column-count: 2; } }
    @media (max-width: 640px) { .case-grid { column-count: 1; } }
    .case-card { break-inside: avoid; margin-bottom: 24px; background: white; border-radius: 4px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); transition: all 0.25s ease; }
    .case-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
    .case-card img { transition: transform 0.3s ease; width: 100%; display: block; border-radius: 4px 4px 0 0; }
    .case-card:hover img { transform: scale(1.02); }
    .faq-item { border-bottom: 1px solid #E2DED8; }
    .faq-question { cursor: pointer; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 1.125rem; transition: color 0.2s; }
    .faq-question:hover { color: #C8A45C; }
    .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; background: #F5F3F0; border-radius: 0 0 4px 4px; }
    .faq-item.active .faq-answer { max-height: 200px; padding: 16px 24px; }
    .faq-item.active .faq-icon { transform: rotate(45deg); }
    .faq-icon { font-size: 1.5rem; transition: transform 0.3s ease; color: #C8A45C; }
    footer a { color: #F5F3F0; text-decoration: none; }
    footer a:hover { color: #C8A45C; }
    .hamburger { display: none; }
    @media (max-width: 768px) {
      .hamburger { display: block; cursor: pointer; }
      .nav-menu { display: none; position: absolute; top: 72px; left: 0; width: 100%; background: white; flex-direction: column; padding: 20px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); z-index: 50; }
      .nav-menu.open { display: flex; }
    }