/* roulang page: index */
:root {
      --primary: #007E8A;
      --primary-dark: #005F69;
      --primary-light: #E6F4F5;
      --accent-blue: #00B4D8;
      --accent-green: #38B000;
      --gold-deep: #D4AF37;
      --gold-dark: #997314;
      --gold-gradient: linear-gradient(135deg, #F3E7C4 0%, #D4AF37 50%, #AA7C11 100%);
      --dark-card: #15222E;
      --dark-bg: #0B151D;
      --bg-light: #F8FAFC;
      --text-main: #0F172A;
      --text-muted: #64748B;
      --border-color: #E2E8F0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Noto Sans", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: var(--text-main);
      background-color: var(--bg-light);
      scroll-behavior: smooth;
      overflow-x: hidden;
    }

    .brand-gradient-btn {
      background: linear-gradient(135deg, #007E8A 0%, #00B4D8 100%);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .brand-gradient-btn:hover {
      box-shadow: 0 10px 25px -5px rgba(0, 180, 216, 0.4);
      transform: translateY(-2px);
    }

    .gold-gradient-btn {
      background: var(--gold-gradient);
      color: #1A1302;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .gold-gradient-btn:hover {
      filter: brightness(1.1);
      box-shadow: 0 10px 25px -5px rgba(212, 175, 55, 0.4);
      transform: translateY(-2px);
    }

    .gold-badge {
      background: linear-gradient(90deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
      border: 1px solid rgba(212, 175, 55, 0.4);
      color: #D4AF37;
    }

    .custom-card {
      background: #FFFFFF;
      border: 1px solid var(--border-color);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .custom-card:hover {
      border-color: #99E2EC;
      box-shadow: 0 20px 25px -5px rgba(0, 126, 138, 0.08), 0 8px 10px -6px rgba(0, 126, 138, 0.04);
      transform: translateY(-4px);
    }

    .tab-active {
      background-color: #007E8A;
      color: #FFFFFF;
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s ease;
    }
    .faq-item.active .faq-answer {
      max-height: 200px;
      padding-bottom: 1.25rem;
    }
    .faq-item.active .faq-arrow {
      transform: rotate(180deg);
      color: #007E8A;
    }
    .faq-item.active {
      border-color: #007E8A;
      background-color: #F0FDFA;
    }