html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
    }

    :root {
      --brand: #FF6905;
      --brand-600: #e85f04;
      --brand-700: #cf5504;
      --warm-50: #FFF9F5;
      --warm-100: #FFF6F0;
      --warm-200: #FFEDE2;
      --warm-300: #FFDFC9;
      --ink: #111827;
    }

    /* Brand utilities */
    .text-brand {
      color: var(--brand);
    }

    .bg-brand {
      background-color: var(--brand);
    }

    .btn-brand {
      background: linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%);
      color: #fff;
      box-shadow: 0 8px 20px rgba(255, 105, 5, 0.25);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }

    .btn-brand:hover {
      transform: translateY(-1px) scale(1.02);
      filter: brightness(0.98);
      box-shadow: 0 10px 22px rgba(255, 105, 5, 0.32);
      background: linear-gradient(180deg, var(--brand-600) 0%, var(--brand-700) 100%);
    }

    .btn-brand {
      border: 1px solid #f2d9c9;
      background: linear-gradient(180deg, #fff 0%, #fff 100%);
      color: var(--ink);
      transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
    }

    .btn-brand:hover {
      background-color: var(--warm-100);
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(255, 105, 5, 0.12);
    }

    /* Card styling */
    .card {
      border: 1px solid #f0e2d8;
      border-radius: 1rem;
      background: linear-gradient(180deg, #ffffff 0%, #fffdfa 100%);
      box-shadow: 0 6px 18px rgba(172, 90, 35, 0.08);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(172, 90, 35, 0.14);
      border-color: #ffd9c5;
    }

    /* Subtle section wrappers */
    .section-warm {
      background: linear-gradient(180deg, var(--warm-100) 0%, #ffffff 100%);
    }

    .pill {
      border: 1px solid #f3cbb3;
      background: #fff7f2;
      color: #9a3c00;
    }

    /* App frame glow */
    .phone-glow {
      box-shadow: 0 0 0 8px rgba(255, 105, 5, 0.06), 0 30px 70px rgba(255, 105, 5, 0.15);
      border-color: #ffe2d1 !important;
    }

    /* Simple fade-up for reveals */
    .reveal {
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .45s ease, transform .45s ease;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Secondary (light orange outline) */
    .btn-secondary {
      border: 1px solid #FFD0B5;
      background: #FFFFFF;
      color: var(--brand);
      box-shadow: 0 4px 12px rgba(255, 105, 5, 0.08);
      transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
    }

    .btn-secondary:hover {
      background: #FFF4EC;
      border-color: #FFC3A1;
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(255, 105, 5, 0.14);
    }

    /* Inverse (for dark footer) */
    .btn-inverse {
      background: #FFFFFF;
      color: #1f2937;
      border: 1px solid #ffffff;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }

    .btn-inverse:hover {
      filter: brightness(0.98);
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
    }
     /* 自定义 Swiper 分页圆点颜色 */
  .swiper-pagination-bullet {
    background-color: #d1d5db; /* 未选中：浅灰色 */
    opacity: 1;
  }

  .swiper-pagination-bullet-active {
    background-color: #FF6905; /* 选中：蓝色，可换成 #10b981（绿）、#ef4444（红）等 */
  }
    @media (prefers-reduced-motion: reduce) {

      .btn-brand,
      .btn-secondary,
      .btn-inverse,
      .card {
        transition: none !important;
      }

      .reveal {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
      }
    }