/* roulang page: index */
:root {
      --brand-dark: #0F2537;
      --brand-navy: #0B1724;
      --brand-orange: #FF5E1E;
      --brand-cyan: #00D2A0;
      --brand-bg: #F6F8FA;
    }
    html {
      scroll-behavior: smooth;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    }
    body {
      background-color: var(--brand-bg);
      color: #334155;
      overflow-x: hidden;
    }
    .hero-gradient {
      background: linear-gradient(135deg, rgba(15,37,55,0.95) 0%, rgba(11,23,36,0.92) 100%), url('/assets/images/4b524997b6154eef.jpg') center/cover no-repeat;
    }
    .badge-gradient {
      background: linear-gradient(90deg, rgba(255,94,30,0.15) 0%, rgba(0,210,160,0.15) 100%);
      border: 1px solid rgba(0,210,160,0.3);
    }
    .btn-gradient {
      background: linear-gradient(90deg, #FF5E1E 0%, #FF7A45 100%);
      transition: all 0.3s ease;
    }
    .btn-gradient:hover {
      box-shadow: 0 8px 24px rgba(255, 94, 30, 0.35);
      transform: translateY(-2px);
    }
    .btn-cyan {
      background: linear-gradient(90deg, #00D2A0 0%, #00B88C 100%);
      transition: all 0.3s ease;
    }
    .btn-cyan:hover {
      box-shadow: 0 8px 24px rgba(0, 210, 160, 0.35);
      transform: translateY(-2px);
    }
    .card-transition {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-transition:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 35px -10px rgba(15, 37, 55, 0.12);
    }
    .faq-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease-out;
    }
    .faq-active .faq-content {
      max-height: 240px;
    }
    .faq-active .faq-icon {
      transform: rotate(180deg);
    }