:root {
  --bg: #100611;
  --panel: rgba(255, 255, 255, .06);
  --pink: #ff356f;
  --purple: #9e40ff;
  --text: #fffaff;
  --muted: #b9aebd;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: "Microsoft YaHei", system-ui, sans-serif; overflow-x: hidden; }
button { font: inherit; cursor: pointer; }
.container { width: min(1120px, calc(100% - 48px)); margin: auto; }
.page-glow { position: fixed; border-radius: 50%; filter: blur(5px); pointer-events: none; }
.glow-one { width: 480px; height: 480px; background: rgba(160, 42, 255, .18); top: -260px; right: -130px; }
.glow-two { width: 420px; height: 420px; background: rgba(255, 24, 96, .14); left: -260px; top: 270px; }
.site-header { height: 92px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.brand { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.brand-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 15px; background: linear-gradient(135deg, #ff4174, #a43cff); box-shadow: 0 8px 23px rgba(209, 51, 181, .4); }
.backup-link { color: #e9ddeb; border: 1px solid rgba(255,255,255,.15); border-radius: 20px; background: transparent; padding: 8px 15px; font-size: 13px; }
.hero { min-height: 550px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; position: relative; }
.eyebrow { color: #e7c0ff; font-size: 13px; letter-spacing: 2px; margin: 0 0 18px; }
.eyebrow span { width: 6px; height: 6px; display: inline-block; background: var(--pink); border-radius: 50%; vertical-align: 2px; margin-right: 8px; box-shadow: 0 0 12px var(--pink); }
h1 { font-size: clamp(43px, 5.4vw, 68px); margin: 0; line-height: 1.15; letter-spacing: -2px; }
h1 strong { color: transparent; background: linear-gradient(95deg, #ff4d7f, #bd6aff); background-clip: text; }
.intro { max-width: 470px; color: var(--muted); margin: 22px 0 28px; font-size: 16px; line-height: 1.8; }
.download-actions { display: flex; gap: 13px; flex-wrap: wrap; }
.download-button { min-width: 176px; min-height: 59px; border: 0; border-radius: 15px; display: flex; align-items: center; justify-content: center; gap: 11px; color: #fff; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.download-button:hover { transform: translateY(-3px); }
.download-button.android { background: linear-gradient(105deg, #ff416f, #cf277d); box-shadow: 0 12px 26px rgba(235, 43, 109, .28); }
.download-button.ios { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.13); }
.button-icon { font-size: 20px; transform: rotate(180deg); }
.button-icon.apple { font-size: 24px; transform: none; }
.download-button small { display: block; font-size: 10px; font-weight: 400; opacity: .7; margin-bottom: 2px; }
.version-note { font-size: 12px; color: #817584; margin-top: 17px; }
.phone-stage { height: 530px; position: relative; display: grid; place-items: center; }
.phone { width: 248px; height: 485px; border: 7px solid #33273b; border-radius: 37px; background: #201725; padding: 5px; position: relative; z-index: 1; box-shadow: 0 25px 60px #050106, 0 0 0 1px rgba(255,255,255,.12); transform: rotate(5deg); }
.phone-speaker { width: 76px; height: 20px; background: #33273b; border-radius: 0 0 13px 13px; position: absolute; left: 78px; top: -7px; z-index: 3; }
.phone-screen { overflow: hidden; height: 100%; border-radius: 27px; background: linear-gradient(#2d0d2d, #161a3f 42%, #180f25); position: relative; }
.app-top, .app-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-size: 9px; }
.app-top b { font-size: 12px; }
.video-card { border-radius: 13px; margin: 4px 10px; position: relative; overflow: hidden; }
.video-main { height: 260px; background: linear-gradient(25deg, #451828, #cd7266 55%, #f2b59a); }
.video-main::before { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; background: rgba(57, 18, 31, .55); right: -33px; bottom: -18px; }
.play { position: absolute; left: calc(50% - 22px); top: calc(50% - 22px); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.55); font-size: 15px; padding-left: 3px; }
.video-tag { position: absolute; top: 12px; left: 12px; padding: 5px 8px; border-radius: 10px; background: rgba(0,0,0,.28); font-size: 9px; }
.creator { display: flex; align-items: center; gap: 7px; padding: 8px 13px; font-size: 9px; }.creator b,.creator small { display:block; }.creator small { color:#c9bdc9; margin-top: 3px; }.avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(#e6a888,#733a56); }.creator button { margin-left:auto; border:0; color:#fff; background:#e63670; border-radius:10px; padding:4px 8px; font-size:9px; }
.video-sub { height: 74px; background: linear-gradient(110deg, #683a7a, #ca758b); }.app-nav { position:absolute; bottom:0; width:100%; background: rgba(18,10,24,.85); color:#a295a7; }.app-nav b { color:#fff; font-size:22px; line-height: 16px; }
.orbit { position:absolute; border: 1px solid rgba(212, 102, 255, .25); border-radius: 50%; }.orbit-one { width: 440px; height: 440px; }.orbit-two { width: 355px; height: 355px; border-color: rgba(255, 84, 135, .2); transform: rotate(50deg) scaleY(.62); }
.float-card { position:absolute; z-index:2; padding: 11px 15px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(49,28,57,.72); backdrop-filter: blur(8px); box-shadow:0 11px 25px rgba(0,0,0,.2); }.float-card b,.float-card span { display:block; }.float-card b { font-size:14px; }.float-card span { color:#c8b9c8; font-size:10px; margin-top:3px; }.viewers { left: 3%; top: 28%; }.likes { right: -3%; bottom: 20%; }.likes b { color:#ff75a0; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 44px 0 80px; }.features article { background: var(--panel); border:1px solid rgba(255,255,255,.08); padding: 25px; border-radius: 17px; }.feature-icon { color:#ff5792; font-size:22px; }.features h2 { margin:12px 0 7px; font-size:17px; }.features p { color:var(--muted); font-size:13px; margin:0; line-height:1.6; }
.steps { border-top: 1px solid rgba(255,255,255,.09); padding: 58px 0 75px; display:flex; justify-content:space-between; align-items:center; }.steps h2 { font-size:30px; margin:0; }.step-list { display:flex; gap:12px; }.step-list article { width:154px; color:#c5bac6; font-size:13px; }.step-list b { display:block; color:#f35485; font-size:24px; margin-bottom:8px; } footer { text-align:center; border-top:1px solid rgba(255,255,255,.08); color:#756979; font-size:12px; padding:24px; }
.faq { border-top: 1px solid rgba(255,255,255,.09); padding: 64px 0 78px; display: grid; grid-template-columns: .78fr 1.22fr; gap: 66px; align-items: start; }.faq-heading h2 { font-size: 31px; margin: 0 0 14px; line-height: 1.3; }.faq-heading > p:last-child { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.8; }.faq-list { display: grid; gap: 11px; }.faq details { border: 1px solid rgba(255,255,255,.09); background: var(--panel); border-radius: 13px; transition: background .2s, border-color .2s; }.faq details[open] { background: rgba(185,69,181,.1); border-color: rgba(231,104,197,.28); }.faq summary { list-style: none; padding: 18px 50px 18px 20px; font-size: 15px; font-weight: 700; cursor: pointer; position: relative; }.faq summary::-webkit-details-marker { display: none; }.faq summary::after { content: "+"; position: absolute; right: 18px; top: 13px; color: #ef8db8; font-size: 25px; font-weight: 400; }.faq details[open] summary::after { content: "−"; }.faq details p { color: var(--muted); margin: -2px 20px 18px; font-size: 13px; line-height: 1.75; }
.articles { border-top: 1px solid rgba(255,255,255,.09); padding: 64px 0 80px; }.article-heading { max-width: 670px; }.article-heading h2 { font-size: 31px; margin: 0 0 13px; }.article-heading > p:last-child { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.8; }.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }.article-card { min-height: 270px; display: flex; flex-direction: column; padding: 24px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035)); transition: transform .2s, border-color .2s; }.article-card:hover { transform: translateY(-4px); border-color: rgba(232,97,181,.36); }.article-meta { color: #e676a6; margin: 0 0 14px; font-size: 12px; }.article-card h3 { margin: 0; font-size: 19px; line-height: 1.45; }.article-card > p:not(.article-meta) { margin: 13px 0 19px; color: var(--muted); font-size: 13px; line-height: 1.8; }.article-card a { color: #ff8eb4; font-size: 13px; font-weight: 700; text-decoration: none; margin-top: auto; }.article-card a span { font-size: 17px; margin-left: 4px; }
.article-page { max-width: 850px; padding-bottom: 80px; }.breadcrumb { display: flex; gap: 9px; color: #978b9b; font-size: 13px; padding: 25px 0 35px; }.breadcrumb a { color: #e986b2; text-decoration: none; }.article-content { padding: clamp(26px, 5vw, 56px); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); }.article-content h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -1px; }.article-content h2 { margin: 39px 0 12px; color: #fff0f6; font-size: 23px; }.article-content p { color: #c7bdc9; font-size: 15px; line-height: 2; }.article-content .lead { color: #e5dbe6; font-size: 17px; line-height: 1.9; margin: 22px 0 8px; }.article-download { width: fit-content; margin-top: 34px; padding: 0 24px; }.article-download span { font-size: 18px; margin-left: 6px; }
.modal { display:none; position:fixed; inset:0; z-index:10; background:rgba(4,1,7,.76); align-items:center; justify-content:center; padding:20px; }.modal.show { display:flex; }.modal-card { width:min(350px,100%); text-align:center; position:relative; padding:35px; border:1px solid rgba(255,255,255,.12); border-radius:23px; background:#251529; box-shadow:0 18px 80px rgba(0,0,0,.5); }.modal-close { position:absolute; right:13px; top:8px; border:0; background:transparent; color:#b6a9b9; font-size:28px; }.qr-placeholder { width:152px; height:152px; margin:auto; display:grid; place-items:center; color:#27162d; font-weight:900; font-size:34px; background: repeating-conic-gradient(#fff 0 25%, #251529 0 50%) 50%/22px 22px; outline:7px solid #fff; }.qr-placeholder span { background:#fff; padding:7px; }.modal-card h2 { margin:26px 0 7px; }.modal-card p { color:var(--muted); font-size:13px; }.modal-button { border:0; border-radius:11px; width:100%; padding:12px; margin-top:16px; background:linear-gradient(100deg,#ff4372,#a849f4); color:#fff; font-weight:700; }.toast { opacity:0; position:fixed; z-index:12; left:50%; bottom:30px; transform:translate(-50%, 15px); background:#fff; color:#29162d; padding:10px 16px; border-radius:22px; font-size:13px; transition:.25s; }.toast.show { opacity:1; transform:translate(-50%, 0); }
@media (max-width: 780px) { .container { width:min(100% - 34px, 560px); }.site-header { height:73px; }.hero { grid-template-columns:1fr; padding-top:38px; text-align:center; }.intro { margin-left:auto; margin-right:auto; }.download-actions { justify-content:center; }.phone-stage { height:480px; margin-top:22px; }.phone { transform:rotate(3deg) scale(.89); }.float-card { transform:scale(.88); }.viewers{left:0}.likes{right:0}.features { grid-template-columns:1fr; padding:18px 0 46px; }.features article { padding:18px 21px; }.steps { display:block; padding:48px 0; text-align:center; }.step-list { margin-top:31px; justify-content:space-between; }.step-list article { width:31%; }.steps h2 { font-size:27px; }.faq { grid-template-columns: 1fr; gap: 26px; padding: 48px 0; }.faq-heading { text-align: center; }.faq-heading h2 { font-size: 27px; }.faq summary { font-size: 14px; }.articles { padding: 48px 0; }.article-heading { text-align: center; }.article-heading h2 { font-size: 27px; }.article-grid { grid-template-columns: 1fr; }.article-card { min-height: 0; }.article-content { padding: 25px 20px; }.article-content h2 { font-size: 21px; }.article-content p { font-size: 14px; }.article-download { width: 100%; } }
@media (max-width: 430px) { h1{font-size:40px}.download-button{width:100%;}.phone-stage{margin-left:-15px;margin-right:-15px}.orbit-one{width:350px;height:350px}.step-list article{font-size:11px}.step-list b{font-size:21px}.backup-link{padding:7px 11px}.brand{font-size:20px} }