/* roulang page: index */
:root {
      --primary: #0F4C5C;
      --primary-teal: #00A896;
      --accent: #F4A261;
      --dark-surface: #0A252C;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
      color: #0F172A;
      background-color: #FFFFFF;
    }
    .custom-gradient {
      background: linear-gradient(135deg, #0F4C5C 0%, #00A896 100%);
    }
    .badge-pill {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.85rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.025em;
    }
    .hero-skew-mask {
      clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    }
    @media (max-width: 1024px) {
      .hero-skew-mask {
        clip-path: none;
      }
    }