:root { --blue:#146bff; --ink:#101a31; --muted:#6d7890; --pale:#eaf2ff; --line:#e5ebf5; --shell:min(1440px, calc(100% - 96px)); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; }
body { margin:0; overflow-x:clip; color:var(--ink); background:#fff; font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.section-shell { width:var(--shell); margin-inline:auto; }
.site-header { height:88px; max-width:1496px; margin:auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; }
.brand,.footer-brand { display:flex; align-items:center; gap:12px; font-weight:600; }
.brand-name { color:var(--ink); font-size:2.1rem; font-weight:800; line-height:1; letter-spacing:-.1em; position:relative; }
.brand-name::after { content:""; position:absolute; left:7%; right:2%; height:3px; bottom:-7px; background:var(--blue); border-radius:999px; transform:skewX(-26deg); }
.brand-name::first-letter { color:var(--blue); }
.brand-divider { width:1px; height:18px; background:#cfd7e6; }
.brand-copy { color:#536077; font-size:1rem; letter-spacing:.01em; white-space:nowrap; }
nav { display:flex; gap:38px; margin-left:auto; margin-right:42px; color:#4b5770; font-size:.98rem; }
nav a:hover,.text-link:hover,.legal-grid a:hover { color:var(--blue); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:17px 28px; border-radius:15px; background:var(--blue); color:#fff; font-weight:700; box-shadow:0 13px 24px rgba(20,107,255,.2); transition:transform .2s, box-shadow .2s; }
.button:hover { transform:translateY(-2px); box-shadow:0 17px 30px rgba(20,107,255,.28); }
.button-small { padding:11px 24px; border-radius:12px; box-shadow:none; }
.hero { min-height:720px; display:grid; grid-template-columns: .92fr 1.08fr; align-items:center; gap:24px; padding:70px 0 84px; overflow:hidden; }
.eyebrow { margin:0 0 13px; color:var(--blue); font-size:.78rem; letter-spacing:.14em; font-weight:800; }
h1,h2,h3,p { margin-top:0; }
h1 { max-width:620px; margin-bottom:26px; font-size:clamp(3.3rem,6vw,5.45rem); line-height:1.1; letter-spacing:-.07em; }
h1 span { color:var(--blue); display:block; }
.lede { max-width:510px; color:var(--muted); font-size:1.16rem; line-height:1.85; }
.hero-actions { display:flex; align-items:center; gap:30px; margin-top:34px; }
.text-link { color:var(--blue); font-weight:700; }
.hero-visual { height:655px; position:relative; display:flex; align-items:center; justify-content:center; isolation:isolate; }
.halo,.art-halo { position:absolute; border-radius:50%; background:#eaf2ff; z-index:-1; }
.halo-large { width:630px; height:630px; }
.hero-phone { overflow:hidden; border-radius:28px; background:#fff; box-shadow:0 28px 50px rgba(58,97,155,.18); border:6px solid #fff; position:absolute; }
.hero-phone img { display:block; width:100%; height:100%; object-fit:cover; }
.app-screen img { display:block; width:100%; height:100%; object-fit:contain; background:#f8fbff; }
.phone-main { width:290px; height:550px; z-index:2; transform:translateY(6px); }
.phone-back { width:215px; height:430px; opacity:.94; }
.phone-reader { transform:translate(-182px,26px) rotate(-7deg); }
.phone-words { transform:translate(185px,34px) rotate(7deg); }
.journey { position:relative; padding:118px 0 138px; }
.journey::before,.journey::after { content:""; position:absolute; border-radius:50%; background:#eaf2ff; z-index:-1; }
.journey::before { width:185px; height:185px; left:-235px; bottom:-65px; }
.journey::after { width:150px; height:150px; right:-205px; top:30px; }
.section-heading.centered { text-align:center; }
.section-heading h2 { font-size:clamp(2.35rem,3.7vw,3.65rem); line-height:1.2; letter-spacing:-.055em; margin-bottom:14px; }
.section-heading p:not(.eyebrow) { color:var(--muted); font-size:1.08rem; }
.journey-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:68px; list-style:none; padding:72px 0 0; margin:0; }
.journey-list li { display:grid; grid-template-columns:34px 74px minmax(0,1fr); gap:16px; align-items:center; position:relative; }
.journey-list li:not(:last-child)::after { content:"→"; position:absolute; right:-48px; top:24px; color:var(--blue); font-size:1.7rem; font-weight:500; }
.step-number { color:var(--blue); font-weight:800; font-size:1.04rem; }
.line-icon { display:grid; place-items:center; width:74px; height:74px; color:var(--blue); background:var(--pale); border-radius:50%; }
.line-icon svg { width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.journey h3 { margin:0 0 7px; font-size:1.5rem; line-height:1.25; }
.journey p { margin:0; color:var(--muted); font-size:.98rem; line-height:1.7; }
.feature { min-height:820px; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:4%; padding:78px 0; }
.feature-lookup,.feature-saves { grid-template-columns:1.1fr .9fr; }
.feature-copy h2 { font-size:clamp(2.4rem,3.8vw,4rem); line-height:1.14; letter-spacing:-.06em; margin-bottom:20px; }
.feature-copy h2 span { color:var(--blue); }
.feature-copy > p:not(.eyebrow) { color:var(--muted); max-width:520px; font-size:1.13rem; line-height:1.8; }
.check-list { list-style:none; padding:12px 0 0; margin:0; display:grid; gap:17px; }.check-list li { display:flex; align-items:center; gap:14px; font-weight:600; }.check-list li::before { content:"✓"; display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px; border-radius:50%; background:var(--blue); color:#fff; font-size:.85rem; }
.feature-art { position:relative; height:720px; display:grid; place-items:center; }.art-halo { width:600px; height:600px; }.app-screen { width:360px; height:640px; border:6px solid #fff; border-radius:28px; overflow:hidden; background:#f8fbff; box-shadow:0 26px 48px rgba(41,81,143,.17); position:relative; }
.feature-lookup .feature-art,.feature-saves .feature-art { order:2; }.feature-lookup .feature-copy,.feature-saves .feature-copy { order:1; }
.site-footer { padding-top:54px; border-top:1px solid var(--line); }
.footer-cta { position:relative; isolation:isolate; overflow:visible; text-align:center; padding:150px 20px 158px; }
.footer-cta::before,.footer-cta::after { content:""; position:absolute; border-radius:50%; background:#eaf2ff; z-index:-1; }
.footer-cta::before { width:74px; height:74px; left:8%; top:88px; }
.footer-cta::after { width:68px; height:68px; right:9%; bottom:126px; }
.footer-halo { position:absolute; width:min(930px,78vw); height:430px; left:50%; top:54px; transform:translateX(-50%); border-radius:50%; background:#edf5ff; z-index:-1; }
.footer-cta h2 { position:relative; font-size:clamp(2.8rem,5.1vw,5.1rem); line-height:1.12; letter-spacing:-.065em; margin-bottom:18px; }
.footer-cta > p { color:var(--muted); font-size:1.25rem; position:relative; }
.footer-cta .button { position:relative; margin-top:24px; min-width:220px; }
.footer-details { border-top:1px solid var(--line); padding:38px 0 46px; display:grid; grid-template-columns:.75fr 1.65fr; align-items:start; gap:35px; }.footer-brand .brand-copy { font-size:.95rem; }.legal-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 36px; }.legal-grid div { display:grid; gap:4px; }.legal-grid span { color:var(--muted); font-size:.75rem; }.legal-grid strong,.legal-grid a { font-size:.88rem; font-weight:600; }.legal-grid a { color:var(--blue); }
@media (max-width: 1100px) and (min-width: 881px) { :root{--shell:min(100% - 64px, 780px)} .journey-list{grid-template-columns:1fr;max-width:620px;margin-inline:auto;gap:18px}.journey-list li{grid-template-columns:40px 74px 1fr;padding:8px 0}.journey-list li:not(:last-child)::after{display:none}.journey h3{font-size:1.35rem}.journey p{font-size:1rem}.journey::before,.journey::after{display:none}.feature,.feature-lookup,.feature-saves{grid-template-columns:1fr;gap:20px;min-height:auto;padding:76px 0}.feature-art,.feature-lookup .feature-art,.feature-saves .feature-art{order:0;height:560px}.feature-copy,.feature-lookup .feature-copy,.feature-saves .feature-copy{order:1}.footer-details{grid-template-columns:1fr;gap:30px} }
@media (max-width: 880px) { :root{--shell:min(100% - 36px, 620px)} .site-header{height:74px;padding:0 18px}.brand-copy,.brand-divider{display:none}.brand-name{font-size:1.85rem} nav{gap:18px;margin:0 0 0 auto;font-size:.88rem}.button-small{padding:9px 14px;margin-left:18px}.hero{grid-template-columns:1fr;padding:55px 0 35px;gap:25px}.hero-copy{text-align:center}.hero-copy .lede{margin-inline:auto}.hero-actions{justify-content:center}.hero-visual{height:510px}.halo-large{width:460px;height:460px}.phone-main{width:235px;height:450px}.phone-back{width:175px;height:350px}.phone-reader{transform:translate(-145px,22px) rotate(-7deg)}.phone-words{transform:translate(144px,28px) rotate(7deg)}.bubble-star{transform:translate(-158px,-116px)}.bubble-grid{transform:translate(147px,-30px)}.journey{padding:75px 0}.journey::before,.journey::after{display:none}.journey-list{grid-template-columns:1fr;gap:16px;padding-top:42px}.journey-list li{padding:10px 0;grid-template-columns:34px 68px 1fr}.journey-list li:not(:last-child)::after{display:none}.line-icon{width:68px;height:68px}.feature,.feature-lookup,.feature-saves{grid-template-columns:1fr;gap:16px;min-height:auto;padding:68px 0}.feature-art,.feature-lookup .feature-art,.feature-saves .feature-art{order:0;height:490px}.feature-copy,.feature-lookup .feature-copy,.feature-saves .feature-copy{order:1}.app-screen{width:264px;height:470px}.art-halo{width:410px;height:410px}.footer-details{grid-template-columns:1fr;gap:28px}.legal-grid{grid-template-columns:1fr}.footer-cta{overflow:hidden;padding:120px 0 132px}.footer-halo{width:94vw;height:330px;top:60px}.footer-cta::before,.footer-cta::after{display:none} }
@media (max-width: 530px) { .site-header{padding-inline:14px}.site-header nav{gap:12px;font-size:.8rem}.button-small{font-size:.8rem;padding:9px 12px;margin-left:12px}.hero-actions{gap:20px}.button{padding:14px 20px}.hero-visual{transform:scale(.86);margin:-34px 0}.feature-copy h2{font-size:2.5rem}.feature-art{transform:scale(.93);margin:-18px 0}.footer-cta h2{font-size:2.8rem}.legal-grid{gap:14px} }

/* Download page */
.download-page { min-height:100vh; }
.download-main { border-top:1px solid var(--line); }
.download-hero { min-height:calc(100vh - 88px); display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:5%; padding:76px 0 92px; }
.download-copy h1 { max-width:760px; font-size:clamp(3.25rem,5.3vw,5.25rem); }
.download-copy .lede { max-width:660px; }
.platform-list { display:grid; gap:18px; max-width:760px; margin-top:38px; }
.platform-card { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:20px; min-height:136px; padding:24px 26px; border:1px solid #dfe8f6; border-radius:24px; background:#fff; box-shadow:0 18px 42px rgba(38,72,124,.08); }
.platform-card.is-coming { background:#f8faff; box-shadow:none; }
.platform-icon { width:64px; height:64px; display:grid; place-items:center; border-radius:20px; background:var(--pale); color:var(--blue); }
.platform-icon svg { width:38px; height:38px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.platform-ios .platform-icon { color:#778197; background:#eef1f6; }
.platform-ios .platform-icon svg { fill:currentColor; stroke:none; }
.platform-label { display:block; margin-bottom:4px; color:var(--blue); font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.platform-ios .platform-label { color:#778197; }
.platform-copy h2 { margin:0 0 5px; font-size:1.38rem; letter-spacing:-.02em; }
.platform-copy p { margin:0; color:var(--muted); font-size:.92rem; }
.platform-action { min-width:152px; padding:14px 20px; border-radius:13px; }
.button-disabled { display:inline-flex; align-items:center; justify-content:center; min-width:152px; padding:14px 20px; border-radius:13px; background:#e7ebf2; color:#8b94a7; font-weight:700; cursor:not-allowed; }
.download-note { max-width:760px; margin:22px 2px 0; color:var(--muted); font-size:.86rem; line-height:1.7; }
.download-note a { color:var(--blue); font-weight:600; }
.download-visual { position:relative; min-height:720px; display:grid; place-items:center; isolation:isolate; }
.download-halo { position:absolute; width:660px; height:660px; border-radius:50%; background:var(--pale); z-index:-1; }
.download-phone { width:350px; height:622px; overflow:hidden; border:7px solid #fff; border-radius:34px; background:#fff; box-shadow:0 34px 64px rgba(45,83,142,.2); }
.download-phone img { display:block; width:100%; height:100%; object-fit:contain; background:#f8fbff; }
.download-badge { position:absolute; padding:11px 17px; border:1.5px solid var(--blue); border-radius:999px; background:#fff; color:var(--blue); font-size:.9rem; font-weight:700; box-shadow:0 12px 26px rgba(45,93,168,.14); }
.badge-reading { transform:translate(-245px,-165px); }
.badge-review { transform:translate(230px,120px); }
.download-footer { border-top:1px solid var(--line); }
.download-footer .footer-details { border-top:0; }

@media (max-width: 1100px) { .download-hero{grid-template-columns:1fr;max-width:780px;padding-top:64px}.download-copy{text-align:center}.download-copy .lede,.platform-list,.download-note{margin-left:auto;margin-right:auto}.download-visual{min-height:690px}.download-footer .footer-details{grid-template-columns:1fr} }
@media (max-width: 700px) { .download-hero{width:min(100% - 36px,620px);padding:54px 0 64px}.download-copy h1{font-size:clamp(2.7rem,12vw,3.6rem)}.platform-card{grid-template-columns:54px 1fr;padding:20px;border-radius:20px}.platform-icon{width:54px;height:54px;border-radius:17px}.platform-icon svg{width:32px;height:32px}.platform-action,.button-disabled{grid-column:1 / -1;width:100%}.download-visual{min-height:540px;transform:scale(.9);margin:-22px 0}.download-halo{width:500px;height:500px}.download-phone{width:286px;height:509px}.badge-reading{transform:translate(-165px,-135px)}.badge-review{transform:translate(160px,105px)} }
@media (max-width: 530px) { .download-page .site-header nav{display:none}.download-page .site-header .button-small{margin-left:auto}.download-copy h1{font-size:2.8rem}.download-visual{transform:scale(.82);margin:-55px 0}.download-note{text-align:left}.platform-card{text-align:left} }