/* roulang page: index */
:root {
 --color-bg: #07111f;
 --color-bg-2: #0b1d33;
 --color-bg-3: #0e2340;
 --color-primary: #1d8cff;
 --color-primary-soft: #68d7ff;
 --color-cyan: #7ce7ff;
 --color-accent: #9bf4d5;
 --color-warning: #ffd166;
 --color-text: #edf7ff;
 --color-text-strong: #ffffff;
 --color-muted: #9fb4c7;
 --color-muted-2: #6b859e;
 --color-border: rgba(160,220,255,0.18);
 --color-border-hover: rgba(160,220,255,0.40);
 --color-glass-bg: rgba(13,31,54,0.58);
 --color-glass-bg-light: rgba(18,38,62,0.52);
 --color-glass-bg-dark: rgba(8,20,38,0.65);
 --radius-xs:8px;
 --radius-sm:16px;
 --radius-md:24px;
 --radius-lg:32px;
 --radius-pill:999px;
 --shadow-sm:04px16px rgba(0,0,0,0.28);
 --shadow-md:012px40px rgba(0,0,0,0.38);
 --shadow-lg:020px60px rgba(0,0,0,0.45);
 --shadow-glow-blue:0028px rgba(29,140,255,0.32),0056px rgba(29,140,255,0.14);
 --shadow-glow-cyan:0024px rgba(104,215,255,0.30),0048px rgba(124,231,255,0.12);
 --transition-fast:180ms ease;
 --transition-base:260ms ease;
 --transition-slow:360ms ease;
 --font-stack: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
 --container-max:1200px;
 }

 *,
 *::before,
 *::after {
 box-sizing: border-box;
 }

 html {
 scroll-behavior: smooth;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 }

 body {
 margin:0;
 padding:0;
 font-family: var(--font-stack);
 font-size:16px;
 line-height:1.75;
 color: var(--color-text);
 background: var(--color-bg);
 background-image:
 radial-gradient(ellipse at30%15%, rgba(29,140,255,0.07)0%, transparent55%),
 radial-gradient(ellipse at72%22%, rgba(104,215,255,0.06)0%, transparent55%),
 radial-gradient(ellipse at50%60%, rgba(124,231,255,0.04)0%, transparent50%),
 radial-gradient(ellipse at18%75%, rgba(155,244,213,0.04)0%, transparent45%);
 background-attachment: fixed;
 min-height:100vh;
 overflow-x: hidden;
 position: relative;
 }

 body::before {
 content: '';
 position: fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 pointer-events: none;
 z-index:0;
 background:
 repeating-linear-gradient(0deg,
 transparent,
 transparent2px,
 rgba(160,220,255,0.012)2px,
 rgba(160,220,255,0.012)4px);
 mask-image: linear-gradient(to bottom, rgba(0,0,0,0.35)0%, rgba(0,0,0,0.08)50%, rgba(0,0,0,0.02)100%);
 -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.35)0%, rgba(0,0,0,0.08)50%, rgba(0,0,0,0.02)100%);
 }

 body::after {
 content: '';
 position: fixed;
 top: -50%;
 left: -50%;
 width:200%;
 height:200%;
 pointer-events: none;
 z-index:0;
 background:
 radial-gradient(circle at28%18%, rgba(29,140,255,0.05)0%, transparent30%),
 radial-gradient(circle at65%28%, rgba(104,215,255,0.04)0%, transparent28%),
 radial-gradient(circle at40%55%, rgba(124,231,255,0.03)0%, transparent35%);
 animation: slowDrift28s ease-in-out infinite;
 }

 @keyframes slowDrift {
0%,
100% {
 transform: translate(0,0);
 }
25% {
 transform: translate(1.5%, -0.8%);
 }
50% {
 transform: translate(-0.6%,1.2%);
 }
75% {
 transform: translate(-1.2%, -0.4%);
 }
 }

 a {
 color: var(--color-primary-soft);
 text-decoration: none;
 transition: color var(--transition-fast);
 }
 a:hover {
 color: var(--color-cyan);
 text-decoration: none;
 }
 a:focus-visible {
 outline:2px solid var(--color-cyan);
 outline-offset:3px;
 border-radius:4px;
 }
 img {
 max-width:100%;
 height: auto;
 display: block;
 }
 button {
 cursor: pointer;
 font-family: var(--font-stack);
 border: none;
 background: none;
 }
 button:focus-visible {
 outline:2px solid var(--color-cyan);
 outline-offset:3px;
 border-radius: var(--radius-pill);
 }
 input,
 textarea,
 select {
 font-family: var(--font-stack);
 font-size:16px;
 }
 input:focus-visible,
 textarea:focus-visible,
 select:focus-visible {
 outline:2px solid var(--color-cyan);
 outline-offset:2px;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
 color: var(--color-text-strong);
 margin-top:0;
 font-weight:700;
 line-height:1.22;
 }
 h1 {
 font-size: clamp(36px,5.5vw,60px);
 line-height:1.10;
 letter-spacing: -0.02em;
 }
 h2 {
 font-size: clamp(28px,3.8vw,42px);
 letter-spacing: -0.01em;
 }
 h3 {
 font-size: clamp(20px,2.2vw,26px);
 }
 p {
 margin-top:0;
 margin-bottom:1rem;
 color: var(--color-text);
 }
 .text-muted {
 color: var(--color-muted);
 }
 .text-muted-2 {
 color: var(--color-muted-2);
 }
 .text-cyan {
 color: var(--color-cyan);
 }
 .text-accent {
 color: var(--color-accent);
 }

 .sr-only {
 position: absolute;
 width:1px;
 height:1px;
 padding:0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0,0,0,0);
 white-space: nowrap;
 border:0;
 }

 .grid-container {
 max-width: var(--container-max);
 padding-left:20px;
 padding-right:20px;
 }
 @media (min-width:1024px) {
 .grid-container {
 padding-left:32px;
 padding-right:32px;
 }
 }

 .section-pt {
 padding-top:80px;
 }
 .section-pb {
 padding-bottom:80px;
 }
 .section-py {
 padding-top:80px;
 padding-bottom:80px;
 }
 @media (min-width:768px) {
 .section-pt {
 padding-top:108px;
 }
 .section-pb {
 padding-bottom:108px;
 }
 .section-py {
 padding-top:108px;
 padding-bottom:108px;
 }
 }
 @media (min-width:1024px) {
 .section-pt {
 padding-top:128px;
 }
 .section-pb {
 padding-bottom:128px;
 }
 .section-py {
 padding-top:128px;
 padding-bottom:128px;
 }
 }

 .badge-tag {
 display: inline-flex;
 align-items: center;
 gap:7px;
 padding:7px16px;
 border-radius: var(--radius-pill);
 font-size:13px;
 font-weight:600;
 letter-spacing:0.03em;
 background: rgba(29,140,255,0.14);
 border:1px solid rgba(104,215,255,0.22);
 color: var(--color-cyan);
 white-space: nowrap;
 text-transform: uppercase;
 }
 .badge-tag .badge-dot {
 width:7px;
 height:7px;
 border-radius:50%;
 background: var(--color-cyan);
 box-shadow:008px var(--color-cyan);
 flex-shrink:0;
 }

 .btn-primary {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap:8px;
 padding:14px28px;
 border-radius: var(--radius-pill);
 font-size:16px;
 font-weight:600;
 letter-spacing:0.02em;
 color: #ffffff;
 background: linear-gradient(135deg, #1d6fdf0%, #1d8cff35%, #3da5ff100%);
 border: none;
 cursor: pointer;
 box-shadow:0022px rgba(29,140,255,0.35),0044px rgba(29,140,255,0.12),04px18px rgba(0,0,0,0.3);
 transition: all var(--transition-base);
 position: relative;
 overflow: hidden;
 text-decoration: none;
 white-space: nowrap;
 }
 .btn-primary::after {
 content: '';
 position: absolute;
 top: -40%;
 left: -60%;
 width:200%;
 height:180%;
 background: radial-gradient(ellipse at center, rgba(255,255,255,0.18)0%, transparent70%);
 opacity:0;
 transition: opacity var(--transition-base);
 pointer-events: none;
 }
 .btn-primary:hover {
 color: #ffffff;
 transform: translateY(-3px);
 box-shadow:0034px rgba(29,140,255,0.50),0060px rgba(29,140,255,0.20),08px26px rgba(0,0,0,0.35);
 background: linear-gradient(135deg, #2280f00%, #339dff35%, #4db5ff100%);
 }
 .btn-primary:hover::after {
 opacity:1;
 }
 .btn-primary:active {
 transform: translateY(-1px) scale(0.97);
 box-shadow:0016px rgba(29,140,255,0.30),02px10px rgba(0,0,0,0.3);
 transition: all100ms ease;
 }
 .btn-primary:focus-visible {
 outline:2px solid var(--color-cyan);
 outline-offset:4px;
 border-radius: var(--radius-pill);
 }

 .btn-secondary {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap:8px;
 padding:13px26px;
 border-radius: var(--radius-pill);
 font-size:16px;
 font-weight:600;
 letter-spacing:0.02em;
 color: var(--color-text-strong);
 background: transparent;
 border:1.5px solid rgba(160,220,255,0.35);
 cursor: pointer;
 transition: all var(--transition-base);
 text-decoration: none;
 white-space: nowrap;
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
 }
 .btn-secondary:hover {
 color: #ffffff;
 border-color: rgba(160,220,255,0.65);
 background: rgba(29,140,255,0.10);
 box-shadow:0020px rgba(29,140,255,0.18),04px16px rgba(0,0,0,0.25);
 transform: translateY(-2px);
 }
 .btn-secondary:active {
 transform: translateY(0) scale(0.97);
 transition: all100ms ease;
 }
 .btn-secondary:focus-visible {
 outline:2px solid var(--color-cyan);
 outline-offset:4px;
 border-radius: var(--radius-pill);
 }

 .btn-text {
 display: inline-flex;
 align-items: center;
 gap:6px;
 color: var(--color-primary-soft);
 font-weight:600;
 font-size:15px;
 letter-spacing:0.02em;
 transition: all var(--transition-fast);
 text-decoration: none;
 padding:4px0;
 background: none;
 border: none;
 cursor: pointer;
 }
 .btn-text i {
 transition: transform var(--transition-fast);
 }
 .btn-text:hover {
 color: var(--color-cyan);
 }
 .btn-text:hover i {
 transform: translateX(4px);
 }
 .btn-text:focus-visible {
 outline:2px solid var(--color-cyan);
 outline-offset:4px;
 border-radius:4px;
 }

 .glass-card {
 background: var(--color-glass-bg);
 backdrop-filter: blur(18px) saturate(140%);
 -webkit-backdrop-filter: blur(18px) saturate(140%);
 border:1px solid var(--color-border);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-md), inset01px0 rgba(255,255,255,0.06);
 transition: all var(--transition-base);
 }
 .glass-card:hover {
 border-color: var(--color-border-hover);
 box-shadow: var(--shadow-lg), inset01px0 rgba(255,255,255,0.10),0030px rgba(29,140,255,0.10);
 transform: translateY(-4px);
 }
 .glass-card-sm {
 border-radius: var(--radius-sm);
 }
 .glass-card-lg {
 border-radius: var(--radius-lg);
 }

 .glass-card-static {
 background: var(--color-glass-bg);
 backdrop-filter: blur(18px) saturate(140%);
 -webkit-backdrop-filter: blur(18px) saturate(140%);
 border:1px solid var(--color-border);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-md), inset01px0 rgba(255,255,255,0.06);
 }

 .section-label {
 display: inline-block;
 font-size:13px;
 font-weight:700;
 letter-spacing:0.08em;
 text-transform: uppercase;
 color: var(--color-cyan);
 margin-bottom:12px;
 }

 .section-heading {
 margin-bottom:14px;
 }
 .section-subheading {
 font-size:17px;
 color: var(--color-muted);
 max-width:620px;
 line-height:1.7;
 margin-bottom:40px;
 }
 @media (min-width:768px) {
 .section-subheading {
 font-size:18px;
 }
 }

 /* ====================浮动Dock导航 ==================== */
 .nav-dock-wrapper {
 position: fixed;
 top:22px;
 left:50%;
 transform: translateX(-50%);
 z-index:1000;
 width: calc(100% -32px);
 max-width:1180px;
 pointer-events: none;
 }
 @media (max-width:767px) {
 .nav-dock-wrapper {
 top:14px;
 width: calc(100% -20px);
 }
 }
 .nav-dock {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding:10px18px;
 background: rgba(10,22,42,0.72);
 backdrop-filter: blur(22px) saturate(150%);
 -webkit-backdrop-filter: blur(22px) saturate(150%);
 border:1px solid rgba(148,210,255,0.16);
 border-radius: var(--radius-pill);
 box-shadow:08px36px rgba(0,0,0,0.42),0001px rgba(255,255,255,0.04) inset,0060px rgba(29,140,255,0.06);
 pointer-events: auto;
 transition: all var(--transition-base);
 }
 @media (min-width:768px) {
 .nav-dock {
 padding:10px28px;
 }
 }
 .nav-dock:hover {
 border-color: rgba(148,210,255,0.28);
 box-shadow:010px44px rgba(0,0,0,0.48),0001px rgba(255,255,255,0.06) inset,0070px rgba(29,140,255,0.10);
 }

 .nav-logo {
 display: flex;
 align-items: center;
 gap:9px;
 font-weight:700;
 font-size:17px;
 color: #ffffff;
 text-decoration: none;
 white-space: nowrap;
 letter-spacing:0.01em;
 flex-shrink:0;
 }
 .nav-logo:hover {
 color: #ffffff;
 }
 .nav-logo-icon {
 width:34px;
 height:34px;
 border-radius:10px;
 background: linear-gradient(135deg, rgba(29,140,255,0.5)0%, rgba(104,215,255,0.35)100%);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size:16px;
 color: #ffffff;
 flex-shrink:0;
 border:1px solid rgba(160,220,255,0.30);
 box-shadow:0014px rgba(29,140,255,0.25);
 }
 @media (max-width:767px) {
 .nav-logo {
 font-size:15px;
 gap:7px;
 }
 .nav-logo-icon {
 width:28px;
 height:28px;
 border-radius:8px;
 font-size:13px;
 }
 }

 .nav-links-desktop {
 display: none;
 align-items: center;
 gap:4px;
 list-style: none;
 margin:0;
 padding:0;
 }
 @media (min-width:1024px) {
 .nav-links-desktop {
 display: flex;
 }
 }
 .nav-links-desktop li a {
 display: block;
 padding:8px15px;
 border-radius: var(--radius-pill);
 font-size:14.5px;
 font-weight:500;
 color: var(--color-muted);
 text-decoration: none;
 transition: all var(--transition-fast);
 letter-spacing:0.02em;
 white-space: nowrap;
 position: relative;
 }
 .nav-links-desktop li a:hover {
 color: #ffffff;
 background: rgba(29,140,255,0.10);
 }
 .nav-links-desktop li a.nav-active {
 color: #ffffff;
 background: rgba(29,140,255,0.16);
 font-weight:600;
 }

 .nav-actions-desktop {
 display: none;
 align-items: center;
 gap:10px;
 flex-shrink:0;
 }
 @media (min-width:1024px) {
 .nav-actions-desktop {
 display: flex;
 }
 }
 .nav-search-trigger {
 width:38px;
 height:38px;
 border-radius:50%;
 background: rgba(160,220,255,0.08);
 border:1px solid rgba(160,220,255,0.18);
 color: var(--color-muted);
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: all var(--transition-fast);
 font-size:14px;
 }
 .nav-search-trigger:hover {
 background: rgba(160,220,255,0.16);
 color: #ffffff;
 border-color: rgba(160,220,255,0.35);
 }
 .nav-cta-desktop {
 padding:9px20px;
 font-size:14px;
 border-radius: var(--radius-pill);
 font-weight:600;
 color: #ffffff;
 background: linear-gradient(135deg, #1d6fdf0%, #1d8cff35%, #3da5ff100%);
 border: none;
 cursor: pointer;
 box-shadow:0016px rgba(29,140,255,0.28),0032px rgba(29,140,255,0.08);
 transition: all var(--transition-base);
 text-decoration: none;
 white-space: nowrap;
 letter-spacing:0.02em;
 }
 .nav-cta-desktop:hover {
 color: #ffffff;
 transform: translateY(-2px);
 box-shadow:0024px rgba(29,140,255,0.42),0048px rgba(29,140,255,0.14);
 }

 .nav-mobile-toggle {
 display: flex;
 align-items: center;
 justify-content: center;
 width:38px;
 height:38px;
 border-radius:50%;
 background: rgba(160,220,255,0.10);
 border:1px solid rgba(160,220,255,0.20);
 color: #ffffff;
 cursor: pointer;
 font-size:18px;
 flex-shrink:0;
 transition: all var(--transition-fast);
 }
 @media (min-width:1024px) {
 .nav-mobile-toggle {
 display: none;
 }
 }
 .nav-mobile-toggle:hover {
 background: rgba(160,220,255,0.20);
 border-color: rgba(160,220,255,0.40);
 }

 .nav-mobile-panel {
 display: none;
 position: fixed;
 top:80px;
 left:16px;
 right:16px;
 z-index:999;
 background: rgba(10,22,42,0.90);
 backdrop-filter: blur(28px) saturate(160%);
 -webkit-backdrop-filter: blur(28px) saturate(160%);
 border:1px solid rgba(148,210,255,0.18);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-lg),0050px rgba(29,140,255,0.08);
 padding:20px;
 flex-direction: column;
 gap:6px;
 }
 @media (max-width:767px) {
 .nav-mobile-panel {
 top:68px;
 left:10px;
 right:10px;
 }
 }
 .nav-mobile-panel.active {
 display: flex;
 }
 .nav-mobile-panel a {
 display: block;
 padding:12px16px;
 border-radius: var(--radius-sm);
 font-size:15px;
 font-weight:500;
 color: var(--color-muted);
 text-decoration: none;
 transition: all var(--transition-fast);
 letter-spacing:0.02em;
 }
 .nav-mobile-panel a:hover {
 color: #ffffff;
 background: rgba(29,140,255,0.12);
 }
 .nav-mobile-panel .nav-mobile-cta {
 margin-top:8px;
 text-align: center;
 padding:13px20px;
 border-radius: var(--radius-pill);
 font-weight:600;
 color: #ffffff;
 background: linear-gradient(135deg, #1d6fdf0%, #1d8cff35%, #3da5ff100%);
 box-shadow:0016px rgba(29,140,255,0.28);
 }
 .nav-mobile-panel .nav-mobile-cta:hover {
 color: #ffffff;
 box-shadow:0024px rgba(29,140,255,0.42);
 background: linear-gradient(135deg, #2280f00%, #339dff35%, #4db5ff100%);
 }

 /* ==================== Hero ==================== */
 .hero-section {
 position: relative;
 z-index:1;
 padding-top:130px;
 padding-bottom:60px;
 overflow: hidden;
 }
 @media (min-width:768px) {
 .hero-section {
 padding-top:150px;
 padding-bottom:80px;
 }
 }
 @media (min-width:1024px) {
 .hero-section {
 padding-top:170px;
 padding-bottom:100px;
 }
 }
 .hero-rain-lines {
 position: absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 pointer-events: none;
 z-index:0;
 opacity:0.28;
 overflow: hidden;
 }
 .hero-rain-line {
 position: absolute;
 width:1px;
 background: linear-gradient(to bottom, transparent, rgba(160,220,255,0.5), transparent);
 animation: rainFall linear infinite;
 }
 @keyframes rainFall {
0% {
 transform: translateY(-120px);
 opacity:0;
 }
15% {
 opacity:1;
 }
85% {
 opacity:1;
 }
100% {
 transform: translateY(105vh);
 opacity:0;
 }
 }
 .hero-circle-glow {
 position: absolute;
 border-radius:50%;
 pointer-events: none;
 z-index:0;
 filter: blur(80px);
 opacity:0.22;
 }
 .hero-circle-glow-1 {
 width:500px;
 height:500px;
 background: rgba(29,140,255,0.25);
 top: -15%;
 right: -12%;
 }
 .hero-circle-glow-2 {
 width:350px;
 height:350px;
 background: rgba(104,215,255,0.20);
 bottom: -8%;
 left: -8%;
 }
 @media (max-width:767px) {
 .hero-circle-glow-1 {
 width:280px;
 height:280px;
 top: -10%;
 right: -20%;
 }
 .hero-circle-glow-2 {
 width:200px;
 height:200px;
 }
 }

 .hero-inner {
 position: relative;
 z-index:2;
 }
 .hero-badge-row {
 display: flex;
 flex-wrap: wrap;
 gap:10px;
 margin-bottom:18px;
 }
 @media (min-width:768px) {
 .hero-badge-row {
 margin-bottom:22px;
 }
 }
 .hero-h1 {
 margin-bottom:16px;
 max-width:620px;
 }
 @media (min-width:768px) {
 .hero-h1 {
 margin-bottom:20px;
 }
 }
 .hero-subtitle {
 font-size:17px;
 color: var(--color-muted);
 max-width:540px;
 line-height:1.7;
 margin-bottom:28px;
 }
 @media (min-width:768px) {
 .hero-subtitle {
 font-size:18px;
 margin-bottom:34px;
 }
 }
 .hero-cta-row {
 display: flex;
 flex-wrap: wrap;
 gap:14px;
 margin-bottom:28px;
 }
 @media (min-width:768px) {
 .hero-cta-row {
 margin-bottom:36px;
 }
 }
 .hero-trust-row {
 display: flex;
 flex-wrap: wrap;
 gap:16px;
 }
 .hero-trust-item {
 display: flex;
 align-items: center;
 gap:7px;
 font-size:13px;
 color: var(--color-muted);
 letter-spacing:0.02em;
 }
 .hero-trust-item i {
 color: var(--color-accent);
 font-size:11px;
 }

 .hero-panel-card {
 background: var(--color-glass-bg);
 backdrop-filter: blur(18px) saturate(140%);
 -webkit-backdrop-filter: blur(18px) saturate(140%);
 border:1px solid var(--color-border);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-lg), inset01px0 rgba(255,255,255,0.07);
 padding:24px22px;
 position: relative;
 overflow: hidden;
 }
 @media (min-width:768px) {
 .hero-panel-card {
 padding:32px28px;
 }
 }
 .hero-panel-card::before {
 content: '';
 position: absolute;
 top: -30%;
 right: -20%;
 width:200px;
 height:200px;
 border-radius:50%;
 background: radial-gradient(circle, rgba(29,140,255,0.15)0%, transparent70%);
 pointer-events: none;
 }
 .hero-panel-title {
 font-size:13px;
 font-weight:700;
 letter-spacing:0.06em;
 text-transform: uppercase;
 color: var(--color-cyan);
 margin-bottom:16px;
 }
 .hero-panel-data-row {
 display: grid;
 grid-template-columns:1fr1fr;
 gap:14px;
 margin-bottom:18px;
 }
 .hero-panel-data-item {
 background: rgba(255,255,255,0.03);
 border-radius: var(--radius-sm);
 padding:14px16px;
 border:1px solid rgba(160,220,255,0.08);
 }
 .hero-panel-data-value {
 font-size:22px;
 font-weight:700;
 color: #ffffff;
 letter-spacing: -0.01em;
 line-height:1.1;
 }
 .hero-panel-data-label {
 font-size:11px;
 color: var(--color-muted-2);
 letter-spacing:0.04em;
 text-transform: uppercase;
 margin-top:4px;
 }
 .hero-panel-bar {
 height:3px;
 border-radius:3px;
 background: rgba(160,220,255,0.15);
 overflow: hidden;
 margin-top:10px;
 }
 .hero-panel-bar-fill {
 height:100%;
 border-radius:3px;
 background: linear-gradient(90deg, var(--color-primary), var(--color-cyan));
 box-shadow:008px rgba(104,215,255,0.4);
 }
 .hero-panel-mini-cards {
 display: flex;
 gap:10px;
 margin-top:14px;
 }
 .hero-panel-mini-card {
 flex:1;
 background: rgba(255,255,255,0.025);
 border-radius:12px;
 padding:12px14px;
 border:1px solid rgba(160,220,255,0.10);
 font-size:12px;
 color: var(--color-muted);
 text-align: center;
 letter-spacing:0.02em;
 }
 .hero-panel-mini-card strong {
 display: block;
 color: #ffffff;
 font-size:16px;
 margin-bottom:3px;
 }
 .hero-umbrella-arc {
 position: absolute;
 bottom: -30px;
 right: -20px;
 width:160px;
 height:100px;
 border-radius:50%50%00;
 border:2px solid rgba(160,220,255,0.20);
 border-bottom: none;
 pointer-events: none;
 opacity:0.5;
 }
 @media (max-width:767px) {
 .hero-umbrella-arc {
 width:100px;
 height:65px;
 bottom: -18px;
 right: -10px;
 }
 }

 /* ====================指标看板 ==================== */
 .metrics-section {
 position: relative;
 z-index:1;
 }
 .metrics-grid {
 display: grid;
 grid-template-columns:1fr;
 gap:18px;
 }
 @media (min-width:768px) {
 .metrics-grid {
 grid-template-columns:1.4fr1fr;
 gap:22px;
 }
 }
 @media (min-width:1024px) {
 .metrics-grid {
 grid-template-columns:1.5fr1fr;
 gap:26px;
 }
 }
 .metrics-main-card {
 padding:28px24px;
 }
 @media (min-width:768px) {
 .metrics-main-card {
 padding:34px30px;
 }
 }
 .metrics-main-title {
 font-size:20px;
 font-weight:700;
 margin-bottom:6px;
 }
 .metrics-main-desc {
 font-size:14px;
 color: var(--color-muted);
 margin-bottom:20px;
 }
 .metrics-flow {
 display: flex;
 flex-wrap: wrap;
 gap:10px;
 align-items: center;
 }
 .metrics-flow-step {
 background: rgba(255,255,255,0.04);
 border-radius: var(--radius-sm);
 padding:14px18px;
 border:1px solid rgba(160,220,255,0.10);
 font-size:13px;
 color: var(--color-text);
 letter-spacing:0.02em;
 flex:1;
 min-width:100px;
 text-align: center;
 font-weight:500;
 }
 .metrics-flow-arrow {
 color: var(--color-cyan);
 font-size:16px;
 flex-shrink:0;
 }
 @media (max-width:767px) {
 .metrics-flow {
 flex-direction: column;
 gap:8px;
 }
 .metrics-flow-arrow {
 transform: rotate(90deg);
 align-self: center;
 }
 }
 .metrics-small-grid {
 display: grid;
 grid-template-columns:1fr1fr;
 gap:14px;
 }
 @media (max-width:767px) {
 .metrics-small-grid {
 grid-template-columns:1fr1fr;
 gap:10px;
 }
 }
 .metrics-small-card {
 padding:18px16px;
 text-align: center;
 }
 @media (min-width:768px) {
 .metrics-small-card {
 padding:22px18px;
 }
 }
 .metrics-small-icon {
 font-size:26px;
 color: var(--color-cyan);
 margin-bottom:8px;
 }
 .metrics-small-value {
 font-size:18px;
 font-weight:700;
 color: #ffffff;
 letter-spacing: -0.01em;
 }
 .metrics-small-label {
 font-size:12px;
 color: var(--color-muted-2);
 margin-top:3px;
 letter-spacing:0.03em;
 }
 .metrics-progress {
 height:4px;
 border-radius:4px;
 background: rgba(160,220,255,0.12);
 margin-top:10px;
 overflow: hidden;
 }
 .metrics-progress-fill {
 height:100%;
 border-radius:4px;
 background: linear-gradient(90deg, var(--color-accent), var(--color-cyan));
 }

 /* ====================服务矩阵 ==================== */
 .services-section {
 position: relative;
 z-index:1;
 }
 .services-mosaic {
 display: grid;
 grid-template-columns:1fr;
 gap:18px;
 }
 @media (min-width:768px) {
 .services-mosaic {
 grid-template-columns:1.3fr1fr;
 grid-template-rows: auto auto;
 gap:20px;
 }
 }
 @media (min-width:1024px) {
 .services-mosaic {
 grid-template-columns:1.4fr1fr1fr;
 grid-template-rows: auto auto;
 gap:22px;
 }
 }
 .services-main-card {
 padding:30px26px;
 grid-row: span2;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 }
 @media (min-width:768px) {
 .services-main-card {
 padding:36px30px;
 }
 }
 @media (max-width:767px) {
 .services-main-card {
 grid-row: span1;
 }
 }
 .services-main-icon {
 font-size:36px;
 color: var(--color-cyan);
 margin-bottom:14px;
 }
 .services-main-title {
 font-size:22px;
 font-weight:700;
 margin-bottom:8px;
 }
 .services-main-desc {
 font-size:14px;
 color: var(--color-muted);
 line-height:1.7;
 margin-bottom:16px;
 }
 .services-main-features {
 list-style: none;
 padding:0;
 margin:0018px0;
 }
 .services-main-features li {
 padding:7px0;
 font-size:14px;
 color: var(--color-text);
 display: flex;
 align-items: center;
 gap:8px;
 border-bottom:1px solid rgba(160,220,255,0.06);
 }
 .services-main-features li i {
 color: var(--color-accent);
 font-size:11px;
 flex-shrink:0;
 }
 .services-sub-card {
 padding:22px18px;
 display: flex;
 flex-direction: column;
 gap:8px;
 }
 @media (min-width:768px) {
 .services-sub-card {
 padding:24px20px;
 }
 }
 .services-sub-icon {
 font-size:24px;
 color: var(--color-primary-soft);
 margin-bottom:4px;
 }
 .services-sub-title {
 font-size:17px;
 font-weight:700;
 }
 .services-sub-desc {
 font-size:13px;
 color: var(--color-muted);
 line-height:1.6;
 }

 /* ====================场景亮点横向带 ==================== */
 .scenes-section {
 position: relative;
 z-index:1;
 overflow: hidden;
 }
 .scenes-scroll {
 display: flex;
 gap:16px;
 overflow-x: auto;
 padding-bottom:12px;
 scroll-snap-type: x proximity;
 -webkit-overflow-scrolling: touch;
 scrollbar-width: thin;
 scrollbar-color: rgba(160,220,255,0.2) transparent;
 }
 .scenes-scroll::-webkit-scrollbar {
 height:4px;
 }
 .scenes-scroll::-webkit-scrollbar-track {
 background: transparent;
 }
 .scenes-scroll::-webkit-scrollbar-thumb {
 background: rgba(160,220,255,0.25);
 border-radius:4px;
 }
 .scene-chip {
 flex-shrink:0;
 scroll-snap-align: start;
 display: flex;
 align-items: center;
 gap:10px;
 padding:14px22px;
 border-radius: var(--radius-pill);
 background: var(--color-glass-bg);
 backdrop-filter: blur(14px) saturate(130%);
 -webkit-backdrop-filter: blur(14px) saturate(130%);
 border:1px solid var(--color-border);
 cursor: default;
 transition: all var(--transition-base);
 white-space: nowrap;
 font-size:14px;
 font-weight:500;
 color: var(--color-text);
 letter-spacing:0.02em;
 }
 .scene-chip:hover {
 border-color: var(--color-border-hover);
 background: rgba(29,140,255,0.10);
 box-shadow: var(--shadow-sm);
 transform: translateY(-2px);
 }
 .scene-chip i {
 font-size:18px;
 color: var(--color-cyan);
 flex-shrink:0;
 }

 /* ====================结果对比 ==================== */
 .compare-section {
 position: relative;
 z-index:1;
 }
 .compare-grid {
 display: grid;
 grid-template-columns:1fr;
 gap:20px;
 }
 @media (min-width:768px) {
 .compare-grid {
 grid-template-columns:1fr1fr;
 gap:28px;
 }
 }
 .compare-card {
 padding:28px24px;
 }
 @media (min-width:768px) {
 .compare-card {
 padding:34px28px;
 }
 }
 .compare-card.is-pain {
 border-color: rgba(255,180,140,0.16);
 background: rgba(20,25,36,0.55);
 }
 .compare-card.is-gain {
 border-color: rgba(155,244,213,0.20);
 background: rgba(13,34,44,0.50);
 }
 .compare-card-header {
 display: flex;
 align-items: center;
 gap:10px;
 margin-bottom:18px;
 }
 .compare-card-badge {
 display: inline-block;
 padding:5px14px;
 border-radius: var(--radius-pill);
 font-size:12px;
 font-weight:700;
 letter-spacing:0.05em;
 }
 .badge-pain {
 background: rgba(255,150,80,0.15);
 color: #ffb88c;
 border:1px solid rgba(255,150,80,0.25);
 }
 .badge-gain {
 background: rgba(155,244,213,0.14);
 color: var(--color-accent);
 border:1px solid rgba(155,244,213,0.25);
 }
 .compare-list {
 list-style: none;
 padding:0;
 margin:0;
 }
 .compare-list li {
 display: flex;
 align-items: flex-start;
 gap:10px;
 padding:10px0;
 font-size:14px;
 color: var(--color-text);
 border-bottom:1px solid rgba(160,220,255,0.05);
 line-height:1.5;
 }
 .compare-list li i {
 flex-shrink:0;
 margin-top:3px;
 font-size:12px;
 }
 .icon-pain {
 color: #ff9a6c;
 }
 .icon-gain {
 color: var(--color-accent);
 }
 .compare-divider-visual {
 display: flex;
 align-items: center;
 justify-content: center;
 gap:8px;
 padding:10px0;
 color: var(--color-cyan);
 font-size:13px;
 font-weight:600;
 letter-spacing:0.04em;
 }
 @media (min-width:768px) {
 .compare-divider-visual {
 display: none;
 }
 }
 .compare-divider-desktop {
 display: none;
 }
 @media (min-width:768px) {
 .compare-divider-desktop {
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 left:50%;
 top:50%;
 transform: translate(-50%, -50%);
 z-index:2;
 pointer-events: none;
 flex-direction: column;
 gap:6px;
 color: var(--color-cyan);
 font-weight:600;
 font-size:13px;
 letter-spacing:0.04em;
 }
 .compare-divider-desktop .divider-line {
 width:1.5px;
 height:40px;
 background: linear-gradient(to bottom, transparent, var(--color-cyan), transparent);
 }
 }

 /* ==================== FAQ ==================== */
 .faq-section {
 position: relative;
 z-index:1;
 }
 .faq-grid {
 display: grid;
 grid-template-columns:1fr;
 gap:30px;
 }
 @media (min-width:768px) {
 .faq-grid {
 grid-template-columns:0.8fr1.2fr;
 gap:40px;
 }
 }
 .faq-left h2 {
 margin-bottom:10px;
 }
 .faq-left p {
 color: var(--color-muted);
 font-size:15px;
 }

 .accordion-faq {
 list-style: none;
 padding:0;
 margin:0;
 display: flex;
 flex-direction: column;
 gap:12px;
 }
 .accordion-faq-item {
 background: var(--color-glass-bg);
 backdrop-filter: blur(14px) saturate(130%);
 -webkit-backdrop-filter: blur(14px) saturate(130%);
 border:1px solid var(--color-border);
 border-radius: var(--radius-sm);
 overflow: hidden;
 transition: all var(--transition-base);
 }
 .accordion-faq-item:hover {
 border-color: var(--color-border-hover);
 }
 .accordion-faq-item.is-active {
 border-color: rgba(104,215,255,0.35);
 box-shadow:0020px rgba(29,140,255,0.08);
 }
 .accordion-faq-title {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding:16px20px;
 cursor: pointer;
 font-weight:600;
 font-size:15px;
 color: var(--color-text-strong);
 letter-spacing:0.02em;
 transition: color var(--transition-fast);
 user-select: none;
 gap:12px;
 }
 .accordion-faq-title:hover {
 color: #ffffff;
 }
 .accordion-faq-icon {
 flex-shrink:0;
 width:28px;
 height:28px;
 border-radius:50%;
 background: rgba(160,220,255,0.10);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size:12px;
 color: var(--color-cyan);
 transition: all var(--transition-base);
 }
 .accordion-faq-item.is-active .accordion-faq-icon {
 background: rgba(104,215,255,0.18);
 transform: rotate(45deg);
 color: #ffffff;
 }
 .accordion-faq-content {
 max-height:0;
 overflow: hidden;
 transition: max-height0.4s ease, padding0.3s ease;
 }
 .accordion-faq-item.is-active .accordion-faq-content {
 max-height:300px;
 }
 .accordion-faq-body {
 padding:020px18px20px;
 font-size:14px;
 color: var(--color-muted);
 line-height:1.75;
 }

 /* ==================== CTA表单 ==================== */
 .cta-section {
 position: relative;
 z-index:1;
 }
 .cta-panel {
 display: grid;
 grid-template-columns:1fr;
 gap:28px;
 padding:32px24px;
 background: var(--color-glass-bg);
 backdrop-filter: blur(18px) saturate(140%);
 -webkit-backdrop-filter: blur(18px) saturate(140%);
 border:1px solid var(--color-border);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-lg), inset01px0 rgba(255,255,255,0.07),0060px rgba(29,140,255,0.06);
 position: relative;
 overflow: hidden;
 }
 @media (min-width:768px) {
 .cta-panel {
 grid-template-columns:1fr1.2fr;
 padding:40px34px;
 gap:36px;
 }
 }
 .cta-panel::before {
 content: '';
 position: absolute;
 top: -20%;
 right: -10%;
 width:300px;
 height:300px;
 border-radius:50%;
 background: radial-gradient(circle, rgba(104,215,255,0.10)0%, transparent65%);
 pointer-events: none;
 }
 .cta-left {
 position: relative;
 z-index:1;
 }
 .cta-left h2 {
 margin-bottom:10px;
 }
 .cta-left p {
 color: var(--color-muted);
 font-size:15px;
 margin-bottom:18px;
 }
 .cta-steps {
 list-style: none;
 padding:0;
 margin:0;
 display: flex;
 flex-direction: column;
 gap:12px;
 }
 .cta-steps li {
 display: flex;
 align-items: center;
 gap:12px;
 font-size:14px;
 color: var(--color-text);
 }
 .cta-step-num {
 width:32px;
 height:32px;
 border-radius:50%;
 background: rgba(104,215,255,0.15);
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight:700;
 font-size:14px;
 color: var(--color-cyan);
 flex-shrink:0;
 }
 .cta-right {
 position: relative;
 z-index:1;
 }
 .form-group {
 margin-bottom:16px;
 }
 .form-group label {
 display: block;
 font-size:13px;
 font-weight:600;
 color: var(--color-text);
 margin-bottom:6px;
 letter-spacing:0.03em;
 }
 .form-input {
 width:100%;
 padding:13px16px;
 border-radius: var(--radius-sm);
 background: rgba(10,22,42,0.55);
 border:1.5px solid rgba(160,220,255,0.18);
 color: #ffffff;
 font-size:15px;
 transition: all var(--transition-fast);
 outline: none;
 font-family: var(--font-stack);
 }
 .form-input::placeholder {
 color: var(--color-muted-2);
 }
 .form-input:focus {
 border-color: rgba(104,215,255,0.55);
 box-shadow:0004px rgba(29,140,255,0.08),0016px rgba(104,215,255,0.12);
 background: rgba(14,28,50,0.65);
 }
 textarea.form-input {
 resize: vertical;
 min-height:100px;
 }
 .form-submit-row {
 display: flex;
 align-items: center;
 gap:14px;
 flex-wrap: wrap;
 }
 .form-privacy {
 font-size:12px;
 color: var(--color-muted-2);
 margin-top:8px;
 letter-spacing:0.02em;
 }
 .form-success-msg {
 display: none;
 padding:16px20px;
 background: rgba(155,244,213,0.08);
 border:1px solid rgba(155,244,213,0.25);
 border-radius: var(--radius-sm);
 color: var(--color-accent);
 font-weight:500;
 font-size:14px;
 margin-top:12px;
 }
 .form-success-msg.show {
 display: block;
 }

 /* ====================页脚 ==================== */
 .site-footer {
 position: relative;
 z-index:1;
 border-top:1px solid rgba(160,220,255,0.10);
 background: rgba(6,15,30,0.70);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 }
 .footer-grid {
 display: grid;
 grid-template-columns:1fr;
 gap:28px;
 }
 @media (min-width:768px) {
 .footer-grid {
 grid-template-columns:1.4fr1fr1fr1fr;
 gap:32px;
 }
 }
 .footer-brand .nav-logo {
 margin-bottom:10px;
 }
 .footer-brand p {
 font-size:13px;
 color: var(--color-muted-2);
 line-height:1.7;
 max-width:260px;
 }
 .footer-col h4 {
 font-size:14px;
 font-weight:700;
 letter-spacing:0.04em;
 margin-bottom:14px;
 color: var(--color-text-strong);
 }
 .footer-col ul {
 list-style: none;
 padding:0;
 margin:0;
 display: flex;
 flex-direction: column;
 gap:8px;
 }
 .footer-col ul li a {
 font-size:13px;
 color: var(--color-muted);
 text-decoration: none;
 transition: color var(--transition-fast);
 letter-spacing:0.02em;
 }
 .footer-col ul li a:hover {
 color: var(--color-cyan);
 }
 .footer-bottom {
 margin-top:36px;
 padding-top:20px;
 border-top:1px solid rgba(160,220,255,0.08);
 display: flex;
 flex-wrap: wrap;
 gap:12px;
 justify-content: space-between;
 align-items: center;
 font-size:12px;
 color: var(--color-muted-2);
 }
 .footer-bottom a {
 color: var(--color-muted);
 font-size:12px;
 }
 .footer-bottom a:hover {
 color: var(--color-cyan);
 }

 /* ====================响应式补充 ==================== */
 @media (max-width:767px) {
 .hero-panel-card {
 margin-top:24px;
 }
 .btn-primary,
 .btn-secondary {
 width:100%;
 justify-content: center;
 }
 .hero-cta-row {
 flex-direction: column;
 }
 .services-mosaic {
 grid-template-columns:1fr;
 }
 }
 @media (min-width:768px) and (max-width:1023px) {
 .hero-h1 {
 font-size:42px;
 }
 .metrics-grid {
 grid-template-columns:1fr1fr;
 }
 .services-mosaic {
 grid-template-columns:1.2fr1fr;
 }
 .services-main-card {
 grid-row: span2;
 }
 }

 @media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
 animation-duration:0.01ms !important;
 animation-iteration-count:1 !important;
 transition-duration:0.01ms !important;
 }
 body::after {
 animation: none;
 }
 .hero-rain-line {
 animation: none;
 opacity:0.15;
 }
 }