/* Presentation-only refinement. The Mini Program source remains untouched. */
:root { --ink:#13151a; --muted:#71757e; --surface:#f4f6f8; --spring:cubic-bezier(.18,.85,.24,1.12); }
.container { width:min(1160px,calc(100% - 80px)); }
.site-header { top:12px; width:min(1160px,calc(100% - 32px)); margin:12px auto 0; background:rgba(255,255,255,.82); border:1px solid rgba(214,219,227,.72); border-radius:20px; box-shadow:0 12px 38px rgba(31,45,68,.08); backdrop-filter:blur(24px) saturate(1.35); -webkit-backdrop-filter:blur(24px) saturate(1.35); }
.site-header .nav { width:100%; max-width:none; height:58px; padding:0 10px 0 14px; }
.site-header .brand { font-size:18px; letter-spacing:-.35px; }
.site-header .nav-links { gap:3px; margin-right:5px; padding:4px; border-radius:999px; background:rgba(240,243,247,.82); }
.site-header .nav-links a { padding:7px 13px; border-radius:999px; transition:color .25s,background .25s; }
.site-header .nav-links a:hover { background:#fff; color:#172033; box-shadow:0 3px 10px rgba(25,39,62,.07); }
.site-header .nav-cta { min-height:38px; padding-inline:17px; }
.hero { min-height:920px; grid-template-columns:1.08fr .92fr; padding-block:18px 30px; gap:32px; }
.hero-copy { animation:none; }
.hero-eyebrow { color:#676e7a; margin-bottom:25px; animation:soft-rise .8s var(--ease) .08s both; }
.hero h1 { font-size:clamp(43px,4.65vw,64px); font-weight:650; letter-spacing:-2.3px; line-height:1.25; }
.title-line { display:block; overflow:hidden; padding-block:3px; }
.hero h1 .title-line > span { display:block; color:#151820; animation:title-reveal 1.05s var(--ease) .15s both; }
.hero h1 .title-line:nth-child(2) > span { color:#5e6c84; animation-delay:.3s; }
.hero-description { font-size:17px; color:#747b87; line-height:1.85; max-width:450px; animation:soft-rise .85s var(--ease) .42s both; }
.hero-actions { margin-top:32px; animation:soft-rise .9s var(--ease) .55s both; }
.hero-note { font-size:12px; color:#868c96; animation:soft-rise .9s var(--ease) .65s both; }
.hero-visual { animation:device-lift 1.5s var(--ease) .18s both; perspective:1400px; }
.phone-aura { inset:8% 0 0; filter:blur(24px); background:radial-gradient(ellipse at 50% 56%,#d2dcebaa,transparent 68%); opacity:.7; }
.phone {
  width:326px; height:auto; aspect-ratio:850 / 1851; padding:0;
  border:0; border-radius:0; background:transparent; box-shadow:none;
  filter:drop-shadow(15px 25px 24px rgba(23,35,56,.18)) drop-shadow(2px 5px 5px rgba(23,35,56,.12));
  container-type:inline-size;
}
.phone:after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:url('/assets/phone-frame-real.png') center/100% 100% no-repeat; }
.phone-screen { position:absolute; inset:5.85% 8.45% 5.5%; z-index:1; width:auto; height:auto; overflow:hidden; border:0; border-radius:10.4cqw; background:#f5f7fb; }
.hero-phone:after { inset:0; border:.82cqw solid #15161a; border-radius:13cqw; background:transparent; box-shadow:inset 0 0 0 .24cqw rgba(255,255,255,.68),inset 0 0 0 .52cqw #777b82; }
.hero-phone .phone-screen-real { inset:1.65%; border-radius:11.7cqw; background:#f5f7fb; }
.phone-screen-real img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; }
.real-ios-statusbar { position:absolute; inset:0 0 auto; z-index:2; height:9.35cqw; color:#07080a; background:#f9fafe; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; font-variant-numeric:tabular-nums; pointer-events:none; }
.real-ios-time { position:absolute; left:7.1cqw; top:5.1cqw; transform:translateY(-50%); font-size:3.75cqw; font-weight:650; line-height:1; letter-spacing:-.12cqw; }
.real-ios-island { position:absolute; left:50%; top:1.45cqw; width:30.5cqw; height:7.2cqw; transform:translateX(-50%); border-radius:99px; background:#050506; box-shadow:inset 0 0 0 .18cqw #17181a,0 .25cqw .6cqw #0000000d; }
.real-ios-island i { position:absolute; right:3.25cqw; top:50%; width:2.1cqw; height:2.1cqw; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle at 38% 32%,#273d5f 0 12%,#111b2c 30%,#06080d 68%); box-shadow:0 0 0 .45cqw #0a0b0e; opacity:.9; }
.real-ios-icons { position:absolute; right:5.5cqw; top:5.1cqw; display:flex; align-items:center; gap:1.45cqw; transform:translateY(-50%); }
.real-ios-icons svg { display:block; overflow:visible; fill:currentColor; flex:none; }
.real-ios-cellular { width:4.5cqw; height:3cqw; }
.real-ios-wifi { width:4.5cqw; height:3.25cqw; }
.real-ios-battery { width:6.5cqw; height:3.25cqw; }
.real-ios-battery .battery-shell { fill:none; stroke:currentColor; stroke-width:1.2; opacity:.9; }
.real-ios-battery .battery-cap,.real-ios-battery .battery-fill { fill:currentColor; }
.phone-chrome { position:absolute; top:calc(5.85% + 2.5cqw); left:8.45%; right:8.45%; height:7.2cqw; z-index:2; pointer-events:none; color:#08090b; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; font-variant-numeric:tabular-nums; }
.ios-time { position:absolute; left:7.1cqw; top:50%; transform:translateY(-50%); font-size:3.7cqw; font-weight:650; line-height:1; letter-spacing:-.12cqw; }
.ios-island { position:absolute; left:50%; top:0; width:30.5cqw; height:7.2cqw; transform:translateX(-50%); border-radius:99px; background:#050506; box-shadow:inset 0 0 0 .18cqw #17181a,0 .25cqw .6cqw #0000000d; }
.ios-island i { position:absolute; right:3.25cqw; top:50%; width:2.1cqw; height:2.1cqw; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle at 38% 32%,#273d5f 0 12%,#111b2c 30%,#06080d 68%); box-shadow:0 0 0 .45cqw #0a0b0e; opacity:.9; }
.ios-status { position:absolute; right:5.5cqw; top:50%; display:flex; align-items:center; gap:1.45cqw; transform:translateY(-50%); }
.ios-status svg { display:block; overflow:visible; fill:currentColor; flex:none; }
.ios-cellular { width:4.5cqw; height:3cqw; }
.ios-wifi { width:4.5cqw; height:3.25cqw; }
.ios-battery { width:6.5cqw; height:3.25cqw; }
.ios-battery .battery-shell { fill:none; stroke:currentColor; stroke-width:1.2; opacity:.9; }
.ios-battery .battery-cap,.ios-battery .battery-fill { fill:currentColor; }
.wechat-capsule { position:absolute; top:calc(5.85% + 10.4cqw); right:calc(8.45% + 3.2cqw); z-index:2; display:flex; align-items:center; justify-content:center; width:25.6cqw; height:8.7cqw; border:.28cqw solid rgba(17,24,39,.13); border-radius:99px; background:rgba(255,255,255,.93); box-shadow:0 .35cqw 1.1cqw rgba(17,24,39,.06),inset 0 .2cqw 0 rgba(255,255,255,.95); pointer-events:none; backdrop-filter:blur(12px); }
.capsule-more { display:flex; align-items:center; justify-content:center; gap:1.15cqw; width:11.7cqw; }
.capsule-more i { display:block; width:1.35cqw; height:1.35cqw; border-radius:50%; background:#08090b; }
.capsule-divider { width:.24cqw; height:4.7cqw; background:rgba(17,24,39,.1); }
.capsule-close { position:relative; display:flex; align-items:center; justify-content:center; width:11.7cqw; }
.capsule-close:before { content:""; width:4.9cqw; height:4.9cqw; border:.55cqw solid #08090b; border-radius:50%; }
.capsule-close i { position:absolute; width:1.55cqw; height:1.55cqw; border-radius:50%; background:#08090b; }
.hero-phone { width:410px; height:auto; transform:rotate(-1.2deg); transition:transform .75s var(--ease); }
.hero-phone:hover { transform:rotate(-.35deg) translateY(-4px); }
.screen-note { font-size:12px; margin-top:21px; color:#9299a4; }
.hero-bottom { bottom:19px; font-size:12px; color:#8a929f; }
.button { transition:transform .45s var(--spring),box-shadow .3s,background .3s; }
.button:hover { transform:translateY(-2px) scale(1.025); }
.button:active { transform:scale(.96); }
.primary { background:#116ce4; box-shadow:0 5px 16px #2168c31a,inset 0 1px 0 #ffffff22; }
.primary:hover { background:#1b76eb; box-shadow:0 9px 24px #2168c32a; }
.features { background:linear-gradient(180deg,#f2f4f7,#f7f8fa); padding-block:58px 26px; border-color:#e4e8ee; }
.features-heading { align-items:center; }
.features h2 { font-size:36px; letter-spacing:-1.4px; }
.features h2 span { color:#818c9c; }
.feature-tabs { position:relative; padding:5px; background:#e4e8ee; margin-top:30px; }
.feature-tabs button { position:relative; min-height:45px; z-index:1; color:#717b8b; font-size:14px; }
.feature-tabs button[aria-selected=true] { background:#fff; color:#182235; box-shadow:0 3px 12px #30466312; }
.feature-tabs button:active { transform:scale(.97); }
.feature-tabs button[aria-selected=true] .tab-number { color:#3673c3; }
.tab-number { font-size:12px; }
.feature-stage { padding:33px 74px 15px; gap:78px; min-height:745px; }
.demo-phone { width:340px; height:auto; border-radius:0; box-shadow:none; }
.demo-phone .phone-screen { border-radius:10.4cqw; }
.feature-visual { perspective:1400px; }
.feature-screen { transform:translateX(26px) scale(.97); transition:opacity .4s,transform .7s var(--ease),visibility .4s; }
.feature-screen.is-active { transform:translateX(0) scale(1); }
.phone.screen-switch { animation:screen-settle .65s var(--ease); }
.feature-kicker { font-size:13px; margin-bottom:18px; }
.feature-copy h3 { font-size:40px; letter-spacing:-1.6px; }
.feature-description { color:#747e8d; font-size:16px; margin-top:21px; }
.feature-points { color:#4d5b70; font-size:14px; }
.feature-points span:before { border-color:#7b90ae; }
.feature-pagination { border-color:#dce2eb; margin-top:28px; padding-top:20px; }
.circle-button { width:38px; height:38px; background:#e2e7ef; transition:transform .45s var(--spring),background .2s; }
.circle-button:hover { transform:scale(1.1); background:#d8e0eb; }
.circle-button:active { transform:scale(.9); }
.demo-caption { font-size:12px; color:#9299a4; }
.start { padding-block:56px 50px; }
.start h2 { font-size:34px; }
.qr-card { border-color:#e4e8ef; box-shadow:0 12px 30px -17px #33496b25; }
.qr-card span { font-size:12px; }
.footer { min-height:72px; }
.qr-dialog { border:1px solid #e3e8f0; padding-top:38px; border-radius:30px; box-shadow:0 30px 100px #0d203e2e; }
.qr-dialog[open] { animation:dialog-pop .65s var(--ease) both; }
.qr-dialog::backdrop { background:#17263e4d; backdrop-filter:blur(10px); animation:veil-in .4s ease both; }
.qr-dialog.is-closing { animation:dialog-out .22s ease both; }
.qr-dialog.is-closing::backdrop { animation:veil-out .22s ease both; }
.qr-dialog .dialog-close { width:32px; height:32px; }
.js-motion .reveal { transform:translateY(32px); transition:opacity .85s var(--ease),transform 1s var(--ease); }
.js-motion .reveal.feature-visual { transform:translateY(60px) scale(.94); }
.js-motion .reveal.is-visible { opacity:1; transform:none; }
.js-motion .feature-visual.is-visible .demo-phone { animation:feature-pop 1.1s var(--ease) both; }
.js-motion .feature-visual.is-visible .demo-phone.screen-switch { animation:screen-settle .65s var(--ease); }
.copy-enter { animation:detail-rise .55s var(--ease) both; }
@keyframes title-reveal { from {opacity:0;transform:translateY(115%)} to {opacity:1;transform:translateY(0)} }
@keyframes soft-rise { from {opacity:0;transform:translateY(19px)} to {opacity:1;transform:translateY(0)} }
@keyframes device-lift { 0%{opacity:0;transform:translateY(90px) scale(.87) rotate(3deg)} 63%{opacity:1;transform:translateY(-7px) scale(1.012) rotate(-.4deg)} 82%{transform:translateY(3px) scale(.997)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes feature-pop { 0%{transform:translateY(30px) scale(.96)} 65%{transform:translateY(-5px) scale(1.007)} 100%{transform:none} }
@keyframes screen-settle { 0%{transform:scale(1)} 28%{transform:scale(.981)} 72%{transform:scale(1.006)} 100%{transform:scale(1)} }
@keyframes detail-rise { 0%{opacity:0;transform:translateY(15px)} 100%{opacity:1;transform:none} }
@keyframes dialog-pop { 0%{opacity:0;transform:translateY(35px) scale(.87)} 65%{opacity:1;transform:translateY(-3px) scale(1.018)} 100%{opacity:1;transform:none} }
@keyframes dialog-out { to{opacity:0;transform:translateY(12px) scale(.95)} }
@keyframes veil-in { from{opacity:0} to{opacity:1} }
@keyframes veil-out { to{opacity:0} }
@media(min-width:1440px) { .hero h1{font-size:66px} .hero-phone{width:425px;height:auto} }
@media(max-width:1050px) {
  .container{width:calc(100% - 56px)} .hero{gap:25px}
  .hero h1{font-size:clamp(39px,4.8vw,52px);letter-spacing:-1.8px} .hero-description{font-size:16px}
  .hero{min-height:860px}.hero-phone{width:380px;height:auto} .hero-phone .phone-screen{border-radius:10.4cqw}
  .feature-stage{padding-inline:25px;gap:45px} .feature-copy h3{font-size:35px}
  .features h2{font-size:30px} .demo-phone{width:325px;height:auto}
}
@media(max-width:760px) {
  .site-header{top:8px;width:calc(100% - 20px);margin-top:8px;border-radius:18px}.site-header .nav{height:54px;padding:0 8px 0 11px}.site-header .nav-links{padding:3px;background:transparent}.site-header .nav-links a{padding:6px 9px}.site-header .nav-cta{min-height:36px;padding-inline:13px}
  .container{width:calc(100% - 40px)} .hero{gap:24px;padding-block:39px 33px;min-height:0}
  .hero h1{font-size:clamp(35px,8.2vw,52px);line-height:1.23;letter-spacing:-1.4px}
  .hero-eyebrow{font-size:14px;margin-bottom:15px} .hero-description{font-size:15px;margin-top:17px}
  .hero-actions{margin-top:23px;gap:22px} .hero-note{font-size:12px}
  .hero-phone{width:min(370px,calc(100vw - 24px));height:auto;transform:rotate(-.8deg)}
  .hero-phone .phone-screen{border-radius:10.4cqw} .hero-visual{padding-top:10px}
  .screen-note{font-size:12px;margin-top:19px}
  .features{padding-block:38px 22px} .features-heading .eyebrow{font-size:13px}
  .features h2{font-size:28px} .feature-tabs{margin-top:22px;padding:4px;gap:2px}
  .feature-tabs button{min-height:41px;font-size:12px;gap:5px;padding-inline:7px}
  .tab-number{font-size:11px} .feature-stage{padding:23px 0 0;gap:22px;min-height:0}
  .feature-copy{min-height:215px} .feature-copy h3{font-size:27px}
  .feature-description{font-size:14px;line-height:1.85;margin-top:13px;max-width:360px}
  .feature-points{font-size:12px;gap:11px;margin-top:17px}
  .feature-pagination{margin-top:17px;padding-top:11px}.feature-pagination .circle-button{width:33px;height:33px}
  .demo-phone{width:min(316px,calc(100vw - 24px));height:auto}.demo-phone .phone-screen{border-radius:10.4cqw}
  .demo-caption{font-size:12px;max-width:330px;line-height:1.8;margin-top:19px}
  .start{padding:38px 0 31px;gap:18px}.start h2{font-size:25px}.start p{font-size:13px}
  .qr-card span{font-size:10px}.footer{font-size:12px}.footer a{font-size:12px;flex-wrap:wrap;margin-left:0}
  .nav-links{font-size:13px}.nav-cta{font-size:13px}.hero-actions .button{font-size:15px}
}
@media(max-width:360px) { .container{width:calc(100% - 28px)} .hero h1{font-size:33px} .feature-tabs button{font-size:12px;padding-inline:6px}.feature-points{gap:7px;font-size:11px}.tab-number{display:none}.start h2{font-size:22px} }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after{animation:none!important;transition:none!important} .js-motion .reveal,.js-motion .reveal.feature-visual{transform:none;opacity:1} }