:root{--ink:#182235;--body:#4a5568;--muted:#606c80;--faint:#9aa3b2;--blue:#315de8;--blue-dark:#2144b8;--line:#e3e7ef;--paper:#f6f8fb;--ok:#2f7d46;--e:cubic-bezier(.2,.7,.2,1);--display:"Songti SC","Noto Serif SC","STSong",serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 "PingFang SC","Noto Sans SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.skip{position:fixed;top:-60px;left:12px;background:#fff;padding:8px 12px;z-index:20}.skip:focus{top:8px}
.btn{min-height:44px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;text-decoration:none;font-weight:500;transition:background .2s,transform .2s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--blue);color:#fff}.btn.primary:hover{background:var(--blue-dark)}
.btn.light{background:#fff;color:var(--ink);font-weight:700}
.btn.big{min-height:56px;padding:0 36px;font-size:18px;border-radius:12px}

.nav{position:sticky;top:0;z-index:10;height:72px;padding:0 max(16px,calc((100% - 1248px)/2));display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{font:700 24px var(--display);text-decoration:none}
.nav nav{display:flex;gap:32px;align-items:center;font-size:15px}
.nav nav a:not(.btn){color:var(--body);text-decoration:none}.nav nav a:not(.btn):hover{color:var(--blue)}

main>section{padding-left:max(16px,calc((100% - 1248px)/2));padding-right:max(16px,calc((100% - 1248px)/2))}
.hero{min-height:720px;display:flex;align-items:center;justify-content:space-between;gap:56px;padding-top:40px;padding-bottom:40px}
.copy{max-width:500px;display:flex;flex-direction:column;gap:28px}
.copy h1{font:700 clamp(44px,5.4vw,68px)/1.2 var(--display);letter-spacing:-1px;animation:rise .85s var(--e) both}
.copy p{font-size:19px;color:var(--body);animation:rise .7s .15s var(--e) both}
.actions{display:flex;gap:20px;align-items:center;animation:rise .7s .25s var(--e) both}
.more{text-decoration:underline;text-underline-offset:4px}

.stage{position:relative;width:min(700px,100%);flex-shrink:0;padding:28px 12px 64px;isolation:isolate}
.stage:before{content:"";position:absolute;inset:-40px -36px -24px -36px;background-image:radial-gradient(#b7c6e2 1px,transparent 1px);background-size:18px 18px;opacity:.55;-webkit-mask-image:radial-gradient(ellipse,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse,#000 20%,transparent 70%);z-index:-2;pointer-events:none}
.stage:after{content:"";position:absolute;inset:48px 16px 78px 20px;border:1px solid #d3dcf0;border-radius:22px;background:#f1f4fd;transform:rotate(4deg);z-index:-1;pointer-events:none}
.card{padding:10px;border-radius:20px;background:#fff;border:1px solid #d4def1;box-shadow:0 24px 60px -26px rgba(52,75,128,.4);transform:rotate(-2deg);transform-origin:50% 65%;transition:transform .65s var(--e),box-shadow .65s}
.stage:hover .card{transform:none;box-shadow:0 30px 70px -28px rgba(52,75,128,.45)}
.window{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.window-top{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.window-top strong{display:block;font-size:16px}.window-top small{font-size:12px;color:var(--muted)}
.langs{display:flex;gap:12px}
.lang{min-height:32px;padding:0 2px;border:0;background:none;font:inherit;font-size:13px;color:#778195;cursor:pointer;box-shadow:inset 0 -2px 0 transparent;transition:color .3s,box-shadow .3s}
.lang.on{color:var(--blue);font-weight:700;box-shadow:inset 0 -2px 0 var(--blue)}
.convs{display:grid;min-height:372px;padding:24px 22px 18px}
.conv{grid-area:1/1;display:flex;flex-direction:column;gap:8px;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.conv.on{opacity:1;visibility:visible;transition:opacity .35s}
.who{font-size:12px;letter-spacing:1px;color:#778195}
.bubble{max-width:88%;padding:14px 18px}
.bubble p{font-size:17px;line-height:1.7}
.bubble.in{align-self:flex-start;border-radius:4px 16px 16px 16px;background:#f5f7fb;box-shadow:0 1px 0 #e3e8f2}
.bubble.out{align-self:flex-end;margin-top:16px;border-radius:16px 4px 16px 16px;background:#edf2ff}
.tr{margin-top:10px;padding-top:9px;border-top:1px solid #dce4f4;display:flex;flex-direction:column;gap:2px}
.bubble.out .tr{border-color:#d6e0fb}
.tr small{font-size:11px;letter-spacing:1px;color:#697b9c}.tr span{font-size:16px;color:#3b4b68}
.sent{align-self:flex-end;display:flex;gap:6px;align-items:center;font-size:13px;color:var(--blue)}
.sent svg{width:14px;height:14px;stroke-width:3}
.window-foot{padding:12px 22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.slip{position:absolute;z-index:3;opacity:0;pointer-events:none;background:#fff;border:1px solid #e3e7f1;box-shadow:0 10px 28px -12px rgba(39,62,130,.45)}
.sin{top:-12px;right:0;padding:10px 18px;border-radius:8px}
.sin div{display:flex;gap:12px;align-items:center}
.sin em{font:italic 22px Georgia,serif;color:#293c66}.sin b{font-weight:400;color:#879ab9}.sin strong{font-size:19px;color:var(--blue)}
.sin small{display:block;margin-top:4px;padding-top:4px;border-top:1px solid #edf0f6;font-size:11px;letter-spacing:1px;color:#8190a9}
.sout{bottom:44px;left:-36px;padding:12px 18px;border-radius:10px;background:#fff4eb;border-color:#f0daca;display:flex;gap:12px;align-items:center}
.sout strong{display:block;font-size:15px}.sout small{font-size:12px;color:#8a6a55}
.tick{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center}.tick svg{width:15px;height:15px;stroke-width:3}
.track{position:absolute;left:24px;right:24px;bottom:6px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px;letter-spacing:1px;color:var(--faint)}
.track i{width:32px;height:1px;background:#cdd6e5}
.stage.play .conv.on .m1{animation:msg .5s .35s var(--e) both}
.stage.play .conv.on .t1{animation:tr .45s 1s ease-out both}
.stage.play .conv.on .m2{animation:msg .5s 1.65s var(--e) both}
.stage.play .conv.on .t2{animation:tr .5s 2.3s ease-out both}
.stage.play .conv.on .dl{animation:msg .4s 2.95s ease-out both}
.stage.play .sin.on{animation:slipin .9s .15s var(--e) both}
.stage.play .sout.on{animation:slipout .7s 3s var(--e) both}
.stage.play .track span:nth-of-type(1){animation:lit .4s .35s both}
.stage.play .track span:nth-of-type(2){animation:lit .4s 1s both}
.stage.play .track span:nth-of-type(3){animation:lit .4s 1.65s both}
.stage.play .track span:nth-of-type(4){animation:lit .4s 2.95s both}
@keyframes rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes msg{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}
@keyframes tr{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes slipin{from{opacity:0;transform:translateY(12px) rotate(0)}to{opacity:1;transform:rotate(7deg)}}
@keyframes slipout{from{opacity:0;transform:translateY(8px) rotate(0)}to{opacity:1;transform:rotate(3deg)}}
@keyframes lit{from{color:var(--faint)}to{color:var(--blue)}}

.band{padding-top:72px;padding-bottom:72px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:36px;text-align:center}
h2{font:700 clamp(28px,3vw,38px)/1.35 var(--display)}
.band h2{font-size:clamp(26px,2.6vw,34px)}
.flow{display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:center}
.app{width:200px;height:88px;border-radius:16px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:19px;font-weight:700}
.app.soon{border-style:dashed;border-color:#cfd5df;color:var(--muted)}.app small{font-size:13px;font-weight:400;color:var(--faint)}
.app.group{width:220px;background:var(--ink);border-color:var(--ink);color:#fff}
.arrow{width:64px;height:24px;stroke:var(--faint);stroke-width:2}
.band p{color:var(--muted)}
.points{padding-top:96px;padding-bottom:96px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.points article{padding:36px;border-radius:20px;background:#fff;border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.points span{font-size:14px;font-weight:700;color:var(--blue)}.points h3{font-size:24px;line-height:1.4}.points p{color:var(--body);line-height:1.75}
.how{padding-top:88px;padding-bottom:88px;background:#fff;display:flex;flex-direction:column;gap:48px}
.how h2{text-align:center}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.how b{display:block;font:48px var(--display);color:var(--blue)}.how h3{font-size:22px;margin:8px 0}.how p{color:var(--body)}
.trust{padding-top:80px;padding-bottom:80px;display:flex;flex-direction:column;gap:40px}
.trust-head{display:flex;align-items:center;gap:18px}
.shield{width:52px;height:52px;border-radius:14px;background:#e8eefc;color:var(--blue);display:grid;place-items:center}.shield svg{width:26px;height:26px;stroke-width:2}
.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.trust h3{font-size:19px;margin-bottom:8px}.trust p{color:var(--body)}
.faq{padding-top:88px;padding-bottom:88px;display:grid;grid-template-columns:320px 1fr;gap:96px}
.faq details{padding:22px 0;border-bottom:1px solid var(--line)}
.faq summary{font-size:19px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-weight:400;color:var(--muted)}.faq details[open] summary:after{content:"−"}
.faq details p{margin-top:10px;color:var(--body)}
.cta{margin:0 max(16px,calc((100% - 1248px)/2));padding:64px 72px!important;border-radius:28px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta p{color:#c3cad6;margin-top:10px}
.foot{padding:48px max(16px,calc((100% - 1248px)/2));display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.foot nav{display:flex;gap:28px}

@media (max-width:1100px){
 .hero{flex-direction:column;align-items:stretch;min-height:0;padding-top:48px}
 .stage{align-self:center}
 .sout{left:0}
}
@media (max-width:760px){
 .nav nav a:not(.btn){display:none}
 .points,.how ol,.trust-grid{grid-template-columns:1fr}
 .faq{grid-template-columns:1fr;gap:24px}
 .cta{padding:40px 24px!important}
 .convs{min-height:420px}
 .track{gap:6px;font-size:11px}.track i{width:12px}
 .flow .arrow{transform:rotate(90deg)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

.pricing{padding-top:88px;padding-bottom:88px;background:#fff;display:flex;flex-direction:column;gap:48px}
.pricing-head{display:flex;flex-direction:column;align-items:center;gap:12px}.pricing-head p{color:var(--muted);font-size:17px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.plan{padding:36px;border-radius:20px;border:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.plan.featured{border:2px solid var(--blue)}
.plan .badge{align-self:flex-start;padding:4px 12px;border-radius:999px;background:var(--blue);color:#fff;font-size:13px;font-weight:700}
.plans:has(.badge) .plan:not(.featured) h3{margin-top:30px}
.plan h3{font-size:22px}
.price{display:flex;align-items:baseline;gap:6px}.price strong{font:700 44px var(--display)}.price span{color:var(--muted)}
.plan .desc{color:var(--muted);font-size:15px}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.plan li{display:flex;gap:10px;align-items:flex-start;color:var(--body)}
.plan li .soon{color:var(--muted)}
.plan li svg{width:16px;height:16px;flex-shrink:0;margin-top:5px;stroke:var(--blue);stroke-width:3}
.btn.line{border:1px solid #cfd5df;color:var(--ink)}.btn.line:hover{border-color:var(--ink)}
@media (max-width:900px){.plans{grid-template-columns:1fr}.plans:has(.badge) .plan:not(.featured) h3{margin-top:0}}
main{overflow-x:clip}
[hidden]{display:none!important}