:root { --ink:#071d28; --muted:#61727b; --mint:#5ef2b4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#f4f8f8; color:var(--ink); font-family:Inter,"Microsoft YaHei",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1160px,calc(100% - 48px)); margin-inline:auto; }
.hero { position:relative; min-height:760px; height:100svh; overflow:hidden; color:#f7ffff; background:radial-gradient(circle at 50% 52%,rgba(19,91,107,.55),transparent 34%),linear-gradient(145deg,#041820 0%,#07303b 50%,#061d28 100%); }
.hero::after { content:""; position:absolute; inset:auto 0 0; height:180px; background:linear-gradient(transparent,rgba(2,15,21,.65)); pointer-events:none; }
.map-grid { position:absolute; inset:-20%; opacity:.18; transform:perspective(700px) rotateX(55deg) rotateZ(-9deg) scale(1.25); background-image:linear-gradient(rgba(127,226,233,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(127,226,233,.3) 1px,transparent 1px); background-size:74px 74px; mask-image:radial-gradient(circle at center,#000 0%,transparent 67%); }
.glow { position:absolute; border-radius:50%; opacity:.55; }
.glow-one { width:420px; height:420px; left:-250px; top:180px; background:#107a8d; filter:blur(90px); }
.glow-two { width:360px; height:360px; right:-220px; bottom:80px; background:#0aa981; filter:blur(100px); }
.nav { position:relative; z-index:10; height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(230,255,255,.12); }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:21px; font-weight:700; letter-spacing:.12em; }
.brand-mark { width:29px; height:29px; display:grid; place-items:center; border:1px solid rgba(122,242,218,.65); border-radius:50% 50% 50% 8px; transform:rotate(-45deg); }
.brand-mark span { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 14px var(--mint); }
.nav nav { display:flex; gap:38px; color:rgba(238,255,255,.62); font-size:14px; }
.nav nav a:hover { color:#fff; }
.nav-status { display:flex; align-items:center; gap:9px; font-size:11px; letter-spacing:.12em; color:rgba(238,255,255,.62); }
.nav-status i { width:6px; height:6px; background:var(--mint); border-radius:50%; box-shadow:0 0 10px var(--mint); }
.hero-content { position:relative; z-index:3; height:calc(100% - 92px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding-bottom:44px; text-align:center; }
.eyebrow { display:flex; align-items:center; gap:10px; color:rgba(213,255,248,.7); font-size:13px; letter-spacing:.22em; margin-bottom:24px; }
.eyebrow span { width:24px; height:1px; background:var(--mint); }
h1 { margin:0; font-size:clamp(58px,7.4vw,104px); line-height:.98; letter-spacing:-.065em; font-weight:620; }
h1 em { color:transparent; font-style:normal; background:linear-gradient(95deg,#fff 12%,#75f4d6 80%); -webkit-background-clip:text; background-clip:text; }
.hero-copy { max-width:560px; margin:28px auto 34px; color:rgba(226,247,248,.6); font-size:16px; line-height:1.8; }
.download-button { display:inline-flex; align-items:center; gap:32px; min-width:218px; justify-content:space-between; padding:8px 9px 8px 28px; border-radius:999px; background:linear-gradient(110deg,#69f1ba,#5bd6ff); color:#062630; font-weight:750; font-size:16px; box-shadow:0 18px 55px rgba(46,226,182,.2); transition:.25s ease; }
.download-button i { width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:rgba(4,38,47,.92); color:#b8ffe8; font-size:21px; font-style:normal; }
.download-button:hover { transform:translateY(-3px); box-shadow:0 22px 66px rgba(46,226,182,.34); }
.download-button:focus-visible { outline:3px solid #fff; outline-offset:5px; }
.compatibility { margin-top:17px; color:rgba(222,247,247,.38); font-size:11px; letter-spacing:.12em; }
.compatibility span { color:var(--mint); font-size:8px; }
.location-card { position:absolute; z-index:4; display:flex; align-items:center; gap:13px; padding:15px 17px; border:1px solid rgba(211,255,250,.13); border-radius:14px; background:rgba(8,41,49,.66); backdrop-filter:blur(16px); box-shadow:0 20px 48px rgba(0,0,0,.18); }
.location-card-left { left:7%; top:48%; transform:rotate(-3deg); }
.location-card-right { right:8%; top:35%; transform:rotate(2deg); }
.location-card div { display:grid; gap:4px; }
.location-card b { font-size:11px; letter-spacing:.08em; }
.location-card small { color:rgba(223,250,250,.42); font-size:9px; }
.mini-pin { width:31px; height:31px; place-items:center; border-radius:50% 50% 50% 7px; background:rgba(92,239,185,.12); transform:rotate(-45deg); border:1px solid rgba(92,239,185,.35); }
.mini-pin span { width:6px; height:6px; border-radius:50%; background:var(--mint); }
.pulse-dot { width:10px; height:10px; margin:10px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 7px rgba(94,242,180,.1),0 0 18px var(--mint); }
.scroll-cue { position:absolute; z-index:5; bottom:27px; left:50%; width:22px; height:35px; border:1px solid rgba(255,255,255,.2); border-radius:16px; }
.scroll-cue span { display:block; width:2px; height:7px; margin:7px auto; background:var(--mint); border-radius:2px; animation:scroll 1.7s infinite; }
@keyframes scroll { 0%{transform:translateY(0);opacity:0} 35%{opacity:1} 100%{transform:translateY(10px);opacity:0} }
.features { padding-block:128px 142px; }
.section-heading p,.about-label { margin:0 0 13px; color:#159473; font-size:11px; font-weight:700; letter-spacing:.18em; }
.section-heading h2,.about h2 { margin:0; font-size:clamp(35px,5vw,59px); line-height:1.15; letter-spacing:-.05em; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:60px; }
.feature-card { min-height:260px; padding:34px; border:1px solid rgba(7,29,40,.1); border-radius:22px; background:rgba(255,255,255,.72); transition:.25s ease; }
.feature-card:hover { transform:translateY(-5px); border-color:rgba(12,162,124,.35); }
.feature-card>span { font-size:11px; color:#16a37e; }
.feature-card h3 { margin:80px 0 10px; font-size:22px; }
.feature-card p { margin:0; color:var(--muted); line-height:1.75; font-size:14px; }
.about { background:#0a2731; color:#f1ffff; }
.about-inner { min-height:410px; display:grid; grid-template-columns:1.2fr .8fr; gap:100px; align-items:center; }
.about-inner>p { color:rgba(230,250,250,.56); font-size:15px; line-height:2; }
.footer { height:132px; display:flex; align-items:center; justify-content:space-between; }
.footer-brand { color:var(--ink); }
.footer .brand-mark { border-color:rgba(5,83,78,.38); }
.footer p { color:#849197; font-size:12px; }
@media(max-width:900px) { .location-card{display:none}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:210px}.feature-card h3{margin-top:50px}.about-inner{grid-template-columns:1fr;gap:36px;padding-block:80px} }
@media(max-width:620px) { .shell{width:min(100% - 32px,1160px)}.hero{min-height:720px}.nav{height:76px}.nav nav{display:none}.nav-status{font-size:9px}.hero-content{height:calc(100% - 76px)}h1{font-size:clamp(50px,15vw,74px);line-height:1.04}.hero-copy{font-size:14px;margin:24px auto 30px}.features{padding-block:86px}.feature-grid{margin-top:40px}.footer{height:auto;padding-block:38px;flex-direction:column;align-items:flex-start;gap:18px} }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }