:root {
  --ink: #edf5ff;
  --muted: #9eb3dc;
  --navy: #050b22;
  --panel: rgba(10, 26, 75, .82);
  --line: rgba(83, 146, 255, .32);
  --blue: #25a8ff;
  --purple: #9b4dff;
  --pink: #ef3ec8;
  --green: #31e8a6;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px; margin: 0; color: var(--ink);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  overflow-x: hidden;
  background: radial-gradient(circle at 68% -10%, rgba(91,51,255,.32), transparent 31rem), radial-gradient(circle at 8% 25%, rgba(16,152,255,.18), transparent 27rem), var(--navy);
}
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; opacity: .34; background-image: linear-gradient(rgba(111,164,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(111,164,255,.06) 1px,transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom,#000 0%,transparent 85%); }
a { color: inherit; text-decoration: none; } button { font: inherit; }
.wrap { width: min(1240px, calc(100% - 40px)); margin: 0 auto; }
.topbar { position: sticky; top: 0; z-index: 10; min-height: 78px; border-bottom: 1px solid rgba(91,128,255,.3); background: rgba(5,11,34,.86); backdrop-filter: blur(20px); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 78px; gap: 22px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:900; font-size:21px; letter-spacing:.04em; white-space:nowrap; }
.brand-mark { display:grid; width:42px; height:42px; place-items:center; border:1px solid #477cf8; border-radius:12px; color:white; background:linear-gradient(135deg,#159bff,#802aff 55%,#f52bcf); box-shadow:0 0 28px rgba(91,74,255,.65); font-family:"Space Grotesk",sans-serif; font-style:italic; }
.topnav { display:flex; align-items:center; gap:24px; color:#b8c9ed; font-size:14px; }.topnav a:hover { color:#fff; }
.version { padding:8px 12px; border:1px solid rgba(113,157,255,.42); border-radius:9px; color:#d9e8ff; background:rgba(33,74,157,.38); font:700 12px "Space Grotesk",sans-serif; white-space:nowrap; }
main { padding:42px 0 72px; }
.hero-panel,.signal-bar,.feature-card,.co-card,.download-box,.contact-card { border:1px solid var(--line); background:linear-gradient(145deg,rgba(17,43,116,.84),rgba(6,15,48,.9)); box-shadow:inset 0 1px 0 rgba(190,220,255,.09),0 22px 55px rgba(0,0,0,.25); }
.hero-panel { position:relative; display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); align-items:center; gap:42px; min-height:500px; padding:52px; overflow:hidden; border-radius:22px; }
.hero-panel::after { position:absolute; right:-6%; bottom:-42%; width:55%; aspect-ratio:1; content:""; border-radius:50%; background:radial-gradient(circle,rgba(218,45,255,.22),transparent 67%); pointer-events:none; }
.eyebrow { margin:0 0 13px; color:#64bdff; font:700 13px "Space Grotesk",sans-serif; letter-spacing:.12em; }
h1 { margin:0; max-width:8em; font-size:clamp(35px,4.1vw,60px); line-height:1.12; letter-spacing:-.045em; } h1 span { color:#b566ff; text-shadow:0 0 24px rgba(179,94,255,.65); }
.hero-copy > p:not(.eyebrow) { max-width:495px; margin:22px 0 30px; color:var(--muted); font-size:16px; line-height:1.85; }
.actions { display:flex; flex-wrap:wrap; gap:13px; }
.action { display:inline-flex; align-items:center; justify-content:center; min-width:162px; padding:13px 19px; border:1px solid rgba(116,204,255,.85); border-radius:11px; color:white; background:linear-gradient(100deg,#178ef6,#3666fa); font-weight:800; box-shadow:0 8px 25px rgba(17,115,255,.31); }
.action.alt { border-color:rgba(230,93,255,.8); background:linear-gradient(100deg,#9437f8,#e340ce); }
.screen-wrap { position:relative; z-index:1; min-width:0; }.screen-label { display:inline-flex; align-items:center; gap:8px; margin:0 0 12px 8px; color:#c8d8ff; font-size:13px; }.screen-label::before { width:8px; height:8px; content:""; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.screen { overflow:hidden; border:1px solid rgba(93,157,255,.65); border-radius:15px; background:#071138; box-shadow:0 0 0 5px rgba(22,80,217,.1),0 24px 42px rgba(0,0,0,.42),0 0 45px rgba(96,55,255,.2); }.screen img { display:block; width:100%; aspect-ratio:1.68; object-fit:cover; object-position:top center; }
.signal-bar { display:grid; grid-template-columns:1.2fr repeat(3,1fr); gap:0; margin-top:20px; border-radius:16px; overflow:hidden; }.signal-item { min-height:82px; padding:18px 22px; border-right:1px solid rgba(99,145,255,.22); }.signal-item:last-child { border-right:0; }.signal-item strong,.signal-item span { display:block; }.signal-item strong { margin-bottom:7px; font-size:14px; }.signal-item span { color:#74ffa9; font:700 14px "Space Grotesk",sans-serif; }.signal-intro { color:#d8e7ff; }.signal-intro strong { color:#fff; font-size:17px; }.signal-intro span { color:var(--muted); font-family:inherit; font-weight:400; }
.section { margin-top:66px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:21px; }.section-heading h2 { margin:0; font-size:clamp(25px,3vw,34px); letter-spacing:-.03em; }.section-heading p { max-width:490px; margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }.feature-card { position:relative; min-height:260px; padding:26px 23px 22px; overflow:hidden; border-radius:16px; }.feature-card::before { position:absolute; top:-60px; right:-45px; width:150px; height:150px; content:""; border-radius:50%; opacity:.55; filter:blur(3px); }.feature-card.pk::before{background:#fc3987}.feature-card.gift::before{background:#a845ff}.feature-card.time::before{background:#f49235}.feature-card.rank::before{background:#13d995}
.icon { position:relative; display:grid; width:46px; height:46px; place-items:center; border:1px solid currentColor; border-radius:13px; font-size:21px; box-shadow:0 0 22px currentColor; }.pk .icon{color:#ff579c}.gift .icon{color:#c27aff}.time .icon{color:#ffb24d}.rank .icon{color:#4de5ad}.feature-card h3 { position:relative; margin:24px 0 10px; font-size:20px; }.feature-card p { position:relative; margin:0; color:var(--muted); font-size:14px; line-height:1.75; }.feature-card span { position:absolute; right:22px; bottom:20px; color:#d8e5ff; font:700 14px "Space Grotesk",sans-serif; }
.co-create { padding:33px; border:1px solid rgba(104,105,255,.42); border-radius:21px; background:linear-gradient(110deg,rgba(66,24,136,.52),rgba(7,22,71,.76)); box-shadow:0 0 45px rgba(116,47,255,.16); }.co-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }.co-card { min-height:175px; padding:24px; border-radius:14px; }.co-card b { display:block; margin-bottom:12px; color:#eaf2ff; font-size:19px; }.co-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.75; }.co-card.highlight { border-color:rgba(61,226,255,.72); background:linear-gradient(135deg,rgba(13,125,211,.56),rgba(59,44,156,.64)); }.mini-tag { display:inline-block; margin-bottom:17px; padding:5px 9px; border-radius:999px; color:#96fbff; background:rgba(35,196,241,.16); font:700 11px "Space Grotesk",sans-serif; letter-spacing:.08em; }
.download-box { display:grid; grid-template-columns:1fr auto; align-items:center; gap:34px; padding:34px 38px; border-radius:20px; background:linear-gradient(112deg,rgba(8,77,159,.8),rgba(61,31,146,.87)); }.download-box h2 { margin:0 0 10px; font-size:29px; }.download-box p { margin:0; color:#c5dbfa; line-height:1.7; }.download-box .action { white-space:nowrap; border-color:#b4e6ff; }
.contact-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:35px; padding:34px 38px; border-radius:20px; }.contact-card h2 { margin:0 0 12px; font-size:28px; }.contact-card p { margin:0; color:var(--muted); line-height:1.75; }.wechat { display:inline-flex; align-items:center; gap:13px; margin-top:20px; padding:10px 14px; border:1px solid rgba(90,255,188,.42); border-radius:10px; color:#c9ffdf; background:rgba(35,218,141,.09); font-family:"Space Grotesk",sans-serif; font-weight:700; }.copy-button { cursor:pointer; border:0; color:#d6ffe6; background:transparent; font-size:13px; text-decoration:underline; }.qr { width:140px; padding:7px; border-radius:13px; background:#fff; }.qr img { display:block; width:100%; height:auto; }
footer { padding:29px 0 42px; border-top:1px solid rgba(94,135,231,.2); color:#7386ae; font-size:13px; text-align:center; }
@media (max-width:1000px) { .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.hero-panel { gap:27px; padding:37px; } }
@media (max-width:830px) { .topnav { display:none; } main { padding-top:26px; }.hero-panel { grid-template-columns:1fr; min-height:auto; padding:30px; }.hero-copy > p:not(.eyebrow) { max-width:none; }.signal-bar { grid-template-columns:repeat(2,1fr); }.signal-item:nth-child(2) { border-right:0; }.signal-item:nth-child(-n+2) { border-bottom:1px solid rgba(99,145,255,.22); }.signal-intro { grid-column:span 2; }.section-heading { display:block; }.section-heading p { margin-top:10px; }.co-grid { grid-template-columns:1fr; }.download-box,.contact-card { grid-template-columns:1fr; }.qr { width:130px; } }
@media (max-width:520px) { .wrap { width:min(100% - 26px,1240px); }.topbar,.topbar .wrap { min-height:64px; }.brand { font-size:17px; }.brand-mark { width:35px; height:35px; border-radius:10px; }.version { display:none; }.hero-panel { padding:27px 21px; border-radius:17px; } h1 { font-size:35px; }.actions { display:grid; grid-template-columns:1fr; }.action { width:100%; }.signal-bar { grid-template-columns:1fr; }.signal-item,.signal-item:nth-child(2) { border-right:0; border-bottom:1px solid rgba(99,145,255,.22); }.signal-item:last-child { border-bottom:0; }.signal-intro { grid-column:auto; }.section { margin-top:45px; }.feature-grid { grid-template-columns:1fr; }.co-create,.download-box,.contact-card { padding:25px 21px; }.download-box h2,.contact-card h2 { font-size:25px; } }

/* Page-specific layout: keep the dashboard-inspired language without using the app UI as the layout itself. */
.topbar.wrap { display:flex; align-items:center; justify-content:space-between; min-height:78px; }
.topbar .brand .logo { display:grid; place-items:center; flex:0 0 42px; width:42px; height:42px; border:1px solid #477cf8; border-radius:12px; background:linear-gradient(135deg,#159bff,#802aff 55%,#f52bcf); box-shadow:0 0 28px rgba(91,74,255,.65); font-family:"DM Mono",sans-serif; font-style:italic; }
.topbar .brand > span:last-child { display:grid; gap:2px; }.topbar .brand b { font-size:19px; }.topbar .brand small { color:#8da4d3; font-size:12px; font-weight:500; letter-spacing:0; }
.topbar nav { display:flex; gap:24px; color:#b8c9ed; font-size:14px; }.topbar nav a:hover { color:#fff; }.topbar .version { display:flex; align-items:center; gap:8px; }.topbar .version span { width:8px; height:8px; border-radius:50%; background:#31e8a6; box-shadow:0 0 12px #31e8a6; }

.kicker { display:flex; align-items:center; gap:9px; margin:0 0 13px; color:#64bdff; font:700 13px "DM Mono",monospace; letter-spacing:.08em; }.kicker i { width:7px; height:7px; border-radius:50%; background:#31e8a6; box-shadow:0 0 11px #31e8a6; }
.hero-copy h1 em,.section-title h2 strong,.download h2 em,.contact h2 em { color:#b566ff; font-style:normal; text-shadow:0 0 24px rgba(179,94,255,.45); }
.hero-copy .lead { max-width:495px; margin:22px 0 27px; color:var(--muted); font-size:16px; line-height:1.85; }
.hero-actions { display:flex; flex-wrap:wrap; gap:13px; }.primary,.secondary { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-width:156px; padding:13px 18px; border:1px solid rgba(116,204,255,.85); border-radius:11px; color:#fff; background:linear-gradient(100deg,#178ef6,#3666fa); font-weight:800; box-shadow:0 8px 25px rgba(17,115,255,.31); }.secondary { border-color:rgba(230,93,255,.8); background:linear-gradient(100deg,#9437f8,#e340ce); }
.status-row { display:flex; gap:17px; margin-top:21px; color:#90a8d6; font-size:13px; }.status-row span { display:inline-flex; align-items:center; gap:7px; }.online { width:8px; height:8px; border-radius:50%; background:#31e8a6; box-shadow:0 0 11px #31e8a6; }
.screen-label span { display:inline-flex; align-items:center; gap:7px; }.screen-label span:first-child i { width:8px; height:8px; border-radius:50%; background:#31e8a6; box-shadow:0 0 12px #31e8a6; }
.signal-bar { grid-template-columns:repeat(4,1fr); align-items:center; }.signal-bar span { padding:18px 24px; color:#dbe8ff; font-weight:700; }.signal-bar i { display:none; }

.section-title { margin-bottom:21px; }.section-title h2 { margin:0; font-size:clamp(25px,3vw,34px); line-height:1.3; letter-spacing:-.03em; }.section-title > p:last-child { max-width:520px; margin:12px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }
.feature-card .card-top { position:relative; display:flex; justify-content:space-between; align-items:center; }.card-top span { position:static; color:#c9d8f6; font:700 14px "DM Mono",monospace; }.card-top b { display:grid; width:44px; height:44px; place-items:center; border:1px solid currentColor; border-radius:13px; font-size:17px; box-shadow:0 0 22px currentColor; }.pk .card-top b{color:#ff579c}.gift .card-top b{color:#c27aff}.time .card-top b{color:#ffb24d}.rank .card-top b{color:#4de5ad}.feature-card h3 { margin:30px 0 10px; }.feature-card p { padding-right:4px; }.meter,.orbital,.rank-lines { position:absolute; right:22px; bottom:21px; }.meter { width:58px; height:5px; overflow:hidden; border-radius:9px; background:rgba(255,255,255,.15); }.meter i { display:block; width:65%; height:100%; background:#ff579c; box-shadow:0 0 12px #ff579c; }.orbital { width:39px; height:39px; border:1px solid #c27aff; border-radius:50%; box-shadow:0 0 16px #c27aff; }.orbital::after { position:absolute; width:9px; height:9px; top:-5px; left:13px; content:""; border-radius:50%; background:#fff; box-shadow:0 0 10px #fff; }.clock { position:absolute; right:22px; bottom:20px; color:#ffce83; font:700 14px "DM Mono",monospace; }.rank-lines { display:flex; gap:4px; align-items:end; height:28px; }.rank-lines i { display:block; width:7px; background:#4de5ad; box-shadow:0 0 10px #4de5ad; }.rank-lines i:nth-child(1){height:13px}.rank-lines i:nth-child(2){height:27px}.rank-lines i:nth-child(3){height:20px}

.co-create .section-title { margin-bottom:27px; }.co-create .co-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.co-create .co-grid article { min-height:183px; padding:18px 15px 8px; border-left:1px solid rgba(156,151,255,.25); }.co-create .co-grid article:first-child { border-left:0; }.co-create .letter { color:#bea7ff; font:700 14px "DM Mono",monospace; }.co-create h3 { margin:17px 0 10px; font-size:20px; }.co-create p { margin:0; color:#b4c5e6; font-size:14px; line-height:1.75; }.co-create a { display:inline-block; margin-top:16px; color:#d6c4ff; font-size:14px; font-weight:700; }.co-highlight { background:linear-gradient(135deg,rgba(22,125,211,.19),rgba(100,42,182,.13)); border-radius:12px; }

.download,.contact { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr); gap:28px; align-items:stretch; margin-top:66px; }.download > div:first-child,.contact > div:first-child { align-self:center; }.download h2,.contact h2 { margin:0; font-size:clamp(29px,3.1vw,42px); line-height:1.24; letter-spacing:-.04em; }.download > div:first-child > p:last-child,.contact > div:first-child > p:last-of-type { max-width:480px; margin:17px 0 0; color:var(--muted); line-height:1.8; }
.download .download-box { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:350px; padding:30px; text-align:center; border-color:rgba(80,180,255,.7); }.download-head { align-self:stretch; display:flex; gap:6px; padding-bottom:20px; border-bottom:1px solid rgba(150,190,255,.23); }.download-head span { width:8px; height:8px; border-radius:50%; background:#5470a7; }.download-icon { display:grid; width:62px; height:62px; place-items:center; margin:27px 0 15px; border:1px solid #6cd8ff; border-radius:18px; color:white; background:linear-gradient(140deg,#1689ff,#9142fa); font-size:28px; box-shadow:0 0 30px rgba(79,129,255,.58); }.download-box h3 { margin:0 0 7px; font-size:20px; }.download-box small { color:#a9bee5; }.download-box .full { width:100%; margin-top:25px; }
.contact { padding:36px; border:1px solid var(--line); border-radius:21px; background:linear-gradient(145deg,rgba(17,43,116,.64),rgba(6,15,48,.77)); }.contact figure { margin:0; padding:12px; border-radius:15px; background:white; text-align:center; }.contact figure img { display:block; width:min(190px,100%); }.contact figcaption { margin-top:9px; color:#25304e; font-size:12px; }.contact .wechat { display:inline-flex; align-items:center; gap:12px; margin-top:21px; padding:11px 14px; border:1px solid rgba(90,255,188,.42); border-radius:10px; color:#c9ffdf; background:rgba(35,218,141,.09); }.wechat button { cursor:pointer; border:0; color:#d6ffe6; background:transparent; text-decoration:underline; }
footer.wrap { display:flex; justify-content:space-between; gap:15px; }
@media (max-width:830px) { .topbar.wrap { min-height:70px; }.topbar nav { display:none; }.signal-bar { grid-template-columns:repeat(2,1fr); }.signal-bar span { border-bottom:1px solid rgba(99,145,255,.22); }.co-create .co-grid,.download,.contact { grid-template-columns:1fr; }.co-create .co-grid article { border-left:0; border-top:1px solid rgba(156,151,255,.25); }.co-create .co-grid article:first-child { border-top:0; }.contact { padding:28px; }.contact figure { width:max-content; }.download .download-box { min-height:300px; } }
@media (max-width:520px) { .topbar.wrap { min-height:64px; }.topbar .brand .logo { width:35px; height:35px; flex-basis:35px; }.topbar .brand b { font-size:16px; }.topbar .brand small { display:none; }.topbar .version { display:none; }.hero-panel,.screen-wrap,.screen,.screen img,.feature-card { min-width:0; max-width:100%; }.hero-actions { display:grid; grid-template-columns:1fr; }.primary,.secondary { width:100%; }.signal-bar { grid-template-columns:1fr; }.signal-bar span { padding:14px 18px; }.status-row { display:grid; gap:7px; }.contact { padding:24px; }.contact figure { width:100%; }.contact figure img { margin:auto; } footer.wrap { flex-direction:column; text-align:left; } }