:root { --ink:#0b0e14; --surface:#121822; --surface-raised:#171f2b; --line:#2a3444; --text:#f4f7fb; --muted:#9ca9ba; --accent:#6fa6e9; --accent-soft:#c9ddf4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; min-width:320px; color:var(--text); font-family:ui-sans-serif,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; background:var(--ink); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.55; background-image:linear-gradient(rgba(145,165,191,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(145,165,191,.045) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } .section-shell { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }.brand { display:inline-flex; align-items:center; gap:11px; font-size:13px; font-weight:760; letter-spacing:.1em; }.brand-mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid #7d91aa; color:var(--accent-soft); font-size:16px; font-weight:800; letter-spacing:0; }.brand-name { white-space:nowrap; } nav { display:flex; gap:29px; color:#b1bdcc; font-size:13px; } nav a,.secondary-button,.header-download { transition:color .25s,border-color .25s,background .25s,transform .25s; } nav a:hover,.secondary-button:hover { color:var(--accent-soft); }.header-download { padding:10px 13px; border:1px solid #526174; color:var(--accent-soft); font-size:12px; }.header-download:hover { border-color:var(--accent); background:#182231; }.header-download:active,.primary-button:active,.secondary-button:active { transform:translateY(1px) scale(.98); }.header-download small { margin-left:8px; color:#8fa5bc; }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:52px; min-height:680px; padding:64px 0 72px; }.eyebrow { margin:0 0 19px; color:var(--accent); font-size:10px; font-weight:760; letter-spacing:.17em; }.hero h1,.section-heading h2,.preview-copy h2,.download-copy h2 { margin:0; max-width:650px; font-size:clamp(44px,5vw,67px); line-height:1.08; letter-spacing:-.065em; }.hero h1 span { color:var(--accent-soft); }.hero-summary { max-width:460px; margin:28px 0; color:var(--muted); font-size:16px; line-height:1.86; }.hero-actions { display:flex; align-items:center; gap:12px; }.primary-button,.secondary-button { display:inline-flex; align-items:center; justify-content:center; min-height:47px; padding:0 19px; font-size:13px; font-weight:750; }.primary-button { color:#0a1019; background:var(--accent-soft); border:1px solid var(--accent-soft); }.primary-button:hover { background:#e2edf9; border-color:#e2edf9; }.secondary-button { color:#ced9e5; border:1px solid #455468; }.secondary-button:hover { border-color:var(--accent); background:#141d29; }.release-note { margin:17px 0 0; color:#8190a3; font-size:12px; }
.hero-visual { min-height:520px; position:relative; display:grid; place-items:center; }.visual-grid { position:absolute; inset:32px 16px; border:1px solid rgba(111,166,233,.18); background:linear-gradient(90deg,transparent 49.9%,rgba(111,166,233,.12) 50%,transparent 50.1%),linear-gradient(transparent 49.9%,rgba(111,166,233,.12) 50%,transparent 50.1%); background-size:100% 100%; }.device { position:absolute; overflow:hidden; border:7px solid #080b10; border-radius:28px; background:#080b10; box-shadow:0 26px 58px rgba(2,8,18,.42),0 0 0 1px #607189; }.device img { width:100%; }.device-front { z-index:1; width:216px; transform:translate(-47px,5px) rotate(-4deg); }.device-back { width:189px; transform:translate(126px,43px) rotate(7deg); opacity:.92; }.visual-caption { position:absolute; z-index:2; display:grid; gap:4px; padding-left:11px; border-left:1px solid var(--accent); color:#aebdcd; font-size:11px; line-height:1.45; background:rgba(11,14,20,.86); }.visual-caption strong { color:#e3ebf4; font-size:12px; }.caption-top { top:66px; right:0; }.caption-bottom { bottom:60px; left:5px; }
.value-line { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:25px 0; border-block:1px solid var(--line); color:#d1dae4; }.value-line p { margin:0; font-size:15px; }.value-line span { color:#75849a; font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }
.capabilities { padding:146px 0; }.section-heading { max-width:650px; }.section-heading h2,.preview-copy h2,.download-copy h2 { font-size:clamp(35px,4vw,52px); }.section-heading > p:last-child,.preview-copy > p:last-of-type,.download-copy > p { margin:20px 0 0; max-width:540px; color:var(--muted); font-size:15px; line-height:1.82; }.capability-grid { display:grid; grid-template-columns:7fr 5fr; gap:1px; margin-top:55px; background:var(--line); border:1px solid var(--line); }.capability-card { position:relative; min-height:244px; padding:29px; overflow:hidden; background:var(--surface); transition:background .25s,transform .25s; }.capability-card:hover { z-index:1; background:var(--surface-raised); transform:translateY(-3px); }.card-index { margin:0; color:#8195ab; font:11px ui-monospace,SFMono-Regular,Menlo,monospace; }.capability-card h3 { margin:77px 0 10px; font-size:21px; letter-spacing:-.04em; }.capability-card > p:not(.card-index),.capability-card div p { margin:0; max-width:350px; color:#aab6c5; font-size:14px; line-height:1.74; }.feature-card { display:flex; min-height:489px; grid-row:span 2; flex-direction:column; justify-content:space-between; background:linear-gradient(155deg,#172333,#101720 70%); }.feature-card h3 { margin:0 0 13px; font-size:29px; }.card-note { color:var(--accent-soft); font-size:12px; }.wide-card { grid-column:span 2; display:flex; align-items:end; justify-content:space-between; min-height:190px; gap:40px; }.wide-card h3 { margin:0 0 10px; }.wide-card > span { min-width:210px; color:#8294a9; font-size:12px; text-align:right; }
.workflow-section { border-block:1px solid var(--line); background:#0e131b; }.workflow-inner { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; padding:123px 0; }.workflow-list { margin:0; padding:0; list-style:none; }.workflow-list li { display:grid; grid-template-columns:54px 1fr; gap:18px; padding:21px 0; border-top:1px solid #263242; }.workflow-list li:last-child { border-bottom:1px solid #263242; }.workflow-list span { color:var(--accent); font:12px ui-monospace,SFMono-Regular,Menlo,monospace; }.workflow-list h3 { margin:0 0 6px; font-size:17px; }.workflow-list p { margin:0; color:#93a1b2; font-size:13px; line-height:1.65; }
.product-preview { display:grid; grid-template-columns:.86fr 1.14fr; align-items:center; gap:114px; padding:148px 0; }.preview-image { justify-self:center; width:264px; padding:7px; border:1px solid #526175; border-radius:34px; background:#0a0e14; box-shadow:0 30px 60px rgba(0,0,0,.32); }.preview-image img { border-radius:27px; }.preview-copy .secondary-button { margin-top:29px; }
.download-section { display:flex; align-items:center; justify-content:space-between; gap:50px; margin-bottom:50px; padding:65px 72px; border:1px solid #52647a; background:linear-gradient(110deg,#141d28,#101722); }.download-copy { max-width:600px; }.download-copy .primary-button { margin-top:30px; }.download-copy small { display:block; margin-top:13px; color:#91a0b1; font-size:12px; }.download-device { display:flex; align-items:center; gap:20px; }.download-device p { margin:0; color:#b2bfce; font-size:13px; line-height:1.72; }.download-qr { width:132px; height:132px; padding:8px; background:white; }.site-footer { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:30px; min-height:102px; color:#7f8da0; font-size:12px; }.site-footer p { margin:0; }
[data-download][aria-disabled="true"] { cursor:not-allowed; opacity:.56; } [data-download][aria-disabled="true"]:hover { background:inherit; border-color:inherit; transform:none; }
@media (prefers-reduced-motion:no-preference) { .hero-copy > * { animation:enter .58s cubic-bezier(.16,1,.3,1) both; }.hero-copy > *:nth-child(2) { animation-delay:.06s; }.hero-copy > *:nth-child(3) { animation-delay:.12s; }.hero-copy > *:nth-child(4) { animation-delay:.18s; }.hero-copy > *:nth-child(5) { animation-delay:.24s; }.device-front { animation:front-float 7s ease-in-out infinite alternate; }.device-back { animation:back-float 8s ease-in-out infinite alternate; } @keyframes enter { from { opacity:0; transform:translateY(13px); } to { opacity:1; transform:translateY(0); } } @keyframes front-float { to { transform:translate(-47px,-5px) rotate(-4deg); } } @keyframes back-float { to { transform:translate(126px,35px) rotate(7deg); } } }
@media (max-width:800px) { .section-shell { width:min(100% - 34px,560px); }.site-header { height:68px; }.brand-name { max-width:160px; overflow:hidden; text-overflow:ellipsis; }.site-header nav { display:none; }.header-download { padding:8px 10px; }.header-download small { display:none; }.hero { grid-template-columns:1fr; gap:20px; min-height:auto; padding:64px 0 58px; }.hero h1 { font-size:clamp(43px,12vw,57px); }.hero-summary { font-size:14px; }.hero-actions { align-items:stretch; flex-direction:column; max-width:240px; }.hero-visual { min-height:435px; }.visual-grid { inset:24px 0; }.device-front { width:181px; transform:translate(-41px,6px) rotate(-4deg); }.device-back { width:160px; transform:translate(96px,40px) rotate(7deg); }.caption-top { top:38px; right:0; }.caption-bottom { bottom:38px; left:0; }.value-line { align-items:flex-start; flex-direction:column; gap:12px; }.capabilities { padding:86px 0; }.capability-grid { grid-template-columns:1fr; margin-top:39px; }.feature-card,.capability-card { grid-column:auto; grid-row:auto; min-height:240px; }.feature-card { min-height:330px; }.wide-card { align-items:flex-start; flex-direction:column; justify-content:space-between; gap:16px; }.wide-card > span { min-width:0; text-align:left; }.workflow-inner,.product-preview { grid-template-columns:1fr; gap:43px; padding:82px 0; }.product-preview { gap:50px; }.preview-image { order:-1; }.download-section { align-items:flex-start; flex-direction:column; gap:38px; padding:40px 30px; }.download-device { gap:17px; }.site-footer { grid-template-columns:1fr; gap:12px; padding:28px 0; }.site-footer p:last-child { margin-top:8px; } }