/* 基础颜色变量定义 */
:root {
  /* 基础黑白色 */
  --color-black: #000000;
  --color-white: #fffcfa;

  /* 指定的基础颜色 */
  --color-red: #e41e1c;
  --color-green: #1b4430;
  --color-yellow: #856512;
  --color-gray: #909ca2;
  --color-sage: #455c51;
  --color-brown: #805c48;

  /* 红色渐进色系 (#e41e1c) */
  --color-red-50: #fef2f2;
  --color-red-100: #fee2e2;
  --color-red-200: #fecaca;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #e41e1c;
  --color-red-700: #b91c1c;
  --color-red-800: #991b1b;
  --color-red-900: #7f1d1d;
  --color-red-950: #450a0a;

  /* 绿色渐进色系 (#1b4430) */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #1b4430;
  --color-green-800: #166534;
  --color-green-900: #14532d;
  --color-green-950: #052e16;

  /* 黄色渐进色系 (#856512) */
  --color-yellow-50: #fefce8;
  --color-yellow-100: #fef9c3;
  --color-yellow-200: #fef08a;
  --color-yellow-300: #fde047;
  --color-yellow-400: #facc15;
  --color-yellow-500: #eab308;
  --color-yellow-600: #ca8a04;
  --color-yellow-700: #856512;
  --color-yellow-800: #713f12;
  --color-yellow-900: #422006;
  --color-yellow-950: #365314;

  /* 灰色渐进色系 (#909ca2) */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #dfe0dc;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #909ca2;
  --color-gray-600: #6b7280;
  --color-gray-700: #4b5563;
  --color-gray-800: #374151;
  --color-gray-900: #1f2937;
  --color-gray-950: #030712;

  /* 鼠尾草绿渐进色系 (#455c51) */
  --color-sage-50: #f6f7f6;
  --color-sage-100: #e3e8e4;
  --color-sage-200: #c7d2ca;
  --color-sage-300: #a3b5a8;
  --color-sage-400: #7a9182;
  --color-sage-500: #5e7567;
  --color-sage-600: #455c51;
  --color-sage-700: #3a4d43;
  --color-sage-800: #314038;
  --color-sage-900: #2a3530;
  --color-sage-950: #161d19;

  /* 棕色渐进色系 (#805c48) */
  --color-brown-50: #faf8f5;
  --color-brown-100: #f2ede5;
  --color-brown-200: #e4d8ca;
  --color-brown-300: #f7e1d2;
  --color-brown-400: #bca082;
  --color-brown-500: #a88567;
  --color-brown-600: #805c48;
  --color-brown-700: #6d4d3e;
  --color-brown-800: #5a4135;
  --color-brown-900: #4a372e;
  --color-brown-950: #261c17;

  /* Google字体变量定义 */
  /* 简体中文字体 */
  --font-zh-cn-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  --font-zh-cn-serif: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-zh-cn-mono: "Noto Sans Mono CJK SC", "SF Mono", "Monaco", "Consolas",
    monospace;

  /* 繁体中文字体 */
  --font-zh-tw-sans: "Noto Sans TC", "PingFang TC", "Hiragino Sans CNS",
    "Microsoft JhengHei", sans-serif;
  --font-zh-tw-serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font-zh-tw-mono: "Noto Sans Mono CJK TC", "SF Mono", "Monaco", "Consolas",
    monospace;

  /* 英文字体 */
  --font-en-sans: "Inter", "Roboto", "Helvetica Neue", "Arial", sans-serif;
  --font-en-serif: "Playfair Display", "Georgia", "Times New Roman", serif;
  --font-en-mono: "JetBrains Mono", "Fira Code", "Monaco", "Consolas", monospace;
  --font-en-display: "Poppins", "Montserrat", "Open Sans", sans-serif;

  /* 日语字体 */
  --font-ja-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic",
    "Meiryo", sans-serif;
  --font-ja-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho",
    "MS Mincho", serif;
  --font-ja-mono: "Noto Sans Mono CJK JP", "SF Mono", "Monaco", "Consolas",
    monospace;
}

h1,
.h1 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-size: 7rem;
  font-weight: 400;
  line-height: 1;
}

h2,
.h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 3.75rem;
  font-weight: 400;
  line-height: 1.2;
}

h3,
.h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.3em;
}

h4,
.h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
}

h5,
.h5 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5;
}

h6,
.h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

/* 实用工具类 */
.bg-red {
  background-color: var(--color-red);
}
.bg-green {
  background-color: var(--color-green);
}
.bg-yellow {
  background-color: var(--color-yellow);
}
.bg-gray {
  background-color: var(--color-gray-200);
}
.bg-sage {
  background-color: var(--color-sage);
}
.bg-brown {
  background-color: var(--color-brown-300);
}

.text-red {
  color: var(--color-red);
}
.text-green {
  color: var(--color-green);
}
.text-yellow {
  color: var(--color-yellow);
}
.text-gray {
  color: var(--color-gray);
}
.text-sage {
  color: var(--color-sage);
}
.text-brown {
  color: var(--color-brown);
}

.border-red {
  border-color: var(--color-red);
}
.border-green {
  border-color: var(--color-green);
}
.border-yellow {
  border-color: var(--color-yellow);
}
.border-gray {
  border-color: var(--color-gray);
}
.border-sage {
  border-color: var(--color-sage);
}
.border-brown {
  border-color: var(--color-brown);
}

/* 渐进色背景类 */
.bg-red-50 {
  background-color: var(--color-red-50);
}
.bg-red-100 {
  background-color: var(--color-red-100);
}
.bg-red-200 {
  background-color: var(--color-red-200);
}
.bg-red-300 {
  background-color: var(--color-red-300);
}
.bg-red-400 {
  background-color: var(--color-red-400);
}
.bg-red-500 {
  background-color: var(--color-red-500);
}
.bg-red-600 {
  background-color: var(--color-red-600);
}
.bg-red-700 {
  background-color: var(--color-red-700);
}
.bg-red-800 {
  background-color: var(--color-red-800);
}
.bg-red-900 {
  background-color: var(--color-red-900);
}

.bg-green-50 {
  background-color: var(--color-green-50);
}
.bg-green-100 {
  background-color: var(--color-green-100);
}
.bg-green-200 {
  background-color: var(--color-green-200);
}
.bg-green-300 {
  background-color: var(--color-green-300);
}
.bg-green-400 {
  background-color: var(--color-green-400);
}
.bg-green-500 {
  background-color: var(--color-green-500);
}
.bg-green-600 {
  background-color: var(--color-green-600);
}
.bg-green-700 {
  background-color: var(--color-green-700);
}
.bg-green-800 {
  background-color: var(--color-green-800);
}
.bg-green-900 {
  background-color: var(--color-green-900);
}

.bg-yellow-50 {
  background-color: var(--color-yellow-50);
}
.bg-yellow-100 {
  background-color: var(--color-yellow-100);
}
.bg-yellow-200 {
  background-color: var(--color-yellow-200);
}
.bg-yellow-300 {
  background-color: var(--color-yellow-300);
}
.bg-yellow-400 {
  background-color: var(--color-yellow-400);
}
.bg-yellow-500 {
  background-color: var(--color-yellow-500);
}
.bg-yellow-600 {
  background-color: var(--color-yellow-600);
}
.bg-yellow-700 {
  background-color: var(--color-yellow-700);
}
.bg-yellow-800 {
  background-color: var(--color-yellow-800);
}
.bg-yellow-900 {
  background-color: var(--color-yellow-900);
}

.bg-gray-50 {
  background-color: var(--color-gray-50);
}
.bg-gray-100 {
  background-color: var(--color-gray-100);
}
.bg-gray-200 {
  background-color: var(--color-gray-200);
}
.bg-gray-300 {
  background-color: var(--color-gray-300);
}
.bg-gray-400 {
  background-color: var(--color-gray-400);
}
.bg-gray-500 {
  background-color: var(--color-gray-500);
}
.bg-gray-600 {
  background-color: var(--color-gray-600);
}
.bg-gray-700 {
  background-color: var(--color-gray-700);
}
.bg-gray-800 {
  background-color: var(--color-gray-800);
}
.bg-gray-900 {
  background-color: var(--color-gray-900);
}

.bg-sage-50 {
  background-color: var(--color-sage-50);
}
.bg-sage-100 {
  background-color: var(--color-sage-100);
}
.bg-sage-200 {
  background-color: var(--color-sage-200);
}
.bg-sage-300 {
  background-color: var(--color-sage-300);
}
.bg-sage-400 {
  background-color: var(--color-sage-400);
}
.bg-sage-500 {
  background-color: var(--color-sage-500);
}
.bg-sage-600 {
  background-color: var(--color-sage-600);
}
.bg-sage-700 {
  background-color: var(--color-sage-700);
}
.bg-sage-800 {
  background-color: var(--color-sage-800);
}
.bg-sage-900 {
  background-color: var(--color-sage-900);
}

.bg-brown-50 {
  background-color: var(--color-brown-50);
}
.bg-brown-100 {
  background-color: var(--color-brown-100);
}
.bg-brown-200 {
  background-color: var(--color-brown-200);
}
.bg-brown-300 {
  background-color: var(--color-brown-300);
}
.bg-brown-400 {
  background-color: var(--color-brown-400);
}
.bg-brown-500 {
  background-color: var(--color-brown-500);
}
.bg-brown-600 {
  background-color: var(--color-brown-600);
}
.bg-brown-700 {
  background-color: var(--color-brown-700);
}
.bg-brown-800 {
  background-color: var(--color-brown-800);
}
.bg-brown-900 {
  background-color: var(--color-brown-900);
}

/* 渐进色文字类 */
.text-red-50 {
  color: var(--color-red-50);
}
.text-red-100 {
  color: var(--color-red-100);
}
.text-red-200 {
  color: var(--color-red-200);
}
.text-red-300 {
  color: var(--color-red-300);
}
.text-red-400 {
  color: var(--color-red-400);
}
.text-red-500 {
  color: var(--color-red-500);
}
.text-red-600 {
  color: var(--color-red-600);
}
.text-red-700 {
  color: var(--color-red-700);
}
.text-red-800 {
  color: var(--color-red-800);
}
.text-red-900 {
  color: var(--color-red-900);
}

.text-green-50 {
  color: var(--color-green-50);
}
.text-green-100 {
  color: var(--color-green-100);
}
.text-green-200 {
  color: var(--color-green-200);
}
.text-green-300 {
  color: var(--color-green-300);
}
.text-green-400 {
  color: var(--color-green-400);
}
.text-green-500 {
  color: var(--color-green-500);
}
.text-green-600 {
  color: var(--color-green-600);
}
.text-green-700 {
  color: var(--color-green-700);
}
.text-green-800 {
  color: var(--color-green-800);
}
.text-green-900 {
  color: var(--color-green-900);
}

.text-yellow-50 {
  color: var(--color-yellow-50);
}
.text-yellow-100 {
  color: var(--color-yellow-100);
}
.text-yellow-200 {
  color: var(--color-yellow-200);
}
.text-yellow-300 {
  color: var(--color-yellow-300);
}
.text-yellow-400 {
  color: var(--color-yellow-400);
}
.text-yellow-500 {
  color: var(--color-yellow-500);
}
.text-yellow-600 {
  color: var(--color-yellow-600);
}
.text-yellow-700 {
  color: var(--color-yellow-700);
}
.text-yellow-800 {
  color: var(--color-yellow-800);
}
.text-yellow-900 {
  color: var(--color-yellow-900);
}

.text-gray-50 {
  color: var(--color-gray-50);
}
.text-gray-100 {
  color: var(--color-gray-100);
}
.text-gray-200 {
  color: var(--color-gray-200);
}
.text-gray-300 {
  color: var(--color-gray-300);
}
.text-gray-400 {
  color: var(--color-gray-400);
}
.text-gray-500 {
  color: var(--color-gray-500);
}
.text-gray-600 {
  color: var(--color-gray-600);
}
.text-gray-700 {
  color: var(--color-gray-700);
}
.text-gray-800 {
  color: var(--color-gray-800);
}
.text-gray-900 {
  color: var(--color-gray-900);
}

.text-sage-50 {
  color: var(--color-sage-50);
}
.text-sage-100 {
  color: var(--color-sage-100);
}
.text-sage-200 {
  color: var(--color-sage-200);
}
.text-sage-300 {
  color: var(--color-sage-300);
}
.text-sage-400 {
  color: var(--color-sage-400);
}
.text-sage-500 {
  color: var(--color-sage-500);
}
.text-sage-600 {
  color: var(--color-sage-600);
}
.text-sage-700 {
  color: var(--color-sage-700);
}
.text-sage-800 {
  color: var(--color-sage-800);
}
.text-sage-900 {
  color: var(--color-sage-900);
}

.text-brown-50 {
  color: var(--color-brown-50);
}
.text-brown-100 {
  color: var(--color-brown-100);
}
.text-brown-200 {
  color: var(--color-brown-200);
}
.text-brown-300 {
  color: var(--color-brown-300);
}
.text-brown-400 {
  color: var(--color-brown-400);
}
.text-brown-500 {
  color: var(--color-brown-500);
}
.text-brown-600 {
  color: var(--color-brown-600);
}
.text-brown-700 {
  color: var(--color-brown-700);
}
.text-brown-800 {
  color: var(--color-brown-800);
}
.text-brown-900 {
  color: var(--color-brown-900);
}

/* 渐进色边框类 */
.border-red-50 {
  border-color: var(--color-red-50);
}
.border-red-100 {
  border-color: var(--color-red-100);
}
.border-red-200 {
  border-color: var(--color-red-200);
}
.border-red-300 {
  border-color: var(--color-red-300);
}
.border-red-400 {
  border-color: var(--color-red-400);
}
.border-red-500 {
  border-color: var(--color-red-500);
}
.border-red-600 {
  border-color: var(--color-red-600);
}
.border-red-700 {
  border-color: var(--color-red-700);
}
.border-red-800 {
  border-color: var(--color-red-800);
}
.border-red-900 {
  border-color: var(--color-red-900);
}

.border-green-50 {
  border-color: var(--color-green-50);
}
.border-green-100 {
  border-color: var(--color-green-100);
}
.border-green-200 {
  border-color: var(--color-green-200);
}
.border-green-300 {
  border-color: var(--color-green-300);
}
.border-green-400 {
  border-color: var(--color-green-400);
}
.border-green-500 {
  border-color: var(--color-green-500);
}
.border-green-600 {
  border-color: var(--color-green-600);
}
.border-green-700 {
  border-color: var(--color-green-700);
}
.border-green-800 {
  border-color: var(--color-green-800);
}
.border-green-900 {
  border-color: var(--color-green-900);
}

.border-yellow-50 {
  border-color: var(--color-yellow-50);
}
.border-yellow-100 {
  border-color: var(--color-yellow-100);
}
.border-yellow-200 {
  border-color: var(--color-yellow-200);
}
.border-yellow-300 {
  border-color: var(--color-yellow-300);
}
.border-yellow-400 {
  border-color: var(--color-yellow-400);
}
.border-yellow-500 {
  border-color: var(--color-yellow-500);
}
.border-yellow-600 {
  border-color: var(--color-yellow-600);
}
.border-yellow-700 {
  border-color: var(--color-yellow-700);
}
.border-yellow-800 {
  border-color: var(--color-yellow-800);
}
.border-yellow-900 {
  border-color: var(--color-yellow-900);
}

.border-gray-50 {
  border-color: var(--color-gray-50);
}
.border-gray-100 {
  border-color: var(--color-gray-100);
}
.border-gray-200 {
  border-color: var(--color-gray-200);
}
.border-gray-300 {
  border-color: var(--color-gray-300);
}
.border-gray-400 {
  border-color: var(--color-gray-400);
}
.border-gray-500 {
  border-color: var(--color-gray-500);
}
.border-gray-600 {
  border-color: var(--color-gray-600);
}
.border-gray-700 {
  border-color: var(--color-gray-700);
}
.border-gray-800 {
  border-color: var(--color-gray-800);
}
.border-gray-900 {
  border-color: var(--color-gray-900);
}

.border-sage-50 {
  border-color: var(--color-sage-50);
}
.border-sage-100 {
  border-color: var(--color-sage-100);
}
.border-sage-200 {
  border-color: var(--color-sage-200);
}
.border-sage-300 {
  border-color: var(--color-sage-300);
}
.border-sage-400 {
  border-color: var(--color-sage-400);
}
.border-sage-500 {
  border-color: var(--color-sage-500);
}
.border-sage-600 {
  border-color: var(--color-sage-600);
}
.border-sage-700 {
  border-color: var(--color-sage-700);
}
.border-sage-800 {
  border-color: var(--color-sage-800);
}
.border-sage-900 {
  border-color: var(--color-sage-900);
}

.border-brown-50 {
  border-color: var(--color-brown-50);
}
.border-brown-100 {
  border-color: var(--color-brown-100);
}
.border-brown-200 {
  border-color: var(--color-brown-200);
}
.border-brown-300 {
  border-color: var(--color-brown-300);
}
.border-brown-400 {
  border-color: var(--color-brown-400);
}
.border-brown-500 {
  border-color: var(--color-brown-500);
}
.border-brown-600 {
  border-color: var(--color-brown-600);
}
.border-brown-700 {
  border-color: var(--color-brown-700);
}
.border-brown-800 {
  border-color: var(--color-brown-800);
}
.border-brown-900 {
  border-color: var(--color-brown-900);
}

/* 悬停效果 */
.hover\:bg-red:hover {
  background-color: var(--color-red);
}
.hover\:bg-green:hover {
  background-color: var(--color-green);
}
.hover\:bg-yellow:hover {
  background-color: var(--color-yellow);
}
.hover\:bg-gray:hover {
  background-color: var(--color-gray);
}
.hover\:bg-sage:hover {
  background-color: var(--color-sage);
}
.hover\:bg-brown:hover {
  background-color: var(--color-brown);
}

.hover\:text-red:hover {
  color: var(--color-red);
}
.hover\:text-green:hover {
  color: var(--color-green);
}
.hover\:text-yellow:hover {
  color: var(--color-yellow);
}
.hover\:text-gray:hover {
  color: var(--color-gray);
}
.hover\:text-sage:hover {
  color: var(--color-sage);
}
.hover\:text-brown:hover {
  color: var(--color-brown);
}

.hover\:border-red:hover {
  border-color: var(--color-red);
}
.hover\:border-green:hover {
  border-color: var(--color-green);
}
.hover\:border-yellow:hover {
  border-color: var(--color-yellow);
}
.hover\:border-gray:hover {
  border-color: var(--color-gray);
}
.hover\:border-sage:hover {
  border-color: var(--color-sage);
}
.hover\:border-brown:hover {
  border-color: var(--color-brown);
}

/* 基础盒模型和重置样式 */
* {
  box-sizing: border-box;
}

.mb--1 {
  margin-bottom: -1px;
}
.mt--1 {
  margin-top: -1px;
}

/* 区域和布局样式 */
.section-2 {
  position: relative;
  display: block;
}

.small-spacing {
  padding: 20px 0;
}

.bg-ivory {
  background-color: #f7e1d2;
}

.padding-top-0 {
  padding-top: 0 !important;
}

/* 波浪效果相关样式 */
.bottom-squiggle-wrapper-5 {
  position: relative;
  width: 100%;
}

.margin-top-min {
  margin-top: -1px;
}

.bottom-squiggle-8 {
  width: 100%;
  height: auto;
  display: block;
}

/* 代码嵌入样式 */
.code-embed-16 {
  position: relative;
  width: 100%;
}

.w-embed {
  position: relative;
  display: block;
}

.w-embed svg {
  display: block;
  width: 100%;
  height: auto;
}

/* 响应式显示控制 */
.hide-on-desktop {
  display: none;
}

.show-on-mobile {
  display: none;
}

.hide-on-mobile {
  display: block;
}

.hide-on-tablet {
  display: block;
}

.link-button-component {
  grid-column-gap: 2rem;
  background-color: var(--color-red);
  color: var(--color-white);
  text-align: center;
  object-fit: fill;
  border-radius: 4.25rem;
  flex-direction: row;
  flex: 0 auto;
  order: 1;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  font-family: ivypresto-headline, sans-serif;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.4;
  transition: all 0.5s;
  display: inline-flex;
  position: relative;
}

.link-button-component:hover,
.link-button-component:focus {
  background-color: var(--color-black);
}

.link-button-component.white-link-button {
  background-color: var(--color-white);
  color: var(--color-black);
  display: none;
  overflow: visible;
}

.link-button-component.white-link-button:hover {
  background-color: var(--color-gray);
}

.link-button-arrow-wrapper {
  background-color: var(--color-white);
  color: var(--color-red);
  border-radius: 48px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  overflow: hidden;
}

.link-button-arrow-wrapper.white-link-arrow-wrap {
  border: 1px solid var(--stone);
  background-color: #0000;
}

/* banner */

.border-img {
  border-width: 10px;
  border-radius: 99999px;
}

/* 移动端响应式 */
@media screen and (max-width: 767px) {
  .hide-on-mobile {
    display: none !important;
  }

  .show-on-mobile {
    display: block !important;
  }

  .small-spacing {
    padding: 15px 0;
  }
}

/* 移动端导航样式 */
#mobile-menu-button {
  transition: all 0.3s ease;
}

#mobile-menu-button:hover {
  background-color: var(--color-brown-400);
  border-radius: 4px;
}

#mobile-menu-button span {
  transform-origin: center;
}

#mobile-menu {
  animation: slideDown 0.3s ease-out;
  border-top: 1px solid var(--color-brown-500);
  background-color: var(--color-brown-300);
}

#mobile-menu.hidden {
  animation: slideUp 0.3s ease-in;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* 移动端菜单项样式增强 */
#mobile-menu a {
  position: relative;
  overflow: hidden;
}

#mobile-menu a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  background-color: var(--color-brown-500);
  transition: width 0.3s ease;
  z-index: -1;
}

#mobile-menu a:hover::before {
  width: 100%;
}

#mobile-menu a:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* 确保移动端菜单在小屏幕上正确显示 */
@media (max-width: 640px) {
  #mobile-menu {
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* 平板端响应式 */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .hide-on-tablet {
    display: none !important;
  }
}

/* 桌面端响应式 */
@media screen and (min-width: 992px) {
  .hide-on-desktop {
    display: none !important;
  }

  .show-on-mobile {
    display: none !important;
  }
}

.section-2.small-spacing.bg-ivory {
  background-color: #f7e1d2;
}

.bottom-squiggle-wrapper-5 {
  background-color: var(--color-white);
}

.bottom-squiggle-8 {
  background-color: #fffcfa;
  width: 100%;
  height: auto;
  margin-top: -1px;
  display: block;
}
.code-embed-16.hide-on-mobile.hide-on-tablet {
  margin-top: -5px;
}

.w-embed:before,
.w-embed:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

/* ===== Swiper 轮播样式 ===== */
/* Integration Slider Styles */
.integration-slider-component {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

.integration-swiper {
  position: relative;
  padding: 2rem 0 4rem 0;
}

.integration-slide {
  display: flex;
  align-items: stretch;
  justify-content: center;
  min-height: 320px;
  padding: 0.5rem;
}

.integration-card {
  width: 100%;
  max-width: 100%;
  padding: 1.5rem 1rem;
  background: transparent;
  border: 1px solid var(--color-brown-300);
  border-radius: 12px;
  box-shadow: none;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  text-align: left;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.integration-card:hover {
  transform: translateY(-4px);
}

.integration-icon {
  /* display: flex; */
  align-items: center;
  /* justify-content: flex-start; */
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
}

.integration-icon img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
}

.icon-container {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.icon-container.trello {
  background: linear-gradient(135deg, #0079bf 0%, #026aa7 100%);
}

.integration-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}

.integration-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 1rem 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.integration-description {
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.5;
  min-height: 80px;
  margin: 0 0 1.5rem 0;
  flex-grow: 1;
}

.integration-link {
  color: #6366f1;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.2s ease;
  margin-top: auto;
}

.integration-link:hover {
  color: #4f46e5;
  text-decoration: none;
}

/* Legacy testimonial styles for backward compatibility */
.testimonial-slider-component {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

.testimonial-swiper {
  position: relative;
  padding: 2rem 0 4rem 0;
}

.testimonial-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 2rem;
}

.testimonial-slide-inner {
  max-width: 800px;
  width: 100%;
  padding: 3rem 2rem;
  background: white;
  border: 2px solid #000;
  border-radius: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.testimonial-slide-inner:hover {
  transform: translateY(-5px);
}

.testimonial-slider-quote {
  font-style: italic;
  line-height: 1.6;
  position: relative;
}

.testimonial-attr h3 {
  margin-bottom: 0.25rem;
}

/* Swiper 导航按钮样式 */
.swiper-button-next,
.swiper-button-prev {
  color: var(--color-brown-600);
  background: white;
  border: 2px solid var(--color-brown-600);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: var(--color-brown-600);
  color: white;
  transform: scale(1.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 18px;
  font-weight: bold;
}

/* Swiper 分页器样式 */
.swiper-pagination {
  bottom: 0 !important;
}

.swiper-pagination-bullet {
  background: var(--color-brown-300);
  opacity: 0.5;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
  background: var(--color-brown-600);
  opacity: 1;
  transform: scale(1.2);
}

/* 移动端适配 */
@media (max-width: 768px) {
  /* Integration cards mobile styles */
  .integration-slide {
    min-height: 280px;
    padding: 0.5rem;
  }

  .integration-card {
    max-width: 100%;
    padding: 1.5rem 1rem;
  }

  .icon-container {
    width: 56px;
    height: 56px;
  }

  .integration-title {
    font-size: 1.25rem;
  }

  .integration-description {
    font-size: 0.9rem;
  }

  /* Legacy testimonial mobile styles */
  .testimonial-slide {
    min-height: 350px;
    padding: 1rem;
  }

  .testimonial-slide-inner {
    padding: 2rem 1.5rem;
  }

  .testimonial-slider-quote {
    font-size: 1.1rem;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }

  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .testimonial-slide-inner {
    padding: 1.5rem 1rem;
  }

  .testimonial-slider-quote {
    font-size: 1rem;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }
}

/* Google字体类 */

/* 简体中文字体类 */
.font-zh-cn-sans {
  font-family: var(--font-zh-cn-sans);
}

.font-zh-cn-serif {
  font-family: var(--font-zh-cn-serif);
}

.font-zh-cn-mono {
  font-family: var(--font-zh-cn-mono);
}

/* 繁体中文字体类 */
.font-zh-tw-sans {
  font-family: var(--font-zh-tw-sans);
}

.font-zh-tw-serif {
  font-family: var(--font-zh-tw-serif);
}

.font-zh-tw-mono {
  font-family: var(--font-zh-tw-mono);
}

/* 英文字体类 */
.font-en-sans {
  font-family: var(--font-en-sans);
}

.font-en-serif {
  font-family: var(--font-en-serif);
}

.font-en-mono {
  font-family: var(--font-en-mono);
}

.font-en-display {
  font-family: var(--font-en-display);
}

/* 日语字体类 */
.font-ja-sans {
  font-family: var(--font-ja-sans);
}

.font-ja-serif {
  font-family: var(--font-ja-serif);
}

.font-ja-mono {
  font-family: var(--font-ja-mono);
}

/* 字体权重类 */
.font-thin {
  font-weight: 100;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

/* 字体大小类 */
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

/* 行高类 */
.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.leading-snug {
  line-height: 1.375;
}

.leading-normal {
  line-height: 1.5;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-loose {
  line-height: 2;
}

/* 字母间距类 */
.tracking-tighter {
  letter-spacing: -0.05em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-normal {
  letter-spacing: 0em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-wider {
  letter-spacing: 0.05em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}
.w-embed:after {
  clear: both;
}

.w-embed:before,
.w-embed:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

/*轮播*/

.testimonial-slide {
  border-radius: 15px;
}

.testimonial-slide-inner-in {
  max-width: 800px;
  width: 100%;
  padding: 3rem 2rem;
  /* background: var(--color-brown-300); */
  border: 0;
  border-radius: 0;
  transition: transform 0.3s ease;
}

/* 用户评价 */
.slider-component {
  /* background-color: var(--ivory); */
  /* background-image: url(./imgs/border_1.svg), url(./imgs/border_2.svg); */
  background-position: 104% 0, 0 0;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto;
  border-radius: 20px;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  position: relative;
}

/* 步骤 */

.title-container.display-flex.center-fex {
  justify-content: flex-start;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
}
.center-number {
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  font-weight: 500;
  margin-bottom: 0;
  padding-bottom: 0;
  display: flex;
}

.round-white-number {
  background-color: var(--color-brown-300);
  border-radius: 50%;
  width: 50px;
  position: absolute;
  font-size: 24px;
  box-shadow: -5px 5px 6px #0003;
}

.margin-bottom-151.margin-left-round {
  background-color: var(--color-brown-300);
  border-radius: 25px;
  /* width: 100%; */
  margin-left: 25px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 50px;
  margin-top: 3px;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
}
.margin-bottom-151 {
  margin-bottom: 0;
}

/* 流程步骤网格布局 */
.grid-selector {
  display: grid;
  gap: 1.5rem;
  /* 手机端：1列 */
  grid-template-columns: 1fr;
}

/* 平板和电脑端：两行三列布局 */
@media (min-width: 768px) {
  .grid-selector {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 2rem;
  }

  /* 居中显示的网格容器（用于步骤4-5） */
  .grid-selector-center {
    grid-template-columns: repeat(2, 1fr);
    max-width: 66.666%; /* 2/3 of the width */
    margin: 0 auto;
    justify-content: center;
  }
}

/* 流程步骤项容器 */
.body-selector {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  border: 1px solid rgba(128, 92, 72, 0.1);
}

.body-selector:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(128, 92, 72, 0.15);
  background: rgba(255, 255, 255, 0.95);
}

/* 响应式调整 */
@media (max-width: 767px) {
  .body-selector {
    padding: 1.25rem;
  }

  .margin-bottom-151.margin-left-round {
    font-size: 1.25rem;
    padding-left: 40px;
    margin-left: 20px;
  }

  .round-white-number {
    width: 40px;
  }

  .center-number {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
}

/* FAQ和内容卡片两列布局 */
.flex-container-two-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 电脑端：两列布局 */
@media (min-width: 768px) {
  .flex-container-two-col {
    flex-direction: row;
    gap: 2em;
    align-items: flex-start;
  }

  .flex-container-two-col .flex-expand {
    flex: 1;
    min-width: 0; /* 防止flex项目溢出 */
  }

  /* 左侧FAQ区域稍微宽一些 */
  .flex-container-two-col .flex-expand:first-child {
    flex: 0.8;
  }

  /* 右侧内容卡片区域 */
  .flex-container-two-col .flex-expand:last-child {
    flex: 1.2;
  }
}

/* 手机端优化 */
@media (max-width: 767px) {
  .flex-container-two-col {
    gap: 1.5rem;
  }

  /* 手机端FAQ问题项间距调整 */
  .flex-container-two-col .space-y-4 > * + * {
    margin-top: 1rem;
  }
}

.shadow-large {
  box-shadow: -45px 45px 120px #0000000a, -34px 34px 96px #0000000a,
    -23px 23px 64px #00000014, -11px 11px 30px #00000024,
    -4px 4px 12px #0000001f;
}

.featured-content-card {
  background-color: var(--color-brown-300);
  border-radius: 1.25rem;
  padding: 2.5rem;
  overflow: hidden;
}

.image-cover {
  object-fit: cover;
  width: 100%;
  height: 100%;
  margin-left: 0;
  display: inline-block;
  position: absolute;
  inset: 0% auto auto 0%;
}

.ratio-100.border-radius-12.shadow-large {
  display: block;
}

.ratio-100 {
  aspect-ratio: 1 / 1;
}
.border-radius-12 {
  border-radius: 12px;
  overflow: hidden;
}
.shadow-large {
  box-shadow: -45px 45px 120px #0000000a, -34px 34px 96px #0000000a,
    -23px 23px 64px #00000014, -11px 11px 30px #00000024,
    -4px 4px 12px #0000001f;
}

.ratio-100 {
  padding-top: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}

body {
  font-family: var(--font-zh-tw-sans);
}

/* FAQ样式优化 */
.faq-item {
  /* background: var(--color-white); */
  border-radius: 12px;
  border-bottom: 1px solid var(--color-gray-950);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 15px rgba(128, 92, 72, 0.1);
  transform: translateY(-1px);
}

.faq-icon {
  transition: transform 0.3s ease;
  color: var(--color-brown-600);
  flex-shrink: 0;
}

.faq-answer {
  background: var(--color-white);
  border-top: 1px solid rgba(128, 92, 72, 0.1);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contact Form Styles */
.contact-form-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}

/* 左列介绍样式 */
.contact-intro {
  padding: 2rem 0;
}

.contact-intro-title {
  font-weight: bold;
  color: var(--color-black);
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.contact-intro-text {
  font-size: 1.125rem;
  color: #4a5568;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.contact-intro-subtitle {
  font-size: 0.875rem;
  color: #718096;
  margin-bottom: 1.5rem;
  font-weight: 500;
}

.brand-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

.brand-logo {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.brand-logo:hover {
  opacity: 1;
}

/* 右列表单样式 */
.contact-form {
  background: var(--color-white);
  padding: 2rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
  margin-bottom: 1.5rem;
}

.form-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
  padding: 0.75rem;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  font-size: 1rem;
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: #4299e1;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
}

.phone-input-container {
  display: flex;
  gap: 0.5rem;
}

.country-code {
  flex: 0 0 auto;
  width: 80px;
  padding: 0.75rem 0.5rem;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  font-size: 0.875rem;
  background: #fff;
}

.phone-number {
  flex: 1;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

.form-note {
  font-size: 0.875rem;
  color: #718096;
  margin-bottom: 1.5rem;
}

.contact-submit-btn {
  width: 100%;
  /* background: #000; */
  /* color: #fff; */
  padding: 1rem 2rem;
  /* font-size: 1rem; */
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.contact-submit-btn:hover {
  background: #2d3748;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .contact-form-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-intro-title {
    font-size: 2rem;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .contact-form {
    padding: 1.5rem;
  }

  .brand-logos {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .contact-intro-title {
    font-size: 1.75rem;
  }

  .contact-form {
    padding: 1rem;
  }

  .phone-input-container {
    flex-direction: column;
  }

  .country-code {
    width: 100%;
  }
}

/* 分级 */

.section-subtitle {
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Tier Card Base Styles */
.tier-card {
  align-items: flex-start;
  border-radius: var(1.25rem, 1.5rem) 0;
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  gap: var(--brand-spacing_8, 2rem);
  justify-content: space-between;
  padding: var(--brand-spacing_6, 1.5rem);
  text-decoration: none;
  background: var(--color-white);
  outline-offset: 0;
  border: 2px solid var(--color-red-500, #bc4f2d);
  border-top-left-radius: 35px;
  border-bottom-right-radius: 35px;
  width: 100%;
  position: relative;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tier-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.card-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-title {
  font-size: 28px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 16px;
  margin-top: 0;
  line-height: 1.2;
}

.card-description {
  font-size: 16px;
  color: #4a5568;
  /* line-height: 1.2; */
  /* margin-bottom: 6px; */
}

.card-features {
  width: 100%;
  /* margin-bottom: 6px; */
  border-bottom: 1px dashed var(--color-gray-200);
}

.features-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12px;
  margin-top: 0;
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.features-list li {
  font-size: 14px;
  color: #4a5568;
  margin-bottom: 8px;
  line-height: 1.4;
}

.card-button {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  color: white;
}

/* 钻石级样式 */
.tier-diamond {
  border: 2px solid #4c9aff;
}

.tier-diamond .card-button {
  background: #4c9aff;
}

.tier-diamond .card-button:hover {
  background: #2684ff;
  transform: translateY(-2px);
}

/* 黄金级样式 */
.tier-gold {
  border: 2px solid #ffd700;
}

.tier-gold .card-button {
  background: #ffd700;
  color: #1a1a1a;
}

.tier-gold .card-button:hover {
  background: #ffc107;
  transform: translateY(-2px);
}

/* 白银级样式 */
.tier-silver {
  border: 2px solid #c0c0c0;
}

.tier-silver .card-button {
  background: #c0c0c0;
  color: #1a1a1a;
}

.tier-silver .card-button:hover {
  background: #a8a8a8;
  transform: translateY(-2px);
}

/* 青铜级样式 */
.tier-bronze {
  border: 2px solid #cd7f32;
}

.tier-bronze .card-button {
  background: #cd7f32;
}

.tier-bronze .card-button:hover {
  background: #b8722c;
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .tier-card {
    padding: 20px;
  }

  .card-title {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .tier-card {
    padding: 18px;
    margin-bottom: 16px;
  }

  .card-title {
    font-size: 22px;
  }

  .card-description {
    font-size: 14px;
  }

  .features-list li {
    font-size: 13px;
  }

  .card-button {
    padding: 14px 20px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .tier-card {
    padding: 16px;
  }

  .card-title {
    font-size: 20px;
  }

  .card-icon {
    width: 35px;
    height: 35px;
    top: 16px;
    right: 16px;
  }

  .card-icon svg {
    width: 35px;
    height: 35px;
  }
}

/* SVG动画优化和性能提升 */
.card-icon svg {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* 减少动画在不可见时的性能消耗 */
@media (prefers-reduced-motion: reduce) {
  .card-icon svg * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 硬件加速优化 */
.tier-card {
  transform: translateZ(0);
  will-change: transform;
}

/* 动画暂停控制 - 当卡片不在视口时暂停动画 */
.tier-card:not(.in-viewport) .card-icon svg * {
  animation-play-state: paused;
}

/* 悬停时增强动画效果 */
.tier-card:hover .card-icon svg {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* 钻石级特殊效果增强 */
.tier-diamond:hover .card-icon svg path {
  filter: drop-shadow(0 0 8px rgba(76, 154, 255, 0.6));
}

/* 黄金级特殊效果增强 */
.tier-gold:hover .card-icon svg {
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}

/* 白银级特殊效果增强 */
.tier-silver:hover .card-icon svg {
  filter: drop-shadow(0 0 6px rgba(192, 192, 192, 0.4));
}

/* 青铜级特殊效果增强 */
.tier-bronze:hover .card-icon svg {
  filter: drop-shadow(0 0 8px rgba(205, 127, 50, 0.4));
}

/* 响应式动画调整 */
@media (max-width: 768px) {
  .card-icon svg {
    width: 32px;
    height: 32px;
  }

  /* 移动端减少动画复杂度 */
  .card-icon svg animateTransform[attributeName="transform"] {
    dur: 6s; /* 减慢动画速度以节省电池 */
  }
}

/* 动画性能监控和优化 */
@supports (animation-timeline: scroll()) {
  .card-icon svg {
    animation-timeline: scroll();
  }
}

/* GPU加速优化 */
.card-icon {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

/* 用户评价样式 */
.user-testimonials {
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.testimonial-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
}

.testimonial-avatar {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-gray);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.testimonial-quote {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-black);
  font-style: italic;
  margin: 0;
  font-weight: 500;
}

.testimonial-author {
  font-size: 0.9rem;
  color: var(--color-gray);
  margin: 0;
  font-weight: 400;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-testimonials {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    gap: 1rem;
  }

  .testimonial-item {
    gap: 0.75rem;
    padding: 0.75rem 0;
  }

  .testimonial-avatar {
    width: 50px;
    height: 50px;
  }

  .testimonial-quote {
    font-size: 1rem;
  }

  .testimonial-author {
    font-size: 0.85rem;
  }
}

.gsap-testimonial-card {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}