/* roulang page: index */
:root {
      --color-primary: #0F4C5C;
      --color-primary-dark: #0B252C;
      --color-secondary: #2EC4B6;
      --color-accent: #E36414;
      --color-bg: #F8FAFC;
      --color-text-main: #0F172A;
      --color-text-body: #334155;
      --color-text-muted: #64748B;
      --shadow-card: 0 4px 20px -4px rgba(15, 76, 92, 0.08);
      --shadow-hover: 0 16px 32px -6px rgba(15, 76, 92, 0.14);
      --transition-smooth: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    }
    body {
      background-color: #FFFFFF;
      color: var(--color-text-body);
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
      -webkit-font-smoothing: antialiased;
    }
    .custom-card {
      background: #FFFFFF;
      border: 1px solid rgba(226, 232, 240, 0.9);
      border-radius: 14px;
      box-shadow: var(--shadow-card);
      transition: var(--transition-smooth);
    }
    .custom-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(46, 196, 182, 0.35);
    }
    .badge-teal {
      background-color: #E8FBF8;
      color: #0F4C5C;
      border: 1px solid rgba(46, 196, 182, 0.3);
    }
    .btn-primary {
      background: linear-gradient(135deg, #0F4C5C 0%, #155e71 100%);
      color: #FFFFFF;
      transition: var(--transition-smooth);
    }
    .btn-primary:hover {
      background: linear-gradient(135deg, #0B3A46 0%, #0F4C5C 100%);
      box-shadow: 0 8px 18px -4px rgba(15, 76, 92, 0.35);
      transform: translateY(-1px);
    }
    .btn-amber {
      background: linear-gradient(135deg, #E36414 0%, #F57C00 100%);
      color: #FFFFFF;
      transition: var(--transition-smooth);
    }
    .btn-amber:hover {
      filter: brightness(1.06);
      box-shadow: 0 8px 18px -4px rgba(227, 100, 20, 0.35);
    }
    .faq-panel {
      transition: max-height 0.35s ease, opacity 0.25s ease;
    }