@charset "UTF-8";
	 	html,body {
	 	height:100%;
	 	margin:0;
	 	padding:0
	 }
	 /* 底部结束 */
	 .copyright{text-align: center; font-size: 13px; color: #9ca3af; padding: 30px 0px; border-top: 1px solid #ddd;}
	 .base {
	 	--b-bg:#ebf5fd;
	 	--b-bg1:#ffffff;
	 	--b-text:#000000;
	 	--b-text1:#4f4f4f;
	 	--b-text3:#262626;
	 	--b-text4:#595959;
	 	--b-text5:#7f7f7f;
	 	--b-text6:#262626;
	 	--b-text7:#888888;
	 	--b-nav-bg1:#f0fdfa;
	 	--b-nav-color1:#14b8a6;
	 	--b-button-text:#333333;
	 	--b-button-bor:#262626;
	 	--b-login-bg-start:rgba(245,245,245,0);
	 	--b-login-bg-end:rgba(245,245,245,1)
	 }
	 .dark {
	 	--b-bg:#000000;
	 	--b-bg1:#1a1a1a;
	 	--b-text:#ffffff;
	 	--b-text1:#c9cacc;
	 	--b-text3:#ffffff;
	 	--b-text4:#c9cacc;
	 	--b-text5:#94969a;
	 	--b-text6:#e0e0e2;
	 	--b-text7:#b4b5b8;
	 	--b-nav-bg1:#0f1e25;
	 	--b-nav-color1:#14b8a6;
	 	--b-button-text:#ffffff;
	 	--b-button-bor:#dfe0e1;
	 	--b-login-bg-start:rgba(0,0,0,0);
	 	--b-login-bg-end:rgba(0,0,0,1)
	 }
	 body {
	 	margin:0;
	 	padding:0;
	 	background:var(--b-bg);
	 	color:var(--b-color);
	 	font-family:SF Pro Display,Roboto,Noto,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif
	 }
	 body a {text-decoration: none; color: #000;}
	 html {
	 	box-sizing:border-box;
	 	font-family:SF Pro Display,Roboto,Noto,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif
	 }
	 input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
	 	-webkit-appearance:none
	 }
	 input[type=number] {
	 	-moz-appearance:textfield
	 }
	 input,select {
	 	background:transparent;
	 	border:0;
	 	outline:none;
	 	appearance:none;
	 	-moz-appearance:none;
	 	-webkit-appearance:none
	 }
	 select::-ms-expand {
	 	display:none
	 }
	 #canvas:where(.astro-SLVZHL3X) {
	 	height:100vh;
	 	width:100%
	 }
	 @media (max-width:1024px) {
	 	#canvas:where(.astro-SLVZHL3X) {
	 	height:70vh;
	 	width:100%
	 }
	 }.width:where(.astro-J7PV25F6) {
	 	max-width:1280px;
	 	margin:0 auto;
	 	padding:0 20px
	 }
	 .page:where(.astro-J7PV25F6) {
	 	 
	 }
	 .btna a{
		 text-decoration: none;
	 }
	  /* banner开始 */
	  /* banner hero */
	  .topbanner {
	    flex: 1;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    padding: 60px 20px 0px;
	    text-align: center; 
	  }
	  .hero-title {
	    font-size: 4rem;
	    font-weight: 900;
	    color: #1a1a1a;
	    max-width: 900px;
	    margin-bottom: 30px;
	    line-height: 1.1;
	    margin-top: 50px;
	  }
	  .hero-subtitle {
	    font-size: 1.125rem;
	    color: #555;
	    max-width: 700px;
	    margin-bottom: 60px;
		margin-top: 40px;
	    font-weight: 400;
		margin-left: 40px;
	  }
	  .hero-buttons {
	    display: flex;
	    gap: 20px;
	    justify-content: center;
	    margin-bottom: 100px;
	    flex-wrap: wrap;
	    margin-top: 26px;
	  }
	  .hero-buttons a{text-decoration: none;}
	  
	  .btn-primary {
	    background: linear-gradient(90deg, #4a7fff, #7a4aff);
	    color: white;
	    border: none;
	    padding: 20px 66px;
	    border-radius: 30px;
	    font-weight: 700;
	    font-size: 1rem;
	    cursor: pointer;
	    transition: background 0.3s ease;
	    white-space: nowrap;
	  }
	  .btn-primary:hover {
	    background: linear-gradient(90deg, #3b6fff, #6a3aff);
	  }
	  .btn-secondary {
	    background: #3a7bff;
	    color: white;
	    border: none;
	    padding: 20px 66px;
	    border-radius: 30px;
	    font-weight: 700;
	    font-size: 1rem;
	    cursor: pointer;
	    white-space: nowrap;
	    transition: background 0.3s ease;
	  }
	  .btn-secondary:hover {
	    background: #333;
	  }
	  
	  /* Mascot section */
	  .mascot-section {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    gap: 40px;
	    max-width: 900px;
	    width: 100%;
	    flex-wrap: wrap;
	    text-align: left;
	  }
	  .mascot-image {
	    flex-shrink: 0;
	    width: 160px;
	    height: 160px;
	    border-radius: 50%;
	    background: #f0f4ff;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    overflow: hidden;
	    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	  }
	  .mascot-image img {
	    width: 100%;
	    height: 100%;
	    object-fit: contain;
	  }
	  .mascot-text {
	    flex: 1;
	    max-width: 600px;
	  }
	  .mascot-text h2 {
	    font-size: 2rem;
	    font-weight: 900;
	    margin-bottom: 12px;
	    color: #000;
	  }
	  .mascot-text p {
	    font-size: 1.125rem;
	    color: #555;
	    font-weight: 400;
	    line-height: 1.4;
	  }
	  
	  
	  /* banner结束 */ 
	  
	  
	  
	 @keyframes moveToLeft {
	 	0% {
	 	transform:translate(0)
	 }
	 to {
	 	transform:translate(-.625rem)
	 }
	 }.sub:where(.astro-J7PV25F6) {
	 	padding:3.75rem 0 3.375rem
	 }
	 .sub:where(.astro-J7PV25F6) .text:where(.astro-J7PV25F6) {
	 	font-size:2.5rem;
	 	font-weight:600;
	 	color:var(--b-text);
	 	line-height:3.75rem;
	 	text-align:center;
	 	margin:0 auto
	 }
	 .sub:where(.astro-J7PV25F6) .text1:where(.astro-J7PV25F6) {
	 	font-weight:400;
	 	color:var(--b-text1);
	 	line-height:28px;
	 	text-align:center;
	 	margin:0 auto;
	 	padding-top:1rem
	 }
	 .sub:where(.astro-J7PV25F6) .text1-bold:where(.astro-J7PV25F6) {
	 	font-weight:600;
	 	cursor:pointer
	 }
	 .item:where(.astro-J7PV25F6) {
	 	background:var(--b-bg1);
	 	border-radius:1rem;
	 	font-family:PingFang SC-Medium,PingFang SC;
	 	transition:all .2s;
	 	box-shadow:#00000014 0 0
	 }
	 .item:where(.astro-J7PV25F6):hover {
	 	transform:translateY(-.625rem);
	 	box-shadow:#00000014 -100px 100px 200px;
	 	cursor:pointer
	 }
	 .item:where(.astro-J7PV25F6):hover .button:where(.astro-J7PV25F6) .icon:where(.astro-J7PV25F6),.item:where(.astro-J7PV25F6):hover .btn:where(.astro-J7PV25F6) .icon:where(.astro-J7PV25F6) {
	 	transform:translate(.625rem)
	 }
	 .item:where(.astro-J7PV25F6) .title:where(.astro-J7PV25F6) {
	 	font-size:1.75rem;
	 	font-weight:500;
	 	color:var(--b-text3)
	 }
	 .item:where(.astro-J7PV25F6) .subtitle:where(.astro-J7PV25F6) {
	 	padding-top:1rem;
	 	font-size:.875rem;
	 	font-weight:400;
	 	color:var(--b-text4)
	 }
	 .item:where(.astro-J7PV25F6) .button:where(.astro-J7PV25F6) {
	 	width:8.375rem;
	 	height:2.5rem;
	 	border-radius:1.25rem;
	 	border:1px solid var(--b-button-bor);
	 	font-size:.875rem;
	 	font-weight:400;
	 	color:var(--b-button-text);
	 	line-height:2.5rem;
	 	display:flex;
	 	align-items:center;
	 	justify-content:center
	 }
	 .item:where(.astro-J7PV25F6) .button:where(.astro-J7PV25F6) .icon:where(.astro-J7PV25F6) {
	 	padding-left:6px;
	 	transition:all .2s
	 }
	 .module:where(.astro-J7PV25F6) {
	 	padding:0 1.25rem
	 }
	 .module:where(.astro-J7PV25F6) .item:where(.astro-J7PV25F6) {
	 	display:flex;
	 	align-items:center
	 }
	 .module-left:where(.astro-J7PV25F6) {
	 	padding:2rem
	 }
	 .module-left:where(.astro-J7PV25F6) .img:where(.astro-J7PV25F6) {
	 	width:55.25rem;
	 	height:24.5rem
	 }
	 .module-right:where(.astro-J7PV25F6) {
	 	flex:1;
	 	display:flex;
	 	flex-direction:column;
	 	justify-content:space-between
	 }
	 .module1:where(.astro-J7PV25F6) {
	 	padding:2rem 1.25rem;
	 	display:flex
	 }
	 .module1-left:where(.astro-J7PV25F6) {
	 	padding:1.25rem
	 }
	 .module1-left:where(.astro-J7PV25F6) .img:where(.astro-J7PV25F6) {
	 	width:100%;
	 	height:32.75rem
	 }
	 .module1-left-text:where(.astro-J7PV25F6) {
	 	padding-top:1.25rem;
	 	display:flex;
	 	align-items:center;
	 	justify-content:space-between
	 }
	 .module1-hr:where(.astro-J7PV25F6) {
	 	width:2rem;
	 	height:2rem
	 }
	 .module1-right:where(.astro-J7PV25F6) {
	 	flex:1;
	 	display:flex;
	 	flex-direction:column;
	 	justify-content:space-between
	 }
	 .module1-right:where(.astro-J7PV25F6) .item:where(.astro-J7PV25F6) {
	 	flex:1;
	 	display:flex;
	 	padding:1.25rem
	 }
	 .module1-right-img:where(.astro-J7PV25F6) .img:where(.astro-J7PV25F6) {
	 	width:24.375rem;
	 	height:16.5rem
	 }
	 .module1-right-text:where(.astro-J7PV25F6) {
	 	padding-left:1.25rem;
	 	flex:1;
	 	display:flex;
	 	flex-direction:column;
	 	justify-content:space-between
	 }
	 .module3:where(.astro-J7PV25F6) {
	 	display:flex;
	 	padding:0 1.25rem 4rem
	 }
	 .module3-hr:where(.astro-J7PV25F6) {
	 	height:2rem;
	 	width:2rem
	 }
	 .module3-item:where(.astro-J7PV25F6) {
	 	flex:1;
	 	display:flex;
	 	justify-content:space-between;
	 	padding:1.25rem
	 }
	 .module3-right:where(.astro-J7PV25F6) .img:where(.astro-J7PV25F6) {
	 	width:16rem;
	 	height:7.5rem;
	 	border-radius:1rem
	 }
	 .module3-left:where(.astro-J7PV25F6) {
	 	display:flex;
	 	flex-direction:column;
	 	justify-content:space-between
	 }
	 .module3-left:where(.astro-J7PV25F6) .title:where(.astro-J7PV25F6) {
	 	font-size:1.125rem;
	 	font-weight:500;
	 	color:var(--b-text6)
	 }
	 .module3-left:where(.astro-J7PV25F6) .subtitle:where(.astro-J7PV25F6) {
	 	padding-top:1rem;
	 	font-size:.875rem;
	 	font-weight:400;
	 	color:var(--b-text7)
	 }
	 .module3-left:where(.astro-J7PV25F6) .btn:where(.astro-J7PV25F6) {
	 	display:flex;
	 	align-items:center;
	 	font-size:.75rem;
	 	font-weight:400;
	 	color:var(--b-button-text);
	 	padding:.275rem 0
	 }
	 .module3-left:where(.astro-J7PV25F6) .btn:where(.astro-J7PV25F6) .icon:where(.astro-J7PV25F6) {
	 	padding-left:6px;
	 	transition:all .2s
	 }
	 .footer:where(.astro-J7PV25F6) {
	 	height:4rem;
	 	background:var(--b-bg1);
	 	display:flex;
	 	justify-content:center;
	 	align-items:center;
	 	font-size:.875rem;
	 	font-family:PingFang SC-Semibold,PingFang SC;
	 	font-weight:600;
	 	color:var(--b-text5)
	 }
	 .footer:where(.astro-J7PV25F6)>div:where(.astro-J7PV25F6) {
	 	padding:0 1.25rem
	 }
	 .footer:where(.astro-J7PV25F6) a:where(.astro-J7PV25F6) {
	 	color:var(--b-text5);
	 	text-decoration:none
	 }
	 .module1_phone:where(.astro-J7PV25F6) {
	 	display:none
	 }
	 @media (max-width:768px) {
	 	.module:where(.astro-J7PV25F6) {
	 	padding:0
	 }
	 .module:where(.astro-J7PV25F6) .item:where(.astro-J7PV25F6) {
	 	display:block
	 }
	 .module-left:where(.astro-J7PV25F6) {
	 	padding:1rem!important
	 }
	 .module-left:where(.astro-J7PV25F6) .img:where(.astro-J7PV25F6) {
	 	width:100%;
	 	height:auto
	 }
	 .module-right:where(.astro-J7PV25F6) {
	 	padding:2rem 1rem;
	 	flex-direction:row
	 }
	 .module-right:where(.astro-J7PV25F6) .button:where(.astro-J7PV25F6) {
	 	align-self:flex-end;
	 	margin-top:2rem!important
	 }
	 .module1:where(.astro-J7PV25F6) {
	 	display:none
	 }
	 .module1_phone:where(.astro-J7PV25F6) {
	 	display:flex;
	 	flex-direction:column;
	 	padding:8px 0
	 }
	 .module1_phone-hr:where(.astro-J7PV25F6) {
	 	width:8px;
	 	height:8px
	 }
	 .module1_phone:where(.astro-J7PV25F6) .item:where(.astro-J7PV25F6) {
	 	flex:1;
	 	padding:1rem
	 }
	 .module1_phone:where(.astro-J7PV25F6) .item:where(.astro-J7PV25F6) .module1-left-text:where(.astro-J7PV25F6) {
	 	padding:2rem 0rem
	 }
	 .module1_phone:where(.astro-J7PV25F6) .item:where(.astro-J7PV25F6) .img:where(.astro-J7PV25F6) {
	 	width:100%;
	 	height:auto
	 }
	 .module3:where(.astro-J7PV25F6) {
	 	flex-direction:column;
	 	padding:0 0rem 4rem
	 }
	 .module3-left:where(.astro-J7PV25F6) .btn:where(.astro-J7PV25F6) {
	 	width:8.375rem;
	 	height:2.5rem;
	 	border-radius:1.25rem;
	 	border:1px solid var(--b-button-bor);
	 	font-size:1.2rem!important;
	 	font-weight:400;
	 	color:var(--b-button-text);
	 	line-height:2.5rem;
	 	display:flex;
	 	align-items:center;
	 	justify-content:center
	 }
	 .module3:where(.astro-J7PV25F6) .title:where(.astro-J7PV25F6) {
	 	font-size:1.6rem
	 }
	 .module3-item:where(.astro-J7PV25F6) {
	 	padding:10px
	 }
	 .module3-right:where(.astro-J7PV25F6) {
	 	flex:1;
	 	display:flex;
	 	justify-content:flex-end
	 }
	 .module3-right:where(.astro-J7PV25F6) .img:where(.astro-J7PV25F6) {
	 	width:120px;
	 	height:auto
	 }
	 }@media (max-width:1024px) {
	 	.top:where(.astro-J7PV25F6) {
	 	height:70vh;
	 	width:100%
	 }
	 .top:where(.astro-J7PV25F6) .title:where(.astro-J7PV25F6) {
	 	font-size:3rem;
	 	font-weight:500
	 }
	 .top:where(.astro-J7PV25F6) .sub-title:where(.astro-J7PV25F6) {
	 	font-size:1rem;
	 	font-weight:500
	 }
	 .top:where(.astro-J7PV25F6) .btn:where(.astro-J7PV25F6) {
	 	width:18rem;
	 	height:5rem;
	 	font-size:2rem
	 }
	 .top:where(.astro-J7PV25F6) .btn:where(.astro-J7PV25F6) .icon:where(.astro-J7PV25F6) {
	 	margin-left:16px;
	 	animation:moveToLeft .8s infinite cubic-bezier(.1,.84,.35,1)
	 }
	 }@media (max-width:1280px) {
	 	.item:where(.astro-J7PV25F6) .button:where(.astro-J7PV25F6) {
	 	width:10rem;
	 	height:3rem;
	 	border-radius:15px;
	 	border:1px solid var(--b-button-bor);
	 	line-height:3rem;
	 	font-size:1.2rem
	 }
	 }
	/* 确保整个页面没有多余的边距和滚动条 */
	html, body {
	  margin: 0;
	  padding: 0;
	  overflow-x: hidden;
	  width: 100%;
	}
	
	/* topbanner 容器样式 */
	.topbanner {
	  position: relative;
	  width: 100%;
	  height: 70vh; /* 使用视口高度 */
	  overflow: hidden;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	
	/* 视频背景样式，确保自适应 */
	.video-background {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  object-fit: cover; /* 保持比例填充 */
	  z-index: 0;
	}
	
	/* 内容样式，确保浮在视频上方 */
	.banner-content {
	  position: relative;
	  z-index: 10;
	  text-align: center;
	  padding: 40px 20px;
	  background: rgba(255, 255, 255, 0.1);
	  backdrop-filter: blur(5px);
	  border-radius: 20px;
	  max-width: 90%;
	  width: 800px;
	  margin: 0 auto;
	}
	
	/* 响应式调整 */
	@media (max-width: 768px) {
	  .banner-content {
	    padding: 20px;
	    max-width: 95%;
	  }
	}

        /* ===== 纳米香蕉 黄色系主题 ===== */
        .base {
          --b-bg: #fffdf5;
          --b-bg1: #fff8e1;
          --b-text: #3e2723;
          --b-text1: #6d4c41;
          --b-text3: #3e2723;
          --b-text4: #5d4037;
          --b-text5: #8d6e63;
          --b-text6: #3e2723;
          --b-text7: #6d4c41;
          --b-nav-bg1: #fff3cd;
          --b-nav-color1: #ffb300;
          --b-button-text: #3e2723;
          --b-button-bor: #ffb300;
          --b-login-bg-start: rgba(255,248,225,0);
          --b-login-bg-end: rgba(255,248,225,1);
        }
        body { background: #fffdf5; }
        body a { color: #3e2723; }

        /* banner 黄色氛围 */
        .hero-title {
          color: #3e2723;
          text-shadow: 0 2px 16px rgba(255,255,255,0.6);
        }
        .hero-subtitle { color: #5d4037; }
        .hero-badge {
          display: inline-block;
          background: linear-gradient(90deg, #ffc107, #ff9800);
          color: #3e2723;
          font-size: 0.875rem;
          font-weight: 700;
          padding: 6px 18px;
          border-radius: 100px;
          margin-bottom: 24px;
          letter-spacing: 1px;
          box-shadow: 0 6px 18px rgba(255,193,7,0.4);
        }
        .topbanner::after {
          content: "";
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, rgba(255,236,150,0.25) 0%, rgba(255,152,0,0.35) 100%);
          z-index: 1;
          pointer-events: none;
        }
        .banner-content {
          background: rgba(255,253,245,0.55);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          border: 1px solid rgba(255,193,7,0.3);
          box-shadow: 0 20px 60px rgba(255,152,0,0.18);
        }
        .btn-primary {
          background: linear-gradient(90deg, #ffc107, #ff9800);
          color: #3e2723;
          box-shadow: 0 8px 24px rgba(255,152,0,0.35);
          transition: all 0.3s ease;
        }
        .btn-primary:hover {
          background: linear-gradient(90deg, #ffb300, #f57c00);
          transform: translateY(-2px);
          box-shadow: 0 12px 30px rgba(255,152,0,0.5);
        }
        .btn-secondary {
          background: transparent;
          color: #3e2723;
          border: 2px solid #ffb300;
          box-shadow: none;
          transition: all 0.3s ease;
        }
        .btn-secondary:hover {
          background: #fff3cd;
          transform: translateY(-2px);
        }

        /* 特性栏 */
        .features {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
          padding: 60px 20px 20px;
        }
        .feature-item {
          background: #fff8e1;
          border: 1px solid #ffe082;
          border-radius: 16px;
          padding: 32px 24px;
          text-align: center;
          transition: all 0.3s ease;
        }
        .feature-item:hover {
          transform: translateY(-6px);
          border-color: #ffb300;
          box-shadow: 0 16px 36px rgba(255,193,7,0.22);
        }
        .feature-icon {
          width: 56px;
          height: 56px;
          margin: 0 auto 18px;
          background: linear-gradient(135deg, #ffc107, #ff9800);
          color: #fff;
          font-size: 26px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 8px 18px rgba(255,152,0,0.3);
        }
        .feature-title {
          font-size: 1.125rem;
          font-weight: 700;
          color: #3e2723;
          margin-bottom: 10px;
          margin-top: 0;
        }
        .feature-desc {
          font-size: 0.875rem;
          color: #6d4c41;
          line-height: 1.7;
          margin: 0;
        }

        /* 卡片黄色化与 hover */
        .item {
          background: #fff8e1;
          border: 1px solid #ffe082;
        }
        .item:hover {
          box-shadow: 0 20px 40px rgba(255,193,7,0.2);
          border-color: #ffb300;
        }
        .item .title { color: #3e2723; }
        .item .subtitle { color: #5d4037; }
        .item .button, .module3-left .btn {
          border-color: #ffb300;
          color: #3e2723;
          background: #fffdf5;
        }

        /* 数据统计 */
        .stats {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 48px;
          padding: 40px 20px 60px;
        }
        .stats-item { text-align: center; }
        .stats-num {
          font-size: 3rem;
          font-weight: 900;
          color: #ff9800;
          line-height: 1;
          font-family: SF Pro Display, Roboto, Arial, PingFang SC, sans-serif;
        }
        .stats-num span { font-size: 1.5rem; color: #ffb300; }
        .stats-label {
          font-size: 0.95rem;
          color: #6d4c41;
          margin-top: 10px;
        }
        .stats-divider {
          width: 1px;
          height: 60px;
          background: #ffe082;
        }

        /* CTA 行动区 */
        .cta {
          background: linear-gradient(135deg, #fff3cd 0%, #ffe082 50%, #ffb300 100%);
          padding: 70px 20px;
          text-align: center;
          margin-top: 40px;
        }
        .cta-title {
          font-size: 2.25rem;
          font-weight: 900;
          color: #3e2723;
          margin-bottom: 16px;
          margin-top: 0;
        }
        .cta-desc {
          font-size: 1.125rem;
          color: #5d4037;
          margin-bottom: 32px;
        }
        .cta-btn { margin-top: 0; }

        /* copyright */
        .copyright {
          color: #8d6e63;
          border-top: 1px solid #e6d8a8;
          background: #fffdf5;
        }
        .copyright a { color: #6d4c41; }

        /* 响应式 */
        @media (max-width: 1024px) {
          .features { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
          .features { grid-template-columns: 1fr; padding: 40px 20px 10px; }
          .stats { flex-direction: column; gap: 24px; }
          .stats-divider { width: 60px; height: 1px; }
          .cta-title { font-size: 1.5rem; }
          .cta { padding: 50px 20px; }
        }

        /* ===== banner 重新设计（无视频背景） ===== */
        .topbanner {
          background: linear-gradient(135deg, #fff8e1 0%, #ffe082 45%, #ffb300 100%);
          height: auto;
          min-height: 78vh;
          padding: 110px 20px;
          overflow: hidden;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .topbanner::after { display: none; }
        .video-background { display: none; }

        .hero-glow {
          position: absolute;
          border-radius: 50%;
          filter: blur(70px);
          pointer-events: none;
          z-index: 0;
        }
        .glow-1 {
          width: 420px;
          height: 420px;
          background: #fff3cd;
          top: -120px;
          left: -90px;
          opacity: 0.7;
        }
        .glow-2 {
          width: 340px;
          height: 340px;
          background: #ffc107;
          bottom: -100px;
          right: -70px;
          opacity: 0.45;
        }
        .glow-3 {
          width: 260px;
          height: 260px;
          background: #ff9800;
          top: 38%;
          right: 16%;
          opacity: 0.28;
        }
        .banner-content {
          position: relative;
          z-index: 10;
          background: rgba(255,253,245,0.72);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border: 1px solid rgba(255,193,7,0.35);
          box-shadow: 0 24px 60px rgba(255,152,0,0.16);
        }
        .hero-title {
          text-shadow: 0 2px 14px rgba(255,255,255,0.5);
        }

        @media (max-width: 768px) {
          .topbanner { min-height: 60vh; padding: 70px 20px; }
          .glow-1 { width: 240px; height: 240px; }
          .glow-2 { width: 200px; height: 200px; }
        }

        /* ===== 暗黑主题 Banner（参考图风格） ===== */
        .dark-hero {
          background: #0d0d14;
          min-height: 78vh;
          padding: 110px 20px 90px;
          position: relative;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .dark-hero::after { display: none; }
        .dark-hero .video-background { display: none; }

        /* 网格背景 */
        .hero-grid {
          position: absolute;
          inset: 0;
          background-image:
            linear-gradient(rgba(124,92,255,0.07) 1px, transparent 1px),
            linear-gradient(90deg, rgba(124,92,255,0.07) 1px, transparent 1px);
          background-size: 60px 60px;
          mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
          -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
          z-index: 0;
          pointer-events: none;
        }

        /* 光晕 */
        .dark-hero .hero-glow {
          position: absolute;
          border-radius: 50%;
          filter: blur(90px);
          pointer-events: none;
          z-index: 0;
        }
        .glow-purple {
          width: 500px;
          height: 500px;
          background: #7c5cff;
          top: -160px;
          left: -120px;
          opacity: 0.22;
        }
        .glow-pink {
          width: 400px;
          height: 400px;
          background: #ff4495;
          bottom: -140px;
          right: -100px;
          opacity: 0.2;
        }
        .glow-blue {
          width: 320px;
          height: 320px;
          background: #00d4ff;
          top: 30%;
          right: 20%;
          opacity: 0.12;
        }

        /* 内容容器 */
        .dark-hero .banner-content {
          position: relative;
          z-index: 10;
          background: transparent;
          backdrop-filter: none;
          border: none;
          box-shadow: none;
          padding: 0;
          max-width: 820px;
        }

        /* 顶部徽章 */
        .dark-badge {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(255,255,255,0.06);
          border: 1px solid rgba(255,255,255,0.12);
          color: #d0d0d8;
          font-size: 0.875rem;
          font-weight: 500;
          padding: 8px 20px;
          border-radius: 100px;
          margin-bottom: 32px;
          letter-spacing: 0.3px;
        }
        .badge-dot {
          width: 8px;
          height: 8px;
          background: #22c55e;
          border-radius: 50%;
          box-shadow: 0 0 10px #22c55e;
          animation: pulse-dot 2s infinite;
        }
        @keyframes pulse-dot {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }

        /* 标题 */
        .dark-title {
          font-size: 4rem;
          font-weight: 900;
          color: #ffffff;
          line-height: 1.15;
          margin-bottom: 28px;
          text-shadow: none;
        }
        .title-highlight {
          background: linear-gradient(90deg, #7c5cff 0%, #ff4495 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        /* 副标题 */
        .dark-subtitle {
          font-size: 1.125rem;
          color: #9ca3af;
          max-width: 680px;
          margin: 0 auto 44px;
          line-height: 1.7;
        }

        /* 按钮 */
        .dark-btn {
          background: linear-gradient(90deg, #7c5cff 0%, #ff4495 100%);
          color: #ffffff !important;
          border: none;
          padding: 18px 52px;
          border-radius: 100px;
          font-weight: 700;
          font-size: 1rem;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 8px 30px rgba(124,92,255,0.4);
          white-space: nowrap;
          display: inline-block;
        }
        .dark-btn:hover {
          transform: translateY(-3px);
          box-shadow: 0 14px 40px rgba(124,92,255,0.55);
          background: linear-gradient(90deg, #8d6dff 0%, #ff5aa8 100%);
        }

        /* 隐藏次按钮 */
        .dark-hero .btn-secondary { display: none; }

        @media (max-width: 768px) {
          .dark-hero { min-height: 65vh; padding: 80px 20px 60px; }
          .dark-title { font-size: 2.25rem; }
          .glow-purple { width: 280px; height: 280px; }
          .glow-pink { width: 240px; height: 240px; }
        }

        /* ===== Banner 黄色系覆盖 ===== */
        .dark-hero {
          background: #1a1308;
        }
        .hero-grid {
          background-image:
            linear-gradient(rgba(255,193,7,0.07) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,193,7,0.07) 1px, transparent 1px);
        }
        .glow-purple {
          background: #f59e0b;
          opacity: 0.25;
        }
        .glow-pink {
          background: #fbbf24;
          opacity: 0.22;
        }
        .glow-blue {
          background: #fde68a;
          opacity: 0.15;
        }
        .dark-badge {
          background: rgba(255,193,7,0.08);
          border: 1px solid rgba(255,193,7,0.25);
          color: #fcd34d;
        }
        .badge-dot {
          background: #fbbf24;
          box-shadow: 0 0 10px #fbbf24;
        }
        .title-highlight {
          background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }
        .dark-subtitle {
          color: #d4b896;
        }
        .dark-btn {
          background: linear-gradient(90deg, #facc15 0%, #f59e0b 100%);
          box-shadow: 0 8px 30px rgba(245,158,11,0.4);
          color: #1a1308 !important;
        }
        .dark-btn:hover {
          box-shadow: 0 14px 40px rgba(245,158,11,0.55);
          background: linear-gradient(90deg, #fde047 0%, #d97706 100%);
        }