:root{
      --red:#E50914;
      --purple:#9b5de5;
      --blue:#00eaff;
      --black:#0D0D0D;
      --grey:#B3B3B3;
      --radius:14px;
      --shadow:0 4px 24px rgba(0,0,0,0.4);
     }
     
     /* Global */
     body .customise-page{
      margin:0;
      font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
      background:var(--black);
      color:#fff;
      line-height:1.6;
     }
     .customise-page .section{
      max-width:1200px;
      margin:60px auto;
      padding:0 20px;
     }
     .section h2{
      text-align:center;
      font-size:32px;
      margin-bottom:40px;
     }
     
     /* 统一的按钮样式 */
     .btn {
      display: inline-block;
      background: var(--red);
      color: #fff;
      font-weight: 600;
      text-decoration: none;
      text-align: center;
      transition: .3s;
      border: none;
      cursor: pointer;
     }
     .btn:hover {
      background: #ff1e27;
      transform: scale(1.05);
     }
     .btn-lg {
      padding: 12px 32px;
      border-radius: 40px;
     }
     .btn-md {
      padding: 10px 24px;
      border-radius: 24px;
     }
     
     /* 统一的图片悬停效果 */
     .hover-scale {
      transition: .3s;
     }
     .hover-scale:hover {
      transform: scale(1.05);
      opacity: .85;
     }
     
     /* 1. HERO BANNER with RGB border animation */
     @keyframes rgbGlow {
      0%  { box-shadow:0 0 16px var(--red); }
      25% { box-shadow:0 0 20px var(--purple); }
      50% { box-shadow:0 0 18px var(--blue); }
      75% { box-shadow:0 0 22px var(--red); }
      100% { box-shadow:0 0 18px var(--purple); }
     }
     .hero-wrapper{
      padding:20px;
     }
     .hero{
      height:70vh;
      /* 优化：添加深色后备背景色，以防图片加载失败 */
      background-color: #333; 
      background-image: url('https://uspm.aosomcdn.com/aosomweb/activity/UK/content/008-1.jpg');
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      border-radius:18px;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      animation:rgbGlow 4s infinite alternate;
     }
     .hero::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:18px;
      background:linear-gradient(90deg,rgba(0,0,0,0.7),rgba(0,0,0,0.45));
     }
     .hero-content{
      position:relative;
      z-index:2;
      max-width:640px;
      padding:0 16px;
     }
     .hero-content h1{
      font-size:48px;
      font-weight:800;
      text-transform:uppercase;
      margin-bottom:12px;
     }
     .hero-content p{
      color:var(--grey);
      font-size:17px;
      margin-bottom:20px;
     }
     
     /* 2. Pain Points */
     .pain-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:24px;
     }
     .pain-item{
      background:#1A1A1A;
      border-radius:var(--radius);
      padding:22px;
      text-align:center;
      box-shadow:var(--shadow);
     }
     .pain-item img{
      width:60px;
      margin-bottom:12px;
     }
     .pain-item h3{
      color:var(--red);
      margin-bottom:8px;
     }
     .pain-item p{
      color:#d1d5db;
      font-size:14px;
     }
     
     /* 3. Series Intro (Up image + down text) */
     .series-row{
      display:flex;
      gap:40px;
      justify-content:space-between;
      flex-wrap:wrap;
     }
     .series-col{
      width:48%;
      text-align:center;
     }
     .series-col h3{
      font-size:24px;
      margin-bottom:8px;
     }
     .series-col p{
      color:#d1d5db;
      font-size:15px;
      margin:6px 0;
     }
     .series-img{
      width:100%;
      border-radius:14px;
      box-shadow:0 4px 20px rgba(0,0,0,0.5);
      margin-bottom:18px;
     }
     .series-col ul {
      list-style: none;
      padding: 0;
      text-align: left;
      max-width: 300px; /* 限制列表宽度 */
      margin: 15px auto 25px auto;
      color: #c0c0c0;
      line-height: 2.2;
      font-size: 15px;
     }
     .series-col li {
      padding-left: 10px;
      position: relative;
     }
     
     /* 统一的产品网格 */
     .product-grid{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:20px;
      margin-top:28px;
     }
     /* 适配 Flex 布局的 .product-grid (用于 Pro Gamer 和 Lighting) */
     #pro-products .product-grid, #lighting .product-grid {
      display: grid; /* 覆盖了内联 style，强制使用 grid 方便适配 */
      grid-template-columns: repeat(5, 1fr);
     }
     .product-item{
      border-radius:14px;
      overflow:hidden;
      box-shadow:0 4px 20px rgba(0,0,0,0.5);
     }
     .product-item img{
      width:100%;
      height:auto;
      display:block;
     }
     
     /* 4. Before & After */
     .before-after{
      padding:70px 20px;
      background:#111827;
     }
     .ba-wrapper{
      max-width:900px;
      margin:0 auto;
     }
     .ba-box{
      position:relative;
      height:420px;
      border-radius:16px;
      overflow:hidden;
     }
     .ba-box img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      transition:clip-path .6s ease;
     }
     .before-img{
      clip-path:inset(0 50% 0 0);
     }
     .after-img{
      clip-path:inset(0 0 0 50%);
     }
     #ba-toggle:checked ~ .ba-box .before-img{
      clip-path:inset(0 100% 0 0);
     }
     #ba-toggle:checked ~ .ba-box .after-img{
      clip-path:inset(0 0 0 0);
     }
     
     /* 5. UGC */
     .ugc{
      padding:70px 20px 60px;
     }
     .ugc-grid{
      max-width:1200px;
      margin:0 auto;
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
      gap:20px;
     }
     .ugc-item{
      border-radius:var(--radius);
      overflow:hidden;
      box-shadow:var(--shadow);
     }
     .ugc-item img{
      width:100%;
      height:100%;
      object-fit:cover;
     }
    
     /* ======================================= */
     /* ========== 响应式设计 (Tablet) ========== */
     /* ======================================= */
     @media(max-width:900px){
      /* 产品网格 - 3列 */
      .product-grid{grid-template-columns:repeat(3,1fr);}
      #pro-products .product-grid, #lighting .product-grid {grid-template-columns: repeat(3, 1fr);}
     }
    
     /* ======================================= */
     /* ========== 响应式设计 (Mobile) ========== */
     /* ======================================= */
     @media(max-width:768px){
      /* 系列介绍堆叠 */
      .series-col{width:100%; margin-bottom: 40px;}
      .series-row { gap: 0; }
      .series-col:last-child { margin-bottom: 0; }
      .series-row { padding: 40px 20px !important; }
      
      /* Before After 标题对齐 */
      .before-after h2 { text-align: left; }
      .before-after p { text-align: left; }
     }
    
     @media(max-width:576px){
      /* 全局间距优化 */
      .customise-page .section{
       margin:40px auto;
       padding:0 15px;
      }
      .hero-wrapper{
       padding:15px;
      }
      
      /* H2 标题优化 */
      .section h2{
       font-size:26px;
       margin-bottom:25px;
      }
      
      /* Hero 优化 */
      .hero{
       height:55vh; /* 降低高度 */
      }
      .hero-content h1{
       font-size:36px; /* 降低标题字体 */
      }
      .hero-content p{
       font-size:15px; /* 降低段落字体 */
      }
      .btn-lg {
       padding: 10px 24px;
       font-size: 14px;
      }
    
      /* Pain Points 优化 */
      .pain-grid{
       gap:15px;
       /* 允许最小尺寸的 pain point 堆叠 */
       grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      }
      .pain-item{
       padding:18px;
      }
      
      /* Before & After 优化 */
      .before-after{
       padding:40px 15px;
      }
      .ba-box{
       height:300px; /* 降低高度 */
      }
      
      /* 产品网格 - 2列 */
      .product-grid{grid-template-columns:repeat(2,1fr);}
      #pro-products .product-grid, #lighting .product-grid {grid-template-columns: repeat(2, 1fr);}
     }
     
     /* 额外的手机屏幕优化 */
     @media(max-width:400px){
      /* Pain Points 强制 1 列，避免过窄 */
      .pain-grid{
       grid-template-columns:1fr;
      }
      .hero-content h1{
       font-size:32px;
      }
     }