:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #152338;
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --blue: #2f7dff;
  --blue2: #3fb8ff;
  --ink: #152338;
  --muted: #79879c;
  --line: #eaf0f7;
  --soft: #f6f9fd;
  --radius: 28px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #fff; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; max-width: 100%; }
.container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.page-shell { overflow: hidden; }

.topbar { position: fixed; inset: 0 0 auto; z-index: 50; height: 76px; transition: .25s ease; border-bottom: 1px solid transparent; }
.topbar.scrolled { background: rgba(255,255,255,.88); backdrop-filter: blur(18px); border-bottom-color: rgba(218,228,241,.8); box-shadow: 0 8px 35px rgba(34,78,133,.07); }
.nav-inner { height: 100%; display: flex; align-items: center; gap: 40px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
.brand-mark { width: 31px; height: 24px; position: relative; transform: skewX(-13deg); }
.brand-mark i { position: absolute; height: 9px; border-radius: 8px 3px 8px 3px; background: linear-gradient(90deg,#35c5ff,#3274ff); }
.brand-mark i:first-child { width: 28px; top: 0; left: 2px; }
.brand-mark i:last-child { width: 24px; bottom: 0; left: 0; transform: translateX(4px); }
.brand-shuihua { letter-spacing: 0; }
.brand-logo { width: 136px; height: auto; max-height: 40px; object-fit: contain; }
.topbar .brand-logo { width: 132px; }
nav { display: flex; gap: 34px; margin-left: auto; color: #64748a; font-size: 14px; }
nav a { transition: .2s; } nav a:hover { color: var(--blue); }
.download-btn { min-height: 44px; padding: 0 22px; border-radius: 12px; background: linear-gradient(135deg,#347dff,#2e9dff); color: white; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 700; box-shadow: 0 9px 24px rgba(47,125,255,.24); transition: transform .2s, box-shadow .2s; }
.download-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(47,125,255,.34); }
.win-grid, .win-icon-big { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; }
.win-grid { width: 15px; height: 15px; }
.win-grid i, .win-icon-big i { background: currentColor; border-radius: 1px; }

.hero { position: relative; min-height: 790px; padding: 122px 0 82px; background: radial-gradient(circle at 77% 20%, rgba(87,181,255,.31), transparent 31%), linear-gradient(180deg,#edf8ff 0%,#f7fbff 64%,#fff 100%); }
.hero-bg-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(rgba(78,139,208,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(78,139,208,.08) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.hero-layout { position: relative; display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: 42px; min-height: 575px; }
.hero-copy { position: relative; z-index: 3; padding-left: 12px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 14px; color: #60758c; }
.eyebrow span { padding: 5px 8px; border-radius: 7px; color: #287bff; background: #e4f2ff; font-size: 11px; letter-spacing: .08em; }
h1 { margin: 24px 0 20px; color: #102541; font-size: clamp(58px,6.1vw,94px); line-height: .98; letter-spacing: -.065em; font-weight: 820; }
h1 em { font-style: normal; background: linear-gradient(90deg,#2d74ff,#32b9ff); -webkit-background-clip: text; color: transparent; }
.hero-copy > p { width: min(470px,100%); margin: 0; color: #72849b; font-size: 17px; line-height: 1.9; }
.hero-actions { margin-top: 34px; display: flex; align-items: center; gap: 24px; }
.hero-actions .download-btn { min-height: 52px; padding: 0 28px; border-radius: 14px; font-size: 16px; }
.text-link { color: #55708e; font-size: 14px; font-weight: 650; }
.text-link span { color: var(--blue); margin-left: 5px; }
.hero-note { margin-top: 14px; color: #a0aebe; font-size: 12px; }
.hero-fade { position: absolute; bottom: 0; left: 0; right: 0; height: 100px; background: linear-gradient(transparent,#fff); }

.hero-visual { position: relative; z-index: 2; height: 565px; transform: perspective(1300px) rotateY(-4deg); }
.halo { position: absolute; border-radius: 999px; filter: blur(2px); }
.halo-a { width: 470px; height: 470px; right: 5%; top: 4%; background: radial-gradient(circle at 40% 40%,rgba(94,210,255,.5),rgba(67,125,255,.08) 65%,transparent 70%); }
.halo-b { width: 300px; height: 300px; left: 10%; bottom: 1%; background: radial-gradient(circle,rgba(126,105,255,.22),transparent 70%); }
.glass-window { position: absolute; width: 660px; max-width: 100%; right: -4%; top: 65px; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; overflow: hidden; background: rgba(252,254,255,.78); backdrop-filter: blur(22px); box-shadow: 0 35px 80px rgba(49,104,169,.2), inset 0 0 0 1px rgba(213,233,250,.6); }
.window-topbar { height: 52px; display: flex; align-items: center; padding: 0 18px; background: rgba(255,255,255,.72); border-bottom: 1px solid #eaf1f8; color: #9cadbd; font-size: 12px; }
.traffic { display: flex; gap: 6px; } .traffic i { width: 9px; height: 9px; border-radius: 50%; background: #d9e4ef; } .traffic i:first-child{background:#ff7d78}.traffic i:nth-child(2){background:#ffc95a}.traffic i:nth-child(3){background:#68d28a}
.window-title { margin: auto; color: #718298; font-weight: 700; }
.window-actions { letter-spacing: 2px; }
.window-body { display: grid; grid-template-columns: 112px 1fr; min-height: 380px; }
.window-body aside { padding: 25px 16px; background: rgba(247,251,255,.84); border-right: 1px solid #edf2f7; display: flex; flex-direction: column; gap: 23px; color: #9babbc; font-size: 12px; }
.window-body aside b { color: #2f7dff; background: #eaf3ff; padding: 9px 10px; border-radius: 9px; }
.mini-logo { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg,#3cc5ff,#337aff); color:white; margin-bottom: 4px; }
.window-body main { padding: 25px; }
.searchbar { height: 44px; padding: 0 9px 0 16px; border-radius: 12px; background: #f3f7fb; color:#a1aebe; display:flex; align-items:center; font-size:12px; }
.searchbar strong { margin-left:auto; background:#377fff; color:white; padding:8px 12px; border-radius:8px; }
.mock-title { margin: 28px 0 14px; font-size: 19px; font-weight: 800; color:#203752; }
.mock-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.movie-card { height:142px; border-radius:14px; overflow:hidden; position:relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.movie-card::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 62% 30%,rgba(255,255,255,.6),transparent 18%), linear-gradient(145deg,transparent 0 40%,rgba(255,255,255,.3) 41% 43%,transparent 44%), radial-gradient(circle at 55% 55%,transparent 0 15%,rgba(255,255,255,.18) 16% 17%,transparent 18%); }
.movie-card i { position:absolute; bottom:10px; left:10px; padding:4px 7px; border-radius:6px; background:rgba(10,30,60,.6); color:white; font-style:normal; font-size:10px; }
.m1 { background: linear-gradient(160deg,#265a88,#54b3df 55%,#141f3c); }.m2 { background: linear-gradient(160deg,#7e96c4,#272c5e 55%,#a4d1df); }.m3 { background: linear-gradient(160deg,#7bb2ec,#172c57 55%,#e9b55f); }
.task-row { margin-top: 18px; height:50px; display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; border-radius:12px; padding:0 14px; background:#f6f9fc; font-size:11px; color:#667b93; }.task-row small{color:#a6b2c1}.task-row b{color:#2d7bff}
.float-pill { position:absolute; z-index:5; display:flex; align-items:center; gap:8px; padding:11px 15px; border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.82); backdrop-filter:blur(12px); border-radius:999px; box-shadow:0 12px 35px rgba(57,106,166,.12); color:#416c9d; font-size:12px; font-weight:700; }
.float-pill span { color:#2d87ff; }.pill-one{left:1%;top:105px}.pill-two{right:-3%;top:215px}.pill-three{left:17%;bottom:30px}

.section { padding: 112px 0; }
.section-head { max-width: 680px; margin-bottom: 52px; }
.section-head.centered { margin-inline: auto; text-align:center; margin-bottom:42px; }
.section-kicker { display:block; color:#3f8dff; font-size:12px; letter-spacing:.16em; font-weight:800; margin-bottom:13px; }
h2 { margin:0; color:#16283f; font-size:clamp(34px,4vw,52px); letter-spacing:-.045em; line-height:1.16; }
.section-head p,.devices-copy>p { color:#8391a4; font-size:15px; line-height:1.85; margin:16px 0 0; }
.core-section { background:#fff; }
.core-tabs { display:grid; grid-template-columns: repeat(5,1fr); gap: 10px; padding:8px; background:#f5f8fc; border-radius:19px; }
.core-tabs button { appearance:none; border:0; border-radius:14px; padding:15px 13px; background:transparent; display:flex; gap:10px; align-items:center; text-align:left; color:#8494a7; cursor:pointer; transition:.2s; }
.core-tabs button>span { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border-radius:10px; background:white; color:#5b8fc9; font-weight:800; box-shadow:0 3px 10px rgba(50,89,130,.07); font-size:11px; }
.core-tabs b,.core-tabs small { display:block; }.core-tabs b{font-size:13px;color:#465a72}.core-tabs small{font-size:10px;line-height:1.35;margin-top:3px}
.core-tabs button.active { background:white; box-shadow:0 6px 20px rgba(41,76,119,.09); }.core-tabs button.active>span{color:white;background:linear-gradient(135deg,#367aff,#43b7ff)}.core-tabs button.active b{color:#267bfa}
.core-detail { margin-top:34px; min-height:490px; border-radius:32px; background:linear-gradient(135deg,#eff8ff,#f8fbff); display:grid; grid-template-columns:.4fr .6fr; align-items:center; overflow:hidden; border:1px solid #edf3f9; }
.core-detail-copy { padding:60px; }.core-detail-copy .number{font-size:12px;color:#2e84ff;font-weight:900;letter-spacing:.2em}.core-detail-copy h3{font-size:39px;margin:14px 0 12px;color:#1d3550}.core-detail-copy p{color:#74879c;line-height:1.8}.detail-line{width:42px;height:3px;border-radius:3px;background:linear-gradient(90deg,#2e7cff,#4fcfff);margin:25px 0}.core-detail-copy .muted{font-size:13px;color:#9aa8b7}
.core-stage { position:relative; min-height:490px; display:grid; place-items:center; overflow:hidden; }.core-shot{width:88%;position:relative;z-index:2;filter:drop-shadow(0 25px 30px rgba(53,121,177,.18))}.core-shot img{border-radius:22px}.core-overlay{position:absolute;right:6%;top:7%;max-width:190px;padding:12px 14px;border-radius:15px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(47,101,157,.12)}.core-overlay span{color:#2f82ff;font-weight:900}.core-overlay b,.core-overlay small{display:block}.core-overlay b{margin-top:5px;font-size:13px}.core-overlay small{margin-top:3px;color:#8191a4;font-size:10px}.core-orb{position:absolute;border-radius:50%;filter:blur(4px)}.o1{width:300px;height:300px;background:#b3e3ff;right:5%;top:5%;opacity:.4}.o2{width:220px;height:220px;background:#d1c8ff;left:15%;bottom:-7%;opacity:.25}

.feature-section { background:#f8fbff; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feature-card { min-height:365px; border-radius:26px; padding:28px 28px 0; background:#fff; border:1px solid #edf2f7; box-shadow:0 12px 40px rgba(55,83,122,.05); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s ease,box-shadow .25s ease; }
.feature-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(55,83,122,.1); }
.feature-copy h3{font-size:22px;margin:0;color:#1e334d}.feature-copy p{font-size:13px;color:#91a0b1;margin:9px 0 0}.feature-card img{width:calc(100% + 56px);max-width:none;margin:auto -28px 0;object-fit:cover;}.feature-card.wide{grid-column:span 2;display:grid;grid-template-columns:.45fr .55fr;align-items:center;padding-bottom:0}.feature-card.wide img{width:100%;margin:0;align-self:end}

.devices-section { position:relative; padding:130px 0 118px; background:linear-gradient(135deg,#eef8ff 0%,#f7fbff 60%,#f4f8ff 100%); }
.devices-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px;align-items:center;position:relative;z-index:2}.devices-copy h2{font-size:52px;line-height:1.16;margin:0;color:#193149;letter-spacing:-.045em}.device-platform{display:flex;gap:14px;align-items:center;margin:28px 0 22px}.win-icon-big{width:36px;height:36px;color:#3d8cff;gap:3px}.device-platform b,.device-platform small{display:block}.device-platform b{font-size:15px}.device-platform small{font-size:11px;color:#9eacba;margin-top:4px}.devices-copy .download-btn{min-height:50px;padding:0 25px}.device-blob{position:absolute;border-radius:50%;filter:blur(3px)}.blob-left{width:300px;height:300px;background:rgba(80,192,255,.17);left:-120px;bottom:-70px}.blob-right{width:400px;height:400px;background:rgba(106,99,255,.11);right:-180px;top:30px}
.devices-graphic{height:500px;position:relative}.desktop-device{position:absolute;width:500px;right:8%;top:12px}.device-screen{height:315px;border:9px solid rgba(255,255,255,.95);border-radius:25px;background:white;box-shadow:0 28px 70px rgba(45,91,146,.18);overflow:hidden;display:grid;grid-template-columns:82px 1fr}.device-side{background:linear-gradient(#edf5ff,#f9fbff);border-right:1px solid #eef2f8}.device-content{padding:30px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.device-content i{border-radius:16px;background:linear-gradient(145deg,#dceeff,#f3f8ff);position:relative}.device-content i::after{content:"";position:absolute;inset:18%;border-radius:10px;background:linear-gradient(145deg,#73b2ff,#b0dcff)}.device-neck{width:68px;height:55px;background:linear-gradient(#d8e7f6,#edf3f9);margin:auto}.device-base{width:170px;height:13px;border-radius:50%;background:#dfeaf4;margin:auto;box-shadow:0 10px 20px rgba(56,91,122,.15)}
.phone-device{position:absolute;width:178px;height:348px;left:4%;bottom:8px;border:8px solid rgba(255,255,255,.95);border-radius:32px;background:linear-gradient(#edf7ff,#f8fbff);box-shadow:0 24px 60px rgba(43,86,137,.2);padding:32px 14px 14px}.phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:52px;height:7px;border-radius:6px;background:#d8e3ef}.phone-card{height:105px;border-radius:14px;margin-bottom:12px;background:linear-gradient(145deg,#70aefa,#c5e5ff)}.phone-card.p2{background:linear-gradient(145deg,#9994e9,#d6d1ff)}.phone-bottom{height:33px;border-radius:12px;background:white}.sync-bubble{position:absolute;left:26%;top:45%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;padding:13px 17px;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 12px 35px rgba(51,95,144,.14);font-size:12px;color:#4d6c8d}.sync-bubble span{font-size:22px;color:#398aff}.sync-bubble b{font-size:12px}

footer { background:#111a27; color:#8b9aaf; padding:50px 0; }
.footer-inner { text-align:center; }
.footer-inner .brand { color:white; justify-content:center; margin-bottom:24px; }
.footer-inner .brand-logo { width:148px; max-height:44px; }
.footer-inner p { font-size:12px; line-height:1.9; margin:3px 0; }
.footer-inner .company-name { color:#c5d0de; font-weight:700; font-size:13px; margin-bottom:5px; }
.footer-inner small { display:block; margin-top:18px; color:#66768b; font-size:11px; }

@media (max-width: 1000px) {
  nav { display:none; }
  .nav-inner .download-btn { margin-left:auto; }
  .hero { min-height:auto; }
  .hero-layout { grid-template-columns:1fr; padding-top:40px; }
  .hero-copy { text-align:center; padding-left:0; }.hero-copy>p{margin-inline:auto}.hero-actions{justify-content:center}
  .hero-visual { width:min(760px,100%); margin:auto; }
  .glass-window { right:5%; width:90%; }
  .core-tabs { grid-template-columns:repeat(3,1fr); }
  .core-detail { grid-template-columns:1fr; }.core-detail-copy{padding:42px 45px 20px}.core-stage{min-height:400px}
  .feature-grid { grid-template-columns:repeat(2,1fr); }.feature-card.wide{grid-column:span 2}
  .devices-layout{grid-template-columns:1fr;}.devices-copy{text-align:center;max-width:600px;margin:auto}.device-platform{justify-content:center}.devices-graphic{width:min(700px,100%);margin:auto}
}
@media (max-width: 680px) {
  .container { width:min(100% - 28px,1200px); }
  .topbar{height:66px}.brand{font-size:18px}.nav-inner>.download-btn{min-height:39px;padding:0 14px;font-size:12px}
  .hero { padding-top:96px; }.hero-layout{gap:0}.eyebrow{font-size:12px}h1{font-size:54px}.hero-copy>p{font-size:14px}.hero-actions{flex-direction:column;gap:15px}.hero-note{margin-top:10px}
  .hero-visual{height:440px;transform:none;margin-top:18px}.glass-window{top:70px;right:0;width:100%;border-radius:18px}.window-body{grid-template-columns:72px 1fr;min-height:286px}.window-body aside{padding:17px 9px;gap:15px}.window-body main{padding:16px}.mock-cards{gap:7px}.movie-card{height:95px}.searchbar{font-size:9px}.searchbar strong{padding:7px;font-size:9px}.task-row{font-size:9px}.float-pill{font-size:10px;padding:8px 11px}.pill-one{left:0;top:42px}.pill-two{right:0;top:230px}.pill-three{left:8%;bottom:6px}
  .section{padding:78px 0}.section-head{margin-bottom:34px}h2{font-size:36px}.section-head p{font-size:13px}
  .core-tabs{display:flex;overflow-x:auto;scrollbar-width:none;padding:6px}.core-tabs button{min-width:166px}.core-detail{border-radius:23px}.core-detail-copy{padding:34px 28px 10px}.core-detail-copy h3{font-size:31px}.core-stage{min-height:290px}.core-shot{width:100%}.core-overlay{display:none}
  .feature-grid{grid-template-columns:1fr}.feature-card,.feature-card.wide{grid-column:span 1;min-height:330px;display:flex}.feature-card.wide img{width:calc(100% + 56px);max-width:none;margin:auto -28px 0}
  .devices-section{padding:82px 0}.devices-copy h2{font-size:38px}.devices-layout{gap:35px}.devices-graphic{height:330px}.desktop-device{width:340px;right:-25px}.device-screen{height:215px;border-width:6px;border-radius:18px;grid-template-columns:55px 1fr}.device-content{padding:18px;gap:10px}.phone-device{width:118px;height:236px;left:0;border-width:5px;border-radius:23px;padding:27px 10px 10px}.phone-card{height:69px}.desktop-device .device-neck{height:34px;width:48px}.desktop-device .device-base{width:120px}.sync-bubble{left:27%;top:55%;padding:9px 11px}.sync-bubble b{display:none}
  footer{padding:40px 0}.footer-inner p{font-size:10px}
}