/* roulang page: index */
@layer base {
      :root {
        --primary: #E6002D;
        --primary-light: #FF4D6A;
        --secondary: #0A0E27;
        --accent: #00E5A1;
        --bg-warm: #F5F0EB;
        --text-dark: #1E1E1E;
        --text-mid: #5A5A5A;
        --text-light: #C2C2C2;
        --gradient-primary: linear-gradient(135deg, #E6002D 0%, #FF4D6A 100%);
        --gradient-dark: linear-gradient(180deg, #0A0E27 0%, #1A1F3A 100%);
        --radius-card: 20px;
        --radius-btn: 9999px;
        --shadow-glow: 0 8px 30px rgba(230, 0, 45, 0.15);
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        color: #1E1E1E;
        background-color: #F5F0EB;
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
      }
      .container {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 2rem;
        padding-right: 2rem;
      }
      @media (max-width: 768px) {
        .container {
          padding-left: 1.25rem;
          padding-right: 1.25rem;
        }
      }
      .section-padding {
        padding-top: 6rem;
        padding-bottom: 6rem;
      }
      @media (max-width: 768px) {
        .section-padding {
          padding-top: 3rem;
          padding-bottom: 3rem;
        }
      }
      .text-gradient-primary {
        background: linear-gradient(135deg, #E6002D 0%, #FF4D6A 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .bg-grid-pattern {
        background-image: 
          linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
        background-size: 40px 40px;
        background-position: center center;
      }
      .snap-x-mandatory {
        scroll-snap-type: x mandatory;
      }
      .snap-center {
        scroll-snap-align: center;
      }
      .hide-scrollbar::-webkit-scrollbar {
        display: none;
      }
      .hide-scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .faq-answer {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.35s ease, background-color 0.2s;
      }
      .faq-item.active .faq-answer {
        grid-template-rows: 1fr;
      }
      .faq-item.active {
        background-color: #FFF0F2;
      }
      .faq-icon {
        transition: transform 0.3s ease;
      }
      .faq-item.active .faq-icon {
        transform: rotate(45deg);
      }
      .bottom-nav {
        background: rgba(255,255,255,0.96);
        backdrop-filter: blur(12px);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
      }
      .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 30px rgba(230, 0, 45, 0.15);
      }
      .compare-win {
        border: 2px solid #E6002D;
        box-shadow: 0 0 20px rgba(230,0,45,0.2);
      }
    }