:root {
  --ink:#211e2b; --lav:#7e5bef; --lime:#d9ff42; --paper:#f6f3ee; --line:#ddd6e5; --dark:#262032; --pink:#ff4e88
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei",Arial,sans-serif; line-height:1.7
}
a {
  color:inherit; text-decoration:none
}
.shell {
  width:min(1160px,calc(100% - 48px)); margin:auto
}
.site-header {
  position:fixed; z-index:30; top:0; left:0; width:100%; background:rgba(246,243,238,.95);
  border-bottom:1px solid #ddd6e5
}
.nav-wrap {
  display:flex; align-items:center; gap:40px; height:74px
}
.brand {
  display:inline-flex; align-items:center; gap:10px; font-size:17px; font-weight:900
}
.brand img {
  width:38px; height:38px; border-radius:5px
}
.desktop-nav {
  display:flex; gap:25px; margin-left:auto; font-size:14px; font-weight:800
}
.desktop-nav a {
  padding:25px 0
}
.nav-actions {
  display:flex; gap:12px
}
.nav-download {
  padding:10px 17px; border-radius:5px; color:#fff; background:var(--lav); font-size:14px; font-weight:900
}
.menu-toggle {
  display:none; width:39px; height:39px; padding:9px; border:1px solid var(--ink); border-radius:5px;
  background:transparent
}
.menu-toggle i {
  display:block; height:2px; margin:4px 0; background:var(--ink)
}
.mobile-nav {
  display:none
}
.hero {
  position:relative; padding:142px 0 84px; overflow:hidden; background:#ede8f8
}
.hero:before {
  position:absolute; inset:0 0 0 50%; content:""; background:#d9ff42
}
.hero-layout {
  position:relative; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:70px
}
.eyebrow {
  margin:0 0 12px; color:#7452dd; font:800 12px/1 Arial; letter-spacing:2px
}
.hero h1 {
  margin:0 0 27px; font-size:clamp(54px,7vw,90px); font-weight:900; line-height:.98; letter-spacing:-4px
}
.hero-intro {
  max-width:505px; margin:0; color:#413c4d; font-size:17px; line-height:2
}
.hero-actions {
  margin-top:28px
}
.button {
  display:inline-flex; gap:38px; align-items:center; justify-content:space-between; padding:15px 18px 15px 22px;
  border-radius:5px; font-weight:900
}
.button b {
  font-size:22px
}
.hero-download {
  color:#fff; background:var(--lav)
}
.age-label {
  display:block; margin:12px 0 0; color:#555060; font-size:13px
}
.hero-subnote {
  margin:32px 0 0; font-size:12px; font-weight:700
}
.phone-stage {
  position:relative; display:grid; height:510px; place-items:center
}
.ring {
  position:absolute; border:1px solid rgba(33,30,43,.2); border-radius:50%; transform:rotate(-18deg)
}
.ring-one {
  width:455px; height:210px
}
.ring-two {
  width:390px; height:385px
}
.phone {
  position:relative; z-index:1; width:273px; height:505px; padding:8px; border:8px solid #17131e; border-radius:36px;
  background:#17131e; box-shadow:22px 24px 0 rgba(33,30,43,.2)
}
.phone-speaker {
  position:absolute; z-index:2; top:7px; left:50%; width:70px; height:17px; border-radius:0 0 12px 12px;
  background:#17131e; transform:translateX(-50%)
}
.phone-screen {
  height:100%; padding:14px; border-radius:27px; background:#fffdf9
}
.phone-status {
  display:flex; justify-content:space-between; font:800 8px Arial
}
.app-top {
  display:flex; justify-content:space-between; padding:15px 2px 13px; border-bottom:1px solid #ece7f0; font-size:11px
}
.app-top b {
  color:var(--lav)
}
.record-indicator {
  display:flex; gap:7px; align-items:center; padding:14px 3px
}
.record-indicator i {
  width:8px; height:8px; border-radius:50%; background:var(--pink)
}
.record-indicator span {
  flex:1; font-size:10px; font-weight:900
}
.record-indicator small {
  color:#7b7485; font-size:9px
}
.action-preview {
  padding:16px; border-radius:5px; background:#f0ebfb
}
.action-preview p {
  margin:0; color:#786a9c; font-size:9px; font-weight:800
}
.action-preview strong,.action-preview span {
  display:block
}
.action-preview strong {
  margin-top:7px; font-size:15px
}
.action-preview span {
  margin-top:3px; color:#6f6779; font-size:9px
}
.phone-controls {
  display:flex; justify-content:space-between; margin-top:17px
}
.control-button {
  display:grid; width:58px; height:52px; place-items:center; border:1px solid #e6deed; border-radius:5px;
  color:#5e5668; background:#fff; font-size:14px; cursor:pointer
}
.control-button small {
  font-size:8px
}
.control-button.active {
  border-color:var(--lav); color:#fff; background:var(--lav)
}
.record-main {
  display:flex; justify-content:space-between; width:100%; padding:12px; margin-top:18px; border:0; border-radius:5px;
  color:#fff; background:var(--ink); font-weight:900
}
.record-main.is-active {
  background:var(--pink)
}
.phone-tip {
  position:absolute; right:0; bottom:-7px; font-size:11px; font-weight:700
}
.phone-tip i {
  display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--pink)
}
.section-heading h2,.review-heading h2,.guide-card h2,.download-section h2 {
  margin:0; font-size:clamp(38px,5vw,62px); font-weight:900; line-height:1; letter-spacing:-3px
}
.section-heading>p:not(.eyebrow) {
  max-width:470px; margin:18px 0 0; color:#6d6677
}
.feature-section {
  padding:105px 0; background:#fff
}
.feature-list {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:52px; border-top:1px solid var(--ink)
}
.feature-list article {
  min-height:272px; padding:25px; border-right:1px solid var(--line)
}
.feature-list article:first-child {
  border-left:1px solid var(--line)
}
.feature-list span {
  color:var(--lav); font-size:12px; font-weight:900
}
.feature-list h3 {
  margin:55px 0 10px; font-size:22px
}
.feature-list p {
  margin:0; color:#625c6d; font-size:14px
}
.guide-section {
  padding:105px 0; background:#252031; color:#fff
}
.guide-layout {
  display:grid; grid-template-columns:.85fr 1.15fr; gap:100px
}
.guide-section .eyebrow {
  color:var(--lime)
}
.guide-phone {
  margin-top:40px; padding:20px; border:1px solid rgba(255,255,255,.2); border-radius:5px
}
.guide-phone span {
  display:block; color:var(--lime); font:900 13px Arial
}
.guide-phone b,.guide-phone small {
  display:block
}
.guide-phone b {
  margin-top:10px; font-size:20px
}
.guide-phone small {
  color:#c7c1cf; font-size:12px
}
.guide-list {
  margin:0; padding:0; list-style:none
}
.guide-list li {
  display:grid; grid-template-columns:64px 1fr; gap:20px; padding:0 0 29px; margin-bottom:29px;
  border-bottom:1px solid rgba(255,255,255,.2)
}
.guide-list em {
  color:var(--lime); font:900 14px Arial; font-style:normal
}
.guide-list h3 {
  margin:0 0 5px; font-size:21px
}
.guide-list p {
  margin:0; color:#cbc4d2; font-size:14px
}
.screens-section {
  padding:105px 0; background:#ded7ed
}
.split-heading,.review-heading {
  display:flex; align-items:end; justify-content:space-between
}
.split-heading>p:not(.eyebrow),.review-heading>p {
  max-width:370px; margin:0
}
.screens-scroll {
  margin-top:50px
}
.screens-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px
}
.screens-grid figure {
  margin:0; padding:12px; border-radius:5px; background:#fff
}
.screens-grid img {
  display:block; width:100%; height:auto; border-radius:3px; object-fit:contain
}
.screens-grid figcaption {
  margin-top:11px; font-size:12px; font-weight:700
}
.faq-section {
  padding:108px 0; background:#fff
}
.faq-layout {
  display:grid; grid-template-columns:.8fr 1.2fr; gap:105px
}
.faq-list {
  border-top:1px solid var(--ink)
}
.faq-list article {
  border-bottom:1px solid var(--line)
}
.faq-list button {
  display:flex; justify-content:space-between; width:100%; padding:21px 0; border:0; background:transparent;
  font:800 17px inherit; text-align:left
}
.faq-list button b {
  font-size:25px; font-weight:400
}
.faq-list article>div {
  display:grid; grid-template-rows:0fr
}
.faq-list article.is-open>div {
  grid-template-rows:1fr
}
.faq-list article p {
  margin:0; overflow:hidden; color:#625c6d; font-size:14px
}
.faq-list article.is-open p {
  padding:0 30px 20px 0
}
.review-section {
  padding:105px 0; color:#fff; background:#392143
}
.review-section .eyebrow {
  color:#d9ff42
}
.review-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:50px
}
.review-grid article {
  display:flex; flex-direction:column; min-height:272px; padding:23px; border-top:4px solid var(--pink);
  border-radius:5px; color:var(--ink); background:#fff
}
.review-grid article:nth-child(2),.review-grid article:nth-child(5) {
  border-top-color:var(--lime)
}
.review-grid header {
  display:flex; gap:9px; align-items:center; font-size:14px
}
.review-grid header i {
  width:35px; height:35px; border-radius:50%; background:var(--pink) url('../icons/avatar.svg') center/20px no-repeat
}
.review-grid header span {
  margin-left:auto; color:var(--pink); font-size:12px
}
.review-grid article>p {
  margin:20px 0; font-size:13px; line-height:1.85
}
.review-grid footer {
  margin-top:auto; color:#6c6574; font-size:11px; text-align:right
}
.download-section {
  padding:92px 0; background:var(--lime)
}
.download-layout {
  display:flex; align-items:center; justify-content:space-between
}
.download-section .eyebrow {
  color:#675d16
}
.download-section p:not(.eyebrow) {
  margin:14px 0 0; color:#4c491d
}
.download-button {
  min-width:188px; color:#fff; background:var(--ink); box-shadow:7px 7px 0 rgba(33,30,43,.25)
}
.download-button small {
  display:block; margin-top:4px; color:#c8bfd5; font-size:9px
}
.back-to-top {
  position:fixed; z-index:25; right:26px; bottom:25px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; width:52px; height:52px; border-radius:5px; color:#fff; background:var(--ink); opacity:0;
  visibility:hidden; pointer-events:none
}
.back-to-top.is-visible {
  opacity:1; visibility:visible; pointer-events:auto
}
.back-to-top span {
  font-size:20px
}
.back-to-top b {
  font-size:9px
}
.site-footer {
  padding:17px 0; color:#fff; background:#08070b; border-top:1px solid rgba(217,255,66,.5)
}
.footer-layout {
  display:grid; grid-template-columns:1fr auto 1fr; gap:44px; align-items:center; min-height:62px
}
.footer-brand img {
  width:43px; height:43px; filter:invert(1)
}
.footer-brand small {
  display:block; color:#9994a3; font-size:10px
}
.footer-map {
  display:flex; gap:25px
}
.footer-map a {
  font-size:12px; font-weight:800
}
.footer-copyright {
  margin:0; color:#aaa4b1; font-size:12px; text-align:right; white-space:nowrap
}
@media(max-width:800px) {
  .shell {
  width:min(100% - 30px,590px)
}
  .nav-wrap {
  height:65px; gap:10px
}
  .brand {
  font-size:14px
}
  .brand img {
  width:37px; height:37px
}
  .desktop-nav {
  display:none
}
  .nav-actions {
  margin-left:auto
}
  .nav-download {
  padding:9px 13px; font-size:13px
}
  .menu-toggle {
  display:block
}
  .mobile-nav {
  padding:10px 15px; background:var(--paper)
}
  .mobile-nav.is-open {
  display:grid; gap:6px
}
  .mobile-nav a {
  padding:9px; border:1px solid var(--line); font-size:13px; font-weight:800
}
  .hero {
  padding:103px 0 58px
}
  .hero:before {
  top:auto; left:0; width:100%; height:40%
}
  .hero-layout {
  grid-template-columns:1fr; gap:35px
}
  .hero-copy {
  text-align:center
}
  .eyebrow {
  font-size:10px
}
  .hero h1 {
  font-size:51px
}
  .hero-intro {
  margin:auto; font-size:15px
}
  .age-label {
  width:max-content; margin:12px auto 0
}
  .hero-subnote {
  margin-top:25px
}
  .phone-stage {
  height:470px
}
  .phone {
  transform:scale(.92)
}
  .phone-tip {
  right:0
}
  .feature-section,.guide-section,.screens-section,.faq-section,.review-section {
  padding:70px 0
}
  .feature-list {
  grid-template-columns:1fr; margin-top:34px
}
  .feature-list article {
  min-height:190px; border-bottom:1px solid var(--line)
}
  .feature-list h3 {
  margin-top:25px
}
  .guide-layout,.faq-layout {
  grid-template-columns:1fr; gap:38px
}
  .guide-list li {
  grid-template-columns:48px 1fr
}
  .split-heading,.review-heading,.download-layout {
  display:block
}
  .split-heading>p:not(.eyebrow),.review-heading>p {
  margin:18px 0 0
}
  .screens-scroll {
  margin-top:31px; overflow-x:auto; scroll-snap-type:x mandatory
}
  .screens-grid {
  display:flex; gap:12px; width:max-content
}
  .screens-grid figure {
  flex:0 0 74vw; width:74vw; scroll-snap-align:start
}
  .review-grid {
  grid-template-columns:1fr; gap:11px; margin-top:33px
}
  .review-grid article {
  min-height:0
}
  .download-section {
  text-align:center
}
  .download-layout .button {
  margin:27px auto 0
}
  .back-to-top {
  right:15px; bottom:15px
}
  .footer-layout {
  grid-template-columns:1fr; justify-items:center; text-align:center
}
  .footer-brand {
  justify-content:center
}
  .footer-map {
  flex-wrap:wrap; justify-content:center; max-width:280px
}
  .footer-copyright {
  text-align:center; white-space:normal
}
  a,button {
  -webkit-tap-highlight-color:transparent
}
}
@media(max-width:390px) {
  .brand span {
  display:none
}
  .hero h1 {
  font-size:47px
}
  .phone-stage {
  margin:0 -15px
}
  .phone {
  transform:scale(.85)
}
}