:root { --ink:#17211b; --muted:#657069; --paper:#f7f5ef; --white:#fffefb; --line:#dfe3dd; --green:#216b49; --lime:#dff36a; --blue:#1677ff; --shadow:0 24px 70px rgba(25,45,33,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Microsoft YaHei','PingFang SC',sans-serif; line-height:1.65; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
button { color:inherit; }
:focus-visible { outline:3px solid rgba(22,119,255,.32); outline-offset:3px; }
.site-header { position:sticky; top:0; z-index:20; min-height:74px; display:flex; align-items:center; justify-content:space-between; gap:32px; padding:0 max(5vw,24px); background:rgba(247,245,239,.92); border-bottom:1px solid rgba(23,33,27,.1); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:11px; }
.brand-mark,.mini-mark { display:grid; place-items:center; background:var(--green); color:white; font-family:'STKaiti','KaiTi',serif; border-radius:10px; }
.brand-mark { width:38px; height:38px; font-size:20px; }
.brand strong,.brand small { display:block; line-height:1.25; }
.brand strong { letter-spacing:.08em; }
.brand small { margin-top:3px; color:var(--muted); font-size:10px; letter-spacing:.15em; }
nav { display:flex; align-items:center; gap:28px; font-size:14px; font-weight:600; }
nav a,.link-button { transition:color .2s; }
nav a:hover,.link-button:hover { color:var(--green); }
.link-button,.footer-links button { padding:0; border:0; background:none; cursor:pointer; }
.hero { min-height:690px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:7vw; padding:90px max(7vw,24px) 110px; overflow:hidden; background-image:linear-gradient(rgba(33,107,73,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(33,107,73,.055) 1px,transparent 1px); background-size:48px 48px; }
.hero-copy { max-width:690px; }
.eyebrow { margin:0 0 18px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.2em; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:26px; font-family:'STKaiti','KaiTi',serif; font-size:clamp(48px,6.4vw,88px); font-weight:400; line-height:1.08; letter-spacing:-.045em; }
h1 em { color:var(--green); font-style:normal; }
.hero-intro { max-width:590px; margin-bottom:34px; color:var(--muted); font-size:17px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:8px; padding:0 26px; cursor:pointer; font-weight:700; transition:transform .18s,box-shadow .18s,background .18s; }
.button:hover { transform:translateY(-2px); }
.primary { border-color:var(--ink); background:var(--ink); color:white; box-shadow:0 10px 26px rgba(23,33,27,.18); }
.primary:hover { background:var(--green); border-color:var(--green); }
.secondary { border-color:#cbd1cb; background:rgba(255,255,255,.7); }
.trust-list { display:flex; flex-wrap:wrap; gap:24px; padding:0; margin:30px 0 0; color:var(--muted); font-size:13px; list-style:none; }
.trust-list li::before { content:'✓'; margin-right:7px; color:var(--green); font-weight:800; }
.product-preview { position:relative; min-height:440px; display:grid; place-items:center; }
.preview-orbit { position:absolute; width:470px; height:470px; border:1px solid rgba(33,107,73,.25); border-radius:50%; }
.preview-orbit::before,.preview-orbit::after { content:''; position:absolute; border-radius:50%; background:var(--lime); }
.preview-orbit::before { width:18px; height:18px; top:38px; right:68px; box-shadow:0 0 0 10px rgba(223,243,106,.22); }
.preview-orbit::after { width:9px; height:9px; bottom:67px; left:33px; }
.digital-card { position:relative; z-index:2; width:min(100%,430px); min-height:266px; display:flex; flex-direction:column; justify-content:space-between; padding:28px; color:white; border-radius:24px; background:linear-gradient(145deg,#1d6b48,#123c2b); box-shadow:0 35px 80px rgba(22,70,48,.3); transform:rotate(-4deg); overflow:hidden; }
.digital-card::after { content:''; position:absolute; width:280px; height:280px; right:-110px; top:-120px; border:60px solid rgba(223,243,106,.16); border-radius:50%; }
.digital-card-top { display:flex; justify-content:space-between; font-size:10px; font-weight:700; letter-spacing:.18em; opacity:.8; }
.digital-card-mark { width:58px; height:58px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:16px; font:30px 'STKaiti','KaiTi',serif; }
.digital-card strong { font-size:24px; }
.digital-card p { margin:3px 0 0; font-size:9px; letter-spacing:.16em; opacity:.65; }
.digital-card-code { padding-top:16px; border-top:1px solid rgba(255,255,255,.25); font-family:monospace; letter-spacing:.12em; }
.preview-note { position:absolute; z-index:3; right:0; bottom:22px; margin:0; padding:10px 16px; border:1px solid var(--line); background:var(--white); box-shadow:var(--shadow); font-size:12px; font-weight:700; }
.preview-note span { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#35a96d; }
.section { padding:110px max(7vw,24px); }
.plans-section { background:var(--white); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:45px; }
.section-heading h2,.guide h2 { margin:0; font:400 clamp(34px,4vw,56px)/1.2 'STKaiti','KaiTi',serif; }
.section-heading>p { max-width:430px; margin:0; color:var(--muted); font-size:14px; }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.plan { position:relative; min-height:390px; display:flex; flex-direction:column; padding:30px; border:1px solid var(--line); border-radius:16px; background:#fafbf8; transition:transform .22s,border-color .22s,box-shadow .22s; }
.plan:hover { transform:translateY(-5px); border-color:#aeb9b1; box-shadow:0 18px 50px rgba(29,51,38,.09); }
.plan.featured { background:var(--green); color:white; border-color:var(--green); }
.plan-badge { position:absolute; top:18px; right:18px; padding:5px 10px; border-radius:99px; background:var(--lime); color:var(--ink); font-size:11px; font-weight:800; }
.plan-kicker { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.16em; }
.featured .plan-kicker { color:var(--lime); }
.plan h3 { margin:18px 0 4px; font-size:23px; }
.plan-desc { min-height:48px; color:var(--muted); font-size:13px; }
.featured .plan-desc,.featured .plan-features { color:rgba(255,255,255,.72); }
.price { margin:16px 0 20px; font-size:38px; font-weight:800; letter-spacing:-.05em; }
.price small { margin-right:4px; font-size:16px; }
.plan-features { display:grid; gap:9px; padding:18px 0; margin:0 0 24px; border-top:1px solid currentColor; color:var(--muted); font-size:13px; list-style:none; opacity:.9; }
.plan-features li::before { content:'·'; margin-right:8px; font-weight:900; }
.plan .button { width:100%; margin-top:auto; }
.featured .button { color:var(--ink); background:var(--lime); border-color:var(--lime); box-shadow:none; }
.guide { display:grid; grid-template-columns:.9fr 1.1fr; gap:9vw; background:#e9eee8; }
.guide-copy>p:last-child { max-width:470px; margin-top:26px; color:var(--muted); }
.steps { padding:0; margin:0; border-top:1px solid #bcc7bf; list-style:none; }
.steps li { display:grid; grid-template-columns:70px 1fr; gap:20px; padding:25px 0; border-bottom:1px solid #bcc7bf; }
.steps li>span { color:var(--green); font:24px 'STKaiti','KaiTi',serif; }
.steps h3 { margin:0 0 6px; }
.steps p { margin:0; color:var(--muted); font-size:14px; }
.faq-section { background:var(--white); }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); }
summary { display:flex; align-items:center; justify-content:space-between; padding:25px 2px; cursor:pointer; font-weight:700; list-style:none; }
summary::after { content:'＋'; color:var(--green); font-size:22px; font-weight:400; }
details[open] summary::after { content:'－'; }
details p { max-width:760px; margin:-8px 0 24px; color:var(--muted); font-size:14px; }
footer { display:grid; grid-template-columns:1.4fr 1fr; gap:30px; padding:55px max(7vw,24px) 25px; background:var(--ink); color:white; }
.footer-brand { display:flex; align-items:center; gap:13px; }
.footer-brand .brand-mark { color:var(--ink); background:var(--lime); }
.footer-brand p { margin:3px 0 0; color:#9eaaa2; font-size:12px; }
.footer-links { display:flex; flex-direction:column; align-items:flex-start; gap:8px; font-size:13px; }
.footer-links button { color:#c7cec9; }
.copyright { grid-column:1/-1; margin:30px 0 0; padding-top:20px; border-top:1px solid #344039; color:#818e85; font-size:11px; }
.modal { width:min(calc(100% - 32px),520px); padding:0; border:0; border-radius:18px; color:var(--ink); background:var(--white); box-shadow:var(--shadow); }
.modal::backdrop { background:rgba(12,20,15,.58); backdrop-filter:blur(5px); }
.modal form,.success-modal,.legal-modal { padding:28px; }
.modal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:22px; }
.modal-head h2 { margin:0; font:400 34px 'STKaiti','KaiTi',serif; }
.modal-head .eyebrow { margin-bottom:5px; }
.icon-button { width:36px; height:36px; display:grid; place-items:center; flex:none; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; font-size:23px; line-height:1; }
.order-product { display:grid; grid-template-columns:50px 1fr auto; align-items:center; gap:13px; padding:15px; margin-bottom:20px; border:1px solid var(--line); border-radius:12px; background:#f5f7f3; }
.mini-mark { width:50px; height:50px; font-size:21px; }
.order-product p { margin:2px 0 0; color:var(--muted); font-size:12px; }
.order-product b { font-size:20px; }
.field { display:block; margin:17px 0; }
.field span,.pay-method>span { display:block; margin-bottom:8px; font-size:13px; font-weight:700; }
.field input { width:100%; height:48px; padding:0 14px; border:1px solid #cdd3ce; border-radius:8px; background:white; outline:none; }
.field input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(33,107,73,.1); }
.pay-method label { display:flex; align-items:center; gap:10px; padding:13px; border:1px solid var(--blue); border-radius:9px; background:#f5f9ff; }
.pay-method input { accent-color:var(--blue); }
.alipay-icon { width:29px; height:29px; display:grid; place-items:center; border-radius:7px; background:var(--blue); color:white; font-weight:800; }
.pay-method small { margin-left:auto; color:var(--blue); }
.consent { display:flex; align-items:flex-start; gap:8px; margin:18px 0; color:var(--muted); font-size:12px; }
.consent input { margin-top:4px; accent-color:var(--green); }
.consent button { padding:0; color:var(--green); border:0; background:none; cursor:pointer; }
.pay-button,.full { width:100%; }
.pay-button strong { margin-left:7px; }
.checkout-note { margin:10px 0 0; color:#889189; text-align:center; font-size:11px; }
.success-modal { text-align:center; }
.success-check { width:60px; height:60px; display:grid; place-items:center; margin:0 auto 18px; border-radius:50%; background:#dff3e7; color:var(--green); font-size:28px; font-weight:800; }
.success-modal h2 { margin-bottom:8px; font:400 38px 'STKaiti','KaiTi',serif; }
.success-modal>p:not(.eyebrow) { color:var(--muted); font-size:14px; }
.code-box { margin:22px 0; padding:18px; border:1px dashed var(--green); border-radius:12px; background:#f1f7f2; }
.code-box span,.code-box strong { display:block; }
.code-box span { color:var(--muted); font-size:11px; }
.code-box strong { margin:5px 0 12px; font-family:monospace; font-size:20px; letter-spacing:.06em; }
.code-box button { padding:7px 13px; border:0; border-radius:6px; background:var(--green); color:white; cursor:pointer; font-size:12px; }
.receipt { margin:0 0 22px; text-align:left; font-size:12px; }
.receipt div { display:flex; justify-content:space-between; gap:20px; padding:8px 0; border-bottom:1px solid var(--line); }
.receipt dt { color:var(--muted); }
.receipt dd { margin:0; font-weight:600; text-align:right; }
.modal-copy { margin-top:-8px; color:var(--muted); font-size:13px; }
.form-message { min-height:20px; margin:0 0 10px; color:#b64035; font-size:12px; }
.legal-modal { width:min(calc(100% - 32px),680px); }
.legal-content { max-height:60vh; overflow:auto; padding-right:8px; color:var(--muted); font-size:13px; }
.legal-content h3 { color:var(--ink); margin:20px 0 8px; }
.toast { position:fixed; z-index:100; left:50%; bottom:28px; transform:translate(-50%,20px); padding:10px 17px; border-radius:8px; background:var(--ink); color:white; font-size:13px; opacity:0; pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:900px) { nav a:not(:last-of-type){display:none}.hero{grid-template-columns:1fr;padding-top:70px}.product-preview{min-height:390px}.plans{grid-template-columns:1fr}.plan{min-height:auto}.guide{grid-template-columns:1fr}.section-heading{align-items:flex-start;flex-direction:column}.section-heading>p{max-width:none}footer{grid-template-columns:1fr 1fr} }
@media (max-width:560px) { .site-header{min-height:66px;padding:0 18px}.brand small{display:none}nav{gap:16px}nav a{display:none!important}.hero{min-height:auto;padding:58px 20px 80px;gap:35px}h1{font-size:47px}.hero-intro{font-size:15px}.hero-actions .button{width:100%}.trust-list{gap:14px}.product-preview{min-height:300px}.preview-orbit{width:310px;height:310px}.digital-card{min-height:210px;padding:22px}.digital-card-mark{width:46px;height:46px}.preview-note{bottom:-5px}.section{padding:75px 20px}.section-heading{margin-bottom:28px}.plan{padding:24px}.guide{gap:50px}.steps li{grid-template-columns:50px 1fr}footer{grid-template-columns:1fr;padding:45px 20px 25px}.modal form,.success-modal,.legal-modal{padding:22px}.order-product{grid-template-columns:45px 1fr}.order-product b{grid-column:2}.mini-mark{width:45px;height:45px}.code-box strong{font-size:17px}.copyright{margin-top:16px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*{transition:none!important} }