/* roulang page: index */
:root {
      --color-slate: #2F3A3B;
      --color-ink: #1C2526;
      --color-pewter: #5A6B6F;
      --color-gold: #C4A46C;
      --color-cream: #F7F5F0;
      --color-mist: #E8ECEB;
      --color-white: #FFFFFF;
      --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.03), 0 2px 4px -1px rgba(0,0,0,0.02);
      --shadow-md: 0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.02);
      --shadow-lg: 0 20px 40px -10px rgba(0,0,0,0.08);
      --border-light: 1px solid rgba(47,58,59,0.08);
      --transition-base: all 0.25s ease;
    }
    * {
      box-sizing: border-box;
    }
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background-color: var(--color-cream);
      color: var(--color-slate);
      line-height: 1.6;
      margin: 0;
      -webkit-font-smoothing: antialiased;
    }
    .font-display {
      font-family: 'Playfair Display', Georgia, serif;
    }
    .text-balance {
      text-wrap: balance;
    }
    .hero-gradient {
      background: linear-gradient(120deg, rgba(28,37,38,0.75) 0%, rgba(47,58,59,0.45) 70%);
    }
    .card-hover {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
    }
    .img-zoom-container {
      overflow: hidden;
      border-radius: 0.75rem;
    }
    .img-zoom-container img {
      transition: transform 0.45s ease;
    }
    .img-zoom-container:hover img {
      transform: scale(1.05);
    }
    .decor-line {
      height: 2px;
      width: 48px;
      background-color: var(--color-gold);
      margin: 1rem 0 1.5rem;
    }
    .accordion-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .accordion-open .accordion-content {
      max-height: 20rem;
    }
    .faq-icon {
      transition: transform 0.3s ease;
    }
    .accordion-open .faq-icon {
      transform: rotate(45deg);
    }
    @media (max-width: 768px) {
      .hero-left {
        padding: 2.5rem 1.5rem;
      }
      .nav-mobile {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        background: var(--color-white);
        box-shadow: var(--shadow-md);
        flex-direction: column;
        padding: 1.5rem;
        border-radius: 0 0 1.5rem 1.5rem;
      }
      .nav-mobile.open {
        display: flex;
      }
      .mobile-menu-btn {
        display: block;
      }
    }
    @media (min-width: 769px) {
      .mobile-menu-btn {
        display: none;
      }
      .nav-mobile {
        display: flex;
        position: static;
        background: transparent;
        box-shadow: none;
        padding: 0;
      }
    }
    .chip-nav a {
      background: rgba(255,255,255,0.6);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(47,58,59,0.1);
      color: var(--color-slate);
      padding: 0.5rem 1.25rem;
      border-radius: 2.5rem;
      font-weight: 500;
      font-size: 0.95rem;
      transition: var(--transition-base);
    }
    .chip-nav a:hover {
      background: rgba(255,255,255,0.9);
      border-color: var(--color-gold);
      color: var(--color-ink);
    }
    .chip-nav a.active-anchor {
      background: var(--color-slate);
      color: white;
      border-color: var(--color-slate);
    }
    .btn-primary {
      background: var(--color-slate);
      color: white;
      border: 2px solid var(--color-slate);
      padding: 0.85rem 2rem;
      border-radius: 2.5rem;
      font-weight: 600;
      letter-spacing: 0.3px;
      transition: var(--transition-base);
    }
    .btn-primary:hover {
      background: var(--color-ink);
      border-color: var(--color-ink);
      box-shadow: var(--shadow-md);
    }
    .btn-outline {
      background: transparent;
      color: var(--color-slate);
      border: 2px solid var(--color-slate);
      padding: 0.85rem 2rem;
      border-radius: 2.5rem;
      font-weight: 600;
      transition: var(--transition-base);
    }
    .btn-outline:hover {
      background: var(--color-slate);
      color: white;
    }
    input:focus-visible, button:focus-visible, a:focus-visible {
      outline: 2px solid var(--color-gold);
      outline-offset: 2px;
    }