:root {
     --bg: #0a0e1a;
     --bg-soft: #111726;
     --card: #151c2e;
     --card-hover: #1b2439;
     --border: #232c42;
     --text: #e8ecf5;
     --text-dim: #9aa6bf;
     --text-faint: #6b7690;
     --accent: #3b82f6;
     --accent-2: #22d3ee;
     --accent-glow: rgba(59, 130, 246, .35);
     --green: #34d399;
     --radius: 14px;
     --maxw: 1120px;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     background: var(--bg);
     color: var(--text);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
     line-height: 1.7;
     -webkit-font-smoothing: antialiased;
 }

 .wrap {
     max-width: var(--maxw);
     margin: 0 auto;
     padding: 0 24px
 }

 section {
     padding: 80px 0
 }

 h2,
 h3 {
     line-height: 1.3;
     font-weight: 700
 }

 h2 {
     font-size: clamp(24px, 3.2vw, 34px);
     margin-bottom: 14px
 }

 h3 {
     font-size: 19px;
     margin-bottom: 10px
 }

 p {
     color: var(--text-dim)
 }

 a {
     color: var(--accent-2);
     text-decoration: none
 }

 .eyebrow {
     display: inline-block;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: .08em;
     color: var(--accent-2);
     text-transform: uppercase;
     margin-bottom: 14px;
 }

 .lead {
     font-size: 17px;
     color: var(--text-dim);
     max-width: 640px
 }

 div.wdk-dialog.ui {
     color: #111;
 }

 /* ---------- 按钮 ---------- */
 .btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 13px 26px;
     border-radius: 10px;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     border: 1px solid transparent;
     transition: .2s;
     white-space: nowrap;
 }

 .btn-primary {
     background: var(--accent);
     color: #fff;
     box-shadow: 0 8px 28px var(--accent-glow)
 }

 .btn-primary:hover {
     background: #2f6fd6;
     transform: translateY(-1px)
 }

 .btn-ghost {
     background: transparent;
     color: var(--text);
     border-color: var(--border)
 }

 .btn-ghost:hover {
     background: var(--card);
     border-color: #33405e
 }

 .btn-sm {
     padding: 9px 18px;
     font-size: 14px
 }

 /* ---------- 导航 ---------- */
 header {
     position: sticky;
     top: 0;
     z-index: 1;
     background: rgba(10, 14, 26, .82);
     backdrop-filter: blur(14px);
     border-bottom: 1px solid var(--border);
 }

 .nav {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 64px
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 700;
     font-size: 17px;
     color: var(--text)
 }

 .logo-mark {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     background: linear-gradient(135deg, var(--accent), var(--accent-2));
     display: grid;
     place-items: center;
     font-size: 14px;
     color: #0a0e1a;
     font-weight: 800;
 }

 .nav-links {
     display: flex;
     gap: 26px;
     align-items: center
 }

 .nav-links a {
     color: var(--text-dim);
     font-size: 14.5px;
     font-weight: 500
 }

 .nav-links a:hover {
     color: var(--text)
 }

 @media(max-width:820px) {
     .nav-links {
         display: none
     }
 }

 /* ---------- 首屏 ---------- */
 .hero {
     padding: 96px 0 72px;
     text-align: center;
     position: relative;
     overflow: hidden
 }

 .hero::before {
     content: "";
     position: absolute;
     top: -200px;
     left: 50%;
     transform: translateX(-50%);
     width: 800px;
     height: 800px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(59, 130, 246, .16), transparent 65%);
     pointer-events: none;
 }

 .hero h1 {
     font-size: clamp(30px, 5vw, 52px);
     letter-spacing: -.02em;
     max-width: 820px;
     margin: 0 auto 20px;
     position: relative;
 }

 .hero .lead {
     font-size: clamp(16px, 2vw, 19px);
     max-width: 660px;
     margin: 0 auto 34px
 }

 .hero-actions {
     display: flex;
     gap: 14px;
     justify-content: center;
     flex-wrap: wrap;
     margin-bottom: 26px
 }

 .hero-meta {
     display: flex;
     gap: 22px;
     justify-content: center;
     flex-wrap: wrap;
     font-size: 13.5px;
     color: var(--text-faint);
 }

 .hero-meta span {
     display: flex;
     align-items: center;
     gap: 6px
 }

 .dot {
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: var(--green)
 }

 /* ---------- 终端命令块 ---------- */
 .cmd {
     display: inline-flex;
     align-items: center;
     gap: 14px;
     background: #080c16;
     border: 1px solid var(--border);
     border-radius: 11px;
     padding: 12px 12px 12px 20px;
     margin: 0 auto 30px;
     font-family: "SF Mono", Menlo, Consolas, monospace;
     font-size: 14.5px;
     max-width: 100%;
     overflow-x: auto;
 }

 .cmd code {
     color: var(--accent-2);
     white-space: nowrap
 }

 .cmd code .prompt {
     color: var(--text-faint);
     user-select: none
 }

 .copy-btn {
     background: var(--accent);
     color: #fff;
     border: none;
     border-radius: 7px;
     padding: 7px 10px;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: .2s;
     flex-shrink: 0;
     width: 60px;
 }

 .copy-btn:hover {
     background: #2f6fd6
 }

 .copy-btn.done {
     background: var(--green)
 }

 /* ---------- 全协议体验 ---------- */
 .proto-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
     margin-top: 40px;
 }

 @media(max-width:820px) {
     .proto-grid {
         grid-template-columns: 1fr
     }
 }

 .proto-card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 24px;
     display: flex;
     flex-direction: column;
     transition: .22s;
 }

 .proto-card:hover {
     border-color: #33405e;
     background: var(--card-hover);
     transform: translateY(-3px);
 }

 .proto-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 14px;
 }

 .proto-icon {
     font-size: 24px
 }

 .proto-tag {
     font-size: 11.5px;
     font-weight: 700;
     padding: 3px 10px;
     border-radius: 5px;
     background: rgba(52, 211, 153, .14);
     color: var(--green);
     letter-spacing: .02em;
 }

 .proto-tag-auth {
     background: rgba(59, 130, 246, .14);
     color: #60a5fa;
 }

 .proto-card h3 {
     font-size: 17px;
     margin-bottom: 8px
 }

 .proto-desc {
     font-size: 13.5px;
     color: var(--text-dim);
     margin-bottom: 16px;
     flex-grow: 1
 }

 .proto-url {
     background: #080c16;
     border: 1px solid var(--border);
     border-radius: 9px;
     padding: 11px 14px;
     margin-bottom: 16px;
     overflow-x: auto;
 }

 .proto-url code {
     font-family: "SF Mono", Menlo, Consolas, monospace;
     font-size: 12.5px;
     color: var(--accent-2);
     white-space: nowrap;
 }

 .proto-foot {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 14px;
     border-top: 1px solid var(--border);
 }

 .proto-meta {
     font-size: 12.5px;
     color: var(--text-faint)
 }

 .proto-link {
     font-size: 13.5px;
     font-weight: 600;
     color: var(--accent-2)
 }

 .proto-link:hover {
     color: #67e8f9
 }

 .proto-note {
     text-align: center;
     margin-top: 26px;
     font-size: 13.5px;
     color: var(--text-faint);
     max-width: 680px;
     margin-left: auto;
     margin-right: auto;
 }

 .proto-note strong {
     color: var(--text)
 }

 /* ---------- 痛点对照 ---------- */
 .compare {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 22px;
     margin-top: 40px
 }

 @media(max-width:820px) {
     .compare {
         grid-template-columns: 1fr
     }
 }

 .panel {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 28px;
 }

 .panel.bad {
     border-color: #3a2436
 }

 .panel.good {
     border-color: #1e3a4d
 }

 .panel h3 {
     margin-bottom: 18px;
     display: flex;
     align-items: center;
     gap: 9px;
     font-size: 17px
 }

 .tag {
     font-size: 11.5px;
     font-weight: 700;
     padding: 3px 9px;
     border-radius: 5px;
     letter-spacing: .03em
 }

 .tag-bad {
     background: rgba(244, 63, 94, .14);
     color: #fb7185
 }

 .tag-good {
     background: rgba(52, 211, 153, .14);
     color: var(--green)
 }

 .compare-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 14px
 }

 .compare-list li {
     display: flex;
     gap: 11px;
     font-size: 14.5px;
     color: var(--text-dim)
 }

 .compare-list .ico {
     flex-shrink: 0;
     font-size: 15px;
     line-height: 1.7
 }

 .compare-list b {
     color: var(--text);
     font-weight: 600
 }

 /* ---------- 架构图 ---------- */
 .arch-wrap {
     margin-top: 44px;
     background: var(--bg-soft);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 28px 22px 20px;
 }

 .arch-wrap svg {
     width: 100%;
     height: auto;
     display: block
 }

 .arch-legend {
     display: flex;
     gap: 26px;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 22px;
     padding-top: 18px;
     border-top: 1px solid var(--border);
     font-size: 13px;
     color: var(--text-dim);
 }

 .arch-legend span {
     display: flex;
     align-items: center;
     gap: 8px
 }

 .lg {
     width: 22px;
     height: 3px;
     border-radius: 2px;
     display: inline-block
 }

 .lg-blue {
     background: #3b82f6
 }

 .lg-cyan {
     background: #22d3ee
 }

 .lg-green {
     background: #34d399
 }

 .lg-red {
     background: #f43f5e;
     opacity: .7
 }

 .arch-steps {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
     margin-top: 32px
 }

 @media(max-width:820px) {
     .arch-steps {
         grid-template-columns: 1fr
     }
 }

 .arch-step {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 22px;
     position: relative;
 }

 .step-num {
     display: inline-grid;
     place-items: center;
     width: 28px;
     height: 28px;
     border-radius: 8px;
     background: rgba(59, 130, 246, .14);
     color: var(--accent-2);
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 12px;
 }

 .arch-step h4 {
     font-size: 15px;
     margin-bottom: 8px
 }

 .arch-step p {
     font-size: 13.5px;
     color: var(--text-dim);
     margin: 0
 }

 /* ---------- 双平面架构 ---------- */
 .plane-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
     margin-top: 40px;
 }

 @media(max-width:820px) {
     .plane-grid {
         grid-template-columns: 1fr
     }
 }

 .plane {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 26px;
 }

 .plane.signal {
     border-color: #3a2f4d
 }

 .plane.data {
     border-color: #1e3a4d
 }

 .plane-head {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 8px;
 }

 .plane-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     flex-shrink: 0;
 }

 .plane.signal .plane-dot {
     background: #a78bfa;
     box-shadow: 0 0 10px #a78bfa
 }

 .plane.data .plane-dot {
     background: var(--accent-2);
     box-shadow: 0 0 10px var(--accent-2)
 }

 .plane h3 {
     font-size: 17px;
     margin: 0
 }

 .plane-sub {
     font-size: 12.5px;
     color: var(--text-faint);
     margin-bottom: 18px
 }

 .plane ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 11px
 }

 .plane li {
     font-size: 13.8px;
     color: var(--text-dim);
     display: flex;
     gap: 9px
 }

 .plane li::before {
     content: "›";
     color: var(--accent-2);
     font-weight: 700;
     flex-shrink: 0
 }

 .plane.signal li::before {
     color: #a78bfa
 }

 .plane-divider {
     text-align: center;
     margin-top: 30px;
     font-size: 14px;
     color: var(--text-dim);
     padding: 14px;
     background: var(--bg-soft);
     border-radius: 10px;
     border: 1px solid var(--border);
 }

 .plane-divider b {
     color: var(--text)
 }

 /* ---------- 角色分流 ---------- */
 .roles {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
     margin-top: 40px
 }

 @media(max-width:820px) {
     .roles {
         grid-template-columns: 1fr
     }
 }

 .role-card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 26px;
     cursor: pointer;
     transition: .22s;
     text-align: left;
 }

 .role-card:hover {
     background: var(--card-hover);
     border-color: #33405e;
     transform: translateY(-3px)
 }

 .role-card.active {
     border-color: var(--accent);
     box-shadow: 0 0 0 1px var(--accent), 0 12px 34px rgba(59, 130, 246, .16)
 }

 .role-icon {
     font-size: 24px;
     margin-bottom: 12px
 }

 .role-card h3 {
     font-size: 16.5px;
     margin-bottom: 6px
 }

 .role-card p {
     font-size: 13.5px;
     color: var(--text-faint)
 }

 .role-panel {
     display: none;
     margin-top: 34px;
     animation: fade .3s ease
 }

 .role-panel.active {
     display: block
 }

 @keyframes fade {
     from {
         opacity: 0;
         transform: translateY(8px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 /* ---------- 功能网格 ---------- */
 .grid-2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px
 }

 @media(max-width:720px) {
     .grid-2 {
         grid-template-columns: 1fr
     }
 }

 .feat {
     background: var(--bg-soft);
     border: 1px solid var(--border);
     border-radius: 11px;
     padding: 20px;
 }

 .feat h4 {
     font-size: 15px;
     margin-bottom: 7px;
     color: var(--text)
 }

 .feat p {
     font-size: 13.8px;
     color: var(--text-dim);
     margin: 0
 }

 .feat code {
     font-family: "SF Mono", Menlo, Consolas, monospace;
     font-size: 12.8px;
     background: #080c16;
     padding: 2px 7px;
     border-radius: 5px;
     color: var(--accent-2);
 }

 .cmd-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 11px;
     margin-top: 6px
 }

 .cmd-list li {
     display: flex;
     gap: 12px;
     align-items: baseline;
     font-size: 13.8px;
     color: var(--text-dim);
     padding: 11px 14px;
     background: #080c16;
     border-radius: 9px;
     border: 1px solid var(--border);
 }

 .cmd-list code {
     font-family: "SF Mono", Menlo, Consolas, monospace;
     font-size: 12.8px;
     color: var(--accent-2);
     flex-shrink: 0;
     white-space: nowrap;
 }

 /* ---------- 合规背书 ---------- */
 .trust {
     background: linear-gradient(135deg, rgba(59, 130, 246, .09), rgba(34, 211, 238, .05));
     border: 1px solid #1e3a4d;
     border-radius: var(--radius);
     padding: 36px;
 }

 .trust-head {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 20px
 }

 .trust-badge {
     width: 42px;
     height: 42px;
     border-radius: 11px;
     flex-shrink: 0;
     background: rgba(52, 211, 153, .14);
     display: grid;
     place-items: center;
     font-size: 20px;
 }

 .trust h3 {
     font-size: 18px;
     margin: 0
 }

 .trust-body {
     display: grid;
     grid-template-columns: 1.4fr 1fr;
     gap: 28px
 }

 @media(max-width:820px) {
     .trust-body {
         grid-template-columns: 1fr
     }
 }

 .trust-quote {
     background: rgba(8, 12, 22, .5);
     border-left: 3px solid var(--accent);
     padding: 16px 20px;
     border-radius: 0 9px 9px 0;
     font-size: 14.5px;
     color: var(--text-dim);
 }

 .trust-quote b {
     color: var(--text)
 }

 .trust-meta {
     display: flex;
     flex-direction: column;
     gap: 14px
 }

 .trust-meta-item {
     font-size: 13.5px;
     color: var(--text-dim)
 }

 .trust-meta-item b {
     display: block;
     color: var(--text);
     font-size: 14.5px;
     margin-bottom: 3px
 }

 .mono {
     font-family: "SF Mono", Menlo, Consolas, monospace;
     color: var(--accent-2)
 }

 /* ---------- 能力模块 ---------- */
 .caps {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 18px;
     margin-top: 40px
 }

 @media(max-width:820px) {
     .caps {
         grid-template-columns: 1fr
     }
 }

 .cap {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 26px;
     transition: .2s;
 }

 .cap:hover {
     border-color: #33405e;
     background: var(--card-hover)
 }

 .cap-num {
     font-size: 12px;
     font-weight: 700;
     color: var(--accent-2);
     letter-spacing: .1em;
     margin-bottom: 10px;
     display: block;
 }

 .cap h3 {
     font-size: 17px;
     margin-bottom: 10px
 }

 .cap ul {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 9px;
     margin-top: 14px
 }

 .cap li {
     font-size: 13.8px;
     color: var(--text-dim);
     display: flex;
     gap: 9px
 }

 .cap li::before {
     content: "›";
     color: var(--accent-2);
     font-weight: 700;
     flex-shrink: 0
 }

 /* ---------- 性能对比表 ---------- */
 .perf-table-wrap {
     overflow-x: auto;
     margin-top: 40px;
     border: 1px solid var(--border);
     border-radius: var(--radius);
 }

 .perf-table {
     width: 100%;
     border-collapse: collapse;
     min-width: 680px;
     font-size: 14px
 }

 .perf-table th,
 .perf-table td {
     padding: 16px 20px;
     text-align: left;
     border-bottom: 1px solid var(--border);
 }

 .perf-table th {
     background: var(--bg-soft);
     font-size: 13.5px;
     font-weight: 600
 }

 .perf-table th:first-child {
     color: var(--text-faint)
 }

 .perf-table th.col-old {
     color: #fb7185
 }

 .perf-table th.col-new {
     color: var(--green)
 }

 .perf-table td:first-child {
     color: var(--text-dim);
     font-size: 13.5px
 }

 .perf-table td {
     color: var(--text-dim)
 }

 .perf-table td.col-old {
     color: #f0a0b0
 }

 .perf-table td.col-new {
     color: #6ee7b7
 }

 .perf-table tr:last-child td {
     border-bottom: none
 }

 .perf-note {
     text-align: center;
     margin-top: 18px;
     font-size: 13px;
     color: var(--text-faint);
 }

 /* ---------- 场景 ---------- */
 .scenes {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px;
     margin-top: 36px
 }

 @media(max-width:820px) {
     .scenes {
         grid-template-columns: 1fr
     }
 }

 .scene {
     background: var(--bg-soft);
     border: 1px solid var(--border);
     border-radius: 11px;
     padding: 18px;
     transition: .2s;
 }

 .scene:hover {
     border-color: #33405e
 }

 .scene h4 {
     font-size: 14.5px;
     margin-bottom: 6px
 }

 .scene p {
     font-size: 13px;
     color: var(--text-faint);
     margin: 0
 }

 /* ---------- 安全对比表 ---------- */
 .table-wrap {
     overflow-x: auto;
     margin-top: 36px;
     border: 1px solid var(--border);
     border-radius: var(--radius)
 }

 table {
     width: 100%;
     border-collapse: collapse;
     min-width: 640px;
     font-size: 14px
 }

 th,
 td {
     padding: 15px 20px;
     text-align: left;
     border-bottom: 1px solid var(--border)
 }

 th {
     background: var(--bg-soft);
     font-size: 13.5px;
     font-weight: 600;
     color: var(--text)
 }

 th:first-child {
     color: var(--text-faint)
 }

 td:first-child {
     color: var(--text-dim);
     font-size: 13.5px
 }

 td {
     color: var(--text-dim)
 }

 td.col-good {
     color: var(--green)
 }

 td.col-bad {
     color: #fb7185
 }

 tr:last-child td {
     border-bottom: none
 }

 /* ---------- 价格 ---------- */
 .pricing {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
     margin-top: 40px
 }

 @media(max-width:820px) {
     .pricing {
         grid-template-columns: 1fr
     }
 }

 .price-card {
     background: var(--card);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 30px;
     text-align: center;
     transition: .2s;
 }

 .price-card:hover {
     border-color: #33405e;
     transform: translateY(-3px)
 }

 .price-card.featured {
     border-color: var(--accent);
     box-shadow: 0 0 0 1px var(--accent)
 }

 .price-name {
     font-size: 14.5px;
     color: var(--text-dim);
     margin-bottom: 14px
 }

 .price-val {
     font-size: 34px;
     font-weight: 700;
     color: var(--text);
     margin-bottom: 4px
 }

 .price-val small {
     font-size: 14px;
     font-weight: 500;
     color: var(--text-faint)
 }

 .price-desc {
     font-size: 13.5px;
     color: var(--text-faint);
     margin-top: 12px
 }

 .price-note {
     text-align: center;
     margin-top: 24px;
     font-size: 13.5px;
     color: var(--text-faint);
 }

 /* ---------- 商业定位金句 ---------- */
 .manifesto {
     text-align: center;
     padding: 70px 30px;
     background: linear-gradient(135deg, rgba(59, 130, 246, .08), rgba(34, 211, 238, .04));
     border: 1px solid var(--border);
     border-radius: var(--radius);
     position: relative;
     overflow: hidden;
 }

 .manifesto::before {
     content: "";
     position: absolute;
     top: -120px;
     left: 50%;
     transform: translateX(-50%);
     width: 500px;
     height: 500px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(34, 211, 238, .14), transparent 65%);
     pointer-events: none;
 }

 .manifesto-quote {
     font-size: clamp(20px, 3vw, 28px);
     font-weight: 700;
     color: var(--text);
     line-height: 1.5;
     max-width: 760px;
     margin: 0 auto 20px;
     position: relative;
 }

 .manifesto-quote em {
     font-style: normal;
     color: var(--accent-2);
 }

 .manifesto-sub {
     font-size: 15.5px;
     color: var(--text-dim);
     max-width: 660px;
     margin: 0 auto 28px;
     position: relative;
 }

 .manifesto-line {
     font-size: 14px;
     color: var(--text-faint);
     letter-spacing: .06em;
     position: relative;
 }

 /* ---------- CTA 收口 ---------- */
 .cta {
     text-align: center;
     background: var(--bg-soft);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 60px 30px;
     margin-top: 20px;
 }

 .cta h2 {
     margin-bottom: 14px
 }

 .cta .lead {
     margin: 0 auto 30px
 }

 .cta-actions {
     display: flex;
     gap: 14px;
     justify-content: center;
     flex-wrap: wrap
 }

 /* ---------- 联系我们 ---------- */
 .contact-box {
     display: grid;
     grid-template-columns: 1.4fr 1fr;
     gap: 40px;
     align-items: center;
     background: linear-gradient(135deg, rgba(59, 130, 246, .07), rgba(34, 211, 238, .03));
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 48px;
 }

 @media(max-width:820px) {
     .contact-box {
         grid-template-columns: 1fr;
         gap: 34px;
         padding: 32px
     }
 }

 .contact-info h2 {
     margin-bottom: 14px
 }

 .contact-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
     margin: 28px 0 30px;
 }

 .contact-item {
     display: flex;
     gap: 14px;
     align-items: flex-start
 }

 .contact-icon {
     width: 36px;
     height: 36px;
     flex-shrink: 0;
     border-radius: 9px;
     background: rgba(59, 130, 246, .12);
     display: grid;
     place-items: center;
     font-size: 17px;
 }

 .contact-item b {
     display: block;
     font-size: 14.5px;
     color: var(--text);
     margin-bottom: 2px;
 }

 .contact-item span {
     font-size: 13.5px;
     color: var(--text-dim);
     line-height: 1.5;
 }

 .contact-actions {
     display: flex;
     gap: 12px;
     flex-wrap: wrap
 }

 /* 二维码面板 */
 .qr-panel {
     text-align: center
 }

 .qr-frame {
     width: 200px;
     height: 200px;
     margin: 0 auto 18px;
     background: #fff;
     border-radius: 16px;
     padding: 14px;
     position: relative;
     box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
 }

 .qr-img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     border-radius: 8px;
     display: block;
     position: relative;
     z-index: 2;
 }

 .qr-placeholder {
     position: absolute;
     inset: 14px;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 4px;
     background: #f1f5f9;
     color: #94a3b8;
     z-index: 1;
 }

 .qr-placeholder span {
     font-size: 15px;
     font-weight: 600
 }

 .qr-placeholder small {
     font-size: 11px
 }

 .qr-img:not([src=""])+.qr-placeholder {
     display: none
 }

 .qr-caption {
     font-size: 14px;
     color: var(--text);
     font-weight: 600;
     margin-bottom: 4px;
 }

 .qr-sub {
     font-size: 12.5px;
     color: var(--text-faint)
 }

 /* ---------- 页脚 ---------- */
 footer {
     border-top: 1px solid var(--border);
     padding: 40px 0;
     font-size: 13.5px;
     color: var(--text-faint);
     text-align: center;
 }

 footer a {
     color: var(--text-dim)
 }

 /* ---------- 通用 ---------- */
 .section-head {
     text-align: center;
     max-width: 640px;
     margin: 0 auto
 }

 .section-head .lead {
     margin: 0 auto
 }

 .divider {
     height: 1px;
     background: var(--border);
     margin: 0
 }

 /* ---------- 页面提示 showPageTip ---------- */
 .page-tip {
     position: fixed;
     top: 80px;
     left: 50%;
     transform: translate(-50%, -16px);
     background: var(--card);
     border: 1px solid var(--border);
     color: var(--text);
     padding: 13px 22px;
     border-radius: 11px;
     font-size: 14px;
     line-height: 1.5;
     box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
     opacity: 0;
     pointer-events: none;
     transition: opacity .3s ease, transform .3s ease;
     z-index: 999;
     max-width: 90vw;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .page-tip-show {
     opacity: 1;
     transform: translate(-50%, 0);
     pointer-events: auto;
 }

 .page-tip-icon {
     font-size: 16px;
     flex-shrink: 0
 }

 .page-tip-close {
     margin-left: 8px;
     cursor: pointer;
     color: var(--text-faint);
     font-size: 16px;
     line-height: 1;
     flex-shrink: 0;
 }

 .page-tip-close:hover {
     color: var(--text)
 }

 /* 类型配色 */
 .page-tip-info {
     border-color: #3b82f6
 }

 .page-tip-success {
     border-color: var(--green)
 }

 .page-tip-warning {
     border-color: #f59e0b
 }

 .page-tip-error {
     border-color: #f43f5e
 }

 @media(max-width:820px) {
     .page-tip {
         top: 72px;
         font-size: 13.5px;
         padding: 12px 18px
     }
 }

 .hero h1 {
     max-width: 820px;
     margin: 0 auto 22px;
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 16px;
 }

 .hero h1 .brand-line {
     font-size: clamp(14px, 1.8vw, 18px);
     font-weight: 500;
     color: var(--text-dim);
     letter-spacing: .32em;
     padding-left: .32em;
     text-transform: none;
 }

 .hero h1 .claim-line {
     font-size: clamp(30px, 5vw, 52px);
     font-weight: 700;
     letter-spacing: -.02em;
     line-height: 1.15;
 }

 .hero h1 .claim-line em {
     font-style: normal;
     color: var(--accent-2);
 }