@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/space-grotesk-latin-wght.woff2?v=c0781ea2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/space-mono-latin-400.woff2?v=e2ee2d37") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/space-mono-latin-700.woff2?v=d0c504bd") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
:root { --px: 64px; }
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }
body { margin: 0; background: #FFFFFF; font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC', system-ui, sans-serif; color: #0B0D12; -webkit-text-size-adjust: 100%; }
a { text-decoration: none; color: inherit; }
.disp { font-family: 'Space Grotesk', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC', sans-serif; }
.mono { font-family: 'Space Mono', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC', monospace; }
.snap { scroll-snap-align: start; }
.screen { min-height: 100vh; min-height: 100svh; box-sizing: border-box; }
.nav { position: sticky; top: 0; z-index: 50; height: 72px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--px); background: rgba(255,255,255,0.74); backdrop-filter: blur(16px); color: #0B0D12; border-bottom: 1px solid rgba(11,13,18,0.06); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-cta { cursor: pointer; background: #0B0D12; color: #FFFFFF; font-size: calc(13px * var(--fz, 1)); font-weight: 600; padding: 10px 22px; border-radius: 999px; }
.menu-btn { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(11,13,18,0.22); border-radius: 999px; padding: 9px 18px; font-size: calc(13px * var(--fz, 1)); cursor: pointer; transition: background 0.15s ease; user-select: none; }
.menu-btn:hover { background: rgba(11,13,18,0.06); }
.menu-bars { display: flex; flex-direction: column; gap: 4px; }
.menu-bars i { display: block; width: 14px; height: 2px; background: #0B0D12; border-radius: 1px; }
.logo-nav { display: block; width: 62px; height: 30px; }
.logo-menu { display: block; width: 70px; height: 34px; }
.logo-foot { display: block; width: 78px; height: 38px; }
.hero { position: relative; margin-top: -72px; padding-top: 72px; box-sizing: border-box; min-height: 100vh; min-height: max(100svh, 680px); background: linear-gradient(180deg, #F7FAFF 0%, #FFF9F4 100%); color: #0B0D12; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hero-h1 { font-size: calc(76px * var(--fz, 1)); font-weight: 600; line-height: 1.16; letter-spacing: -0.01em; margin: 0 0 44px 0; background: linear-gradient(95deg, #009DA0 0%, #5B3FD1 52%, #E8541F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-chips { display: none; justify-content: center; flex-wrap: wrap; gap: 12px; }
.glass-chip { background: rgba(255,255,255,0.88); border: 1px solid rgba(11,13,18,0.08); color: #0B0D12; border-radius: 999px; padding: 10px 22px; font-size: calc(14px * var(--fz, 1)); box-shadow: 0 8px 22px rgba(11,13,18,0.07); transition: background 0.15s ease, transform 0.15s ease; cursor: pointer; }
.glass-chip:hover { background: #FFFFFF; transform: translateY(-2px); }
@keyframes yb-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes yb-spin-r { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes yb-flow { to { stroke-dashoffset: -22; } }
@keyframes yb-pulse { 0% { transform: scale(0.92); opacity: 0.6; } 100% { transform: scale(1.55); opacity: 0; } }
.hero-aurora { position: absolute; width: 780px; height: 780px; border-radius: 50%; filter: blur(22px); opacity: 0.85; pointer-events: none; }
.orbits { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.orbit { position: absolute; border-radius: 50%; border: 1px dashed rgba(11,13,18,0.17); box-sizing: border-box; }
.o1 { width: 640px; height: 640px; left: -320px; top: -320px; animation: yb-spin 150s linear infinite; }
.o2 { width: 1010px; height: 1010px; left: -505px; top: -505px; border-color: rgba(11,13,18,0.12); animation: yb-spin-r 210s linear infinite; }
.o3 { width: 1440px; height: 1440px; left: -720px; top: -720px; border-color: rgba(11,13,18,0.09); animation: yb-spin 300s linear infinite; }
.od { position: absolute; left: 50%; margin-left: -4px; width: 8px; height: 8px; border-radius: 50%; }
.hero-links { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.hl { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 8; }
.fl { animation: yb-flow 2.4s linear infinite; }
.hn { position: absolute; z-index: 3; width: 236px; box-sizing: border-box; padding: 16px 18px 14px 18px; border-radius: 18px; background: rgba(255,255,255,0.82); border: 1px solid rgba(255,255,255,0.95); box-shadow: 0 16px 40px rgba(11,13,18,0.10); backdrop-filter: blur(10px); transform: translate(-50%, -50%); text-align: left; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.hn:hover { box-shadow: 0 22px 50px rgba(11,13,18,0.16); }
.hn-cap, .mp-cap { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: calc(12px * var(--fz, 1)); color: #6B7280; }
.hn-cap i, .mp-cap i { display: block; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.hl-yb { display: block; width: 54px; height: 26px; }
.hl-hw { display: block; width: 148px; height: 21px; }
.hl-hp { display: block; width: 119px; height: 21px; }
.hl-xz { display: block; width: 90px; height: 34px; }
.cdot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.chap-dots { display: flex; align-items: center; gap: 8px; }
.chap-dots b { display: block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid; box-sizing: border-box; opacity: 0.55; }
.st-in { position: relative; width: 100%; max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.map { position: relative; height: 620px; container-type: size; }
.mp-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.mp-ring { fill: none; stroke: #C9CED8; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 6; }
.mp-spoke { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 4 7; }
.mp-node { position: absolute; width: 210px; width: max(132px, 31cqw); box-sizing: border-box; padding: 16px 18px; border-radius: 18px; background: #FFFFFF; border: 1px solid #E5E7EB; box-shadow: 0 14px 34px rgba(11,13,18,0.08); transform: translate(-50%, -50%); z-index: 3; }
.mp-dark { background: #0B0D12; border-color: #0B0D12; }
.mp-cap { margin-top: 10px; color: #6B7280; }
.mp-dark .mp-cap { color: rgba(255,255,255,0.7); }
.mp-yb { display: block; width: 62px; height: 30px; }
.mp-hw { display: block; width: 148px; height: 21px; }
.mp-hp { display: block; width: 119px; height: 21px; }
.mp-xz { display: block; width: 90px; height: 34px; }
.mp-elbl { position: absolute; transform: translate(-50%, -50%); background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 999px; padding: 3px 12px; font-size: calc(11px * var(--fz, 1)); color: #4B5563; z-index: 2; white-space: nowrap; }
.mp-hub { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; transform: translate(-50%, -50%); z-index: 4; }
.mp-pulse { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(47,107,255,0.4); animation: yb-pulse 3.2s ease-out infinite; }
.mp-ringsvg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.mp-hub-in { position: absolute; left: 15%; top: 15%; width: 70%; height: 70%; border-radius: 50%; background: #10131A; display: flex; align-items: center; justify-content: center; }
.mp-person { display: block; width: 56%; height: 56%; }
.mp-sparkbadge { position: absolute; right: -4%; top: -4%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #6FE38A; display: flex; align-items: center; justify-content: center; }
.mp-spark { display: block; width: 66%; height: 66%; }
.mp-orb { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: yb-spin 16s linear infinite; }
.mp-orb i { position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .orbit, .fl, .mp-orb, .mp-pulse { animation: none !important; } }
.statement { position: relative; background: #F5F6F8; padding: 120px var(--px); display: flex; align-items: center; overflow: hidden; }
.statement-t { position: relative; font-size: calc(54px * var(--fz, 1)); line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; }
.chap { position: relative; padding: 120px var(--px); display: flex; align-items: center; overflow: hidden; }
.chap-light { background: #FFFFFF; }
.chap-blue { background: #F2F5FA; }
.chap-teal { background: radial-gradient(780px 640px at 73% 50%, rgba(0,199,200,0.32), rgba(0,199,200,0) 66%), linear-gradient(160deg, #075058 0%, #053F47 55%, #04323A 100%); color: #FFFFFF; }
.chap-teal .chap-idx { color: rgba(255,255,255,0.55); }
.chap-teal .chap-idx .cur { color: #FFFFFF; }
.chap-teal .biz-desc { color: rgba(232,251,251,0.92); }
.chap-teal .chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); color: #E8FBFB; }
.chap-teal .aud-row { color: rgba(214,243,243,0.82); }
.chap-teal .art { box-shadow: 0 30px 80px rgba(0,0,0,0.38), 0 0 0 1px rgba(255,255,255,0.1); }
.chap-deco { position: absolute; left: 73%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 1; }
.cd-ring { position: absolute; left: 0; top: 0; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; transform: translate(-50%, -50%); box-sizing: border-box; }
.cd-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #19D9DA; box-shadow: 0 0 14px #19D9DA; }
.chap-dark { background: #080B08; color: #FFFFFF; }
.chap-paper { background: #F3F0FB; }
.chap-in { position: relative; z-index: 2; width: 100%; max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 80px; align-items: center; }
.chap.rev .chap-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.chap.rev .chap-text { order: 2; }
.chap.rev .art { order: 1; }
.chap-idx { display: flex; align-items: center; gap: 14px; font-size: calc(12px * var(--fz, 1)); color: #9CA3AF; margin-bottom: 32px; }
.chap-idx i { display: block; width: 56px; height: 1px; background: currentColor; opacity: 0.5; }
.chap-idx .cur { color: #0B0D12; font-weight: 700; }
.chap-dark .chap-idx { color: #5F775F; }
.chap-dark .chap-idx .cur { color: #FFFFFF; }
.chap-cat { font-size: calc(14px * var(--fz, 1)); font-weight: 700; margin-bottom: 20px; }
.biz-name { font-size: calc(104px * var(--fz, 1)); font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.biz-logo { display: block; width: 196px; height: 94px; }
.biz-logo-w { display: block; width: 340px; height: auto; aspect-ratio: 2.816; }
.xz-logo { background-image: url("/assets/img/xinzhihui.webp?v=13a00d96"); background-size: contain; background-repeat: no-repeat; background-position: left center; }
.wm-hw, .wm-hp { display: block; }
.wm-hw { width: 505.8px; height: 72px; } .wm-hp { width: 409.1px; height: 72px; }
.biz-desc { font-size: calc(20px * var(--fz, 1)); line-height: 1.75; color: #4B5563; margin: 28px 0 24px 0; }
.chap-dark .biz-desc { color: #9DB59D; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { border: 1px solid #D1D5DB; border-radius: 999px; padding: 6px 14px; font-size: calc(13px * var(--fz, 1)); color: #374151; background: #FFFFFF; }
.chap-dark .chip { background: transparent; border-color: #2A3A2A; color: #B8D4B8; }
.chap-paper .chip { background: #FFFFFF; border-color: #D8CEEF; }
.aud-row { margin-top: 20px; font-size: calc(13px * var(--fz, 1)); color: #6B7280; }
.chap-dark .aud-row { color: #6F8A6F; }
.aud { margin-left: 14px; display: inline-block; }
.aud-row + .aud-row { margin-top: 8px; }
.evo { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: calc(15px * var(--fz, 1)); font-weight: 700; margin: -6px 0 26px 0; }
.evo i { font-style: normal; font-weight: 400; color: #9CA3AF; }
.evo .on { color: #FF6A3D; }
.chips.six { max-width: 380px; }
.custom { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 460px; box-sizing: border-box; margin-top: 22px; padding: 14px 16px 14px 20px; border-radius: 18px; background: #FFFFFF; border: 1px solid #D8CEEF; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.custom:hover { border-color: #4A1FA0; box-shadow: 0 10px 28px rgba(74,31,160,0.12); }
.custom-t { font-size: calc(14px * var(--fz, 1)); font-weight: 700; color: #4A1FA0; }
.custom-s { font-size: calc(13px * var(--fz, 1)); color: #4B5563; margin-top: 4px; }
.custom-a { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #4A1FA0; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: calc(14px * var(--fz, 1)); }
.chips-cap { font-size: calc(13px * var(--fz, 1)); font-weight: 700; color: #4A1FA0; margin: 0 0 12px 0; }
.chip-sep { display: inline-block; width: 1px; height: 11px; background: #C9C2E6; margin: 0 10px; vertical-align: -1px; }
.chap-cta { cursor: pointer; display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-size: calc(15px * var(--fz, 1)); font-weight: 600; padding-bottom: 5px; border-bottom: 1px solid currentColor; }
.art { position: relative; height: 600px; border-radius: 32px; overflow: hidden; box-sizing: border-box; }
.dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #6FE38A; box-shadow: 0 0 18px #6FE38A; transform: translate(-50%, -50%); }
.dot-s { width: 7px; height: 7px; opacity: 0.7; }
.lbl { position: absolute; font-size: calc(12px * var(--fz, 1)); color: #B8F5C8; transform: translate(16px, -50%); white-space: nowrap; }
.tagp { position: absolute; transform: translate(-50%, -50%); background: #151B2B; border: 1px solid rgba(255,255,255,0.2); color: #D5DAE6; font-size: calc(13px * var(--fz, 1)); padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.hub { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); border-radius: 50%; background: #10131A; border: 2px solid #6FE38A; box-shadow: 0 0 40px rgba(111,227,138,0.45); display: flex; align-items: center; justify-content: center; }
.ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(111,227,138,0.22); }
.art-ring { container-type: size; }
.ring-stage { position: absolute; left: 50%; top: 50%; width: 90%; aspect-ratio: 1; width: 92cqmin; height: 92cqmin; transform: translate(-50%, -50%); }
.rs-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.rs-ringlbl { position: absolute; transform: translate(-50%, -50%); background: #10182A; border: 1px solid rgba(111,227,138,0.45); color: #DDF7E5; font-size: calc(11px * var(--fz, 1)); padding: 2px 9px; border-radius: 999px; white-space: nowrap; letter-spacing: 0.08em; z-index: 4; }
.rs-av { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: 3; }
.rs-avb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.88); box-sizing: border-box; }
.rs-h { position: absolute; left: 50%; top: 20%; width: 36%; height: 36%; border-radius: 50%; transform: translateX(-50%); }
.rs-s { position: absolute; left: 50%; bottom: -16%; width: 80%; height: 56%; border-radius: 50% 50% 0 0; transform: translateX(-50%); }
.rs-badge { position: absolute; right: -14%; bottom: -8%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: #10182A; border: 1.5px solid rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.rs-badge svg { display: block; width: 66%; height: 66%; }
.rs-aibadge { position: absolute; right: -12%; top: -12%; width: 38%; aspect-ratio: 1; border-radius: 50%; background: #6FE38A; box-shadow: 0 0 12px rgba(111,227,138,0.8); display: flex; align-items: center; justify-content: center; }
.rs-aibadge svg { display: block; width: 68%; height: 68%; }
.rs-aibadge-l { right: auto; left: -12%; }
.rs-name { position: absolute; left: 50%; top: 104%; transform: translateX(-50%); white-space: nowrap; font-size: calc(11px * var(--fz, 1)); font-size: calc(max(9px, 1.9cqmin) * var(--fz, 1)); color: #C9D6E6; }
.rs-ai { position: absolute; transform: translate(-50%, -50%); width: 8.6%; aspect-ratio: 1; border-radius: 24%; background: #0F2A1C; border: 1.5px solid #6FE38A; box-shadow: 0 0 22px rgba(111,227,138,0.55); display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-weight: 700; font-size: calc(15px * var(--fz, 1)); font-size: calc(max(11px, 2.6cqmin) * var(--fz, 1)); color: #6FE38A; z-index: 3; }
.rs-ai-w { font-size: calc(11px * var(--fz, 1)); font-size: calc(max(8px, 1.8cqmin) * var(--fz, 1)); }
.rs-name-opc { top: 134%; }
.rs-opcring { position: absolute; left: -20%; top: -20%; width: 140%; height: 140%; border-radius: 50%; border: 1.5px dashed rgba(111,227,138,0.75); box-sizing: border-box; }
.rs-grp { position: absolute; transform: translate(-50%, -50%); background: rgba(111,227,138,0.12); border: 1px solid rgba(111,227,138,0.4); color: #DDF7E5; font-size: calc(11px * var(--fz, 1)); padding: 2px 9px; border-radius: 999px; white-space: nowrap; z-index: 4; }
.rs-ai i { position: absolute; right: -22%; top: -22%; width: 40%; height: 40%; display: block; }
.rs-ai i svg { display: block; width: 100%; height: 100%; }
.rs-ailbl { position: absolute; transform: translateX(-50%); font-size: calc(11px * var(--fz, 1)); font-size: calc(max(9px, 1.9cqmin) * var(--fz, 1)); color: #9FE8B5; white-space: nowrap; z-index: 3; }
.rs-park { position: absolute; transform: translate(-50%, -50%); width: 4.6%; aspect-ratio: 1; border: 1.5px solid rgba(111,227,138,0.75); border-radius: 22%; box-sizing: border-box; background: #0B1A14; z-index: 3; }
.rs-park i { position: absolute; width: 22%; height: 22%; background: rgba(111,227,138,0.85); border-radius: 1px; }
.rs-park i:nth-child(1) { left: 22%; top: 22%; }
.rs-park i:nth-child(2) { left: 56%; top: 22%; }
.rs-park i:nth-child(3) { left: 22%; top: 56%; }
.rs-park i:nth-child(4) { left: 56%; top: 56%; }
.rs-city { position: absolute; transform: translate(-50%, -50%); width: 2.6%; aspect-ratio: 1; border-radius: 50%; background: #6FE38A; box-shadow: 0 0 14px #6FE38A; z-index: 3; }
.rs-city-s { width: 1.5%; opacity: 0.65; }
.rs-citylbl { position: absolute; transform: translate(12px, -50%); font-size: calc(11px * var(--fz, 1)); font-size: calc(max(9px, 1.9cqmin) * var(--fz, 1)); color: #B8F5C8; white-space: nowrap; z-index: 3; }
.rs-hub { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #10131A; border: 2px solid #6FE38A; box-shadow: 0 0 40px rgba(111,227,138,0.45); display: flex; align-items: center; justify-content: center; z-index: 3; }
.rs-cap { position: absolute; left: 28px; bottom: 22px; font-size: calc(11px * var(--fz, 1)); color: #6FE38A; letter-spacing: 0.12em; }
.pipe { position: relative; display: flex; align-items: center; }
.stage { flex: 1; min-width: 0; height: 140px; border-radius: 16px; border: 1.5px solid #FF6A3D; background: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; box-sizing: border-box; }
.stage.on { background: #FF6A3D; color: #FFFFFF; }
.stage-num { font-size: calc(11px * var(--fz, 1)); color: #FF6A3D; }
.stage.on .stage-num { color: #FFFFFF; }
.stage-t { font-size: calc(16px * var(--fz, 1)); font-weight: 700; }
.pipe-a { flex: 0 0 30px; text-align: center; color: #FF6A3D; font-size: calc(18px * var(--fz, 1)); }
.tiles { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.tile-b { aspect-ratio: 1; border-radius: 10px; border: 1.5px solid #FF6A3D; background: #FFFFFF; }
.tile-b.on { background: #FF6A3D; }
.mchip { border: 1px solid #2E4A2E; color: #7FE39A; border-radius: 999px; padding: 6px 14px; font-size: calc(11px * var(--fz, 1)); }
.bars { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 96px; }
.bars i { display: block; flex: 1; background: #6FE38A; opacity: 0.85; border-radius: 2px; }
.step { text-align: center; font-size: calc(13px * var(--fz, 1)); line-height: 1.5; color: #4B5563; position: relative; background: #FFFFFF; padding: 0 6px; }
.step b { display: flex; width: 28px; height: 28px; margin: 0 auto 10px auto; border-radius: 50%; border: 1.5px solid #4A1FA0; color: #4A1FA0; align-items: center; justify-content: center; font-size: calc(12px * var(--fz, 1)); background: #FFFFFF; }
.seat-grid { display: grid; grid-template-columns: repeat(10, 10px); gap: 8px; }
.seat-grid i { display: block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #4A1FA0; }
.sec { padding: 120px var(--px); display: flex; align-items: center; }
.sec-in { width: 100%; max-width: 1312px; margin: 0 auto; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 20px; border-bottom: 1px solid #0B0D12; margin-bottom: 40px; }
.cc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cc { position: relative; overflow: hidden; height: 360px; box-sizing: border-box; border-radius: 28px; padding: 28px; color: #FFFFFF; }
.cc-top { position: relative; z-index: 2; }
.cc-en { font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.14em; opacity: 0.8; margin-bottom: 10px; }
.cc-name { font-size: calc(44px * var(--fz, 1)); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.cc-dist { font-size: calc(14px * var(--fz, 1)); margin-top: 8px; opacity: 0.9; }
.cc-art { position: absolute; left: 0; bottom: 0; width: 100%; height: 62%; display: block; }
.cc-bj { background: linear-gradient(160deg, #B3261E 0%, #5C1030 100%); }
.cc-cc { background: linear-gradient(160deg, #3B5BDB 0%, #1B2A6B 100%); }
.cc-cd { background: linear-gradient(160deg, #F59E0B 0%, #B45309 100%); }
.cc-more { background: radial-gradient(circle at 16% 108%, rgba(47,107,255,0.5), rgba(11,13,18,0) 62%), #0B0D12; border: 1px solid #2B3038; cursor: pointer; }
.cc-more .cc-name { font-size: calc(27px * var(--fz, 1)); }
.cc-plus { position: absolute; right: 22px; top: 22px; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: calc(28px * var(--fz, 1)); font-weight: 200; }
.cc-more-cta { position: absolute; left: 28px; bottom: 28px; display: flex; align-items: center; gap: 14px; font-size: calc(14px * var(--fz, 1)); line-height: 1.5; color: #C9CED8; z-index: 2; }
.cc-arrow { width: 32px; height: 32px; border-radius: 50%; background: #FFFFFF; color: #0B0D12; display: flex; align-items: center; justify-content: center; font-size: calc(14px * var(--fz, 1)); }
.lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.lift:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(11,13,18,0.10); }
.stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 32px; }
.stat { grid-column: span 2; background: #F3F4F6; border-radius: 28px; padding: 36px 32px; }
.stat.big { grid-column: span 3; padding: 48px 44px; }
.stat-num { font-size: calc(64px * var(--fz, 1)); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.stat.big .stat-num { font-size: calc(96px * var(--fz, 1)); }
.stat-label { font-size: calc(14px * var(--fz, 1)); color: #6B7280; margin-top: 16px; }
.chips-l { display: flex; flex-wrap: wrap; gap: 10px; }
.cred-sec { position: relative; overflow: hidden; background: linear-gradient(180deg, #EFF5FF 0%, #F7FAFF 55%, #FFFFFF 100%); }
.cred-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(47,107,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(47,107,255,0.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(1000px 600px at 60% 20%, #000 0%, rgba(0,0,0,0) 78%); mask-image: radial-gradient(1000px 600px at 60% 20%, #000 0%, rgba(0,0,0,0) 78%); }
.cred-blob { position: absolute; border-radius: 50%; filter: blur(10px); pointer-events: none; }
.cred-blob-a { width: 640px; height: 640px; right: -180px; top: -220px; background: radial-gradient(circle, rgba(47,107,255,0.16), rgba(47,107,255,0) 70%); }
.cred-blob-b { width: 520px; height: 520px; left: -160px; bottom: -220px; background: radial-gradient(circle, rgba(111,227,138,0.16), rgba(111,227,138,0) 70%); }
.stat { position: relative; z-index: 1; box-shadow: 0 1px 0 rgba(11,13,18,0.02); }
.stat-accent { background: linear-gradient(160deg, #FFFFFF 0%, #EAF1FF 100%); border: 1px solid #DCE8FF; }
.stat-accent-2 { background: linear-gradient(160deg, #FFFFFF 0%, #E9F9EE 100%); border: 1px solid #D6F0DE; }
.stat-ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(47,107,255,0.1); color: #2E69FA; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.stat-ic svg { width: 20px; height: 20px; }
.stat-accent-2 .stat-ic { background: rgba(47,191,113,0.14); color: #1E9E58; }
.stat:not(.big) .stat-ic { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px; background: rgba(11,13,18,0.05); color: #4B5563; }
.stat:not(.big) .stat-ic svg { width: 17px; height: 17px; }
.chip-cert { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; background: #FFFFFF; border-color: #DCE8FF; box-shadow: 0 1px 2px rgba(11,13,18,0.03); }
.chip-cert svg { width: 14px; height: 14px; color: #2E69FA; flex: 0 0 auto; }
.cred-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.35fr); gap: 28px; align-items: start; }
.cred-col-t { font-size: calc(12px * var(--fz, 1)); font-weight: 700; color: #6B7280; letter-spacing: 0.04em; margin-bottom: 14px; }
.cred-divider { width: 1px; align-self: stretch; background: linear-gradient(180deg, rgba(47,107,255,0) 0%, rgba(47,107,255,0.25) 50%, rgba(47,107,255,0) 100%); }
.banner { position: relative; overflow: hidden; border-radius: 40px; padding: 64px 72px; box-sizing: border-box; background: linear-gradient(100deg, #DDE8FF 0%, #EDE7FF 50%, #FFE4EC 100%); display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.banner-h { font-size: calc(52px * var(--fz, 1)); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.banner-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }
.banner-art { position: relative; width: 380px; height: 260px; flex-shrink: 0; }
.btn-primary { cursor: pointer; background: #2E69FA; color: #FFFFFF; font-size: calc(15px * var(--fz, 1)); font-weight: 600; padding: 14px 32px; border-radius: 999px; display: inline-block; }
.btn-ghost { background: #FFFFFF; color: #0B0D12; font-size: calc(15px * var(--fz, 1)); font-weight: 600; padding: 14px 32px; border-radius: 999px; display: inline-block; border: 1px solid #D1D5DB; }
.role-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.role > div:last-child { margin-top: auto; }
.role { display: flex; flex-direction: column; border: 1px solid #E5E7EB; border-radius: 24px; padding: 28px; box-sizing: border-box; }
.fm-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(11,13,18,0.62); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.fm-card { position: relative; width: 100%; max-width: 600px; max-height: calc(100vh - 48px); overflow-y: auto; background: #FFFFFF; border-radius: 28px; padding: 44px 44px 40px 44px; box-sizing: border-box; box-shadow: 0 30px 80px rgba(11,13,18,0.35); color: #0B0D12; }
.fm-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; background: #F3F4F6; display: flex; align-items: center; justify-content: center; font-size: calc(22px * var(--fz, 1)); line-height: 1; cursor: pointer; user-select: none; }
.fm-close:hover { background: #E5E7EB; }
.fm-kicker { font-size: calc(11px * var(--fz, 1)); color: #2E69FA; margin-bottom: 14px; letter-spacing: 0.08em; }
.fm-title { font-size: calc(30px * var(--fz, 1)); font-weight: 700; letter-spacing: -0.01em; }
.fm-sub { font-size: calc(15px * var(--fz, 1)); line-height: 1.7; color: #6B7280; margin: 12px 0 28px 0; }
.fm-label { display: flex; align-items: baseline; gap: 8px; font-size: calc(13px * var(--fz, 1)); font-weight: 700; margin-bottom: 8px; }
.fm-req { font-size: calc(11px * var(--fz, 1)); font-weight: 400; color: #FF6A3D; }
.fm-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.fm-type { border: 1px solid #D1D5DB; border-radius: 999px; padding: 8px 18px; font-size: calc(14px * var(--fz, 1)); color: #374151; background: #FFFFFF; cursor: pointer; user-select: none; transition: background 0.15s ease, border-color 0.15s ease; }
.fm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin-bottom: 18px; }
.fm-input, .fm-area { display: block; width: 100%; box-sizing: border-box; border: 1px solid #D1D5DB; border-radius: 14px; padding: 13px 16px; font-size: calc(15px * var(--fz, 1)); font-family: inherit; color: #0B0D12; background: #FFFFFF; outline: none; }
.fm-input:focus, .fm-area:focus { border-color: #2E69FA; box-shadow: 0 0 0 3px rgba(47,107,255,0.14); }
.fm-area { min-height: 96px; resize: vertical; line-height: 1.6; }
.fm-err { font-size: calc(12px * var(--fz, 1)); color: #E5484D; margin-top: 6px; }
.fm-submit { display: block; width: 100%; border: 0; margin-top: 22px; background: #2E69FA; color: #FFFFFF; font-size: calc(16px * var(--fz, 1)); font-weight: 600; font-family: inherit; padding: 16px 0; border-radius: 999px; cursor: pointer; }
.fm-submit:hover { background: #2559D6; }
.fm-done { padding: 24px 0 4px 0; }
.fm-ok { width: 72px; height: 72px; border-radius: 50%; background: #E8F0FF; color: #2E69FA; display: flex; align-items: center; justify-content: center; font-size: calc(34px * var(--fz, 1)); margin-bottom: 24px; }
.foot { background: #0B0D12; color: #FFFFFF; padding: 80px var(--px) 40px var(--px); }
.foot-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 1.7fr; gap: 40px; padding-bottom: 60px; }
.foot-qr { display: flex; gap: 16px; }
.qr-item { width: 112px; }
.qr-box { width: 112px; height: 112px; box-sizing: border-box; background: #FFFFFF; border-radius: 14px; padding: 7px; }
.qr-img { display: block; width: 100%; height: 100%; }
.qr-t { font-size: calc(12px * var(--fz, 1)); font-weight: 700; margin-top: 10px; }
.qr-s { font-size: calc(11px * var(--fz, 1)); color: #9CA3AF; margin-top: 3px; }
.foot-link { color: #9CA3AF; font-size: calc(14px * var(--fz, 1)); line-height: 2.2; display: block; }
.foot-link:hover { color: #FFFFFF; }
.menu-overlay { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: linear-gradient(115deg, #009CA2 0%, #2378D9 50%, #6540CF 100%); color: #FFFFFF; }
.menu-dots { position: absolute; left: 0; top: 0; bottom: 0; width: 380px; background-image: radial-gradient(circle, rgba(255,255,255,0.55) 1.2px, transparent 1.8px); background-size: 34px 34px; background-position: 40px 40px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.15)); mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.15)); }
.menu-topline { position: absolute; left: 64px; right: 140px; top: 56px; height: 1px; background: rgba(255,255,255,0.4); }
.menu-divider { position: absolute; left: 380px; top: 56px; bottom: 56px; width: 1px; background: rgba(255,255,255,0.4); }
.menu-logo { position: absolute; left: 64px; top: 88px; display: flex; align-items: center; gap: 12px; font-size: calc(20px * var(--fz, 1)); font-weight: 700; }
.menu-caption { position: absolute; left: 64px; bottom: 84px; width: 260px; font-size: calc(12px * var(--fz, 1)); line-height: 1.8; color: rgba(255,255,255,0.85); }
.menu-list { position: absolute; left: 436px; top: 56px; bottom: 56px; display: flex; flex-direction: column; justify-content: center; gap: 10px; z-index: 3; }
.menu-item { display: flex; align-items: center; font-size: calc(54px * var(--fz, 1)); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; transition: opacity 0.2s ease; }
.menu-arrow { display: inline-block; overflow: hidden; white-space: nowrap; font-weight: 300; transition: width 0.25s ease, opacity 0.25s ease; }
.menu-visual { position: absolute; right: 0; top: 0; bottom: 0; width: 46%; background: linear-gradient(160deg, #FFFFFF 0%, #F1F6FF 100%); border-radius: 50% 0 0 50% / 50% 0 0 50%; overflow: hidden; z-index: 1; }
.menu-close { position: absolute; top: 36px; right: 36px; width: 52px; height: 52px; background: rgba(11,13,18,0.35); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: calc(28px * var(--fz, 1)); cursor: pointer; z-index: 5; user-select: none; }
.menu-close:hover { background: rgba(11,13,18,0.55); }
.menu-foot { display: none; }
@media (max-width: 1200px) {
.role-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.role { grid-column: span 2; }
.role:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 1100px) {
.chap-in, .chap.rev .chap-in { gap: 48px; }
.biz-name { font-size: calc(80px * var(--fz, 1)); }
.biz-logo { width: 152px; height: 73px; }
.biz-logo-w { width: 280px; }
.wm-hw { width: 365.3px; height: 52px; } .wm-hp { width: 295.4px; height: 52px; }
.art { height: 520px; }
.statement-t { font-size: calc(48px * var(--fz, 1)); }
.st-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.map { width: 100%; max-width: 640px; margin: 0 auto; }
.hn { width: 196px; padding: 13px 14px 12px 14px; }
.hl-hw { width: 120px; height: 17px; }
.hl-hp { width: 96px; height: 17px; }
.hl-yb { width: 44px; height: 21px; }
.hl-xz { width: 69px; height: 26px; }
.stat-num { font-size: calc(48px * var(--fz, 1)); }
.stat.big .stat-num { font-size: calc(72px * var(--fz, 1)); }
.banner { padding: 64px 48px; }
.banner-h { font-size: calc(40px * var(--fz, 1)); }
.banner-art { width: 300px; }
.menu-item { font-size: calc(44px * var(--fz, 1)); }
.cc-name { font-size: calc(36px * var(--fz, 1)); }
.cc-more .cc-name { font-size: calc(22px * var(--fz, 1)); }
.cc-plus { top: 96px; }
.foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.foot-qr { grid-column: span 4; }
}
@media (max-width: 860px) {
:root { --px: 20px; }
.nav { height: 64px; }
.logo-nav { width: 54px; height: 26px; }
.logo-menu { width: 58px; height: 28px; }
.nav-cta { display: none; }
.hero { margin-top: -64px; padding-top: 64px; min-height: 100vh; min-height: max(100svh, 620px); }
.hero-h1 { font-size: calc(40px * var(--fz, 1)); margin-bottom: 32px; padding: 0 20px; }
.hero-chips { display: grid; grid-template-columns: repeat(2, 132px); justify-content: center; gap: 10px; }
.hn, .hero-links { display: none; }
.hero-aurora { width: 300px; height: 300px; }
.hero > .hero-aurora:nth-child(1) { left: -22% !important; top: -3% !important; }
.hero > .hero-aurora:nth-child(2) { right: -24% !important; top: 12% !important; }
.hero > .hero-aurora:nth-child(3) { right: -20% !important; bottom: 0% !important; }
.hero > .hero-aurora:nth-child(4) { left: -24% !important; bottom: 12% !important; }
.o1 { width: 420px; height: 420px; left: -210px; top: -210px; }
.o2 { width: 680px; height: 680px; left: -340px; top: -340px; }
.o3 { width: 980px; height: 980px; left: -490px; top: -490px; }
.glass-chip { padding: 10px 0; font-size: calc(13px * var(--fz, 1)); text-align: center; }
.statement { padding: 96px var(--px); }
.statement-t { font-size: calc(32px * var(--fz, 1)); }
.map { height: 400px; }
.mp-node { padding: 10px 12px; border-radius: 14px; }
.mp-cap { font-size: calc(9px * var(--fz, 1)); margin-top: 6px; gap: 6px; }
.mp-yb { width: 46px; height: 22px; }
.mp-hw { width: 106px; height: 15px; }
.mp-hp { width: 84px; height: 15px; }
.mp-xz { width: 69px; height: 26px; }
.mp-hub { width: 76px; height: 76px; }
.mp-elbl { font-size: calc(10px * var(--fz, 1)); padding: 2px 8px; }
.chap { padding: 96px var(--px) 80px var(--px); }
.chap-in, .chap.rev .chap-in { grid-template-columns: minmax(0, 1fr); gap: 44px; }
.chap.rev .chap-text { order: 1; }
.chap.rev .art { order: 2; }
.chap-idx { margin-bottom: 24px; }
.biz-name { font-size: calc(64px * var(--fz, 1)); }
.biz-logo { width: 124px; height: 60px; }
.biz-logo-w { width: 250px; }
.wm-hw { width: 309.1px; height: 44px; } .wm-hp { width: 250.0px; height: 44px; }
.biz-desc { font-size: calc(17px * var(--fz, 1)); margin: 22px 0 22px 0; }
.chap-cta { margin-top: 30px; }
.chap-deco { display: none; }
.rs-grp { font-size: calc(9px * var(--fz, 1)); padding: 1px 6px; }
.chap-teal { background: radial-gradient(520px 420px at 50% 78%, rgba(0,199,200,0.3), rgba(0,199,200,0) 66%), linear-gradient(160deg, #075058 0%, #053F47 55%, #04323A 100%); }
.evo { margin: -4px 0 22px 0; gap: 10px; font-size: calc(14px * var(--fz, 1)); }
.chips.six { max-width: none; gap: 8px; }
.custom { max-width: none; margin-top: 18px; padding: 12px 12px 12px 16px; }
.chips.six .chip { padding: 6px 11px; }
.art { height: 420px; border-radius: 24px; }
.art.art-ring { height: auto; aspect-ratio: 1 / 1; }
.rs-ringlbl { font-size: calc(10px * var(--fz, 1)); padding: 2px 8px; }
.rs-cap { left: 16px; bottom: 12px; font-size: calc(10px * var(--fz, 1)); }
.rs-badge, .rs-aibadge { border-width: 1px; }
.tagp { font-size: calc(12px * var(--fz, 1)); padding: 6px 11px; }
.lbl { font-size: calc(11px * var(--fz, 1)); }
.hub { width: 72px; height: 72px; }
.stage { height: 104px; gap: 8px; }
.stage-t { font-size: calc(14px * var(--fz, 1)); }
.pipe-a { flex: 0 0 18px; font-size: calc(14px * var(--fz, 1)); }
.tiles { gap: 6px; }
.seats-box { display: none; }
.sec { padding: 88px var(--px); }
.sec.screen { min-height: auto; }
.sec-head { margin-bottom: 24px; }
.cc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cc { height: 224px; padding: 18px; border-radius: 22px; }
.cc-name { font-size: calc(28px * var(--fz, 1)); }
.cc-en { font-size: calc(10px * var(--fz, 1)); margin-bottom: 6px; }
.cc-dist { font-size: calc(12px * var(--fz, 1)); margin-top: 4px; }
.cc-art { height: 58%; }
.cc-more .cc-name { font-size: calc(19px * var(--fz, 1)); }
.cc-plus { width: 44px; height: 44px; right: 14px; top: 84px; font-size: calc(22px * var(--fz, 1)); }
.cc-more-cta { left: 18px; bottom: 18px; font-size: calc(12px * var(--fz, 1)); gap: 8px; }
.cc-arrow { width: 26px; height: 26px; font-size: calc(12px * var(--fz, 1)); }
.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stat, .stat.big { grid-column: span 1; padding: 22px 16px; border-radius: 22px; }
.stat-ic { width: 30px; height: 30px; border-radius: 9px; margin-bottom: 10px; }
.stat-ic svg { width: 15px; height: 15px; }
.stat:not(.big) .stat-ic { width: 26px; height: 26px; margin-bottom: 8px; }
.stat:not(.big) .stat-ic svg { width: 13px; height: 13px; }
.chip-cert svg { width: 12px; height: 12px; }
.cred-cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.cred-divider { width: 100%; height: 1px; align-self: auto; background: linear-gradient(90deg, rgba(47,107,255,0) 0%, rgba(47,107,255,0.25) 50%, rgba(47,107,255,0) 100%); }
.cred-col-t { margin-bottom: 10px; }
.cred-blob-a, .cred-blob-b { width: 340px; height: 340px; }
.stat-num, .stat.big .stat-num { font-size: calc(30px * var(--fz, 1)); white-space: nowrap; }
.stat-grid .stat:last-child { grid-column: span 2; }
.banner { flex-direction: column; align-items: flex-start; padding: 44px 24px; border-radius: 32px; }
.banner-h { font-size: calc(30px * var(--fz, 1)); }
.banner-btns { margin-top: 28px; }
.banner-art { display: none; }
.role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.role, .role:nth-child(n+4) { grid-column: span 1; padding: 22px 18px; border-radius: 20px; }
.role:last-child { grid-column: span 2; }
.foot { padding-top: 56px; }
.foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-bottom: 40px; }
.foot-grid > div:first-child { grid-column: span 2; }
.foot-qr { grid-column: span 2; gap: 14px; }
.qr-item { flex: 0 0 auto; width: 120px; min-width: 0; }
.qr-box { width: 120px; height: 120px; }
.fm-overlay { align-items: flex-end; padding: 0; }
.fm-card { max-width: none; max-height: 92vh; border-radius: 24px 24px 0 0; padding: 32px 20px 28px 20px; }
.fm-title { font-size: calc(26px * var(--fz, 1)); }
.fm-close { top: 14px; right: 14px; }
.fm-input, .fm-area { font-size: calc(16px * var(--fz, 1)); }
.fm-grid { gap: 16px 10px; }
.fm-input { padding: 12px 12px; }
.menu-overlay { background: linear-gradient(160deg, #009CA2 0%, #2378D9 55%, #6540CF 100%); }
.menu-dots { width: 100%; height: 42%; top: auto; bottom: 0; background-position: 20px 20px; -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0.9), rgba(0,0,0,0)); mask-image: linear-gradient(0deg, rgba(0,0,0,0.9), rgba(0,0,0,0)); }
.menu-topline { left: 20px; right: 20px; top: 76px; }
.menu-divider { display: none; }
.menu-logo { left: 20px; top: 22px; font-size: calc(17px * var(--fz, 1)); }
.menu-caption { display: none; }
.menu-list { left: 20px; right: 20px; top: 96px; bottom: 150px; gap: 8px; }
.menu-item { font-size: calc(40px * var(--fz, 1)); }
.menu-visual { display: none; }
.menu-close { top: 12px; right: 12px; width: 44px; height: 44px; font-size: calc(24px * var(--fz, 1)); }
.menu-foot { display: block; position: absolute; left: 20px; right: 20px; bottom: 32px; z-index: 3; font-size: calc(13px * var(--fz, 1)); line-height: 1.9; color: rgba(255,255,255,0.9); }
}
@media (max-width: 560px) {
.role-grid { grid-template-columns: minmax(0, 1fr); }
.role:last-child { grid-column: span 1; }
}
@media (max-width: 340px) {
.fm-grid { grid-template-columns: minmax(0, 1fr); }
}
:where(h1, h2, h3, p.yb-p) { margin: 0; }
:where(h2.yb-h, h3.yb-h) { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #2E69FA; outline-offset: 3px; border-radius: 6px; }
.chap-teal :focus-visible, .chap-dark :focus-visible, .foot :focus-visible, .menu-overlay :focus-visible { outline-color: #FFFFFF; }
.fm-input:focus-visible, .fm-area:focus-visible { outline: none; border-color: #2E69FA; box-shadow: 0 0 0 3px rgba(47,107,255,0.18); }
.fm-consent { margin-top: 14px; font-size: calc(12px * var(--fz, 1)); line-height: 1.7; color: #6B7280; text-align: center; }
.fm-consent a { color: #2E69FA; }
.fm-status { margin-top: 12px; font-size: calc(13px * var(--fz, 1)); line-height: 1.6; color: #E5484D; text-align: center; }
.fm-status:empty { display: none; }
.foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; border-top: 1px solid #2B3038; padding-top: 24px; font-size: calc(12px * var(--fz, 1)); line-height: 1.7; color: #8B93A1; }
.foot-legal .mono { font-size: calc(12px * var(--fz, 1)); }
.foot-legal-a { color: #8B93A1; }
.foot-legal-a:hover { color: #FFFFFF; }
.foot-legal-todo { color: #FF8A5B; }
@media (max-width: 560px) { .foot-legal { flex-direction: column; align-items: flex-start; gap: 6px; } }
.evo .on { color: #BA4A27; }
.chap-blue .aud-row, .chap-paper .aud-row { color: #676D7B; }
.stat-label { color: #676D7B; }
.cred-col-t { color: #676D7B; }
.nav { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; }
.nav::after { content: ''; position: absolute; left: var(--px); right: var(--px); bottom: 0; height: 1px; background: rgba(11,13,18,0.12); }
.nav-right { gap: 10px; }
.nav-cta { height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 0 22px; letter-spacing: 0.04em; transition: background 0.2s ease; }
.nav-cta:hover { background: #262A33; }
.menu-btn { height: 44px; box-sizing: border-box; gap: 12px; padding: 0 5px 0 18px; border: 1px solid rgba(11,13,18,0.1);
background: rgba(255,255,255,0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
font-size: calc(13px * var(--fz, 1)); font-weight: 600; letter-spacing: 0.08em; color: #0B0D12;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.menu-btn:hover { background: #FFFFFF; border-color: rgba(11,13,18,0.16); box-shadow: 0 8px 22px rgba(11,13,18,0.08); }
.menu-btn-i { position: relative; width: 34px; height: 34px; flex: 0 0 auto; box-sizing: border-box; padding: 0 10px; border-radius: 50%;
background: #0B0D12; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 5px; overflow: hidden; }
.menu-btn-i::before { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0;
background: linear-gradient(135deg, #009CA2 0%, #2378D9 52%, #6540CF 100%); transition: opacity 0.3s ease; }
.menu-btn-i i { position: relative; display: block; height: 1.5px; border-radius: 1px; background: #FFFFFF; transition: width 0.3s ease; }
.menu-btn-i i:nth-child(1) { width: 14px; }
.menu-btn-i i:nth-child(2) { width: 8px; }
.menu-btn:hover .menu-btn-i::before, .menu-btn:focus-visible .menu-btn-i::before { opacity: 1; }
.menu-btn:hover .menu-btn-i i:nth-child(2), .menu-btn:focus-visible .menu-btn-i i:nth-child(2) { width: 14px; }
@media (max-width: 860px) { .nav-cta { display: none; } .menu-btn { height: 42px; padding-left: 16px; } .menu-btn-i { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .menu-btn-i i, .menu-btn-i::before { transition: none; } }
.coop-teal   { --cg: linear-gradient(135deg, #3FE0CF 0%, #00A5AB 100%); --ck: #007376; --cs: rgba(0,140,145,0.45); --cr: rgba(0,199,200,0.10); }
.coop-orange { --cg: linear-gradient(135deg, #FFB07E 0%, #FF5A3D 100%); --ck: #C2410C; --cs: rgba(225,85,40,0.42); --cr: rgba(255,106,61,0.10); }
.coop-purple { --cg: linear-gradient(135deg, #BBA6FF 0%, #6D4AD6 100%); --ck: #5A34C4; --cs: rgba(100,70,205,0.42); --cr: rgba(109,74,214,0.10); }
.coop-blue   { --cg: linear-gradient(135deg, #8DB4FF 0%, #2E69FA 100%); --ck: #2352D8; --cs: rgba(46,105,250,0.42); --cr: rgba(46,105,250,0.10); }
.coop-green  { --cg: linear-gradient(135deg, #8BEBA6 0%, #1FA85C 100%); --ck: #157A3B; --cs: rgba(30,150,90,0.42); --cr: rgba(47,191,113,0.10); }
.role.coop { display: block; min-height: calc(340px * var(--fz, 1)); padding: 0; border: 0; border-radius: 28px; background: none; box-shadow: none; cursor: pointer; perspective: 1000px; -webkit-tap-highlight-color: transparent; }
.role.coop:focus-visible { outline: 2px solid var(--ck); outline-offset: 4px; }
.coop-card { position: relative; height: 100%; min-height: inherit; box-sizing: border-box; border-radius: 28px; background: var(--cg);
transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s ease;
box-shadow: 0 1px 2px rgba(11,13,18,0.05), 0 22px 30px -26px var(--cs); }
.coop-glass { position: absolute; inset: 7px; border-radius: 22px; border-top-right-radius: 100%;
background: linear-gradient(0deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.84) 100%);
border-left: 1px solid rgba(255,255,255,0.95); border-bottom: 1px solid rgba(255,255,255,0.95);
transform: translate3d(0, 0, 24px); transition: transform 0.5s ease; }
.coop-rings { position: absolute; top: 0; right: 0; transform-style: preserve-3d; }
.coop-rings i { position: absolute; display: block; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box;
background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.4);
box-shadow: -8px 8px 18px rgba(11,13,18,0.07); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
transition: transform 0.5s ease; }
.coop-rings .r1 { width: 150px; top: 8px; right: 8px; transform: translate3d(0, 0, 18px); }
.coop-rings .r2 { width: 122px; top: 12px; right: 12px; transform: translate3d(0, 0, 34px); transition-delay: 0.06s; }
.coop-rings .r3 { width: 96px; top: 17px; right: 17px; transform: translate3d(0, 0, 50px); transition-delay: 0.12s; }
.coop-rings .r4 { width: 72px; top: 23px; right: 23px; transform: translate3d(0, 0, 66px); transition-delay: 0.18s; }
.coop-rings .r5 { width: 48px; top: 30px; right: 30px; transform: translate3d(0, 0, 82px); transition-delay: 0.24s;
display: grid; place-content: center; background: #FFFFFF; border-color: #FFFFFF; color: var(--ck); box-shadow: -6px 8px 16px rgba(11,13,18,0.12); }
.coop-rings .r5 svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.coop-num { position: absolute; top: 26px; left: 26px; font-size: calc(12px * var(--fz, 1)); font-weight: 700; color: var(--ck); letter-spacing: 0.08em; transform: translate3d(0, 0, 26px); }
.coop-body { position: absolute; left: 26px; right: 22px; top: 150px; transform: translate3d(0, 0, 28px); }
.coop-kicker { font-size: calc(11px * var(--fz, 1)); color: var(--ck); letter-spacing: 0.06em; margin-bottom: 10px; }
.coop-t { font-size: calc(18px * var(--fz, 1)); font-weight: 700; line-height: 1.35; color: #0B0D12; margin-bottom: 8px; }
.coop-d { font-size: calc(13px * var(--fz, 1)); line-height: 1.65; color: #5B6472; }
.coop-cta { position: absolute; left: 26px; bottom: 22px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 16px; box-sizing: border-box;
border-radius: 999px; background: #FFFFFF; border: 1px solid var(--cr); box-shadow: 0 6px 14px -8px var(--cs);
font-size: calc(13px * var(--fz, 1)); font-weight: 600; color: var(--ck); transform: translate3d(0, 0, 30px);
transition: transform 0.35s ease 0.1s, background 0.25s ease, color 0.25s ease, box-shadow 0.35s ease; }
.coop-arr { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s ease; }
@media (hover: hover) and (pointer: fine) {
.role.coop:hover .coop-card { transform: rotate3d(1, 1, 0, 16deg); box-shadow: 26px 40px 30px -34px var(--cs), 0 26px 40px -12px rgba(11,13,18,0.14); }
.role.coop:hover .coop-rings .r2 { transform: translate3d(0, 0, 54px); }
.role.coop:hover .coop-rings .r3 { transform: translate3d(0, 0, 76px); }
.role.coop:hover .coop-rings .r4 { transform: translate3d(0, 0, 98px); }
.role.coop:hover .coop-rings .r5 { transform: translate3d(0, 0, 120px); }
.role.coop:hover .coop-cta { transform: translate3d(0, 0, 56px); background: var(--ck); color: #FFFFFF; box-shadow: -6px 16px 16px -10px var(--cs); }
.role.coop:hover .coop-arr { transform: translateX(3px); }
}
.role.coop:focus-visible .coop-cta { background: var(--ck); color: #FFFFFF; }
.role.coop:active .coop-card { transform: scale(0.985); }
@media (max-width: 1200px) { .role.coop { min-height: calc(320px * var(--fz, 1)); } .coop-body { top: 136px; } }
@media (max-width: 860px) { .role.coop { min-height: calc(290px * var(--fz, 1)); border-radius: 24px; } .role.coop:last-child { min-height: calc(230px * var(--fz, 1)); } .coop-card { border-radius: 24px; } .coop-glass { border-radius: 19px; border-top-right-radius: 100%; } .coop-body { top: auto; bottom: 72px; } }
@media (max-width: 560px) {
.role.coop { min-height: calc(212px * var(--fz, 1)); }
.coop-glass { border-top-right-radius: 62% 88%; }
.coop-rings .r1 { width: 118px; } .coop-rings .r2 { width: 96px; } .coop-rings .r3 { width: 76px; top: 16px; right: 16px; }
.coop-rings .r4 { width: 58px; top: 21px; right: 21px; } .coop-rings .r5 { width: 40px; top: 27px; right: 27px; }
.coop-rings .r5 svg { width: 19px; height: 19px; }
.coop-num { top: 22px; left: 22px; }
.coop-body { left: 22px; right: 18px; top: auto; bottom: 66px; }
.coop-kicker { margin-bottom: 6px; }
.coop-t { font-size: calc(17px * var(--fz, 1)); margin-bottom: 4px; }
.coop-cta { left: 22px; bottom: 18px; height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
.coop-card, .coop-glass, .coop-rings i, .coop-cta, .coop-arr { transition: none !important; }
.role.coop:hover .coop-card { transform: none !important; }
}
.glass-chip.hc { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 13px 14px 12px 14px; border-radius: 18px; text-align: left;
background: rgba(255,255,255,0.86); border: 1px solid rgba(255,255,255,0.95);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: 0 1px 2px rgba(11,13,18,0.04), 0 14px 28px -18px rgba(11,13,18,0.28); }
.hc-logo { display: flex; align-items: center; height: 26px; }
.hc-yb { display: block; width: 44px; height: 21px; }
.hc-hw { display: block; width: 112px; height: 16px; }
.hc-hp { display: block; width: 91px; height: 16px; }
.hc-xz { display: block; width: 69px; height: 26px; }
.hc-cap { display: flex; align-items: center; gap: 6px; font-size: calc(11px * var(--fz, 1)); line-height: 1.3; color: #5B6472; white-space: nowrap; }
.hc-cap i { display: block; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
@media (max-width: 860px) { .hero-chips { grid-template-columns: repeat(2, minmax(0, 158px)); gap: 10px; } }
@media (max-width: 340px) { .hero-chips { grid-template-columns: repeat(2, minmax(0, 146px)); } .hc-cap { font-size: calc(10px * var(--fz, 1)); } }
@keyframes yb-ping { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(3.4); opacity: 0; } }
@keyframes yb-av { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 4px)); } }
@keyframes yb-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(0.7) rotate(25deg); opacity: 0.6; } }
@keyframes yb-glow { 0%, 100% { box-shadow: 0 0 40px rgba(46,230,227,0.45); } 50% { box-shadow: 0 0 70px rgba(46,230,227,0.85); } }
@keyframes yb-dash-ring { to { stroke-dashoffset: -50; } }
@keyframes yb-dash-link { to { stroke-dashoffset: -16; } }
.rs-city::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #2EE6E3; animation: yb-ping 2.8s ease-out infinite; }
.rs-city:nth-child(2 of .rs-city)::after { animation-delay: -0.9s; }
.rs-city:nth-child(3 of .rs-city)::after { animation-delay: -1.8s; }
.rs-av { animation: yb-av 5s ease-in-out infinite; }
.rs-av:nth-child(2n of .rs-av) { animation-delay: -1.6s; animation-duration: 5.6s; }
.rs-av:nth-child(3n of .rs-av) { animation-delay: -3.1s; }
.rs-aibadge svg, .rs-ai i svg { animation: yb-twinkle 2.6s ease-in-out infinite; }
.rs-ai-w i svg { animation-delay: -1.3s; }
.rs-hub { animation: yb-glow 4s ease-in-out infinite; }
.rs-svg circle:first-child { animation: yb-dash-ring 40s linear infinite; }
.rs-svg line { animation: yb-dash-link 3s linear infinite; }
@keyframes yb-stage { 0%, 24% { background: #FF6A3D; color: #FFFFFF; box-shadow: 0 12px 24px -12px rgba(255,106,61,0.8); }
30%, 100% { background: #FFFFFF; color: #0B0D12; box-shadow: none; } }
@keyframes yb-stage-num { 0%, 24% { color: #FFFFFF; } 30%, 100% { color: #FF6A3D; } }
@keyframes yb-nudge { 0%, 100% { transform: translateX(0); opacity: 0.6; } 50% { transform: translateX(3px); opacity: 1; } }
@keyframes yb-tile { 0%, 6% { background: #FFFFFF; } 12%, 70% { background: #FF6A3D; } 78%, 100% { background: #FFFFFF; } }
.pipe .stage { animation: yb-stage 8s ease-in-out infinite; }
.pipe .stage .stage-num { animation: yb-stage-num 8s ease-in-out infinite; }
.pipe .stage:nth-child(1), .pipe .stage:nth-child(1) .stage-num { animation-delay: -8s; }
.pipe .stage:nth-child(3), .pipe .stage:nth-child(3) .stage-num { animation-delay: -6s; }
.pipe .stage:nth-child(5), .pipe .stage:nth-child(5) .stage-num { animation-delay: -4s; }
.pipe .stage:nth-child(7), .pipe .stage:nth-child(7) .stage-num { animation-delay: -2s; }
.pipe-a { animation: yb-nudge 2s ease-in-out infinite; }
.tiles .tile-b { animation: yb-tile 8s ease-in-out infinite; }
.tiles .tile-b:nth-child(1) { animation-delay: -7.75s; }
.tiles .tile-b:nth-child(2) { animation-delay: -7.50s; }
.tiles .tile-b:nth-child(3) { animation-delay: -7.25s; }
.tiles .tile-b:nth-child(4) { animation-delay: -7.00s; }
.tiles .tile-b:nth-child(5) { animation-delay: -6.75s; }
.tiles .tile-b:nth-child(6) { animation-delay: -6.50s; }
.tiles .tile-b:nth-child(7) { animation-delay: -6.25s; }
.tiles .tile-b:nth-child(8) { animation-delay: -6.00s; }
.tiles .tile-b:nth-child(9) { animation-delay: -5.75s; }
.tiles .tile-b:nth-child(10) { animation-delay: -5.50s; }
.tiles .tile-b:nth-child(11) { animation-delay: -5.25s; }
.tiles .tile-b:nth-child(12) { animation-delay: -5.00s; }
.tiles .tile-b:nth-child(13) { animation-delay: -4.75s; }
.tiles .tile-b:nth-child(14) { animation-delay: -4.50s; }
.tiles .tile-b:nth-child(15) { animation-delay: -4.25s; }
.tiles .tile-b:nth-child(16) { animation-delay: -4.00s; }
@keyframes yb-needle { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(14deg); } 62% { transform: rotate(-11deg); } }
@keyframes yb-arc { 0%, 100% { stroke-dasharray: 72 100; } 30% { stroke-dasharray: 80 100; } 62% { stroke-dasharray: 66 100; } }
@keyframes yb-bar { 0% { transform: scaleY(1); } 100% { transform: scaleY(0.6); } }
@keyframes yb-bal { 0%, 100% { width: 68%; } 70% { width: 58%; } 84% { width: 74%; } }
@keyframes yb-mchip { 0%, 20% { background: rgba(111,227,138,0.16); border-color: #6FE38A; color: #C9F7D5; }
26%, 100% { background: transparent; border-color: #2E4A2E; color: #7FE39A; } }
.g-needle { transform-box: view-box; transform-origin: 110px 110px; animation: yb-needle 7s ease-in-out infinite; }
.g-arc { animation: yb-arc 7s ease-in-out infinite; }
.bars i { transform-origin: 50% 100%; animation: yb-bar 1.8s ease-in-out infinite alternate; }
.bars i:nth-child(4n+1) { animation-delay: -0.3s; }
.bars i:nth-child(4n+2) { animation-delay: -1.1s; animation-duration: 2.3s; }
.bars i:nth-child(4n+3) { animation-delay: -0.7s; animation-duration: 1.5s; }
.bars i:nth-child(4n) { animation-delay: -1.5s; animation-duration: 2.1s; }
.g-bal { animation: yb-bal 7s ease-in-out infinite; }
.mchip { animation: yb-mchip 8s ease-in-out infinite; }
.mchip:nth-child(1) { animation-delay: -8s; } .mchip:nth-child(2) { animation-delay: -6s; }
.mchip:nth-child(3) { animation-delay: -4s; } .mchip:nth-child(4) { animation-delay: -2s; }
@keyframes yb-card { 0%, 100% { transform: translateX(-50%) rotate(-2deg) translateY(0); } 50% { transform: translateX(-50%) rotate(-1.2deg) translateY(-7px); } }
@keyframes yb-stamp { 0%, 68%, 100% { transform: rotate(-10deg) scale(1); } 74% { transform: rotate(-4deg) scale(1.12); } 80% { transform: rotate(-10deg) scale(0.95); } 86% { transform: rotate(-10deg) scale(1); } }
@keyframes yb-step { 0%, 26% { background: #4A1FA0; color: #FFFFFF; } 33%, 100% { background: #FFFFFF; color: #4A1FA0; } }
@keyframes yb-seat { 0%, 8% { background: transparent; } 14%, 72% { background: #4A1FA0; } 80%, 100% { background: transparent; } }
.xz-card { animation: yb-card 7s ease-in-out infinite; }
.xz-stamp { animation: yb-stamp 7s ease-in-out infinite; }
.step b { animation: yb-step 6s ease-in-out infinite; }
.step:nth-child(2) b { animation-delay: -6s; } .step:nth-child(3) b { animation-delay: -4s; } .step:nth-child(4) b { animation-delay: -2s; }
.seat-grid i { animation: yb-seat 9s ease-in-out infinite; }
.seat-grid i:nth-child(1) { animation-delay: -8.80s; }
.seat-grid i:nth-child(2) { animation-delay: -8.60s; }
.seat-grid i:nth-child(3) { animation-delay: -8.40s; }
.seat-grid i:nth-child(4) { animation-delay: -8.20s; }
.seat-grid i:nth-child(5) { animation-delay: -8.00s; }
.seat-grid i:nth-child(6) { animation-delay: -7.80s; }
.seat-grid i:nth-child(7) { animation-delay: -7.60s; }
.seat-grid i:nth-child(8) { animation-delay: -7.40s; }
.seat-grid i:nth-child(9) { animation-delay: -7.20s; }
.seat-grid i:nth-child(10) { animation-delay: -7.00s; }
.seat-grid i:nth-child(11) { animation-delay: -6.80s; }
.seat-grid i:nth-child(12) { animation-delay: -6.60s; }
.seat-grid i:nth-child(13) { animation-delay: -6.40s; }
.seat-grid i:nth-child(14) { animation-delay: -6.20s; }
.seat-grid i:nth-child(15) { animation-delay: -6.00s; }
.seat-grid i:nth-child(16) { animation-delay: -5.80s; }
.seat-grid i:nth-child(17) { animation-delay: -5.60s; }
.seat-grid i:nth-child(18) { animation-delay: -5.40s; }
.seat-grid i:nth-child(19) { animation-delay: -5.20s; }
.seat-grid i:nth-child(20) { animation-delay: -5.00s; }
.seat-grid i:nth-child(21) { animation-delay: -4.80s; }
.seat-grid i:nth-child(22) { animation-delay: -4.60s; }
.seat-grid i:nth-child(23) { animation-delay: -4.40s; }
.seat-grid i:nth-child(24) { animation-delay: -4.20s; }
.seat-grid i:nth-child(25) { animation-delay: -4.00s; }
.seat-grid i:nth-child(26) { animation-delay: -3.80s; }
.seat-grid i:nth-child(27) { animation-delay: -3.60s; }
.seat-grid i:nth-child(28) { animation-delay: -3.40s; }
.seat-grid i:nth-child(29) { animation-delay: -3.20s; }
.seat-grid i:nth-child(30) { animation-delay: -3.00s; }
.art.is-off *, .art.is-off *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .art *, .art *::after { animation: none !important; } }
.cred-sec { background: linear-gradient(180deg, #E8F0FF 0%, #F3EFFF 52%, #FFFFFF 100%); }
.cred-blob-a { background: radial-gradient(circle, rgba(46,105,250,0.30), rgba(46,105,250,0) 70%); }
.cred-blob-b { background: radial-gradient(circle, rgba(0,199,200,0.26), rgba(0,199,200,0) 70%); }
.cred-grid-bg { background-image: linear-gradient(rgba(46,105,250,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(46,105,250,0.08) 1px, transparent 1px); }
.stat { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; }
.stat.stat-accent { overflow: hidden; border: 0; color: #FFFFFF; background: linear-gradient(135deg, #2E69FA 0%, #5A34C4 100%); box-shadow: 0 26px 46px -26px rgba(70,70,220,0.7); }
.stat.stat-accent.stat-accent-2 { background: linear-gradient(135deg, #007C83 0%, #13804A 100%); box-shadow: 0 26px 46px -26px rgba(0,120,110,0.65); }
.stat.stat-accent::before { content: ''; position: absolute; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: 50%;
border: 40px solid rgba(255,255,255,0.08); box-shadow: 0 0 0 40px rgba(255,255,255,0.04); pointer-events: none; }
.stat.stat-accent::after { content: ''; position: absolute; left: -60px; bottom: -120px; width: 320px; height: 240px; border-radius: 50%;
background: radial-gradient(closest-side, rgba(255,255,255,0.16), rgba(255,255,255,0)); pointer-events: none; }
.stat.stat-accent > * { position: relative; z-index: 1; }
.stat.stat-accent .stat-num { color: #FFFFFF; }
.stat.stat-accent .stat-label { color: rgba(255,255,255,0.88); }
.stat.stat-accent .stat-ic { background: rgba(255,255,255,0.18); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }
.stat:not(.big) { background: #FFFFFF; border: 1px solid #E1E8F8; box-shadow: 0 16px 32px -26px rgba(46,70,160,0.45); }
.stat-grid .stat:nth-child(3) { --sc: #E8541F; }
.stat-grid .stat:nth-child(4) { --sc: #2E69FA; }
.stat-grid .stat:nth-child(5) { --sc: #6D4AD6; }
.stat:not(.big) .stat-ic { background: var(--sc); color: #FFFFFF; }
.stat:not(.big) .stat-num { color: var(--sc); }
@media (hover: hover) and (pointer: fine) {
.stat:hover { transform: translateY(-4px); }
.stat.stat-accent:hover { box-shadow: 0 34px 56px -26px rgba(70,70,220,0.8); }
.stat:not(.big):hover { box-shadow: 0 24px 40px -24px rgba(46,70,160,0.5); }
.chip-cert:hover { transform: translateY(-1px); border-color: #9DB8FF; }
}
.chip-cert { color: #1F2937; border-color: #CFDCFF; transition: transform 0.2s ease, border-color 0.2s ease; }
.cred-col:last-child .chip-cert { border-color: #BFE8E4; }
.cred-col:last-child .chip-cert svg { color: #008A87; }
.cred-col-t { display: flex; align-items: center; gap: 8px; color: #1F2937; }
.cred-col-t::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: linear-gradient(135deg, #2E69FA, #6D4AD6); }
.cred-col:last-child .cred-col-t::before { background: linear-gradient(135deg, #00A5AB, #2FBF71); }
.cred-divider { background: linear-gradient(180deg, rgba(46,105,250,0) 0%, rgba(46,105,250,0.4) 50%, rgba(46,105,250,0) 100%); }
@media (max-width: 860px) {
.stat.stat-accent::before { right: -70px; top: -70px; width: 180px; height: 180px; border-width: 26px; box-shadow: 0 0 0 26px rgba(255,255,255,0.04); }
.cred-divider { background: linear-gradient(90deg, rgba(46,105,250,0) 0%, rgba(46,105,250,0.4) 50%, rgba(46,105,250,0) 100%); }
}
@media (prefers-reduced-motion: reduce) { .stat, .chip-cert { transition: none; } }
@media (max-width: 860px) { .hero-more { bottom: auto !important; top: calc(50% + 250px); } }
.mp-node.mk { padding: 16px 18px 15px 18px; }
.mk-h { display: flex; align-items: center; gap: 10px; }
.mk-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--mk); box-shadow: 0 6px 14px -6px var(--mk); }
.mk-ic svg { display: block; width: 17px; height: 17px; }
.mk-t { font-size: calc(21px * var(--fz, 1)); font-weight: 800; line-height: 1; letter-spacing: 0.01em; color: #0B0D12; }
.mk-n { margin-left: auto; font-size: calc(11px * var(--fz, 1)); color: #6B7280; }
.mk-v { position: relative; display: flex; align-items: center; height: 30px; margin-top: 14px; }
.mk-s { margin-top: 11px; font-size: calc(12px * var(--fz, 1)); line-height: 1.4; color: #5B6472; white-space: nowrap; }
.mk-s i { font-style: normal; margin: 0 5px; color: var(--mk); }
.mk-yb { --mk: #00B5B6; }
.mk-hw { --mk: #FF6A3D; }
.mk-hp { --mk: #6FE38A; }
.mk-xz { --mk: #6D4AD6; }
.mp-dark .mk-t { color: #FFFFFF; }
.mp-dark .mk-n { color: rgba(255,255,255,0.6); }
.mp-dark .mk-s { color: rgba(255,255,255,0.72); }
.mp-dark .mk-ic { box-shadow: 0 0 16px -2px rgba(111,227,138,0.6); }
.mk-avs { display: flex; flex: 0 0 auto; padding-left: 7px; }
.mk-avs i { display: block; width: 24px; height: 24px; margin-left: -7px; border-radius: 50%; border: 2px solid #FFFFFF; box-sizing: border-box; }
.mk-link { position: relative; flex: 1; min-width: 14px; height: 2px; margin: 0 8px; border-radius: 1px;
background: repeating-linear-gradient(90deg, rgba(0,181,182,0.55) 0 4px, transparent 4px 8px); background-size: 16px 2px; animation: mk-flow 1.2s linear infinite; }
.mk-link i { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #00C7C8; box-shadow: 0 0 0 3px rgba(0,199,200,0.2); animation: mk-travel 2.6s ease-in-out infinite; }
.mk-city { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: #E4F9F9; color: #00A3A5; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(0,181,182,0.35); }
.mk-city svg { display: block; width: 18px; height: 18px; }
@keyframes mk-flow { to { background-position: 16px 0; } }
@keyframes mk-travel { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
.mk-tiles { display: flex; gap: 6px; width: 100%; }
.mk-tiles i { flex: 1; height: 26px; border-radius: 7px; border: 1.5px solid #FF6A3D; box-sizing: border-box; background: #FFFFFF; animation: mk-tile 6s ease-in-out infinite; }
.mk-tiles i:nth-child(1) { animation-delay: -5.5s; }
.mk-tiles i:nth-child(2) { animation-delay: -5.0s; }
.mk-tiles i:nth-child(3) { animation-delay: -4.5s; }
.mk-tiles i:nth-child(4) { animation-delay: -4.0s; }
.mk-tiles i:nth-child(5) { animation-delay: -3.5s; }
.mk-tiles i:nth-child(6) { animation-delay: -3.0s; }
@keyframes mk-tile { 0%, 8% { background: #FFFFFF; } 16%, 72% { background: #FF6A3D; box-shadow: 0 6px 12px -6px rgba(255,106,61,0.9); } 82%, 100% { background: #FFFFFF; } }
.mk-bars { display: flex; align-items: flex-end; gap: 4px; width: 100%; height: 100%; }
.mk-bars i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #6FE38A, rgba(111,227,138,0.35)); transform-origin: 50% 100%; animation: yb-bar 1.8s ease-in-out infinite alternate; }
.mk-bars i:nth-child(1) { animation-delay: -0.37s; }
.mk-bars i:nth-child(2) { animation-delay: -0.74s; }
.mk-bars i:nth-child(3) { animation-delay: -1.11s; }
.mk-bars i:nth-child(4) { animation-delay: -1.48s; }
.mk-bars i:nth-child(5) { animation-delay: -0.05s; }
.mk-bars i:nth-child(6) { animation-delay: -0.42s; }
.mk-bars i:nth-child(7) { animation-delay: -0.79s; }
.mk-bars i:nth-child(8) { animation-delay: -1.16s; }
.mk-bars i:nth-child(9) { animation-delay: -1.53s; }
.mk-bars i:nth-child(10) { animation-delay: -0.10s; }
.mk-steps { position: relative; display: flex; justify-content: space-between; width: 100%; align-self: flex-start; }
.mk-steps::before { content: ''; position: absolute; left: 6px; right: 6px; top: 5px; height: 1.5px; background: #DCD3F5; }
.mk-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: calc(11px * var(--fz, 1)); line-height: 1; color: #4A1FA0; white-space: nowrap; }
.mk-step:first-child { align-items: flex-start; }
.mk-step:last-child { align-items: flex-end; }
.mk-step b { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #6D4AD6; box-sizing: border-box; background: #FFFFFF; animation: mk-step 6s ease-in-out infinite; }
.mk-step:nth-child(1) b { animation-delay: -6s; } .mk-step:nth-child(2) b { animation-delay: -4s; } .mk-step:nth-child(3) b { animation-delay: -2s; }
@keyframes mk-step { 0%, 28% { background: #6D4AD6; box-shadow: 0 0 0 4px rgba(109,74,214,0.16); } 36%, 100% { background: #FFFFFF; box-shadow: none; } }
@media (max-width: 860px) {
.mp-node.mk { padding: 10px 11px 9px 11px; }
.mk-h { gap: 6px; }
.mk-ic { width: 20px; height: 20px; border-radius: 6px; }
.mk-ic svg { width: 13px; height: 13px; }
.mk-t { font-size: calc(15px * var(--fz, 1)); }
.mk-n { font-size: calc(9px * var(--fz, 1)); }
.mk-v { height: 20px; margin-top: 8px; }
.mk-s { margin-top: 6px; font-size: calc(9.5px * var(--fz, 1)); }
.mk-s i { margin: 0 3px; }
.mk-avs { padding-left: 5px; }
.mk-avs i { width: 17px; height: 17px; margin-left: -5px; border-width: 1.5px; }
.mk-link { margin: 0 4px; }
.mk-link i { width: 5px; height: 5px; margin-top: -2.5px; box-shadow: 0 0 0 2px rgba(0,199,200,0.2); }
.mk-city { width: 20px; height: 20px; border-radius: 6px; }
.mk-city svg { width: 13px; height: 13px; }
.mk-tiles { gap: 4px; }
.mk-tiles i { height: 18px; border-radius: 5px; border-width: 1.2px; }
.mk-bars { gap: 2px; }
.mk-steps::before { top: 4px; left: 4px; right: 4px; }
.mk-step { font-size: calc(8.5px * var(--fz, 1)); gap: 4px; }
.mk-step b { width: 9px; height: 9px; border-width: 1.5px; }
}
@media (prefers-reduced-motion: reduce) { .mk-v *, .mk-v *::after { animation: none !important; } }
.chap-teal { color: #04343B;
background: radial-gradient(880px 700px at 74% 50%, rgba(255,255,255,0.24), rgba(255,255,255,0) 64%),
radial-gradient(900px 700px at 0% 0%, rgba(118,238,236,0.4), rgba(118,238,236,0) 62%),
linear-gradient(150deg, #10CCCC 0%, #00C4C5 50%, #00B6BA 100%); }
.chap-teal .chap-idx { color: #04343B; }
.chap-teal .chap-idx .cur { color: #04343B; }
.chap-teal .chap-idx i { opacity: 0.35; }
.chap-teal .chap-dots b { border-color: rgba(255,255,255,0.9) !important; opacity: 0.8; }
.chap-teal .chap-cat { color: #04343B; }
.chap-teal .biz-logo { filter: drop-shadow(0 10px 24px rgba(0,96,104,0.28)); }
.chap-teal .biz-desc { color: #043A41; }
.chap-teal .chip { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.78); color: #04343B; box-shadow: none; }
.chap-teal .aud-row { color: #0A4A52; }
.chap-teal .aud { color: #04343B; }
.chap-teal .chap-cta { color: #04343B; }
.chap-teal :focus-visible { outline-color: #04343B; }
.chap-teal .cd-ring { border-color: rgba(255,255,255,0.32); }
.chap-teal .cd-dot { background: #FFFFFF; box-shadow: 0 0 14px rgba(255,255,255,0.9); }
.chap-teal .art { box-shadow: 0 40px 80px -28px rgba(0,78,88,0.5), 0 0 0 1px rgba(255,255,255,0.55); }
.rs-ringlbl { background: #FFFFFF; border-color: rgba(0,165,168,0.45); color: #0A4F57; box-shadow: 0 4px 10px -6px rgba(0,90,100,0.35); }
.rs-grp { background: #E6F9F9; border-color: rgba(0,165,168,0.4); color: #0A4F57; }
.rs-name { color: #33434D; }
.rs-avb { box-shadow: 0 8px 16px -8px rgba(0,60,70,0.45); }
.rs-badge { background: #0B4A52; border-color: #FFFFFF; }
.rs-aibadge { background: #00C7C8; box-shadow: 0 0 0 3px rgba(0,199,200,0.18); }
.rs-aibadge svg path { fill: #FFFFFF; }
.rs-ai { background: #FFFFFF; border-color: #00B5B6; color: #007A7E; box-shadow: 0 10px 20px -10px rgba(0,150,155,0.6); }
.rs-ai i svg path { fill: #00B5B6; }
.rs-ailbl { color: #0A5A61; }
.rs-opcring { border-color: rgba(0,181,182,0.7); }
.rs-city { background: #00C7C8; box-shadow: 0 0 0 4px rgba(0,199,200,0.16); }
.rs-city::after { background: #00C7C8; }
.rs-citylbl { color: #0A5A61; }
.rs-hub { background: linear-gradient(145deg, #1AD2D2, #00AEB3); border: 3px solid #FFFFFF; box-shadow: 0 14px 30px -10px rgba(0,120,128,0.55); animation: mk-hub 4s ease-in-out infinite; }
@keyframes mk-hub { 0%, 100% { box-shadow: 0 14px 30px -10px rgba(0,120,128,0.55), 0 0 0 0 rgba(0,199,200,0.28); }
50% { box-shadow: 0 14px 30px -10px rgba(0,120,128,0.55), 0 0 0 12px rgba(0,199,200,0); } }
.rs-cap { color: #007A7E; }
@media (max-width: 860px) {
.chap-teal { background: radial-gradient(520px 420px at 50% 78%, rgba(255,255,255,0.26), rgba(255,255,255,0) 66%),
linear-gradient(165deg, #10CCCC 0%, #00C4C5 50%, #00B6BA 100%); }
}
.stat-grid .stat .stat-ic { position: absolute; z-index: 1; top: 30px; right: 30px; width: 24px; height: 24px; margin: 0; border-radius: 0;
background: none; box-shadow: none; display: block; pointer-events: none; }
.stat-grid .stat .stat-ic svg { display: block; width: 24px; height: 24px; }
.stat-grid .stat.big .stat-ic { top: 40px; right: 40px; width: 28px; height: 28px; }
.stat-grid .stat.big .stat-ic svg { width: 28px; height: 28px; }
.stat-grid .stat.stat-accent .stat-ic { color: rgba(255,255,255,0.42); background: none; box-shadow: none; }
.stat-grid .stat:not(.big) .stat-ic { color: var(--sc); opacity: 0.32; background: none; }
@media (max-width: 860px) {
.stat-grid .stat .stat-ic, .stat-grid .stat.big .stat-ic { top: auto; bottom: 24px; right: 16px; width: 18px; height: 18px; }
.stat-grid .stat .stat-ic svg, .stat-grid .stat.big .stat-ic svg { width: 18px; height: 18px; }
}
.cred-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; align-items: stretch; }
.cred-divider { display: none; }
.cred-col { position: relative; z-index: 1; background: rgba(255,255,255,0.92); border: 1px solid #E1E8F8; border-radius: 28px;
padding: 26px 28px 28px 28px; box-shadow: 0 16px 32px -26px rgba(46,70,160,0.45); }
.cred-col .cred-col-t { font-size: calc(16px * var(--fz, 1)); font-weight: 700; color: #0B0D12; letter-spacing: 0.02em; margin: 0 0 18px 0; gap: 10px; }
.cred-col .cred-col-t::before { width: 10px; height: 10px; border-radius: 3px; }
.cred-col .chips-l { gap: 10px; }
.cred-col .chip-cert { font-size: calc(15px * var(--fz, 1)); font-weight: 500; line-height: 1.4; color: #111827; padding: 9px 17px 9px 13px; gap: 8px;
background: #F4F7FF; border-color: #D6E1FF; box-shadow: none; }
.cred-col .chip-cert svg { width: 17px; height: 17px; color: #2E69FA; }
.cred-col:last-child .chip-cert { background: #F0FAF8; border-color: #C6EBE5; }
.cred-col:last-child .chip-cert svg { color: #008A87; }
@media (hover: hover) and (pointer: fine) {
.cred-col .chip-cert:hover { border-color: #9DB8FF; }
.cred-col:last-child .chip-cert:hover { border-color: #7FD3C8; }
}
@media (max-width: 860px) {
.cred-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cred-col { padding: 20px 18px 8px 18px; border-radius: 22px; }
.cred-col .cred-col-t { font-size: calc(16px * var(--fz, 1)); margin-bottom: 6px; }
.cred-col .chips-l { flex-direction: column; flex-wrap: nowrap; gap: 0; }
.cred-col .chip-cert, .cred-col:last-child .chip-cert { display: flex; align-items: flex-start; width: 100%; box-sizing: border-box; white-space: normal;
font-size: calc(15px * var(--fz, 1)); padding: 13px 0; border: 0; border-radius: 0; background: none; border-bottom: 1px solid #EEF1F7; }
.cred-col .chip-cert:last-child { border-bottom: 0; }
.cred-col .chip-cert svg { width: 18px; height: 18px; margin-top: 1px; }
.cred-col .chip-cert:hover { transform: none; }
}
@keyframes yb-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.025); } }
@keyframes yb-breathe-glow { 0%, 100% { opacity: 0.35; transform: scale(0.94); } 50% { opacity: 0.7; transform: scale(1.04); } }
.banner-art::before { content: ''; position: absolute; left: 50%; top: 50%; width: 360px; height: 300px; margin: -150px 0 0 -180px; border-radius: 50%;
background: radial-gradient(closest-side, rgba(94,110,255,0.28), rgba(255,106,61,0.10) 60%, rgba(255,255,255,0));
animation: yb-breathe-glow 6s ease-in-out infinite; pointer-events: none; }
.banner-art > div { animation: yb-breathe 6s ease-in-out infinite; transform-origin: 50% 70%; will-change: transform; }
.banner-art > div:nth-child(1) { animation-delay: -1.2s; animation-duration: 6.4s; }
.banner-art > div:nth-child(2) { animation-delay: -3.4s; }
.banner-art > div:nth-child(3) { animation-delay: -0.4s; animation-duration: 5.2s; }
@media (prefers-reduced-motion: reduce) { .banner-art::before, .banner-art > div { animation: none; } }
#cities .cc { color: #0B0D12; border: 1px solid rgba(11,13,18,0.04); }
#cities .cc-en { opacity: 1; font-weight: 700; }
#cities .cc-dist { opacity: 1; color: #5B6472; }
#cities .cc-bj { background: linear-gradient(160deg, #FFF4F0 0%, #FBE2DC 100%); }
#cities .cc-bj .cc-en { color: #B3261E; }
#cities .cc-cc { background: linear-gradient(160deg, #F1F5FF 0%, #DDE6FF 100%); }
#cities .cc-cc .cc-en { color: #3552C8; }
#cities .cc-cd { background: linear-gradient(160deg, #FFF8EC 0%, #FCE8C8 100%); }
#cities .cc-cd .cc-en { color: #B45309; }
#cities .cc-more { background: radial-gradient(circle at 16% 108%, rgba(46,105,250,0.10), rgba(46,105,250,0) 62%), #F3F4F6; border: 1px solid transparent; }
#cities .cc-more .cc-en { color: #676D7B; }
#cities .cc-plus { border-color: rgba(11,13,18,0.16); color: #0B0D12; background: rgba(255,255,255,0.7); }
#cities .cc-more-cta { color: #5B6472; }
#cities .cc-arrow { background: #0B0D12; color: #FFFFFF; }
@media (hover: hover) and (pointer: fine) { #cities .cc-more:hover { background: radial-gradient(circle at 16% 108%, rgba(46,105,250,0.12), rgba(46,105,250,0) 62%), #FFFFFF; border-color: #E5E7EB; } }
.role.coop { min-height: calc(274px * var(--fz, 1)); }
.coop-glass { inset: 4px; border-radius: 24px; border-top-right-radius: 24px; }
.coop-rings i { background: var(--cr); border-color: rgba(255,255,255,0.95); box-shadow: -6px 6px 14px rgba(11,13,18,0.06); }
.coop-rings .r1 { width: 112px; top: 10px; right: 10px; }
.coop-rings .r2 { width: 92px; top: 13px; right: 13px; }
.coop-rings .r3 { width: 72px; top: 17px; right: 17px; }
.coop-rings .r4 { width: 54px; top: 22px; right: 22px; }
.coop-rings .r5 { width: 40px; top: 28px; right: 28px; background: #FFFFFF; border-color: #FFFFFF; box-shadow: -4px 6px 14px rgba(11,13,18,0.12); }
.coop-rings .r5 svg { width: 19px; height: 19px; }
.coop-num { top: 24px; left: 26px; }
.coop-body { top: 120px; }
.coop-kicker { margin-bottom: 8px; }
.coop-t { margin-bottom: 6px; }
.coop-cta { bottom: 18px; height: 32px; }
@media (max-width: 1200px) { .role.coop { min-height: calc(274px * var(--fz, 1)); } .coop-body { top: 120px; } .role.coop:nth-child(n+4) { perspective: 1800px; } }
@media (max-width: 860px) {
.role.coop { min-height: calc(230px * var(--fz, 1)); }
.role.coop:last-child { min-height: calc(200px * var(--fz, 1)); }
.role.coop:nth-child(4) { perspective: 1000px; }
.role.coop:last-child { perspective: 3000px; }
.coop-glass { border-radius: 20px; border-top-right-radius: 20px; }
.coop-body { top: auto; bottom: 66px; }
}
@media (max-width: 560px) {
.role.coop, .role.coop:last-child { min-height: calc(164px * var(--fz, 1)); }
.role.coop:last-child { perspective: 1000px; }
.coop-glass { border-top-right-radius: 20px; }
.coop-rings .r1 { width: 100px; top: 6px; right: 6px; }
.coop-rings .r2 { width: 82px; top: 10px; right: 10px; }
.coop-rings .r3 { width: 64px; top: 15px; right: 15px; }
.coop-rings .r4 { width: 49px; top: 20px; right: 20px; }
.coop-rings .r5 { width: 36px; top: 26px; right: 26px; }
.coop-rings .r5 svg { width: 17px; height: 17px; }
.coop-num { top: 20px; left: 22px; }
.coop-body { left: 22px; right: 104px; top: auto; bottom: 18px; }
.coop-kicker { margin-bottom: 6px; }
.coop-t { font-size: calc(17px * var(--fz, 1)); margin-bottom: 4px; }
.coop-cta { left: auto; right: 18px; bottom: 18px; height: 32px; }
}
.foot { color: #04343B;
background: radial-gradient(900px 520px at 88% 0%, rgba(255,255,255,0.24), rgba(255,255,255,0) 62%),
linear-gradient(160deg, #2BC7D6 0%, #00B3C7 48%, #00A7BD 100%); }
.foot .logo-foot { filter: drop-shadow(0 8px 18px rgba(0,90,100,0.22)); }
.foot-link { color: #04343B; }
.foot-link:hover { color: #001F24; text-decoration: underline; text-underline-offset: 4px; }
.qr-box { box-shadow: 0 12px 26px -16px rgba(0,70,80,0.6); }
.qr-s { color: #04343B; }
.foot-legal { border-top-color: rgba(4,52,59,0.22); color: #04343B; }
.foot-legal-a { color: #04343B; }
.foot-legal-a:hover { color: #001F24; text-decoration: underline; text-underline-offset: 3px; }
.foot-legal-todo { color: #7A1F00; }
.foot :focus-visible { outline-color: #04343B; }
#statement.statement { background: #FFFFFF; border-radius: 40px 40px 0 0; margin-top: -32px; z-index: 2;
box-shadow: 0 -22px 50px -30px rgba(46,70,160,0.32), 0 -1px 0 rgba(11,13,18,0.05); }
.st-head { position: relative; min-width: 0; }
.st-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: calc(12px * var(--fz, 1)); letter-spacing: 0.16em; color: #676D7B; }
.st-kicker::before { content: ''; display: block; width: 32px; height: 3px; border-radius: 2px;
background: linear-gradient(90deg, #00B5B6 0 25%, #FF6A3D 25% 50%, #2FBF71 50% 75%, #6D4AD6 75% 100%); }
.st-head .statement-t { margin: 0; font-size: calc(16px * var(--fz, 1)); line-height: 1.25; font-weight: 500; letter-spacing: 0; }
.st-row { display: grid; grid-template-columns: 56px 156px minmax(0, 1fr); align-items: baseline; padding: 20px 0; border-top: 1px solid #E8EAF0; }
.st-row:last-child { border-bottom: 1px solid #E8EAF0; }
.st-n { font-size: calc(13px * var(--fz, 1)); font-weight: 700; letter-spacing: 0.06em; color: var(--sk); }
.st-k { font-size: calc(44px * var(--fz, 1)); font-weight: 800; letter-spacing: -0.01em; color: #0B0D12; }
.st-p { font-size: calc(28px * var(--fz, 1)); font-weight: 500; color: #4B5563; }
@media (max-width: 1200px) { .st-k { font-size: calc(40px * var(--fz, 1)); } }
@media (max-width: 860px) {
#statement.statement { border-radius: 28px 28px 0 0; margin-top: -28px; }
.st-kicker { margin-bottom: 18px; font-size: calc(11px * var(--fz, 1)); }
.st-row { grid-template-columns: 34px 86px minmax(0, 1fr); padding: 15px 0; }
.st-n { font-size: calc(11px * var(--fz, 1)); }
.st-k { font-size: calc(25px * var(--fz, 1)); }
.st-p { font-size: calc(17px * var(--fz, 1)); }
}
.cred-grid-bg { display: none; }
.foot { background: radial-gradient(900px 520px at 88% 0%, rgba(255,255,255,0.22), rgba(255,255,255,0) 62%),
linear-gradient(160deg, #1FCFCF 0%, #00C7C8 50%, #00BDBF 100%); }
.st-p { font-size: calc(22px * var(--fz, 1)); line-height: 1.45; }
.st-k { line-height: 1.2; }
.foot-h { font-size: calc(17px * var(--fz, 1)); font-weight: 700; margin-bottom: 14px; letter-spacing: 0.02em; }
@media (max-width: 860px) {
.st-p { font-size: calc(15px * var(--fz, 1)); line-height: 1.5; }
.foot-h { font-size: calc(16px * var(--fz, 1)); margin-bottom: 10px; }
}
@media (max-width: 860px) {
.cred-col { padding-left: 14px; padding-right: 14px; }
.cred-col .chip-cert, .cred-col:last-child .chip-cert { font-size: calc(clamp(12.5px, calc((100vw - 98px) / 20), 15px) * var(--fz, 1)); }
}
.st-row { align-items: center; }
@media (max-width: 860px) {
#statement.statement { padding-top: 64px; }
.st-in { gap: 8px; }
.st-br { display: none; }
.st-kicker { margin-bottom: 14px; }
.st-row { grid-template-columns: 30px minmax(0, 1fr); grid-template-areas: "n k" ". p"; align-items: center; row-gap: 4px; padding: 16px 0; }
.st-n { grid-area: n; font-size: calc(12px * var(--fz, 1)); }
.st-k { grid-area: k; font-size: calc(21px * var(--fz, 1)); line-height: 1.3; }
.st-p { grid-area: p; font-size: calc(15px * var(--fz, 1)); line-height: 1.5; color: #4B5563; }
}
html { overflow-x: hidden; scroll-padding-top: 72px; }
.nav { border-bottom: 1px solid transparent; transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.nav.nav-stuck { background: rgba(255,255,255,0.86); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
border-bottom-color: rgba(11,13,18,0.07); box-shadow: 0 8px 24px -18px rgba(11,13,18,0.35); }
@media (max-width: 860px) { html { scroll-padding-top: 64px; } }
.st-kicker::before { background: linear-gradient(90deg, #00B5B6 0 25%, #FF6A3D 25% 50%, #6D4AD6 50% 75%, #2FBF71 75% 100%); }
.rs-ringlbl { font-size: calc(12px * var(--fz, 1)); font-weight: 700; letter-spacing: 0.1em; padding: 3px 11px; color: #064E54;
background: #FFFFFF; border: 1.5px solid #00B5B6; box-shadow: 0 6px 14px -8px rgba(0,120,125,0.6); }
.rs-ailbl, .rs-name.rs-name-opc, .rs-citylbl { font-weight: 700; color: #064E54; }
@media (max-width: 860px) {
.rs-ringlbl { font-size: calc(11px * var(--fz, 1)); padding: 2px 9px; }
}
.stat-grid .stat:nth-child(1) { --sc: #E8541F; }
.stat-grid .stat:nth-child(2) { --sc: #2E69FA; }
.stat-grid .stat:nth-child(3) { --sc: #6D4AD6; }
.cred-co { font-weight: 700; font-size: calc(13px * var(--fz, 1)); color: #1F2937; }
@media (max-width: 860px) {
.stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat-grid .stat:last-child { grid-column: auto; }
.stat-grid .stat, .stat-grid .stat.big { padding: 18px 14px 16px; border-radius: 18px; }
.stat-grid .stat .stat-ic, .stat-grid .stat.big .stat-ic { top: 16px; right: 12px; bottom: auto; width: 16px; height: 16px; }
.stat-grid .stat .stat-ic svg, .stat-grid .stat.big .stat-ic svg { width: 16px; height: 16px; }
.stat-grid .stat-num { font-size: calc(28px * var(--fz, 1)); }
.stat-grid .stat-label { font-size: calc(13px * var(--fz, 1)); white-space: nowrap; }
}
.st-k { white-space: nowrap; }
.st-sep { display: none; }
@media (min-width: 861px) { .st-row { grid-template-columns: 56px 176px minmax(0, 1fr); } }
@media (max-width: 860px) { .st-sep { display: inline; } }
.st-br { display: none; }
.st-sep { display: inline; }
@media (min-width: 861px) {
.st-row { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "n k" ". p"; align-items: center; row-gap: 6px; padding: 20px 0; }
.st-n { grid-area: n; }
.st-k { grid-area: k; font-size: calc(42px * var(--fz, 1)); line-height: 1.2; }
.st-p { grid-area: p; font-size: calc(20px * var(--fz, 1)); line-height: 1.5; }
}
@media (min-width: 861px) and (max-width: 1200px) {
.st-k { font-size: calc(38px * var(--fz, 1)); }
.st-p { font-size: calc(18px * var(--fz, 1)); }
}
.nav::after { transition: opacity 0.25s ease; }
.nav.nav-stuck::after { opacity: 0; }
.nav.nav-stuck { border-bottom-color: transparent; box-shadow: 0 10px 28px -22px rgba(11,13,18,0.28); }
.menu-overlay { color: #04343B;
background: radial-gradient(900px 700px at 0% 0%, rgba(118,238,236,0.45), rgba(118,238,236,0) 62%),
radial-gradient(700px 600px at 40% 100%, rgba(255,255,255,0.18), rgba(255,255,255,0) 62%),
linear-gradient(160deg, #10CCCC 0%, #00C4C5 50%, #00B6BA 100%); }
.menu-caption, .menu-foot { color: #04343B; }
.menu-topline, .menu-divider { background: rgba(255,255,255,0.6); }
.menu-close { background: rgba(4,52,59,0.55); }
.menu-close:hover { background: rgba(4,52,59,0.75); }
.menu-overlay :focus-visible { outline-color: #04343B; }
.menu-btn-t { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: calc(12px * var(--fz, 1)); letter-spacing: 0.16em; }
.cm { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; border-radius: 28px; overflow: hidden;
border: 1px solid #E3ECF1;
background: radial-gradient(760px 480px at 40% 46%, rgba(0,199,200,0.10), rgba(0,199,200,0) 70%),
linear-gradient(160deg, #F8FBFC 0%, #F0F5F8 100%); }
.cm-map { position: relative; margin: 48px 16px 48px 44px; aspect-ratio: 1.5842; }
.cm-dust { position: absolute; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #A3B2C6; opacity: 0.5; pointer-events: none; }
.cm-city { position: absolute; width: 0; height: 0; z-index: 2; cursor: pointer; }
.cm-city::before { content: ''; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; }
.cm-city i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #8594AC;
box-shadow: 0 0 0 3px rgba(133,148,172,0.14); transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.cm-n { position: absolute; top: 0; transform: translateY(-50%); white-space: nowrap; font-size: calc(12px * var(--fz, 1)); line-height: 1; color: #5B6472;
transition: color 0.2s ease; pointer-events: none; }
.cm-n.sd-r { left: 8px; }
.cm-n.sd-l { right: 8px; }
.cm-n.sd-t { left: 0; top: -12px; transform: translate(-50%, -50%); }
.cm-n.sd-b { left: 0; top: 13px; transform: translate(-50%, -50%); }
.cm-n b { display: none; margin-left: 6px; font-weight: 700; color: #007A7E; }
@media (hover: hover) and (pointer: fine) {
.cm-city:not(.is-lit):hover { z-index: 5; }
.cm-city:not(.is-lit):hover i { background: #00B5B6; transform: scale(1.5); box-shadow: 0 0 0 4px rgba(0,181,182,0.18), 0 0 14px rgba(0,181,182,0.55); }
.cm-city:not(.is-lit):hover .cm-n { color: #0B0D12; }
.cm-city:not(.is-lit):hover .cm-n b { display: inline; }
}
.cm-city.is-lit { z-index: 4; cursor: default; --lc: #E5484D; }
.cm-city.cm-cc { --lc: #3D63DD; }
.cm-city.cm-cd { --lc: #F08C1A; }
.cm-city.is-lit i { left: -7px; top: -7px; width: 14px; height: 14px; background: radial-gradient(circle, #FFFFFF 0%, var(--lc) 62%);
box-shadow: 0 0 14px 2px color-mix(in srgb, var(--lc) 55%, transparent), 0 0 34px 8px color-mix(in srgb, var(--lc) 22%, transparent); }
.cm-city.is-lit .cm-n { font-size: calc(19px * var(--fz, 1)); font-weight: 800; color: #0B0D12; }
.cm-city.is-lit .cm-n.sd-l { right: 16px; text-align: right; }
.cm-city.is-lit .cm-n.sd-t { top: -24px; text-align: center; }
.cm-city.is-lit .cm-n small { display: block; margin-top: 5px; font-size: calc(11px * var(--fz, 1)); font-weight: 600; color: #5B6472; }
.cm-note { position: absolute; left: 0; bottom: -30px; font-size: calc(10px * var(--fz, 1)); letter-spacing: 0.08em; color: #8A93A1; }
.cm-info { position: relative; padding: 44px 40px 44px 12px; display: flex; flex-direction: column; justify-content: center; }
.cm-cards { display: grid; gap: 10px; margin-bottom: 30px; }
.cm-card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "en en" "nm ds"; align-items: baseline; column-gap: 12px;
padding: 14px 18px 15px; border-radius: 16px; border: 1px solid rgba(11,13,18,0.04); }
.cm-card-en { grid-area: en; font-size: calc(10px * var(--fz, 1)); font-weight: 700; letter-spacing: 0.14em; margin-bottom: 6px; }
.cm-card-name { grid-area: nm; font-size: calc(22px * var(--fz, 1)); font-weight: 800; line-height: 1.1; color: #0B0D12; }
.cm-card-dist { grid-area: ds; font-size: calc(13px * var(--fz, 1)); color: #5B6472; }
.cm-card-bj { background: linear-gradient(160deg, #FFF4F0 0%, #FBE2DC 100%); }
.cm-card-bj .cm-card-en { color: #B3261E; }
.cm-card-cc { background: linear-gradient(160deg, #F1F5FF 0%, #DDE6FF 100%); }
.cm-card-cc .cm-card-en { color: #3552C8; }
.cm-card-cd { background: linear-gradient(160deg, #FFF8EC 0%, #FCE8C8 100%); }
.cm-card-cd .cm-card-en { color: #9A4A08; }
.cm-q { margin: 0 0 6px; font-size: calc(20px * var(--fz, 1)); line-height: 1.4; font-weight: 800; color: #0B0D12; }
.cm-d { margin: 0 0 22px; font-size: calc(14px * var(--fz, 1)); line-height: 1.6; color: #5B6472; }
.cm-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: 999px; cursor: pointer;
font-size: calc(15px * var(--fz, 1)); font-weight: 700; color: #FFFFFF; background: #0B0D12; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cm-cta span { font-size: calc(17px * var(--fz, 1)); }
@media (hover: hover) and (pointer: fine) { .cm-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(11,13,18,0.55); } }
.cm-cta:focus-visible { outline: 2px solid #0B0D12; outline-offset: 3px; }
@media (max-width: 1100px) {
.cm-mid .cm-n { display: none; }
.cm { grid-template-columns: minmax(0, 1fr) 270px; }
.cm-info { padding: 36px 28px 36px 8px; }
.cm-card-name { font-size: calc(20px * var(--fz, 1)); }
}
@media (max-width: 860px) {
.cm { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
.cm-map { margin: 26px 16px 32px 14px; }
.cm-n { font-size: calc(9px * var(--fz, 1)); }
.cm-minor .cm-n { display: none; }
.cm-n.sd-r { left: 6px; }
.cm-n.sd-l { right: 6px; }
.cm-dust { width: 2px; height: 2px; margin: -1px 0 0 -1px; }
.cm-city i { left: -2px; top: -2px; width: 4px; height: 4px; box-shadow: 0 0 0 2px rgba(133,148,172,0.14); }
.cm-city.is-lit i { left: -5px; top: -5px; width: 10px; height: 10px; }
.cm-city.is-lit .cm-n { font-size: calc(14px * var(--fz, 1)); }
.cm-city.is-lit .cm-n.sd-l { right: 11px; }
.cm-city.is-lit .cm-n.sd-t { top: -18px; }
.cm-city.cm-bj .cm-n.sd-t { left: auto; right: 2px; transform: translateY(-50%); }
.cm-city.cm-cc .cm-n small { display: none; }
.cm-city[data-city="重庆"] .cm-n.sd-t { transform: translate(-30%, -50%); }
.cm-city.is-lit .cm-n small { font-size: calc(9px * var(--fz, 1)); margin-top: 3px; }
.cm-note { bottom: -22px; font-size: calc(9px * var(--fz, 1)); }
.cm-info { padding: 20px 18px 24px; border-top: 1px solid #E3ECF1; }
.cm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.cm-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "en" "nm" "ds"; padding: 12px 12px 13px; border-radius: 14px; }
.cm-card-en { font-size: calc(8px * var(--fz, 1)); letter-spacing: 0.1em; margin-bottom: 5px; }
.cm-card-name { font-size: calc(18px * var(--fz, 1)); }
.cm-card-dist { margin-top: 4px; font-size: calc(11px * var(--fz, 1)); }
.cm-q { font-size: calc(18px * var(--fz, 1)); }
.cm-d { font-size: calc(13px * var(--fz, 1)); margin-bottom: 18px; }
}
.cm { border-color: #EAF0F3;
background: radial-gradient(760px 480px at 40% 46%, rgba(0,199,200,0.05), rgba(0,199,200,0) 70%),
linear-gradient(160deg, #FDFEFE 0%, #F7FAFB 100%); }
.cm-card { position: relative; overflow: hidden; }
.cm-card > div { position: relative; z-index: 1; }
.cm-art { position: absolute; z-index: 0; pointer-events: none; }
.cm-art-bj { right: 16px; bottom: 0; width: 92px; height: 68px; }
.cm-art-cc { right: 0; bottom: 0; width: 104px; height: 100%; }
.cm-art-cd { right: -26px; top: 50%; width: 118px; height: 118px; margin-top: -59px; opacity: 0.34; }
@media (max-width: 860px) {
.cm-info { border-top-color: #EAF0F3; }
.cm-art-bj { right: 5px; width: 50px; height: 38px; }
.cm-art-cc { width: 70px; height: 56%; }
.cm-art-cc .cm-moon { display: none; }
.cm-art-cd { right: -26px; top: auto; bottom: -30px; width: 84px; height: 84px; margin-top: 0; opacity: 0.3; }
}
#cities { background: radial-gradient(1100px 700px at 36% 60%, rgba(0,199,200,0.06), rgba(0,199,200,0) 70%),
linear-gradient(180deg, #FAFCFD 0%, #F4F8FA 100%); }
.cm { border: 0; border-radius: 0; background: none; overflow: visible; }
.cm-map { margin: 32px 24px 48px 0; }
.cm-info { padding: 32px 0 48px 24px; }
@media (max-width: 1100px) {
.cm-info { padding: 28px 0 40px 16px; }
}
@media (max-width: 860px) {
.cm { border-radius: 0; }
.cm-map { margin: 12px 4px 32px 0; }
.cm-info { padding: 16px 0 0; border-top: 0; }
}
html { overscroll-behavior-y: none; background: #B3EBEC; }
body { overscroll-behavior-y: none; }
.foot { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) calc(100% - 300px), rgba(255,255,255,0.7) 100%),
radial-gradient(900px 520px at 88% 0%, rgba(255,255,255,0.22), rgba(255,255,255,0) 62%),
linear-gradient(160deg, #1FCFCF 0%, #00C7C8 50%, #00BDBF 100%); }
@media (hover: none) and (pointer: coarse) {
.nav.nav-stuck { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255,255,255,0.97); }
}
.menu-idx, .menu-en { display: none; }
@media (max-width: 860px) {
.menu-overlay { background: radial-gradient(520px 420px at 100% 0%, rgba(255,255,255,0.30), rgba(255,255,255,0) 65%),
linear-gradient(165deg, #1FCFCF 0%, #00C7C8 55%, #00BDBF 100%); }
.menu-dots, .menu-topline { display: none; }
.menu-logo { left: 20px; top: 19px; }
.menu-logo .logo-menu { width: 54px; height: 26px; }
.menu-close { top: 11px; right: 20px; width: auto; height: 42px; box-sizing: border-box; gap: 12px; padding: 0 5px 0 16px;
border-radius: 999px; background: #FFFFFF; color: #0B0D12; font-size: 0; box-shadow: 0 10px 24px -14px rgba(4,52,59,0.55); }
.menu-close::before { content: 'CLOSE'; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: calc(12px * var(--fz, 1)); letter-spacing: 0.16em; }
.menu-close::after { content: '\00D7'; width: 32px; height: 32px; border-radius: 50%; background: #0B0D12; color: #FFFFFF;
display: flex; align-items: center; justify-content: center; font-size: calc(20px * var(--fz, 1)); line-height: 1; }
.menu-close:hover { background: #FFFFFF; }
.menu-list { left: 20px; right: 20px; top: 92px; bottom: auto; justify-content: flex-start; gap: 0; }
.menu-item { opacity: 1 !important; gap: 16px; padding: 19px 2px; font-size: calc(28px * var(--fz, 1)); font-weight: 800; line-height: 1.2; letter-spacing: 0.01em;
border-bottom: 1px solid rgba(4,52,59,0.16); -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease; }
.menu-item:first-child { border-top: 1px solid rgba(4,52,59,0.16); }
.menu-item:active { background: rgba(255,255,255,0.18); }
.menu-arrow { display: none !important; }
.menu-idx { display: block; width: 20px; font-size: calc(12px * var(--fz, 1)); font-weight: 700; letter-spacing: 0.04em; color: rgba(4,52,59,0.62); }
.menu-en { display: block; margin-left: auto; font-size: calc(10px * var(--fz, 1)); font-weight: 700; letter-spacing: 0.16em; color: rgba(4,52,59,0.7); }
.menu-item[href="#roles"] { margin-top: 30px; height: 58px; box-sizing: border-box; padding: 0 8px 0 26px; border: 0; border-radius: 999px;
background: #0B0D12; color: #FFFFFF; font-size: calc(17px * var(--fz, 1)); font-weight: 700; letter-spacing: 0.06em;
box-shadow: 0 16px 32px -18px rgba(4,52,59,0.75); }
.menu-item[href="#roles"]:active { background: #262A33; }
.menu-item[href="#roles"] .menu-idx { display: none; }
.menu-item[href="#roles"] .menu-en { width: 42px; height: 42px; border-radius: 50%; background: #00C7C8; color: #04343B;
display: flex; align-items: center; justify-content: center;
font-family: system-ui, sans-serif; font-size: calc(18px * var(--fz, 1)); letter-spacing: 0; }
.menu-foot { left: 20px; right: 20px; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); padding-top: 16px;
border-top: 1px solid rgba(4,52,59,0.16); font-size: calc(12px * var(--fz, 1)); line-height: 1.8; color: rgba(4,52,59,0.88); }
@media (prefers-reduced-motion: no-preference) {
.menu-overlay.is-open .menu-list { animation: ybMenuFade 0.35s ease both; }
.menu-overlay.is-open .menu-item { animation: ybMenuUp 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.menu-overlay.is-open .menu-item:nth-child(2) { animation-delay: 0.04s; }
.menu-overlay.is-open .menu-item:nth-child(3) { animation-delay: 0.08s; }
.menu-overlay.is-open .menu-item:nth-child(4) { animation-delay: 0.12s; }
.menu-overlay.is-open .menu-item:nth-child(5) { animation-delay: 0.18s; }
}
}
@media (max-width: 860px) and (max-height: 560px) {
.menu-foot { display: none; }
.menu-list { top: 76px; }
.menu-item { padding: 12px 2px; font-size: calc(22px * var(--fz, 1)); }
.menu-item[href="#roles"] { margin-top: 18px; height: 50px; }
.menu-item[href="#roles"] .menu-en { width: 36px; height: 36px; }
}
@keyframes ybMenuFade { from { opacity: 0; } }
@keyframes ybMenuUp { from { transform: translateY(16px); } }
@media (max-width: 860px) {
.menu-close { top: 11px; right: 20px; width: 42px; height: 42px; box-sizing: border-box; padding: 0; gap: 0; border-radius: 50%;
background: rgba(255,255,255,0.28); border: 1px solid rgba(255,255,255,0.6); box-shadow: none; font-size: 0;
-webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease; }
.menu-close:hover, .menu-close:active { background: rgba(255,255,255,0.45); }
.menu-close::before, .menu-close::after { content: ''; position: absolute; left: 50%; top: 50%; display: block; width: 16px; height: 1.75px;
padding: 0; border-radius: 1px; background: #04343B; transform: translate(-50%, -50%) rotate(45deg); }
.menu-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
}
@media (max-width: 860px) and (min-height: 730px) {
.menu-item { padding-top: 16px; padding-bottom: 16px; }
.menu-item[href="#roles"] { margin-top: 24px; }
.menu-visual { display: block; left: 0; right: 0; top: 472px; bottom: 0; width: auto; z-index: 1;
border-radius: 50% 50% 0 0 / 46px 46px 0 0;
background: linear-gradient(170deg, #FFFFFF 0%, #F1F6FF 100%);
box-shadow: 0 -18px 40px -24px rgba(4,52,59,0.45); }
.menu-visual > div:nth-child(1) { left: auto !important; right: 124px !important; top: calc(50% - 112px) !important; width: 84px !important; height: 104px !important; border-radius: 22px !important; }
.menu-visual > div:nth-child(2) { left: auto !important; right: 42px !important; top: calc(50% - 72px) !important; width: 90px !important; height: 110px !important; border-radius: 22px !important; }
.menu-visual > div:nth-child(3) { left: auto !important; right: 152px !important; top: calc(50% - 18px) !important; width: 56px !important; height: 56px !important; border-radius: 16px !important; }
.menu-visual > div:nth-child(4) { right: -96px !important; bottom: -140px !important; width: 300px !important; height: 300px !important; border-width: 42px !important; }
.menu-visual > div:nth-child(5) { left: 20px !important; right: auto !important; top: calc(50% - 106px) !important; bottom: auto !important; text-align: left !important;
font-size: calc(19px * var(--fz, 1)) !important; line-height: 1.6 !important; font-weight: 800; letter-spacing: 0.02em; color: #0B0D12 !important; }
.menu-foot { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); padding-top: 0; border-top: 0; color: #5B6472; }
@media (prefers-reduced-motion: no-preference) {
.menu-overlay.is-open .menu-visual { animation: ybMenuRise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s both; }
.menu-overlay.is-open .menu-visual > div:nth-child(-n+3) { animation: ybMenuPop 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.menu-overlay.is-open .menu-visual > div:nth-child(1) { animation-delay: 0.22s; }
.menu-overlay.is-open .menu-visual > div:nth-child(2) { animation-delay: 0.3s; }
.menu-overlay.is-open .menu-visual > div:nth-child(3) { animation-delay: 0.38s; }
.menu-overlay.is-open .menu-foot { animation: ybMenuFade 0.5s ease 0.3s both; }
}
}
@keyframes ybMenuRise { from { transform: translateY(60px); opacity: 0; } }
@keyframes ybMenuPop { from { transform: translateY(26px) scale(0.9); opacity: 0; } }
.menu-close-t, .menu-close-i { display: none; }
@media (max-width: 860px) {
.menu-close { top: 11px; right: 20px; width: auto; height: 42px; box-sizing: border-box; display: flex; align-items: center; gap: 12px;
padding: 0 5px 0 16px; border-radius: 999px; border: 1px solid rgba(11,13,18,0.1); background: rgba(255,255,255,0.62);
box-shadow: none; color: #0B0D12; font-size: 0; }
.menu-close:hover, .menu-close:active { background: #FFFFFF; }
.menu-close::before, .menu-close::after { content: none; }
.menu-close-x { display: none; }
.menu-close-t { display: block; font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; font-size: calc(12px * var(--fz, 1)); line-height: 1; letter-spacing: 0.16em; }
.menu-close-i { display: block; position: relative; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: #0B0D12; }
.menu-close-i i { position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; border-radius: 1px; background: #FFFFFF;
transform: translate(-50%, -50%) rotate(45deg); }
.menu-close-i i + i { transform: translate(-50%, -50%) rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
.menu-overlay.is-open .menu-close-i i { animation: ybCloseA 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.menu-overlay.is-open .menu-close-i i + i { animation-name: ybCloseB; }
}
}
@keyframes ybCloseA { from { transform: translate(-50%, -50%) translateY(-3px) rotate(0deg); } }
@keyframes ybCloseB { from { transform: translate(-50%, -50%) translateY(3px) rotate(0deg); } }
@media (max-width: 860px) {
.menu-overlay { background: radial-gradient(460px 340px at 100% 0%, rgba(255,255,255,0.32), rgba(255,255,255,0) 70%),
linear-gradient(175deg, #06C3C5 0%, #1CCBCB 38%, #7FDFDF 76%, #BDF0EF 100%); }
.menu-idx { display: none; }
.menu-item:not([href="#roles"]) .menu-en { display: none; }
.menu-visual { display: block; left: auto; right: 20px; top: auto; bottom: calc(30px + env(safe-area-inset-bottom, 0px));
width: 46px; height: 46px; z-index: 4; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.menu-visual > div:nth-child(1) { left: 0 !important; right: auto !important; top: 0 !important; width: 24px !important; height: 30px !important; border-radius: 8px !important; }
.menu-visual > div:nth-child(2) { left: auto !important; right: 0 !important; top: 12px !important; width: 26px !important; height: 34px !important; border-radius: 8px !important; }
.menu-visual > div:nth-child(-n+3) { box-shadow: 0 0 0 2px rgba(255,255,255,0.92); }
.menu-visual > div:nth-child(3) { left: 0 !important; right: auto !important; top: 28px !important; width: 16px !important; height: 16px !important; border-radius: 5px !important; }
.menu-visual > div:nth-child(4), .menu-visual > div:nth-child(5) { display: none; }
.menu-foot { bottom: calc(26px + env(safe-area-inset-bottom, 0px)); padding-top: 16px; border-top: 1px solid rgba(4,52,59,0.16); color: rgba(4,52,59,0.88); }
@media (prefers-reduced-motion: no-preference) {
.menu-overlay.is-open .menu-visual { animation: ybMenuFade 0.4s ease 0.2s both; }
.menu-overlay.is-open .menu-visual > div:nth-child(-n+3) { animation: ybMenuPop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.menu-overlay.is-open .menu-visual > div:nth-child(1) { animation-delay: 0.26s; }
.menu-overlay.is-open .menu-visual > div:nth-child(2) { animation-delay: 0.32s; }
.menu-overlay.is-open .menu-visual > div:nth-child(3) { animation-delay: 0.38s; }
}
}
@media (max-width: 860px) and (max-height: 560px) {
.menu-visual { display: none; }
}
#biz4 .chips-cap { display: flex; align-items: center; gap: 10px; font-size: calc(13px * var(--fz, 1)); letter-spacing: 0.04em; }
#biz4 .chips-cap::after { content: ''; flex: 1 1 auto; max-width: 120px; height: 1px; background: linear-gradient(90deg, #CDBEF0, rgba(205,190,240,0)); }
#biz4 .chips.six { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 460px; }
#biz4 .chips.six .chip { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 14px; border-radius: 12px;
font-size: calc(14px * var(--fz, 1)); font-weight: 600; color: #2A1A5E; background: rgba(255,255,255,0.82); border: 1px solid #E4DCF6;
box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 6px 16px -12px rgba(74,31,160,0.35); white-space: nowrap; }
#biz4 .chips.six .chip::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
background: linear-gradient(135deg, #9C7BF2 0%, #4A1FA0 100%); box-shadow: 0 0 0 3px rgba(123,79,207,0.12); }
#biz4 .chips.six .chip .chip-sep { margin: 0 -3px; height: 12px; background: #CDBEF0; }
#biz4 .custom { max-width: 460px; margin-top: 16px; padding: 16px 16px 16px 20px; border-radius: 16px; border-color: #E0D6F5;
background: linear-gradient(115deg, #FFFFFF 0%, #F7F3FF 60%, #F1EAFF 100%); }
#biz4 .custom-t { font-size: calc(15px * var(--fz, 1)); }
#biz4 .custom-a { width: 34px; height: 34px; font-size: calc(15px * var(--fz, 1)); background: linear-gradient(135deg, #8B63E6 0%, #4A1FA0 100%);
box-shadow: 0 8px 18px -8px rgba(74,31,160,0.7); }
#biz4 .aud-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; font-size: calc(12px * var(--fz, 1)); color: #6A6283; letter-spacing: 0.04em; }
#biz4 .aud-row + .aud-row { margin-top: 10px; }
#biz4 .aud { margin-left: 0; padding: 5px 11px; border-radius: 999px; font-size: calc(13px * var(--fz, 1)); font-weight: 600; letter-spacing: 0; color: #4A1FA0; background: #ECE5FB; }
#biz4 .aud-row .aud:first-child { margin-left: 4px; }
#biz4 .art { background: radial-gradient(520px 380px at 82% 6%, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%),
radial-gradient(420px 360px at 8% 100%, rgba(155,120,235,0.22), rgba(155,120,235,0) 70%),
linear-gradient(160deg, #F1ECFC 0%, #E5DCF7 100%) !important;
border-color: #DED3F3 !important; }
#biz4 .xz-card { animation: ybXzFloat 7s ease-in-out infinite; border-color: #E8E1F7 !important; border-radius: 22px !important;
box-shadow: 0 30px 70px -24px rgba(74,31,160,0.35), 0 2px 0 rgba(255,255,255,0.9) inset !important; }
#biz4 .xz-card > .mono:first-child { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
background: #F1EAFF; color: #4A1FA0 !important; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 20px !important; }
#biz4 .xz-card > .mono:first-child::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #7B4FCF; }
#biz4 .xz-hl { background: linear-gradient(100deg, #7B4FCF 0%, #4A1FA0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#biz4 .step { font-size: calc(13px * var(--fz, 1)); color: #5B5470; }
#biz4 .step b { width: 30px; height: 30px; border: 1.5px solid #CBBCF0; color: #4A1FA0; font-weight: 700; }
@keyframes yb-step { 0%, 26% { background: linear-gradient(135deg, #8B63E6, #4A1FA0); border-color: #4A1FA0; color: #FFFFFF; }
33%, 100% { background: #FFFFFF; border-color: #CBBCF0; color: #4A1FA0; } }
#biz4 .xz-stamp { width: 76px !important; height: 76px !important; border: 1.5px solid #4A1FA0 !important; font-size: calc(14px * var(--fz, 1)) !important;
letter-spacing: 0.06em; box-shadow: inset 0 0 0 4px rgba(255,255,255,0.85), inset 0 0 0 5px rgba(74,31,160,0.55);
background: rgba(255,255,255,0.88) !important; animation: none; transform: rotate(-8deg) !important; }
#biz4 .seats-box { padding: 14px 16px 16px; border-radius: 14px; background: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.9);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 12px 30px -20px rgba(74,31,160,0.45); }
#biz4 .seats-box .mono { margin-bottom: 10px !important; font-weight: 700; letter-spacing: 0.12em; }
#biz4 .seat-grid { grid-template-columns: repeat(10, 8px); gap: 7px; }
#biz4 .seat-grid i { width: 8px; height: 8px; border-color: #7B4FCF; }
@keyframes ybXzFloat { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { #biz4 .xz-card { transform: translateX(-50%) !important; } }
@media (max-width: 860px) {
#biz4 .chips.six { max-width: none; }
#biz4 .chips.six .chip { gap: 8px; padding: 10px 12px; font-size: calc(13px * var(--fz, 1)); }
#biz4 .custom { max-width: none; }
}
@media (max-width: 380px) {
#biz4 .chips.six .chip { gap: 8px; padding: 10px 9px; font-size: calc(12px * var(--fz, 1)); }
}
.art-ring .rs-ringlbl { font-size: calc(max(12px, 2.35cqmin) * var(--fz, 1)); padding: 0.28em 0.9em; }
.art-ring .rs-name { font-size: calc(max(10.5px, 2.3cqmin) * var(--fz, 1)); }
.art-ring .rs-ailbl { font-size: calc(max(10.5px, 2.3cqmin) * var(--fz, 1)); }
.art-ring .rs-citylbl { font-size: calc(max(10.5px, 2.3cqmin) * var(--fz, 1)); }
.art-ring .rs-ai { font-size: calc(max(12px, 3cqmin) * var(--fz, 1)); }
.art-ring .rs-ai.rs-ai-w, .art-ring .rs-ai-w { font-size: calc(max(8.5px, 2.1cqmin) * var(--fz, 1)); }
.art-ring .rs-grp { font-size: calc(max(10px, 2.15cqmin) * var(--fz, 1)); padding: 0.2em 0.8em; }
.hero-ai { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 0 30px 0; font-weight: 600; }
.ai3d { display: block; width: min(480px, 35vw); height: auto; overflow: visible; transform-origin: 50% 60%;
animation: ybAiFloat 6.5s ease-in-out infinite; }
.ai-holo { animation: ybAiHolo 9s linear infinite; }
.ai-sheen { animation: ybAiSheen 7s ease-in-out infinite; }
.ai-spk { transform-box: fill-box; transform-origin: center; animation: ybAiSpk 3.2s ease-in-out infinite; }
.ai-spk.s2 { animation-delay: -1.1s; } .ai-spk.s3 { animation-delay: -2.2s; }
@keyframes ybAiFloat { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-10px) rotate(0.8deg); } }
@keyframes ybAiHolo { from { transform: translateX(0); } to { transform: translateX(-1900px); } }
@keyframes ybAiSheen { 0%, 12% { transform: translateX(-200px) skewX(-18deg); } 42%, 100% { transform: translateX(2300px) skewX(-18deg); } }
@keyframes ybAiSpk { 0%, 100% { opacity: 0.25; scale: 0.6; } 50% { opacity: 1; scale: 1; } }
.ai-tk { display: block; height: 1.3em; overflow: hidden; margin-top: 6px; font-size: calc(34px * var(--fz, 1)); line-height: 1.3; font-weight: 800; letter-spacing: 0.02em; }
.ai-tk-list { display: block; animation: ybAiTk 15s cubic-bezier(0.7, 0, 0.25, 1) infinite; }
.ai-tk-list b { display: block; height: 1.3em; font-weight: 800; }
@keyframes ybAiTk { 0.00%, 13.33% { transform: translateY(0.00em); } 16.67%, 30.00% { transform: translateY(-1.30em); } 33.33%, 46.67% { transform: translateY(-2.60em); } 50.00%, 63.33% { transform: translateY(-3.90em); } 66.67%, 80.00% { transform: translateY(-5.20em); } 83.33%, 96.67% { transform: translateY(-6.50em); } 100% { transform: translateY(-7.80em); } }
.ai-sub { display: block; margin-top: 12px; font-size: calc(17px * var(--fz, 1)); line-height: 1.5; font-weight: 500; letter-spacing: 0.08em; color: #4B5563; }
.hl-hh { display: block; width: 112px; height: 21px; }
.hl-fd { display: block; width: 157px; height: 17px; margin: 2px 0; }
.hc-hh { display: block; width: 86px; height: 16px; }
.hc-fd { display: block; width: 120px; height: 13px; }
@media (max-width: 1100px) { .hl-fd { width: 139px; height: 15px; } }
@media (max-width: 860px) {
.hero-ai { margin-bottom: 22px; }
.ai3d { width: 250px; }
.ai-tk { font-size: calc(24px * var(--fz, 1)); margin-top: 2px; }
.ai-sub { font-size: calc(14px * var(--fz, 1)); margin-top: 6px; letter-spacing: 0.06em; }
.hero > .hero-aurora.ha5, .hero > .hero-aurora.ha6 { width: 260px !important; height: 260px !important; top: 46% !important; }
.hero > .hero-aurora.ha5 { right: -30% !important; } .hero > .hero-aurora.ha6 { left: -30% !important; }
.hero-more { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.ai3d, .ai-holo, .ai-sheen, .ai-spk, .ai-tk-list { animation: none !important; }
.ai-sheen { display: none; }
}
.st-kicker::before { background: linear-gradient(90deg, #00B5B6 0 16.6%, #FF6A3D 16.6% 33.3%, #6D4AD6 33.3% 50%, #2FBF71 50% 66.6%, #4C7DFF 66.6% 83.3%, #E0A100 83.3% 100%) !important; }
@media (min-width: 861px) {
.st6 .st-row { padding: 13px 0; row-gap: 3px; }
.st6 .st-k { font-size: calc(34px * var(--fz, 1)); }
.st6 .st-p { font-size: calc(18px * var(--fz, 1)); line-height: 1.45; }
.st6 .st-kicker { margin-bottom: 18px; }
}
@media (min-width: 861px) and (max-width: 1200px) { .st6 .st-k { font-size: calc(31px * var(--fz, 1)); } .st6 .st-p { font-size: calc(17px * var(--fz, 1)); } }
@media (max-width: 860px) { .st6 .st-row { padding: 12px 0; } }
.map.hex { height: 720px; }
@media (max-width: 860px) { .map.hex { height: 540px; } }
.mk-hh { --mk: #2E5BFF; }
.mk-fd { --mk: #E0A100; }
.mk-sbx { display: flex; gap: 5px; width: 100%; padding: 4px; border: 1.5px dashed rgba(46,91,255,0.5); border-radius: 9px; box-sizing: border-box; }
.mk-sbx i { flex: 1; height: 16px; border-radius: 5px; background: #E6EDFF; animation: mk-sbx 5s ease-in-out infinite; }
.mk-sbx i:nth-child(2) { animation-delay: -4s; } .mk-sbx i:nth-child(3) { animation-delay: -3s; }
.mk-sbx i:nth-child(4) { animation-delay: -2s; } .mk-sbx i:nth-child(5) { animation-delay: -1s; }
@keyframes mk-sbx { 0%, 100% { background: #E6EDFF; box-shadow: none; } 18%, 34% { background: #2E5BFF; box-shadow: 0 0 10px rgba(46,91,255,0.5); } }
.mk-crew { display: flex; flex: 0 0 auto; padding-left: 6px; }
.mk-crew i { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: -6px; border-radius: 50%; border: 2px solid #FFFFFF;
box-sizing: border-box; font-style: normal; font-size: calc(9px * var(--fz, 1)); font-weight: 800; color: #FFFFFF; line-height: 1; }
.mk-fd .mk-link i { background: #E0A100; box-shadow: 0 0 0 3px rgba(224,161,0,0.22); }
.mk-fd .mk-link { background: repeating-linear-gradient(90deg, rgba(224,161,0,0.6) 0 4px, transparent 4px 8px); background-size: 16px 2px; }
.mk-flag { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: #FFF4D6; color: #B7791F; display: flex; align-items: center; justify-content: center;
box-shadow: inset 0 0 0 1px rgba(224,161,0,0.45); }
.mk-flag svg { display: block; width: 17px; height: 17px; }
@media (max-width: 860px) {
.mk-sbx { padding: 3px; gap: 3px; border-radius: 6px; }
.mk-sbx i { height: 10px; border-radius: 3px; }
.mk-crew { padding-left: 5px; }
.mk-crew i { width: 17px; height: 17px; margin-left: -5px; border-width: 1.5px; font-size: calc(7px * var(--fz, 1)); }
.mk-flag { width: 20px; height: 20px; border-radius: 6px; }
.mk-flag svg { width: 12px; height: 12px; }
.mk-fd .mk-link { display: none; }
.mk-fd .mk-flag { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .mk-sbx i { animation: none !important; } }
.chap-navy { color: #FFFFFF; background: radial-gradient(900px 640px at 82% 18%, rgba(46,91,255,0.30), rgba(46,91,255,0) 66%),
radial-gradient(700px 520px at 6% 96%, rgba(0,199,200,0.12), rgba(0,199,200,0) 70%),
linear-gradient(160deg, #0B1640 0%, #060B22 100%); }
.chap-navy .chap-idx { color: #7A8BC9; }
.chap-navy .chap-idx .cur { color: #FFFFFF; }
.chap-navy .chap-cat { color: #DCE5FF; }
.chap-navy .biz-desc { color: #B4C2EE; }
.chap-navy .chip { background: rgba(91,140,255,0.08); border-color: #2D3F80; color: #D2DCFF; }
.chap-navy .aud-row { color: #8F9ED3; }
.chap-navy .aud { color: #E4EAFF; }
.chap-navy .evo { color: #E4EAFF; }
.chap-navy .evo i { color: #5868A3; }
.chap-navy .evo .on { color: #9DBBFF; }
.chap-navy .chap-cta { color: #FFFFFF; }
.chap-navy :focus-visible { outline-color: #FFFFFF; }
.hh-evo em, .fd-evo em { font-style: normal; font-weight: 400; font-size: calc(11px * var(--fz, 1)); margin-left: 6px; opacity: 0.75; letter-spacing: 0.02em; }
.wm-hh { display: block; width: 385.6px; height: 72px; }
@media (max-width: 1100px) { .wm-hh { width: 278.5px; height: 52px; } }
@media (max-width: 860px) { .wm-hh { width: 235.6px; height: 44px; } }
.hh-deco { position: absolute; inset: 0; pointer-events: none;
background-image: linear-gradient(rgba(120,150,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(120,150,255,0.06) 1px, transparent 1px);
background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 0%, transparent 75%); }
.hh-art { display: flex; flex-direction: column; align-items: stretch; padding: 36px 40px 34px 40px; gap: 0;
background: linear-gradient(180deg, #0E1C52 0%, #0A1338 100%); border: 1px solid #23367A;
box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) inset; }
.hh-bg { position: absolute; inset: 0; background-image: radial-gradient(rgba(140,170,255,0.16) 1px, transparent 1.2px); background-size: 18px 18px; opacity: 0.6; }
.hh-head { position: relative; display: flex; align-items: center; justify-content: space-between; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.12em; }
.hh-lbl { color: #8FB0FF; }
.hh-live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(76,125,255,0.14); color: #CFDBFF; border: 1px solid rgba(120,155,255,0.3); }
.hh-live i { width: 6px; height: 6px; border-radius: 50%; background: #5BE3A1; box-shadow: 0 0 0 0 rgba(91,227,161,0.6); animation: hhLive 2s ease-out infinite; }
@keyframes hhLive { 0% { box-shadow: 0 0 0 0 rgba(91,227,161,0.55); } 100% { box-shadow: 0 0 0 8px rgba(91,227,161,0); } }
.hh-cluster { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 6px 0 0 0; }
.hh-cubes { display: block; width: 74%; max-height: 100%; overflow: visible; filter: drop-shadow(0 18px 30px rgba(20,60,255,0.35)); }
.hh-c { color: #1E3A8F; animation: hhCube 5.6s ease-in-out infinite; }
@keyframes hhCube { 0%, 62%, 100% { color: #1E3A8F; } 72% { color: #4C7DFF; } 80% { color: #A9C2FF; } 90% { color: #3C67E0; } }
.hh-flow { position: relative; height: 34px; display: flex; justify-content: space-around; padding: 0 22%; }
.hh-flow i { position: relative; width: 1px; height: 100%; background: linear-gradient(180deg, rgba(120,155,255,0.15), rgba(120,155,255,0.6)); }
.hh-flow i::after { content: ''; position: absolute; left: -2.5px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #9DBBFF; box-shadow: 0 0 10px #4C7DFF; animation: hhFlow 1.8s linear infinite; }
.hh-flow i:nth-child(2)::after { animation-delay: -0.6s; } .hh-flow i:nth-child(3)::after { animation-delay: -1.2s; }
@keyframes hhFlow { from { transform: translateY(-2px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { transform: translateY(30px); opacity: 0; } }
.hh-plat { position: relative; padding: 14px 14px 14px 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(76,125,255,0.30), rgba(46,91,255,0.12));
border: 1px solid rgba(140,170,255,0.55); box-shadow: 0 0 0 4px rgba(76,125,255,0.08), 0 20px 40px -20px rgba(46,91,255,0.8); }
.hh-plat-t { font-size: calc(10.5px * var(--fz, 1)); letter-spacing: 0.12em; color: #BFD0FF; margin: 0 0 12px 4px; }
.hh-plat-t b { color: #FFFFFF; font-weight: 700; }
.hh-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hh-mods span { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 4px 10px; border-radius: 12px; background: rgba(8,16,48,0.6); border: 1px solid rgba(120,155,255,0.28); }
.hh-mods b { font-size: calc(14px * var(--fz, 1)); font-weight: 700; color: #FFFFFF; white-space: nowrap; }
.hh-mods em { font-style: normal; font-size: calc(9px * var(--fz, 1)); letter-spacing: 0.1em; color: #8FB0FF; }
.hh-blast { position: relative; display: flex; align-items: center; justify-content: center; height: 40px; }
.hh-blast::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed rgba(255,184,0,0.55); }
.hh-blast span { position: relative; padding: 3px 10px; border-radius: 999px; font-size: calc(10px * var(--fz, 1)); letter-spacing: 0.1em; color: #FFD27A; background: #0A1338; border: 1px solid rgba(255,184,0,0.4); }
.hh-legacy { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hh-legacy span { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 10px; font-size: calc(10.5px * var(--fz, 1)); letter-spacing: 0.1em; color: #9AA6CC;
background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 1100px) { .hh-art { padding: 28px 28px 26px; } .hh-mods b { font-size: calc(13px * var(--fz, 1)); } }
@media (max-width: 860px) {
.hh-art { padding: 20px 16px 18px; }
.hh-head { font-size: calc(9px * var(--fz, 1)); }
.hh-live { padding: 4px 8px; gap: 6px; }
.hh-cubes { width: 80%; }
.hh-flow { height: 22px; }
.hh-plat { padding: 10px 8px; border-radius: 14px; }
.hh-plat-t { font-size: calc(8.5px * var(--fz, 1)); margin: 0 0 8px 2px; }
.hh-mods { gap: 5px; }
.hh-mods span { padding: 8px 2px 7px; gap: 3px; border-radius: 9px; }
.hh-mods b { font-size: calc(11px * var(--fz, 1)); }
.hh-mods em { font-size: calc(7px * var(--fz, 1)); }
.hh-blast { height: 30px; }
.hh-blast span { font-size: calc(8px * var(--fz, 1)); padding: 2px 8px; }
.hh-legacy { gap: 5px; }
.hh-legacy span { height: 28px; font-size: calc(8.5px * var(--fz, 1)); border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) { .hh-c, .hh-flow i::after, .hh-live i { animation: none !important; } }
.chap-gold { color: #1A1306; background: radial-gradient(820px 600px at 12% 12%, rgba(255,212,110,0.32), rgba(255,212,110,0) 66%),
linear-gradient(180deg, #FCF8EF 0%, #F8F0DF 100%); }
.chap-gold .chap-idx { color: #9C8C6E; }
.chap-gold .chap-idx .cur { color: #1A1306; }
.chap-gold .chap-cat { color: #1A1306; }
.chap-gold .biz-desc { color: #5A4B30; }
.chap-gold .aud-row { color: #6B5C40; }
.chap-gold .aud { color: #1A1306; }
.chap-gold .evo i { color: #B7A57F; }
.chap-gold .evo .on { color: #8F5B00; }
.chap-gold .chips-cap { display: flex; align-items: center; gap: 10px; font-size: calc(13px * var(--fz, 1)); font-weight: 700; letter-spacing: 0.04em; color: #8F5B00; margin: 0 0 12px 0; }
.chap-gold .chips-cap::after { content: ''; flex: 1 1 auto; max-width: 120px; height: 1px; background: linear-gradient(90deg, #E3C98E, rgba(227,201,142,0)); }
.chips.four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 470px; margin-bottom: 24px; }
.chips.four .chip { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 11px 14px 11px 28px; border-radius: 12px; border: 1px solid #EADCBC;
background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF2 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 8px 18px -14px rgba(138,90,0,0.45); color: #1A1306; }
.chips.four .chip::before { content: ''; position: absolute; left: 13px; top: 17px; width: 6px; height: 6px; border-radius: 50%;
background: linear-gradient(135deg, #F2B705 0%, #A86A00 100%); box-shadow: 0 0 0 3px rgba(224,161,0,0.14); }
.chips.four .chip b { font-size: calc(14px * var(--fz, 1)); font-weight: 700; white-space: nowrap; }
.chips.four .chip small { font-size: calc(12px * var(--fz, 1)); color: #6B5C40; white-space: nowrap; }
.fd-evo { margin: 0 0 4px 0; }
.wm-fd { display: block; width: 517px; height: 56px; max-width: 100%; }
@media (max-width: 1100px) { .wm-fd { width: 370px; height: 40px; } }
@media (max-width: 860px) { .wm-fd { width: 314px; height: 34px; } .chips.four { max-width: none; } .chips.four .chip { padding: 10px 10px 10px 24px; } .chips.four .chip::before { left: 11px; }
.chips.four .chip b { font-size: calc(13px * var(--fz, 1)); } .chips.four .chip small { font-size: calc(11px * var(--fz, 1)); white-space: normal; } }
@media (max-width: 380px) { .wm-fd { width: 277px; height: 30px; } .chips.four .chip b { font-size: calc(12px * var(--fz, 1)); white-space: normal; } }
.fd-art { display: flex; flex-direction: column; padding: 34px 38px 32px; background: radial-gradient(520px 380px at 50% 46%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%),
linear-gradient(160deg, #FFF6E2 0%, #F6E7C6 100%); border: 1px solid #EBD9AF; box-shadow: 0 40px 80px -36px rgba(138,90,0,0.45); }
.fd-head { position: relative; display: flex; align-items: center; justify-content: space-between; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.12em; }
.fd-lbl { color: #8F5B00; font-weight: 700; }
.fd-on { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; background: #1A1306; color: #FFE7A8; }
.fd-on i { width: 6px; height: 6px; border-radius: 50%; background: #F2B705; animation: hhLive 2s ease-out infinite; }
.fd-stage { position: relative; flex: 1 1 auto; margin: 10px 0 8px; }
.fd-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.fd-ln { stroke: #C9A65A; stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; animation: yb-flow 1.6s linear infinite; }
.fd-core { position: absolute; left: 50%; top: 50%; width: 168px; height: 168px; transform: translate(-50%, -50%); }
.fd-roi { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fd-roi-bg { fill: none; stroke: rgba(201,166,90,0.28); stroke-width: 4; }
.fd-roi-arc { fill: none; stroke: #E0A100; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 72 100; animation: fdRoi 6s ease-in-out infinite; }
@keyframes fdRoi { 0% { stroke-dasharray: 18 100; } 60%, 100% { stroke-dasharray: 86 100; } }
.fd-core-in { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #3A2B0E 0%, #1A1306 70%); display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px; color: #FFFFFF; box-shadow: 0 18px 40px -14px rgba(26,19,6,0.7); }
.fd-core-in .mono { font-size: calc(8.5px * var(--fz, 1)); letter-spacing: 0.14em; color: #E8C774; }
.fd-core-in b { font-size: calc(21px * var(--fz, 1)); font-weight: 800; letter-spacing: 0.04em; }
.fd-core-in .fd-roi-t { margin-top: 2px; padding: 2px 8px; border-radius: 999px; background: #F2B705; color: #1A1306; font-weight: 700; font-size: calc(10px * var(--fz, 1)); letter-spacing: 0.04em; }
.fd-ex { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; background: #FFFFFF;
border: 1px solid #EEDDB7; box-shadow: 0 16px 34px -18px rgba(138,90,0,0.5); white-space: nowrap; animation: fdBob 6s ease-in-out infinite; }
.fd-ex:nth-of-type(2) { animation-delay: -1.5s; } .fd-ex:nth-of-type(3) { animation-delay: -3s; } .fd-ex:nth-of-type(4) { animation-delay: -4.5s; }
@keyframes fdBob { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }
.fd-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.fd-ic svg { display: block; width: 20px; height: 20px; }
.fd-ex-t { display: flex; flex-direction: column; gap: 3px; }
.fd-ex-t b { font-size: calc(15px * var(--fz, 1)); font-weight: 800; color: #1A1306; line-height: 1.1; }
.fd-ex-t em { font-style: normal; font-size: calc(9px * var(--fz, 1)); letter-spacing: 0.12em; color: #765617; }
.fd-track { position: relative; padding: 14px 16px 16px; border-radius: 16px; background: rgba(255,255,255,0.72); border: 1px solid #EEDDB7; }
.fd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; font-size: calc(13px * var(--fz, 1)); font-weight: 700; color: #5A4B30; }
.fd-steps span:last-child { color: #8F5B00; }
.fd-bar { position: relative; height: 4px; margin-top: 12px; border-radius: 2px; background: #F0E2C0; overflow: hidden; }
.fd-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 25%; border-radius: 2px; background: linear-gradient(90deg, #F2B705, #A86A00); animation: fdBar 8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
@keyframes fdBar { 0%, 18% { width: 25%; } 25%, 43% { width: 50%; } 50%, 68% { width: 75%; } 75%, 100% { width: 100%; } }
@media (max-width: 1100px) { .fd-art { padding: 26px 26px 24px; } .fd-core { width: 140px; height: 140px; } .fd-core-in b { font-size: calc(18px * var(--fz, 1)); } .fd-ex-t b { font-size: calc(14px * var(--fz, 1)); } }
@media (max-width: 860px) {
.fd-art { padding: 18px 14px 16px; }
.fd-head { font-size: calc(8.5px * var(--fz, 1)); }
.fd-on { padding: 4px 8px; gap: 6px; }
.fd-core { width: 112px; height: 112px; }
.fd-core-in { inset: 10px; gap: 2px; }
.fd-core-in .mono { font-size: calc(6.5px * var(--fz, 1)); }
.fd-core-in b { font-size: calc(15px * var(--fz, 1)); }
.fd-core-in .fd-roi-t { font-size: calc(8px * var(--fz, 1)); padding: 1px 6px; }
.fd-ex { gap: 6px; padding: 6px 9px 6px 6px; border-radius: 12px; }
.fd-ic { width: 26px; height: 26px; border-radius: 8px; }
.fd-ic svg { width: 15px; height: 15px; }
.fd-ex-t b { font-size: calc(12px * var(--fz, 1)); }
.fd-ex-t em { font-size: calc(7px * var(--fz, 1)); }
.fd-track { padding: 10px 8px 12px; border-radius: 12px; }
.fd-steps { font-size: calc(11px * var(--fz, 1)); }
.fd-bar { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .fd-ln, .fd-roi-arc, .fd-ex, .fd-bar i, .fd-on i { animation: none !important; } }
:root { --fz: 1; }
html[data-fz="1"] { --fz: 1.15; }
html[data-fz="2"] { --fz: 1.3; }
html[data-fz="3"] { --fz: 1.45; }
.chap-hh { color: #FFFFFF; background: radial-gradient(900px 640px at 76% 34%, rgba(255,255,255,0.22), rgba(255,255,255,0) 62%),
radial-gradient(700px 520px at 0% 100%, rgba(0,214,255,0.22), rgba(0,214,255,0) 70%),
linear-gradient(150deg, #4174FF 0%, #2B57F6 48%, #1C3ED6 100%); }
.chap-hh .chap-idx { color: rgba(255,255,255,0.72); }
.chap-hh .chap-idx .cur { color: #FFFFFF; }
.chap-hh .chap-dots b { border-color: rgba(255,255,255,0.9) !important; opacity: 0.8; }
.chap-hh .chap-dots b[style*="opacity:1"] { background: #FFFFFF !important; opacity: 1; }
.chap-hh .chap-cat { color: #FFFFFF; }
.chap-hh .biz-desc { color: rgba(255,255,255,0.94); }
.chap-hh .chip { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.55); color: #FFFFFF; }
.chap-hh .aud-row { color: rgba(255,255,255,0.82); }
.chap-hh .aud { color: #FFFFFF; }
.chap-hh .evo { color: #FFFFFF; }
.chap-hh .evo i { color: rgba(255,255,255,0.55); }
.chap-hh .evo .on { color: #C2F1FF; }
.chap-hh .chap-cta { color: #FFFFFF; }
.chap-hh :focus-visible { outline-color: #FFFFFF; }
.chap-hh .wm-hh { filter: drop-shadow(0 10px 24px rgba(10,30,140,0.35)); }
.hh2-deco { position: absolute; left: 72%; top: 50%; width: 0; height: 0; pointer-events: none; }
.hh2-deco i { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); border-radius: 22%; border: 1px solid rgba(255,255,255,0.16); box-sizing: border-box; }
.hh2-deco i:nth-child(2) { border-style: dashed; border-color: rgba(255,255,255,0.14); }
.hh2-art { display: flex; flex-direction: column; padding: 30px 32px 22px; background: linear-gradient(180deg, #FFFFFF 0%, #F1F5FF 100%);
box-shadow: 0 44px 90px -32px rgba(8,26,120,0.6), 0 0 0 1px rgba(255,255,255,0.7); }
.hh2-head { position: relative; display: flex; align-items: center; justify-content: space-between; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.12em; }
.hh2-lbl { color: #2E5BFF; font-weight: 700; }
.hh2-live { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; background: #EEF3FF; color: #2448D8; border: 1px solid #CFDBFF; }
.hh2-live i { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; animation: hhLive 2s ease-out infinite; }
.hh2-box { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
.hh2-stage { position: relative; width: min(100cqw, 106.6cqh); aspect-ratio: 640 / 600; container-type: inline-size; }
.hh-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hh-cube { color: #A9C1FF; animation: hh2Cube 4.8s ease-in-out infinite; }
@keyframes hh2Cube { 0%, 54%, 100% { color: #A9C1FF; } 64% { color: #2E5BFF; } 74% { color: #19C3FF; } 86% { color: #5E86FF; } }
.hh-beam { stroke: #6E8FFF; stroke-width: 1.5; stroke-dasharray: 3 5; opacity: 0.75; }
.hh-pk { fill: #2E5BFF; animation: hh2Pk 1.5s linear infinite; }
.hh-pk2 { fill: #13B7EA; }
@keyframes hh2Pk { 0% { transform: translateY(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateY(var(--d)); opacity: 0; } }
.hh-iso { fill: rgba(255,176,32,0.05); stroke: #FF9F0A; stroke-width: 1.6; stroke-dasharray: 7 6; animation: hh2Dash 1.4s linear infinite; }
@keyframes hh2Dash { to { stroke-dashoffset: -26; } }
.hh-mod { animation: hh2Mod 4.8s ease-in-out infinite; }
@keyframes hh2Mod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.hh-lead { fill: none; stroke: #A9B8E8; stroke-width: 1.2; }
.hh-lead-d { fill: #2E5BFF; }
.hh2-cl { position: absolute; transform: translateY(-50%); display: flex; flex-direction: column; gap: 0.3em; max-width: 34%; }
.hh2-cl .mono { font-size: calc(max(7.5px, 1.55cqw) * var(--fz, 1)); letter-spacing: 0.12em; color: #7C8AB5; white-space: nowrap; }
.hh2-cl b { font-size: calc(max(11.5px, 3.1cqw) * var(--fz, 1)); font-weight: 800; color: #0B1640; line-height: 1.15; white-space: nowrap; }
.hh2-cl small { font-size: calc(max(9px, 1.9cqw) * var(--fz, 1)); color: #5B6890; line-height: 1.4; }
.hh2-cl-on b { color: #2E5BFF; font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.01em; }
.hh2-tag { position: absolute; transform: translate(-10%, -50%); padding: 0.35em 0.9em; border-radius: 999px; font-size: calc(max(9px, 1.8cqw) * var(--fz, 1)); font-weight: 700;
color: #8F4A00; background: #FFF4E0; border: 1px solid #FFCB7A; white-space: nowrap; }
@container (max-width: 460px) { .hh2-cl small { display: none; } }
@media (max-width: 1100px) { .hh2-art { padding: 24px 22px 18px; } }
@media (max-width: 860px) {
.hh2-art { padding: 18px 14px 14px; }
.hh2-head { font-size: calc(8.5px * var(--fz, 1)); }
.hh2-live { padding: 4px 8px; gap: 6px; }
.hh2-deco { left: 50%; top: 74%; }
}
@media (prefers-reduced-motion: reduce) { .hh-cube, .hh-pk, .hh-iso, .hh-mod, .hh2-live i { animation: none !important; } .hh-pk { display: none; } }
.nav, .menu-overlay, .art, .map, .orbits, .hero-links { --fz: 1; }
.fz-ctl { --fz: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; margin-top: 34px; padding: 6px;
border-radius: 999px; background: rgba(255,255,255,0.26); border: 1px solid rgba(255,255,255,0.7);
box-shadow: 0 10px 30px -18px rgba(4,52,59,0.5); }
.fz-btn { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0;
border: 0; border-radius: 50%; background: #FFFFFF; color: #04343B; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(4,52,59,0.55);
transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease; }
.fz-btn svg { display: block; width: 28px; height: 28px; }
.fz-btn:hover { transform: scale(1.06); }
.fz-btn:active { transform: scale(0.96); background: #E8FBFB; }
.fz-btn[aria-disabled="true"] { opacity: 0.42; cursor: default; transform: none; }
.fz-btn:focus-visible { outline: 2px solid #04343B; outline-offset: 3px; }
.fz-lv { display: flex; align-items: flex-end; gap: 4px; height: 24px; padding: 0 2px; }
.fz-lv i { display: block; width: 6px; border-radius: 2px; background: rgba(4,52,59,0.22); transition: background 0.2s ease; }
.fz-lv i:nth-child(1) { height: 9px; } .fz-lv i:nth-child(2) { height: 14px; }
.fz-lv i:nth-child(3) { height: 19px; } .fz-lv i:nth-child(4) { height: 24px; }
.fz-lv i:nth-child(1),
html[data-fz="1"] .fz-lv i:nth-child(-n+2),
html[data-fz="2"] .fz-lv i:nth-child(-n+3),
html[data-fz="3"] .fz-lv i { background: #04343B; }
@media (max-width: 860px) {
.fz-ctl { margin-top: 26px; gap: 12px; padding: 5px; }
.fz-btn { width: 48px; height: 48px; }
.fz-btn svg { width: 26px; height: 26px; }
}
@media (max-width: 860px) and (max-height: 640px) { .fz-ctl { margin-top: 16px; } .fz-btn { width: 44px; height: 44px; } }
@media (max-width: 860px) { .menu-foot { padding-right: 62px; box-sizing: border-box; } }
@media (prefers-reduced-motion: reduce) { .fz-btn, .fz-lv i { transition: none; } }
.hn-cap { font-size: calc(13.5px * var(--fz, 1)); line-height: 1.4; }
.hc-cap { font-size: calc(12.5px * var(--fz, 1)); line-height: 1.35; white-space: normal; align-items: flex-start; }
.hc-cap i { margin-top: 0.42em; }
@media (max-width: 860px) { .hero-chips { grid-template-columns: repeat(2, minmax(0, 172px)); } }
@media (max-width: 380px) { .hero-chips { grid-template-columns: repeat(2, minmax(0, calc((100vw - 42px) / 2))); } }
html[data-fz] #biz4 .chips.six .chip, html[data-fz] .chips.four .chip b, html[data-fz] .chips.four .chip small,
html[data-fz] .st-k, html[data-fz] .chip, html[data-fz] .stat-grid .stat-label { white-space: normal; }
@media (max-width: 380px) { .stat-grid .stat-label { white-space: normal; } }
.coop-num, .coop-kicker { --fz: 1; }
html[data-fz] .sec-head { gap: 16px; }
html[data-fz] .sec-head > h2 { flex: 0 0 auto; white-space: nowrap; }
html[data-fz] .sec-head > div { min-width: 0; text-align: right; }
.cm-city.cm-sz { --lc: #8E4EC6; }
.cm-city.cm-hz { --lc: #2FA36B; }
.cm-city.is-lit .cm-n.sd-r { left: 16px; }
.cm-city.is-lit .cm-n.sd-b { top: 25px; text-align: center; }
.cm-card-sz { background: linear-gradient(160deg, #F8F3FF 0%, #E9DDFF 100%); }
.cm-card-sz .cm-card-en { color: #6234B5; }
.cm-card-hz { background: linear-gradient(160deg, #EFFAF4 0%, #D5F0E2 100%); }
.cm-card-hz .cm-card-en { color: #126C45; }
.cm-art-sz { right: 4px; bottom: 0; width: 108px; height: 100%; }
.cm-art-hz { right: 0; bottom: 0; width: 108px; height: 100%; }
.cm-cards { gap: 8px; }
.cm-card { padding-top: 12px; padding-bottom: 13px; }
.cm-op { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: calc(14px * var(--fz, 1)); line-height: 1.4; font-weight: 800; color: #0B0D12; }
.cm-op i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #00A6A8; box-shadow: 0 0 0 4px rgba(0,166,168,0.16); }
.cm-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; letter-spacing: 0; color: #5B6472; font-size: calc(12px * var(--fz, 1)); }
.cm-lg { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.cm-lg i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #8594AC; box-shadow: 0 0 0 3px rgba(133,148,172,0.16); }
.cm-lg-on { font-weight: 700; color: #0B0D12; }
.cm-lg-on i { width: 11px; height: 11px; background: conic-gradient(#E5484D 0 20%, #3D63DD 0 40%, #F08C1A 0 60%, #8E4EC6 0 80%, #2FA36B 0); box-shadow: 0 0 0 3px rgba(255,255,255,0.9); }
.cm-lg-t { font-size: calc(10px * var(--fz, 1)); letter-spacing: 0.08em; color: #8A93A1; }
@media (max-width: 1100px) {
.cm-city[data-city="南昌"] .cm-n { display: none; }
}
@media (max-width: 860px) {
.cm-op { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cm-city[data-city="广州"], .cm-city[data-city="香港"] { display: none; }
.cm-city.is-lit .cm-n.sd-r { left: 11px; }
.cm-city.is-lit .cm-n.sd-b { top: 18px; }
.cm-note { bottom: -26px; gap: 4px 14px; font-size: calc(11px * var(--fz, 1)); }
.cm-lg-t { font-size: calc(9px * var(--fz, 1)); }
.cm-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cm-card { grid-column: span 2; }
.cm-card-sz, .cm-card-hz { grid-column: span 3; }
.cm-art-sz { right: 2px; width: 74px; height: 62%; }
.cm-art-hz { width: 78px; height: 62%; }
.cm-art-sz .cm-flower { display: none; }
}
.cm-map { --fz: 1; }
.chap-more { display: inline-flex; align-items: center; gap: 10px; margin: 30px 0 0 32px; padding-bottom: 5px;
font-size: calc(15px * var(--fz, 1)); font-weight: 500; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor;
transition: gap 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .chap-more:hover { gap: 14px; } }
.chap-dark .chap-more, .chap-hh .chap-more { color: #FFFFFF; }
.chap-teal .chap-more { color: #04343B; }
@media (max-width: 860px) { .chap-more { margin-left: 24px; } }
.cm-city.cm-nc { --lc: #1597B0; }
.cm-card-nc { background: linear-gradient(160deg, #EEF9FC 0%, #D2EEF5 100%); }
.cm-card-nc .cm-card-en { color: #0A6577; }
.cm-art-nc { right: 0; bottom: 0; width: 108px; height: 100%; }
.cm-lg-on i { background: conic-gradient(#E5484D 0 16.66%, #3D63DD 0 33.33%, #F08C1A 0 50%, #8E4EC6 0 66.66%, #2FA36B 0 83.33%, #1597B0 0); }
@media (max-width: 860px) {
.cm-city.cm-nc .cm-n.sd-b { left: -9px; }
.cm-card-sz, .cm-card-hz { grid-column: span 2; }
.cm-art-nc { width: 78px; height: 62%; }
.cm-art-sz { width: 64px; }
.cm-art-hz { width: 70px; }
}
.st-k { font-weight: 500; color: #2A3140; letter-spacing: 0; }
.st-k .st-z { color: var(--sk); font-weight: 700; }
.st-k .st-dot { color: #C2C7D0; font-weight: 400; }
@media (min-width: 861px) { .st6 .st-k { font-size: calc(30px * var(--fz, 1)); } }
@media (min-width: 861px) and (max-width: 1200px) { .st6 .st-k { font-size: calc(28px * var(--fz, 1)); } }
@media (max-width: 860px) { .st-k { font-size: calc(19px * var(--fz, 1)); } }
.mk-s.mk-s4 i { margin: 0 3px; }
@media (max-width: 1100px) { .mk-s.mk-s4 i { margin: 0 2px; } }
@media (max-width: 860px) { .mk-s.mk-s4 { font-size: calc(9px * var(--fz, 1)); letter-spacing: -0.01em; } .mk-s.mk-s4 i { margin: 0 1.5px; } }
.mchip { white-space: nowrap; }
.fm-kicker { color: #00C7C8; }
.fm-submit { background: #00C7C8; color: #04343B; }
.fm-submit:hover { background: #00B5B6; }
.fm-input:focus, .fm-area:focus, .fm-input:focus-visible, .fm-area:focus-visible { border-color: #00C7C8; box-shadow: 0 0 0 3px rgba(0,199,200,0.22); }
.fm-ok { background: #E0F8F8; color: #00A3A4; }
.fm-consent a { color: #007A7E; }
@media (min-width: 861px) { .role.coop { min-height: calc(298px * var(--fz, 1)); } }
@media (min-width: 561px) and (max-width: 860px) { .role.coop { min-height: calc(256px * var(--fz, 1)); } }
@media (max-width: 560px) { .role.coop, .role.coop:last-child { min-height: calc(186px * var(--fz, 1)); } }
.fm-overlay { background: rgba(4,30,34,0.56); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fm-card { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 960px; padding: 0; overflow-x: hidden;
border-radius: 28px; box-shadow: 0 40px 100px -30px rgba(0,40,46,0.6), 0 0 0 1px rgba(255,255,255,0.6); }
.fm-card > sc-if, .fm-edit { display: contents; }
.fm-overlay.is-open .fm-card { animation: fmIn 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes fmIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: none; } }
.fm-title:focus { outline: none; }
.fm-head { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 44px 36px 36px; color: #04343B;
background: radial-gradient(420px 360px at 100% 100%, rgba(255,255,255,0.32), rgba(255,255,255,0) 62%),
radial-gradient(360px 300px at 0% 0%, rgba(118,238,236,0.55), rgba(118,238,236,0) 66%),
linear-gradient(160deg, #1FCFCF 0%, #00C7C8 48%, #00B3B5 100%); }
.fm-head::before, .fm-head::after { content: ''; position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.55); pointer-events: none; }
.fm-head::before { width: 300px; height: 300px; right: -120px; bottom: -110px; box-shadow: inset 0 0 0 34px rgba(255,255,255,0.08); }
.fm-head::after { width: 190px; height: 190px; right: -65px; bottom: -55px; background: rgba(255,255,255,0.14); }
.fm-head-in { position: relative; z-index: 1; }
.fm-head .fm-kicker { margin-bottom: 18px; color: rgba(4,52,59,0.72); letter-spacing: 0.16em; }
.fm-head .fm-title { font-size: calc(34px * var(--fz, 1)); line-height: 1.2; font-weight: 800; color: #04343B; }
.fm-head .fm-sub { margin: 14px 0 0; font-size: calc(15px * var(--fz, 1)); line-height: 1.75; color: rgba(4,52,59,0.82); }
.fm-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; position: relative; }
.fm-steps::before { content: ''; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 0; border-left: 1.5px dashed rgba(4,52,59,0.35); }
.fm-steps li { position: relative; display: flex; align-items: center; gap: 14px; font-size: calc(15px * var(--fz, 1)); font-weight: 700; color: #04343B; }
.fm-steps b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #FFFFFF; color: #00999B;
font-size: calc(13px * var(--fz, 1)); font-weight: 800; box-shadow: 0 6px 14px -6px rgba(0,96,104,0.6); }
.fm-brand { position: relative; z-index: 1; margin-top: auto; padding-top: 40px; color: #FFFFFF; }
.fm-logo { display: block; width: 112px; height: auto; filter: drop-shadow(0 8px 18px rgba(0,96,104,0.35)); }
.fm-body { min-width: 0; padding: 40px 44px 30px; }
.fm-body .fm-label { color: #1F2937; }
.fm-req { color: #C2410C; }
.fm-types { gap: 8px; margin-bottom: 24px; }
.fm-type { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border: 1px solid #DCE5E6; background: #F7FAFA; color: #374151;
font-size: calc(14px * var(--fz, 1)); line-height: 1.3; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.fm-type::before { content: ''; width: 0; height: 14px; overflow: hidden; transition: width 0.15s ease; }
@media (hover: hover) and (pointer: fine) { .fm-type:hover { border-color: #00C7C8; background: #FFFFFF; } }
.fm-type:focus-visible { outline: 2px solid #007A7E; outline-offset: 2px; }
.fm-type[aria-checked="true"] { background: #00C7C8 !important; border-color: #00C7C8 !important; color: #04343B !important; font-weight: 700;
box-shadow: 0 8px 18px -10px rgba(0,122,126,0.9); }
.fm-type[aria-checked="true"]::before { width: 14px;
background: center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%2304343B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fm-grid { gap: 16px 14px; margin-bottom: 16px; }
.fm-input, .fm-area { border: 1px solid #E1E8E9; border-radius: 12px; background: #F6F9F9; padding: 12px 14px; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
.fm-input::placeholder, .fm-area::placeholder { color: #9AA6A8; }
.fm-input:focus, .fm-area:focus, .fm-input:focus-visible, .fm-area:focus-visible { background: #FFFFFF; border-color: #00C7C8; box-shadow: 0 0 0 3px rgba(0,199,200,0.2); outline: none; }
.fm-area { min-height: 92px; }
.fm-submit { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; padding: 15px 0; font-weight: 700; letter-spacing: 0.04em;
box-shadow: 0 14px 28px -16px rgba(0,122,126,0.9); transition: background 0.15s ease, transform 0.15s ease; }
.fm-edit .fm-submit::after, .fm-body .fm-submit::after { content: '→'; font-size: calc(17px * var(--fz, 1)); transition: transform 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .fm-submit:hover { transform: translateY(-1px); } .fm-body .fm-submit:hover::after { transform: translateX(3px); } }
.fm-consent { margin-top: 14px; color: #7A8486; }
.fm-done { grid-column: 1 / -1; padding: 64px 44px 48px; text-align: center; }
.fm-done .fm-ok { margin: 0 auto 22px; width: 76px; height: 76px; background: linear-gradient(135deg, #3FE0DE 0%, #00B5B6 100%); color: #FFFFFF;
box-shadow: 0 16px 30px -14px rgba(0,122,126,0.9); }
.fm-done .fm-title { font-size: calc(28px * var(--fz, 1)); font-weight: 800; color: #04343B; }
.fm-done .fm-sub { color: #4B5563; }
.fm-done .fm-kicker { display: inline-block; margin: 6px 0 30px !important; padding: 5px 14px; border-radius: 999px; background: #E6F8F8; color: #007A7E !important; }
.fm-done .fm-kicker:empty { display: none; }
.fm-done .fm-submit { max-width: 280px; margin: 0 auto; }
.fm-done .fm-submit::after { content: none; }
.fm-close { z-index: 3; background: #F1F5F5; color: #04343B; }
.fm-card.is-sent { grid-template-columns: minmax(0, 1fr) !important; max-width: 520px; }
@media (min-width: 861px) {
.fm-card { grid-template-columns: 330px minmax(0, 1fr); }
.fm-head .fm-sub { display: none; }
.fm-close { top: 22px; right: 22px; }
}
@media (max-width: 860px) {
.fm-card { max-width: none; border-radius: 24px 24px 0 0; }
.fm-overlay.is-open .fm-card { animation-name: fmUp; }
@keyframes fmUp { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.fm-head { display: block; padding: 26px 64px 22px 20px; }
.fm-head::before { width: 180px; height: 180px; right: -60px; bottom: -110px; box-shadow: inset 0 0 0 22px rgba(255,255,255,0.08); }
.fm-head::after { width: 110px; height: 110px; right: -24px; bottom: -70px; }
.fm-head .fm-kicker { margin-bottom: 8px; }
.fm-head .fm-title { font-size: calc(24px * var(--fz, 1)); }
.fm-head .fm-sub { margin-top: 6px; font-size: calc(14px * var(--fz, 1)); line-height: 1.6; }
.fm-steps { display: none; }
.fm-brand { display: none; }
.fm-close { top: 18px; right: 16px; background: rgba(255,255,255,0.75); }
.fm-body { padding: 22px 20px 20px; }
.fm-types { gap: 7px; margin-bottom: 20px; }
.fm-type { padding: 7px 12px; font-size: calc(13px * var(--fz, 1)); }
.fm-grid { gap: 14px 10px; }
.fm-area { min-height: 80px; }
.fm-body .fm-submit { position: sticky; bottom: 12px; z-index: 2; box-shadow: 0 14px 28px -16px rgba(0,122,126,0.9), 0 0 0 12px #FFFFFF; }
.fm-done { padding: 48px 20px 36px; }
}
@media (prefers-reduced-motion: reduce) {
.fm-overlay.is-open .fm-card { animation: none; }
.fm-type, .fm-type::before, .fm-submit, .fm-submit::after, .fm-input, .fm-area { transition: none; }
}
.menu-overlay, .fm-overlay { display: none; }
.menu-overlay.is-open { display: block; }
.fm-overlay.is-open { display: flex; }
.fm-err { display: none; }
.fm-err.is-on { display: block; }
.fm-done { display: none; }
.fm-card.is-sent .fm-edit { display: none; }
.fm-card.is-sent .fm-done { display: block; }
.fm-submit:disabled { opacity: 0.6; cursor: default; }
.fm-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.share-thumb { position: absolute; left: -9999px; top: 0; width: 400px; height: 400px; opacity: 0; pointer-events: none; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 300; background: #0B0D12; color: #FFFFFF; padding: 10px 18px; border-radius: 999px; font-size: 14px; }
.skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
.bp-t-teal { --a-ink: #04343B; --a-sub: #0A4A52; --a-acc: #04343B; --a-card: rgba(255,255,255,0.26); --a-bd: rgba(255,255,255,0.78); --a-num: #04343B; --b-bg: #F2FBFB; --b-ink: #04343B; --b-sub: #3E6469; --b-acc: #007A7E; --b-dot: #00B5B6; --b-card: #FFFFFF; --b-bd: #CDEDEE; --btn-bg: #04343B; --btn-ink: #FFFFFF; }
.bp-t-dark { --a-ink: #FFFFFF; --a-sub: #9DB59D; --a-acc: #6FE38A; --a-card: #0F160F; --a-bd: #1F2E1F; --a-num: #6FE38A; --b-bg: #0C120C; --b-ink: #FFFFFF; --b-sub: #9DB59D; --b-acc: #6FE38A; --b-dot: #6FE38A; --b-card: #111A11; --b-bd: #223322; --btn-bg: #6FE38A; --btn-ink: #080B08; }
.bp-t-blue { --a-ink: #0B0D12; --a-sub: #4B5563; --a-acc: #C2410C; --a-card: #FFFFFF; --a-bd: #FFC9B5; --a-num: #C2410C; --b-bg: #FFFFFF; --b-ink: #0B0D12; --b-sub: #4B5563; --b-acc: #C2410C; --b-dot: #FF6A3D; --b-card: #FFFFFF; --b-bd: #E3E8F0; --btn-bg: #0B0D12; --btn-ink: #FFFFFF; }
.bp-t-hh { --a-ink: #FFFFFF; --a-sub: rgba(255,255,255,0.9); --a-acc: #FFFFFF; --a-card: rgba(255,255,255,0.14); --a-bd: rgba(255,255,255,0.5); --a-num: #C2F1FF; --b-bg: #F4F7FF; --b-ink: #0B1640; --b-sub: #4A5878; --b-acc: #1F49E0; --b-dot: #2B57F6; --b-card: #FFFFFF; --b-bd: #DCE4FF; --btn-bg: #FFFFFF; --btn-ink: #1C3ED6; }
.bp-t-gold { --a-ink: #1A1306; --a-sub: #5A4B30; --a-acc: #8F5B00; --a-card: #FFFFFF; --a-bd: #F0E2C2; --a-num: #8F5B00; --b-bg: #FFFCF6; --b-ink: #1A1306; --b-sub: #5A4B30; --b-acc: #8F5B00; --b-dot: #E0A100; --b-card: #FFFFFF; --b-bd: #F1E6CC; --btn-bg: #1A1306; --btn-ink: #FFFFFF; }
.bp-t-paper { --a-ink: #1B1530; --a-sub: #5B5470; --a-acc: #5A34C4; --a-card: #FFFFFF; --a-bd: #E2DAF3; --a-num: #5A34C4; --b-bg: #FBFAFF; --b-ink: #1B1530; --b-sub: #5B5470; --b-acc: #5A34C4; --b-dot: #7B4FCF; --b-card: #FFFFFF; --b-bd: #ECE5FB; --btn-bg: #4A1FA0; --btn-ink: #FFFFFF; }
  /* ---------- v5.54 业务二级页 ---------- */
  :where(h1.yb-h) { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
  .bp-crumb { gap: 10px; color: var(--a-sub) !important; }
  .bp-crumb a { color: inherit; text-decoration: none; padding: 0; border: 0; }
  .bp-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .bp-crumb > * { line-height: 1.4166667; }
  .bp-sep { opacity: 0.6; }
  .bp-crumb b { font-weight: 700; color: var(--a-ink); }
  .bp-sec { position: relative; padding: 112px var(--px); }
  .bp-in { position: relative; z-index: 1; max-width: 1312px; margin: 0 auto; }
  .bp-a { --ink: var(--a-ink); --sub: var(--a-sub); --acc: var(--a-acc); --card: var(--a-card); --bd: var(--a-bd); --num: var(--a-num); --dot: var(--a-acc); color: var(--ink); }
  .bp-b { --ink: var(--b-ink); --sub: var(--b-sub); --acc: var(--b-acc); --card: var(--b-card); --bd: var(--b-bd); --num: var(--b-acc); --dot: var(--b-dot); color: var(--ink); background: var(--b-bg); }
  .bp-t-blue .bp-b { background-color: var(--b-bg); background-image: linear-gradient(rgba(47,107,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(47,107,255,0.05) 1px, transparent 1px); background-size: 32px 32px; }
  .bp-b + .bp-b { border-top: 1px solid var(--bd); }
  .bp-head { max-width: 820px; margin-bottom: 44px; }
  .bp-kick { margin: 0 0 14px; font-size: calc(12px * var(--fz, 1)); letter-spacing: 0.14em; color: var(--acc); }
  .bp-h2 { font-size: calc(40px * var(--fz, 1)); line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
  .bp-lead { margin-top: 18px; font-size: calc(18px * var(--fz, 1)); line-height: 1.75; color: var(--sub); }
  .bp-grid { display: grid; gap: 16px; }
  .bp-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bp-c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bp-c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bp-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bp-card { position: relative; box-sizing: border-box; padding: 26px 24px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--bd); }
  .bp-t-teal .bp-a .bp-card, .bp-t-hh .bp-a .bp-card { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .bp-num { display: block; margin-bottom: 18px; font-size: calc(12px * var(--fz, 1)); letter-spacing: 0.08em; color: var(--num); }
  .bp-h3 { font-size: calc(20px * var(--fz, 1)); line-height: 1.4; font-weight: 800; }
  .bp-p { margin-top: 10px; font-size: calc(15px * var(--fz, 1)); line-height: 1.7; color: var(--sub); }
  .bp-out { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--bd); font-size: calc(14px * var(--fz, 1)); line-height: 1.6; }
  .bp-out b, .bp-kv b { display: inline-block; margin-right: 8px; font-size: calc(12px * var(--fz, 1)); font-weight: 700; color: var(--acc); }
  .bp-kv { margin-top: 10px; font-size: calc(15px * var(--fz, 1)); line-height: 1.6; }
  .bp-scen .bp-kv + .bp-kv { margin-top: 6px; }
  .bp-foot, .bp-note { margin-top: 22px; font-size: calc(14px * var(--fz, 1)); line-height: 1.7; color: var(--sub); }
  .bp-more { margin-top: 14px; font-size: calc(14px * var(--fz, 1)); line-height: 1.7; color: var(--sub); }
  .bp-more summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--acc); }
  .bp-more summary::-webkit-details-marker { display: none; }
  .bp-more summary::after { content: '+'; font-weight: 400; }
  .bp-more[open] summary::after { content: '−'; }
  .bp-more p { margin-top: 8px; }
  .bp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
  .bp-tags-t { margin: 0 6px 0 0; font-size: calc(13px * var(--fz, 1)); font-weight: 700; color: var(--acc); }
  .bp-tag { padding: 7px 14px; border-radius: 999px; font-size: calc(14px * var(--fz, 1)); background: var(--card); border: 1px solid var(--bd); }
  .bp-sub { margin-top: 32px; }
  .bp-line { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; }
  .bp-line li { display: inline-flex; align-items: center; font-size: calc(16px * var(--fz, 1)); font-weight: 700; }
  .bp-line li + li::before { content: '→'; margin: 0 14px; font-weight: 400; color: var(--sub); opacity: 0.7; }
  .bp-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: s; }
  .bp-flow.bp-n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bp-step { position: relative; box-sizing: border-box; padding: 26px 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--bd); }
  .bp-step + .bp-step::before { content: '→'; position: absolute; left: -14px; top: 30px; transform: translateX(-50%); font-size: calc(16px * var(--fz, 1)); color: var(--sub); }
  .bp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .bp-ul { margin: 14px 0 0; padding: 0; list-style: none; }
  .bp-ul li { position: relative; padding-left: 16px; font-size: calc(15px * var(--fz, 1)); line-height: 1.9; color: var(--sub); }
  .bp-ul li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 6px; height: 6px; border-radius: 50%; background: var(--dot); }
  .bp-rows { margin-top: 26px; }
  .bp-rows .aud-row { color: var(--sub); font-size: calc(15px * var(--fz, 1)); }
  .bp-rows .aud { color: var(--ink); font-weight: 600; }
  .bp-link { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); transition: transform 0.2s ease, border-color 0.2s ease; }
  @media (hover: hover) and (pointer: fine) { .bp-link:hover { transform: translateY(-3px); border-color: var(--dot); } }
  .bp-link-n { font-size: calc(20px * var(--fz, 1)); font-weight: 800; }
  .bp-link-c { font-size: calc(13px * var(--fz, 1)); color: var(--sub); }
  .bp-link-d { margin-top: 10px; font-size: calc(14px * var(--fz, 1)); font-weight: 600; color: var(--acc); }
  .bp-city { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 28px 30px; border-radius: 20px; background: var(--card); border: 1px solid var(--bd); }
  .bp-cities { font-size: calc(16px * var(--fz, 1)); font-weight: 700; }
  .bp-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
  .bp-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
            font: inherit; font-size: calc(15px * var(--fz, 1)); font-weight: 700; color: var(--btn-ink); background: var(--btn-bg); transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .bp-b .bp-btn { color: #FFFFFF; background: var(--b-ink); }
  .bp-t-dark .bp-b .bp-btn { color: #080B08; background: #6FE38A; }
  .bp-btn span { font-size: calc(17px * var(--fz, 1)); }
  @media (hover: hover) and (pointer: fine) { .bp-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(0,0,0,0.45); } }
  .bp-textlink { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; font-size: calc(15px * var(--fz, 1)); font-weight: 600; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
  .bp-two-viz { align-items: center; gap: 48px; }
  .bp-viz { padding: 26px 26px 22px; border-radius: 22px; background: #0F160F; border: 1px solid #1F2E1F; color: #B8D4B8; }
  .bp-viz-h { display: flex; justify-content: space-between; align-items: center; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.12em; color: #6FE38A; }
  .bp-viz-tag { padding: 4px 10px; border-radius: 999px; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0; color: #B8D4B8; border: 1px solid #2A3A2A; }
  .bp-viz-bars { margin-top: 22px; display: grid; gap: 12px; }
  .bp-viz-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; font-size: calc(12px * var(--fz, 1)); }
  .bp-viz-row i { display: block; height: 10px; border-radius: 5px; background: #1E2E1E; overflow: hidden; }
  .bp-viz-row b { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #3DBA62, #6FE38A); }
  .bp-viz-mix { display: flex; gap: 4px; margin-top: 22px; height: 12px; }
  .bp-viz-mix i { display: block; border-radius: 4px; background: #6FE38A; }
  .bp-viz-mix i:nth-child(2) { background: #3DBA62; } .bp-viz-mix i:nth-child(3) { background: #2A7A44; } .bp-viz-mix i:nth-child(4) { background: #1E4A2C; }
  .bp-viz-legend { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.12em; color: #6FE38A; }
  .bp-viz-legend b { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #6FE38A 68%, #1E2E1E 68%); }
  .bp-tl { padding: 34px 36px; border-radius: 24px; background: #FFFFFF; color: #0B1640; box-shadow: 0 40px 80px -36px rgba(10,30,140,0.55); }
  .bp-tl ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; position: relative; }
  .bp-tl ol::before { content: ''; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: linear-gradient(90deg, #2B57F6, #A6ECFF); }
  .bp-tl li { position: relative; padding-top: 30px; }
  .bp-tl-dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; border: 3px solid #2B57F6; box-sizing: border-box; }
  .bp-tl .bp-num { color: #1F49E0; margin-bottom: 8px; }
  .bp-tl .bp-p { color: #4A5878; }
  .bp-api { display: flex; flex-wrap: wrap; gap: 10px; margin: -12px 0 24px; }
  .bp-api span { padding: 8px 14px; border-radius: 10px; font-size: calc(13px * var(--fz, 1)); color: var(--acc); background: var(--card); border: 1px solid var(--bd); }
  .bp-steps3 { list-style: none; margin: 0; padding: 34px 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative;
               border-radius: 24px; background: #FFFFFF; border: 1px solid #E2DAF3; box-shadow: 0 30px 60px -36px rgba(74,31,160,0.45); }
  .bp-steps3 li { position: relative; }
  .bp-s3n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%;
            font-size: calc(15px * var(--fz, 1)); font-weight: 800; color: #FFFFFF; background: linear-gradient(135deg, #8B63E6 0%, #4A1FA0 100%); }
  .bp-faqgrid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .bp-q { border-bottom: 1px solid var(--bd); }
  .bp-q summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: calc(17px * var(--fz, 1)); font-weight: 700; }
  .bp-q summary::-webkit-details-marker { display: none; }
  .bp-q summary::after { content: '+'; flex: 0 0 auto; font-size: calc(20px * var(--fz, 1)); font-weight: 400; color: var(--acc); }
  .bp-q[open] summary::after { content: '−'; }
  .bp-q p { padding: 0 0 20px; font-size: calc(15px * var(--fz, 1)); line-height: 1.8; color: var(--sub); }
  .bp-scope .bp-h3 { font-size: calc(16px * var(--fz, 1)); }
  .bp-scope .bp-h3 + .bp-ul { margin-bottom: 18px; }
  .bp-cta { padding-top: 120px; padding-bottom: 104px; }
  .bp-cta-h { font-size: calc(52px * var(--fz, 1)); line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; max-width: 900px; }
  .bp-cta .bp-acts { margin-top: 36px; }
  .bp-rel { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--bd); }
  .bp-rel .bp-kick { color: var(--sub); }
  .bp-rel-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .bp-rel-a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n a" "c a"; align-items: center; gap: 4px 12px; padding: 18px 20px; border-radius: 16px;
              text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--bd); }
  .bp-rel-a b { grid-area: n; font-size: calc(17px * var(--fz, 1)); font-weight: 800; }
  .bp-rel-a span:nth-of-type(1) { grid-area: c; font-size: calc(13px * var(--fz, 1)); color: var(--sub); }
  .bp-rel-a span:nth-of-type(2) { grid-area: a; font-size: calc(18px * var(--fz, 1)); }
  .bp-cityline { margin-top: 28px; font-size: calc(14px * var(--fz, 1)); color: var(--sub); }
  .bp-cityline a { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid currentColor; }
  .bp-a :focus-visible { outline-color: currentColor; }
  .foot-link[aria-current="page"] { font-weight: 700; }
  @media (max-width: 1100px) {
    .bp-c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bp-flow.bp-n5, .bp-tl ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .bp-tl ol::before { display: none; }
  }
  @media (max-width: 860px) {
    .bp-sec { padding: 72px var(--px); }
    .bp-head { margin-bottom: 28px; }
    .bp-h2 { font-size: calc(28px * var(--fz, 1)); }
    .bp-lead { font-size: calc(16px * var(--fz, 1)); }
    .bp-c3, .bp-two, .bp-flow, .bp-flow.bp-n5, .bp-faqgrid, .bp-rel-list, .bp-steps3, .bp-tl ol { grid-template-columns: minmax(0, 1fr); }
    .bp-c4, .bp-c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .bp-c5 > :last-child:nth-child(odd) { grid-column: span 2; }
    .bp-c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .bp-card, .bp-step { padding: 18px 16px; border-radius: 16px; }
    .bp-num { margin-bottom: 12px; }
    .bp-h3 { font-size: calc(17px * var(--fz, 1)); }
    .bp-p { font-size: calc(14px * var(--fz, 1)); }
    .bp-step + .bp-step::before { left: 26px; top: -14px; transform: translate(-50%, -50%) rotate(90deg); }
    .bp-flow { gap: 22px; }
    .bp-two-viz { gap: 24px; }
    .bp-tl, .bp-steps3 { padding: 24px 22px; }
    .bp-tl li { padding-top: 0; padding-left: 28px; }
    .bp-tl-dot { top: 4px; }
    .bp-city { padding: 22px 20px; }
    .bp-cta { padding-top: 80px; padding-bottom: 72px; }
    .bp-cta-h { font-size: calc(32px * var(--fz, 1)); }
    .bp-rel { margin-top: 44px; }
  }

  /* ================= v5.61 二级页重设计 ================= */
  .bp-x, .bp-close { overflow: hidden; }
  .bp-svg { display: block; width: 100%; height: auto; overflow: visible; }
  .bp-ic { width: 22px; height: 22px; flex: none; }
  .bp-wm { position: absolute; right: var(--px); top: 56px; font-size: calc(200px * var(--fz, 1)); line-height: 1; font-weight: 700; letter-spacing: -0.04em;
           color: transparent; -webkit-text-stroke: 1.5px var(--bd); pointer-events: none; user-select: none; }
  .bp-kick { display: flex; align-items: center; gap: 10px; }
  .bp-kbar { display: inline-block; width: 28px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--acc), var(--dot)); transform-origin: left center; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s; }
  .bp-head { position: relative; }
  .tw { display: inline-block; max-width: 100%; }   /* v5.62 标题意群：换行只在意群之间 */
  .bp-n { font-size: calc(12px * var(--fz, 1)); letter-spacing: 0.08em; color: var(--acc); }
  .bp-note { margin-top: 20px; font-size: calc(13px * var(--fz, 1)); line-height: 1.7; color: var(--sub); }

  /* 进场与循环动效 */
  .bp-rv .bp-x .rv, .bp-rv .bp-close .rv { opacity: 0; transform: translateY(26px);
       transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
  .bp-rv .is-in .rv { opacity: 1; transform: none; }
  .bp-rv .bp-x:not(.is-in) .bp-kbar, .bp-rv .bp-close:not(.is-in) .bp-kbar { transform: scaleX(0); }
  @keyframes bpSpin { to { transform: rotate(360deg); } }
  @keyframes bpFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  @keyframes bpPulse { 0% { transform: scale(0.86); opacity: 0.9; } 100% { transform: scale(1.4); opacity: 0; } }
  @keyframes bpDash { to { stroke-dashoffset: -40; } }
  @keyframes bpTravel { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
  @keyframes bpBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
  @keyframes bpNeedle { 0%, 100% { transform: rotate(-36deg); } 50% { transform: rotate(10deg); } }
  .a-spin { transform-box: fill-box; transform-origin: center; animation: bpSpin 30s linear infinite; }
  .a-float { animation: bpFloat 4.5s ease-in-out infinite; }
  .a-pulse { transform-box: fill-box; transform-origin: center; animation: bpPulse 2.6s ease-out infinite; }
  .a-dash { animation: bpDash 3s linear infinite; }
  .a-dot { stroke-dasharray: 0 101; animation: bpTravel 3.2s linear infinite; }
  .a-blink { animation: bpBlink 2.4s ease-in-out infinite; }
  .a-needle { animation: bpNeedle 3.6s ease-in-out infinite; }
  .a-draw { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(0.3, 0.6, 0.2, 1) 0.2s; }
  .a-gx { transform-box: fill-box; transform-origin: left center; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .a-gy { transform-box: fill-box; transform-origin: center bottom; transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .a-fade { transition: opacity 1s ease 0.3s; }
  .bp-rv .bp-x:not(.is-in) .a-draw { stroke-dashoffset: 100; }
  .bp-rv .bp-x:not(.is-in) .a-gx { transform: scaleX(0); }
  .bp-rv .bp-x:not(.is-in) .a-gy { transform: scaleY(0); }
  .bp-rv .bp-x:not(.is-in) .a-fade { opacity: 0; }
  .bp-rv .bp-x:not(.is-vis) *, .bp-rv .bp-close:not(.is-vis) * { animation-play-state: paused !important; }

  /* 手机上横向滑动的卡片组（下方圆点由脚本生成，只在手机上显示） */
  .bp-dots { display: none; }
  @media (max-width: 860px) {
    .bp-swipe { display: grid !important; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none !important; gap: 12px !important;
                overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--px)); padding: 6px var(--px) 18px;
                scroll-padding: 0 var(--px); scrollbar-width: none; }
    .bp-swipe::-webkit-scrollbar { display: none; }
    .bp-swipe > * { scroll-snap-align: start; }
    .bp-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
    .bp-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--bd); transition: width 0.3s ease, background 0.3s ease; }
    .bp-dots i.on { width: 20px; background: var(--acc); }
  }

  /* ---------- 友帮：一站连接 ---------- */
  .ov { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) minmax(0, 1fr); gap: 0 10px; align-items: stretch; }
  .ov-col { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
  .ov-hub { align-self: center; }
  .ov-card { position: relative; padding: 28px 26px 26px; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--bd);
             box-shadow: 0 24px 48px -34px rgba(4,52,59,0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .ov-card .bp-n { position: absolute; top: 26px; right: 26px; }
  .ov-ic { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 18px; border-radius: 15px; color: #007A7E;
           background: linear-gradient(135deg, #E6F7F7 0%, #C6EEEE 100%); }
  .ov-ic .bp-ic { width: 25px; height: 25px; }
  @media (hover: hover) and (pointer: fine) { .ov-card:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -30px rgba(4,52,59,0.45); } }

  /* ---------- 友帮：线上线下 ---------- */
  .oh { display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); align-items: center; }
  .oh-panel { display: grid; gap: 18px; padding: 22px; border-radius: 28px; background: rgba(255,255,255,0.24); border: 1px solid rgba(255,255,255,0.78);
              backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .oh-art { padding: 6px; border-radius: 20px; background: rgba(255,255,255,0.2); }
  .oh-art .bp-svg { max-height: 280px; }
  .oh-txt { padding: 0 6px 4px; }
  .oh-tag { font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.16em; color: var(--a-sub); }
  .oh-t { margin-top: 4px; font-size: calc(30px * var(--fz, 1)); font-weight: 800; line-height: 1.2; }
  .oh-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
  .oh-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; background: rgba(255,255,255,0.6); font-size: calc(16px * var(--fz, 1)); font-weight: 700; }
  .oh-ric { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #FFFFFF; color: #007A7E; }
  .oh-ric .bp-ic { width: 18px; height: 18px; }

  /* ---------- 业务卡片（友帮「一个入口」、各页「相关业务」） ---------- */
  .bts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .bts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bt { position: relative; display: flex; flex-direction: column; min-height: 268px; box-sizing: border-box; padding: 20px 22px 22px; border-radius: 22px;
        text-decoration: none; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .bt-art { height: 112px; margin: -4px -6px 10px; }
  .bt-art .bp-svg { height: 100%; }
  .bt-txt { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
  .bt-n { font-size: calc(22px * var(--fz, 1)); font-weight: 800; letter-spacing: -0.01em; }
  .bt-c { font-size: calc(13px * var(--fz, 1)); opacity: 0.78; }
  .bt-d { margin-top: 12px; font-size: calc(14px * var(--fz, 1)); font-weight: 700; }
  .bt-go { position: absolute; right: 18px; bottom: 16px; font-size: calc(18px * var(--fz, 1)); }
  .bt-sm { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 12px 44px 12px 14px; }
  .bt-sm .bt-art { width: 92px; height: 56px; margin: 0; flex: none; border-radius: 12px; }
  .bt-sm .bt-txt { margin: 0; }
  .bt-sm .bt-n { font-size: calc(18px * var(--fz, 1)); }
  .bt-sm .bt-go { top: 50%; bottom: auto; transform: translateY(-50%); }
  @media (hover: hover) and (pointer: fine) { .bt:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(0,0,0,0.42); } }
  .bt-opc { color: #04343B; background: linear-gradient(150deg, #E9FBFB 0%, #BFEDED 100%); }
  .bt-opc .bt-d { color: #007A7E; }
  .bt-hapower { color: #FFFFFF; background: radial-gradient(120% 90% at 80% 0%, #1A3A22 0%, #080B08 62%); }
  .bt-hapower .bt-c { color: #9DB59D; opacity: 1; } .bt-hapower .bt-d { color: #6FE38A; }
  .bt-hapworker { color: #0B0D12; background-color: #FFFFFF; border: 1px solid #FFD9CC;
                  background-image: linear-gradient(rgba(47,107,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(47,107,255,0.06) 1px, transparent 1px); background-size: 16px 16px; }
  .bt-hapworker .bt-d { color: #C2410C; }
  .bt-haphost { color: #FFFFFF; background: linear-gradient(150deg, #4A72FF 0%, #1C3ED6 100%); }
  .bt-haphost .bt-d { color: #C2F1FF; }
  .bt-fde-team { color: #1A1306; background: linear-gradient(150deg, #FFF9EA 0%, #F4E1B0 100%); }
  .bt-fde-team .bt-d { color: #8F5B00; }
  .bt-xinzhihui { color: #1B1530; background: linear-gradient(150deg, #F7F2FF 0%, #E2D4FB 100%); }
  .bt-xinzhihui .bt-d { color: #5A34C4; }

  /* ---------- Hapower：能力 ---------- */
  .hpc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .hpc-card { display: flex; flex-direction: column; border-radius: 20px; background: #0F160F; border: 1px solid #1F2E1F; overflow: hidden;
              transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
  .hpc-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid #1A271A; }
  .hpc-bar i { width: 7px; height: 7px; border-radius: 50%; background: #2A3A2A; }
  .hpc-bar span { margin-left: auto; font-size: calc(10px * var(--fz, 1)); letter-spacing: 0.06em; color: #6F8F6F; }
  .hpc-viz { padding: 16px 14px 4px; background: radial-gradient(80% 100% at 50% 0%, rgba(111,227,138,0.12), transparent 70%); }
  .hpc-txt { position: relative; padding: 14px 20px 22px; }
  .hpc-txt .bp-n { position: absolute; top: 18px; right: 20px; }
  @media (hover: hover) and (pointer: fine) { .hpc-card:hover { border-color: #3DBA62; transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(111,227,138,0.2), 0 30px 60px -30px rgba(111,227,138,0.4); } }

  /* ---------- Hapower：Token 看板 ---------- */
  .hpt { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.4fr); gap: 48px; align-items: center; }
  .hpt-tags { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .hpt-tag { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: #0F160F; border: 1px solid #1F2E1F; font-size: calc(17px * var(--fz, 1)); font-weight: 700; color: #FFFFFF; }
  .hpt-tag span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(111,227,138,0.12); color: #6FE38A; }
  .hpd { border-radius: 24px; background: #0B110B; border: 1px solid #1F2E1F; padding: 18px 20px 22px; color: #B8D4B8; box-shadow: 0 40px 90px -40px rgba(111,227,138,0.35); }
  .hpd-h { display: flex; align-items: center; gap: 6px; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.12em; color: #6FE38A; }
  .hpd-h i { width: 7px; height: 7px; border-radius: 50%; background: #2A3A2A; }
  .hpd-h span { margin-left: 8px; }
  .hpd-h em { margin-left: auto; padding: 3px 10px; border-radius: 999px; border: 1px solid #2A3A2A; font-style: normal; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0; color: #B8D4B8; }
  .hpd-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; }
  .hpd-top > div { padding: 12px 14px; border-radius: 16px; background: #0F160F; border: 1px solid #1A271A; }
  .hpd-top p { margin-bottom: 8px; font-size: calc(10px * var(--fz, 1)); letter-spacing: 0.14em; color: #6F8F6F; }
  .hpd-donut .bp-svg { max-width: 118px; margin: 0 auto; }
  .hpd-bars { display: grid; gap: 10px; margin-top: 16px; }
  .hpd-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 12px; font-size: calc(12px * var(--fz, 1)); }
  .hpd-row i { display: block; height: 10px; border-radius: 5px; background: #1E2E1E; overflow: hidden; }
  .hpd-row b { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #3DBA62, #6FE38A); }
  .hpd-budget { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.12em; color: #6FE38A; }
  .hpd-budget i { position: relative; flex: 1; height: 8px; border-radius: 4px; background: #1E2E1E; }
  .hpd-budget b { position: absolute; left: 0; top: 0; bottom: 0; width: 68%; border-radius: 4px; background: #6FE38A; }
  .hpd-budget em { position: absolute; left: 80%; top: -5px; width: 2px; height: 18px; background: #F5B841; }

  /* ---------- 部署方式（Hapower、Haphost） ---------- */
  .dp { display: grid; gap: 16px; }
  .dp-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dp-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-card { border-radius: 22px; background: var(--card); border: 1px solid var(--bd); overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease; }
  .bp-t-hh .dp-card { background: #FFFFFF; }
  .dp-art { padding: 22px 26px 6px; background: radial-gradient(90% 100% at 50% 0%, color-mix(in srgb, var(--dot) 16%, transparent), transparent 72%); }
  .dp-art .bp-svg { max-height: 160px; }
  .dp-txt { position: relative; padding: 12px 24px 24px; }
  .dp-txt .bp-n { position: absolute; top: 16px; right: 24px; }
  @media (hover: hover) and (pointer: fine) { .dp-card:hover { transform: translateY(-4px); border-color: var(--dot); } }
  .hpp { position: relative; margin-top: 18px; padding: 20px 24px 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--bd); }
  .hpp-t { margin-bottom: 14px; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.16em; color: var(--acc); }
  .hpp-l { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .hpp-l::before { content: ''; position: absolute; left: 22px; right: 22px; top: 21px; height: 2px; opacity: 0.5;
                    background: repeating-linear-gradient(90deg, var(--acc) 0 6px, transparent 6px 12px); }
  .hpp-l::after { content: ''; position: absolute; top: 16px; left: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--dot);
                   box-shadow: 0 0 14px var(--dot); animation: pipeRun 4.2s linear infinite; }
  @keyframes pipeRun { from { left: 22px; } to { left: calc(100% - 34px); } }
  .hpp-l li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font-size: calc(16px * var(--fz, 1)); }
  .hpp-ic { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--b-bg); border: 1.5px solid var(--acc); color: var(--acc); }

  /* ---------- Hapworker：数字员工工牌 ---------- */
  .hws { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding-top: 14px; }
  .hws-badge { position: relative; padding: 0 26px 22px; border-radius: 24px; background: #FFFFFF; border: 1px solid #E3E8F0; text-align: center;
               box-shadow: 0 30px 60px -36px rgba(11,13,18,0.35); transform-origin: 50% -14px; transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }
  .hws-hole { position: absolute; top: -9px; left: 50%; width: 46px; height: 16px; margin-left: -23px; border-radius: 8px; background: #0B0D12; box-shadow: inset 0 0 0 4px #3A3F4A; }
  .hws-top { display: flex; justify-content: space-between; margin: 0 -26px; padding: 20px 20px 12px; border-radius: 24px 24px 0 0;
             background: linear-gradient(135deg, #FF9166 0%, #FF6A3D 100%); color: #FFFFFF; font-size: calc(10px * var(--fz, 1)); letter-spacing: 0.12em; }
  .hws-ava { width: 118px; margin: 10px auto 6px; }
  .hws-n { font-size: calc(22px * var(--fz, 1)); font-weight: 800; line-height: 1.3; }
  .hws-badge .bp-p { margin-top: 6px; }
  .hws-badge .bp-more { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #E3E8F0; text-align: left; }
  .hws-code { width: 150px; margin: 16px auto 0; }
  @media (hover: hover) and (pointer: fine) { .hws-badge:hover { transform: rotate(-2deg) translateY(-4px); } }

  /* ---------- Hapworker：场景 ---------- */
  .hwn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .hwn-card { border-radius: 22px; background: #FFFFFF; border: 1px solid #E3E8F0; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .hwn-art { padding: 16px 14px 6px; background: linear-gradient(180deg, #FFF3EE 0%, #FFFFFF 100%); border-bottom: 1px solid #F3E6E0; }
  .hwn-txt { padding: 18px 20px 22px; }
  .hwn-kv { display: flex; gap: 10px; margin-top: 10px; font-size: calc(14px * var(--fz, 1)); line-height: 1.6; color: var(--sub); }
  .hwn-kv b { flex: none; height: fit-content; margin-top: 2px; padding: 1px 8px; border-radius: 6px; font-size: calc(12px * var(--fz, 1)); }
  .hwn-q b { background: #F1F3F7; color: #4B5563; }
  .hwn-a { color: var(--ink); font-weight: 600; }
  .hwn-a b { background: #FFE3D8; color: #9A3412; }
  @media (hover: hover) and (pointer: fine) { .hwn-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(194,65,12,0.45); } }

  /* ---------- Hapworker：工厂流水线 ---------- */
  .hwl { padding: 26px 28px 24px; border-radius: 28px; background: #FFFFFF; border: 1px solid #E3E8F0; box-shadow: 0 40px 80px -50px rgba(11,13,18,0.35); }
  .hwb-tile { fill: #FFFFFF; stroke: #FF6A3D; stroke-width: 2.5; animation: hwTile 12s linear infinite; }
  @keyframes hwTile { 0% { transform: translateX(10px); fill: #FFFFFF; } 32% { fill: #FFFFFF; } 38% { fill: #FF6A3D; } 100% { transform: translateX(1160px); fill: #FF6A3D; } }
  .hwl-sts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; text-align: center; }
  .hwl-st { padding: 0 8px; }
  .hwl-st .bp-n { display: block; margin-bottom: 4px; }
  .hwl-out { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed #E3E8F0; }
  .hwl-out-t { margin-right: 4px; font-size: calc(13px * var(--fz, 1)); font-weight: 800; color: #C2410C; }
  .hwl-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
  .hwl-doc { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 12px; background: #FFF7F3; border: 1px solid #FFD9CC; font-size: calc(14px * var(--fz, 1)); font-weight: 600; }
  .hwl-doc span { color: #FF6A3D; display: flex; } .hwl-doc .bp-ic { width: 18px; height: 18px; }

  /* ---------- Haphost：托管底座 ---------- */
  .hhh { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
  .hhh-art { width: 100%; max-width: 440px; margin: 0 auto; }
  .hhh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .hhh-row { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 16px 18px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--bd);
             transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
  .hhh-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #4A72FF 0%, #1C3ED6 100%); color: #FFFFFF; }
  .hhh-row .bp-h3 { display: flex; align-items: baseline; gap: 10px; }
  .hhh-row .bp-p { margin-top: 4px; }
  @media (hover: hover) and (pointer: fine) { .hhh-row:hover { transform: translateX(6px); border-color: var(--dot); box-shadow: 0 20px 40px -30px rgba(31,73,224,0.5); } }

  /* ---------- Haphost：一次任务 ---------- */
  .hhr { position: relative; padding: 36px 32px 28px; border-radius: 28px; background: #FFFFFF; color: #0B1640; box-shadow: 0 50px 90px -40px rgba(10,30,140,0.6); }
  .hhr-track { position: absolute; left: 56px; right: 56px; top: 59px; height: 3px; border-radius: 2px; background: #DCE4FF; overflow: hidden; }
  .hhr-track b { position: absolute; left: 0; top: 0; width: 22%; height: 100%; background: linear-gradient(90deg, transparent, #2B57F6, #A6ECFF); animation: hhrRun 3.2s linear infinite; }
  @keyframes hhrRun { from { transform: translateX(-100%); } to { transform: translateX(460%); } }
  @keyframes hhrRunY { from { transform: translateY(-100%); } to { transform: translateY(460%); } }
  .hhr-l { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .hhr-dot { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 50%; background: #FFFFFF; border: 2px solid #2B57F6; color: #2B57F6;
             box-shadow: 0 0 0 6px #FFFFFF; animation: hhrHot 6.4s ease-in-out infinite; }
  .hhr-n:nth-child(2) .hhr-dot { animation-delay: 1.28s; } .hhr-n:nth-child(3) .hhr-dot { animation-delay: 2.56s; }
  .hhr-n:nth-child(4) .hhr-dot { animation-delay: 3.84s; } .hhr-n:nth-child(5) .hhr-dot { animation-delay: 5.12s; }
  @keyframes hhrHot { 0%, 22%, 100% { background: #FFFFFF; color: #2B57F6; } 5%, 16% { background: #2B57F6; color: #FFFFFF; } }
  .hhr .bp-n { display: block; margin-bottom: 6px; color: #1F49E0; }
  .hhr .bp-p { color: #4A5878; }

  /* ---------- Haphost：接入 ---------- */
  .hhi { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 28px; align-items: center; }
  .hhi-con { position: relative; padding-bottom: 22px; border-radius: 22px; background: #0B1640; color: #DCE4FF; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(11,22,64,0.7); }
  .hhi-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: rgba(255,255,255,0.06); }
  .hhi-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.25); }
  .hhi-bar span { margin-left: 8px; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.08em; color: #8FA3E8; }
  .hhi-api { list-style: none; margin: 14px 0 0; padding: 0 18px; display: grid; gap: 8px; }
  .hhi-api li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.06); font-size: calc(15px * var(--fz, 1)); font-weight: 600; color: #FFFFFF; }
  .hhi-m { flex: none; min-width: 18px; text-align: center; color: #A6ECFF; }
  .hhi-ok { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 10px #4ADE80; animation: bpBlink 2.4s ease-in-out infinite; }
  .hhi-api li:nth-child(2) .hhi-ok { animation-delay: -0.6s; } .hhi-api li:nth-child(3) .hhi-ok { animation-delay: -1.2s; } .hhi-api li:nth-child(4) .hhi-ok { animation-delay: -1.8s; }
  .hhi-cur { display: block; width: 9px; height: 16px; margin: 12px 0 0 22px; background: #A6ECFF; animation: bpBlink 1s steps(2) infinite; }
  .hhi-hub { position: relative; }
  .hhi-core { position: absolute; left: 50%; top: 50%; z-index: 2; width: 108px; transform: translate(-50%, -50%); }
  .hhi-chs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .hhi-ch { min-height: 150px; box-sizing: border-box; border-radius: 20px; background: #FFFFFF; border: 1px solid var(--bd); }
  .hhi-ch:nth-child(1) { padding: 20px 52px 30px 20px; } .hhi-ch:nth-child(2) { padding: 20px 20px 30px 52px; }
  .hhi-ch:nth-child(3) { padding: 30px 52px 20px 20px; } .hhi-ch:nth-child(4) { padding: 30px 20px 20px 52px; }
  .hhi-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; background: #EEF2FF; color: #2B57F6; }
  .hhs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 18px; padding: 18px 22px; border-radius: 20px; color: #FFFFFF; background: linear-gradient(135deg, #1F49E0 0%, #3D66FF 100%); }
  .hhs-t { display: flex; align-items: center; gap: 10px; font-size: calc(16px * var(--fz, 1)); font-weight: 800; }
  .hhs-l { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
  .hhs-l li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,0.15); font-size: calc(14px * var(--fz, 1)); font-weight: 600; }
  .hhs-l .bp-ic { width: 16px; height: 16px; }

  /* ---------- FDE TEAM ---------- */
  .fx-goal { margin-bottom: -4px; }
  .fx-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .fx-card { padding: 26px 22px 22px; border-radius: 22px; background: #FFFFFF; border: 1px solid #F1E6CC; box-shadow: 0 30px 50px -36px rgba(143,91,0,0.45); transition: transform 0.3s ease; }
  .fx-em { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: #1A1306;
           background: radial-gradient(circle at 30% 30%, #FFD66B 0%, #E0A100 60%, #B07800 100%); box-shadow: 0 10px 24px -10px rgba(224,161,0,0.8); }
  .fx-role { margin-top: 18px; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.14em; color: #8F5B00; }
  .fx-card .bp-h3 { margin-top: 6px; }
  .fx-out { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: #FFF8E8; font-size: calc(14px * var(--fz, 1)); line-height: 1.55; font-weight: 600; }
  .fx-out span { display: flex; color: #E0A100; } .fx-out .bp-ic { width: 18px; height: 18px; }
  .fx-out b { flex: none; margin-top: 1px; font-size: calc(12px * var(--fz, 1)); color: #8F5B00; }
  @media (hover: hover) and (pointer: fine) { .fx-card:hover { transform: translateY(-5px); } }
  .fp-road { margin: 0 -1% -30px; }
  .fp-l { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .fp-m { position: relative; padding: 22px 22px 20px; border-radius: 22px; background: rgba(255,255,255,0.82); border: 1px solid #F0E2C2; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .fp-m .bp-n { position: absolute; top: 24px; right: 22px; }
  .fp-flag { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px; background: #1A1306; color: #E0A100; }
  .fp-out { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #E6D4A8; font-size: calc(14px * var(--fz, 1)); line-height: 1.55; font-weight: 600; color: #1A1306; }
  .fp-out span { display: flex; color: #E0A100; } .fp-out .bp-ic { width: 18px; height: 18px; }

  /* ---------- 新智会 ---------- */
  .xo { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; align-items: start; gap: 18px; }
  .xo-end { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; color: #FFFFFF; }
  .xo-end .bp-ic { width: 30px; height: 30px; }
  .xo-in { background: #1B1530; }
  .xo-in span { position: absolute; right: -2px; top: -2px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #E0A100; font-size: calc(14px * var(--fz, 1)); font-weight: 800; }
  .xo-out { background: linear-gradient(135deg, #8B63E6 0%, #4A1FA0 100%); }
  .xo-l { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .xo-l::before { content: ''; position: absolute; left: -18px; right: -18px; top: 35px; height: 2px; opacity: 0.45; background: repeating-linear-gradient(90deg, #7B4FCF 0 6px, transparent 6px 12px); }
  .xo-l::after { content: ''; position: absolute; top: 30px; left: -18px; width: 12px; height: 12px; border-radius: 50%; background: #5A34C4; box-shadow: 0 0 12px #7B4FCF; animation: xoRun 5s linear infinite; }
  @keyframes xoRun { from { left: -18px; } to { left: calc(100% + 6px); } }
  @keyframes xoRunY { from { top: -6px; } to { top: calc(100% - 6px); } }
  .xo-s { position: relative; text-align: center; }
  .xo-hex { position: relative; display: block; width: 64px; height: 72px; margin: 0 auto 14px; }
  .xo-hex .bp-svg { position: absolute; inset: 0; }
  .xo-ic { position: absolute; inset: 0; display: grid; place-items: center; color: #FFFFFF; }
  .xo-ic .bp-ic { width: 26px; height: 26px; }
  .xp { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .xp-s { position: relative; padding: 16px 22px 24px; border-radius: 24px; background: #FFFFFF; border: 1px solid #E2DAF3; box-shadow: 0 30px 60px -40px rgba(74,31,160,0.5); }
  .xp-s + .xp-s::before { content: '→'; position: absolute; left: -12px; top: 88px; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; transform: translateX(-50%);
                          border-radius: 50%; background: #5A34C4; color: #FFFFFF; font-size: calc(14px * var(--fz, 1)); }
  .xp-art { margin: 0 -8px 10px; padding: 8px; border-radius: 16px; background: linear-gradient(180deg, #F6F1FF 0%, #FFFFFF 100%); }
  .xp-k { font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.16em; color: #7B4FCF; }
  .xp-s .bp-h3 { margin-top: 4px; }
  .xc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .xc-t { display: grid; grid-template-columns: 54px 1fr; border-radius: 20px; background: #FFFFFF; border: 1px solid #ECE5FB; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .xc-spine { display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.2em; color: #FFFFFF;
              background: linear-gradient(0deg, #8B63E6 0%, #4A1FA0 100%); }
  .xc-body { position: relative; padding: 22px 24px; }
  .xc-ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 12px; background: #F3EEFF; color: #5A34C4; }
  @media (hover: hover) and (pointer: fine) { .xc-t:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(74,31,160,0.5); } }

  /* ---------- 常见问题（全部展开为卡片；电脑上标题在左、问答在右） ---------- */
  @media (min-width: 861px) {
    .bp-faqsec .bp-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 0 56px; align-items: start; }
    .bp-faqsec .bp-head { margin-bottom: 0; }
    .bp-faqsec .bp-wm { display: none; }
  }
  .bq { display: grid; gap: 12px; }
  .bq-card { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 18px; padding: 24px 26px; border-radius: 22px;
             background: var(--card); border: 1px solid var(--bd); box-shadow: 0 26px 50px -40px rgba(0,0,0,0.35); overflow: hidden; }
  .bq-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--acc), var(--dot)); opacity: 0.85; }
  .bq-top { align-self: start; justify-self: start; padding: 4px 10px; border-radius: 999px; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.08em; color: var(--acc);
            background: color-mix(in srgb, var(--dot) 12%, transparent); }
  .bq-qt { font-size: calc(18px * var(--fz, 1)); line-height: 1.45; font-weight: 800; }
  .bq-a { margin-top: 8px; font-size: calc(15px * var(--fz, 1)); line-height: 1.75; color: var(--sub); }

  /* ---------- 收尾 ---------- */
  .bp-close { position: relative; padding: 128px var(--px) 100px; }
  .bp-close-art { position: absolute; right: -60px; top: 50%; width: 560px; transform: translateY(-50%); opacity: 0.5; pointer-events: none; }
  .bp-close .bp-in { position: relative; z-index: 1; }
  .bp-close-h { max-width: 780px; margin-top: 6px; font-size: calc(52px * var(--fz, 1)); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
  .bp-close .bp-acts { margin-top: 36px; }
  .bp-btn-2 { color: inherit !important; background: transparent !important; box-shadow: inset 0 0 0 1.5px currentColor; }
  .bp-close .bp-rel { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--bd); }
  .bp-rel-k { margin-bottom: 14px; font-size: calc(12px * var(--fz, 1)); letter-spacing: 0.14em; color: var(--sub); }
  .bcc { margin-top: 34px; padding: 20px; border-radius: 26px; background: rgba(255,255,255,0.24); border: 1px solid rgba(255,255,255,0.75); }
  .bcc-t { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: calc(15px * var(--fz, 1)); font-weight: 800; color: var(--ink); }
  .bcc-t i { width: 9px; height: 9px; border-radius: 50%; background: #00B5B6; box-shadow: 0 0 0 4px rgba(0,181,182,0.25); animation: bpBlink 2s ease-in-out infinite; }
  .bcc .cm-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; }
  .bcc .cm-card-en { letter-spacing: 0.08em; }
  .bcc .cm-card { grid-column: auto; min-height: 118px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "en" "nm" "ds"; align-content: start; }

  /* ---------- 平板 ---------- */
  @media (min-width: 861px) and (max-width: 1360px) {
    .bts:not(.bts-3) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .bts:not(.bts-3) > * { grid-column: span 2; }
    .bts:not(.bts-3) > :nth-child(n+4) { grid-column: span 3; }
  }
  @media (max-width: 1100px) {
    .ov { grid-template-columns: minmax(0, 1fr) minmax(200px, 260px) minmax(0, 1fr); }
    .hpc, .hwn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fx-goal { display: none; }
    .hhr-l { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
    .hhr-track { display: none; }
    .bp-wm { font-size: calc(150px * var(--fz, 1)); }
    .bp-close-h { font-size: calc(46px * var(--fz, 1)); }
  }

  /* ---------- 手机 ---------- */
  @media (max-width: 860px) {
    .bp-wm { top: 34px; font-size: calc(72px * var(--fz, 1)); -webkit-text-stroke-width: 1px; opacity: 0.55; }
    .bp-h2 { font-size: calc(24px * var(--fz, 1)); }   /* v5.62 标题尽量一行：390 宽下 14 字标题一行放下 */
    .bp-note { font-size: calc(12px * var(--fz, 1)); }
    .ov { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ov-col { display: contents; }
    .ov-hub { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(250px, 72%); margin: -8px 0 2px; }
    .ov-hub .ov-link { display: none; }
    .ov-card { padding: 16px 14px 16px; border-radius: 18px; }
    .ov-card .bp-n { top: 16px; right: 14px; }
    .ov-ic { width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; }
    .ov-ic .bp-ic { width: 21px; height: 21px; }
    .oh { grid-template-columns: minmax(0, 1fr); }
    .oh-bridge { width: 84px; justify-self: center; margin: -10px 0; transform: rotate(90deg); }
    .oh-bridge .ohb-t { transform-box: fill-box; transform-origin: center; transform: rotate(-90deg); }
    .oh-art .bp-svg { max-height: 190px; }
    .oh-panel { padding: 14px; gap: 12px; border-radius: 22px; }
    .oh-t { font-size: calc(24px * var(--fz, 1)); }
    .oh-row { padding: 10px 12px; font-size: calc(15px * var(--fz, 1)); }
    .bts { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .bt { min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 12px 40px 12px 12px; border-radius: 18px; }
    .bt-art { width: 104px; height: 64px; margin: 0; flex: none; }
    .bt-txt { margin: 0; }
    .bt-n { font-size: calc(18px * var(--fz, 1)); }
    .bt-d { margin-top: 4px; font-size: calc(13px * var(--fz, 1)); }
    .bt-d > span { display: none; }
    .bt::after { content: '→'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: calc(17px * var(--fz, 1)); }
    .bt-go { display: none; }
    .bt-sm .bt-art { width: 84px; height: 52px; }
    .hpc-viz { padding: 12px 10px 2px; }
    .hpc-txt { padding: 12px 16px 18px; }
    .hpt { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .hpt-tags { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .hpt-tag { gap: 10px; padding: 12px; font-size: calc(14px * var(--fz, 1)); border-radius: 14px; }
    .hpt-tag span { width: 32px; height: 32px; border-radius: 10px; }
    .hpt-tag .bp-ic { width: 18px; height: 18px; }
    .hpd { padding: 14px 14px 16px; border-radius: 20px; }
    .hpd-h em { display: none; }
    .hpd-top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 10px; }
    .hpd-top > div { padding: 10px; }
    .dp-3, .dp-2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .dp-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; border-radius: 18px; }
    .dp-art { padding: 12px 0 12px 12px; background: none; }
    .dp-txt { padding: 14px 16px 14px 10px; }
    .dp-txt .bp-n { position: static; display: block; margin-bottom: 2px; }
    .hpp { padding: 16px; }
    .hpp-l { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hpp-l::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--acc) 0 6px, transparent 6px 12px); }
    .hpp-l::after { left: 16px; top: 22px; animation-name: pipeRunY; }
    @keyframes pipeRunY { from { top: 16px; } to { top: calc(100% - 28px); } }
    .hpp-l li { flex-direction: row; align-items: center; font-size: calc(15px * var(--fz, 1)); }
    .hws { padding-top: 16px; }
    .hws-badge { padding: 0 18px 18px; }
    .hws-top { margin: 0 -18px; }
    .hws-ava { width: 96px; }
    .hws-n { font-size: calc(19px * var(--fz, 1)); }
    .hwl { padding: 10px 16px 18px; border-radius: 22px; }
    .hwl-belt { display: none; }
    .hwl-sts { position: relative; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding-left: 66px; text-align: left; }
    .hwl-sts::before { content: ''; position: absolute; left: 18px; top: 16px; bottom: 16px; width: 12px; border-radius: 6px; background: #0B0D12;
                       box-shadow: inset 0 0 0 3px #3A3F4A; }
    .hwl-sts::after { content: ''; position: absolute; left: 15px; top: 16px; width: 18px; height: 18px; border-radius: 5px; background: #FF6A3D; box-shadow: 0 0 0 2px #FFFFFF;
                      animation: hwlRunY 6s linear infinite; }
    @keyframes hwlRunY { from { top: 10px; } to { top: calc(100% - 28px); } }
    .hwl-st { position: relative; padding: 16px 0; border-bottom: 1px dashed #E3E8F0; }
    .hwl-st:last-child { border-bottom: 0; }
    .hwl-st .bp-n { position: absolute; z-index: 1; left: -66px; top: 16px; display: grid; place-items: center; width: 48px; height: 34px; margin: 0; border-radius: 10px;
                    background: #FFFFFF; border: 2px solid #FF6A3D; color: #FF6A3D; font-size: calc(13px * var(--fz, 1)); font-weight: 700; }
    .hwl-st:nth-child(2) .bp-n { background: #FF6A3D; color: #FFFFFF; }
    .hwl-out { flex-direction: column; align-items: flex-start; margin-top: 18px; padding-top: 16px; }
    .hwl-docs { gap: 8px; }
    .hwl-doc { font-size: calc(13px * var(--fz, 1)); padding: 7px 12px 7px 9px; }
    .hhh { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hhh-art { max-width: 260px; }
    .hhh-row { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 14px; }
    .hhh-ic { width: 40px; height: 40px; border-radius: 12px; }
    .hhr { padding: 22px 18px 6px; border-radius: 22px; }
    .hhr-l { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hhr-n { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding-bottom: 16px; }
    .hhr-n > :not(.hhr-dot) { grid-column: 2; }
    .hhr-dot { grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; }
    .hhr-track { display: block; left: 38px; right: auto; top: 44px; bottom: 44px; width: 3px; height: auto; }
    .hhr-track b { width: 100%; height: 22%; animation-name: hhrRunY; }
    .hhr .bp-h3 { font-size: calc(16px * var(--fz, 1)); }
    .hhi { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .hhi-core { position: static; width: 92px; margin: 0 auto 10px; transform: none; }
    .hhi-chs { gap: 10px; }
    .hhi-ch { min-height: 0; padding: 14px !important; border-radius: 16px; }
    .hhi-ic { width: 34px; height: 34px; margin-bottom: 10px; }
    .hhs { padding: 16px; }
    .hhs-l { width: 100%; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .hhs-l li { font-size: calc(13px * var(--fz, 1)); padding: 8px 10px; }
    .fx-cards { gap: 10px; }
    .fx-card { padding: 16px 14px; border-radius: 18px; }
    .fx-em { width: 44px; height: 44px; }
    .fx-role { margin-top: 12px; font-size: calc(10px * var(--fz, 1)); }
    .fx-out { flex-direction: column; gap: 4px; margin-top: 12px; padding: 10px; font-size: calc(13px * var(--fz, 1)); }
    .fx-out span { display: none; }
    .fp-road { display: none; }
    .fp-l { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-left: 24px; }
    .fp-l::before { content: ''; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 2px; background: repeating-linear-gradient(180deg, #E0A100 0 8px, transparent 8px 14px); }
    .fp-m { padding: 16px 16px 14px; border-radius: 18px; }
    .fp-m::before { content: ''; position: absolute; left: -24px; top: 28px; width: 14px; height: 14px; border-radius: 50%; background: #E0A100; box-shadow: 0 0 0 4px #FFF4D6; }
    .fp-flag { width: 36px; height: 36px; margin-bottom: 10px; }
    .xo { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 0; }
    .xo-end { width: 56px; height: 56px; margin-left: 4px; }
    .xo-end .bp-ic { width: 24px; height: 24px; }
    .xo-l { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 10px 0; }
    .xo-l::before { left: 31px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: repeating-linear-gradient(180deg, #7B4FCF 0 6px, transparent 6px 12px); }
    .xo-l::after { left: 26px; top: 0; animation-name: xoRunY; }
    .xo-s { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 0; text-align: left; }
    .xo-hex { margin: 0; }
    .xo-s .bp-p { margin-top: 4px; }
    .xp { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .xp-s { padding: 12px 16px 18px; }
    .xp-art { margin: 0 -4px 8px; }
    .xp-art .bp-svg { max-height: 128px; }
    .xp-s + .xp-s::before { left: 50%; top: -22px; transform: translateX(-50%) rotate(90deg); }
    .xc { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .xc-t { grid-template-columns: 38px minmax(0, 1fr); border-radius: 16px; }
    .xc-spine { font-size: calc(9px * var(--fz, 1)); }
    .xc-body { padding: 16px; }
    .xc-ic { width: 36px; height: 36px; margin-bottom: 8px; }
    .bq { gap: 10px; }
    .bq-card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 16px 18px 18px; border-radius: 18px; }
    .bq-qt { font-size: calc(16px * var(--fz, 1)); }
    .bq-a { margin-top: 6px; font-size: calc(14px * var(--fz, 1)); }
    .bp-close { padding: 88px var(--px) 72px; }
    .bp-close-art { right: -120px; top: auto; bottom: -100px; width: 320px; transform: none; opacity: 0.22; }
    .bp-close-h { font-size: calc(32px * var(--fz, 1)); }
    .bp-close .bp-acts { margin-top: 26px; }
    .bp-close .bp-rel { margin-top: 44px; }
    .bts-3 { grid-template-columns: minmax(0, 1fr); }
    .bcc { padding: 12px; border-radius: 20px; }
    .bcc .cm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .bcc .cm-card { grid-column: auto !important; min-height: 92px; padding-left: 10px; padding-right: 8px; }
    .bcc .cm-card-en { letter-spacing: 0.04em; }
  }

  @media (prefers-reduced-motion: reduce) {
    .bp [class*="a-"], .bp .hwb-tile, .bp .hhr-track b, .bp .hhr-dot, .bp .hhi-ok, .bp .hhi-cur, .bp .bcc-t i,
    .bp .hpp-l::after, .bp .xo-l::after, .bp .hwl-sts::after { animation: none !important; }
    .bp-rv .bp-x .rv, .bp-rv .bp-close .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
    .bp-rv .bp-x .a-draw, .bp-rv .bp-x .a-gx, .bp-rv .bp-x .a-gy, .bp-rv .bp-x .a-fade, .bp-rv .bp-kbar { transition: none !important; stroke-dashoffset: 0 !important; transform: none !important; opacity: 1 !important; }
    .bp .hwb-tile { display: none; }
  }
  @media print { .bp-rv .rv { opacity: 1 !important; transform: none !important; } }

  /* ================= v5.61 二级页首屏（提炼版） ================= */
  .bph { padding-top: 128px; padding-bottom: 104px; }
  .bph .bp-crumb { margin-bottom: 30px; }
  .bph .chap-cat { margin-bottom: 18px; }
  .bph-head { max-width: 560px; margin-top: 30px; font-size: calc(40px * var(--fz, 1)); line-height: 1.32; font-weight: 800; letter-spacing: -0.01em; }
  .chap-blue .bph-head, .chap-gold .bph-head, .chap-paper .bph-head { color: #0B0D12; }
  .chap-paper .bph-head { color: #1B1530; }
  .chap-gold .bph-head { color: #1A1306; }
  .bph-path { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; font-size: calc(15px * var(--fz, 1)); font-weight: 700; color: #4B5563; }
  .bph-path li + li::before { content: '→'; margin: 0 12px; font-weight: 400; color: #9CA3AF; }
  .bph-path li:last-child { color: #C2410C; }
  .bph-aud { margin-top: 22px; }
  .bph-aud + .bph-aud { margin-top: 8px; }
  .bph-acts { margin-top: 36px; }
  .bph-btn { height: 52px; padding: 0 28px; font-size: calc(16px * var(--fz, 1)); }
  .bph-stage { position: relative; min-width: 0; box-sizing: border-box; }
  .bph-text { min-width: 0; }
  @media (min-width: 1101px) { .bph-in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; } }
  @media (max-width: 1100px) {
    .bph-in { grid-template-columns: minmax(0, 1fr) !important; gap: 52px; }
    .bph-head { max-width: 680px; }
    .bph-stage { width: 100%; max-width: 680px; }
  }
  /* 进场：文字与插画依次淡入上移（纯样式，不依赖脚本） */
  .bph-i { animation: bphIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }
  @keyframes bphIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  .bph-cue { position: absolute; left: 50%; bottom: 28px; width: 24px; height: 38px; margin-left: -12px; box-sizing: border-box; border-radius: 12px; border: 1.5px solid currentColor; opacity: 0.4; }
  .bph-cue i { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: currentColor; animation: bphCue 1.8s ease-in-out infinite; }
  @keyframes bphCue { 0% { transform: translateY(0); opacity: 1; } 70%, 100% { transform: translateY(13px); opacity: 0; } }
  .bp-rv .bph:not(.is-vis) .bph-stage *, .bp-rv .bph:not(.is-vis) .bph-cue * { animation-play-state: paused !important; }

  /* ---------- 友帮：需求方 → 四项能力 → 供给方 ---------- */
  .bph-stage-opc { padding: 30px 28px; border-radius: 30px; background: rgba(255,255,255,0.92); color: #04343B;
                   box-shadow: 0 40px 80px -28px rgba(0,78,88,0.5), 0 0 0 1px rgba(255,255,255,0.55); }
  .of { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .of-col { display: grid; gap: 12px; }
  .of-h { font-size: calc(12px * var(--fz, 1)); font-weight: 800; letter-spacing: 0.08em; color: #007A7E; }
  .of-sup .of-h { text-align: right; }
  .of-node { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 16px; background: #F2FBFB; border: 1px solid #CDEDEE;
             font-size: calc(14px * var(--fz, 1)); font-weight: 700; line-height: 1.3; }
  .of-node > i { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: #FFFFFF; color: #00A3A4; }
  .of-node > i .bp-ic { width: 18px; height: 18px; }
  .of-node::after { content: ''; position: absolute; top: 50%; width: 40px; border-top: 1.5px dashed rgba(0,163,164,0.45); }
  .of-dem .of-node::after { left: 100%; }
  .of-sup .of-node::after { right: 100%; }
  .of-node::before { content: ''; position: absolute; z-index: 1; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #00B5B6; box-shadow: 0 0 10px #00B5B6;
                     animation: ofDotR 2.4s linear infinite; animation-delay: calc(var(--k) * -0.45s); }
  .of-dem .of-node::before { left: 100%; }
  .of-sup .of-node::before { right: calc(100% + 32px); }
  @keyframes ofDotR { 0% { transform: translateX(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(32px); opacity: 0; } }
  .of-mid { position: relative; display: grid; justify-items: center; gap: 12px; }
  .of-brand { display: flex; justify-content: center; margin: 0; }
  .of-logo { display: block; width: 92px; height: auto; filter: drop-shadow(0 8px 16px rgba(0,122,126,0.22)); }
  .of-gates { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
  .of-gates::before { content: ''; position: absolute; left: 23px; top: 12px; bottom: 12px; width: 2px; opacity: 0.5; background: repeating-linear-gradient(180deg, #00B5B6 0 5px, transparent 5px 10px); }
  .of-gate { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 9px; border-radius: 14px; background: #FFFFFF; border: 1px solid #CDEDEE;
             font-size: calc(13px * var(--fz, 1)); font-weight: 700; line-height: 1.3; animation: ofGate 4.8s ease-in-out infinite; animation-delay: calc(var(--k) * 1.2s); }
  .of-gate > i { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: #E6F7F7; color: #007A7E; }
  .of-gate > i .bp-ic { width: 16px; height: 16px; }
  @keyframes ofGate { 0%, 28%, 100% { background: #FFFFFF; border-color: #CDEDEE; box-shadow: none; } 6%, 20% { background: #E6FAFA; border-color: #00B5B6; box-shadow: 0 10px 22px -14px rgba(0,122,126,0.8); } }
  .of-deal { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: #04343B; color: #FFFFFF; font-size: calc(13px * var(--fz, 1)); font-weight: 800;
             animation: ofDeal 4.8s ease-in-out infinite; }
  .of-deal .bp-ic { width: 16px; height: 16px; color: #6FF0EE; }
  @keyframes ofDeal { 0%, 76%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,181,182,0); } 84% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(0,181,182,0.25); } 92% { transform: scale(1); } }

  /* ---------- Hapower：AI 网关控制台 ---------- */
  .bph-stage-hapower { border-radius: 26px; background: #0F160F; border: 1px solid #1F2E1F; overflow: hidden; color: #B8D4B8; box-shadow: 0 50px 100px -40px rgba(111,227,138,0.35); }
  .hg-bar0 { display: flex; align-items: center; gap: 6px; padding: 14px 18px; border-bottom: 1px solid #1A271A; }
  .hg-bar0 i { width: 7px; height: 7px; border-radius: 50%; background: #2A3A2A; }
  .hg-bar0 span { margin-left: 10px; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.08em; color: #6F8F6F; }
  .hg-bar0 em { margin-left: auto; display: flex; align-items: center; gap: 6px; font-style: normal; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.12em; color: #6FE38A; }
  .hg-bar0 em s, .hs-base em s, .xr-tag s { display: block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: bpBlink 1.6s ease-in-out infinite; }
  .hg-body { position: relative; display: grid; grid-template-columns: 124px minmax(0, 1fr) 112px; align-items: center; gap: 0 18px; padding: 30px 26px; min-height: 300px;
             background: radial-gradient(55% 70% at 50% 50%, rgba(111,227,138,0.13), transparent 70%), repeating-linear-gradient(0deg, rgba(111,227,138,0.04) 0 1px, transparent 1px 6px); }
  .hg-wires { position: absolute; left: 26px; top: 30px; width: calc(100% - 52px); height: calc(100% - 60px); overflow: visible; }
  .hg-w { fill: none; stroke: #1F3A24; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .hg-d { fill: none; stroke: #6FE38A; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 101; vector-effect: non-scaling-stroke; animation: bpTravel 2.2s linear infinite; }
  .hg-d2 { stroke: #E8FFE8; animation-duration: 2.8s; }
  .hg-in, .hg-out { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .hg-in li { padding: 9px 6px; border-radius: 10px; border: 1px solid #2A3A2A; background: #0C120C; font-size: calc(10px * var(--fz, 1)); letter-spacing: 0.05em; color: #B8D4B8; text-align: center; white-space: nowrap;
              animation: hgIn 4.4s ease-in-out infinite; animation-delay: calc(var(--k) * 1.1s); }
  @keyframes hgIn { 0%, 30%, 100% { border-color: #2A3A2A; color: #B8D4B8; } 8%, 20% { border-color: #6FE38A; color: #6FE38A; } }
  .hg-core { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 170px; max-width: 100%; aspect-ratio: 1; }
  .hg-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .hg-r1 { fill: none; stroke: #6FE38A; stroke-opacity: 0.4; stroke-width: 1.5; stroke-dasharray: 2 6; transform-box: fill-box; transform-origin: center; animation: bpSpin 30s linear infinite; }
  .hg-r2 { fill: none; stroke: #2A7A44; stroke-width: 1.5; }
  .hg-r3 { fill: #13241A; stroke: #6FE38A; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: hgCore 2.6s ease-in-out infinite; }
  @keyframes hgCore { 0%, 100% { filter: drop-shadow(0 0 0 rgba(111,227,138,0)); } 50% { filter: drop-shadow(0 0 14px rgba(111,227,138,0.7)); } }
  .hg-core-t { position: relative; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.16em; color: #6FE38A; }
  .hg-o { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: #0C120C; border: 1px solid #2A3A2A; }
  .hg-o b { font-size: calc(18px * var(--fz, 1)); font-weight: 800; color: #FFFFFF; }
  .hg-o svg { display: block; width: 100%; height: 30px; overflow: visible; }
  .hg-beat { fill: none; stroke: #6FE38A; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 34 100; animation: hgBeat 2s linear infinite; }
  @keyframes hgBeat { from { stroke-dashoffset: 134; } to { stroke-dashoffset: 0; } }
  .hg-gt { fill: none; stroke: #1E2E1E; stroke-width: 9; stroke-linecap: round; }
  .hg-gv { fill: none; stroke: #6FE38A; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 78 100; }
  .hg-needle { transform-origin: 60px 58px; animation: bpNeedle 3s ease-in-out infinite; }
  .hg-needle path { stroke: #E8FFE8; stroke-width: 3.5; stroke-linecap: round; }
  .hg-o circle { fill: #6FE38A; }
  .hg-bar { fill: #3DBA62; transform-box: fill-box; transform-origin: center bottom; animation: hgBar 3.2s ease-in-out infinite; }
  .hg-bar:last-child { fill: #6FE38A; }
  @keyframes hgBar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.72); } }
  .hg-log { overflow: hidden; padding: 11px 0; border-top: 1px solid #1A271A; font-size: calc(11px * var(--fz, 1)); color: #7FA885; white-space: nowrap; }
  .hg-log > div { display: inline-flex; gap: 26px; padding-left: 18px; animation: hgLog 18s linear infinite; }
  @keyframes hgLog { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ---------- Hapworker：生成机批量产出数字员工 ---------- */
  .bph-stage-hapworker { padding: 22px 24px 20px; border-radius: 28px; border: 1px dashed #FFB59C; color: #0B0D12; box-shadow: 0 40px 80px -46px rgba(194,65,12,0.45);
                         background-color: #FFFFFF; background-image: linear-gradient(rgba(47,107,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(47,107,255,0.06) 1px, transparent 1px); background-size: 16px 16px; }
  .hb-top { display: flex; justify-content: space-between; align-items: center; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.12em; color: #C2410C; }
  .hb-tag { padding: 3px 10px; border-radius: 999px; background: #FFE3D8; color: #9A3412; }
  .hb-press { margin-top: 14px; }
  .hb-press svg { display: block; width: 100%; height: 62px; }
  .hb-p1 { fill: #0B0D12; } .hb-p2 { fill: #3A3F4A; }
  .hb-p3 { fill: #FF6A3D; transform-box: fill-box; transform-origin: center top; animation: hbPress 1.2s ease-in-out infinite; }
  @keyframes hbPress { 0%, 100% { transform: scaleY(0.4); } 45% { transform: scaleY(1.25); } }
  .hb-led { fill: #FF6A3D; animation: bpBlink 1.2s steps(2) infinite; }
  .hb-trk { fill: #2A2F38; }
  .hb-fill { fill: #FF6A3D; transform-box: fill-box; transform-origin: left center; animation: hbFill 5.76s linear infinite; }
  @keyframes hbFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .hb-grid { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 10px; padding: 14px; border-radius: 18px;
             background: rgba(255,255,255,0.8); border: 1px solid #FFE0D4; overflow: hidden; }
  .hb-t { display: grid; place-items: center; aspect-ratio: 1; box-sizing: border-box; border-radius: 12px; border: 1.8px solid #FFB59C; background: #FFFFFF;
          animation: hbTile 5.76s ease-in-out infinite; animation-delay: calc(var(--k) * 0.32s); }
  .hb-t svg { width: 72%; height: 72%; overflow: visible; opacity: 0; animation: hbFace 5.76s ease-in-out infinite; animation-delay: calc(var(--k) * 0.32s); }
  .hb-t rect { fill: #FFFFFF; } .hb-t circle { fill: #FF6A3D; } .hb-t circle:last-child { fill: #FFFFFF; }
  .hb-t path { fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; }
  @keyframes hbTile { 0%, 6%, 94%, 100% { background: #FFFFFF; border-color: #FFB59C; transform: scale(1); } 11% { background: #FF6A3D; border-color: #FF6A3D; transform: scale(1.1); }
                      16%, 86% { background: #FF6A3D; border-color: #FF6A3D; transform: scale(1); } }
  @keyframes hbFace { 0%, 7%, 92%, 100% { opacity: 0; transform: scale(0.5); } 12% { opacity: 1; transform: scale(1.12); } 16%, 86% { opacity: 1; transform: scale(1); } }
  .hb-scan { position: absolute; left: 0; right: 0; top: -40px; height: 40px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(255,106,61,0.2), transparent);
             animation: hbScan 2.88s linear infinite; }
  @keyframes hbScan { from { top: -40px; } to { top: 100%; } }
  .hb-foot { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 14px; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.14em; color: #C2410C; }
  .hb-arrow { display: inline-block; animation: hbArrow 1.4s ease-in-out infinite; }
  @keyframes hbArrow { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }

  /* ---------- Haphost：成批上线运行 ---------- */
  .bph-stage-haphost { padding: 24px; border-radius: 28px; background: #FFFFFF; color: #0B1640; box-shadow: 0 50px 90px -40px rgba(10,30,140,0.6); }
  .hs-chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .hs-chain li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border-radius: 16px; background: #F4F7FF; border: 1px solid #DCE4FF; }
  .hs-chain b { font-size: calc(16px * var(--fz, 1)); font-weight: 800; }
  .hs-chain span { font-size: calc(12px * var(--fz, 1)); font-weight: 700; color: #1F49E0; }
  .hs-chain li + li::before { content: ''; position: absolute; right: calc(100% + 4px); top: 50%; width: 22px; border-top: 2px dashed #A9BCFF; }
  .hs-chain li + li::after { content: ''; position: absolute; right: calc(100% + 22px); top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #2B57F6;
                             animation: hsHop 1.4s linear infinite; animation-delay: calc(var(--k) * 0.35s); }
  @keyframes hsHop { 0% { transform: translateX(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(18px); opacity: 0; } }
  .hs-pods { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding: 16px; border-radius: 20px;
             background: linear-gradient(180deg, #F4F7FF 0%, #EAF0FF 100%); border: 1px solid #DCE4FF; }
  .hs-pod { display: grid; justify-items: center; gap: 9px; padding: 12px 6px 11px; border-radius: 14px; background: #FFFFFF; border: 1px solid #DCE4FF;
            box-shadow: 0 10px 20px -16px rgba(31,73,224,0.6); animation: hsPop 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) both; animation-delay: calc(0.5s + var(--k) * 70ms); }
  @keyframes hsPop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
  .hs-pod > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #FFFFFF; background: linear-gradient(135deg, #4A72FF 0%, #1C3ED6 100%); }
  .hs-pod .bp-ic { width: 18px; height: 18px; }
  .hs-pod b { display: block; width: 78%; height: 5px; border-radius: 3px; background: #E3E9FF; overflow: hidden; }
  .hs-pod s { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #2B57F6, #A6ECFF); transform-origin: left center; animation: hsRun 2.6s ease-in-out infinite; }
  @keyframes hsRun { 0% { transform: scaleX(0.05); } 80%, 100% { transform: scaleX(1); } }
  .hs-base { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #0B1640; color: #DCE4FF; font-size: calc(11px * var(--fz, 1)); letter-spacing: 0.08em; }
  .hs-base > span:first-child { display: flex; color: #A6ECFF; }
  .hs-base > span:first-child .bp-ic { width: 18px; height: 18px; }
  .hs-base > .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hs-base em { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; font-style: normal; color: #4ADE80; }

  /* ---------- FDE TEAM：工具 → 四类专家驻场 → 业务结果 ---------- */
  .bph-stage-fde-team { padding: 34px 26px 26px; border-radius: 28px; background: rgba(255,255,255,0.86); border: 1px solid #F0E2C2; color: #1A1306;
                        box-shadow: 0 40px 80px -40px rgba(143,91,0,0.45); }
  .fr { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1.15fr) 34px minmax(0, 1.15fr); align-items: stretch; gap: 8px; }
  .fr-col { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 14px; }
  .fr-lab { font-size: calc(13px * var(--fz, 1)); font-weight: 800; color: #8F5B00; text-align: center; }
  .fr-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .fr-tool { display: grid; justify-items: center; gap: 4px; padding: 10px 2px; border-radius: 12px; background: #FFFFFF; border: 1px dashed #DCC48C; color: #9C8455;
             animation: bpFloat 4s ease-in-out infinite; animation-delay: calc(var(--k) * -0.8s); }
  .fr-tool .bp-ic { width: 20px; height: 20px; }
  .fr-tool i { font-style: normal; font-size: calc(8px * var(--fz, 1)); letter-spacing: 0.06em; color: #73603A; }
  .fr-arrow { position: relative; align-self: center; margin-bottom: 30px; height: 2px; background: repeating-linear-gradient(90deg, #E0A100 0 5px, transparent 5px 10px); }
  .fr-arrow::after { content: ''; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: #E0A100; box-shadow: 0 0 10px #E0A100; animation: frRun 1.8s linear infinite; }
  @keyframes frRun { 0% { transform: translateX(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(32px); opacity: 0; } }
  .fr-team { position: relative; width: 100%; max-width: 170px; aspect-ratio: 1; }
  .fr-team::before { content: ''; position: absolute; inset: 18%; border-radius: 50%; border: 1.5px dashed #E0A100; opacity: 0.55; animation: bpSpin 24s linear infinite; }
  .fr-ex { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #1A1306;
           background: radial-gradient(circle at 30% 30%, #FFD66B 0%, #E0A100 60%, #B07800 100%); animation: frEx 4s ease-in-out infinite; animation-delay: calc(var(--k) * 1s); }
  .fr-ex .bp-ic { width: 22px; height: 22px; }
  .fr-ex:nth-child(1) { left: 6%; top: 6%; } .fr-ex:nth-child(2) { right: 6%; top: 6%; }
  .fr-ex:nth-child(3) { right: 6%; bottom: 6%; } .fr-ex:nth-child(4) { left: 6%; bottom: 6%; }
  @keyframes frEx { 0%, 30%, 100% { box-shadow: 0 10px 20px -10px rgba(224,161,0,0.9), 0 0 0 0 rgba(224,161,0,0); } 12% { box-shadow: 0 10px 20px -10px rgba(224,161,0,0.9), 0 0 0 9px rgba(224,161,0,0.22); } }
  .fr-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 10px; border-radius: 999px; background: #1A1306; color: #E0A100; font-size: calc(10px * var(--fz, 1)); letter-spacing: 0.1em;
             box-shadow: 0 0 0 6px rgba(224,161,0,0.14); }
  .fr-res { position: relative; width: 100%; box-sizing: border-box; padding: 14px 10px 8px; border-radius: 16px; background: #FFFFFF; border: 1px solid #F1E6CC; }
  .fr-res svg { display: block; width: 100%; height: auto; overflow: visible; }
  .fr-ax { stroke: #E6D4A8; stroke-width: 1.5; }
  .fr-b { fill: #F4D27A; transform-box: fill-box; transform-origin: center bottom; animation: frBar 4s ease-in-out infinite; }
  .fr-b:last-of-type { fill: #E0A100; }
  @keyframes frBar { 0%, 100% { transform: scaleY(0.35); } 45%, 80% { transform: scaleY(1); } }
  .fr-ln { fill: none; stroke: #1A1306; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; animation: frLine 4s ease-in-out infinite; }
  @keyframes frLine { 0%, 10% { stroke-dashoffset: 100; } 55%, 100% { stroke-dashoffset: 0; } }
  .fr-pt { fill: #E0A100; }
  .fr-roi { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 999px; background: #1A1306; color: #FFD66B; font-size: calc(10px * var(--fz, 1)); letter-spacing: 0.06em; }

  /* ---------- 新智会：一号位圆桌 ---------- */
  .bph-stage-xinzhihui { padding: 22px 24px 18px; border-radius: 28px; background: #FFFFFF; border: 1px solid #E2DAF3; color: #1B1530; box-shadow: 0 40px 80px -40px rgba(74,31,160,0.5); }
  .xr-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: calc(13px * var(--fz, 1)); font-weight: 800; color: #4A1FA0; }
  .xr-tag { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #F3EEFF; font-size: calc(10px * var(--fz, 1)); font-weight: 400; letter-spacing: 0.12em; color: #5A34C4; }
  .xr-tag s { color: #E0A100; }
  .xr-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
  .xr-shadow { fill: #4A1FA0; opacity: 0.08; }
  .xr-table { stroke: #D8CEEF; stroke-width: 2; }
  .xr-ring { fill: none; stroke: #7B4FCF; stroke-opacity: 0.3; stroke-dasharray: 3 7; }
  .xr-pulse { fill: none; stroke: #7B4FCF; stroke-width: 10; stroke-opacity: 0.25; transform-box: fill-box; transform-origin: center; animation: bpPulse 2.6s ease-out infinite; }
  .xr-chair { fill: #F6F2FF; stroke: #E2DAF3; stroke-width: 2; }
  .xr-p { opacity: 0; animation: xrSit 9s ease-in-out infinite; animation-delay: calc(var(--k) * 0.45s); }
  .xr-head { fill: #7B4FCF; }
  .xr-body { fill: none; stroke: #7B4FCF; stroke-width: 5; stroke-linecap: round; }
  .xr-p:nth-child(2n) .xr-head { fill: #4A1FA0; } .xr-p:nth-child(2n) .xr-body { stroke: #4A1FA0; }
  @keyframes xrSit { 0%, 3% { opacity: 0; transform: translateY(-6px); } 9%, 84% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
  .xr-bub { opacity: 0; animation: xrBub 9s ease-in-out infinite; animation-delay: calc(2.4s + var(--k) * 1.5s); }
  .xr-bub rect:first-child, .xr-bub path { fill: #FFFFFF; stroke: #E2DAF3; stroke-width: 1.5; }
  .xr-bl { fill: #7B4FCF; opacity: 0.55; }
  @keyframes xrBub { 0% { opacity: 0; transform: translateY(6px); } 4%, 18% { opacity: 1; transform: none; } 23%, 100% { opacity: 0; } }
  .xr-seal { position: absolute; right: 22px; bottom: 18px; display: grid; place-items: center; width: 60px; height: 60px; box-sizing: border-box; border-radius: 50%; border: 2px solid #5A34C4;
             color: #5A34C4; font-size: calc(12px * var(--fz, 1)); font-weight: 800; line-height: 1.15; text-align: center; transform: rotate(-12deg); animation: xrStamp 9s ease-in-out infinite; }
  @keyframes xrStamp { 0%, 55% { opacity: 0; transform: rotate(-12deg) scale(1.6); } 60% { opacity: 0.9; transform: rotate(-12deg) scale(0.94); } 64%, 90% { opacity: 0.85; transform: rotate(-12deg) scale(1); } 96%, 100% { opacity: 0; transform: rotate(-12deg) scale(1); } }

  /* ---------- 手机 ---------- */
  @media (max-width: 860px) {
    .bph { padding-top: 96px; padding-bottom: 64px; }
    .bph .bp-crumb { margin-bottom: 22px; }
    .bph .chap-cat { margin-bottom: 14px; }
    .bph-head { margin-top: 20px; font-size: calc(26px * var(--fz, 1)); line-height: 1.38; }
    .bph-path { margin-top: 16px; font-size: calc(14px * var(--fz, 1)); }
    .bph-path li + li::before { margin: 0 8px; }
    .bph-aud { margin-top: 16px; }
    .bph-acts { margin-top: 26px; }
    .bph-btn { height: 48px; padding: 0 24px; font-size: calc(15px * var(--fz, 1)); }
    .bph-in { gap: 34px; }
    .bph-cue { display: none; }
    .bph-stage-opc { padding: 18px 14px; border-radius: 24px; }
    .of { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .of-col { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .of-h, .of-sup .of-h { grid-column: 1 / -1; text-align: left; }
    .of-node { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 4px; text-align: center; font-size: calc(12px * var(--fz, 1)); border-radius: 14px; }
    .of-node::before, .of-node::after { display: none; }
    .of-mid { padding: 30px 0; }
    .of-mid::before, .of-mid::after { content: ''; position: absolute; left: 50%; width: 2px; height: 22px; background: repeating-linear-gradient(180deg, #00B5B6 0 4px, transparent 4px 8px); opacity: 0.6; }
    .of-mid::before { top: 4px; } .of-mid::after { bottom: 4px; }
    .of-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .of-logo { width: 78px; }
    .of-gates::before { display: none; }
    .of-gate { font-size: calc(12px * var(--fz, 1)); padding: 7px 8px 7px 7px; gap: 8px; }
    .of-gate > i { width: 24px; height: 24px; }
    .bph-stage-hapower { border-radius: 22px; }
    .hg-body { grid-template-columns: minmax(0, 1fr); gap: 16px; min-height: 0; padding: 18px 14px; }
    .hg-wires { display: none; }
    .hg-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .hg-core { width: 128px; }
    .hg-out { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hg-o { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; padding: 8px 6px; }
    .hg-o svg { height: 26px; }
    .bph-stage-hapworker { padding: 16px 14px 14px; border-radius: 22px; }
    .hb-press svg { height: 48px; }
    .hb-grid { gap: 6px; padding: 10px; border-radius: 14px; }
    .hb-t { border-radius: 9px; }
    .bph-stage-haphost { padding: 14px; border-radius: 22px; }
    .hs-chain { gap: 16px; }
    .hs-chain li { padding: 10px 4px; border-radius: 12px; }
    .hs-chain b { font-size: calc(14px * var(--fz, 1)); }
    .hs-chain span { font-size: calc(11px * var(--fz, 1)); }
    .hs-chain li + li::before { right: calc(100% + 2px); width: 12px; }
    .hs-chain li + li::after { display: none; }
    .hs-pods { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px; border-radius: 16px; }
    .hs-pod { padding: 10px 4px 9px; gap: 7px; }
    .hs-pod > span { width: 28px; height: 28px; border-radius: 8px; }
    .hs-base { padding: 10px 12px; font-size: calc(10px * var(--fz, 1)); }
    .bph-stage-fde-team { padding: 18px 12px 16px; border-radius: 22px; }
    .fr { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr); gap: 4px; }
    .fr-col { gap: 10px; }
    .fr-arrow { margin-bottom: 24px; }
    .fr-lab { font-size: calc(11px * var(--fz, 1)); }
    .fr-tools { gap: 5px; }
    .fr-tool { padding: 7px 2px; border-radius: 9px; }
    .fr-tool i { display: none; }
    .fr-tool .bp-ic { width: 16px; height: 16px; }
    .fr-arrow::after { width: 8px; height: 8px; top: -3px; animation-name: frRunS; }
    @keyframes frRunS { 0% { transform: translateX(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(12px); opacity: 0; } }
    .fr-ex { width: 32px; height: 32px; }
    .fr-ex .bp-ic { width: 15px; height: 15px; }
    .fr-core { padding: 3px 5px; font-size: calc(7px * var(--fz, 1)); letter-spacing: 0.04em; box-shadow: 0 0 0 4px rgba(224,161,0,0.14); }
    .fr-res { padding: 22px 6px 6px; border-radius: 12px; }
    .fr-roi { left: 6px; top: 6px; padding: 2px 6px; font-size: calc(8px * var(--fz, 1)); }
    .bph-stage-xinzhihui { padding: 14px 12px 12px; border-radius: 22px; }
    .xr-top { font-size: calc(12px * var(--fz, 1)); }
    .xr-seal { right: 12px; bottom: 10px; width: 46px; height: 46px; font-size: calc(10px * var(--fz, 1)); }
  }

  @media (prefers-reduced-motion: reduce) {
    .bph-i, .bph .bph-stage *, .bph .bph-stage *::before, .bph .bph-stage *::after, .bph-cue i { animation: none !important; }
    .xr-p, .xr-seal { opacity: 1 !important; }
    .xr-bub { opacity: 0 !important; }
    .hb-t:nth-child(-n+11) { background: #FF6A3D; border-color: #FF6A3D; }
    .hb-t:nth-child(-n+11) svg { opacity: 1; }
    .hb-scan { display: none; }
  }