@charset "UTF-8";

/* =========================================
   1. Variables & Reset
   ========================================= */
:root {
  /* Colors */
  --color-primary: #d8a96f;
  --color-text-main: #1f1f1f;
  --color-text-light: rgba(255, 255, 255, 0.9);
  --color-text-white: #ffffff;
  --color-bg-body: #ffffff;
  --color-bg-tag: #fff9f0;
  --color-bg-tag-active: #eca458;
  --color-bg-reviews: rgba(216, 169, 111, 0.05);
  
  /* Fonts */
  --font-family-base: "Swei Spring CJK TC Regular", sans-serif;
  --font-family-medium: "Swei Spring CJK TC Medium", sans-serif;
  --font-family-bold: "Swei Spring CJK TC Bold", sans-serif;
  
  /* Layout */
  --max-width: 1280px;
  --header-height: 100px;
  --border-radius-lg: 32px;
  --border-radius-btn: 100px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: var(--font-family-base);
  color: var(--color-text-main);
  background-color: var(--color-bg-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  scroll-behavior: smooth;
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
  display: block;
}

/* =========================================
   2. Layout & Typography
   ========================================= */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

section {
  position: relative;
  width: 100%;
}

/* =========================================
   3. Header
   ========================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease, height 0.3s ease;
  padding: 20px;
}

.site-header.scrolled {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  height: 80px;
}

.site-header.scrolled .header-logo {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.social-links {
  display: flex;
  gap: 8px;
}

.social-icon {
  width: 50px;
  height: 36px;
  background: white;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icon img {
  width: 24px;
  height: 24px;
}

.main-nav {
  display: flex;
  gap: 20px;
  margin-left: 20px;
}

.nav-link {
  font-family: var(--font-family-bold);
  font-size: 16px;
  color: var(--color-text-light);
  padding: 8px 12px;
  white-space: nowrap;
}

.header-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.logo-icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  overflow: hidden;
}

.logo-text {
  font-family: var(--font-family-bold);
  font-size: 28px;
  color: white;
  letter-spacing: 1.12px;
  line-height: 1;
}

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  flex: 1;
}

/* =========================================
   4. Hero Section
   ========================================= */
.hero-section {
  position: relative;
  /* 不强制占满整屏：露出下一板块一点点，引导用户滚动 */
  min-height: 75vh;
  min-height: 75dvh;
  display: flex;
  /* 让 hero-content 从底部向上固定距离 */
  align-items: flex-end;
  justify-content: center;
  background: url("../imgs/bg/bgv3.webp") lightgray 50% / cover no-repeat;
  background-attachment: fixed;
  padding-top: 100px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: var(--max-width);
  width: 100%;
  padding: 0 20px;
  /* PC：距离容器底部固定 140px */
  margin-bottom: 140px;
}

.hero-title-group {
  margin-bottom: 40px;
}

.hero-title-main {
  font-family: var(--font-family-bold);
  font-size: 56px;
  color: #fffefd;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  height: 53px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 244 53' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M11.0684 17.181C7.49543 17.8432 4.34726 19.8978 2.32069 22.9143C0.293868 25.9296 -0.445339 29.6598 0.261464 33.2628C0.968267 36.8658 3.06197 40.0402 6.07776 42.0663C9.09379 44.0936 12.7849 44.8065 16.3432 44.0697C16.3432 44.0697 16.3432 44.0697 16.3432 44.0697C20.4341 43.2233 24.525 42.3768 28.6158 41.5304C53.761 36.3276 78.9062 31.1247 104.051 25.9219C103.322 26.0768 101.852 25.9832 100.722 25.3667C99.5742 24.7654 98.864 23.922 98.455 23.0551C98.0501 22.1858 97.8586 21.1129 98.1148 19.8669C98.3483 18.6256 99.1862 17.4594 99.7473 17.0287C93.0646 22.2823 90.8948 34.0843 95.2156 41.392C98.7601 49.1093 109.637 54.0187 117.68 51.547C152.758 42.6833 187.837 33.8196 222.916 24.9559C226.966 23.9325 231.017 22.9091 235.067 21.8857C237.895 21.1705 240.333 19.349 241.849 16.839C243.364 14.3279 243.833 11.3339 243.147 8.49854C242.462 5.66317 240.678 3.21377 238.183 1.67207C235.688 0.131365 232.687 -0.375389 229.844 0.280388C229.844 0.280388 229.844 0.280388 229.844 0.280388C225.774 1.21998 221.703 2.15957 217.633 3.09917C182.379 11.2369 147.124 19.3747 111.87 27.5125C112.494 27.3132 113.917 27.2986 115.045 27.8316C116.191 28.3483 116.917 29.1173 117.357 29.9252C117.793 30.7353 118.045 31.776 117.836 33.0403C117.65 34.2997 116.829 35.5087 116.298 35.9558C131.854 23.9603 118.389 -3.96826 99.1325 0.847318C73.8853 5.53006 48.638 10.2128 23.3908 14.8955C19.2833 15.6574 15.1759 16.4192 11.0684 17.181Z' fill='%23D8A96F'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* 让 SVG 背景按容器宽度铺满，不再受 SVG 自带 width/height 影响 */
  background-size: 100% 100%;
  background-position: center;
  width: fit-content;
}

.hero-subtitle-text {
  font-family: var(--font-family-bold);
  font-size: 36px;
  color: white;
  padding-bottom: 5px; /* Adjust slightly if text needs to center optically on the squiggle */
}

.download-buttons {
  display: flex;
  gap: 16px;
}

.btn-download {
  height: 64px;
  background: white;
  border-radius: var(--border-radius-btn);
  display: flex;
  align-items: center;
  padding: 10px 40px 10px 20px;
  gap: 10px;
  color: #1a1a1a;
  font-weight: 500;
  font-size: 18px;
  transition: transform 0.2s;
}

.btn-download > span {
  /* iOS/Android 下载文案：使用系统黑体（不使用项目内字体） */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC",
    "Noto Sans CJK TC", "Source Han Sans SC", sans-serif;
  white-space: nowrap;
}

.btn-download:hover {
  transform: translateY(-2px);
}

.btn-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon img {
  width: 28px;
  height: auto;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
  z-index: 10;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.scroll-indicator.hidden {
  opacity: 0;
  visibility: hidden;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* =========================================
   5. Values Section
   ========================================= */
.values-section {
  background-color: white;
  padding: 80px 0;
}

.section-tag {
  color: var(--color-primary);
  font-family: var(--font-family-base);
  font-size: 20px;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-weight: 500;
}

.section-title {
  font-family: var(--font-family-bold);
  font-size: 32px;
  color: var(--color-text-main);
  line-height: 1.5;
  margin-bottom: 20px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.value-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.value-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.value-content h3 {
  font-family: var(--font-family-bold);
  font-size: 26px;
  margin-bottom: 10px;
  line-height: 1.2;
}

.value-content p {
  font-size: 18px;
  color: var(--color-text-main);
  opacity: 0.8;
}

/* =========================================
   6. Features Section
   ========================================= */
.features-section {
  background: linear-gradient(90deg, rgba(216, 169, 111, 0.05) 0%, rgba(216, 169, 111, 0.05) 100%), linear-gradient(90deg, #ffffff 0%, #ffffff 100%);
  padding: 80px 0;
}

.features-content {
  flex: 0 0 670px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 20px 0;
}

.features-container {
  display: flex;
  align-items: center;
  gap: 64px; /* Figma: 左右间距 64 */
}

/* Figma: 左侧为一个整体列（标题 + 文案列表） */
.features-left {
  flex: 0 0 670px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.features-image {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 546px;
  padding: 0 40px;
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: center;
}

.feature-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.feature-text h3 {
  font-family: var(--font-family-bold);
  font-size: 32px;
  letter-spacing: 0.37px;
  margin-bottom: 4px;
  line-height: 1.5;
}

.feature-text p {
  font-size: 18px;
  color: var(--color-text-main);
  opacity: 0.8;
  line-height: 1.5;
}

/* Features Carousel */
.features-carousel {
  width: 100%;
  max-width: 393px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.carousel-viewport {
  /* 简单自适应：保持比例、可缩放且居中 */
  width: min(393px, 90vw);
  max-width: 100%;
  height: auto;
  aspect-ratio: 393 / 851;
  overflow: hidden;
  border-radius: 40px;
  box-shadow: none;
  background: #fff;
  touch-action: pan-y;
}

.carousel-track {
  height: 100%;
  display: flex;
  transform: translateX(0);
  transition: transform 400ms ease;
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  height: 100%;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.carousel-dots {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 17px;
  background: var(--color-primary);
  opacity: 0.3;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.carousel-dot.is-active {
  opacity: 1;
}

.carousel-dot:focus-visible {
  outline: 2px solid rgba(216, 169, 111, 0.6);
  outline-offset: 4px;
}

/* =========================================
   7. Reviews Section
   ========================================= */
.reviews-section {
  background: white;
  padding: 80px 0;
  /* 只裁切本区块的横向溢出，避免通栏滚动实现导致整页出现横向滚动条 */
  overflow-x: clip;
}

@supports not (overflow: clip) {
  .reviews-section {
    overflow-x: hidden;
  }
}

.reviews-scroll-container {
  width: 100vw;
  /* 让滚动区域通栏，但不影响标题等其它内容仍在 .container 内 */
  margin-left: calc(50% - 50vw);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  /* 滚动条隐藏后，给卡片阴影/交互留出呼吸空间 */
  padding-bottom: 40px;
}

.reviews-grid {
  display: inline-flex;
  min-width: 100%;
  gap: 30px;
  /* 左侧对齐到 .container 的内容边界，右侧允许“溢出”到屏幕边缘 */
  padding-left: max(20px, calc((100vw - var(--max-width)) / 2 + 20px));
  /* 滚到最右侧时，尾部留白与容器右侧对齐，避免最后一张贴屏幕边缘 */
  padding-right: max(20px, calc((100vw - var(--max-width)) / 2 + 20px));
}

/* Hide scrollbar for clean look */
.reviews-scroll-container::-webkit-scrollbar {
  display: none;
}
.reviews-scroll-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.review-card {
  display: flex;
  min-width: 630px; /* Fixed width from Figma */
  border-radius: 20px;
  overflow: hidden;
}

.review-photo {
  width: 320px;
  height: 400px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.verified-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  background: transparent;
  border-radius: 0;
  display: block;
  box-shadow: none;
}

.verified-badge img {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}

.review-content {
  flex: 1;
  background: var(--color-bg-reviews);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14.4px;
}

.quote-icon {
  width: 40px;
  height: 40px;
  background: url("../imgs/icons/yinhao.png") center / contain no-repeat;
  opacity: 0.2;
}

.review-text {
  font-family: var(--font-family-medium); /* SemiBold */
  font-size: 22px;
  line-height: 1.4;
  color: rgba(0,0,0,0.8);
  flex: 1;
}

.reviewer-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.reviewer-location {
  font-size: 14px;
  color: #8c7b75;
}

.reviewer-name {
  font-family: var(--font-family-bold);
  font-size: 16px;
  color: var(--color-text-main);
}

/* =========================================
   8. Team & Blog Section
   ========================================= */
.team-section {
  background: linear-gradient(
      90deg,
      rgba(216, 169, 111, 0.05) 0%,
      rgba(216, 169, 111, 0.05) 100%
    ),
    #ffffff;
  padding: 80px 0;
}

.team-section .container {
  padding: 0 20px;
}

.team-section .section-tag {
  margin-bottom: 0; /* Use layout gaps to match Figma spacing precisely */
}

.team-inner {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.team-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px; /* Figma gap 40 between content and CTA */
}

.team-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Figma: header blocks */
}

.team-brand {
  display: flex;
  align-items: center;
  gap: 10px; /* Figma gap 10 */
}

.team-brand-icon {
  width: 49px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-brand-icon svg {
  width: 49px;
  height: 56px;
  display: block;
}

.team-brand-icon img {
  width: 49px;
  height: 56px;
  display: block;
  object-fit: contain;
}

.team-brand-name {
  font-size: 32px; /* Figma: 32 */
  font-family: var(--font-family-bold);
  color: var(--color-text-main);
  letter-spacing: 0.37px;
  line-height: 1.5;
}

.team-quote {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Figma: quote icon to text */
}

.team-quote-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.team-quote-icon svg {
  display: block;
  width: 24px;
  height: 13px;
}

.team-quote-icon img {
  display: block;
  width: 23.558px; /* Figma asset inner size */
  height: 12.25px;
}

.team-desc {
  font-family: var(--font-family-bold);
  font-size: 24px; /* Figma: 24 */
  line-height: 1.5;
  color: var(--color-text-main);
  letter-spacing: 0.37px;
  margin: 0;
  white-space: normal;
}

.team-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 19px 33px; /* Figma px 33 py 19 */
  border-radius: 9999px;
  background: var(--color-primary);
  color: #fffefd;
  font-family: var(--font-family-bold);
  font-size: 16px;
  border: 1px solid transparent;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.team-cta:hover {
  transform: translateY(-1px);
}

.blog-section {
  padding: 80px 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.blog-card-link {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.blog-image {
  width: 100%;
  height: 360px;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
}

.blog-content h3 {
  font-size: 20px;
  font-family: var(--font-family-bold);
  margin-bottom: 5px;
}

.blog-meta {
  font-size: 14px;
  color: #666;
}

/* =========================================
   9. Footer (New Design)
   ========================================= */
.site-footer {
  background: #1f1f1f;
  padding: 40px 0 20px 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.footer-container {
  width: 100%;
  max-width: 1280px;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Top Section: Brand + Links */
.footer-top-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
}

/* Brand Column */
.footer-brand-col {
  width: 520px;
  flex-shrink: 0;
}

.footer-brand-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.footer-logo-wrapper {
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.logo-mask-container {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-logo-svg {
  width: 49px;
  height: 56px;
  display: block;
  /* Gold color filter for #d8a96f */
  filter: invert(76%) sepia(34%) saturate(632%) hue-rotate(348deg) brightness(91%) contrast(89%);
}

.footer-brand-name {
  font-family: var(--font-family-bold);
  font-size: 36px;
  color: #d8a96f;
  letter-spacing: 0.07px;
  line-height: 32px;
}

/* Nav Columns */
.footer-nav-cols {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex: 1;
}

.footer-nav-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 200px;
}

.footer-nav-group.contact-group {
  flex: 1;
}

.footer-nav-title {
  font-family: var(--font-family-bold);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.07px;
  line-height: 32px;
}

.footer-nav-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-nav-links a {
  font-family: "SF Pro Display", sans-serif;
  font-size: 14px;
  color: #ffffff;
  line-height: normal;
  letter-spacing: -0.15px;
  transition: opacity 0.2s;
  display: block;
}

.footer-nav-links a:hover {
  opacity: 0.8;
}

.contact-link a {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  width: max-content;
}

.contact-label {
  white-space: nowrap;
}

.contact-email {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

/* Bottom Section */
.footer-bottom-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 20px;
}

.footer-legal-links {
  display: flex;
  gap: 24px;
}

.footer-legal-links a {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: -0.15px;
  line-height: 20px;
}

.footer-copyright {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: -0.15px;
  line-height: 20px;
}


/* =========================================
   Media Queries (Responsive)
   ========================================= */
@media (max-width: 1024px) {
  .hero-content {
    margin-left: 0;
    align-items: center;
    text-align: center;
  }
  
  .hero-title-main {
    align-items: center;
  }
  
  .header-inner {
    padding: 0 20px;
  }
  
  .main-nav, .header-right {
    display: none;
  }

  .features-image {
    padding: 0;
  }
  
  .review-card {
    min-width: 300px;
    flex-direction: column;
  }
  
  .review-photo {
    width: 100%;
    height: 300px;
  }

  /* Team (tablet) */
  .team-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Footer Tablet */
  .footer-top-section {
    flex-direction: column;
    gap: 40px;
  }
  .footer-brand-col {
    width: 100%;
  }
  .footer-nav-cols {
    width: 100%;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: flex-start;
  }
  .footer-nav-group {
    min-width: 45%;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 80px;
  }

  /* Header Mobile */
  .site-header {
    height: auto;
    padding: 20px 0 0;
    position: absolute;
    background: transparent !important;
  }

  .header-inner {
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
  }

  .header-left {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    order: unset;
  }
  
  .social-links {
    display: flex;
  }

  .social-icon {
    width: 36px;
    height: 36px;
    border-radius: 26px;
  }
  
  .main-nav {
    display: none;
  }
  
  .header-logo {
    position: static;
    transform: none;
    order: unset;
    margin-bottom: 0;
  }

  
  .header-right {
    display: none;
  }

  /* Hero Mobile */
  .hero-section {
    background-image: url("../imgs/bg/bgv3-m.webp");
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    /* 移动端：hero-content 距离容器底部固定 100px */
    align-items: flex-end;
    /* 移动端同样不要 100vh 满屏，留一点下一板块露出 */
    min-height: 60vh;
    min-height: 60dvh;
    padding: 196px 20px 0;
  }

  .scroll-indicator {
    display: none;
  }

  .hero-content {
    padding: 0;
    align-items: center;
    margin-left: 0;
    gap: 40px;
    width: 100%;
    max-width: 353px;
    margin-bottom: 100px;
  }

  .hero-title-group {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .hero-title-main {
    font-size: 32px;
    align-items: center;
    text-align: center;
  }

  .hero-subtitle {
    margin-top: 0;
    height: 24px;
    background-size: 100% 100%;
  }

  .hero-subtitle-text {
    font-size: 24px;
    padding-bottom: 0;
  }
  
  /* .hero-subtitle::before {
    width: 140px;
  } */

  .download-buttons {
    flex-direction: row;
    width: 100%;
    justify-content: center;
    gap: 16px;
  }
  
  .btn-download {
    height: 44px;
    padding: 6.875px 27.5px 6.875px 13.75px;
    gap: 6.875px;
    font-size: 12.375px;
    line-height: 19.25px;
    flex: 1;
    justify-content: center;
  }
  
  .btn-icon {
    width: 30px;
    height: 30px;
  }
  
  .btn-icon img {
    width: 20px;
  }

  /* Values Mobile */
  .values-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .values-section {
    padding: 40px 0;
  }

  /* Features Mobile */
  .features-section {
    padding: 40px 0;
  }

  /* 移动端：整体改为竖排，图片自然在下面 */
  .features-container {
    flex-direction: column;
    gap: 40px;
  }
  
  .features-left {
    flex: none;
    width: 100%;
  }

  .features-image {
    flex: none;
    width: 100%;
    padding: 0;
  }

  /* 移动端竖版：features-content 不要 padding-top */
  .features-content {
    padding-top: 0;
  }
  
  .features-list {
    gap: 30px;
  }

  /* Reviews Mobile */
  .reviews-section {
    padding: 40px 0;
  }

  /* 移动端不做通栏横向滚动：保持在 container 内堆叠展示 */
  .reviews-scroll-container {
    width: 100%;
    margin-left: 0;
    overflow-x: visible;
    /* 移动端竖版：不要底部 padding */
    padding-bottom: 0;
  }
  
  .reviews-grid {
    flex-direction: column;
    overflow-x: visible;
    padding-left: 0;
    padding-right: 0;
  }
  
  .review-card {
    min-width: auto;
    width: 100%;
  }

  /* Team (mobile) */
  .team-section {
    padding: 40px 0;
  }

  /* Blog Mobile */
  .blog-section {
    padding: 40px 0;
  }
  .team-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .team-brand-name {
    font-size: 28px;
  }
  .team-desc {
    font-size: 20px;
  }

  /* Blog Mobile */
  .blog-grid {
    grid-template-columns: 1fr;
  }

  /* Footer Mobile */
  .footer-nav-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    row-gap: 40px;
  }
  .footer-nav-group {
    width: auto;
    min-width: 0;
  }
  .footer-nav-group.contact-group {
    grid-column: 1 / -1;
  }
  .footer-bottom-section {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  .footer-legal-links {
    justify-content: center;
  }
  .footer-copyright {
    text-align: center;
  }
  .contact-link a {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
  }
}