:root {
  --ink: #20273a;
  --muted: #6c7285;
  --base: #eef0f7;
  --panel: rgba(246,247,251,.86);
  --line: rgba(56,62,88,.09);
  --purple: #755cf2;
  --blue: #4d91ff;
  --mint: #76d8c6;
  --peach: #ffb48f;
  --yellow: #f6d86d;
  --shadow-raised: 18px 18px 42px rgba(131,138,161,.23), -16px -16px 36px rgba(255,255,255,.9);
  --shadow-small: 8px 8px 20px rgba(132,139,164,.2), -8px -8px 18px rgba(255,255,255,.88);
  --shadow-inset: inset 5px 5px 12px rgba(137,143,166,.17), inset -5px -5px 12px rgba(255,255,255,.82);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--base);
  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 12% 8%, rgba(255,180,143,.26), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(118,216,198,.27), transparent 29%),
    radial-gradient(circle at 56% 83%, rgba(117,92,242,.14), transparent 32%),
    linear-gradient(145deg, #f5f2f5, #eceff6 46%, #eff5f3);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
h1,h2,h3,p { margin-top: 0; }
:focus-visible { outline: 3px solid rgba(117,92,242,.42); 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: 14px; }
.skip:focus { top: 16px; }
.soft-panel {
  border: 1px solid rgba(255,255,255,.66);
  background: linear-gradient(145deg, rgba(248,249,252,.9), rgba(226,229,239,.76));
  box-shadow: var(--shadow-raised);
}
.site-header { position: sticky; top: 0; z-index: 50; padding: 12px 0; background: rgba(238,240,247,.72); backdrop-filter: blur(20px); }
.nav { min-height: 64px; padding: 9px 12px 9px 19px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-radius: 25px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 19px; font-weight: 950; }
.brand-dot {
  width: 40px; height: 40px; display: grid; place-items: center; position: relative;
  border: 1px solid rgba(255,255,255,.74); border-radius: 15px;
  background: linear-gradient(145deg, #8d78ff, #5943cd);
  box-shadow: 7px 7px 16px rgba(100,84,184,.28), -6px -6px 14px rgba(255,255,255,.76), inset 3px 3px 7px rgba(255,255,255,.28);
}
.brand-dot::before { content: ""; width: 11px; height: 17px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg) translate(-2px,2px); }
.nav-links { display: flex; align-items: center; gap: 27px; color: #62697d; font-size: 14px; font-weight: 780; }
.nav-links a:hover,.nav-links a[aria-current="page"] { color: #2a3044; }
.nav-toggle { display: none; border: 0; background: transparent; font-size: 25px; cursor: pointer; }
.btn {
  min-width: 134px;
  min-height: 48px;
  padding: 12px 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.54);
  border-radius: 16px;
  background: linear-gradient(145deg,#8069f7,#6149d8);
  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: 8px 8px 18px rgba(94,73,194,.27), -7px -7px 16px rgba(255,255,255,.72), inset 2px 2px 5px rgba(255,255,255,.22);
  transition: transform .22s ease, box-shadow .22s ease;
}
.btn:hover { transform: translateY(-3px); box-shadow: 11px 13px 24px rgba(94,73,194,.31), -7px -7px 16px rgba(255,255,255,.76); }
.btn-light { color: #3d4357; background: linear-gradient(145deg,#f8f9fc,#dfe2eb); box-shadow: var(--shadow-small); }
.btn-mint { color: #1e3b39; background: linear-gradient(145deg,#9be8d9,#58c5b2); box-shadow: 8px 8px 18px rgba(70,160,145,.22), -7px -7px 16px rgba(255,255,255,.75); }

.hero { padding: 110px 0 40px; text-align: center; overflow: hidden; }
.hero-copy-wrap { max-width: 900px; margin-inline: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 19px; color: #676c80; font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(118,216,198,.15); }
h1 { margin-bottom: 24px; color: #22283a; font-size: clamp(52px,7.4vw,98px); font-weight: 950; line-height: .94; letter-spacing: -.075em; }
h1 .accent { color: var(--purple); }
.hero-copy { max-width: 680px; margin: 0 auto 29px; color: var(--muted); font-size: 18px; }
.actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 13px; }
.platforms { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.tag { padding: 8px 12px; border: 1px solid rgba(255,255,255,.67); border-radius: 12px; background: linear-gradient(145deg,rgba(248,249,252,.88),rgba(224,227,236,.78)); color: #646b7f; font-size: 11px; font-weight: 850; box-shadow: 5px 5px 12px rgba(132,139,164,.14), -5px -5px 11px rgba(255,255,255,.75); }
.hero-stage { max-width: 1050px; margin: 38px auto 0; position: relative; }
.hero-media { align-self: center; height: auto; padding: 0; margin: 0; position: relative; }
.hero-media::before { content: ""; position: absolute; width: 680px; height: 390px; left: 50%; bottom: 10%; z-index: -1; transform: translateX(-50%); border-radius: 50%; background: rgba(117,92,242,.12); filter: blur(30px); }
.hero-media img { filter: drop-shadow(0 34px 38px rgba(78,83,111,.16)); }
.float-chip { position: absolute; padding: 13px 16px; border-radius: 16px; font-size: 12px; font-weight: 850; }
.chip-a { left: 2%; top: 29%; transform: rotate(-4deg); }.chip-b { right: 1%; bottom: 23%; transform: rotate(4deg); }
.live { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #4fc4ad; box-shadow: 0 0 0 5px rgba(79,196,173,.14); }

.metrics { padding: 30px 0 105px; }
.metric-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.metric { padding: 25px 15px; border-radius: 22px; text-align: center; }
.metric:nth-child(1) { background: linear-gradient(145deg,rgba(255,220,202,.9),rgba(236,208,199,.72)); }
.metric:nth-child(2) { background: linear-gradient(145deg,rgba(213,237,255,.9),rgba(201,217,239,.72)); }
.metric:nth-child(3) { background: linear-gradient(145deg,rgba(220,213,255,.9),rgba(205,199,238,.72)); }
.metric:nth-child(4) { background: linear-gradient(145deg,rgba(210,245,237,.9),rgba(195,226,220,.72)); }
.metric:nth-child(5) { background: linear-gradient(145deg,rgba(255,241,189,.9),rgba(235,220,175,.72)); }
.metric strong { display: block; color: #2a3043; font-size: 27px; line-height: 1.2; letter-spacing: -.04em; }
.metric span { color: #6e7384; font-size: 11px; }

.section { padding: 112px 0; }
.section-head { max-width: 750px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
h2 { margin-bottom: 18px; color: #252b3d; font-size: clamp(38px,4.5vw,62px); font-weight: 930; line-height: 1.06; letter-spacing: -.055em; }
.lead { color: var(--muted); font-size: 17px; }

.function-deck { padding: 20px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 16px; border-radius: 36px; }
.function-main { min-height: 510px; padding: 42px; position: relative; overflow: hidden; border-radius: 27px; background: linear-gradient(145deg,#2b3045,#1d2233); color: #fff; box-shadow: inset 8px 8px 18px rgba(255,255,255,.04), inset -8px -8px 20px rgba(0,0,0,.18); }
.function-main h3 { margin: 22px 0 10px; color: #fff; font-size: 30px; }
.function-main p { max-width: 520px; color: #aeb4c7; }
.function-icon { width: 61px; height: 61px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(145deg,#9a88ff,#644bdd); box-shadow: 7px 7px 18px rgba(0,0,0,.25), inset 4px 4px 9px rgba(255,255,255,.24); font-size: 24px; }
.route-map { position: absolute; left: 35px; right: 35px; bottom: 35px; height: 220px; }
.route-map::before,.route-map::after { content: ""; position: absolute; border: 2px dashed rgba(133,118,242,.4); border-radius: 50%; }
.route-map::before { width: 360px; height: 170px; left: 10%; bottom: 5px; transform: rotate(-8deg); }
.route-map::after { width: 210px; height: 110px; right: 5%; top: 12px; transform: rotate(18deg); }
.route-dot { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 8px rgba(118,216,198,.12); }
.r1 { left: 12%; bottom: 30%; }.r2 { left: 48%; top: 25%; background: var(--peach); }.r3 { right: 10%; bottom: 20%; background: var(--yellow); }
.function-side { display: grid; gap: 16px; }
.function-card { min-height: 159px; padding: 28px; border-radius: 25px; position: relative; overflow: hidden; }
.function-card:nth-child(1) { background: linear-gradient(145deg,#dce9ff,#c5d5ef); }
.function-card:nth-child(2) { background: linear-gradient(145deg,#ddf5ed,#c7e4da); }
.function-card:nth-child(3) { background: linear-gradient(145deg,#f4e1d8,#e2ccc4); }
.function-card h3 { margin-bottom: 6px; font-size: 21px; }
.function-card p { margin: 0; color: #666d80; font-size: 13px; }
.mini-knob { position: absolute; right: 24px; top: 24px; width: 42px; height: 42px; border-radius: 15px; background: linear-gradient(145deg,rgba(255,255,255,.7),rgba(196,201,215,.35)); box-shadow: var(--shadow-small); }

.devices { overflow: hidden; }
.device-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 72px; align-items: center; }
.device-copy .lead { margin-bottom: 28px; }
.device-media { align-self: center; height: auto; padding: 0; margin: 0; position: relative; }
.device-media img { filter: drop-shadow(0 28px 35px rgba(76,83,110,.15)); }
.use-list { display: grid; gap: 12px; }
.use-item { padding: 18px 20px; display: grid; grid-template-columns: 74px 1fr; gap: 16px; align-items: center; border-radius: 18px; }
.use-item b { color: #6b6f81; font-size: 11px; letter-spacing: .08em; }
.use-item strong { display: block; margin-bottom: 2px; }
.use-item span { color: var(--muted); font-size: 13px; }

.news-area { position: relative; }
.news-area::before { content: ""; position: absolute; inset: 12% 0; z-index: -1; background: rgba(255,255,255,.22); }
.news-board { display: grid; grid-template-columns: .95fr 1.05fr; gap: 16px; }
.lead-story { min-height: 520px; padding: 38px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 30px; background: linear-gradient(145deg,#dcecf7,#c9dce9); }
.story-label { color: #6a7183; font-size: 11px; font-weight: 900; letter-spacing: .11em; }
.lead-story h3 { margin: 20px 0 12px; font-size: 37px; line-height: 1.2; letter-spacing: -.035em; }
.lead-story p,.story-row p { color: #656d80; }
.story-links { display: grid; gap: 16px; }
.story-row { padding: 30px; display: grid; grid-template-columns: 1fr 70px; align-items: center; gap: 20px; border-radius: 25px; }
.story-row:nth-child(1) { background: linear-gradient(145deg,#e7def8,#d6cbea); }
.story-row:nth-child(2) { background: linear-gradient(145deg,#f3dfd6,#e6d0c8); }
.story-row h3 { margin: 12px 0 8px; font-size: 24px; }
.round-arrow { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 20px; background: linear-gradient(145deg,rgba(255,255,255,.72),rgba(207,209,221,.54)); box-shadow: var(--shadow-small); color: #494e61; font-size: 21px; font-weight: 900; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: #4b4f64; font-size: 13px; font-weight: 850; }

.testimonials { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.review { padding: 32px; border-radius: 27px; }
.review:nth-child(1) { transform: rotate(-1deg); }.review:nth-child(2) { transform: translateY(24px); }.review:nth-child(3) { transform: rotate(1deg); }
.stars { color: #765cf0; font-size: 13px; letter-spacing: 3px; }
.review blockquote { margin: 21px 0 27px; color: #41475b; font-size: 16px; }
.person { display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(145deg,#f8f9fc,#d9dce7); box-shadow: var(--shadow-small); font-weight: 900; }
.person span { display: block; color: var(--muted); font-size: 12px; }

.pricing { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.price-card { padding: 36px; border-radius: 29px; }
.price-card.best { background: linear-gradient(145deg,#8772fa,#6049d5); color: #fff; box-shadow: 18px 18px 42px rgba(91,72,190,.28), -14px -14px 32px rgba(255,255,255,.76); transform: translateY(-12px); }
.plan { color: #686f81; font-size: 13px; font-weight: 850; }
.best .plan,.best .price-note,.best li { color: rgba(255,255,255,.76); }
.price { margin: 20px 0 5px; font-size: 49px; 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: 25px 0; padding: 20px 0 0; border-top: 1px solid rgba(93,99,124,.12); list-style: none; }
.price-card li { margin: 10px 0; color: #5e6579; font-size: 14px; }
.price-card li::before { content: "●"; margin-right: 9px; color: var(--mint); font-size: 8px; }
.price-card .btn { width: 100%; }
.price-disclaimer { margin-top: 24px; color: var(--muted); text-align: center; font-size: 12px; }

.faq-list { max-width: 920px; margin: auto; display: grid; gap: 12px; }
.faq-list details { border-radius: 20px; }
.faq-list summary { padding: 22px 58px 22px 24px; position: relative; cursor: pointer; list-style: none; font-weight: 850; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 21px; top: 16px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg,#f7f8fb,#d9dce6); box-shadow: var(--shadow-small); color: #62687c; font-size: 21px; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding: 0 60px 23px 24px; margin: 0; color: var(--muted); }

.final-cta { padding: 55px 0 115px; }
.cta-box { padding: 70px; position: relative; overflow: hidden; border-radius: 36px; text-align: center; }
.cta-box::before,.cta-box::after { content: ""; position: absolute; border-radius: 50%; }
.cta-box::before { width: 230px; height: 230px; left: -60px; top: -90px; background: linear-gradient(145deg,#ffcfb8,#dfa78f); box-shadow: var(--shadow-small); }
.cta-box::after { width: 190px; height: 190px; right: -40px; bottom: -70px; background: linear-gradient(145deg,#a2ebdd,#5fc5b2); box-shadow: var(--shadow-small); }
.cta-box h2,.cta-box p,.cta-box .actions,.cta-box .eyebrow { position: relative; z-index: 2; }
.cta-box p { max-width: 700px; margin-inline: auto; color: var(--muted); }

.site-footer { padding: 70px 0 25px; background: #e7e9f0; border-top: 1px solid rgba(255,255,255,.6); }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4,1fr); gap: 44px; }
.footer-intro p { max-width: 280px; margin-top: 20px; color: var(--muted); font-size: 13px; }
.footer-col h3 { margin-bottom: 15px; 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(75,81,105,.1); color: #858a9b; font-size: 12px; }

.page-hero { padding: 130px 0 88px; text-align: center; }
.page-hero-inner { max-width: 880px; margin: auto; }
.page-hero h1 { font-size: clamp(50px,6vw,80px); }
.page-hero p { max-width: 650px; margin: 0 auto 28px; color: var(--muted); font-size: 17px; }
.page-badge { width: 170px; height: 70px; margin: 34px auto 0; display: grid; place-items: center; border-radius: 24px; font-size: 13px; font-weight: 900; }
.download-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.download-card { padding: 30px; display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: center; border-radius: 26px; }
.platform-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 21px; color: #383e53; font-size: 20px; font-weight: 950; box-shadow: var(--shadow-small); }
.download-card:nth-child(1) .platform-icon,.download-card:nth-child(4) .platform-icon { background: linear-gradient(145deg,#dce8ff,#bdcfe9); }
.download-card:nth-child(2) .platform-icon,.download-card:nth-child(5) .platform-icon { background: linear-gradient(145deg,#e6ddfa,#cbbfe7); }
.download-card:nth-child(3) .platform-icon,.download-card:nth-child(6) .platform-icon { background: linear-gradient(145deg,#d9f2e9,#badfd4); }
.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 { grid-column: span 2; width: 100%; min-width: 170px; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.step { padding: 31px; border-radius: 25px; }
.step b { display: block; margin-bottom: 27px; color: #757b8e; font-size: 11px; letter-spacing: .14em; }

.help-layout { display: grid; grid-template-columns: 260px 1fr; gap: 60px; align-items: start; }
.help-menu { position: sticky; top: 102px; padding: 21px; border-radius: 24px; }
.help-menu strong { display: block; padding: 8px 11px 12px; }
.help-menu a { display: block; padding: 9px 11px; border-radius: 11px; color: var(--muted); font-size: 13px; }
.help-menu a:hover { background: rgba(255,255,255,.55); color: var(--ink); box-shadow: var(--shadow-inset); }
.help-content article { padding: 0 0 57px; margin-bottom: 57px; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.help-content h2 { font-size: 39px; }
.help-content h3 { margin-top: 28px; }
.help-content p,.help-content li { color: var(--muted); }
.notice { padding: 20px 22px; border-radius: 18px; background: linear-gradient(145deg,#e2f3ee,#cbe4dc); box-shadow: var(--shadow-inset); color: #566c67; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
@media (max-width:980px) {
  .nav-links { display:none; position:absolute; top:86px; left:20px; right:20px; padding:20px; flex-direction:column; align-items:stretch; gap:4px; border-radius:20px; background:#eef0f7; box-shadow:var(--shadow-raised); }
  .nav-links.open { display:flex; }.nav-links a{padding:10px}.nav-toggle{display:block}.nav>.btn{display:none}
  .metric-grid{grid-template-columns:repeat(3,1fr)}.function-deck,.device-layout,.news-board{grid-template-columns:1fr}
  .function-main{min-height:500px}.story-links{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr}.download-grid{grid-template-columns:1fr}
}
@media (max-width:700px) {
  .container{width:min(100% - 28px,1180px)}.section{padding:84px 0}.hero{padding-top:80px}h1{font-size:50px}
  .float-chip{display:none}.metric-grid,.testimonials,.pricing,.steps,.story-links{grid-template-columns:1fr}.metric:nth-child(n){min-height:110px}
  .function-deck{padding:10px}.function-main{min-height:440px;padding:29px}.route-map::before{width:250px}.review:nth-child(n),.price-card.best{transform:none}
  .cta-box{padding:45px 27px}.footer-grid{grid-template-columns:1fr 1fr}.footer-intro{grid-column:span 2}.footer-bottom{flex-direction:column}
  .help-layout{grid-template-columns:1fr}.help-menu{position:static}
}

/* Hero media sizing guard */
.hero-media { align-self:center;height:auto;padding:0;margin-top:0;margin-bottom:0;overflow:visible;transform:none;clip-path:none; }
.hero-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; }
.device-layout { align-items:center; }
.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; }