:root {
  --paper:#f3f8ff;
  --white:#fff;
  --ink:#222e32;
  --muted:#566775;
  --blue:#285ce6;
  --blue-dark:#1947c5;
  --blue-pale:#e7efff;
  --card-heading:#244b8d;
  --card-copy:#486180;
  --card-blue:linear-gradient(140deg,#edf4ff 0%,#e1edff 100%);
  --card-sky:linear-gradient(145deg,#edf8ff 0%,#deeffb 100%);
  --card-mist:linear-gradient(125deg,#edf3fc 0%,#e0eaf8 100%);
  --line:#dbe5ef;
  --radius:28px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; background:var(--paper); }
body { margin:0; color:var(--ink); background:
    radial-gradient(ellipse 850px 620px at 88% 220px, #d8e9ff 0%, rgba(223,238,255,.72) 46%, transparent 77%),
    radial-gradient(ellipse 700px 480px at 3% 580px, #e0f1fc 0%, rgba(232,246,255,.55) 45%, transparent 76%),
    linear-gradient(180deg, #f8fbff 0%, #f1f7ff 25%, #f7fbff 64%, #edf5ff 100%);
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing:antialiased; }
::selection { background:#c8d9ff; color:#163d99; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
figure,h1,h2,h3,p { margin:0; }
h1,h2,h3 { text-wrap:balance; }
p { text-wrap:pretty; }
a,summary,label { -webkit-tap-highlight-color:transparent; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:6px; }
a { text-underline-offset:6px; }
.container { width:min(1200px,calc(100% - 80px)); margin-inline:auto; }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:12px 18px; background:var(--blue); color:white; clip-path:inset(100%); }
.skip-link:focus { clip-path:none; }
.site-header { position:relative; z-index:20; }
.nav { height:100px; display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; gap:12px; flex-shrink:0; }
.brand img { border-radius:13px; }
.brand span { font-size:24px; font-weight:700; letter-spacing:.025em; }
.nav-links { display:flex; align-items:center; gap:35px; font-size:14px; font-weight:500; }
.nav-links a:not(.nav-download):hover { color:var(--blue); }
.nav-download { display:flex; gap:14px; align-items:center; padding:13px 22px; border:1px solid var(--ink); border-radius:999px; transition:background .2s,color .2s; }
.nav-download:hover { background:#e0ecff; }
.mobile-nav { display:none; }
.hero { display:grid; grid-template-columns:1.08fr 1fr; gap:45px; align-items:center; padding-block:35px 80px; }
.hero-copy { padding-bottom:35px; }
h1 { font-size:clamp(46px,4.55vw,66px); line-height:1.3; font-weight:700; letter-spacing:-.035em; }
h1 span { color:var(--blue); }
.hero-copy > p { margin-top:28px; font-size:16px; line-height:1.95; color:var(--muted); }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:25px; margin-top:36px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:21px; min-height:56px; padding:16px 25px; border-radius:999px; font-size:15px; font-weight:600; white-space:nowrap; transition:background .2s,transform .2s; cursor:pointer; }
.button:hover { transform:translateY(-2px); }
.button-blue { background:var(--blue); color:var(--white); }
.button-blue:hover { background:var(--blue-dark); }
.text-link { display:inline-flex; align-items:center; gap:16px; font-size:14px; font-weight:600; border-bottom:1px solid currentColor; padding-block:5px; }
.text-link:hover { color:var(--blue); }
.hero-preview { position:relative; min-width:0; }
.preview-radio { position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.preview-stage { position:relative; isolation:isolate; min-height:540px; border-radius:var(--radius); background:radial-gradient(ellipse at 12% 10%, rgba(255,255,255,.9), transparent 67%), linear-gradient(135deg,#e7f0ff,#dceaff); display:grid; grid-template-columns:1fr 238px; align-items:center; gap:8px; padding:26px 25px 26px 30px; transition:background .4s; }
.preview-aside { display:flex; align-items:flex-start; flex-direction:column; padding-top:10px; }
.preview-logo { border-radius:25px; width:92px; height:92px; transform:rotate(-8deg); margin-bottom:30px; }
.preview-aside p { font-size:25px; font-weight:600; line-height:1.6; letter-spacing:-.025em; color:#21499a; }
.preview-aside > span { margin-top:28px; font-size:12px; color:#48618c; }
.preview-screen { display:none; width:238px; height:492px; overflow:hidden; padding:6px; background:white; border-radius:30px; box-shadow:0 16px 32px rgba(40,69,114,.13); }
.preview-screen img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:24px; }
#preview-friends:checked ~ .preview-stage .screen-friends,
#preview-life:checked ~ .preview-stage .screen-life,
#preview-video:checked ~ .preview-stage .screen-video { display:block; animation:screen-enter .35s ease-out; }
#preview-life:checked ~ .preview-stage { background:radial-gradient(ellipse at 12% 10%,rgba(255,255,255,.85),transparent 65%),linear-gradient(135deg,#eaf5ff,#dcecff); }
#preview-video:checked ~ .preview-stage { background:radial-gradient(ellipse at 12% 10%,rgba(255,255,255,.85),transparent 65%),linear-gradient(135deg,#edf3fc,#dfe9f8); }
#preview-life:checked ~ .preview-stage .preview-aside p { color:var(--card-heading); }
#preview-life:checked ~ .preview-stage .preview-aside > span { color:var(--card-copy); }
#preview-video:checked ~ .preview-stage .preview-aside p { color:var(--card-heading); }
#preview-video:checked ~ .preview-stage .preview-aside > span { color:var(--card-copy); }
.preview-options { display:flex; justify-content:center; gap:5px; padding:9px; width:max-content; max-width:100%; margin:20px auto 0; border-radius:999px; background:#e4edf9; }
.preview-options label { display:flex; align-items:center; justify-content:center; min-height:40px; padding:7px 19px; border-radius:999px; color:#506477; font-size:13px; cursor:pointer; transition:background .2s,color .2s; }
.preview-options label:hover { color:var(--ink); background:#d7e5f8; }
#preview-friends:checked ~ .preview-options label[for="preview-friends"],
#preview-life:checked ~ .preview-options label[for="preview-life"],
#preview-video:checked ~ .preview-options label[for="preview-video"] { background:white; color:var(--blue); }
#preview-friends:focus-visible ~ .preview-options label[for="preview-friends"],
#preview-life:focus-visible ~ .preview-options label[for="preview-life"],
#preview-video:focus-visible ~ .preview-options label[for="preview-video"] { outline:3px solid var(--blue); outline-offset:2px; }
@keyframes screen-enter { from { opacity:.6; clip-path:inset(0 0 4% 0 round 24px); } to { opacity:1; clip-path:inset(0 round 24px); } }
.experience-section { background:
    radial-gradient(ellipse 780px 520px at 0% 0%,rgba(220,237,255,.65),transparent 74%),
    radial-gradient(ellipse 700px 550px at 100% 100%,rgba(225,241,255,.55),transparent 74%),
    linear-gradient(180deg,#fff 0%,#f9fcff 100%); padding-block:95px 100px; }
.section-intro { max-width:650px; margin:0 auto 60px; text-align:center; }
h2 { font-size:clamp(34px,3.4vw,48px); line-height:1.4; font-weight:600; letter-spacing:-.03em; }
.section-intro p { margin-top:22px; color:var(--muted); line-height:1.9; font-size:16px; }
.feature-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:24px; }
.feature { position:relative; min-width:0; border-radius:var(--radius); overflow:hidden; }
.feature h3 { font-size:34px; line-height:1.45; letter-spacing:-.025em; font-weight:600; }
.feature p { font-size:14px; line-height:1.9; margin-top:18px; }
.feature-life { min-height:560px; background:var(--card-blue); color:var(--card-heading); }
.feature-life .feature-copy { position:relative; z-index:1; padding:42px 0 0 40px; max-width:330px; }
.feature-life .feature-copy p { color:var(--card-copy); }
.feature-life .feature-phone { position:absolute; width:232px; height:500px; right:30px; top:155px; transform:rotate(7deg); box-shadow:0 12px 32px rgba(40,69,114,.1); }
.feature-phone { background:white; padding:6px; border-radius:30px; overflow:hidden; }
.feature-phone img { width:100%; border-radius:24px; }
.feature-link { display:inline-flex; align-items:center; gap:10px; margin-top:24px; font-size:13px; padding-bottom:4px; border-bottom:1px solid currentColor; }
.feature-link:hover { opacity:.72; }
.feature-friends { min-height:560px; background:var(--card-sky); color:var(--card-heading); }
.feature-friends .feature-copy { padding:38px 36px 0; }
.feature-friends p { color:var(--card-copy); }
.feature-friends .feature-phone { width:228px; height:450px; position:absolute; top:290px; left:50%; transform:translateX(-50%) rotate(-5deg); }
.feature-friends h3 { font-size:30px; }
.feature-friends .feature-link { margin-top:17px; }
.feature-video { display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:50px; overflow:hidden; margin-top:24px; border-radius:var(--radius); background:var(--card-mist); color:var(--card-heading); }
.video-visual { height:480px; position:relative; overflow:hidden; }
.video-phone { width:246px; height:530px; overflow:hidden; position:absolute; top:45px; left:50%; transform:translateX(-50%) rotate(-5deg); border:6px solid #fff; border-radius:32px; box-shadow:0 12px 32px rgba(40,69,114,.12); }
.video-phone img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:25px; }
.video-copy { padding:50px 35px 50px 0; }
.video-copy h3 { font-size:42px; line-height:1.45; font-weight:600; letter-spacing:-.03em; }
.video-copy p { margin-top:22px; font-size:15px; color:var(--card-copy); line-height:1.95; }
.video-copy .text-link { margin-top:30px; }
.about-section { display:grid; grid-template-columns:1fr 1.25fr; gap:130px; padding-block:120px; }
.about-heading h2 { font-size:48px; }
.about-heading p { margin-top:22px; font-size:16px; color:var(--muted); line-height:1.9; }
.about-points { display:grid; gap:30px; }
.about-points article { padding-bottom:28px; border-bottom:1px solid var(--line); }
.about-points article:last-child { padding-bottom:0; border-bottom:0; }
.about-points h3 { font-size:21px; font-weight:600; margin-bottom:12px; }
.about-points p { font-size:15px; color:var(--muted); line-height:1.9; max-width:480px; }
.questions-section { display:grid; grid-template-columns:1fr 1.25fr; gap:130px; padding-block:0 110px; }
.questions-section h2 { font-size:30px; }
.questions { border-top:1px solid var(--line); }
.questions details { border-bottom:1px solid var(--line); }
.questions summary { padding:24px 3px; font-size:16px; font-weight:500; display:flex; gap:18px; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
.question-icon { flex-shrink:0; width:16px; height:16px; background:url("assets/plus.svg") center/contain no-repeat; transition:transform .2s; }
.questions details[open] .question-icon { transform:rotate(45deg); }
.questions summary:hover { color:var(--blue); }
.questions details > p { color:var(--muted); font-size:14px; line-height:1.95; padding:0 32px 24px 3px; }
.download-section { background:radial-gradient(ellipse at 85% 10%,rgba(118,170,255,.17),transparent 65%),linear-gradient(115deg,#2357dc,#285ce6); color:white; }
.download-content { display:grid; grid-template-columns:90px 1fr 300px; align-items:center; gap:44px; padding-block:75px; }
.download-logo { border-radius:21px; align-self:start; margin-top:14px; }
.download-copy h2 { font-size:52px; font-weight:600; line-height:1.35; letter-spacing:-.03em; }
.download-copy p { margin-top:20px; font-size:16px; color:#f8faff; }
.button-white { color:#1a44b4; background:white; }
.button-white:hover { background:#edf2ff; }
.download-options { align-self:center; position:relative; }
.download-options summary { list-style:none; width:max-content; }
.download-notice { padding:22px 0 0; }
.download-notice strong { font-size:16px; font-weight:500; }
.download-notice p { font-size:13px; margin-top:8px; line-height:1.8; color:#f8faff; }
.download-options summary:focus-visible { outline-color:white; }
.footer { display:flex; align-items:center; padding-block:35px; gap:28px; }
.footer-brand img { border-radius:9px; }
.footer-brand span { font-size:18px; }
.footer-legal { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; }
.footer p,.icp-link { font-size:12px; color:var(--muted); }
.icp-link:hover { color:var(--blue); text-decoration:underline; }
.back-top { display:flex; align-items:center; gap:13px; margin-left:auto; font-size:13px; }
.back-top:hover { color:var(--blue); }
@media (min-width:1440px) { .hero { gap:64px; } }
@media (max-width:1150px) {
  .container { width:calc(100% - 64px); }
  .hero { grid-template-columns:1.05fr 1fr; gap:28px; }
  h1 { font-size:51px; }
  .hero-copy > p { font-size:14px; }
  .preview-stage { grid-template-columns:1fr 210px; padding:25px 20px; min-height:480px; }
  .preview-screen { width:210px; height:445px; }
  .preview-aside p { font-size:21px; }
  .preview-logo { width:78px; height:78px; }
  .preview-options label { padding-inline:14px; }
  .hero-actions { gap:18px; }
  .button { font-size:14px; padding-inline:21px; }
  .feature-life .feature-copy { padding-left:30px; }
  .feature-life .feature-phone { width:210px; right:18px; top:230px; }
  .feature h3 { font-size:29px; }
  .feature-life .feature-copy { max-width:100%; }
  .about-section,.questions-section { gap:70px; }
  .download-content { gap:30px; grid-template-columns:80px 1fr 230px; }
}
@media (max-width:900px) {
  .hero { grid-template-columns:1fr 1fr; gap:24px; padding-block:30px 65px; }
  h1 { font-size:42px; }
  .hero-copy { padding-bottom:0; }
  .hero-copy > p { line-height:1.85; }
  .desktop-break { display:none; }
  .hero-actions { margin-top:27px; gap:16px; }
  .preview-stage { grid-template-columns:1fr; justify-items:center; min-height:440px; padding:24px; }
  .preview-aside { display:none; }
  .preview-screen { width:195px; height:416px; }
  .preview-options { gap:0; padding:5px; margin-top:14px; }
  .preview-options label { padding-inline:11px; font-size:12px; }
  .feature-grid { gap:20px; grid-template-columns:1.15fr 1fr; }
  .feature-life .feature-phone { right:35px; top:275px; }
  .feature-copy p { font-size:13px; }
  .feature-friends .feature-copy { padding-inline:26px; }
  .feature h3,.feature-friends h3 { font-size:28px; }
  .feature-video { gap:20px; grid-template-columns:1fr 1fr; }
  .video-copy h3 { font-size:32px; }
  .video-copy p { font-size:14px; }
  .about-section,.questions-section { grid-template-columns:.9fr 1.2fr; gap:45px; }
  .about-heading h2 { font-size:40px; }
  .questions-section h2 { font-size:27px; }
  .download-content { grid-template-columns:1fr 230px; gap:25px; }
  .download-logo { display:none; }
  .download-copy h2 { font-size:44px; }
}
@media (max-width:640px) {
  html { scroll-padding-top:24px; }
  .container { width:calc(100% - 40px); }
  .nav { height:82px; }
  .brand { gap:9px; }
  .brand img { width:38px; height:38px; border-radius:11px; }
  .brand span { font-size:21px; }
  .nav-links { display:none; }
  .mobile-nav { display:block; }
  .mobile-nav summary { display:grid; place-items:center; list-style:none; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; cursor:pointer; }
  .mobile-links { position:absolute; top:73px; right:20px; display:grid; min-width:180px; padding:12px; border-radius:16px; background:white; box-shadow:0 12px 28px rgba(30,45,40,.13); }
  .mobile-links a { padding:13px 15px; font-size:14px; }
  .hero { grid-template-columns:1fr; gap:40px; padding-block:26px 55px; }
  h1 { font-size:clamp(37px,10.2vw,58px); line-height:1.35; letter-spacing:-.03em; }
  .hero-copy > p { font-size:14px; margin-top:23px; max-width:420px; }
  .hero-actions { margin-top:26px; gap:22px; }
  .button { min-height:52px; font-size:14px; padding:14px 21px; gap:17px; }
  .text-link { font-size:13px; }
  .preview-stage { min-height:425px; grid-template-columns:1fr 192px; gap:8px; padding:23px 20px; border-radius:24px; }
  .preview-screen { width:192px; height:405px; border-radius:26px; padding:5px; }
  .preview-screen img { border-radius:21px; }
  .preview-aside { display:flex; }
  .preview-logo { width:66px; height:66px; border-radius:18px; margin-bottom:23px; }
  .preview-aside p { font-size:18px; }
  .preview-aside > span { font-size:10px; margin-top:25px; }
  .preview-options { margin-top:16px; padding:5px; }
  .preview-options label { padding:8px 17px; min-height:42px; }
  .experience-section { padding-block:65px; }
  .section-intro { margin-bottom:35px; text-align:left; }
  h2 { font-size:32px; }
  .section-intro p { font-size:14px; margin-top:20px; }
  .feature-grid { grid-template-columns:1fr; gap:18px; }
  .feature { border-radius:24px; }
  .feature-life,.feature-friends { min-height:510px; }
  .feature-life .feature-copy,.feature-friends .feature-copy { padding:30px 27px 0; }
  .feature h3,.feature-friends h3 { font-size:28px; }
  .feature p { font-size:13px; margin-top:15px; }
  .feature-life .feature-phone { width:205px; top:270px; right:30px; }
  .feature-friends .feature-phone { width:212px; top:265px; left:50%; }
  .feature-link { margin-top:18px; }
  .feature-video { display:flex; flex-direction:column-reverse; gap:0; margin-top:18px; border-radius:24px; align-items:stretch; }
  .video-copy { padding:32px 27px 0; }
  .video-copy h3 { font-size:29px; }
  .video-copy p { font-size:13px; margin-top:17px; }
  .video-copy .text-link { margin-top:20px; }
  .video-visual { height:370px; }
  .video-phone { width:220px; height:477px; top:35px; }
  .about-section { grid-template-columns:1fr; gap:38px; padding-block:65px; }
  .about-heading h2 { font-size:36px; }
  .about-heading p { font-size:14px; margin-top:18px; }
  .about-heading p br { display:none; }
  .about-points { gap:24px; }
  .about-points h3 { font-size:20px; margin-bottom:10px; }
  .about-points p { font-size:14px; }
  .about-points article { padding-bottom:24px; }
  .questions-section { grid-template-columns:1fr; gap:25px; padding-bottom:65px; }
  .questions-section h2 { font-size:27px; }
  .questions summary { font-size:15px; padding-block:22px; }
  .questions details > p { font-size:13px; }
  .download-content { grid-template-columns:1fr; gap:25px; padding-block:50px; }
  .download-logo { display:block; width:60px; height:60px; margin:0; border-radius:16px; }
  .download-copy h2 { font-size:41px; }
  .download-copy p { font-size:14px; margin-top:18px; }
  .download-options { margin-top:7px; }
  .download-notice { max-width:290px; }
  .footer { flex-wrap:wrap; gap:18px; padding-block:27px; }
  .footer-brand { display:none; }
  .footer-legal { flex-direction:column; align-items:flex-start; gap:9px; }
  .footer p,.icp-link { font-size:11px; }
  .back-top { font-size:12px; gap:7px; }
}
@media (max-width:370px) {
  .container { width:calc(100% - 32px); }
  h1 { font-size:35px; }
  .hero-actions { gap:16px; }
  .hero-actions .button { padding-inline:18px; gap:12px; font-size:13px; }
  .hero-actions .text-link { font-size:12px; }
  .preview-stage { grid-template-columns:1fr; min-height:0; padding:25px 20px; }
  .preview-aside { display:none; }
  .preview-screen { width:214px; height:455px; }
  .preview-options label { padding-inline:15px; }
  .feature h3 { font-size:26px; }
  .video-copy h3 { font-size:26px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}