:root {
  --ink: #06101a;
  --navy: #091725;
  --panel: #0d2031;
  --panel-2: #102a40;
  --line: #263e54;
  --text: #eef5fc;
  --muted: #8296aa;
  --blue: #69aaff;
  --blue-deep: #246bd6;
  --gold: #f0c75c;
  --green: #65d78d;
  --white: #f6f9fc;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--text); font-family: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
::selection { background: #2f6fbd; color: white; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid rgba(108, 143, 177, .18); background: rgba(6, 16, 26, .88); backdrop-filter: blur(18px); }
.nav-shell { height: 74px; display: flex; align-items: center; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand img { border-radius: 9px; }
.brand span { display: grid; gap: 2px; }.brand strong { font-size: 17px; letter-spacing: .02em; }.brand small { color: #63809b; font: 9px/1.2 Consolas, monospace; letter-spacing: .18em; }
.main-nav { height: 100%; display: flex; align-items: stretch; justify-content: center; gap: 6px; margin-left: auto; }
.main-nav a { position: relative; min-width: 76px; display: grid; place-items: center; padding: 0 13px; color: #91a2b4; font-size: 13px; transition: color .2s, background .2s; }
.main-nav a:hover { color: #eaf2fb; background: rgba(29, 58, 84, .3); }
.main-nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--gold); transition: left .2s, right .2s; }
.main-nav a.active { color: white; }.main-nav a.active::after { left: 16px; right: 16px; }
.nav-contact { height: 38px; display: inline-flex; align-items: center; padding: 0 17px; border: 1px solid #446888; border-radius: 10px; color: #d9e9f9; font-size: 12px; transition: border-color .2s, background .2s; }.nav-contact:hover { border-color: var(--blue); background: #102a41; }

.hero { min-height: 720px; display: grid; grid-template-columns: .94fr 1.06fr; align-items: center; gap: 50px; padding-block: 72px 88px; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 20px; color: var(--blue); font: 600 11px/1.4 Consolas, monospace; letter-spacing: .2em; }
.gold-text { color: var(--gold); }
.hero h1, .page-hero h1, .contact-copy h1 { margin: 0; font-size: clamp(46px, 5.2vw, 76px); line-height: 1.12; letter-spacing: -.055em; font-weight: 720; }
h1 em { color: var(--blue); font-style: normal; }
.hero-lead, .page-hero > p:last-child, .contact-copy > p { max-width: 650px; margin: 28px 0 0; color: #9aabba; font-size: 16px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid transparent; border-radius: 11px; font-size: 13px; font-weight: 700; transition: transform .2s, border-color .2s, background .2s; }.button:hover { transform: translateY(-2px); }
.button.gold { color: #181208; background: linear-gradient(135deg, #f5d477, var(--gold)); box-shadow: 0 14px 36px rgba(240, 199, 92, .13); }
.button.ghost { border-color: #34516b; background: #0b1b2a; color: #d9e6f2; }.button.ghost:hover { border-color: var(--blue); }
.button.light { border-color: #bbcad8; background: var(--white); color: #0b1825; }
.trust-line { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 32px; color: #6e8498; font-size: 11px; }.trust-line span::before { content: ""; width: 5px; height: 5px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }

.hero-visual { position: relative; min-height: 540px; display: grid; place-items: center; }
.hero-visual::before { content: ""; position: absolute; inset: 7% 1%; background: radial-gradient(circle at center, rgba(47, 108, 174, .32), transparent 66%); filter: blur(16px); }
.orbit { position: absolute; width: 470px; height: 470px; border: 1px solid #234664; border-radius: 50%; opacity: .65; }.orbit::before, .orbit::after { content: ""; position: absolute; inset: 74px; border: 1px solid #365d7e; border-radius: inherit; }.orbit::after { inset: 156px; border-color: #907637; }
.orbit-b { transform: rotate(67deg) scaleY(.54); border-color: #315a80; }
.product-window { position: relative; z-index: 2; width: min(100%, 760px); overflow: hidden; border: 1px solid #35526e; border-radius: 18px; background: #08131f; box-shadow: 0 35px 90px rgba(0, 0, 0, .42); }
.product-window.compact { transform: perspective(1200px) rotateY(-5deg) rotateX(2deg); }
.window-bar { height: 45px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid #24394d; background: #0b1723; }
.mini-brand { display: flex; align-items: center; gap: 7px; color: #dce8f5; font-size: 10px; font-weight: 700; }.mini-brand i { width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg, #43a2ff 0 48%, #e8bf4e 52%); }
.window-controls { display: flex; gap: 6px; }.window-controls i { width: 7px; height: 7px; border-radius: 50%; background: #42576b; }
.window-body { min-height: 340px; display: grid; grid-template-columns: 126px 1fr; }
.window-body aside { display: grid; align-content: start; gap: 5px; padding: 16px 9px; border-right: 1px solid #213448; background: #091725; }.window-body aside b { padding: 9px 10px; border-radius: 7px; color: #667e94; font-size: 9px; }.window-body aside b.selected { color: #8ebcff; background: #163456; }
.window-content { padding: 24px; }.preview-label { color: #7890a6; font-size: 9px; }.window-content > h3 { margin: 7px 0 18px; font-size: 18px; }.preview-panels { display: grid; grid-template-columns: 1fr 1.12fr; gap: 10px; }.preview-panels > div { min-height: 150px; padding: 14px; border: 1px solid #263d52; border-radius: 11px; background: #0c1c2b; }.preview-panels .reply { border-color: #276047; }.preview-panels small { color: #7890a6; font-size: 9px; }.preview-panels p { color: #c5d2df; font-size: 11px; line-height: 1.8; }.window-content button { width: 100%; height: 34px; margin-top: 12px; border: 0; border-radius: 8px; background: #195c40; color: #a5ebbd; font-size: 10px; font-weight: 700; }
.signal-note { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid #34546d; border-radius: 10px; background: rgba(9, 25, 39, .94); color: #a9bbcc; font-size: 10px; box-shadow: 0 12px 32px #0004; }.signal-note i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }.note-top { right: -10px; top: 45px; }.note-bottom { left: 8px; bottom: 55px; }

.workflow-section { padding: 100px 0; border-block: 1px solid #1b3043; background: #081521; }
.section-head h2, .membership-teaser h2, .cta-band h2 { margin: 0; font-size: clamp(32px, 4vw, 52px); line-height: 1.25; letter-spacing: -.04em; }.section-head.split { display: grid; grid-template-columns: 1.1fr .7fr; gap: 90px; align-items: end; }.section-head.split > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.workflow-rail { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid #2a4258; }.workflow-rail article { position: relative; min-height: 230px; padding: 30px 25px; border-right: 1px solid #21384c; }.workflow-rail article:last-child { border-right: 0; }.workflow-rail article::before { content: ""; position: absolute; width: 8px; height: 8px; left: 0; top: -5px; border: 2px solid var(--blue); border-radius: 50%; background: var(--ink); }.workflow-rail b { color: #58758f; font: 10px Consolas, monospace; }.workflow-rail h3 { margin: 38px 0 12px; font-size: 18px; }.workflow-rail p { margin: 0; color: #7f92a5; font-size: 12px; line-height: 1.8; }

.feature-preview { padding-block: 110px; }.feature-stage { display: grid; grid-template-columns: 1.28fr .72fr; gap: 14px; margin-top: 50px; }.stage-card { position: relative; min-height: 240px; overflow: hidden; padding: 28px; border: 1px solid #273f55; border-radius: 18px; background: linear-gradient(145deg, #0d2031, #091724); }.stage-card:nth-child(3) { grid-column: 2; }.stage-large { grid-row: span 2; min-height: 494px; background: radial-gradient(circle at 85% 15%, #173d60, transparent 38%), linear-gradient(145deg, #102940, #0a1927); }.feature-index { color: var(--blue); font: 10px Consolas, monospace; letter-spacing: .12em; }.stage-card h3 { margin: 26px 0 12px; font-size: 24px; }.stage-card p { max-width: 460px; margin: 0; color: #8194a8; font-size: 13px; line-height: 1.9; }.document-stack { position: absolute; right: 42px; bottom: 42px; width: 240px; height: 170px; }.document-stack i { position: absolute; inset: 0; border: 1px solid #335a7d; border-radius: 14px; background: #0d2234; transform: rotate(-8deg); }.document-stack i:nth-child(2) { transform: translate(-18px, -16px) rotate(-3deg); background: #102a40; }.document-stack i:nth-child(3) { transform: translate(-34px, -32px); background: #143554; }.document-stack strong { position: absolute; left: -9px; top: 18px; color: #a8c8eb; font-size: 12px; }.center-action { margin-top: 32px; text-align: center; }.text-link { color: #a9bdd1; font-size: 13px; }.text-link span { margin-left: 8px; color: var(--gold); }

.membership-teaser { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 50px; margin-bottom: 110px; padding: 42px; border: 1px solid #5a4d2c; border-radius: 20px; background: linear-gradient(135deg, #172533, #211e13); }.membership-teaser h2 { font-size: 28px; }.membership-teaser p { margin: 12px 0 0; color: #8395a6; font-size: 12px; }.price-snapshot { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 7px; }.price-snapshot span { grid-column: 1 / -1; margin-bottom: 8px; color: #b29b5c; font-size: 11px; }.price-snapshot strong { color: var(--gold); font: 600 30px Consolas, monospace; }.price-snapshot small { color: #8f825e; }

.cta-band { padding: 90px 0; background: var(--white); color: #0a1724; }.cta-band .shell { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }.cta-band .eyebrow { color: #356994; }.cta-band > div > div:last-child { display: flex; gap: 10px; }
.site-footer { padding-top: 70px; border-top: 1px solid #1d3144; background: #07131e; }.footer-grid { display: grid; grid-template-columns: 1.5fr .6fr .6fr 1fr; gap: 54px; padding-bottom: 55px; }.footer-brand small { color: #72879a; font: 10px "Microsoft YaHei UI", sans-serif; letter-spacing: 0; }.footer-grid > div:first-child > p, .footer-contact p { max-width: 330px; color: #718599; font-size: 11px; line-height: 1.8; }.footer-grid h3 { margin: 0 0 16px; color: #dbe5ef; font-size: 12px; }.footer-grid > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }.footer-grid a:not(.brand) { color: #718599; font-size: 11px; }.footer-grid a:hover { color: var(--blue); }.footer-bottom { display: flex; justify-content: space-between; padding-block: 18px; border-top: 1px solid #172a3b; color: #526a80; font-size: 10px; }

.page-hero { padding-block: 110px 72px; }.page-hero h1, .contact-copy h1 { font-size: clamp(44px, 5vw, 70px); }.page-hero.centered { max-width: 880px; text-align: center; }.page-hero.centered > p:last-child { margin-inline: auto; }
.feature-showcase { padding-bottom: 110px; }.feature-showcase .product-window { margin: auto; }.capability-strip { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 25px; color: #8196aa; font-size: 11px; }.capability-strip i { color: var(--gold); font-style: normal; }
.feature-list { padding-bottom: 120px; }.feature-list article { display: grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 45px 0; border-top: 1px solid #243a4e; }.feature-list article > b { color: #52718d; font: 12px Consolas, monospace; }.feature-list h2 { margin: 0; font-size: 28px; }.feature-list p { max-width: 760px; margin: 14px 0 20px; color: #8295a8; font-size: 13px; line-height: 1.9; }.feature-list ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }.feature-list li { padding: 6px 10px; border: 1px solid #2a455d; border-radius: 999px; color: #88a6c1; background: #0a1a28; font-size: 10px; }

.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-bottom: 75px; }.pricing-grid article { position: relative; min-width: 0; padding: 28px 24px; border: 1px solid #294057; border-radius: 17px; background: linear-gradient(145deg, #0c1d2c, #091622); }.pricing-grid article.featured { border-color: #9a7d37; background: radial-gradient(circle at 100% 0, #3b3219, transparent 35%), linear-gradient(145deg, #142330, #17170f); transform: translateY(-14px); }.recommend { position: absolute; right: 18px; top: 17px; padding: 5px 8px; border-radius: 999px; background: var(--gold); color: #1b1509; font-size: 9px; font-weight: 700; }.pricing-grid article > small { color: #5d7891; font: 9px Consolas, monospace; letter-spacing: .14em; }.pricing-grid h2 { margin: 18px 0 7px; font-size: 22px; }.pricing-grid article > p { margin: 0; color: #73879a; font-size: 11px; }.price { display: flex; align-items: flex-start; margin-top: 28px; }.price span { margin: 5px 4px 0 0; color: var(--gold); font-size: 13px; }.price strong { color: #f4d779; font: 600 36px/1 Consolas, monospace; }.duration { display: block; margin-top: 8px; color: #8a9bad; font-size: 10px; }.pricing-grid ul { min-height: 180px; display: grid; align-content: start; gap: 12px; margin: 28px 0; padding: 22px 0 0; border-top: 1px solid #253a4d; list-style: none; }.pricing-grid li { color: #8ea0b2; font-size: 10px; }.pricing-grid li::first-letter { color: var(--green); }.pricing-grid .button { width: 100%; }
.renewal-note { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 110px; padding: 38px 0; border-block: 1px solid #2b4255; }.renewal-note span { color: var(--gold); font-size: 10px; }.renewal-note h2 { margin: 10px 0 0; font-size: 24px; line-height: 1.5; }.renewal-note > p { margin: 0; color: #8295a7; font-size: 12px; line-height: 1.9; }

.guide-layout { display: grid; grid-template-columns: 1fr 340px; gap: 70px; padding-bottom: 120px; }.guide-steps { border-top: 1px solid #294156; }.guide-steps article { display: grid; grid-template-columns: 72px 1fr; gap: 15px; padding: 30px 0; border-bottom: 1px solid #21384b; }.guide-steps b { color: #5e7993; font: 11px Consolas, monospace; }.guide-steps h2 { margin: 0; font-size: 20px; }.guide-steps p { margin: 9px 0 0; color: #8294a6; font-size: 12px; line-height: 1.8; }.guide-aside { position: sticky; top: 100px; align-self: start; padding: 27px; border: 1px solid #5b4c27; border-radius: 17px; background: linear-gradient(145deg, #171f24, #18170e); }.guide-aside > span { color: var(--gold); font-size: 10px; }.guide-aside h3 { margin: 16px 0; font-size: 19px; line-height: 1.6; }.guide-aside ul { display: grid; gap: 10px; margin: 22px 0; padding: 20px 0 0 18px; border-top: 1px solid #403a25; color: #8c9ba7; font-size: 11px; line-height: 1.7; }.guide-aside .button { width: 100%; }
.faq { padding-bottom: 120px; }.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 35px; }.faq-grid article { padding: 25px; border: 1px solid #253c51; border-radius: 14px; background: #0a1927; }.faq-grid h3 { margin: 0; font-size: 15px; }.faq-grid p { margin: 11px 0 0; color: #7e92a6; font-size: 11px; line-height: 1.8; }

.about-story { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; align-items: center; padding-block: 30px 120px; }.about-mark { position: relative; min-height: 400px; display: grid; place-items: center; }.about-mark img { position: relative; z-index: 2; border-radius: 24px; box-shadow: 0 25px 70px #0007; }.about-mark .orbit { width: 360px; height: 360px; }.about-story > div:last-child > span { color: var(--blue); font-size: 10px; }.about-story h2 { margin: 18px 0 24px; font-size: 36px; line-height: 1.4; letter-spacing: -.03em; }.about-story p { color: #8295a8; font-size: 13px; line-height: 2; }.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-bottom: 120px; }.values article { min-height: 250px; padding: 28px; border-top: 2px solid #315474; background: linear-gradient(180deg, #0b1c2b, transparent); }.values b { color: #53738f; font: 10px Consolas, monospace; }.values h3 { margin: 50px 0 13px; font-size: 24px; }.values p { margin: 0; color: #7d91a4; font-size: 12px; line-height: 1.9; }

.contact-page { min-height: calc(100vh - 74px); display: grid; grid-template-columns: 1fr 470px; gap: 100px; align-items: center; padding-block: 80px 100px; }.contact-copy > p { max-width: 610px; }.contact-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }.contact-topics span { padding: 8px 12px; border: 1px solid #2d4b65; border-radius: 999px; color: #86a5c0; font-size: 10px; }.service-note { display: flex; gap: 13px; margin-top: 34px; padding: 18px; border-left: 2px solid var(--gold); background: #0d1e2d; }.service-note > i { width: 8px; height: 8px; flex: 0 0 8px; margin-top: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }.service-note strong { font-size: 12px; }.service-note p { margin: 6px 0 0; color: #778b9e; font-size: 11px; line-height: 1.8; }
.qr-card { padding: 24px 24px 27px; border: 1px solid #5a4c2d; border-radius: 22px; background: linear-gradient(145deg, #172533, #18170f); text-align: center; box-shadow: 0 35px 90px #0006; }.qr-frame { overflow: hidden; border-radius: 15px; background: white; }.qr-frame img { width: 100%; height: auto; display: block; }.qr-card h2 { margin: 23px 0 7px; font-size: 19px; }.qr-card p { margin: 0; color: #8b9aa7; font-size: 11px; }

.reveal { animation: rise .65s ease both; }.delay-1 { animation-delay: .12s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1050px) {
  .main-nav a { min-width: auto; padding-inline: 9px; }
  .hero { grid-template-columns: 1fr; padding-top: 90px; }.hero-copy { max-width: 760px; }.hero-visual { min-height: 500px; }
  .workflow-rail { grid-template-columns: 1fr 1fr; }.workflow-rail article:nth-child(2) { border-right: 0; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }.pricing-grid article.featured { transform: none; }
  .guide-layout { grid-template-columns: 1fr 300px; gap: 35px; }
  .contact-page { grid-template-columns: 1fr 400px; gap: 55px; }
}

@media (max-width: 820px) {
  .shell { width: min(100% - 32px, 680px); }
  .nav-shell { height: auto; min-height: 66px; flex-wrap: wrap; padding-block: 12px; }.main-nav { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; height: 42px; }.main-nav a { flex: 0 0 auto; }.nav-contact { margin-left: auto; }
  .hero { min-height: auto; padding-block: 70px; }.hero h1, .page-hero h1, .contact-copy h1 { font-size: clamp(39px, 10vw, 58px); }.hero-visual { min-height: 430px; }.orbit { width: 360px; height: 360px; }.product-window.compact { transform: none; }
  .section-head.split { grid-template-columns: 1fr; gap: 22px; }.workflow-section, .feature-preview { padding-block: 75px; }
  .feature-stage { grid-template-columns: 1fr; }.stage-card:nth-child(3) { grid-column: 1; }.stage-large { grid-row: auto; min-height: 430px; }
  .membership-teaser { grid-template-columns: 1fr; gap: 28px; margin-bottom: 75px; }.membership-teaser .button { justify-self: start; }
  .cta-band .shell { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }.footer-contact { display: none !important; }
  .page-hero { padding-block: 80px 55px; }
  .guide-layout, .about-story, .contact-page { grid-template-columns: 1fr; }.guide-aside { position: static; }.about-story { gap: 30px; }.contact-page { gap: 45px; }.qr-card { width: min(470px, 100%); margin-inline: auto; }
}

@media (max-width: 580px) {
  .brand strong { font-size: 15px; }.nav-contact { padding-inline: 11px; }
  .hero-visual { min-height: 350px; }.window-body { grid-template-columns: 88px 1fr; min-height: 290px; }.window-content { padding: 14px; }.preview-panels { grid-template-columns: 1fr; }.preview-panels > div:first-child { display: none; }
  .workflow-rail, .pricing-grid, .faq-grid, .values { grid-template-columns: 1fr; }.workflow-rail article { border-right: 0; }.workflow-rail article:not(:last-child) { border-bottom: 1px solid #21384c; }
  .document-stack { right: 5px; transform: scale(.8); }.stage-large { min-height: 400px; }
  .membership-teaser { padding: 27px; }.cta-band > div > div:last-child { width: 100%; flex-direction: column; }.cta-band .button { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-grid > div:first-child { grid-column: 1 / -1; }.footer-bottom { gap: 15px; flex-direction: column; }
  .feature-list article { grid-template-columns: 48px 1fr; gap: 10px; }.capability-strip { justify-content: flex-start; overflow-x: auto; white-space: nowrap; }
  .renewal-note { grid-template-columns: 1fr; gap: 22px; }.guide-steps article { grid-template-columns: 44px 1fr; }.about-mark { min-height: 320px; }.about-mark .orbit { width: 290px; height: 290px; }.contact-page { padding-top: 65px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

.nav-toggle { display: none; border: 1px solid #34516b; border-radius: 9px; padding: 8px 11px; color: #d9e6f2; background: #0b1b2a; }
@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-contact { display: none; }
  .main-nav { display: none; order: 3; }
  .main-nav.open { display: flex; }
}