body {
   font-family: 'Inter', sans-serif;
   margin: 0;
   background-color: #FAFBFC;
   color: #222;
   line-height: 1.6;
  }

  /* ===== HERO ===== */
  .hero {
   position: relative;
   width: 100%;
   /* 调整高度以更好地适应移动端 */
   height: 85vh; /* 保持PC端高度 */
   background: url('https://aosom-us-product-media.s3.dualstack.us-east-1.amazonaws.com/aosomweb/activity/UK/content/005-5.png') center/cover no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: #fff;
  }
  .hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0,0,0,0.35);
  }
  .hero-content {
   position: relative;
   z-index: 2;
   max-width: 700px;
   padding: 0 20px;
  }
  .hero-content h1 {
   font-size: 48px; /* PC端字体大小 */
   font-weight: 700;
   margin-bottom: 15px;
  }
  .hero-content p {
   font-size: 18px;
   margin-bottom: 25px;
   color: #f2f2f2;
  }
  .hero-content a {
   display: inline-block;
   background-color: #FF914D;
   color: #fff;
   padding: 12px 30px;
   border-radius: 30px;
   text-decoration: none;
   font-weight: 600;
   transition: all 0.3s ease;
  }
  .hero-content a:hover {background-color:#ff7a24;}

  /* ===== GENERIC SECTION ===== */
  .section {
   padding: 60px 20px;
   max-width: 1200px;
   margin: auto;
  }

  /* ===== PAIN POINTS (Grid 布局已具备响应性) ===== */
  .pain-points {
   /* auto-fit 和 minmax 确保了在小屏下会自动换行和填满空间 */
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
   gap: 25px;
   text-align: center;
  }
  .pain-item img {width:100%; border-radius:12px;}
  .pain-item h3 {margin:15px 0 5px; color:#FF914D; font-weight:600;}
  .pain-item p {font-size:15px; color:#555;}

  /* ===== PRODUCTS ===== */
  .product-section {max-width:1200px; margin:60px auto; padding:0 20px;}
  .product-section-title {text-align:center; margin-bottom:60px;}
  .product-section-title h2 {font-size:32px; color:#222; margin-bottom:10px;}
  .product-section-title p {font-size:16px; color:#555;}
  .product-block {
   /* flex-wrap:wrap; 配合媒体查询实现堆叠 */
   display:flex; align-items:center; justify-content:space-between;
   margin-bottom:70px; gap:40px; flex-wrap:wrap;
  }
  .product-block:nth-child(even){flex-direction:row-reverse;}
  .product-block img {
   width:48%; border-radius:14px; box-shadow:0 4px 12px rgba(0,0,0,0.05);
  }
  .product-text {width:48%;}
  .product-text h3 {font-size:26px; color:#222; margin-bottom:15px;}
  .product-text ul {
   margin:0; padding-left:18px; color:#555; line-height:1.6; font-size:15px;
  }
  .product-text ul li {margin-bottom:6px;}
  .product-text p {margin-top:10px; font-weight:600; color:#FF914D;}
  .shop-btn {
   display:inline-block; margin-top:15px; background-color:#FF914D;
   color:#fff; padding:10px 25px; border-radius:25px;
   text-decoration:none; font-weight:600; transition:all .3s ease;
  }
  .shop-btn:hover {background-color:#ff7a24;}

  /* ===== VIDEO SECTION (Grid 布局已具备响应性) ===== */
  .video-section {text-align:center; margin-top:80px; padding:0 20px;}
  .video-section h2 {font-size:28px; color:#222; margin-bottom:10px;}
  .video-section p {max-width:700px; margin:0 auto 40px; color:#555; font-size:16px;}
  .video-grid {
   display:grid;
   /* auto-fit 保证了在小屏下每个视频项独占一行 */
   grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
   gap:25px; justify-items:center;
  }
  .video-grid iframe {
   /* 使用 100% 宽度和固定的长宽比确保视频适应父容器 */
   width:100%; max-width:360px; aspect-ratio:9/16;
   border-radius:16px; border:none;
   box-shadow:0 4px 12px rgba(0,0,0,0.08);
  }

  /* ===== CTA (IMAGE + TEXT OVERLAY) ===== */
  .cta-wrapper {
   display:flex; align-items:center; justify-content:center;
   position:relative; max-width:1100px; margin:100px auto;
   padding: 0 20px; /* 添加内边距以避免贴边 */
   flex-wrap:wrap;
  }
  .cta-text {
   background:linear-gradient(135deg,#FFB36B,#FF914D);
   color:#fff; padding:60px 50px; border-radius:18px;
   flex:1 1 480px; z-index:1; position:relative;
   box-shadow:0 8px 24px rgba(0,0,0,0.1);
  }
  .cta-text h2 {font-size:32px; margin-bottom:12px;}
  .cta-text p {font-size:17px; opacity:0.9; margin-bottom:25px; max-width:400px;}
  .cta-text a {
   background:#fff; color:#FF914D; padding:12px 36px; border-radius:30px;
   text-decoration:none; font-weight:700; font-size:16px;
   box-shadow:0 4px 10px rgba(255,255,255,0.3);
   transition:all 0.3s ease; display:inline-block;
  }
  .cta-text a:hover {background:#f8f8f8; color:#e36f18;}
  .cta-image {
   flex:1 1 420px; position:relative; margin-left:-100px; /* PC端重叠效果 */
  }
  .cta-image img {
   width:100%; border-radius:20px;
   box-shadow:0 10px 25px rgba(0,0,0,0.15);
   position:relative; z-index:2;
  }

  /* ===== 媒体查询：大平板和中型 PC (Max-Width: 900px) ===== */
  /* 保持现有逻辑：CTA 堆叠 */
  @media(max-width:900px){
   .cta-wrapper{flex-direction:column;}
   .cta-image{margin-left:0;margin-top:-40px;}
   .cta-image img{width:90%;max-width:400px;margin:0 auto;display:block;}
   .cta-text{text-align:center; padding: 40px 30px;} /* 减少内边距 */
   .cta-text p{max-width:none;}
   .cta-wrapper{margin: 80px auto;} /* 减少上下边距 */
   .product-section-title {margin-bottom: 40px;} /* 减少产品标题下边距 */
  }
  
  /* ===== 媒体查询：小型平板和移动设备 (Max-Width: 768px) ===== */
  /* 保持现有逻辑：产品块堆叠 */
  @media(max-width:768px){
   .hero{height:60vh;} /* 减少英雄区高度 */
   .hero-content h1{font-size:30px;} /* 进一步减少标题大小 */
   .hero-content p{font-size:16px;}
   
   .section{padding: 40px 15px;} /* 减少整体内边距 */
   
   .product-block{
    flex-direction:column !important;
    text-align:center;
    margin-bottom:50px; /* 减少产品块间距 */
    gap: 20px;
   }
   .product-block img,.product-text{width:100%;}
   .product-text {padding: 0 10px;} /* 给文字区添加内边距 */
   .product-text ul{text-align:left; padding-left: 20px;}
   .product-text h3 {font-size: 24px;}
   
   .video-grid{grid-template-columns:1fr;}
   .video-grid iframe{max-width:100%;aspect-ratio:9/16;}
   .video-section {margin-top: 60px;} /* 减少视频区上边距 */
   .video-section h2 {font-size: 24px;}
   
   .cta-text h2{font-size: 26px;} /* 调整 CTA 标题大小 */
   .cta-wrapper{margin: 60px auto;} /* 减少 CTA 区上下边距 */

  }
  
  /* ===== 媒体查询：超小型移动设备 (Max-Width: 480px) ===== */
  @media(max-width:480px){
   .hero-content h1{font-size:28px;}
   .hero-content p{font-size:15px;}
   .hero-content a{padding: 10px 20px;} /* 调整按钮大小 */

   .pain-points {grid-template-columns:1fr;} /* 痛点区改为单列堆叠 */
   
   .product-section-title h2 {font-size: 26px;}
   
   .cta-text{padding: 30px 20px;} /* 进一步减少 CTA 内边距 */
  }