:root { --paper:#F7F1E8; --paper-deep:#EEE4D7; --surface:#FFFDF9; --ink:#303044; --muted:#6E6A75; --indigo:#34356A; --indigo-deep:#25264F; --swaddle-pink:#E2B09F; --pink-text:#B65762; --pink-surface:#F7E4E3; --gold:#B77E45; --line:#DFD8CF; --success:#426F54; --max:1160px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; font-size:16px; line-height:1.65; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.container { width:min(calc(100% - 48px),var(--max)); margin:0 auto; }
.section-pad { padding:112px 0; }
.skip-link { position:absolute; left:16px; top:-60px; background:var(--indigo); color:#fff; padding:10px 14px; z-index:20; border-radius:10px; }
.skip-link:focus { top:16px; }
.site-header { position:sticky; top:0; z-index:10; background:rgba(247,241,232,.9); border-bottom:1px solid rgba(223,216,207,.7); backdrop-filter:blur(16px); }
.header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand-link { display:inline-flex; align-items:center; }
.wordmark { display:inline-flex; align-items:baseline; white-space:nowrap; font-size:clamp(18px,2.1vw,23px); font-weight:760; line-height:1; letter-spacing:-.075em; }
.wordmark span + span { margin-left:.1em; }
.wordmark-zhi { color:var(--indigo); }
.wordmark-zi { color:var(--gold); -webkit-text-stroke:.45px var(--indigo); paint-order:stroke fill; }
.wordmark-an { color:var(--swaddle-pink); -webkit-text-stroke:.55px var(--indigo); paint-order:stroke fill; }
.site-nav { display:flex; align-items:center; gap:26px; font-size:14px; color:var(--muted); }
.site-nav a { transition:color .2s ease; }
.site-nav a:hover,.site-nav a:focus-visible { color:var(--indigo); }
.nav-cta { color:var(--indigo)!important; border:1px solid rgba(52,53,106,.3); padding:8px 14px; border-radius:999px; }
.menu-button { display:none; border:1px solid var(--line); color:var(--indigo); background:var(--surface); padding:8px 12px; border-radius:999px; }
.hero { overflow:hidden; padding-top:98px; }
.hero-grid { display:grid; grid-template-columns:minmax(0, .9fr) minmax(480px,1.1fr); align-items:center; gap:54px; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 24px; color:var(--gold); font-size:13px; font-weight:700; letter-spacing:.08em; }
.eyebrow-dot { width:8px; height:8px; background:var(--swaddle-pink); border-radius:50%; box-shadow:0 0 0 5px rgba(226,176,159,.2); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.04em; line-height:1.12; }
h1 { max-width:590px; margin-bottom:26px; font-size:clamp(46px,6.3vw,84px); font-weight:700; }
h1 em,h2 span { color:var(--indigo); font-style:normal; }
.hero-lede { max-width:500px; margin-bottom:30px; color:var(--muted); font-size:18px; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.button { display:inline-flex; min-height:48px; align-items:center; gap:13px; padding:12px 18px; border-radius:16px; font-weight:700; font-size:15px; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.button:hover,.button:focus-visible { transform:translateY(-2px); }
.button:focus-visible,.site-nav a:focus-visible,.footer-links a:focus-visible,.support-download:focus-visible,.menu-button:focus-visible { outline:3px solid var(--pink-text); outline-offset:3px; }
.button-primary { background:var(--indigo); color:#fff; box-shadow:0 10px 20px rgba(52,53,106,.18); }
.button-primary:hover { background:var(--indigo-deep); box-shadow:0 14px 24px rgba(52,53,106,.22); }
.button-quiet { color:var(--indigo); background:rgba(255,253,249,.55); border:1px solid var(--line); }
.hero-note { margin:18px 0 0; color:var(--muted); font-size:13px; }
.hero-art { min-height:540px; position:relative; isolation:isolate; }
.sun-disc { position:absolute; width:460px; height:460px; right:4%; top:20px; z-index:-1; border-radius:50%; background:radial-gradient(circle at 38% 35%,#fffaf3 0 15%,var(--pink-surface) 58%,var(--swaddle-pink) 100%); opacity:.8; }
.hero-paper { position:absolute; width:240px; right:47%; top:80px; padding:12px 12px 18px; background:#fffdf9; box-shadow:0 22px 40px rgba(73,54,45,.13); transform:rotate(-8deg); }
.hero-paper img { width:100%; border:1px solid #d6cdc2; }
.paper-label { display:block; margin:2px 0 8px; color:var(--gold); font-size:9px; letter-spacing:.12em; }
.hero-phone { position:absolute; width:232px; right:8%; top:106px; padding:13px 9px 12px; border-radius:30px; background:#20203a; box-shadow:0 30px 44px rgba(47,40,57,.28); transform:rotate(5deg); }
.hero-phone img { border-radius:21px; }
.phone-speaker { position:absolute; z-index:1; top:19px; left:50%; width:54px; height:5px; transform:translateX(-50%); border-radius:9px; background:#0c0c18; }
.hero-owl { position:absolute; z-index:1; width:190px; right:33%; bottom:34px; filter:drop-shadow(0 18px 18px rgba(75,51,42,.18)); animation:float 6s ease-in-out infinite; }
.hero-art::after { content:""; position:absolute; width:54px; height:54px; right:30%; bottom:48px; z-index:0; border:1px solid var(--swaddle-pink); border-radius:50%; background:var(--pink-surface); }
.float-label { position:absolute; padding:9px 13px; background:rgba(255,253,249,.87); border:1px solid rgba(255,255,255,.7); box-shadow:0 10px 20px rgba(73,54,45,.1); border-radius:999px; color:var(--indigo); font-size:12px; font-weight:700; }
.float-label-one { left:3%; bottom:105px; }
.float-label-two { right:0; bottom:12px; }
@keyframes float { 0%,100%{ transform:translateY(0) rotate(-4deg); } 50%{ transform:translateY(-11px) rotate(2deg); } }
.section-intro { max-width:720px; margin-bottom:54px; }
.narrow-intro { max-width:680px; }
h2 { margin-bottom:20px; font-size:clamp(36px,4.5vw,62px); }
.section-intro > p:last-child { max-width:580px; color:var(--muted); font-size:18px; }
.story { background:#fffaf4; }
.story-layout { display:grid; grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr); gap:92px; align-items:start; }
.story-visual { position:sticky; top:130px; min-height:640px; border:1px solid var(--line); border-radius:28px; background:linear-gradient(150deg,var(--pink-surface),var(--paper) 62%,var(--paper-deep)); overflow:hidden; }
.story-orbit { position:absolute; border:1px solid rgba(52,53,106,.14); border-radius:50%; }
.orbit-a { width:530px; height:530px; left:-170px; top:30px; }
.orbit-b { width:370px; height:370px; right:-120px; bottom:-30px; }
.story-stage { position:absolute; inset:74px 72px 88px; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; pointer-events:none; transform:translateY(16px) scale(.98); transition:opacity .45s ease,transform .45s ease; }
.story-stage.is-visible { opacity:1; transform:none; }
.story-stage img { max-height:430px; width:auto; border-radius:12px; box-shadow:0 20px 34px rgba(71,55,49,.18); }
.story-stage span { margin-top:17px; color:var(--indigo); font-weight:700; font-size:14px; }
.stage-paper img { max-width:260px; }
.stage-photo .photo-frame { width:260px; padding:13px; border:8px solid #292a52; border-radius:23px; transform:rotate(-5deg); background:#fff; box-shadow:0 20px 34px rgba(71,55,49,.18); }
.stage-photo .photo-frame img { width:100%; border-radius:5px; box-shadow:none; transform:rotate(3deg); }
.stage-review img,.stage-timeline img { max-width:250px; }
.source-chip { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:8px 13px; border:1px solid rgba(52,53,106,.18); border-radius:999px; background:rgba(255,253,249,.82); color:var(--indigo); font-size:12px; }
.source-chip-mark { display:inline-grid; width:18px; height:18px; margin-right:5px; place-items:center; border-radius:50%; background:var(--swaddle-pink); }
.story-steps { padding:14px 0 40px; }
.story-step { display:grid; grid-template-columns:68px 1fr; gap:20px; min-height:205px; padding:18px 0 48px; border-top:1px solid var(--line); opacity:.48; transition:opacity .3s ease; }
.story-step.is-active { opacity:1; }
.step-number { display:flex; align-items:center; gap:8px; color:var(--gold); font-size:14px; font-weight:800; letter-spacing:.1em; }
.step-number::before { content:""; width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--line); }
.story-step.is-active .step-number { color:var(--pink-text); }
.story-step.is-active .step-number::before { background:var(--swaddle-pink); box-shadow:0 0 0 5px rgba(226,176,159,.2); }
.story-step h3 { margin-bottom:12px; font-size:27px; }
.story-step p { max-width:460px; color:var(--muted); }
.section-tint { background:#f2e8dd; }
.feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.feature-card { min-height:520px; display:flex; flex-direction:column; justify-content:space-between; padding:30px; border:1px solid rgba(223,216,207,.85); border-radius:26px; background:rgba(255,253,249,.72); overflow:hidden; }
.feature-card-large { grid-column:span 2; min-height:430px; display:grid; grid-template-columns:.85fr 1.15fr; gap:34px; align-items:center; }
.feature-card-wide { grid-column:span 2; min-height:250px; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center; }
.feature-index { display:block; margin-bottom:28px; color:var(--gold); font-size:12px; font-weight:800; letter-spacing:.1em; }
.feature-card h3 { margin-bottom:14px; font-size:30px; }
.feature-card p { max-width:460px; margin-bottom:0; color:var(--muted); }
.feature-shot { align-self:end; filter:drop-shadow(0 22px 22px rgba(73,54,45,.14)); }
.feature-shot img { width:240px; margin:0 auto -115px; border-radius:24px 24px 0 0; }
.feature-card-large .feature-shot img { width:310px; margin-bottom:-116px; }
.shot-review img { border:6px solid #25264f; border-radius:24px 24px 0 0; }
.shot-profile img { margin-bottom:-133px; }
.feature-metrics { display:flex; justify-content:flex-end; gap:12px; }
.metric { min-width:120px; min-height:110px; padding:18px; background:#efe1d6; border-radius:20px; color:var(--indigo); }
.metric strong { display:block; margin-bottom:13px; font-size:30px; line-height:1; letter-spacing:-.06em; }
.metric strong span { font-size:15px; letter-spacing:0; }
.metric span { color:var(--muted); font-size:13px; }
.metric-soft { background:#e3e2ee; }
.privacy-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; align-items:start; }
.privacy-list { display:grid; gap:26px; }
.privacy-list article { display:grid; grid-template-columns:48px 1fr; gap:17px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.privacy-icon { display:grid; width:42px; height:42px; place-items:center; border-radius:15px; background:var(--indigo); color:#fff; font-size:20px; }
.privacy-list h3 { margin-bottom:7px; font-size:22px; }
.privacy-list p { margin-bottom:0; color:var(--muted); }
.section-ink { background:var(--indigo); color:#fff; }
.eyebrow-light { color:var(--pink-surface); }
.support-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:center; }
.support h2 span { color:var(--pink-surface); }
.support-lede { max-width:420px; color:#d3d0df; font-size:18px; }
.support-panel { padding:10px 24px 24px; border:1px solid rgba(255,255,255,.18); border-radius:24px; background:rgba(255,255,255,.07); }
.support-row { display:grid; grid-template-columns:78px 1.1fr 1fr; gap:14px; align-items:center; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14); font-size:14px; }
.support-row > span:last-child { color:#c7c4d7; }
.support-state { font-size:11px; font-weight:800; }
.state-ready { color:#a5d2b3; }.state-no { color:#f0b1b6; }.state-later { color:#e5bf79; }
.support-download { display:flex; justify-content:space-between; align-items:center; margin-top:23px; padding:14px 16px; border:1px solid rgba(255,255,255,.32); border-radius:15px; color:#fff; font-weight:700; }
.care-sheets { background:#fffaf4; }
.sheet-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.sheet-card { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:20px; min-height:430px; padding:30px; border:1px solid var(--line); border-radius:26px; background:var(--surface); overflow:hidden; }
.sheet-card::before { content:""; position:absolute; top:0; left:30px; width:76px; height:4px; border-radius:0 0 5px 5px; background:var(--swaddle-pink); }
.sheet-card-panda { background:linear-gradient(145deg,var(--pink-surface),var(--surface) 70%); }
.sheet-card-copy { display:flex; flex-direction:column; align-items:flex-start; }
.sheet-card h3 { margin-bottom:14px; font-size:27px; }
.sheet-card p { color:var(--muted); }
.sheet-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:auto; padding-top:24px; }
.sheet-actions .button { min-height:44px; padding:10px 14px; border-radius:14px; font-size:14px; }
.text-link { color:var(--indigo); font-size:14px; font-weight:700; }
.text-link:hover,.text-link:focus-visible { text-decoration:underline; }
.sheet-preview { display:flex; align-items:flex-end; justify-content:center; min-width:0; }
.sheet-preview img { width:min(100%,210px); max-height:340px; object-fit:contain; object-position:bottom; border-radius:8px 8px 0 0; box-shadow:0 18px 28px rgba(73,54,45,.14); }
.fallback-sheets { background:var(--indigo); color:#fff; }
.fallback-sheets h2 { color:#fff; }
.fallback-sheets p { color:#d3d0df; }
.fallback-sheets a:not(.button) { display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-top:1px solid rgba(255,255,255,.16); color:#fff; font-size:14px; font-weight:700; }
.fallback-sheets a:not(.button):hover,.fallback-sheets a:not(.button):focus-visible { color:var(--pink-surface); }
.faq-list { margin-top:24px; border-top:1px solid rgba(255,255,255,.14); }
.faq-list details { border-bottom:1px solid rgba(255,255,255,.14); }
.faq-list summary { cursor:pointer; padding:16px 2px; color:#fff; font-weight:700; list-style-position:inside; }
.faq-list summary::marker { color:var(--swaddle-pink); }
.faq-list p { margin:0 0 16px 20px; color:#c7c4d7; font-size:14px; }
.contact { background:linear-gradient(145deg,var(--paper),var(--pink-surface)); }
.contact-inner { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; }
.contact-card { padding:30px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:0 15px 30px rgba(73,54,45,.06); }
.contact-card p { color:var(--muted); }
.contact-card small { display:block; margin-top:14px; color:var(--muted); font-size:12px; }
.download-section { scroll-margin-top:90px; background:linear-gradient(135deg,var(--pink-surface),var(--paper) 52%,var(--paper-deep)); }
.download-card { display:grid; grid-template-columns:190px minmax(0,1fr); gap:56px; align-items:center; padding:clamp(32px,6vw,72px); border:1px solid rgba(223,216,207,.9); border-radius:30px; background:var(--surface); box-shadow:0 24px 54px rgba(73,54,45,.08); }
.download-icon { position:relative; isolation:isolate; display:grid; width:160px; aspect-ratio:1; margin:0 auto; place-items:center; }
.download-icon::before { content:""; position:absolute; inset:4px; z-index:-1; border:1px solid rgba(226,176,159,.45); border-radius:50%; background:radial-gradient(circle,var(--pink-surface),rgba(226,176,159,.62)); }
.download-icon img { width:126px; height:126px; border:1px solid rgba(52,53,106,.1); border-radius:28px; box-shadow:0 16px 30px rgba(52,53,106,.18); }
.download-content .eyebrow { margin-bottom:14px; }
.download-content h2 { max-width:760px; margin-bottom:16px; font-size:clamp(34px,4.2vw,54px); }
.download-lede { max-width:720px; margin-bottom:18px; color:var(--muted); font-size:17px; }
.download-compatibility { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:18px; color:var(--muted); font-size:14px; font-weight:650; }
.download-status { display:inline-flex; min-height:46px; align-items:center; gap:10px; margin:0 0 10px; padding:10px 16px; border:1px solid rgba(52,53,106,.14); border-radius:999px; background:var(--pink-surface); color:var(--indigo); font-size:14px; }
.download-status-dot { width:9px; height:9px; flex:0 0 auto; border:2px solid var(--indigo); border-radius:50%; background:var(--swaddle-pink); }
.site-footer { padding:30px 0 38px; border-top:1px solid var(--line); background:var(--paper); }
.footer-inner { display:grid; grid-template-columns:1fr auto; align-items:end; gap:20px; }
.footer-brand p { margin:10px 0 0; color:var(--muted); font-size:13px; }
.footer-links { display:flex; gap:22px; color:var(--muted); font-size:13px; }.footer-links a:hover { color:var(--indigo); }
.footer-meta { grid-column:1 / -1; margin:12px 0 0; color:var(--muted); font-size:12px; }
.legal-page { min-height:70vh; }.legal-content { max-width:760px; }.legal-content h1 { font-size:clamp(40px,6vw,68px); }.legal-content h2 { margin-top:48px; font-size:32px; }.legal-content p,.legal-content li { color:var(--muted); }.legal-content a { color:var(--indigo); text-decoration:underline; }.legal-meta { color:var(--gold)!important; font-size:14px; }
@media (max-width:900px) { .hero-grid,.privacy-grid,.support-grid,.contact-inner { grid-template-columns:1fr; gap:46px; }.hero { padding-top:70px; }.hero-art { min-height:500px; max-width:650px; width:100%; margin:0 auto; }.story-layout { gap:40px; }.story-visual { position:relative; top:auto; min-height:520px; }.feature-card-large { grid-template-columns:1fr; }.feature-card-large .feature-shot { margin-top:10px; }.support-grid { gap:30px; }.contact-inner { gap:30px; }.download-card { grid-template-columns:150px minmax(0,1fr); gap:32px; padding:38px; } }
@media (max-width:680px) { .container { width:min(calc(100% - 32px),var(--max)); }.section-pad { padding:76px 0; }.header-inner { min-height:66px; }.menu-button { display:block; }.site-nav { display:none; position:absolute; top:66px; left:16px; right:16px; padding:14px; flex-direction:column; align-items:stretch; gap:0; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 15px 30px rgba(73,54,45,.12); }.site-nav.is-open { display:flex; }.site-nav a { padding:12px 10px; }.nav-cta { text-align:center; margin-top:8px; }.hero-grid { display:flex; flex-direction:column; gap:22px; align-items:stretch; }.hero-art { min-height:415px; transform:scale(.9); transform-origin:top center; width:111%; margin-bottom:-42px; }.sun-disc { width:330px; height:330px; right:8%; }.hero-paper { width:170px; right:47%; top:60px; }.hero-phone { width:175px; right:3%; top:80px; border-radius:24px; padding:9px 7px; }.hero-phone img { border-radius:17px; }.hero-owl { width:145px; right:31%; bottom:32px; }.float-label { font-size:11px; padding:7px 10px; }.float-label-one { left:0; bottom:90px; }.float-label-two { right:0; bottom:2px; }.hero-lede,.section-intro > p:last-child,.support-lede { font-size:16px; }.story-layout { display:flex; flex-direction:column; }.story-visual { width:100%; min-height:470px; }.story-stage { inset:44px 30px 76px; }.story-step { grid-template-columns:42px 1fr; gap:10px; min-height:0; padding-bottom:36px; }.story-step h3 { font-size:24px; }.sheet-grid { display:flex; flex-direction:column; }.sheet-card { display:flex; flex-direction:column; min-height:0; padding:24px; }.sheet-card h3 { font-size:24px; }.sheet-actions { margin-top:16px; }.sheet-preview { margin-top:28px; }.sheet-preview img { width:190px; max-height:300px; }.feature-grid { display:flex; flex-direction:column; }.feature-card,.feature-card-large,.feature-card-wide { min-height:0; display:flex; padding:24px; }.feature-shot img,.feature-card-large .feature-shot img { width:220px; margin-bottom:-90px; }.feature-metrics { justify-content:flex-start; flex-wrap:wrap; margin-top:28px; }.metric { min-width:100px; }.support-panel { padding-left:16px; padding-right:16px; }.support-row { grid-template-columns:66px 1fr; }.support-row > span:last-child { grid-column:2; }.download-card { grid-template-columns:1fr; gap:22px; padding:28px 22px; text-align:center; }.download-icon { width:112px; }.download-icon img { width:88px; height:88px; border-radius:22px; }.download-content .eyebrow { justify-content:center; }.download-content h2 { font-size:32px; }.download-lede { font-size:16px; }.download-compatibility { justify-content:center; gap:7px; font-size:13px; }.download-status { margin-top:0; }.footer-inner { display:block; }.footer-links { flex-wrap:wrap; margin-top:24px; }.footer-meta { margin-top:24px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.hero-owl,.button,.story-stage,.story-step { animation:none; transition:none; } }