:root {
  /* 标题与 Display 尺寸 */
  --title-size-h1: clamp(28px, 2.71vw, 52px);
  /* 上限: 52px */
  --title-size-h2: clamp(24px, 2.19vw, 42px);
  /* 上限: 42px */
  --title-size-h3: clamp(20px, 1.77vw, 34px);
  /* 上限: 34px */
  --title-size-h4: clamp(18px, 1.46vw, 28px);
  /* 上限: 28px */
  --title-size-h5: clamp(16px, 1.25vw, 24px);
  /* 上限: 24px */
  --hero-title-size: clamp(32px, 3.23vw, 62px);
  /* 上限: 62px */
  --section-title-size: clamp(32px, 3.23vw, 62px);
  /* 上限: 62px */
  --quote-title-size: clamp(36px, 3.75vw, 72px);
  /* 上限: 72px */
  --card-title-size: clamp(20px, 1.67vw, 32px);
  /* 上限: 32px */
  --display-number-size: clamp(48px, 5.83vw, 112px);
  /* 上限: 112px */
  --display-number-desc-size: clamp(24px, 2.19vw, 42px);
  /* 上限: 42px */

  /* 文本尺寸 */
  --lead-text-size: clamp(20px, 1.67vw, 32px);
  /* 上限: 32px */
  --section-desc-size: clamp(16px, 1.15vw, 22px);
  /* 上限: 22px */
  --feature-item-size: clamp(18px, 1.46vw, 28px);
  /* 上限: 28px */

  --text-size-xl: clamp(14px, 1.25vw, 24px);
  /* 上限: 24px */
  --text-size-lg: clamp(11px, 1.15vw, 22px);
  /* 上限: 22px */
  --text-size: clamp(10px, 0.83vw, 16px);
  /* 上限: 16px */
  --text-size-sm: clamp(7px, 0.73vw, 14px);
  /* 上限: 14px */
  --text-size-xs: clamp(6px, 0.63vw, 12px);
  /* 上限: 12px */
  --nav-text-size: clamp(9px, 0.94vw, 18px);
  /* 上限: 18px */
  --dropdown-text-size: clamp(9px, 0.78vw, 15px);
  /* 上限: 15px */

  --text-title-size-lg: clamp(16px, 1.56vw, 30px);
  --text-title-size: clamp(12px, 1.04vw, 20px);

  /* 图标与箭头组件尺寸 */
  --slider-dot-size: clamp(8px, 0.52vw, 10px);
  /* 上限: 10px */
  --slider-dot-gap: clamp(4px, 0.31vw, 6px);
  /* 上限: 6px */
  --slider-pagination-bottom: clamp(16px, 1.56vw, 30px);
  /* 上限: 30px */
  --feature-icon-size: clamp(32px, 2.5vw, 48px);
  /* 上限: 48px */

  /* 组件间距 (Component Gaps) */
  --component-gap: clamp(56px, 6.77vw, 130px);
  /* 上限: 130px */
  --component-gap-lg: clamp(48px, 5.21vw, 100px);
  /* 上限: 100px */
  --component-gap-md: clamp(36px, 3.75vw, 72px);
  /* 上限: 72px */
  --component-gap-sm: clamp(28px, 2.92vw, 56px);
  /* 上限: 56px */

  /* 文本间距 (Text Gaps) */
  --text-gap: clamp(12px, 1.25vw, 24px);
  /* 上限: 24px */
  --text-gap-lg: clamp(10px, 1.04vw, 20px);
  /* 上限: 20px */
  --text-gap-md: clamp(9px, 0.94vw, 18px);
  /* 上限: 18px */
  --text-gap-sm: clamp(8px, 0.83vw, 16px);
  /* 上限: 16px */

  /* 圆角 (Border Radius) */
  --radius-xl: clamp(16px, 1.25vw, 24px);
  /* 上限: 24px */
  --radius-lg: clamp(14px, 1.04vw, 20px);
  /* 上限: 20px */
  --radius-md: clamp(10px, 0.73vw, 14px);
  /* 上限: 14px */
  --radius-sm: clamp(6px, 0.52vw, 10px);
  /* 上限: 10px */

  --page-padding: max(20px, calc((100vw - 1600px) / 2));
  --color-dark: #141414;
  --color-surface: #ffffff;
  --color-surface-muted: #f6f6f4;
  --color-surface-alt: #f2f2f2;
  --color-text-muted: #7f7f7f;
  --color-text-light: rgba(255, 255, 255, 0.7);
  --border-color: rgba(17, 17, 17, 0.08);
  --shadow-soft: 0 10px 40px rgba(17, 17, 17, 0.08);
  --shadow-card: 0 12px 32px rgba(17, 17, 17, 0.12);
  /* 字体大小自适应 */
  --font-size-80: max(40px, 2.5rem);
  --font-size-78: max(40px, 2.4375rem);
  --font-size-68: max(32px, 2.125rem);
  --font-size-66: max(32px, 2.0625rem);
  --font-size-64: max(32px, 2rem);
  --font-size-62: max(32px, 1.9375rem);
  --font-size-60: max(32px, 1.875rem);
  --font-size-58: max(30px, 1.8125rem);
  --font-size-56: max(30px, 1.75rem);
  --font-size-55: max(30px, 1.71875rem);
  --font-size-54: max(30px, 1.6875rem);
  --font-size-52: max(28px, 1.625rem);
  --font-size-50: max(28px, 1.5625rem);
  --font-size-48: max(28px, 1.5rem);
  --font-size-46: max(26px, 1.4375rem);
  --font-size-44: max(26px, 1.375rem);
  --font-size-42: max(26px, 1.3125rem);
  --font-size-40: max(24px, 1.25rem);
  --font-size-38: max(24px, 1.1875rem);
  --font-size-36: max(24px, 1.125rem);
  --font-size-34: max(20px, 1.0625rem);
  --font-size-32: max(20px, 1rem);
  --font-size-30: max(20px, 0.9375rem);
  --font-size-28: max(18px, 0.875rem);
  --font-size-27: max(18px, 0.84375rem);
  --font-size-26: max(18px, 0.8125rem);
  --font-size-24: max(16px, 0.75rem);
  --font-size-22: max(14px, 0.6875rem);
  --font-size-20: max(14px, 0.625rem);
  --font-size-18: max(12px, 0.5625rem);
  --font-size-16: max(12px, 0.5rem);
  --font-size-14: max(12px, 0.4375rem);
}

@font-face {
  font-family: "Poppins";
  src: url("./fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Poppins-Medium";
  src: url("./fonts/Poppins-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Poppins-SemiBold";
  src: url("./fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Poppins-Bold";
  src: url("./fonts/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

body {
  /* overflow-x:hidden; */
  /* 用 padding 顶起来，代替第一个模块的 margin-top */
}

.youtuo-fill {
  min-height: calc(100vh - var(--header-height, 80px));
}


.youtuo-wave-btn {
  position: relative;
}

.youtuo-wave-btn::before,
.youtuo-wave-btn::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid #FFF;
  border-radius: inherit;
  animation: wavePattern 2s ease-out infinite;
  opacity: 0;
}

.youtuo-wave-btn::after {
  animation-delay: 1s;
}

.youtuo_solution_banner::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.youtuo_solution_banner_title {
  width: 100%;
  z-index: 2;
}

@keyframes wavePattern {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}


.youtuo-btn-primary,
.youtuo-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-height: 44px; */
  /* 1920px 下为 8px 24px，1920px 上限: 8px 24px */
  padding: clamp(6px, 0.42vw, 8px) clamp(16px, 1.25vw, 24px);
  /* 上限: 8px 24px */
  border-radius: var(--radius-sm);
  font-size: var(--nav-text-size);
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  transition: all 0.3s ease;
}

.youtuo-btn-primary {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--bg-color);
}


.youtuo-btn-primary:hover {
  background: var(--bg-color);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.youtuo-btn-outline {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.youtuo-btn-outline:hover {
  background: var(--color-primary);
  color: #ffffff;
}

.youtuo-prefix {
  position: relative;
}

.youtuo-prefix::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  aspect-ratio: 1920 / 160;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 262" fill="none"><path d="M-65 40C-65 17.9086 -47.0914 0 -25 0H1944C1966.09 0 1984 17.9086 1984 40V222C1984 244.091 1966.09 262 1944 262H1853.25C1831.16 262 1813.25 244.091 1813.25 222V219.576C1813.25 197.484 1795.34 179.576 1773.25 179.576H1697.61C1681.32 179.576 1668.11 166.368 1668.11 150.076C1668.11 133.784 1654.91 120.577 1638.61 120.577H259.043C242.751 120.577 229.544 133.784 229.544 150.076C229.544 166.368 216.336 179.576 200.044 179.576H146.284C124.192 179.576 106.284 197.484 106.284 219.576V222C106.284 244.091 88.375 262 66.2836 262H-25C-47.0914 262 -65 244.091 -65 222V40Z" fill="white"/></svg>');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom center;
  z-index: 1;
  pointer-events: none;
}

.youtuo-suffix {
  position: relative;
  overflow: visible;
  /* 修改为你容器实际背景色 */
  background: #ffffff;
}


.youtuo-suffix::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2%;
  width: 100%;
  aspect-ratio: 1920 / 160;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='882' viewBox='0 0 1920 882' fill='none'%3E%3Cpath d='M-45 31.377C-45 14.8084 -31.5685 1.37696 -15 1.37696H93.463C110.032 1.37696 123.463 14.8084 123.463 31.377V52.5001C123.463 69.0686 136.894 82.5001 153.463 82.5001H357.64C371.912 82.5001 383.482 94.07 383.482 108.342C383.482 122.614 395.052 134.184 409.324 134.184H1513.25C1527.57 134.184 1539.18 122.577 1539.18 108.258C1539.18 94.0054 1550.69 82.4254 1564.94 82.3327L1768.35 81.0109C1784.84 80.9038 1798.15 67.504 1798.15 51.0116V30.0001C1798.15 13.3125 1811.77 -0.167728 1828.46 0.00159416L1934.3 1.07564C1950.75 1.24255 1964 14.6243 1964 31.0741V851.694C1964 868.263 1950.57 881.694 1934 881.694H-15C-31.5685 881.694 -45 868.263 -45 851.694V31.377Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
  /* clip-path: inset(0 0 0% 0); */
  z-index: 1;
  pointer-events: none;
}




.youtuo-section-title {
  margin: 0;
  font-family: var(--title-font-family);
  font-size: var(--section-title-size);
  font-weight: 600;
  line-height: 1.18;
  color: var(--text-color);
}

.social-icon {
  font-size: var(--card-title-size);
  color: #ffffff;
}

/* .social-icon:hover {
  color: var(--color-primary);
} */

.youtuo-section-desc {
  margin: 0;
  font-size: var(--section-desc-size);
  line-height: 1.35;
  color: var(--color-text-muted);
}

.youtuo-slider-arrow {
  width: clamp(32px, 3.33vw, 64px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--text-color);
  background: #ffffff;
  color: var(--text-color);
  font-size: var(--slider-arrow-icon-size);
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

.youtuo-slider-arrow.is-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.youtuo-slider-arrow.is-primary:hover {
  background-color: #f9580edc;
  border-color: #f9580edc;
}

.youtuo-slider-arrow:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFF;
}

.youtuo-slider-arrow:hover * {
  transform: scale(1.15);
}

.youtuo-dot-list {
  display: inline-flex;
  align-items: center;
  gap: var(--slider-dot-gap);
}

.youtuo-dot-list span {
  width: var(--slider-dot-size);
  height: var(--slider-dot-size);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.youtuo-dot-list span.is-active {
  background: var(--color-primary);
}

.youtuo_pagination {
  margin-top: calc(var(--component-gap-md) + 8px);
}

.youtuo_pagination #pagesize {
  margin: 0;
}

.youtuo_pagination #pagesize ul {
  align-items: center;
  gap: 15px;
}

.youtuo_pagination #pagesize ul li a,
.youtuo_pagination #pagesize ul li span {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  font-family: "Poppins-Medium", "Poppins", sans-serif;
  font-size: var(--text-size-lg);
  font-weight: 500;
  line-height: 1;
  color: #121212;
  min-width: auto;
  min-height: auto;
  text-transform: capitalize;
}

.youtuo_pagination #pagesize ul li a:hover {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--color-primary) !important;
}

.youtuo_pagination #pagesize ul li a.active,
.youtuo_pagination #pagesize ul li a.is-page-number,
.youtuo_pagination #pagesize ul li span.is-page-number {
  height: clamp(24px, 2.6vw, 50px);
  aspect-ratio: 1;
  border-radius: 66.043px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.youtuo_pagination #pagesize ul li a.active {
  background: #ff5a0e;
  color: #fff !important;
}

.youtuo_pagination #pagesize ul li a.is-page-text,
.youtuo_pagination #pagesize ul li span.is-page-text {
  font-size: var(--nav-text-size);
  line-height: 1;
}

.youtuo_pagination #pagesize ul li a.disabled {
  background: transparent;
  color: rgba(18, 18, 18, 0.3);
  border: none;
}




@keyframes line-bounce {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}




@media (max-width: 1500px) {
  :root {}
}

@media (max-width: 1200px) {
  :root {
    --page-padding: calc((100vw - 1000px) / 2);
  }

  .container {
    max-width: 1000px;
  }

  .youtuo-fill {
    min-height: auto;
  }

}

@media (max-width: 768px) {
  :root {
    --page-padding: calc((100vw - 640px) / 2);
  }

  .container {
    max-width: 640px;
  }


  .youtuo_pagination #pagesize ul {
    gap: 6px;
  }




  .youtuo_pagination #pagesize ul li a,
  .youtuo_pagination #pagesize ul li span .youtuo_pagination #pagesize ul li a.is-page-text,
  .youtuo_pagination #pagesize ul li span.is-page-text {
    font-size: var(--text-size-sm);
  }
}


/* 准设计稿尺寸（1600px+） */
@media (min-width: 1600px) {
  :root {
    --page-padding: calc((100vw - 1440px) / 2);
  }

  .container {
    max-width: 1440px;
  }
}

/* 1920px设计稿满配（核心断点） */
@media (min-width: 1920px) {
  .container {
    padding: 0;
    /* 去掉内边距，精准匹配 */
    max-width: 1600px;
  }
}

@media screen and (max-width:480px) {
  :root {
    --page-padding: calc((100vw - 400px) / 2);
  }

  .container {
    max-width: 400px;
  }
}