/* General Body Styles */
body, html {
    margin: 0;
    padding: 0;
    /* 使用系统字体栈，避免依赖被墙的 Google Fonts */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
                 Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans',
                 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
                 'WenQuanYi Micro Hei', sans-serif;
    background-color: #ffffff;
    color: #000000;
    overflow-x: hidden;
}

.container {
    width: 100%;
    max-width: 1440px; /* Set a max width for the content */
    margin: 0 auto; /* Center the container */
    padding: 30px 120px; /* Add some padding on the sides */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Header Styling */
header {
    padding: 30px 0; /* Vertical padding, horizontal is in container */
    position: fixed; /* 固定在顶部，始终存在 */
    width: 100%;
    top: -30px;
    left: 0;
    z-index: 2000;
}

.logo img {
    height: 35px;
}

/* Header pill bar */
.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 24px;
    border-radius: 999px;
    box-sizing: border-box;
    /* 初始：无描边/阴影/毛玻璃，保持纯透明 */
    background: transparent;
}

/* 桌面端：左侧 Logo，右侧 导航+语言；隐藏汉堡，展现横向菜单 */
.hamburger { display: none; }
.menu-group {
  display: flex;
  align-items: center;
  gap: 40px;
  position: static; /* 仅移动端使用绝对定位下拉 */
}
.menu-group nav ul { flex-direction: row; }

/* 滚动后启用毛玻璃 + 描边 + 阴影 */
.header-bar.scrolled {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ========= 响应式：平板与手机优化 ========= */
@media (max-width: 1200px) {
  .container {
    padding: 24px 60px;
  }
  .hero {
    padding-top: 132px;
  }
  .hero h1 {
    font-size: 56px;
  }
  .features-header h3 {
    font-size: 22px;
  }
  nav ul { gap: 40px; }
}

@media (max-width: 992px) {
  /* Header 与导航紧凑化 */
  header { top: 0; }
  .header-bar { padding: 8px 14px; }
  .logo img { height: 30px; }
  nav a { font-size: 15px; }
  nav ul { gap: 22px; }
  .lang-option { font-size: 13px; }

  /* 容器与版心 */
  .container { padding: 20px 40px; }

  /* 英雄区 */
  .hero { padding-top: 120px; }
  .hero h1 { font-size: 48px; line-height: 1.2; }
  .hero .coming-soon { font-size: 22px; }
  .subtitle { font-size: 16px; }

  /* Chat 区域高度与排版 */
  .chat-widget { height: auto; }
  .chat-body { height: 50vh; margin: 0px 0px 0px 0px; }
  .chat-input-area { margin: 0 24px 24px; }
  .send-button img { width: 36px; height: 36px; }

  /* Product 滑块：每张卡更宽、更贴屏 */
  .features-slider { padding-right: 40px; margin-right: -40px; }
  .feature-slide { flex: 0 0 75vw; }
  .app-features .feature-slide { flex: 0 0 80vw; }
}

@media (max-width: 768px) {
  /* 头部三段式：左-汉堡，中-Logo，右-空（保证logo居中） */
  .header-bar { position: relative; }
  /* 调整为左侧对齐 */
  .logo { position: static; left: auto; transform: none; margin-left: 8px; }
  .logo img { height: 24px; }
  .header-right { width: 100%; justify-content: flex-end; }
  .lang-switch { display: none; }
  .hamburger { display: inline-flex; }
  .menu-group { display: none; }

  /* 汉堡菜单启用 */
  .hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;            /* 移除边框 */
    outline: none;           /* 移除焦点描边 */
    box-shadow: none;        /* 移除任何阴影边缘 */
    background: rgba(255,255,255,0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    margin-right: 12px;      /* 与右侧留出更大空间，避免被面板遮挡 */
    position: relative;      /* 提升层级控制 */
    z-index: 2201;           /* 高于菜单面板(2100) */
    cursor: pointer;
  }
  .hamburger:focus,
  .hamburger:focus-visible,
  .hamburger:hover { outline: none; box-shadow: none; border: none; }
  .hamburger .bar {
    width: 18px;
    height: 2px;
    background: #000;
    margin: 2px 0;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .hamburger.active .bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .hamburger.active .bar:nth-child(2) { opacity: 0; }
  .hamburger.active .bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

  /* 折叠导航 */
  .header-right { gap: 10px; }
  .menu-group { 
    position: absolute;
    right: 10px;
    top: calc(100% + 10px);
    display: none;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 10px 12px;
    min-width: 200px;        /* 稍微加宽，避免图标压住关闭态 */
    z-index: 2100;
  }
  .menu-group.open { display: flex; }
  .menu-group nav ul { display: flex; flex-direction: column; gap: 8px; }
  .menu-group nav a { font-size: 14px; padding: 8px 6px; }
  .menu-group .lang-switch { display: flex; align-items: center; gap: 6px; }

  /* 容器与头部 */
  .container { padding: 16px 20px; }
  /* 英雄区容器更贴边，减少左右留白 */
  .hero .container { padding-left: 32px; padding-right: 32px; }
  .header-bar { padding: 8px 10px; }
  .logo img { height: 26px; }
  nav ul { gap: 10px; }
  nav a { font-size: 14px; }

  /* 英雄区文案 */
  .hero { padding-top: 108px; }
  .hero h1 { font-size: 30px; line-height: 1; }
  .hero .coming-soon { font-size: 15px; }
  .subtitle { font-size: 12px; }

  /* Chat 手机端：左右留白更宽一些，保证可读性 */
  .chat-body { height: 66vh; margin: 0; padding: 8px 4px; }
  .chat-input-area { margin: 0; padding: 0; }
  .chat-input-container input { font-size: 14px; padding: 10px 44px 10px 12px; }
  .chat-messages { gap: 8px; padding-left: 0; }
  .message { gap: 1px; max-width: 100%; width: 100%;  }
  .message-content { padding: 10px 12px; font-size: 14px; line-height: 1.4; }
  .message-avatar { margin: 0; }
  .message-avatar img { width: 30px; height: 30px; padding: 2px; margin-left: 0; }
  .send-button { width: 32px; height: 32px; }
  .send-button img { width: 12px; height: 12px; }
  .send-button.stop-button::before { width: 8px; height: 8px; }

  /* Product tabs 与标题 */
  .product-tabs .tab-button { font-size: 18px; }
  .features-header { gap: 12px; }
  .features-header h3 { font-size: 20px; }
  .feature-nav .dot { margin-left: 8px; }

  /* 滑块卡片按屏宽显示 */
  .features-slider { 
    gap: 16px; 
    padding-right: 20px; 
    margin-right: -20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .feature-slide { flex: 0 0 calc(100vw - 48px); }
  .app-features .feature-slide { flex: 0 0 calc(100vw - 48px); }

  /* Hero statement 居中宽度控制 */
  .hero-statement h2, .hero-statement .container h2 { font-size: 28px; }

  /* Newsletter 表单与链接 */
  .newsletter-form input { width: calc(100vw - 64px); max-width: 420px; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 30px; }
  .product-tabs .tab-button { font-size: 16px; }
  .features-header h3 { font-size: 18px; }
  .app-tagline { font-size: 16px; }
  .app-detail { font-size: 16px; max-width: 100%; }
}

/* iPhone 16 Pro Max（竖屏）专项优化：约 460×1000 视口 */
@media (max-width: 460px) and (min-height: 900px) {
  :root {
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
  }

  header { top: 0; padding-top: calc(16px + var(--safe-top)); }
  .container { padding: 12px 14px; }
  .hero .container { padding-left: 6px; padding-right: 6px; }
  .header-bar { padding: 8px 12px; }
  .logo img { height: 26px; }
  nav ul { gap: 10px; }
  nav a { font-size: 14px; }
  .lang-option { font-size: 12px; }

  .hero { padding-top: calc(100px + var(--safe-top)); }
  .hero .coming-soon { font-size: 16px; }
  .hero h1 { font-size: 34px; line-height: 1.22; }
  .subtitle { font-size: 13px; }

  /* Chat 区域贴合屏幕高度，底部留安全区，白色比例更大（更靠左）*/
  .chat-body { height: 70dvh; margin: 0; padding: 0px 0px 0px 0px; }
  .chat-input-area { margin: 0 0 calc(8px + var(--safe-bottom)) 0; padding: 8px; }
  .chat-input-container input { font-size: 14px; padding: 10px 44px 10px 12px; }
  .chat-messages { gap: 6px; padding-left: 0; }
  .message { gap: 8px; max-width: 96%; }
  .message-content { padding: 0 0px; font-size: 14px; line-height: 1.4; }
  .message-avatar img { width: 30px; height: 30px; padding: 0px; margin-left: 0; }
  .send-button { width: 40px; height: 40px; }
  .send-button img { width: 12px; height: 12px; }
  .send-button.stop-button::before { width: 7px; height: 7px; }

  /* Product 滑块：卡片充满屏宽，滚动更顺滑 */
  .features-slider { gap: 14px; padding-right: 18px; margin-right: -18px; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
  .feature-slide { flex: 0 0 calc(100vw - 36px); }
  .app-features .feature-slide { flex: 0 0 calc(100vw - 36px); }
  .features-header { gap: 10px; }
  .features-header h3 { font-size: 18px; }
  .feature-nav .dot { margin-left: 8px; }

  /* Newsletter 占满宽度并留安全区（适当缩短） */
  .newsletter-form input { width: calc(100vw - 44px); max-width: 380px; }
  .newsletter-section .container { gap: 16px; }
  .newsletter-section .footer-links { gap: 16px; padding-bottom: calc(8px + var(--safe-bottom)); }
}

.header-right {
    display: flex;
    align-items: center;
    gap: 40px;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 48px;
    margin: 0;
    padding: 0;
}

nav a {
    text-decoration: none;
    color: #000;
    font-weight: 400;
    font-size: 18px;
    transition: color 0.3s;
}

nav a:hover {
    color: #54d4cd;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #F6F7FA;        /* 胶囊背景（纯色） */
    border-radius: 999px;        /* 胶囊形状 */
    padding: 4px 10px;           /* 内边距让形状更自然 */
    border: none;                /* 无边框 */
}

.lang-option {
    color: #c7c7c7;
    font-weight: 400;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.3s;
}

.lang-option.active {
    color: #54d4cd;
    font-weight: 400;
}

.lang-option:hover {
    color: #54d4cd;
}

.lang-switch span:nth-child(2) {
    color: #c7c7c7;
    font-weight: 400;
    font-size: 14px;
}

/* Hero Section */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center the content horizontally */
    justify-content: flex-start;
    min-height: 100vh;
    padding-top: 140px; /* 更靠近顶部 */
    text-align: left;
    background: linear-gradient(180deg, #ffffff 40%, #54d4cd 90%, #F6F7FA 90%); /* default bg */
    position: relative;
    box-sizing: border-box;
}

/* 打字机光标样式 */
.type-cursor {
    display: inline-block;
    width: 0.6ch;
    margin-left: 6px;
    color: #000;
    animation: cursor-blink 1s steps(1) infinite;
}

@keyframes cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.hero-content {
    flex-direction: column;
    align-items: flex-start;
}

.hero .coming-soon {
    color: #54d4cd;
    font-weight: 700;
    font-size: 25px;
    margin-bottom: 20px;
}

.hero h1 {
    font-size: 70px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0px 0;
    color: #000;
}

.hero .subtitle {
    font-size: 25px;
    font-weight: 400;
    color: #6e6e6e;
    margin-bottom: 50px;
}

.chat-link-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 40px 0;
}

.chat-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #000;
    font-weight: 500;
    transition: color 0.3s;
}

.chat-link svg {
    transform: rotate(-90deg);
}

.chat-link svg path {
    fill: #000;
}

.chat-link img.pointer-icon {
    width: 18px;
    height: auto;
    margin-top: 15px;
}

.hero .container {
    justify-content: center;
}

/* Chat Widget */
.chat-widget {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    color: #000;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    width: 100%;
    max-width: none;
    height: 700px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    text-align: left;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* 锁态下的背景虚化遮罩 */
.locked-content-blur::after {
  content: '';
  position: fixed;
  inset: 0;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  background: rgba(255,255,255,0.5);
  pointer-events: none;
  z-index: 100;
}

/* 顶部导航在锁态下禁用交互 */
body.locked nav a {
  pointer-events: none;
  opacity: 0.6;
}

/* 解锁输入面板 */
.lock-panel {
  display: none; /* 默认隐藏，锁态下显示 */
  margin-top: 24px;
  position: relative;
  z-index: 110; /* 高于虚化遮罩 */
}
.locked .lock-panel { display: block; }
.lock-card{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
}
.lock-input{
  padding: 10px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  outline: none;
  font-size: 14px;
}
.lock-input:focus{ border-color:#54d4cd; }
.lock-button{
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  background: #000;
  color: #fff;
  cursor: pointer;
}
.lock-msg{ margin-left: 8px; font-size: 13px; color: #d00; min-height: 1em; }

/* 锁态下彻底禁用复制与交互（除解锁面板） */
body.locked { -webkit-user-select: none; user-select: none; }
/* 仅从 Chat 区域开始禁用交互与虚化 */
body.locked .chat-link-wrapper,
body.locked .chat-widget,
body.locked .about-section,
body.locked .product-section,
body.locked .hero-statement,
body.locked .newsletter-section { pointer-events: none; }

body.locked .chat-link-wrapper,
body.locked .chat-widget,
body.locked .about-section,
body.locked .product-section,
body.locked .hero-statement,
body.locked .newsletter-section { position: relative; }

body.locked .chat-link-wrapper::after,
body.locked .chat-widget::after,
body.locked .about-section::after,
body.locked .product-section::after,
body.locked .hero-statement::after,
body.locked .newsletter-section::after {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  background: rgba(255,255,255,0.5);
  z-index: 100;
}
body.locked .lock-panel, body.locked .lock-panel * { pointer-events: auto; }

.chat-body {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    overflow-x: visible;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.95);
    margin: 20px 20px 0 20px;
    border-radius: 16px 16px 0 0;
}

/* 手机端覆盖桌面端 padding */
@media (max-width: 768px) {
  .chat-body {
    padding: 8px 4px !important;
    margin: 20px 20px 0 20px;
  }
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 100%;
    padding-left: 5px;
}

/* 手机端去掉 chat-messages 的左侧内边距 */
@media (max-width: 768px) {
  .chat-messages {
    padding-left: 10px !important;
    padding-top: 10px !important;
  }
}

.message {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 80%;
}

.bot-message {
    align-self: flex-start;
}

.bot-message .message-content {
    background: #F6F7FA;
    border-radius: 10px;
}

.user-message {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-avatar {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin: -2px;
}

.message-avatar img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 9px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-left: 2px; /* 离边更远一点 */
}

.user-message .message-avatar {
    display: none;
}

.message-content {
    background: #F6F7FA;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: #2a2a2a;
    word-wrap: break-word;
}

.user-message .message-content {
    background: transparent;
    color: #2a2a2a;
    border: none;
    padding: 0;
    border-radius: 0;
    font-weight: 500;
}

.chat-input-area {
    padding: 14px 20px 20px;
    border-top: none;
    background: rgba(255, 255, 255, 0.95);
    margin: 0 20px 20px;
    border-radius: 0 0 16px 16px;
}

.chat-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.chat-input-container input {
    width: 100%;
    padding: 15px 50px 15px 20px;
    border: none;
    border-radius: 25px;
    background-color: #f5f5f5;
    color: #2a2a2a;
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
}

.chat-input-container input::placeholder {
    color: rgba(42, 42, 42, 0.5);
}

.send-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.send-button:hover {
    background: rgba(0, 0, 0, 0.1);
}

.send-button.stop-button {
    background: #000000;
}

.send-button.stop-button:hover {
    background: #333333;
}

.send-button.stop-button::before {
    content: '';
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 2px;
}

.send-button img {
    width: 30px;
    height: 30px;
}

/* Scrollbar styles for chat messages */
.chat-body::-webkit-scrollbar {
    width: 6px;
}

.chat-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.chat-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.chat-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 加载指示器 */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-style: italic;
    color: #666;
}

.typing-indicator::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #666;
    animation: typing 1.4s ease-in-out infinite both;
}

@keyframes typing {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* About Section */
.about-section {
    background-color: #F6F7FA;
    padding: 20px 0 80px; /* Added more padding at the bottom */
}

.about-section .container {
    flex-direction: column;
    align-items: flex-start;
}

.about-content {
    width: 100%;
}

.tech-tag {
    color: #54d4cd;
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 25px;
}

.about-content h2 {
    font-size: 35px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.about-description {
    font-size: 20px;
    font-weight: 400;
    color: #6e6e6e;
    max-width: 800px;
    margin-bottom: 60px;
    line-height: 1.6;
}

/* Tech/About 手机端缩小字号与卡片排版 */
@media (max-width: 768px) {
  /* 标题字体缩小 */
  .hero h1 { font-size: 32px; line-height: 1.2; }
  .hero .subtitle { font-size: 16px; }
  .hero-statement h2 { font-size: 24px; line-height: 1.3; }
  .product-content h2 { font-size: 28px; }
  .newsletter h2 { font-size: 24px; }
  
  .tech-tag { font-size: 14px; }
  .about-content h2 { font-size: 22px; }
  .about-description { font-size: 14px; line-height: 1.5; }
  
  /* Tech 部分使用单列布局，卡片占满容器宽度 */
  .about-section .features-grid { 
    grid-template-columns: 1fr; 
    gap: 14px;
    justify-items: stretch; /* 网格项拉伸到整行宽度 */
  }
  .about-section .feature-card { height: 200px; padding: 18px; width: 100%; box-sizing: border-box; margin: 0; }
  .about-section .feature-card h3 { font-size: 20px; line-height: 1.25; }
  .about-section .feature-category, .about-section .feature-context { font-size: 12px; }
  
  /* 手机模式下让所有 feature 卡片占满整个容器宽度 */
  .feature-card:nth-child(1),
  .feature-card:nth-child(2),
  .feature-card:nth-child(3),
  .feature-card:nth-child(4) {
    grid-column: 1 / -1; /* 从第一列到最后一列，占满整行 */
  }

  /* Feature 滑块：一屏仅一张，图片更小并居中 */
  .features-slider { gap: 0; padding-right: 0; margin-right: 0; }
  .feature-slide, .app-features .feature-slide { flex: 0 0 100%; max-width: 100%; }
  .features-slider .feature-slide img { width: 88%; height: auto; display: block; margin: 0 auto; }
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr); /* Create a 10-column grid for flexible sizing */
    gap: 20px; /* Reduced gap */
}

.feature-card {
    background-color: #ffffff;
    padding: 35px 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 200px; /* Default height for the first row */
}

.feature-card:nth-child(1) {
    grid-column: span 4; /* 40% width */
}

.feature-card:nth-child(2) {
    grid-column: span 6; /* 60% width */
}

.feature-card:nth-child(3) {
    grid-column: span 6; /* 60% width */
    height: 200px; /* 与第1、2卡一致高度 */
}

.feature-card:nth-child(4) {
    grid-column: span 4; /* 40% width */
    height: 200px; /* 与第1、2卡一致高度 */
}

.feature-card .feature-category {
    font-size: 20px;
    font-weight: 400;
    color: #727272;
    margin: 0 0 30px 0;
}

/* Specific font size for the first card's category to prevent wrapping */
.feature-card:nth-child(1) .feature-category {
    font-size: 18px;
}

.feature-card h3 {
    font-size: 35px;
    font-weight: 700;
    color: #000;
    margin: 0 0 auto 0; /* Pushes context down */
    line-height: 1.2;
}

.feature-card .feature-context {
    font-size: 20px;
    font-weight: 400;
    color: #c7c7c7;
    margin: 0; /* Removed fixed margin-top to allow proper bottom alignment */
}

/* Product Section */
.product-section {
    background-color: #ffffff;
    padding: 20px 0;
}

.product-section .container {
    flex-direction: column;
    align-items: center; /* Center align all content within the container */
}

.product-tag {
    color: #54d4cd;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 25px;
}

.product-tabs {
    display: inline-flex;
    background-color: #f0f0f0;
    border-radius: 20px;
    padding: 5px;
    margin-bottom: 60px;
}

.tab-button {
    border: none;
    background-color: transparent;
    padding: 15px 40px; /* Increased horizontal padding for wider tabs */
    border-radius: 20px;
    font-size: 25px;
    font-weight: 400;
    color: #c7c7c7; /* Gray color for unselected tabs */
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Poppins', sans-serif;
}

.tab-button.active {
    background-color: #fff;
    color: #000; /* Black color for selected tab */
    font-weight: 700; /* Bolder weight for selected tab */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.product-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.product-intro h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 20px 0;
}

.product-intro p {
    font-size: 20px;
    font-weight: 400;
    color: #6e6e6e;
    line-height: 1.6;
    margin-bottom: 40px;
}

.product-image {
    width: 100%;
    max-width: 700px;
    margin-bottom: 20px;
}

.concept-note {
    font-size: 14px;
    color: #aaa;
}

.collar-features {
    width: 100%;
    text-align: left; /* Align left within the container */
}

.features-header {
    display: flex;
    align-items: center;
    gap: 20px; /* Add space between title and navigation */
    margin-bottom: 30px;
}

.features-header h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.feature-nav {
    display: flex;
    align-items: center;
}

.feature-nav .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 50%;
    margin-left: 10px;
    transition: all 0.3s ease; /* Smooth transition for shape and color changes */
}

.feature-nav .dot:first-child {
    margin-left: 0; /* Remove left margin from first dot */
}

.feature-nav .dot.active {
    background-color: #000;
    width: 24px; /* Wider for capsule shape */
    height: 10px; /* Keep same height */
    border-radius: 5px; /* Capsule/pill shape */
}

.features-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 24px;
    padding-bottom: 20px;
    padding-right: 120px; /* Add padding to the right to extend beyond container */
    margin-right: -120px; /* Negative margin to extend beyond container */
    -ms-overflow-style: none;
    scrollbar-width: none;
    touch-action: pan-x; /* 允许水平滑动，禁止垂直滑动 */
    -webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
}

.features-slider::-webkit-scrollbar {
    display: none;
}

.feature-slide {
    flex: 0 0 520px; /* 图片更小 */
    scroll-snap-align: start;
    background-color: #f8f9fa;
    border-radius: 20px;
    overflow: hidden;
}

.feature-slide img {
    width: 100%;
    display: block;
}

.slide-caption {
    padding: 25px;
    text-align: left;
    background-color: #fff;
}

.slide-caption h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.slide-caption p {
    font-size: 16px;
    color: #555;
    margin: 0;
}

/* Hero Statement Section */
.hero-statement {
    /* 纯色背景，去掉图片 */
    background: #F6F7FA;
    padding: 160px 0;
    text-align: center;
}


.hero-statement .statement-container { flex-direction: column; align-items: center; gap: 24px; }
.statement-logo { width: 56px; height: 56px; margin-bottom: 50px; }
.statement-title { font-size: 56px; font-weight: 800; line-height: 1.22; margin: 0; color: #111; }
.statement-title .accent { background: linear-gradient(90deg, #54d4cd 0%, #8be8a6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.statement-subtitle { margin: 0; font-size: 18px; color: #6e6e6e; }

@media (max-width: 768px) {
  .statement-title { font-size: 36px; }
  .statement-subtitle { font-size: 14px; }
  .statement-logo { width: 55px; height: 55px; }
}

/* Newsletter Section */
.newsletter-section {
    background-color: #ffffff; /* Changed to white background */
    padding: 20px 0;
    text-align: center;
}

.newsletter-section .container {
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Reduced gap between elements */
}

.newsletter-section h2 {
    font-size: 35px;
    font-weight: 700;
    margin: 0;
    color: #000;
}

.newsletter-section p {
    font-size: 20px;
    font-weight: 400;
    color: #6e6e6e;
    margin: 0;
    line-height: 1.6;
}

.newsletter-form {
    margin-top: 20px; /* Add some space above the form */
}

.newsletter-form input {
    width: 100%; /* 60% of container width */
    max-width: 800px; /* Keep max limit for very wide screens */
    padding: 15px 20px;
    border: 1px solid #fff;
    border-radius: 20px;
    font-size: 16px;
    outline: none;
    background-color: #F6F7FA;
    text-align: flex-start;
    box-sizing: border-box; /* Include padding and border in the width */
}

.newsletter-form input::placeholder {
    color: #c5c5c5;
    font-size: 15px;
    font-weight: 400;
}

.newsletter-section .footer-links {
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px; /* Add some spacing above links */
}

.newsletter-section .footer-links a {
    color: #000; /* Black text for white background */
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    color: #6e6e6e;
    transition: color 0.3s;
}

.newsletter-section .footer-links a:hover {
    color: #54d4cd;
}

.newsletter-section .social-icons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.newsletter-section .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #fff; /* Black background for social icon */
    color: #000;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.3s;
}

.newsletter-section .social-icon:hover {
    background-color: #54d4cd;
}

/* App features 特殊样式 */
.app-features {
    width: 100%;
    text-align: left;
}

.app-features .features-slider {
    padding-left: 0;
    margin-left: 0;
}

.app-features .feature-slide {
    flex: 0 0 900px; /* App 页面缩小 */
}

/* App tagline 特殊样式 */
.app-tagline {
    font-size: 20px;
    font-weight: 400;
    color: #000;
    background-clip: text;
    margin: 20px 0 30px 0;
    line-height: 1.3;
    letter-spacing: 0.3px;
}

/* App detail 特殊样式 */
.app-detail {
    font-size: 20px;
    font-weight: 400;
    color: #6e6e6e;
    line-height: 1.6;
    margin: 0;
    max-width: 800px;
    letter-spacing: 0.2px;
}