@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,700,600|DM+Sans:400,700,800|Instrument+Serif:400,italic|Inter:var(--h2-normal-font-weight),var(--paragraph-1-normal-font-weight),400,var(--heading-2-bold-font-weight)|Urbanist:var(--body-xl-regular-font-weight)");

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

/* 主容器背景渐变 */
body > div:first-child {
  background: linear-gradient(0deg, rgba(1,1,1,1) 0%, rgba(1,1,1,1) 100%), linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%) !important;
}

/* Features section 背景色 - 直接通过ID设置 */
#features {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 导航栏背景色 - 直接通过ID设置 */
#main-header {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

/* FAQ items 背景色 */
.faq-item {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 所有inline-flex标签元素 - 通过class特征匹配 */
div[class*="inline-flex"][class*="h-"] {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Home section 背景图片 */
#home {
  background-image: url('images/background.png') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* 深紫色背景 */
.lang-menu {
  background-color: #050308 !important;
}

/* 按钮渐变背景 - 通过href匹配App Store和Google Play按钮 */
a[href*="apps.apple.com"],
a[href*="play.google.com"] {
  background: linear-gradient(180deg, rgba(209,94,255,1) 0%, rgba(135,43,255,1) 100%) !important;
}

/* 下载按钮 */
a[href="download.html"] {
  background: linear-gradient(180deg, rgba(209,94,255,1) 0%, rgba(135,43,255,1) 100%) !important;
}

/* 所有带 [background:linear-gradient] 的元素 */
[class*="\\[background:linear-gradient"] {
  background-image: linear-gradient(180deg, rgba(209,94,255,1) 0%, rgba(135,43,255,1) 100%) !important;
}
html {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  overflow-y: visible;
  height: 100%;
}

body {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  min-height: 100%;
  width: 100%;
  background-color: #000000;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}

/* 语言下拉菜单 */
.lang-menu {
  display: none;
  z-index: 40;
}

.lang-menu.is-open {
  display: block;
}

.lang-option {
  background: transparent;
  border: none;
  cursor: pointer;
}

/* FAQ 手风琴动效 */
.faq-item {
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}

.faq-item:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  border-color: rgba(245, 238, 255, 0.4);
  transform: translateY(-1px);
}

.faq-item.is-open {
  background-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  border-color: rgba(245, 238, 255, 0.7);
}

.faq-item .faq-arrow {
  transition: transform 0.25s ease, filter 0.25s ease;
}

.faq-item.is-open .faq-arrow {
  transform: rotate(90deg);
  filter: drop-shadow(0 0 8px rgba(206, 172, 255, 0.9));
}

.faq-body {
  overflow: hidden;
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
  transition:
    max-height 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.faq-item:not(.is-open) .faq-body {
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
}

/* 导航栏滚动隐藏/显示 - 使用更高优先级确保覆盖 Tailwind */
header#main-header.header-scroll-hide {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  visibility: visible;
}

/* 隐藏时使用 top 属性向上移动，避免与 transform 冲突 */
/* 移动端使用 top */
header#main-header.header-scroll-hide.hide {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  top: -120px !important;
}

/* 桌面端使用 transform，优先级更高 */
@media (min-width: 768px) {
  header#main-header.header-scroll-hide.hide {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(-120%) !important;
    top: 10px !important; /* 保持原有的 top 值 */
  }
}

/* 移除这个规则，因为它会覆盖所有背景设置 */

/* 响应式设计 - 移动端优化 */
@media (max-width: 768px) {
  /* 确保图片在小屏幕上自适应 */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* 移动端导航栏优化 */
  #main-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 1rem auto;
    width: 100% !important;
    max-width: 100% !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
  }
  
  /* 移动端section间距优化 - 强制所有section为相对定位 */
  section {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
  }
  
  /* 确保背景色不被覆盖 */
  #features {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }
  
  .bg-\[#ffffff0d\] {
    background-color: rgba(255, 255, 255, 0.05) !important;
  }
  
  /* Hero section 移动端优化 */
  #home {
    min-height: auto !important;
    padding-bottom: 3rem;
    position: relative !important;
    background-image: url('images/background.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  
  /* Features section 移动端优化 */
  #features {
    margin-top: 2rem !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
  
  /* Features section 内部元素移动端优化 */
  #features > div {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
  
  /* Stats section 移动端优化 */
  #stats {
    margin-top: 2rem !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
  
  /* Stats section 内部元素移动端优化 */
  #stats > div {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
  
  /* Stats section 移动端评分部分优化 */
  @media (max-width: 768px) {
    #stats .rating-section {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      margin-top: 2rem !important;
      margin-bottom: 1rem !important;
    }
    
    /* Stats section 移动端"Try Now"按钮优化 */
    #stats a[data-i18n-key="stats.cta"] {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      margin-top: 1.5rem !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }
  
  /* 用户统计部分（100000+ Happy Clients）移动端优化 */
  @media (max-width: 768px) {
    /* 确保包含头像和文字的容器有足够的间距 */
    .user-stats-container {
      gap: 0.75rem !important; /* 增加间距 */
      max-width: 100% !important;
    }
    
    /* 确保头像容器不收缩，有固定宽度 */
    .user-stats-container > div:first-child {
      flex-shrink: 0 !important;
      min-width: 160px !important;
      width: 160px !important;
    }
    
    /* 确保文字容器有足够空间且不重叠 */
    .user-stats-container > div:last-child {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      margin-left: 0.5rem !important;
      overflow: visible !important;
    }
    
    /* 确保"100000+"文字不换行 */
    .user-stats-container div[class*="text-lg"] {
      white-space: nowrap !important;
      overflow: visible !important;
    }
  }
  
  /* About section 移动端优化 */
  #about {
    margin-top: 2rem !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
  
  /* 确保About section内部的flex容器正常工作 */
  #about > div.flex.flex-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex: 0 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* About副标题行间距优化 */
  #about div[data-i18n-key="about.subtitle"] {
    line-height: 2 !important; /* 增加行间距，让两行之间有更多空间 */
  }
  
  @media (min-width: 768px) {
    #about div[data-i18n-key="about.subtitle"] {
      line-height: 1.75 !important; /* 桌面端也增加行间距 */
    }
  }
  
  /* FAQ section 移动端优化 */
  #faq {
    margin-top: 2rem !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }
  
  /* FAQ section 内部元素移动端优化 */
  #faq > div {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* 字体大小优化 - 确保移动端不会溢出 */
  p, div, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* Hero标题移动端字体大小限制 */
  #home p[data-i18n-key="hero.title"] {
    font-size: 1.5rem !important; /* text-2xl = 24px */
    line-height: 1.75rem !important;
    white-space: normal !important; /* 移动端允许换行 */
  }
  
  /* Hero标题桌面端保持一行 */
  @media (min-width: 1024px) {
    #home p[data-i18n-key="hero.title"] {
      white-space: nowrap !important; /* 桌面端强制一行 */
    }
  }
  
  /* Hero副标题移动端字体大小 */
  #home p[data-i18n-key="hero.subtitle"] {
    font-size: 1.25rem !important; /* text-xl = 20px */
    line-height: 1.75rem !important;
  }
  
  /* Hero描述移动端字体大小 */
  #home p[data-i18n-key="hero.desc"] {
    font-size: 1rem !important; /* text-base = 16px */
    line-height: 1.5rem !important;
  }
  
  /* Stats section 评分部分样式优化 */
  #stats .rating-section {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 298px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  @media (min-width: 768px) {
    #stats .rating-section {
      position: absolute !important;
      top: 469px !important;
      left: calc(50% - 630px) !important;
      width: 298px !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }
  
  /* 评分内部容器 */
  #stats .rating-section > div {
    display: flex !important;
    align-items: center !important;
    gap: 0.3125rem !important; /* gap-[5px] */
  }
  
  /* 评分头像容器 */
  #stats .rating-section > div > div:first-child {
    flex-shrink: 0 !important;
    width: 88px !important;
    height: 36px !important;
    position: relative !important;
  }
  
  /* 评分文字容器 */
  #stats .rating-section > div > div:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 41px !important;
    position: relative !important;
  }
  
  /* 确保评分文字不换行 */
  #stats .rating-section div[data-i18n-key="home.ratingNote"] {
    white-space: nowrap !important;
  }
  
  /* Stats section 内容容器确保在背景层之上 */
  #stats > div:last-of-type {
    z-index: 10 !important;
    position: relative !important;
  }
  
  /* Stats section "Try Now"按钮位置和样式优化 */
  #stats a[data-i18n-key="stats.cta"] {
    position: relative !important;
    margin-top: 2rem !important; /* mt-8 */
    background-color: #ffffff !important; /* 白色背景 */
    background: #ffffff !important; /* 确保背景是纯白色 */
    background-image: none !important; /* 移除任何背景图片 */
    opacity: 1 !important; /* 确保不透明 */
    z-index: 20 !important; /* 确保在背景层之上 */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 1) !important; /* 添加白色边框确保可见 */
  }
  
  @media (min-width: 768px) {
    #stats a[data-i18n-key="stats.cta"] {
      position: relative !important;
      margin-top: 2.5rem !important; /* mt-10 */
      margin-left: 0 !important;
      background-color: #ffffff !important; /* 白色背景 */
      background: #ffffff !important; /* 确保背景是纯白色 */
      background-image: none !important; /* 移除任何背景图片 */
      opacity: 1 !important; /* 确保不透明 */
      z-index: 20 !important; /* 确保在背景层之上 */
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 1) !important; /* 添加白色边框确保可见 */
    }
  }
  
  /* "Try Now"按钮文字颜色 - 紫色 */
  #stats a[data-i18n-key="stats.cta"] span {
    color: #741be6 !important; /* 确保文字是紫色 */
  }
  
  /* 其他section标题移动端字体大小限制 */
  section p[class*="text-2xl"],
  section div[class*="text-2xl"] {
    font-size: 1.5rem !important; /* text-2xl = 24px */
    line-height: 1.75rem !important;
  }
  
  section p[class*="text-xl"],
  section div[class*="text-xl"] {
    font-size: 1.125rem !important; /* text-xl = 18px */
    line-height: 1.5rem !important;
  }
  
  /* FAQ 联系信息在移动端显示 */
  #faq > p[class*="hidden"] {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    text-align: center !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* CTA section 移动端优化 */
  section[class*="mt-20"][class*="md:absolute"][class*="md:top-\\[6627px\\]"] {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 2rem !important;
  }
  
  /* CTA section 内部元素移动端优化 */
  section[class*="mt-20"][class*="md:absolute"] > div {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* CTA section 标题和副标题居中 */
  section[class*="mt-20"][class*="md:absolute"] p[data-i18n-key="cta.title"],
  section[class*="mt-20"][class*="md:absolute"] p[data-i18n-key="cta.subtitle"] {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Footer 移动端优化 */
  footer {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-top: 2rem !important;
  }
  
  /* 移动端文字可读性优化 */
  p, div {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* 隐藏可能导致横向滚动的装饰元素 */
  .absolute[aria-hidden="true"] {
    display: none !important;
  }
  
  /* 确保背景图片在移动端也显示 */
  #home {
    background-image: url('images/background.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  
  /* 防止横向滚动 - 只在body上设置滚动 */
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  html {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}

/* 平板端优化 */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 平板端section宽度优化 */
  section {
    max-width: 95%;
  }
}

/* 大屏幕优化 */
@media (min-width: 1440px) {
  /* 大屏幕上保持最大宽度 */
  .container {
    max-width: 1440px;
    margin: 0 auto;
  }
}