:root {
     /* High Saturation Gradient Colors */
     --primary-indigo: #4F46E5;
     --primary-purple: #9333EA;
     --primary-orange: #F97316;
     --neon-accent: #06B6D4;
     --success-green: #10B981;

     /* Backgrounds & Surfaces */
     --bg-white: #FFFFFF;
     --bg-offwhite: #F8FAFC;
     --card-glass: rgba(255, 255, 255, 0.6);
     --card-border: rgba(255, 255, 255, 0.8);

     /* Text Colors */
     --text-main: #0F172A;
     --text-muted: #475569;
     --text-light: #94A3B8;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Inter', sans-serif;
 }

 body {
     background-color: var(--bg-white);
     color: var(--text-main);
     overflow-x: hidden;
     line-height: 1.7;
     position: relative;
 }

 /* Background Gradients */
 .bg-mesh {
     position: absolute;
     border-radius: 50%;
     filter: blur(140px);
     z-index: -1;
     opacity: 0.12;
     animation: float 20s infinite alternate ease-in-out;
 }

 .mesh-1 {
     top: 0;
     left: -10%;
     width: 50vw;
     height: 50vw;
     background: var(--primary-indigo);
 }

 .mesh-2 {
     top: 30%;
     right: -10%;
     width: 40vw;
     height: 40vw;
     background: var(--primary-purple);
 }

 .mesh-3 {
     top: 60%;
     left: 0;
     width: 60vw;
     height: 60vw;
     background: var(--primary-orange);
 }

 .mesh-4 {
     bottom: 0;
     right: 10%;
     width: 50vw;
     height: 50vw;
     background: var(--neon-accent);
 }

 @keyframes float {
     0% {
         transform: translate(0, 0) scale(1);
     }

     50% {
         transform: translate(30px, 40px) scale(1.05);
     }

     100% {
         transform: translate(-20px, -30px) scale(0.95);
     }
 }

 /* Typography */
 h1,
 h2,
 h3,
 h4,
 h5 {
     font-weight: 800;
     letter-spacing: -0.02em;
     line-height: 1.2;
     color: var(--text-main);
 }

 .text-gradient {
     background: linear-gradient(135deg, var(--primary-indigo), var(--primary-purple), var(--primary-orange));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 p {
     margin-bottom: 1.5rem;
     font-size: 1.1rem;
     color: var(--text-muted);
 }

 .container {
     max-width: 1300px;
     margin: 0 auto;
     padding: 0 24px;
 }

 .section-padding {
     padding: 120px 0;
 }

 .section-header {
     text-align: center;
     margin-bottom: 70px;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
 }

 .section-header h2 {
     font-size: 3rem;
     margin-bottom: 20px;
 }

 /* Glassmorphism */
 .glass-card {
     background: var(--card-glass);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid var(--card-border);
     border-radius: 24px;
     box-shadow: 0 10px 40px rgba(15, 23, 42, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.9);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     overflow: hidden;
 }

 .glass-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(79, 70, 229, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 1);
 }

 /* Images */
 .img-glass {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     border: 4px solid white;
 }

 /* Buttons & Tags */
 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     padding: 16px 32px;
     border-radius: 100px;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s ease;
     cursor: pointer;
     font-size: 1.1rem;
     border: none;
 }

 .btn-primary {
     background: linear-gradient(135deg, var(--primary-indigo), var(--primary-purple));
     color: white;
     box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
 }

 .btn-primary:hover {
     box-shadow: 0 15px 30px rgba(147, 51, 234, 0.3);
     transform: translateY(-2px);
     color: white;
 }

 .badge {
     padding: 8px 16px;
     border-radius: 10px;
     font-size: 0.9rem;
     font-weight: 700;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .badge-orange {
     background: rgba(249, 115, 22, 0.1);
     color: var(--primary-orange);
     border: 1px solid rgba(249, 115, 22, 0.2);
 }

 .badge-purple {
     background: rgba(147, 51, 234, 0.1);
     color: var(--primary-purple);
     border: 1px solid rgba(147, 51, 234, 0.2);
 }

 .badge-indigo {
     background: rgba(79, 70, 229, 0.1);
     color: var(--primary-indigo);
     border: 1px solid rgba(79, 70, 229, 0.2);
 }

 /* Layouts */
 .split-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
     margin-bottom: 80px;
 }

 .split-layout.reverse {
     direction: rtl;
 }

 .split-layout.reverse>* {
     direction: ltr;
 }

 .bento-grid {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     gap: 24px;
 }

 .span-12 {
     grid-column: span 12;
 }

 .span-8 {
     grid-column: span 8;
 }

 .span-6 {
     grid-column: span 6;
 }

 .span-4 {
     grid-column: span 4;
 }

 /* Scannable Lists */
 .scan-list {
     list-style: none;
     margin: 24px 0;
 }

 .scan-list li {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     margin-bottom: 16px;
     padding: 20px;
     background: rgba(255, 255, 255, 0.7);
     border-radius: 16px;
     border: 1px solid rgba(0, 0, 0, 0.03);
     transition: background 0.3s;
 }

 .scan-list li:hover {
     background: rgba(255, 255, 255, 1);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
 }

 .scan-list i {
     margin-top: 4px;
     font-size: 1.4rem;
 }

 .scan-list .fa-check-circle {
     color: var(--success-green);
 }

 /* Vertical Timeline */
 .timeline {
     position: relative;
     max-width: 800px;
     margin: 0 auto;
     padding: 40px 0;
 }

 .timeline::before {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: 40px;
     width: 4px;
     background: linear-gradient(to bottom, var(--primary-indigo), var(--primary-orange));
     border-radius: 4px;
 }

 .timeline-item {
     position: relative;
     margin-bottom: 60px;
     padding-left: 100px;
 }

 .timeline-icon {
     position: absolute;
     left: 24px;
     top: 0;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     background: white;
     border: 4px solid var(--primary-indigo);
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary-indigo);
     font-weight: bold;
     box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.8);
 }

 .timeline-content {
     background: rgba(255, 255, 255, 0.8);
     padding: 30px;
     border-radius: 20px;
     border: 1px solid rgba(0, 0, 0, 0.05);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
 }

 /* Comparison Table Grid */
 .compare-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 20px;
     margin-top: 40px;
 }

 .compare-col {
     padding: 30px;
     border-radius: 20px;
     background: white;
     border: 1px solid #E2E8F0;
 }

 .compare-col.highlight {
     border: 2px solid var(--primary-indigo);
     box-shadow: 0 20px 40px rgba(79, 70, 229, 0.1);
     position: relative;
     transform: scale(1.05);
     z-index: 10;
 }

 .compare-col ul {
     list-style: none;
     margin-top: 20px;
 }

 .compare-col li {
     padding: 12px 0;
     border-bottom: 1px solid #F1F5F9;
     display: flex;
     align-items: center;
     gap: 10px;
     color: var(--text-muted);
 }

 /* FAQ Accordion Style Cards */
 .faq-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 16px;
     max-width: 900px;
     margin: 0 auto;
 }

 .faq-card {
     padding: 24px 30px;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .faq-card h4 {
     font-size: 1.25rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: var(--primary-indigo);
 }

 .faq-card p {
     margin: 0;
     font-size: 1.05rem;
 }

 @media (max-width: 992px) {
     .split-layout {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .split-layout.reverse {
         direction: ltr;
     }

     .span-8,
     .span-6,
     .span-4 {
         grid-column: span 12;
     }

     .compare-grid {
         grid-template-columns: 1fr;
     }

     .compare-col.highlight {
         transform: scale(1);
     }

     .timeline::before {
         left: 20px;
     }

     .timeline-item {
         padding-left: 60px;
     }

     .timeline-icon {
         left: 4px;
     }
 }

 /* Pricing Table Grid */
 .pricing-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
     max-width: 1200px;
     margin: 60px auto 0;
     align-items: center;
 }

 .pricing-card {
     background: rgba(255, 255, 255, 0.6);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid var(--card-border);
     border-radius: 24px;
     padding: 40px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
     transition: all 0.4s ease;
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .pricing-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(79, 70, 229, 0.1);
 }

 .pricing-card.popular {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
     border: 2px solid var(--primary-indigo);
     z-index: 10;
     box-shadow: 0 20px 50px rgba(79, 70, 229, 0.15);
 }


 .popular-badge {
     position: absolute;
     top: -16px;
     left: 50%;
     transform: translateX(-50%);
     background: linear-gradient(135deg, var(--primary-indigo), var(--primary-purple));
     color: white;
     padding: 6px 20px;
     border-radius: 20px;
     font-size: 0.85rem;
     font-weight: 700;
     letter-spacing: 1px;
     white-space: nowrap;
     box-shadow: 0 10px 20px rgba(79, 70, 229, 0.3);
 }

 .price-header {
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     padding-bottom: 24px;
     margin-bottom: 24px;
     text-align: center;
 }

 .price-currency {
     font-size: 1.5rem;
     font-weight: 600;
     color: var(--text-main);
     vertical-align: top;
     margin-top: 10px;
     display: inline-block;
 }

 .price-amount {
     font-size: 3.5rem;
     font-weight: 800;
     color: var(--text-main);
     line-height: 1;
 }

 .price-period {
     font-size: 1rem;
     color: var(--text-muted);
 }

 .pricing-features {
     list-style: none;
     margin-bottom: 32px;
     flex-grow: 1;
 }

 .pricing-features li {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-bottom: 16px;
     font-size: 1.05rem;
     color: var(--text-muted);
 }

 .pricing-features i.fa-check {
     color: var(--success-green);
     margin-top: 5px;
     font-size: 0.9rem;
 }

 .pricing-features i.fa-xmark {
     color: #CBD5E1;
     margin-top: 5px;
     font-size: 0.9rem;
 }

 /* Testimonials Grid */
 .testimonial-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
     margin-top: 60px;
 }

 .testimonial-card {
     padding: 32px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     gap: 20px;
 }

 .stars {
     color: #F59E0B;
     font-size: 1.1rem;
     letter-spacing: 2px;
 }

 .client-info {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-top: 20px;
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     padding-top: 20px;
 }

 .client-avatar {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid white;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .client-details h5 {
     font-size: 1rem;
     margin: 0;
     color: var(--text-main);
 }

 .client-details p {
     font-size: 0.85rem;
     margin: 0;
     color: var(--text-muted);
 }

 @media (max-width: 992px) {

     .pricing-grid,
     .testimonial-grid {
         grid-template-columns: 1fr;
     }

     .pricing-card.popular {
         transform: scale(1);
     }

     .pricing-card.popular:hover {
         transform: translateY(-5px);
     }
 }

 /* =========================================
   新增：转化率优化 (CRO) 组件样式
========================================= */

 /* 1. 紧迫感横幅 (Urgency Banner) */
 .flash-alert {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     background: linear-gradient(90deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.1));
     border: 1px solid rgba(239, 68, 68, 0.3);
     padding: 12px 24px;
     border-radius: 100px;
     color: #DC2626;
     font-weight: 600;
     font-size: 0.95rem;
     margin-bottom: 30px;
     animation: pulse-border 2s infinite;
 }

 @keyframes pulse-border {
     0% {
         box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
     }
 }

 /* 2. 社交信任滚动条 (Social Proof Ticker) */
 .ticker-wrap {
     width: 100%;
     overflow: hidden;
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(10px);
     border-top: 1px solid rgba(0, 0, 0, 0.05);
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     padding: 12px 0;
     margin-top: 60px;
     display: flex;
 }

 .ticker-move {
     display: flex;
     white-space: nowrap;
     animation: ticker 30s linear infinite;
 }

 .ticker-item {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 0 40px;
     font-size: 0.9rem;
     color: var(--text-muted);
     font-weight: 500;
 }

 .ticker-item i {
     color: var(--success-green);
 }

 @keyframes ticker {
     0% {
         transform: translate3d(0, 0, 0);
     }

     100% {
         transform: translate3d(-50%, 0, 0);
     }
 }

 /* 3. 避坑指南卡片 (Anti-Trap Cards) */
 .trap-card {
     background: white;
     border-left: 4px solid #EF4444;
     padding: 30px;
     border-radius: 0 16px 16px 0;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
     margin-bottom: 20px;
     transition: transform 0.3s ease;
 }

 .trap-card:hover {
     transform: translateX(10px);
 }

 .trap-card h4 {
     display: flex;
     align-items: center;
     gap: 10px;
     color: #DC2626;
     margin-bottom: 12px;
 }

 /* 4. 底部信任徽章 (Trust Badges) */
 .trust-badges {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
     margin-top: 30px;
 }

 .trust-badge-item {
     display: flex;
     align-items: center;
     gap: 10px;
     background: rgba(255, 255, 255, 0.5);
     padding: 10px 20px;
     border-radius: 8px;
     border: 1px solid rgba(0, 0, 0, 0.05);
     font-size: 0.85rem;
     font-weight: 600;
     color: var(--text-muted);
 }

 /* =========================================
   FAQ 折叠交互动画 (Accordion)
========================================= */
 .faq-question {
     font-size: 1.25rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: var(--primary-indigo);
     margin: 0;
     user-select: none;
 }

 .faq-question i {
     color: var(--text-muted);
     font-size: 1rem;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* 隐藏状态的设计 */
 .faq-answer {
     display: grid;
     grid-template-rows: 0fr;
     /* 核心技巧：初始高度设为 0 */
     transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .answer-inner {
     overflow: hidden;
     /* 隐藏溢出内容 */
 }

 .faq-answer p {
     margin: 16px 0 0 0;
     font-size: 1.05rem;
     color: var(--text-muted);
     opacity: 0;
     transform: translateY(-10px);
     transition: all 0.4s ease;
 }

 /* 激活(展开)状态的设计 */
 .faq-card.active .faq-question i {
     transform: rotate(180deg);
     color: var(--primary-orange);
 }

 .faq-card.active .faq-answer {
     grid-template-rows: 1fr;
     /* 自动计算内容高度展开 */
 }

 .faq-card.active .faq-answer p {
     opacity: 1;
     transform: translateY(0);
 }

 /* =========================================
           Floating TOC (左下角悬浮目录 - 香港 SaaS 版)
        ========================================= */
 .floating-toc {
     position: fixed;
     bottom: 24px;
     left: 24px;
     z-index: 1000;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }

 .toc-toggle {
     background: linear-gradient(135deg, var(--primary-indigo), var(--primary-purple));
     color: white;
     border: none;
     padding: 14px 24px;
     border-radius: 100px;
     font-size: 0.95rem;
     font-weight: 600;
     font-family: inherit;
     cursor: pointer;
     box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
     display: flex;
     align-items: center;
     gap: 10px;
     transition: all 0.3s ease;
 }

 .toc-toggle:hover {
     box-shadow: 0 15px 30px rgba(147, 51, 234, 0.3);
     transform: translateY(-2px);
 }

 .toc-menu {
     background: rgba(255, 255, 255, 0.85);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.9);
     border-radius: 20px;
     padding: 16px;
     box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
     margin-bottom: 12px;
     display: flex;
     flex-direction: column;
     gap: 4px;
     width: max-content;
     min-width: 220px;
     max-height: 65vh;
     /* 适配手机屏幕 */
     overflow-y: auto;
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     transform-origin: bottom left;
 }

 /* 高级隐藏滚动条 */
 .toc-menu::-webkit-scrollbar {
     width: 4px;
 }

 .toc-menu::-webkit-scrollbar-thumb {
     background: rgba(79, 70, 229, 0.2);
     border-radius: 4px;
 }

 .toc-menu.open {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .toc-link {
     font-size: 0.9rem;
     font-weight: 600;
     color: var(--text-muted);
     padding: 10px 14px;
     border-radius: 12px;
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
 }

 .toc-link::before {
     content: '';
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: transparent;
     transition: all 0.3s ease;
 }

 .toc-link:hover,
 .toc-link.active {
     background: rgba(79, 70, 229, 0.06);
     color: var(--primary-indigo);
 }

 .toc-link.active::before {
     background: var(--primary-orange);
     /* 亮橙色高光 */
     box-shadow: 0 0 8px var(--primary-orange);
 }

 /* 移动端适配 */
 @media (max-width: 768px) {
     .floating-toc {
         bottom: 24px;
         left: 16px;
     }

     .toc-toggle {
         padding: 12px 20px;
         font-size: 0.9rem;
     }
 }

 /* =========================================
           全新：香港版高奢首屏 (HK Premium Hero)
        ========================================= */
 .hero-premium-hk {
     position: relative;
     text-align: center;
     padding-top: 180px;
     padding-bottom: 0;
     /* 引入香港中环/维港高清夜景，设置 fixed 实现视差滚动 */
     background: url('../images/xiangguangbeijtu.jpg') center/cover no-repeat fixed;
     color: white;
     overflow: hidden;
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* 深色靛蓝 (Indigo) 磨砂遮罩，确保文字对比度 */
 .hero-premium-hk::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 27, 75, 0.92) 100%);
     z-index: 0;
 }

 /* 赛博朋克霓虹紫光晕聚焦 */
 .hero-premium-hk::after {
     content: '';
     position: absolute;
     top: -20%;
     left: 50%;
     transform: translateX(-50%);
     width: 800px;
     height: 800px;
     background: radial-gradient(circle, rgba(147, 51, 234, 0.25) 0%, transparent 70%);
     border-radius: 50%;
     z-index: 0;
     pointer-events: none;
     animation: pulse-glow 8s infinite alternate ease-in-out;
 }

 @keyframes pulse-glow {
     0% {
         transform: translateX(-50%) scale(1);
         opacity: 0.6;
     }

     100% {
         transform: translateX(-50%) scale(1.1);
         opacity: 1;
     }
 }

 /* 确保内容悬浮在遮罩和光晕之上 */
 .hero-premium-hk .container {
     position: relative;
     z-index: 10;
 }

 /* 针对暗色背景的文本优化 */
 .hero-premium-hk h1 {
     color: white;
     text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
 }

 .hero-premium-hk p.hero-sub {
     color: rgba(255, 255, 255, 0.85);
 }

 /* 针对暗色背景的次级按钮优化 (Glassmorphism) */
 .btn-glass-hk {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: white;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
 }

 .btn-glass-hk:hover {
     background: rgba(255, 255, 255, 0.15);
     border-color: white;
     color: white;
     transform: translateY(-3px);
 }

 /* 适配底部的滚动通知条 (Ticker) 到暗色主题 */
 .hero-premium-hk .ticker-wrap {
     position: relative;
     z-index: 10;
     background: rgba(15, 23, 42, 0.6);
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }

 .hero-premium-hk .ticker-item {
     color: rgba(255, 255, 255, 0.7);
 }

 /* =========================================
           新增：香港版淡雅透明背景 (Light Transparent Hero)
        ========================================= */
 .hero-light-hk {
     position: relative;
     text-align: center;
     padding-top: 160px;
     padding-bottom: 0;
     /* 不设置背景色，保留原本的纯净白底 */
 }

 /* 专门用来放置实景背景图的图层 */
 .hero-light-hk::before {
     content: '';
     position: absolute;
     inset: 0;
     /* 引入一张明亮的香港城市白天风光图，保持 fixed 视差滚动 */
     background-image: url('../images/xiangguangbeijtu.jpg');
     background-size: cover;
     background-position: center;
     background-attachment: fixed;

     /* 【核心魔法】：极低的透明度 (12%)，让图片变成淡淡的透明影子 */
     opacity: 0.12;

     /* 放在最底层，不会遮挡你的彩色光晕和文字 */
     z-index: -2;
     pointer-events: none;
 }

 /* 底部加一层白色羽化过渡，让实景图和下方正文无缝融合 */
 .hero-light-hk::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 150px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
     z-index: -1;
     pointer-events: none;
 }