:root { --ink:#15222b; --muted:#65747e; --faint:#93a0a8; --line:#dbe3e7; --paper:#f6f8fb; --white:#fff; --blue:#2e83c2; --blue-dark:#1e5f93; --teal:#159d9b; --orange:#e58b3d; --purple:#7569c7; --shadow:0 24px 70px rgba(32,55,73,.11); --radius:18px; font-family:"Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; background:var(--paper); } a { color:inherit; text-decoration:none; } button { font:inherit; } .container { width:min(1120px,calc(100% - 48px)); margin:0 auto; } .section-anchor { scroll-margin-top:92px; } .scroll-progress { position:fixed; inset:0 0 auto; height:3px; background:var(--blue); transform:scaleX(0); transform-origin:left; z-index:50; }
.site-header { position:sticky; top:0; z-index:40; background:rgba(246,248,251,.9); border-bottom:1px solid transparent; backdrop-filter:blur(16px); transition:border-color .2s ease,box-shadow .2s ease; } .site-header.scrolled { border-color:var(--line); box-shadow:0 8px 24px rgba(32,55,73,.06); } .nav-container { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:30px; } .brand { display:inline-flex; align-items:center; gap:10px; font-size:18px; font-weight:750; letter-spacing:.04em; } .brand-mark { width:30px; height:31px; object-fit:contain; } .site-nav { display:flex; align-items:center; gap:30px; color:var(--muted); font-size:14px; } .nav-link { position:relative; padding:27px 0 25px; transition:color .2s ease; } .nav-link::after { content:""; position:absolute; left:0; right:0; bottom:17px; height:2px; background:var(--blue); transform:scaleX(0); transition:transform .2s ease; } .nav-link:hover,.nav-link.active { color:var(--ink); } .nav-link.active::after { transform:scaleX(1); } .nav-download { padding:10px 17px; border:1px solid var(--ink); border-radius:7px; color:var(--ink); transition:background .2s ease,color .2s ease; } .nav-download:hover { color:#fff; background:var(--ink); } .nav-toggle { display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:8px; background:#fff; padding:9px; cursor:pointer; } .nav-toggle span { display:block; height:2px; margin:4px 0; background:var(--ink); }
.hero { padding:102px 0 28px; overflow:hidden; } .hero-grid { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:72px; min-height:560px; } .eyebrow,.section-label { color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } .eyebrow { display:flex; align-items:center; gap:8px; margin-bottom:24px; } .eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 5px rgba(21,157,155,.12); } h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:24px; font-size:clamp(46px,6vw,78px); line-height:1.05; letter-spacing:0; font-weight:800; } h1 em,h2 em { color:var(--blue); font-style:normal; } .hero-lead { max-width:510px; margin-bottom:30px; color:var(--muted); font-size:17px; line-height:1.9; } .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:34px; } .button { display:inline-flex; align-items:center; justify-content:center; gap:13px; min-height:48px; padding:0 21px; border-radius:7px; font-size:14px; font-weight:750; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; } .button:hover { transform:translateY(-2px); } .button-primary { color:#fff; background:var(--ink); box-shadow:0 9px 20px rgba(21,34,43,.16); } .button-primary:hover { background:var(--blue-dark); box-shadow:0 12px 26px rgba(30,95,147,.2); } .button-secondary { color:var(--ink); background:#fff; border:1px solid var(--line); } .button-secondary:hover { border-color:var(--ink); } .button-large { min-height:56px; padding:0 26px; font-size:15px; } .hero-proof { display:flex; align-items:center; flex-wrap:wrap; gap:13px; color:var(--faint); font-size:12px; } .hero-proof b { margin-right:4px; color:var(--ink); font-size:14px; } .proof-line { width:1px; height:16px; background:var(--line); }
.hero-visual { position:relative; min-height:500px; display:grid; place-items:center; } .app-window { position:relative; z-index:2; width:min(100%,555px); border:1px solid #cbd9df; border-radius:15px; background:#fff; box-shadow:0 30px 80px rgba(31,74,94,.17); transform:rotate(1.7deg); } .window-bar { height:42px; display:flex; align-items:center; gap:7px; padding:0 17px; border-bottom:1px solid #e8eef0; color:var(--faint); font-size:11px; } .window-bar>span { width:7px; height:7px; border-radius:50%; background:#d3dfe3; } .window-bar strong { margin-left:12px; color:var(--ink); font-size:12px; } .window-bar small { margin-left:auto; font-size:10px; } .window-body { display:grid; grid-template-columns:96px 1fr; min-height:350px; } .window-sidebar { padding:20px 12px; background:#f7fafb; border-right:1px solid #e8eef0; } .side-logo { display:grid; place-items:center; height:42px; margin-bottom:19px; } .side-logo img { width:25px; height:26px; } .side-item { display:flex; flex-direction:column; align-items:center; gap:7px; margin-bottom:9px; padding:10px 5px; border-radius:8px; color:var(--faint); font-size:9px; } .side-item i { font-size:18px; font-style:normal; line-height:1; } .side-item-active { color:var(--blue); background:#e8f3f8; } .window-content { padding:35px 33px; background:#fff; } .window-kicker { color:var(--teal); font-size:10px; font-weight:800; letter-spacing:.08em; } .window-content h2 { margin:10px 0 24px; font-size:25px; letter-spacing:0; } .window-cards { display:grid; grid-template-columns:1.15fr .85fr; gap:12px; } .mini-card { min-height:116px; padding:17px; border-radius:11px; color:#fff; } .mini-card-wide { grid-row:span 2; background:var(--ink); } .mini-card-teal { background:var(--teal); } .mini-card-orange { background:#efb06e; color:var(--ink); } .mini-label { display:block; margin-bottom:13px; font-size:10px; opacity:.72; } .mini-card strong { display:block; font-size:15px; letter-spacing:0; } .mini-bars { display:flex; align-items:end; gap:6px; height:55px; margin-top:15px; } .mini-bars i { display:block; width:17px; border-radius:3px 3px 0 0; background:#54b4d7; } .mini-bars i:nth-child(1) { height:32%; opacity:.7; }.mini-bars i:nth-child(2) { height:60%; }.mini-bars i:nth-child(3) { height:46%; opacity:.85; }.mini-bars i:nth-child(4) { height:88%; } .status-dot,.trend { display:block; margin-top:15px; font-size:10px; opacity:.85; } .floating-note { position:absolute; z-index:3; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid rgba(205,220,225,.85); border-radius:10px; background:rgba(255,255,255,.94); box-shadow:0 14px 30px rgba(31,74,94,.13); } .floating-note strong,.floating-note small { display:block; }.floating-note strong { font-size:12px; }.floating-note small { margin-top:3px; color:var(--faint); font-size:10px; } .note-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; color:var(--blue); background:#e8f3f8; font-size:17px; } .note-free { top:45px; right:-7px; }.note-quiet { bottom:58px; left:-18px; }.note-quiet .note-icon { color:var(--teal); background:#e2f4f1; }.orbit { position:absolute; border:1px solid #cddfe5; border-radius:50%; transform:rotate(-20deg); }.orbit-one { width:530px; height:250px; }.orbit-two { width:440px; height:220px; border-color:#dce9ec; transform:rotate(35deg); } .hero-bottom { display:flex; align-items:center; gap:15px; margin-top:38px; color:var(--faint); font-size:11px; letter-spacing:.04em; }.hero-rule { width:34px; height:1px; background:var(--line); }
.section { padding:125px 0; }.features-section { background:#fff; border-top:1px solid #e9eff1; border-bottom:1px solid #e9eff1; } .section-heading { max-width:650px; margin-bottom:48px; }.section-heading h2,.promise-panel h2,.download-grid h2 { margin:13px 0 14px; font-size:clamp(32px,4vw,48px); line-height:1.14; letter-spacing:0; }.section-heading p,.download-grid p { margin-bottom:0; color:var(--muted); font-size:16px; line-height:1.8; } .feature-layout { display:grid; grid-template-columns:1.15fr .85fr .85fr; gap:15px; }.feature-card { position:relative; min-height:290px; padding:30px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); overflow:hidden; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }.feature-card:hover { transform:translateY(-5px); border-color:#b8ccd4; box-shadow:var(--shadow); }.feature-card-large { grid-row:span 2; min-height:595px; background:#eaf4f8; }.feature-card-wide { grid-column:span 2; display:flex; justify-content:space-between; align-items:flex-end; min-height:290px; background:#f9f0e7; }.feature-number { color:var(--faint); font-size:11px; font-weight:800; letter-spacing:.08em; }.feature-icon { display:grid; place-items:center; width:48px; height:48px; margin:32px 0 25px; border-radius:13px; font-size:26px; font-weight:400; }.icon-blue { color:var(--blue); background:#d9edf5; }.icon-teal { color:var(--teal); background:#dcf2ee; }.icon-orange { color:var(--orange); background:#f8e6d5; }.icon-purple { color:var(--purple); background:#e7e4f6; }.feature-card h3 { margin-bottom:13px; font-size:23px; letter-spacing:0; }.feature-card p { max-width:330px; color:var(--muted); line-height:1.8; font-size:14px; }.feature-meta { display:flex; flex-wrap:wrap; gap:7px; margin-top:27px; }.feature-meta span { padding:6px 9px; border-radius:5px; color:var(--muted); background:rgba(255,255,255,.75); font-size:10px; }.feature-wide-copy { max-width:420px; }.feature-wide-copy .feature-icon { margin-bottom:20px; }.feature-wide-stat { padding:22px 26px; border-left:1px solid rgba(149,119,81,.2); }.feature-wide-stat strong { display:block; color:var(--orange); font-size:52px; line-height:1; letter-spacing:0; }.feature-wide-stat span,.feature-wide-stat small { display:block; margin-top:7px; color:var(--muted); font-size:12px; }.feature-wide-stat small { color:var(--faint); }
.games-section { background:var(--paper); }.games-grid-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; align-items:center; }.text-link { display:inline-flex; gap:10px; margin-top:28px; color:var(--blue-dark); font-size:13px; font-weight:750; }.text-link span { transition:transform .2s ease; }.text-link:hover span { transform:translateX(4px); }.game-list { border-top:1px solid var(--line); }.game-row { display:grid; grid-template-columns:76px 1fr auto; align-items:center; gap:20px; min-height:116px; border-bottom:1px solid var(--line); }.game-image { display:grid; place-items:center; width:62px; height:62px; border-radius:14px; background:#e8eef1; overflow:hidden; }.game-image img { width:100%; height:100%; object-fit:cover; }.game-row h3 { margin:0 0 7px; font-size:18px; }.game-row p { margin:0; color:var(--muted); font-size:12px; }.game-arrow { color:var(--blue); font-size:21px; }.game-row-muted { color:var(--faint); }.game-row-muted h3,.game-row-muted p { color:inherit; }.game-image-more { color:var(--blue); background:#e3eef4; font-size:26px; }
.roadmap-section { background:#fff; border-top:1px solid #e9eff1; border-bottom:1px solid #e9eff1; }.roadmap-track { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.roadmap-track::before { content:""; position:absolute; top:24px; left:12%; right:12%; height:1px; background:var(--line); }.roadmap-stage { position:relative; z-index:1; min-height:310px; padding:28px 26px 25px; border:1px solid var(--line); border-radius:10px; background:var(--paper); }.roadmap-stage-active { border-color:#9ccfd0; background:#eff9f8; box-shadow:0 15px 36px rgba(21,157,155,.1); }.roadmap-stage-planned { background:#fbf6f0; }.roadmap-stage-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:28px; }.roadmap-status { display:inline-flex; align-items:center; gap:7px; color:var(--blue-dark); font-size:12px; font-weight:800; }.roadmap-status::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--teal); }.roadmap-stage-active .roadmap-status { color:#087f7d; }.roadmap-stage-active .roadmap-status::before { box-shadow:0 0 0 5px rgba(21,157,155,.13); }.roadmap-stage-planned .roadmap-status { color:#a86b2d; }.roadmap-stage-planned .roadmap-status::before { background:var(--orange); }.roadmap-period { color:var(--faint); font-size:11px; }.roadmap-stage h3 { margin:24px 0 20px; font-size:22px; }.roadmap-items { list-style:none; margin:0; padding:0; }.roadmap-items li { padding:15px 0; border-top:1px solid var(--line); }.roadmap-items strong { display:block; margin-bottom:7px; font-size:14px; }.roadmap-items p { margin:0; color:var(--muted); font-size:12px; line-height:1.75; }.roadmap-message { grid-column:1 / -1; min-height:310px; display:grid; place-items:center; margin:0; color:var(--faint); font-size:13px; text-align:center; }.roadmap-note { margin:24px 0 0; color:var(--faint); font-size:12px; text-align:center; }
.promise-section { padding-top:30px; background:var(--paper); }.promise-panel { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:62px 70px; border-radius:20px; background:var(--ink); color:#fff; }.promise-panel h2 { margin-bottom:0; }.promise-panel h2 em { color:#6cc4d2; }.promise-list { align-self:center; }.promise-list>div { display:grid; grid-template-columns:115px 1fr; gap:18px; padding:19px 0; border-bottom:1px solid rgba(255,255,255,.14); }.promise-list>div:first-child { padding-top:0; }.promise-list>div:last-child { padding-bottom:0; border-bottom:0; }.promise-list b { font-size:14px; }.promise-list span { color:#aebfc6; font-size:13px; line-height:1.7; }
.download-section { padding-top:100px; padding-bottom:120px; background:#fff; border-top:1px solid #e9eff1; }.download-grid { display:grid; grid-template-columns:1fr auto; gap:50px; align-items:end; }.download-action { text-align:right; }.download-details { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px 16px; margin-top:16px; color:var(--faint); font-size:11px; }.download-details span+span::before { content:"·"; margin-right:16px; color:var(--line); }
.site-footer { padding:30px 0 22px; background:#f1f5f7; }.footer-main { display:flex; align-items:center; gap:34px; padding-bottom:27px; }.footer-links { display:flex; gap:22px; color:var(--muted); font-size:12px; }.footer-links a:hover,.footer-bottom a:hover { color:var(--blue); }.footer-note { margin-left:auto; color:var(--faint); font-size:11px; }.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:17px; border-top:1px solid var(--line); color:var(--faint); font-size:10px; }.footer-bottom img { width:13px; height:13px; vertical-align:-2px; margin-right:3px; }
.reveal { opacity:1; transform:none; }.js .reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }.js .reveal.is-visible { opacity:1; transform:translateY(0); }.reveal-delay { transition-delay:.1s; }.reveal-delay-2 { transition-delay:.2s; }
@media (max-width:900px) { .hero { padding-top:70px; }.hero-grid,.games-grid-layout,.promise-panel,.download-grid { grid-template-columns:1fr; gap:50px; }.hero-grid { min-height:auto; }.hero-visual { min-height:430px; }.games-grid-layout { gap:35px; }.roadmap-track { grid-template-columns:1fr; gap:14px; }.roadmap-track::before { top:24px; bottom:24px; left:12px; right:auto; width:1px; height:auto; }.roadmap-stage { min-height:0; padding-left:31px; }.promise-panel { padding:45px 38px; }.download-action { text-align:left; }.download-details { justify-content:flex-start; } }
@media (max-width:720px) { .container { width:min(100% - 32px,560px); }.nav-container { min-height:66px; }.nav-toggle { display:block; }.site-nav { position:absolute; top:65px; left:16px; right:16px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:8px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.98); box-shadow:0 18px 36px rgba(32,55,73,.13); }.site-nav.is-open { display:flex; }.nav-link { padding:12px; }.nav-link::after { display:none; }.nav-download { margin:4px; text-align:center; }.hero { padding-top:58px; }.hero h1 { font-size:49px; }.hero-lead { font-size:15px; }.hero-visual { min-height:350px; margin-top:12px; }.app-window { width:100%; transform:rotate(0); }.window-body { grid-template-columns:68px 1fr; min-height:285px; }.window-sidebar { padding:14px 7px; }.side-item { font-size:8px; }.window-content { padding:24px 18px; }.window-content h2 { font-size:20px; }.window-cards { gap:7px; }.mini-card { min-height:91px; padding:11px; }.mini-card strong { font-size:11px; }.mini-label { margin-bottom:8px; font-size:8px; }.mini-bars { height:38px; margin-top:9px; }.status-dot,.trend { margin-top:9px; font-size:8px; }.floating-note,.orbit { display:none; }.hero-bottom { gap:8px; font-size:9px; }.hero-rule { width:15px; }.section { padding:82px 0; }.feature-layout { grid-template-columns:1fr; }.feature-card,.feature-card-large,.feature-card-wide { grid-column:auto; grid-row:auto; min-height:0; }.feature-card-large { min-height:360px; }.feature-card-wide { display:block; }.feature-wide-stat { margin-top:20px; padding:18px 0 0; border-top:1px solid rgba(149,119,81,.2); border-left:0; }.roadmap-stage { padding:24px 22px 22px 31px; }.roadmap-stage h3 { font-size:20px; }.promise-panel { padding:35px 25px; }.promise-list>div { grid-template-columns:90px 1fr; gap:12px; }.footer-main,.footer-bottom { align-items:flex-start; flex-direction:column; gap:18px; }.footer-note { margin-left:0; }.footer-bottom { gap:10px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }
:root { --radius:10px; }
.brand,.eyebrow,.section-label { letter-spacing:0; }
@media (min-width:901px) { .hero { padding-top:58px; padding-bottom:24px; } .hero-grid { min-height:500px; } }