/* roulang page: index */
:root {
      --primary: #0F53FF;
      --secondary: #00D287;
      --dark: #0A1128;
      --text-main: #0B192C;
      --text-sub: #4A5568;
      --bg-alt: #F4F7FB;
    }
    html {
      scroll-behavior: smooth;
      font-family: system-ui, -apple-system, "SF Pro SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    }
    body {
      color: var(--text-main);
      background-color: #ffffff;
      line-height: 1.8;
      overflow-x: hidden;
    }
    .hero-bg {
      background-image: linear-gradient(135deg, rgba(10, 17, 40, 0.94) 0%, rgba(15, 83, 255, 0.82) 100%), url('/assets/images/b636421e166cc257.jpg');
      background-size: cover;
      background-position: center;
    }
    .clip-slant {
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
    }
    .brand-gradient-btn {
      background: linear-gradient(135deg, #0F53FF 0%, #00D287 100%);
      transition: all 0.3s ease;
    }
    .brand-gradient-btn:hover {
      box-shadow: 0 10px 25px -5px rgba(15, 83, 255, 0.45);
      transform: translateY(-2px);
    }
    .card-hover {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .card-hover:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 25px -5px rgba(15, 83, 255, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    .dark-section {
      background: linear-gradient(180deg, #0A1128 0%, #060a19 100%);
    }
    details > summary {
      list-style: none;
    }
    details > summary::-webkit-details-marker {
      display: none;
    }
    details[open] summary .faq-icon {
      transform: rotate(180deg);
    }