:root {
  --navy:#07142e;
  --blue:#2779ff;
  --cyan:#45e2ff;
  --violet:#7644ff;
  --pink:#ff4f9a;
  --cream:#f6f4ee;
  --ink:#14254a;
  --soft:#71809c;
  --line:#d8e2f1;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font:15px/1.75 Arial,"Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
button { color:inherit; font:inherit; }
.shell { width:min(1200px,calc(100% - 48px)); margin:auto; }
main { display:flex; flex-direction:column; }
.hero { order:0; }
.sets-section { order:1; }
.features-section { order:2; }
.screens-section { order:3; }
.review-section { order:4; }
.faq-section { order:5; }
.download-section { order:6; }
.site-header { position:fixed; z-index:20; top:0; right:0; left:0; border-bottom:1px solid #cdd9ec; color:var(--navy); background:rgba(247,249,254,.97); }
.nav-wrap { display:grid; grid-template-columns:210px 1fr auto; align-items:center; min-height:76px; gap:22px; }
.brand { display:inline-flex; align-items:center; gap:12px; font-size:15px; font-weight:900; white-space:nowrap; }
.brand img { width:46px; height:46px; padding:3px; border-radius:5px; object-fit:contain; background:#f1f4ff; }
.site-header .brand-copy { display:grid; gap:4px; line-height:1.1; }
.site-header .brand-copy b { font-size:17px; letter-spacing:-.3px; }
.site-header .brand-copy small { color:#4f5f89; font-size:12px; font-weight:600; letter-spacing:.1px; }
.site-nav { justify-self:stretch; }
.site-nav ul { display:flex; align-items:stretch; justify-content:space-evenly; margin:0; padding:0; list-style:none; counter-reset:item; }
.site-nav li { position:relative; flex:1; border-left:1px solid #d9e2ef; }
.site-nav li:last-child { border-right:1px solid #d9e2ef; }
.site-nav a { display:flex; min-height:38px; align-items:center; justify-content:center; gap:7px; padding:0 8px; color:#344567; font-size:12px; font-weight:900; }
.site-nav a:before { color:var(--blue); font:900 10px/1 Arial,sans-serif; content:"0" counter(item); counter-increment:item; }
.site-nav a:hover { color:var(--pink); background:#edf3ff; }
.nav-actions { display:flex; align-items:center; gap:10px; }
.nav-download { display:inline-flex; min-height:40px; align-items:center; padding:0 15px; border:1px solid var(--navy); border-radius:5px; color:var(--navy); background:#fff; font-size:13px; font-weight:900; box-shadow:4px 4px 0 var(--navy); }
.menu-toggle { display:none; width:38px; height:38px; padding:8px; border:1px solid var(--navy); border-radius:5px; background:#fff; }
.menu-toggle i { display:block; height:2px; margin:4px 0; background:var(--navy); }
.hero { position:relative; min-height:735px; padding:157px 0 94px; overflow:hidden; color:#fff; background:radial-gradient(circle at 84% 52%,#263a90 0 5%,transparent 28%),linear-gradient(120deg,#061329 0 55%,#132b72 100%); }
.hero:before,.hero:after { position:absolute; content:""; pointer-events:none; }
.hero:before { top:80px; right:-170px; width:700px; height:700px; border:1px solid rgba(69,226,255,.25); border-radius:50%; box-shadow:0 0 0 55px rgba(69,226,255,.04),0 0 0 110px rgba(69,226,255,.03); }
.hero:after { right:0; bottom:0; left:0; height:170px; background:repeating-linear-gradient(90deg,rgba(69,226,255,.12) 0 1px,transparent 1px 72px); mask-image:linear-gradient(transparent,#000); }
.hero-layout { position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:72px; }
.eyebrow { margin:0 0 15px; color:var(--cyan); font:900 12px/1 Arial,sans-serif; letter-spacing:2px; }
.hero h1 { max-width:570px; margin:0 0 26px; font-size:clamp(51px,6.4vw,82px); line-height:1; letter-spacing:-4px; }
.hero-intro { max-width:520px; margin:0; color:#d0dcf6; font-size:17px; line-height:2; }
.hero-actions { margin-top:29px; }
.button { display:inline-flex; align-items:center; justify-content:space-between; gap:46px; min-height:58px; padding:0 20px 0 24px; border-radius:5px; font-weight:900; }
.button b { font-size:22px; }
.hero-download { color:#fff; background:var(--pink); box-shadow:6px 6px 0 #37206c; }
.age-label { display:block; width:max-content; margin-top:14px; color:#aabce3; font-size:13px; }
.hero-note { margin:31px 0 0; color:#8da3d2; font-size:12px; font-weight:800; letter-spacing:.4px; }
.device-stage { position:relative; display:grid; min-height:480px; place-items:center; }
.stage-orbit { position:absolute; border-radius:50%; }
.orbit-one { width:405px; height:405px; border:1px dashed rgba(69,226,255,.7); }
.orbit-two { width:470px; height:470px; border:1px solid rgba(255,255,255,.12); }
.phone-device { position:relative; z-index:1; width:282px; padding:10px; border:5px solid #d9e8ff; border-radius:35px; background:#d9e8ff; box-shadow:18px 20px 0 rgba(0,0,0,.25); transform:rotate(5deg); }
.phone-top { display:grid; height:18px; place-items:center; }
.phone-top i { width:57px; height:5px; border-radius:4px; background:#52688f; }
.phone-screen { overflow:hidden; border-radius:22px; background:linear-gradient(150deg,#142868,#6a38bc); }
.app-bar { display:flex; justify-content:space-between; padding:14px 16px 11px; border-bottom:1px solid rgba(255,255,255,.2); color:#fff; font-size:11px; font-weight:900; letter-spacing:1px; }
.app-bar b { color:var(--cyan); }
.look-card { padding:25px 18px 15px; color:#fff; text-align:center; transition:background .2s ease; }
.look-person { position:relative; width:101px; height:115px; margin:auto; border:3px solid #aeeeff; border-radius:48px 48px 24px 24px; background:linear-gradient(145deg,#2d8fff,#ec5daf); box-shadow:0 0 0 11px rgba(69,226,255,.14); }
.look-person:before { position:absolute; top:18px; left:29px; width:38px; height:38px; border-radius:50%; content:""; background:#ffcfb3; }
.look-person i { position:absolute; bottom:10px; width:28px; height:48px; border-radius:15px; background:#162456; }
.look-person i:nth-child(1) { left:15px; }
.look-person i:nth-child(2) { right:15px; }
.look-person i:nth-child(3) { bottom:4px; left:37px; height:56px; background:#4d238d; }
.look-card span { display:block; margin-top:17px; font-weight:900; }
.look-card small { color:#d3cef2; font-size:10px; }
.look-tabs { display:flex; padding:5px 12px; background:rgba(0,0,0,.16); }
.look-tab { flex:1; padding:9px 0; border:0; border-bottom:2px solid transparent; color:#cbd8f7; background:transparent; font-size:12px; font-weight:800; cursor:pointer; }
.look-tab.is-active { border-color:var(--cyan); color:#fff; }
.look-list { padding:11px 17px 4px; color:#dfe7ff; }
.look-list p { display:flex; justify-content:space-between; margin:0 0 7px; font-size:11px; }
.look-list b { color:var(--cyan); }
.look-action { display:flex; justify-content:space-between; width:calc(100% - 34px); margin:10px 17px 18px; padding:10px 12px; border:0; border-radius:5px; color:#0d1c4c; background:var(--cyan); font-size:12px; font-weight:900; cursor:pointer; }
.phone-home { width:82px; height:4px; margin:8px auto 0; border-radius:5px; background:#8199c5; }
.device-caption { position:absolute; right:3%; bottom:-5px; margin:0; color:#a8bce9; font-size:11px; font-weight:800; }
.section-heading h2,.review-heading h2,.download-section h2 { margin:0; font-size:clamp(40px,5vw,62px); line-height:1; letter-spacing:-3px; }
.section-heading>p:not(.eyebrow) { max-width:540px; margin:18px 0 0; color:var(--soft); }
.sets-section { padding:112px 0; background:var(--cream); }
.sets-section .eyebrow { color:var(--pink); }
.split-heading,.review-heading { display:flex; align-items:end; justify-content:space-between; gap:45px; }
.split-heading>p,.review-heading>p { max-width:390px; margin:0; }
.split-heading>p { color:#61708d; }
.look-carousel { position:relative; margin-top:48px; padding:18px 18px 0; border:1px solid #c9d6eb; border-radius:5px; background:#eaf0fa; }
.carousel-viewport { overflow:hidden; border-radius:5px; background:#dbe7f6; }
.carousel-track { display:flex; transition:transform .55s cubic-bezier(.2,.75,.25,1); }
.carousel-slide { position:relative; flex:0 0 100%; height:480px; margin:0; overflow:hidden; background:#dbe7f6; }
.carousel-slide img { display:block; width:100%; height:100%; object-fit:contain; background:#dbe7f6; }
.carousel-slide:after { position:absolute; right:0; bottom:0; left:0; height:38%; content:""; background:linear-gradient(transparent,rgba(7,20,46,.88)); }
.carousel-slide figcaption { position:absolute; z-index:1; right:0; bottom:0; left:0; display:flex; align-items:end; justify-content:space-between; padding:24px; color:#fff; }
.carousel-slide figcaption b { font-size:25px; }
.carousel-slide figcaption span { color:#d8e8ff; font-size:13px; }
.carousel-control { position:absolute; z-index:2; top:calc(50% - 26px); display:grid; width:46px; height:46px; place-items:center; border:0; border-radius:50%; color:#fff; background:rgba(7,20,46,.86); font-size:25px; cursor:pointer; }
.carousel-prev { left:36px; }
.carousel-next { right:36px; }
.carousel-bottom { display:flex; align-items:center; justify-content:space-between; min-height:67px; }
.carousel-bottom p { margin:0; font-size:13px; font-weight:800; }
.carousel-current { color:var(--pink); font-size:22px; }
.carousel-bottom p span { color:#7886a0; }
.carousel-dots { display:flex; gap:8px; }
.carousel-dots button { width:26px; height:4px; padding:0; border:0; border-radius:5px; background:#aebbd0; cursor:pointer; }
.carousel-dots button.is-active { width:46px; background:var(--pink); }
.features-section { padding:105px 0; color:#fff; background:#0d1b3a; }
.features-section .eyebrow { color:var(--cyan); }
.features-section .section-heading>p:not(.eyebrow) { color:#aebddd; }
.feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:56px; border-top:1px solid rgba(255,255,255,.25); }
.feature-grid article { min-height:265px; padding:23px 20px 22px 0; border-right:1px solid rgba(255,255,255,.16); }
.feature-grid article:not(:first-child) { padding-left:20px; }
.feature-grid span { display:inline-grid; width:32px; height:32px; place-items:center; border-radius:50%; color:var(--navy); background:var(--cyan); font-size:12px; font-weight:900; }
.feature-grid h3 { margin:45px 0 10px; color:#fff; font-size:19px; }
.feature-grid p { margin:0; color:#b9c6df; font-size:14px; }
.screens-section { padding:108px 0; background:#fff; }
.compact-heading { display:grid; grid-template-columns:1fr auto; align-items:end; gap:55px; }
.compact-heading>p:not(.eyebrow) { max-width:390px; margin:0; }
.screens-scroll { margin-top:48px; }
.screens-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.screens-grid figure { margin:0; padding:10px 10px 16px; border:1px solid var(--line); border-radius:5px; background:#fff; box-shadow:8px 8px 0 #eaf0fa; }
.screens-grid figure:nth-child(2n) { transform:translateY(22px); }
.screens-grid img { display:block; width:100%; height:auto; object-fit:contain; }
.screens-grid figcaption { margin-top:11px; color:#53617d; font-size:12px; font-weight:800; }
.review-section { padding:110px 0; color:#fff; background:linear-gradient(120deg,#39205d,#102863); }
.review-section .eyebrow { color:var(--cyan); }
.review-heading>p { color:#c1cce7; }
.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:46px; }
.review-grid article { display:flex; flex-direction:column; min-height:250px; padding:23px; border:1px solid rgba(255,255,255,.32); border-radius:5px; background:rgba(7,20,46,.22); }
.review-meta { display:flex; align-items:center; gap:10px; }
.review-meta i { width:38px; height:38px; border-radius:50%; background:var(--cyan) url('../icons/avatar.svg') center/21px no-repeat; }
.review-meta b { font-size:14px; }
.review-meta span { margin-left:auto; color:#ffd24a; font-size:13px; }
.review-grid p { flex:1; margin:20px 0; color:#eff4ff; font-size:14px; line-height:1.8; }
.review-grid small { color:#c2cdea; text-align:right; }
.faq-section { padding:110px 0; background:#edf3ff; }
.faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }
.faq-list { display:grid; gap:10px; }
.faq-list article { border:1px solid #cbd9f0; border-radius:5px; background:#fff; }
.faq-list button { display:flex; justify-content:space-between; width:100%; padding:18px 19px; border:0; background:transparent; font-size:16px; font-weight:800; text-align:left; cursor:pointer; }
.faq-list button b { color:var(--blue); font-size:23px; font-weight:400; }
.faq-list article>div { display:grid; grid-template-rows:0fr; transition:grid-template-rows .2s ease; }
.faq-list article.is-open>div { grid-template-rows:1fr; }
.faq-list p { margin:0; overflow:hidden; color:var(--soft); }
.faq-list article.is-open p { padding:0 19px 18px; }
.download-section { padding:78px 0; background:#fff; }
.download-ticket { display:grid; grid-template-columns:145px 1fr 230px; align-items:stretch; overflow:hidden; border:1px solid var(--navy); border-radius:5px; background:#f7f9fe; box-shadow:11px 11px 0 var(--navy); }
.ticket-code { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border-right:1px dashed #96a8c7; color:#fff; background:var(--navy); }
.ticket-code span { color:var(--cyan); font:900 44px/1 Arial,sans-serif; }
.ticket-code b { font-size:10px; letter-spacing:1.5px; }
.ticket-copy { padding:31px 36px; }
.ticket-copy .eyebrow { margin-bottom:10px; color:var(--blue); }
.ticket-copy h2 { font-size:clamp(35px,4vw,52px); }
.ticket-copy>p:last-child { max-width:590px; margin:13px 0 0; color:#62718e; }
.ticket-action { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:22px; border-left:1px dashed #96a8c7; background:#e5efff; }
.ticket-action a { display:flex; align-items:center; justify-content:space-between; width:100%; padding:13px 14px; border-radius:5px; color:#fff; background:var(--pink); font-weight:900; }
.ticket-action b { font-size:21px; }
.ticket-action small { color:#4e6082; font-size:9px; font-weight:800; letter-spacing:.8px; }
.site-footer { padding:20px 0; color:#fff; background:#050b1a; }
.footer-layout { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; }
.footer-brand img { width:34px; height:34px; }
.footer-brand span { line-height:1.12; }
.footer-brand small { display:block; margin-top:4px; color:#83a2cf; font-size:10px; font-weight:400; }
.footer-map { display:flex; flex-wrap:wrap; justify-content:center; gap:9px 15px; font-size:12px; font-weight:800; }
.footer-map a:hover { color:var(--cyan); }
.footer-copyright { margin:0; color:#aebbd2; font-size:12px; white-space:nowrap; }
.back-to-top { position:fixed; z-index:15; right:22px; bottom:22px; display:grid; width:49px; height:49px; place-items:center; border:1px solid rgba(69,226,255,.5); border-radius:50%; color:#fff; background:var(--navy); opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .2s ease,transform .2s ease; }
.back-to-top.is-visible { opacity:1; pointer-events:auto; transform:none; }
.back-to-top span { font-size:19px; line-height:1; }
.back-to-top b { font-size:10px; line-height:1; }
@media (max-width:800px) {
  .shell { width:min(100% - 32px,590px); }
  .nav-wrap { grid-template-columns:auto 1fr auto; min-height:65px; gap:10px; }
  .site-nav { display:none; }
  .nav-actions { justify-self:end; }
  .nav-download { min-height:39px; padding:0 13px; }
  .menu-toggle { display:block; }
  .site-nav.is-open { position:absolute; top:65px; right:0; left:0; display:block; padding:12px 16px 16px; border-bottom:1px solid #cbd8ec; background:linear-gradient(135deg,#f7f9fe,#e5efff); box-shadow:0 12px 22px rgba(7,20,46,.16); }
  .site-nav.is-open ul { display:grid; width:min(100%,590px); gap:0; margin:auto; border:1px solid #cbd8ec; border-radius:5px; overflow:hidden; background:#fff; }
  .site-nav.is-open li,.site-nav.is-open li:last-child { border:0; }
  .site-nav.is-open li + li { border-top:1px solid #e0e7f3; }
  .site-nav.is-open a { display:flex; min-height:45px; align-items:center; justify-content:flex-start; gap:9px; padding:0 13px; border:0; border-radius:0; color:var(--navy); font-size:13px; font-weight:900; }
  .site-nav.is-open a:before { display:inline; color:var(--pink); font-size:10px; }
  .site-nav.is-open a:after { margin-left:auto; color:var(--blue); content:"→"; font-size:17px; }
  .hero { min-height:0; padding:94px 0 54px; background:#07142e; }
  .hero:before,.hero:after { display:none; }
  .hero-layout { grid-template-columns:1fr; gap:31px; }
  .hero-copy { max-width:560px; margin:auto; text-align:center; }
  .hero h1 { font-size:50px; }
  .hero-intro { max-width:395px; margin:auto; font-size:15px; line-height:1.9; }
  .age-label { margin:14px auto 0; }
  .device-stage { min-height:442px; border-radius:5px; background:linear-gradient(145deg,#112968,#472099); }
  .orbit-one { width:320px; height:320px; }
  .orbit-two { width:390px; height:390px; }
  .phone-device { transform:rotate(3deg) scale(.93); }
  .device-caption { right:15px; bottom:10px; }
  .sets-section,.features-section,.screens-section,.review-section,.faq-section { padding:72px 0; }
  .split-heading,.review-heading { display:block; }
  .split-heading>p,.review-heading>p { margin:18px 0 0; }
  .look-carousel { margin-top:32px; padding:10px 10px 0; }
  .carousel-slide { height:340px; }
  .carousel-slide figcaption { padding:15px; }
  .carousel-slide figcaption b { font-size:19px; }
  .carousel-control { top:calc(50% - 23px); width:38px; height:38px; font-size:21px; }
  .carousel-prev { left:20px; }
  .carousel-next { right:20px; }
  .carousel-bottom { min-height:55px; }
  .features-section .section-heading { text-align:left; }
  .feature-grid { grid-template-columns:repeat(2,1fr); margin-top:36px; }
  .feature-grid article { min-height:205px; padding:17px; border-bottom:1px solid rgba(255,255,255,.16); }
  .feature-grid article:not(:first-child) { padding-left:17px; }
  .feature-grid h3 { margin-top:30px; font-size:17px; }
  .compact-heading { display:block; }
  .compact-heading>p:not(.eyebrow) { margin:18px 0 0; }
  .screens-scroll { margin-top:31px; overflow-x:auto; scroll-snap-type:x mandatory; }
  .screens-grid { display:flex; width:max-content; gap:16px; padding:0 10px 24px 0; }
  .screens-grid figure,.screens-grid figure:nth-child(2n) { width:67vw; max-width:270px; transform:none; scroll-snap-align:start; }
  .review-grid { grid-template-columns:1fr; gap:12px; margin-top:34px; }
  .review-grid article { min-height:0; }
  .faq-layout { grid-template-columns:1fr; gap:37px; }
  .download-section { padding:62px 0; }
  .download-ticket { grid-template-columns:1fr; box-shadow:7px 7px 0 var(--navy); }
  .ticket-code { flex-direction:row; min-height:70px; border-right:0; border-bottom:1px dashed #96a8c7; }
  .ticket-code span { font-size:30px; }
  .ticket-copy { padding:28px 22px; text-align:center; }
  .ticket-copy>p:last-child { margin-right:auto; margin-left:auto; }
  .ticket-action { border-top:1px dashed #96a8c7; border-left:0; }
  .ticket-action a { max-width:300px; }
  .footer-layout { grid-template-columns:1fr; justify-items:center; gap:15px; text-align:center; }
  .footer-brand { justify-content:center; }
  .footer-map { gap:9px 15px; }
  .footer-copyright { white-space:normal; }
  .back-to-top { right:14px; bottom:14px; }
  a,button,summary { -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; }
}
@media (max-width:390px) {
  .brand { gap:6px; font-size:12px; }
  .brand img { width:36px; height:36px; }
  .site-header .brand-copy b { font-size:13px; }
  .site-header .brand-copy small { font-size:10px; }
  .nav-download { padding:0 10px; font-size:12px; }
  .hero h1 { font-size:43px; letter-spacing:-3px; }
  .device-stage { min-height:416px; }
  .phone-device { transform:rotate(2deg) scale(.85); }
  .carousel-slide { height:285px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-grid article,.feature-grid article:not(:first-child) { min-height:0; padding:18px; border-left:1px solid rgba(255,255,255,.16); }
}