:root {
  --night: #071525;
  --navy: #0c2239;
  --card: #122f4b;
  --sky: #6dd6ff;
  --mint: #93f4cc;
  --coral: #ff8e78;
  --white: #f7fbff;
  --muted: #a7bbcd;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--white); background: var(--night); font-family: Inter, "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; object-fit: cover; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.mobile-capsule { position: sticky; z-index: 20; top: 14px; max-width: 1180px; min-height: 68px; display: flex; align-items: center; gap: 25px; margin: 14px auto 0; padding: 9px 12px 9px 18px; background: #0c2239ee; border: 1px solid #294965; border-radius: 24px; box-shadow: 0 20px 55px #0006; backdrop-filter: blur(14px); }
.app-brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.app-glyph { display: grid; place-items: center; width: 42px; height: 42px; color: var(--night); background: var(--mint); border-radius: 14px; font-weight: 900; }
.app-brand strong { font-size: 15px; }
.mobile-capsule nav { display: flex; gap: 8px; margin-left: auto; }
.mobile-capsule nav a { padding: 11px 14px; color: var(--muted); border-radius: 13px; font-size: 13px; }
.mobile-capsule nav a[aria-current="page"] { color: var(--white); background: #1a3a58; }
.help-chip { padding: 11px 15px; color: var(--night); background: var(--sky); border-radius: 13px; font-size: 13px; font-weight: 800; }
.app-menu { display: none; }
.app-home > section, .journey-page > section, .journey-page > header, .feature-page > section, .feature-page > header, .updates-page > section, .updates-page > header, .updates-page > figure, .help-page > section, .help-page > header, .help-page > aside { max-width: 1180px; margin-inline: auto; }
.app-hero { min-height: 720px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; padding: 70px 24px 90px; }
.live-chip { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; color: var(--mint); background: #0d2943; border: 1px solid #28506e; border-radius: 999px; font-size: 11px; letter-spacing: .1em; }
.live-chip i { width: 7px; height: 7px; background: var(--mint); border-radius: 50%; box-shadow: 0 0 12px var(--mint); }
.app-hero-copy h2 { margin: 22px 0; font-size: clamp(48px, 6vw, 78px); line-height: 1.02; letter-spacing: -.045em; }
.app-hero-copy > p { max-width: 610px; color: var(--muted); font-size: 17px; line-height: 1.8; }
.mobile-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mobile-topics span { padding: 7px 10px; color: var(--sky); border: 1px solid #31516c; border-radius: 999px; font-size: 11px; }
.launch-actions { display: flex; gap: 12px; margin-top: 32px; }
.launch-actions a { padding: 15px 20px; border: 1px solid #35536d; border-radius: 15px; font-weight: 800; }
.launch-actions a:first-child { color: var(--night); background: var(--mint); border-color: var(--mint); }
.app-hero-copy > small { display: block; margin-top: 18px; color: #6e8498; }
.device-stage { position: relative; min-height: 590px; }
.device-main { position: absolute; left: 50%; top: 0; width: 330px; height: 590px; margin: 0; transform: translateX(-50%) rotate(3deg); overflow: hidden; border: 8px solid #203b53; border-radius: 50px; box-shadow: 0 40px 80px #0008; }
.device-main img { height: 100%; }
.device-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #061423d9, transparent 55%); }
.device-main figcaption { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 25px; display: grid; }
.device-main figcaption b { font-size: 25px; }
.device-main figcaption span { color: #c6d7e4; font-size: 12px; }
.floating-match, .floating-status { position: absolute; z-index: 4; padding: 20px; background: #122f4bee; border: 1px solid #31516c; border-radius: 20px; box-shadow: 0 20px 55px #0006; backdrop-filter: blur(12px); }
.floating-match { left: 0; bottom: 90px; display: grid; width: 240px; }
.floating-match span { color: var(--sky); font-size: 10px; letter-spacing: .12em; }
.floating-match b { margin: 8px 0; }
.floating-match small { color: var(--muted); }
.floating-status { right: 0; top: 90px; display: flex; align-items: center; gap: 12px; }
.floating-status i { color: var(--coral); font-size: 22px; }
.quick-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 0 24px 90px; }
.quick-tiles a { display: grid; gap: 8px; padding: 25px; background: var(--card); border: 1px solid #244764; border-radius: 24px; }
.quick-tiles i { color: var(--sky); font-size: 24px; }
.quick-tiles span { font-weight: 800; }
.quick-tiles small { color: var(--muted); }
.swipe-zone { padding: 85px 24px; background: #0b1c2f; border-radius: 44px; }
.swipe-zone header { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 35px; }
.swipe-zone header span, .feature-copy > span, .release-timeline header span, .story-cards header span { color: var(--sky); font-size: 10px; letter-spacing: .15em; }
.swipe-zone h2, .feature-copy h2, .release-timeline h2, .story-cards h2 { margin: 8px 0; font-size: 42px; }
.swipe-zone header p { max-width: 400px; color: var(--muted); }
.swipe-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.swipe-track article { overflow: hidden; background: var(--card); border-radius: 22px; }
.swipe-track img { height: 250px; }
.swipe-track h3, .swipe-track p { margin-inline: 22px; }
.swipe-track p { margin-bottom: 25px; color: var(--muted); }
.app-feature-stack { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; padding: 110px 24px; }
.feature-copy p { color: var(--muted); line-height: 1.8; }
.feature-cards { display: grid; gap: 13px; }
.feature-cards article { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 23px; background: #102a44; border: 1px solid #274866; border-radius: 22px; }
.feature-cards i { display: grid; place-items: center; width: 56px; height: 56px; color: var(--night); background: var(--mint); border-radius: 18px; font-size: 22px; }
.feature-cards h3 { margin: 3px 0; }
.feature-cards p { margin: 7px 0 0; color: var(--muted); }
.release-timeline { padding: 85px 24px; }
.release-timeline ol { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 0; list-style: none; }
.release-timeline ol::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: #2a526e; }
.release-timeline li { position: relative; padding-top: 35px; }
.release-timeline li::before { content: ""; position: absolute; top: 0; width: 14px; height: 14px; background: var(--coral); border: 4px solid var(--night); border-radius: 50%; box-shadow: 0 0 0 1px var(--coral); }
.release-timeline p { color: var(--muted); }
.mobile-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 24px 90px; }
.mobile-benefits article { display: flex; align-items: center; gap: 18px; padding: 28px; background: var(--mint); border-radius: 22px; color: var(--night); }
.mobile-benefits strong { font-size: 35px; }
.story-cards { padding: 80px 24px; background: #0b1c2f; border-radius: 44px; }
.story-cards > div { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.story-cards blockquote { margin: 0; padding: 30px; color: #dce9f2; background: #122f4b; border-radius: 22px; font-size: 20px; line-height: 1.6; }
.sheet-faq { padding: 100px 24px; }
.sheet-faq button { width: 100%; display: flex; justify-content: space-between; padding: 22px 0; color: var(--white); border: 0; border-bottom: 1px solid #2b4b65; background: transparent; cursor: pointer; text-align: left; }
.sheet-answer { margin-top: 25px; padding: 26px; color: var(--night); background: var(--sky); border-radius: 22px; }
.sheet-answer p { margin-bottom: 0; }
.launch-dock { display: flex; justify-content: space-between; align-items: center; padding: 45px; margin-bottom: 100px; color: var(--night); background: var(--coral); border-radius: 30px; }
.launch-dock span { font-size: 10px; letter-spacing: .15em; }
.launch-dock h2 { margin: 8px 0 0; }
.launch-dock a { display: grid; place-items: center; width: 64px; height: 64px; color: var(--white); background: var(--night); border-radius: 20px; }
.app-footer { padding: 60px max(24px, calc((100vw - 1180px) / 2)); background: #04101c; border-top: 1px solid #1f384d; }
.app-footer-title { font-size: 20px; font-weight: 800; }
.app-footer p { max-width: 820px; color: #7f96aa; font-size: 11px; line-height: 1.8; }
.app-footer nav { display: flex; gap: 24px; margin-top: 25px; color: var(--sky); font-size: 13px; }
.journey-cover, .feature-cover, .updates-heading, .help-heading { padding: 110px 24px 75px; }
.journey-cover > span, .feature-cover span, .updates-heading span, .help-heading span { color: var(--mint); font-size: 11px; letter-spacing: .15em; }
.journey-cover h2, .feature-cover h2, .updates-heading h2, .help-heading h2 { max-width: 900px; margin: 18px 0; font-size: clamp(48px, 7vw, 86px); line-height: 1.03; }
.journey-cover p, .feature-cover p, .updates-heading p, .help-heading p { max-width: 740px; color: var(--muted); line-height: 1.8; }
.journey-path { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 24px 90px; }
.journey-path article { display: grid; gap: 15px; padding: 30px; background: var(--card); border-radius: 24px; }
.journey-path b { font-size: 23px; }
.journey-path p { color: var(--muted); line-height: 1.7; }
.journey-path span { color: var(--sky); font-size: 12px; }
.journey-visual { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; padding: 70px; background: #0b1c2f; border-radius: 40px; }
.journey-visual > div { overflow: hidden; border-radius: 35px; }
.journey-visual img { height: 520px; }
.journey-visual h3 { font-size: 40px; }
.journey-visual p { color: var(--muted); line-height: 1.8; }
.feature-cover { display: grid; grid-template-columns: 1fr 390px; gap: 60px; align-items: center; }
.feature-cover figure { margin: 0; overflow: hidden; border: 7px solid #1f3b52; border-radius: 45px; }
.feature-cover img { height: 520px; }
.feature-cover figcaption { padding: 12px; color: var(--muted); font-size: 11px; }
.stack-list { display: grid; gap: 15px; padding: 20px 24px 90px; }
.stack-list article { display: grid; grid-template-columns: 100px 1fr 60px; gap: 30px; align-items: center; padding: 30px; background: var(--card); border-radius: 25px; }
.stack-list article > span { color: var(--sky); font-size: 10px; }
.stack-list article p { color: var(--muted); }
.stack-list article > i { color: var(--coral); font-size: 28px; }
.touch-guidelines { padding: 80px 24px; background: var(--mint); color: var(--night); border-radius: 40px; }
.touch-guidelines h2 { font-size: 42px; }
.touch-guidelines > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.touch-guidelines article { padding-top: 20px; border-top: 2px solid var(--night); }
.updates-heading { text-align: center; }
.updates-heading h2, .updates-heading p { margin-inline: auto; }
.update-timeline { position: relative; max-width: 850px; padding: 20px 24px 80px; }
.update-timeline::before { content: ""; position: absolute; left: 142px; top: 20px; bottom: 80px; width: 2px; background: #2c516d; }
.update-timeline article { position: relative; display: grid; grid-template-columns: 95px 1fr; gap: 50px; padding-bottom: 50px; }
.update-timeline article::before { content: ""; position: absolute; left: 112px; top: 3px; width: 13px; height: 13px; background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 6px var(--night); }
.update-timeline article > span { color: var(--sky); font-size: 11px; }
.update-timeline h3 { margin-top: 0; font-size: 28px; }
.update-timeline p { color: var(--muted); }
.updates-image { padding: 0 24px 100px; }
.updates-image img { height: 430px; border-radius: 30px; }
.updates-image figcaption { padding: 10px; color: var(--muted); font-size: 11px; }
.help-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 24px 55px; }
.help-shortcuts a { display: grid; gap: 7px; padding: 26px; background: var(--card); border-radius: 22px; }
.help-shortcuts i { color: var(--mint); font-size: 23px; }
.help-shortcuts span { color: var(--muted); font-size: 12px; }
.help-sheet { display: grid; gap: 13px; padding: 20px 24px 80px; }
.help-sheet article { padding: 30px; border: 1px solid #294b65; border-radius: 25px; }
.help-sheet article span { color: var(--sky); font-size: 10px; letter-spacing: .15em; }
.help-sheet p { color: var(--muted); line-height: 1.8; }
.help-visual { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; margin-bottom: 100px; background: #0b1c2f; border-radius: 35px; overflow: hidden; }
.help-visual img { height: 390px; }
.help-visual div { padding: 35px; }
.help-visual h3 { font-size: 34px; }
.help-visual p { color: var(--muted); line-height: 1.8; }

@media (max-width: 980px) {
  .mobile-capsule { margin-inline: 14px; }
  .mobile-capsule nav { position: absolute; top: 76px; right: 0; display: none; width: min(330px, calc(100vw - 28px)); padding: 13px; background: #0c2239; border: 1px solid #294965; border-radius: 20px; box-shadow: 0 25px 55px #0009; }
  .mobile-capsule nav.is-open { display: grid; }
  .help-chip { margin-left: auto; }
  .app-menu { display: block; padding: 11px; color: var(--white); border: 1px solid #37556d; background: transparent; border-radius: 12px; }
  .app-hero, .app-feature-stack, .journey-visual, .feature-cover, .help-visual { grid-template-columns: 1fr; }
  .device-stage { max-width: 650px; width: 100%; margin: auto; }
  .quick-tiles { grid-template-columns: 1fr 1fr; }
  .swipe-track { overflow-x: auto; grid-template-columns: repeat(3, 300px); scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .swipe-track article { scroll-snap-align: start; }
}

@media (max-width: 600px) {
  .mobile-capsule { top: 8px; min-height: 62px; margin-top: 8px; padding-left: 10px; border-radius: 19px; }
  .app-brand strong, .help-chip { display: none; }
  .app-glyph { width: 42px; height: 42px; }
  .mobile-capsule nav { top: 68px; }
  .app-menu { margin-left: auto; }
  .app-hero { min-height: auto; padding-top: 60px; }
  .app-hero-copy h2 { font-size: 49px; }
  .launch-actions { flex-direction: column; }
  .device-stage { min-height: 520px; }
  .device-main { width: 270px; height: 490px; }
  .floating-match { left: -5px; bottom: 40px; width: 190px; }
  .floating-status { right: -3px; top: 65px; }
  .quick-tiles { grid-template-columns: 1fr 1fr; padding-inline: 16px; }
  .quick-tiles a { padding: 20px; }
  .swipe-zone, .story-cards, .touch-guidelines { margin-inline: 10px; padding: 50px 20px; border-radius: 28px; }
  .swipe-zone header { align-items: flex-start; flex-direction: column; }
  .swipe-track { grid-template-columns: repeat(3, 82vw); }
  .release-timeline ol, .mobile-benefits, .story-cards > div, .journey-path, .touch-guidelines > div, .help-shortcuts { grid-template-columns: 1fr; }
  .release-timeline ol::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .release-timeline li { padding: 0 0 30px 35px; }
  .release-timeline li::before { left: 0; }
  .launch-dock { margin-inline: 12px; padding: 28px; }
  .app-footer nav { flex-wrap: wrap; }
  .journey-cover h2, .feature-cover h2, .updates-heading h2, .help-heading h2 { font-size: 50px; }
  .journey-visual { margin-inline: 10px; padding: 25px; }
  .stack-list article { grid-template-columns: 1fr auto; }
  .stack-list article > span { grid-column: 1 / -1; }
  .update-timeline::before { left: 30px; }
  .update-timeline article { grid-template-columns: 1fr; gap: 10px; padding-left: 35px; }
  .update-timeline article::before { left: 0; }
  .help-visual { margin-inline: 10px; }
}