:root { --ink:#14202a; --muted:#71808a; --line:#dce5e8; --blue:#277bc5; --paper:#f7faf9; --accent:#f2b44a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { height:76px; display:flex; align-items:center; max-width:1180px; margin:auto; padding:0 28px; gap:48px; }
.brand { display:flex; align-items:center; gap:11px; font-size:21px; font-weight:700; letter-spacing:.04em; }
.brand img { width:34px; height:34px; border-radius:10px; object-fit:cover; }
nav { display:flex; gap:31px; margin-right:auto; color:#65747c; font-size:14px; }
nav a:hover, .text-link:hover { color:var(--blue); }
.header-link { font-size:14px; font-weight:600; color:var(--blue); }
.header-link span { display:inline-block; margin-left:8px; font-size:17px; }
.hero { min-height:650px; max-width:1180px; margin:auto; padding:88px 28px 80px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; overflow:hidden; }
.eyebrow { color:var(--blue); font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; margin:0 0 22px; display:flex; align-items:center; gap:9px; }
.eyebrow span { width:25px; height:2px; background:var(--accent); display:inline-block; }
h1 { font-family:Georgia, "Songti SC", serif; font-size:clamp(47px, 6vw, 78px); font-weight:400; line-height:1.13; letter-spacing:-.04em; margin:0 0 26px; }
h1 em { color:var(--blue); font-style:normal; }
.hero-text { color:var(--muted); font-size:16px; line-height:1.9; max-width:420px; margin:0 0 31px; }
.hero-actions { display:flex; align-items:center; gap:27px; }
.button { display:inline-flex; align-items:center; gap:30px; padding:14px 19px 14px 21px; border-radius:7px; font-size:14px; font-weight:700; }
.button-primary { color:#fff; background:var(--blue); box-shadow:0 9px 20px #277bc530; }
.button-primary span { font-size:18px; line-height:10px; }
.text-link { font-size:14px; font-weight:600; color:#52626c; }
.text-link span { color:var(--blue); font-size:18px; margin-left:7px; }
.availability { color:#9aa5a9; font-size:11px; margin-top:30px; }
.hero-visual { height:490px; position:relative; display:flex; justify-content:center; align-items:center; }
.halo { position:absolute; width:410px; height:410px; border-radius:50%; background:#e4f0f2; }
.phone { position:absolute; width:218px; height:430px; border:7px solid #1b2a35; border-radius:29px; box-shadow:0 24px 35px #20364225; overflow:hidden; background:#fff; }
.phone-front { transform:rotate(7deg) translate(35px, 8px); z-index:2; }
.phone-back { transform:rotate(-12deg) translate(-64px, 22px); z-index:1; opacity:.88; }
.phone-notch { position:absolute; z-index:4; width:80px; height:16px; background:#1b2a35; left:62px; border-radius:0 0 12px 12px; }
.phone-screen { height:100%; padding:30px 17px 0; background:#f6f7f5; color:#1d2d36; }
.phone-screen.muted { padding:50px 23px; background:#dbe7e7; display:flex; flex-direction:column; justify-content:center; }
.phone-screen.muted span { color:#607d84; font-size:10px; }.phone-screen.muted strong { font:28px/1.3 Georgia,serif; margin-top:14px; }
.phone-top { font-size:8px; display:flex; justify-content:space-between; }.phone-kicker { color:#72939a; font-size:8px; letter-spacing:.15em; margin:38px 0 9px; }.phone-screen h2 { font:20px/1.35 Georgia,serif; margin:0; }.phone-screen h2 b { color:var(--blue); font-weight:400; }
.mini-book { height:147px; margin-top:25px; padding:17px 14px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(145deg,#a9c5ca,#436f79); }.mini-book span { font-size:8px; opacity:.75; }.mini-book strong { font:26px Georgia,serif; margin-top:auto; }.mini-book small { font-size:9px; margin-top:4px; }
.phone-row { display:flex; justify-content:space-between; font-size:9px; margin-top:22px; }.phone-row b { color:var(--blue); }.phone-progress { height:4px; background:#dce5e7; margin-top:9px; border-radius:4px; }.phone-progress i { display:block; width:58%; height:100%; background:var(--blue); border-radius:4px; }.phone-nav { position:absolute; bottom:0; left:0; right:0; height:51px; background:#fff; display:flex; justify-content:space-around; align-items:center; color:#9aa8ac; text-align:center; font-size:15px; }.phone-nav span.active { color:var(--blue); }.phone-nav small { display:block; font-size:7px; margin-top:3px; }
.feature-strip { background:#fff; border-top:1px solid #edf1f0; border-bottom:1px solid #edf1f0; padding:95px max(28px, calc((100% - 1124px)/2)); display:grid; grid-template-columns:1fr 2fr; gap:90px; }.section-intro h2, .download h2 { font:400 41px/1.25 Georgia,serif; letter-spacing:-.03em; margin:0; }.feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }.feature-list article { border-left:1px solid var(--line); padding-left:22px; }.feature-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; font-size:20px; margin-bottom:22px; }.feature-icon.blue { background:#e4f1fc; color:#277bc5; }.feature-icon.orange { background:#fff1d9; color:#d48c26; }.feature-icon.green { background:#e4f2e8; color:#57916a; }.feature-list h3 { margin:0 0 10px; font-size:16px; }.feature-list p { margin:0; color:var(--muted); font-size:13px; line-height:1.75; }
.download { max-width:1124px; margin:auto; padding:105px 28px 113px; display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }.download-text { color:var(--muted); font-size:14px; line-height:1.8; max-width:390px; }.release-info { margin:19px 0 0; padding-left:12px; border-left:2px solid var(--accent); color:#8b979b; font-size:12.5px; line-height:1.7; }.release-info b { color:var(--blue); font-weight:700; }.download-actions { display:grid; gap:13px; }.download-card { background:#fff; border:1px solid var(--line); padding:18px 20px; display:flex; align-items:center; gap:15px; border-radius:8px; transition:.2s; }.download-card:hover { border-color:var(--blue); transform:translateY(-2px); box-shadow:0 9px 20px #277bc512; }.download-card[aria-disabled="true"] { cursor:not-allowed; }.download-card[aria-disabled="true"]:hover { border-color:var(--line); transform:none; box-shadow:none; }.download-card[aria-disabled="true"] > strong { color:#c6cfd1; }.download-card .download-symbol { width:35px; height:35px; border-radius:9px; display:grid; place-items:center; background:#eaf3fb; color:var(--blue); }.download-card-muted { background:#fbfcfc; }.download-card-muted b { color:#839197; }.download-card-muted .download-symbol { background:#eef1f2; color:#b3bec1; }.download-card span:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:5px; }.download-card b { font-size:14px; }.download-card small { color:#98a4a8; font-size:11px; }.download-card > strong { color:var(--blue); font-size:20px; font-weight:400; }.download-card .is-quiet { color:#c6cfd1; }
footer { max-width:1124px; margin:auto; padding:23px 28px 35px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:#9aa5a9; font-size:11px; }
@media (max-width:760px) { .site-header { padding:0 20px; gap:20px; }.site-header nav { display:none; }.header-link { margin-left:auto; }.hero { padding:55px 24px 70px; display:block; min-height:0; }.hero-visual { margin-top:30px; height:405px; transform:scale(.82); transform-origin:top center; margin-bottom:-72px; }.feature-strip, .download { display:block; padding:65px 24px; }.feature-list { margin-top:45px; grid-template-columns:1fr; gap:28px; }.feature-list article { border-left:0; border-top:1px solid var(--line); padding:25px 0 0; }.download-actions { margin-top:40px; }.section-intro h2, .download h2 { font-size:35px; } footer { padding:22px 24px 30px; } }