/* roulang page: index */
:root {
      --color-deep: #0f243e;
      --color-dark: #0b1727;
      --color-primary: #0284c7;
      --color-accent: #0ea5e9;
      --color-warning: #d97706;
      --color-canvas: #f8fafc;
      --color-card: #ffffff;
      --color-border: #e2e8f0;
      --font-stack: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    body {
      font-family: var(--font-stack);
      background-color: var(--color-canvas);
      color: #334155;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
    }
    .custom-container {
      width: 100%;
      max-width: 1280px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .hero-mask {
      background: linear-gradient(135deg, rgba(15, 36, 62, 0.94) 0%, rgba(11, 23, 39, 0.97) 100%);
    }
    .card-hover {
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 30px -8px rgba(15, 36, 62, 0.12);
    }
    .faq-content {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease-out;
    }
    .faq-item.active .faq-content {
      max-height: 500px;
    }
    .faq-item.active .faq-icon {
      transform: rotate(180deg);
    }
    .nav-link {
      transition: color 0.2s ease;
      position: relative;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: -4px;
      left: 0;
      background-color: var(--color-accent);
      transition: width 0.2s ease;
    }
    .nav-link:hover::after {
      width: 100%;
    }
    .btn-touch {
      min-height: 44px;
      min-width: 44px;
    }