:root {
  --deep: #12223c;
  --text: #243551;
  --muted: #657590;
  --ice: #f4fbff;
  --clear: rgba(255,255,255,.58);
  --clear-strong: rgba(255,255,255,.78);
  --line: rgba(66, 111, 164, .18);
  --aqua: #16cddd;
  --blue: #4d7cff;
  --lilac: #aa8cff;
  --rose: #ff9dcc;
  --shadow: 0 28px 80px rgba(53, 91, 139, .16);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: #edf8ff;
  font-family: "Microsoft YaHei UI", "PingFang SC", Arial, sans-serif;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -5;
  background:
    radial-gradient(circle at 8% 4%, rgba(170,140,255,.23), transparent 27%),
    radial-gradient(circle at 88% 15%, rgba(22,205,221,.2), transparent 30%),
    radial-gradient(circle at 53% 83%, rgba(255,157,204,.16), transparent 32%),
    linear-gradient(145deg, #fbfdff 0%, #edf8ff 47%, #f7f2ff 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: .35;
  background-image: linear-gradient(rgba(53,90,130,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(53,90,130,.06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
:focus-visible { outline: 3px solid rgba(77,124,255,.45); outline-offset: 4px; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.skip { position: fixed; top: -60px; left: 16px; z-index: 100; padding: 10px 16px; background: #fff; border-radius: 12px; }
.skip:focus { top: 16px; }

.glass {
  border: 1px solid rgba(255,255,255,.86);
  background: linear-gradient(140deg, rgba(255,255,255,.75), rgba(255,255,255,.32));
  box-shadow: inset 0 0 0 1px rgba(100,160,220,.08), var(--shadow);
  backdrop-filter: blur(26px) saturate(150%);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(72,112,160,.12);
  background: rgba(244,251,255,.68);
  backdrop-filter: blur(24px) saturate(160%);
}
.nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 900; color: var(--deep); }
.brand-gem {
  width: 39px; height: 39px; position: relative; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.95); border-radius: 11px 19px 13px 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(142,231,245,.5) 35%, rgba(126,132,255,.42) 70%, rgba(255,255,255,.72));
  box-shadow: inset 8px 8px 12px rgba(255,255,255,.7), inset -8px -8px 15px rgba(67,110,190,.22), 0 8px 20px rgba(74,115,168,.2);
  transform: rotate(-5deg);
}
.brand-gem::before {
  content: ""; width: 11px; height: 17px; border: solid #28486c; border-width: 0 4px 4px 0; transform: rotate(45deg) translate(-2px, 2px);
}
.nav-links { display: flex; align-items: center; gap: 27px; color: #52647e; font-size: 14px; font-weight: 750; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #263b59; }
.nav-toggle { display: none; border: 0; background: transparent; color: var(--deep); font-size: 25px; cursor: pointer; }
.btn {
  min-width: 132px;
  min-height: 48px;
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 15px;
  background: linear-gradient(135deg, #416ee9, #675be9);
  color: #fff;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
  box-shadow: 0 14px 30px rgba(72,91,210,.25), inset 0 1px rgba(255,255,255,.34);
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 19px 38px rgba(72,91,210,.3); }
.btn-clear { color: var(--deep); background: rgba(255,255,255,.58); border-color: rgba(83,127,177,.2); box-shadow: inset 0 1px rgba(255,255,255,.9), 0 12px 30px rgba(61,98,145,.1); backdrop-filter: blur(12px); }
.btn-aqua { background: linear-gradient(135deg, #05b9d2, #4d7cff); }

.hero {
  min-height: 810px;
  padding: 92px 0 128px;
  display: grid;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  color: #49647f; font-size: 12px; font-weight: 900; letter-spacing: .16em;
}
.eyebrow::before { content: ""; width: 9px; height: 9px; border: 1px solid #53a9c8; transform: rotate(45deg); background: rgba(255,255,255,.6); box-shadow: 0 0 14px rgba(22,205,221,.5); }
h1 { margin-bottom: 25px; color: var(--deep); font-size: clamp(52px, 6.2vw, 88px); font-weight: 950; line-height: .98; letter-spacing: -.07em; }
h1 .prism {
  display: block;
  color: transparent;
  background: linear-gradient(100deg, #257fc0, #5a65e8 42%, #9a58c6 72%, #1aaec7);
  background-clip: text;
  -webkit-background-clip: text;
}
.hero-copy { max-width: 590px; margin-bottom: 30px; color: var(--muted); font-size: 17px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.platforms { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 25px; }
.tag { padding: 7px 11px; border: 1px solid rgba(81,127,175,.18); border-radius: 10px; background: rgba(255,255,255,.48); color: #586b84; font-size: 11px; font-weight: 800; backdrop-filter: blur(12px); }
.hero-visual { align-self: center; position: relative; height: auto; padding: 0; margin: 0; }
.hero-visual::before {
  content: ""; position: absolute; width: 540px; height: 540px; left: 50%; top: 50%; z-index: -1;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(89,205,234,.24) 32%, rgba(153,116,246,.2) 54%, transparent 70%);
  filter: blur(5px);
}
.hero-visual img { filter: drop-shadow(0 36px 46px rgba(48,82,130,.2)); }
.spark { position: absolute; width: 14px; height: 14px; background: rgba(255,255,255,.8); border: 1px solid rgba(91,154,204,.28); transform: rotate(45deg); box-shadow: 0 0 18px rgba(27,203,223,.45); animation: float 5s ease-in-out infinite; }
.spark-a { top: 8%; left: 14%; }.spark-b { right: 9%; bottom: 20%; animation-delay: -2s; }.spark-c { right: 15%; top: 17%; width: 9px; height: 9px; animation-delay: -3s; }
.connection-pill { position: absolute; left: 6%; bottom: 11%; padding: 13px 16px; border-radius: 14px; font-size: 12px; font-weight: 850; }
.status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #19c9b8; box-shadow: 0 0 0 6px rgba(25,201,184,.12); }

.proof { margin-top: -70px; position: relative; z-index: 5; }
.proof-rail { padding: 16px; display: grid; grid-template-columns: 1.3fr repeat(5, 1fr); gap: 8px; border-radius: 24px; }
.proof-intro { padding: 18px 20px; color: #496078; font-size: 13px; display: flex; align-items: center; }
.metric { padding: 18px 12px; border-left: 1px solid rgba(75,118,165,.12); text-align: center; }
.metric strong { display: block; color: var(--deep); font-size: 24px; line-height: 1.2; letter-spacing: -.04em; }
.metric span { color: var(--muted); font-size: 11px; }

.section { padding: 116px 0; }
.section-head { max-width: 730px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
h2 { margin-bottom: 18px; color: var(--deep); font-size: clamp(36px, 4.3vw, 60px); font-weight: 930; line-height: 1.07; letter-spacing: -.052em; }
.lead { color: var(--muted); font-size: 17px; }

.feature-flow { position: relative; display: grid; gap: 18px; }
.feature-flow::before { content: ""; position: absolute; top: 86px; bottom: 86px; left: 50%; width: 1px; background: linear-gradient(transparent, rgba(69,116,171,.3), transparent); }
.feature-row { display: grid; grid-template-columns: 1fr 130px 1fr; align-items: center; min-height: 245px; }
.feature-row:nth-child(even) .feature-card { grid-column: 3; }
.feature-row:nth-child(even) .feature-node { grid-column: 2; grid-row: 1; }
.feature-card { padding: 34px; border-radius: 22px; }
.feature-card h3 { margin-bottom: 9px; color: var(--deep); font-size: 24px; }
.feature-card p { margin: 0; color: var(--muted); }
.feature-node {
  grid-column: 2; width: 58px; height: 58px; margin: auto; display: grid; place-items: center; position: relative; z-index: 2;
  border: 1px solid rgba(255,255,255,.95); border-radius: 17px; color: #315776; font-weight: 950;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(90,216,232,.35), rgba(161,132,244,.32));
  box-shadow: inset 5px 5px 10px rgba(255,255,255,.65), inset -5px -5px 13px rgba(73,118,190,.14), 0 12px 35px rgba(74,112,167,.17);
  transform: rotate(45deg);
}
.feature-node span { transform: rotate(-45deg); }
.feature-empty { min-height: 1px; }

.device-section { overflow: hidden; }
.device-stage { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: center; }
.device-media { align-self: center; position: relative; height: auto; padding: 0; margin: 0; }
.device-media img { filter: drop-shadow(0 30px 42px rgba(43,82,131,.18)); }
.device-copy .lead { margin-bottom: 28px; }
.persona-tabs { display: grid; gap: 10px; }
.persona { padding: 18px 20px; display: grid; grid-template-columns: 82px 1fr; gap: 16px; border-bottom: 1px solid rgba(68,112,160,.15); }
.persona b { color: #46627f; font-size: 12px; letter-spacing: .08em; }
.persona strong { display: block; margin-bottom: 3px; color: var(--deep); }
.persona span { color: var(--muted); font-size: 13px; }

.insight-section { position: relative; }
.insight-section::before { content: ""; position: absolute; inset: 8% 0; z-index: -1; background: linear-gradient(110deg, rgba(83,209,228,.12), rgba(171,137,245,.12)); transform: skewY(-3deg); }
.insight-track { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 14px; }
.story { min-height: 380px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 24px; }
.story:first-child { min-height: 460px; background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(198,235,246,.42)); }
.story-label { color: #5c7893; font-size: 11px; font-weight: 850; letter-spacing: .12em; }
.story h3 { margin: 16px 0 11px; color: var(--deep); font-size: 25px; line-height: 1.28; }
.story:first-child h3 { font-size: 35px; }
.story p { color: var(--muted); font-size: 14px; }
.text-link { display: inline-flex; gap: 8px; align-items: center; color: #385b98; font-size: 13px; font-weight: 850; }

.review-cloud { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.quote { padding: 30px; border-radius: 22px; }
.quote:nth-child(1) { grid-column: 1 / span 5; }
.quote:nth-child(2) { grid-column: 6 / span 7; transform: translateY(34px); }
.quote:nth-child(3) { grid-column: 3 / span 7; margin-top: 34px; }
.stars { color: #4c79d8; font-size: 13px; letter-spacing: 3px; }
.quote blockquote { margin: 19px 0 24px; color: #334760; font-size: 16px; }
.person { display: flex; align-items: center; gap: 12px; }
.avatar { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 14px; background: linear-gradient(145deg,#fff,rgba(123,209,235,.42),rgba(172,137,245,.4)); color: var(--deep); font-weight: 900; box-shadow: inset 0 0 12px rgba(255,255,255,.8); }
.person span { display: block; color: var(--muted); font-size: 12px; }

.pricing-shell { padding: 22px; border-radius: 30px; }
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.price-card { padding: 34px; border: 1px solid rgba(80,125,172,.12); border-radius: 21px; background: rgba(255,255,255,.38); }
.price-card.best { position: relative; background: linear-gradient(150deg, rgba(255,255,255,.86), rgba(198,233,247,.5), rgba(205,188,250,.38)); box-shadow: 0 20px 50px rgba(70,103,157,.14); }
.recommend { position: absolute; right: 20px; top: 20px; padding: 5px 9px; border-radius: 8px; background: #506fe3; color: #fff; font-size: 10px; font-weight: 850; }
.plan { color: #58718c; font-size: 13px; font-weight: 850; }
.price { margin: 20px 0 5px; color: var(--deep); font-size: 48px; font-weight: 950; line-height: 1; letter-spacing: -.05em; }
.price small { font-size: 14px; letter-spacing: 0; }
.price-note { min-height: 44px; color: var(--muted); font-size: 13px; }
.price-card ul { margin: 24px 0; padding: 20px 0 0; border-top: 1px solid rgba(73,118,164,.13); list-style: none; }
.price-card li { margin: 9px 0; color: #536782; font-size: 14px; }
.price-card li::before { content: "◆"; margin-right: 9px; color: #58a8d5; font-size: 8px; }
.price-card .btn { width: 100%; }
.price-disclaimer { margin: 22px 0 0; color: var(--muted); text-align: center; font-size: 12px; }

.faq-wrap { max-width: 940px; margin: auto; }
.faq-wrap details { margin-bottom: 10px; border: 1px solid rgba(255,255,255,.78); border-radius: 16px; background: rgba(255,255,255,.4); backdrop-filter: blur(18px); }
.faq-wrap summary { padding: 21px 58px 21px 23px; position: relative; cursor: pointer; list-style: none; color: var(--deep); font-weight: 850; }
.faq-wrap summary::-webkit-details-marker { display: none; }
.faq-wrap summary::after { content: "◇"; position: absolute; right: 22px; top: 18px; color: #5b85ae; font-size: 20px; }
.faq-wrap details[open] summary::after { content: "◆"; }
.faq-wrap details p { padding: 0 58px 22px 23px; margin: 0; color: var(--muted); }

.final-cta { padding: 60px 0 115px; }
.cta-prism { padding: 70px; position: relative; overflow: hidden; border-radius: 30px; }
.cta-prism::before { content: ""; position: absolute; width: 360px; height: 360px; right: -90px; top: -145px; border-radius: 42% 58% 65% 35%; background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(37,205,225,.32), rgba(125,103,239,.3)); border: 1px solid rgba(255,255,255,.7); transform: rotate(22deg); }
.cta-prism h2, .cta-prism p, .cta-prism .actions, .cta-prism .eyebrow { position: relative; z-index: 2; max-width: 700px; }
.cta-prism p { color: var(--muted); }

.site-footer { padding: 68px 0 24px; border-top: 1px solid rgba(74,117,164,.13); background: rgba(232,245,253,.58); backdrop-filter: blur(15px); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 45px; }
.footer-intro p { max-width: 280px; margin-top: 20px; color: var(--muted); font-size: 13px; }
.footer-col h3 { margin-bottom: 15px; color: var(--deep); font-size: 13px; }
.footer-col a { display: block; margin: 9px 0; color: var(--muted); font-size: 13px; }
.footer-bottom { margin-top: 52px; padding-top: 20px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(74,117,164,.12); color: #7d8ca2; font-size: 12px; }

.page-hero { padding: 135px 0 90px; }
.page-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.page-hero h1 { font-size: clamp(50px, 5.8vw, 78px); }
.page-hero p { max-width: 620px; color: var(--muted); font-size: 17px; }
.page-orb { min-height: 360px; position: relative; display: grid; place-items: center; border-radius: 32px; }
.page-orb::before { content: ""; width: 220px; height: 220px; border-radius: 40% 60% 48% 52%; background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(71,205,231,.32), rgba(151,114,244,.28)); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 20px 20px 35px rgba(255,255,255,.5), inset -18px -18px 30px rgba(81,112,205,.15), 0 34px 70px rgba(63,100,150,.17); transform: rotate(18deg); }
.page-orb strong { position: absolute; color: var(--deep); font-size: 20px; }

.download-stack { display: grid; gap: 12px; }
.download-card { padding: 25px; display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 20px; border-radius: 20px; }
.platform-icon { width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(96,211,230,.35), rgba(157,128,245,.28)); color: #294969; font-size: 20px; font-weight: 950; box-shadow: inset 6px 6px 13px rgba(255,255,255,.65), inset -5px -5px 13px rgba(68,113,183,.12); }
.download-card h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.02em; }
.download-card p { margin: 0; color: var(--muted); font-size: 13px; }
.download-card .btn { min-width: 142px; }
.install-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.install-step { padding: 30px; border-radius: 20px; }
.step-index { display: block; margin-bottom: 30px; color: #67809b; font-size: 12px; font-weight: 900; letter-spacing: .15em; }

.help-layout { display: grid; grid-template-columns: 265px 1fr; gap: 58px; align-items: start; }
.help-menu { position: sticky; top: 102px; padding: 22px; border-radius: 20px; }
.help-menu strong { display: block; padding: 8px 11px 12px; color: var(--deep); }
.help-menu a { display: block; padding: 9px 11px; border-radius: 10px; color: var(--muted); font-size: 13px; }
.help-menu a:hover { background: rgba(255,255,255,.65); color: var(--deep); }
.help-content article { padding: 0 0 56px; margin-bottom: 56px; border-bottom: 1px solid rgba(71,116,164,.14); scroll-margin-top: 110px; }
.help-content h2 { font-size: 39px; }
.help-content h3 { margin-top: 28px; color: var(--deep); }
.help-content p, .help-content li { color: var(--muted); }
.notice { padding: 19px 21px; border: 1px solid rgba(255,255,255,.8); border-left: 3px solid #50a6d6; border-radius: 10px 16px 16px 10px; background: rgba(255,255,255,.48); color: var(--muted); }

@keyframes float { 50% { transform: translateY(-16px) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (max-width: 980px) {
  .nav-links { display: none; position: absolute; top: 76px; left: 20px; right: 20px; padding: 20px; flex-direction: column; align-items: stretch; gap: 4px; border: 1px solid rgba(255,255,255,.9); border-radius: 18px; background: rgba(245,251,255,.95); box-shadow: var(--shadow); }
  .nav-links.open { display: flex; }.nav-links a { padding: 10px; }.nav-toggle { display: block; }.nav > .btn { display: none; }
  .hero { min-height: auto; }.hero-grid, .page-hero-grid, .device-stage { grid-template-columns: 1fr; }
  .hero-visual { max-width: 680px; margin-inline: auto; }
  .proof-rail { grid-template-columns: repeat(3,1fr); }.proof-intro { grid-column: span 3; justify-content: center; }
  .metric:nth-child(5) { border-left: 0; }
  .insight-track { grid-template-columns: 1fr 1fr; }.story:first-child { grid-column: span 2; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}
@media (max-width: 700px) {
  .container { width: min(100% - 28px,1180px); }.section { padding: 86px 0; }.hero { padding: 78px 0 120px; }
  h1 { font-size: 50px; }.proof-rail { grid-template-columns: 1fr 1fr; }.proof-intro { grid-column: span 2; }.metric { border-left: 0; border-top: 1px solid rgba(75,118,165,.12); }
  .feature-flow::before { left: 29px; }.feature-row { grid-template-columns: 60px 1fr; gap: 12px; min-height: auto; margin-bottom: 20px; }
  .feature-row .feature-card, .feature-row:nth-child(even) .feature-card { grid-column: 2; grid-row: 1; }.feature-row .feature-node, .feature-row:nth-child(even) .feature-node { grid-column: 1; grid-row: 1; width: 48px; height: 48px; }
  .feature-empty { display: none; }.insight-track, .pricing, .install-steps { grid-template-columns: 1fr; }.story:first-child { grid-column: auto; }
  .review-cloud { display: grid; grid-template-columns: 1fr; }.quote:nth-child(n) { grid-column: auto; transform: none; margin-top: 0; }
  .pricing-shell { padding: 10px; }.cta-prism { padding: 45px 27px; }.cta-prism::before { opacity: .24; }
  .footer-grid { grid-template-columns: 1fr 1fr; }.footer-intro { grid-column: span 2; }.footer-bottom { flex-direction: column; }
  .download-card { grid-template-columns: 52px 1fr; }.download-card .btn { grid-column: span 2; width: 100%; min-width: 160px; }
  .help-layout { grid-template-columns: 1fr; }.help-menu { position: static; }
}

/* Hero media sizing guard */
.hero-grid { align-items: center; }
.hero-visual { align-self: center; height: auto; padding: 0; margin-top: 0; margin-bottom: 0; overflow: visible; transform: none; clip-path: none; }
.hero-visual img { display: block; width: 100%; height: auto; min-height: 0; max-height: none; margin: 0; padding: 0; object-fit: contain; object-position: center; transform: none; clip-path: none; }
.device-media { align-self: center; height: auto; padding: 0; margin-top: 0; margin-bottom: 0; overflow: visible; transform: none; clip-path: none; }
.device-media img { display: block; width: 100%; height: auto; min-height: 0; max-height: none; margin: 0; padding: 0; object-fit: contain; object-position: center; transform: none; clip-path: none; }