:root {
  --ink: #0a0a0a;
  --muted-ink: #656565;
  --line: #ebebeb;
  --soft: #f7f7f7;
  --card: rgba(255, 255, 255, .86);
  --primary: #359eff;
  --primary-deep: #1687ee;
  --blue-article: #0762d2;
  --gold-article: #e3c25e;
  --shadow: 0 18px 45px rgba(26, 54, 89, .10);
  --radius: 22px;
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--ink); background: #fff; font-family: var(--sans); font-size: 16px; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }

.site-shell { min-height: 100vh; overflow: clip; background: radial-gradient(1200px 520px at 50% -160px, rgba(120, 170, 255, .35), transparent), radial-gradient(900px 460px at 8% -140px, rgba(255, 208, 170, .45), transparent), linear-gradient(180deg, #fdf7f1 0%, #f6f9ff 40%, #fff 100%); }
.container { width: min(1216px, calc(100% - 32px)); margin: 0 auto; }
.narrow-container { width: min(1216px, calc(100% - 32px)); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 20; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled, .site-header.menu-open { border-bottom: 1px solid rgba(230, 230, 230, .9); background: rgba(255, 255, 255, .7); box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.10); backdrop-filter: blur(16px); }
.nav-wrap { width: min(1216px, calc(100% - 32px)); height: 72px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -.45px; }
.brand img { width: 34px; height: 32px; border-radius: 8px; object-fit: contain; }
.desktop-nav { display: flex; align-items: center; gap: 8px; }
.desktop-nav > a:not(.login-link) { padding: 9px 16px; border-radius: 999px; color: #3c3c3c; font-size: 14px; transition: background .15s ease, color .15s ease; }
.desktop-nav > a:not(.login-link):hover { background: rgba(235, 238, 241, .85); color: var(--ink); }
.login-link { margin-left: 16px; padding: 7px 14px; border: 1px solid rgba(0,0,0,.08); border-radius: 6px; background: var(--primary); color: #fff; font-size: 14px; font-weight: 600; transition: opacity .15s ease, transform .15s ease; }
.login-link:hover { opacity: .9; transform: translateY(-1px); }
.menu-toggle, .mobile-nav { display: none; }

.hero { position: relative; isolation: isolate; min-height: 1280px; padding: 176px 0 112px; overflow: hidden; }
.hero-photo { position: absolute; z-index: -3; inset: 0; display: block; background: linear-gradient(90deg, rgba(253,247,241,.98) 0%, rgba(253,247,241,.88) 42%, rgba(253,247,241,.23) 100%), url("assets/hero-background.png") 50% 50% / cover no-repeat; opacity: .7; }
.hero-glow { position: absolute; z-index: -2; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.83) 54%, #f7f9ff 100%); }
.hero-content { text-align: center; }
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 32px; color: #5a6170; font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.eyebrow span { width: 22px; height: 1px; background: currentColor; opacity: .48; }
.hero h1 { max-width: 864px; margin: 0 auto; font-size: 60px; font-weight: 900; line-height: 1.08; letter-spacing: -1.5px; text-wrap: balance; }
.hero-copy { max-width: 672px; margin: 24px auto 48px; color: rgba(10,10,10,.7); font-size: 18px; line-height: 1.625; }
.primary-button, .outline-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 600; transition: transform .15s cubic-bezier(.4,0,.2,1), opacity .15s cubic-bezier(.4,0,.2,1), box-shadow .15s cubic-bezier(.4,0,.2,1), background .15s cubic-bezier(.4,0,.2,1); }
.primary-button { background: var(--primary); color: #fff; box-shadow: 0 10px 15px -3px rgba(53,158,255,.28), 0 4px 6px -4px rgba(53,158,255,.28); }
.primary-button:hover { background: var(--primary-deep); transform: scale(1.05); opacity: .9; }
.hero-button { min-height: 40px; padding: 0 24px; font-size: 16px; font-weight: 700; }
.hero-button svg, .cta-box .primary-button svg { width: 17px; height: 17px; }

.formatter-demo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; max-width: 1050px; margin: 86px auto 0; text-align: left; }
.source-pane, .preview-pane { min-width: 0; overflow: hidden; border: 1px solid rgba(222,226,234,.92); border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 25px 60px rgba(28, 55, 90, .14); backdrop-filter: blur(10px); }
.source-pane { transform: rotate(-1.5deg) translateY(12px); }
.preview-pane { transform: rotate(1.5deg) translateY(-8px); }
.demo-pane-top { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-bottom: 1px solid #edf0f3; color: #6f7783; font-size: 11px; letter-spacing: .02em; }
.demo-pane-top b { margin-left: 4px; font-weight: 700; }
.demo-pane-top small { color: #9ca3af; font-weight: 500; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
.red { background: #ff6e66; }.yellow { background: #ffbd43; }.green { background: #50cb73; }
.style-chip { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: #eaf4ff; color: #2687dd; font-weight: 700; }
.raw-article { height: 485px; padding: 24px 27px; overflow: hidden; background: linear-gradient(180deg, #fff, #fbfcfd); color: #5b6470; font-size: 12px; line-height: 1.84; }
.raw-article h2 { margin: 0 0 15px; color: #29313c; font-size: 17px; line-height: 1.4; }
.raw-article p { margin: 0 0 12px; }
.raw-article b { color: #263445; }
.raw-article .raw-title { margin-top: 18px; padding: 7px 10px; border-left: 3px solid var(--primary); background: #edf7ff; color: #2687dd; font-weight: 800; }
.ai-arrow { display: grid; place-items: center; gap: 3px; color: #238fe8; text-align: center; }
.ai-arrow span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(140deg, #4ec1ff, #4081ff); color: #fff; font-size: 10px; font-weight: 900; box-shadow: 0 8px 20px rgba(51,137,255,.35); }
.ai-arrow svg { width: 29px; height: 29px; }
.phone-frame { height: 485px; overflow: hidden; background: #fff; }
.phone-status { display: flex; justify-content: space-between; padding: 7px 17px 5px; color: #222; font-size: 10px; font-weight: 700; }
.wechat-article { height: 455px; padding: 14px 18px 32px; overflow: hidden; color: #3e3e3e; font-size: 8px; line-height: 1.7; }
.wechat-article h2 { margin: 0 0 10px; color: #333; font-size: 14px; line-height: 1.4; letter-spacing: -.4px; }
.article-meta { display: flex; align-items: center; gap: 5px; color: #888; font-size: 8px; white-space: nowrap; }
.article-meta span { padding: 1px 4px; border-radius: 2px; background: #f0f0f0; color: #888; }
.article-meta em { color: #576b95; font-style: normal; font-weight: 700; }.article-meta i { color: #b2b2b2; font-style: normal; }
.article-location { display: flex; justify-content: space-between; margin: 7px 0 10px; color: #b2b2b2; font-size: 8px; }.article-location b { color: #576b95; }
.article-intro { padding: 9px; background: #eff8fc; font-size: 8px; }
.promo-image { display: block; width: 100%; margin: 12px 0; border-radius: 4px; }
.article-section-title { width: max-content; margin: 17px auto 12px; padding: 2px 12px; border-top: 2px solid #528ad4; border-bottom: 4px solid var(--gold-article); background: var(--blue-article); color: #f8f8f8; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.wechat-article h3 { display: flex; align-items: center; gap: 6px; margin: 12px 0 5px; color: var(--blue-article); font-size: 10px; }.wechat-article h3 span { padding: 2px 5px; background: var(--blue-article); color: #fff; font-size: 9px; }.wechat-article p { margin: 0 0 8px; }

.section { position: relative; padding: 96px 0; }.muted-section { background: rgba(247,247,247,.92); }.section-intro { margin: 0 auto 44px; text-align: center; }.section-label { margin: 0 0 11px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .16em; }.section-intro h2, .cta-box h2 { margin: 0; font-size: 48px; font-weight: 650; line-height: 1.12; letter-spacing: -1.5px; text-wrap: balance; }.section-intro > p:last-child { margin: 16px 0 0; color: var(--muted-ink); font-size: 16px; }
.step-grid, .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }.step-card, .feature-card { min-height: 230px; padding: 25px; border: 1px solid rgba(230,230,230,.92); border-radius: var(--radius); background: rgba(255,255,255,.86); box-shadow: 0 5px 15px rgba(0,0,0,.03); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }.step-card:hover, .feature-card:hover { border-color: rgba(53,158,255,.28); box-shadow: var(--shadow); transform: translateY(-5px); }.card-number { color: #b5c7d6; font-size: 13px; font-weight: 800; }.card-icon, .feature-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-top: 19px; border-radius: 13px; background: #eaf5ff; color: #2687dd; font-size: 21px; font-weight: 800; }.step-card h3, .feature-card h3 { margin: 18px 0 8px; font-size: 18px; line-height: 1.3; }.step-card p, .feature-card p { margin: 0; color: var(--muted-ink); font-size: 14px; line-height: 1.7; }.feature-card { min-height: 180px; }.feature-icon { margin-top: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }.stat-card { display: grid; place-items: center; min-height: 178px; border: 1px solid rgba(230,230,230,.9); border-radius: var(--radius); background: rgba(255,255,255,.86); text-align: center; }.stat-card strong { color: var(--primary); font-size: 62px; font-weight: 800; line-height: 1; letter-spacing: -3px; }.stat-card strong span { font-size: .55em; letter-spacing: -1px; }.stat-card p { margin: 9px 0 0; color: #4f5561; font-size: 15px; font-weight: 600; }

.faq-section { padding-bottom: 100px; }.faq-list { display: grid; gap: 12px; }.faq-item { overflow: hidden; border: 1px solid rgba(222,222,222,.9); border-radius: 16px; background: rgba(255,255,255,.8); box-shadow: 0 2px 5px rgba(0,0,0,.05); transition: box-shadow .3s ease, border-color .3s ease, background .3s ease; }.faq-item:hover { border-color: rgba(53,158,255,.2); box-shadow: 0 12px 24px rgba(0,0,0,.09); }.faq-item.open { background: #fff; }.faq-trigger { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; min-height: 56px; padding: 16px 24px; border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: 16px; font-weight: 650; line-height: 24px; text-align: left; }.faq-trigger svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: #7c8792; transition: transform .2s ease; }.faq-item.open .faq-trigger svg { transform: rotate(180deg); }.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease, opacity .2s ease; opacity: 0; }.faq-answer > p { min-height: 0; margin: 0; padding: 0 24px; overflow: hidden; color: rgba(10,10,10,.7); font-size: 16px; line-height: 1.65; }.faq-item.open .faq-answer { grid-template-rows: 1fr; opacity: 1; }.faq-item.open .faq-answer > p { padding-bottom: 20px; }

.pricing-section { padding: 144px 0; }.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }.price-card { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 482px; border: 1px solid #e9e9e9; border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 9px 25px rgba(21,31,48,.06); }.price-card.recommended { border: 2px solid var(--primary); box-shadow: 0 18px 40px rgba(53,158,255,.18); }.recommend-badge { position: absolute; top: 18px; right: 18px; padding: 4px 9px; border-radius: 999px; background: #eaf5ff; color: #2687dd; font-size: 11px; font-weight: 800; }.plan-head { padding: 29px 24px 25px; }.plan-head h3 { margin: 0; font-size: 14px; font-weight: 600; }.price { margin: 18px 0 8px; font-size: 37px; font-weight: 800; line-height: 1; letter-spacing: -1.5px; }.price small { color: var(--muted-ink); font-size: 14px; font-weight: 500; letter-spacing: 0; }.plan-head > p:last-of-type { min-height: 42px; margin: 0 0 22px; color: var(--muted-ink); font-size: 13px; line-height: 1.6; }.outline-button { width: 100%; border: 1px solid #dedede; border-radius: 9px; background: #fff; color: #2d3034; }.outline-button:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }.plan-button { width: 100%; border-radius: 9px; }.plan-button:hover { transform: translateY(-2px); }.plan-body { flex: 1; padding: 24px; border-top: 1px solid #eeeeee; background: rgba(250,250,250,.7); }.plan-body b { font-size: 13px; }.plan-body ul { display: grid; gap: 12px; margin: 17px 0 0; padding: 0; list-style: none; color: #59616d; font-size: 13px; }.plan-body li { position: relative; padding-left: 20px; }.plan-body li::before { position: absolute; left: 0; content: "✓"; color: var(--primary); font-weight: 900; }

.cta-section { padding: 96px 0; background: rgba(247,247,247,.92); }.cta-box { display: grid; justify-items: center; padding: 44px 16px; text-align: center; }.cta-box p:not(.section-label) { margin: 17px 0 28px; color: var(--muted-ink); }.cta-box .primary-button { padding: 0 24px; }
.site-footer { padding: 32px 0; background: #fff; }.footer-inner { display: grid; gap: 42px; }.footer-brand .brand { margin-bottom: 15px; }.footer-brand p { max-width: 456px; margin: 0; color: var(--muted-ink); font-size: 14px; }.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid #eee; color: var(--muted-ink); font-size: 13px; }.footer-bottom p { margin: 0; }.footer-bottom p a { color: var(--primary); }.footer-bottom > div { display: flex; gap: 16px; }.footer-bottom > div a { font-size: 12px; text-decoration: underline; text-underline-offset: 2px; transition: color .15s ease; }.footer-bottom > div a:hover { color: var(--primary); }

@media (max-width: 1023px) {
  .desktop-nav { display: none; }.menu-toggle { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -10px; border: 0; background: transparent; cursor: pointer; color: #262d34; }.menu-toggle svg { position: absolute; width: 22px; height: 22px; transition: transform .2s ease, opacity .2s ease; }.close-icon { opacity: 0; transform: rotate(-180deg) scale(0); }.site-header.menu-open .menu-icon { opacity: 0; transform: rotate(180deg) scale(0); }.site-header.menu-open .close-icon { opacity: 1; transform: rotate(0) scale(1); }.mobile-nav { display: block; max-height: 0; overflow: hidden; background: rgba(255,255,255,.78); transition: max-height .3s ease; }.site-header.menu-open .mobile-nav { max-height: 320px; }.mobile-nav a { display: block; width: min(736px, calc(100% - 32px)); margin: 0 auto; padding: 12px 0; color: #32363b; font-weight: 600; }.mobile-nav .login-link { width: min(736px, calc(100% - 32px)); margin: 14px auto 22px; padding: 9px 13px; color: #fff; text-align: center; }.formatter-demo { grid-template-columns: minmax(0, 1fr) 50px minmax(0, 1fr); }.raw-article, .phone-frame { height: 455px; }
}

@media (max-width: 800px) {
  .step-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }.hero { min-height: auto; }.formatter-demo { margin-top: 66px; }.source-pane { transform: rotate(-1deg); }.preview-pane { transform: rotate(1deg); }
}

@media (max-width: 560px) {
  .container { width: min(100% - 32px, 358px); }.nav-wrap { width: calc(100% - 32px); height: 56px; }.site-header { min-height: 56px; }.brand { gap: 9px; font-size: 17px; }.brand img { width: 32px; height: 30px; }.hero { padding: 128px 0 80px; }.hero-photo { display: none; }.hero-glow { background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.94) 55%, #f8faff 100%); }.eyebrow { margin-bottom: 22px; font-size: 10px; }.hero h1 { font-size: 36px; line-height: 1.12; letter-spacing: -1.2px; }.hero-copy { margin: 19px auto 30px; font-size: 16px; }.formatter-demo { grid-template-columns: 1fr; gap: 18px; margin-top: 58px; }.source-pane, .preview-pane { transform: none; }.ai-arrow { grid-template-columns: auto auto; justify-content: center; }.ai-arrow svg { transform: rotate(90deg); }.raw-article, .phone-frame { height: 425px; }.section { padding: 64px 0; }.section-intro { margin-bottom: 30px; }.section-intro h2, .cta-box h2 { font-size: 30px; letter-spacing: -1px; }.section-intro > p:last-child { margin-top: 12px; font-size: 14px; }.step-grid, .feature-grid, .stat-grid, .pricing-grid { grid-template-columns: 1fr; }.step-grid, .feature-grid { gap: 14px; }.step-card { min-height: 176px; padding: 22px; }.feature-card { min-height: 140px; padding: 22px; }.card-icon { margin-top: 13px; }.step-card h3, .feature-card h3 { margin-top: 13px; }.stat-grid { gap: 14px; }.stat-card { min-height: 164px; }.stat-card strong { font-size: 56px; }.faq-trigger { padding: 16px 18px; font-size: 15px; }.faq-answer > p { padding-inline: 18px; font-size: 15px; }.pricing-section { padding: 64px 0; }.price-card { min-height: 0; }.plan-head { padding: 25px 22px 20px; }.plan-body { padding: 22px; }.cta-section { padding: 64px 0; }.cta-box { padding: 26px 4px; }.footer-inner { gap: 28px; }.footer-bottom { align-items: flex-start; flex-direction: column; gap: 16px; }.footer-bottom > div { gap: 18px; }
}