:root { --ink:#10243c; --blue:#2768f4; --sky:#eaf2ff; --lime:#c7ff6d; --muted:#6f8095; --line:#d9e1ea; --max:1180px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#fff; font-family:"Noto Sans SC",Arial,sans-serif; } a { color:inherit; text-decoration:none; } .announcement { background:var(--ink); color:#d9e9ff; min-height:34px; display:flex; align-items:center; justify-content:center; gap:18px; font-size:11px; letter-spacing:.12em; } .announcement a { color:var(--lime); border-bottom:1px solid #72965e; }
.site-header { height:88px; max-width:var(--max); margin:auto; display:flex; align-items:center; justify-content:space-between; padding:0 20px; } .brand { display:inline-flex; align-items:center; gap:9px; font-size:18px; letter-spacing:-.04em; font-weight:700; white-space:nowrap; } .brand b { color:var(--blue); } .brand-mark { display:grid; place-items:center; height:29px; width:29px; background:var(--blue); color:white; border-radius:50% 50% 50% 8%; font-family:"DM Mono",monospace; font-size:15px; } nav { display:flex; align-items:center; gap:31px; color:#4b5e75; font-size:14px; } nav > a:not(.nav-cta):hover { color:var(--blue); } .nav-cta { padding:11px 16px; color:white; background:var(--blue); border-radius:3px; } .nav-cta span { margin-left:12px; } .menu-toggle { display:none; border:0; background:none; width:36px; padding:7px; } .menu-toggle i { display:block; height:2px; background:var(--ink); margin:5px 0; }
.hero { min-height:550px; max-width:var(--max); margin:auto; display:grid; grid-template-columns:1.03fr .97fr; gap:20px; padding:65px 20px 72px; overflow:hidden; } .eyebrow { margin:0 0 18px; color:#55708b; font:10px "DM Mono",monospace; letter-spacing:.12em; } .eyebrow span { display:inline-block; vertical-align:middle; width:20px; height:1px; margin-right:8px; background:var(--blue); } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(43px,5.2vw,72px); line-height:1.13; letter-spacing:-.075em; margin-bottom:24px; font-weight:700; } h1 span { color:var(--blue); } .hero-text { max-width:425px; color:#60738a; font-size:16px; line-height:1.85; } .hero-actions { display:flex; gap:24px; margin-top:34px; align-items:center; } .button { font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:24px; padding:15px 20px; transition:transform .2s, background .2s; } .button:hover { transform:translateY(-2px); } .button-primary { background:var(--blue); color:white; border-radius:3px; } .button-quiet { color:var(--ink); padding-left:0; } .button-quiet span,.button-primary span { font-size:20px; font-weight:400; } .hero-proof { margin-top:54px; color:#789; font-size:11px; letter-spacing:.04em; display:flex; align-items:center; gap:8px; } .pulse { width:7px; height:7px; background:#5dbb3c; border-radius:50%; box-shadow:0 0 0 5px #ecf8e8; }
.hero-visual { position:relative; min-height:420px; background:radial-gradient(circle at 50% 50%,#e1edff 0,#f5f9ff 43%,transparent 68%); } .globe { position:absolute; width:320px; height:320px; left:50%; top:48%; transform:translate(-50%,-50%); border-radius:50%; background:linear-gradient(135deg,#174397,#377fff 55%,#7bacff); box-shadow:inset -35px -22px 60px #123675, 18px 24px 50px #b7ccec; overflow:hidden; } .globe:after { content:""; position:absolute; inset:5px; border:1px solid #a7c5ff; border-radius:50%; opacity:.45; } .continent { position:absolute; display:block; background:#9fc4ff; border-radius:50% 40% 45% 55%; opacity:.85; } .c-one { width:128px; height:85px; top:50px; left:-15px; transform:rotate(24deg); } .c-two { width:89px; height:130px; bottom:29px; left:70px; transform:rotate(-35deg); } .c-three { width:112px; height:65px; right:-19px; top:120px; transform:rotate(-17deg); } .longitude,.latitude { position:absolute; border:1px solid #a5c7ff; opacity:.48; } .longitude { inset:0 70px; border-radius:50%; } .l-two { inset:0 119px; } .latitude { left:0; right:0; height:78px; top:50%; margin-top:-39px; border-radius:50%; } .a-two { top:29%; }.orbit { position:absolute; border:1px solid #c3d8fe; border-radius:50%; left:50%; top:48%; transform:translate(-50%,-50%) rotate(-28deg); } .orbit-one { width:440px; height:190px; }.orbit-two { width:360px; height:470px; transform:translate(-50%,-50%) rotate(34deg);}.orbit-three { width:475px; height:330px; transform:translate(-50%,-50%) rotate(75deg); border-color:#e1ecff; }.signal { position:absolute; display:flex; align-items:center; gap:4px; }.signal b { width:8px;height:8px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 7px #c7ff6d55;}.signal i {width:45px;height:1px;background:#7aacff;display:block;}.signal-one {top:104px;right:50px;transform:rotate(-18deg);}.signal-two {bottom:86px;left:58px;transform:rotate(165deg);}.floating-card { position:absolute; background:white; box-shadow:0 13px 32px #284a7920; padding:15px 17px; min-width:144px; }.floating-card small { display:block; font:9px "DM Mono",monospace; color:#8192a6; margin-bottom:4px; }.floating-card strong { font:29px "DM Mono",monospace; color:var(--ink); }.floating-card em { color:var(--blue); font-style:normal; font-size:14px; }.card-uptime { top:55px; left:1px; }.card-uptime > span { display:block; height:3px; background:linear-gradient(90deg,var(--blue) 86%,#e0e8f1 86%); margin-top:8px; }.card-nodes { bottom:43px; right:5px; }.card-nodes strong span { color:var(--blue); }.card-nodes p { font-size:10px; color:#8997a7; margin:4px 0 0; }
.trust-bar { max-width:var(--max); margin:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); min-height:124px; display:flex; align-items:center; justify-content:space-between; padding:20px; }.trust-bar > p { color:#687b91; width:220px; font-size:13px; line-height:1.7; margin:0; }.trust-bar > div { display:flex; gap:58px; }.trust-bar > div > span { font:30px "DM Mono",monospace; color:var(--ink); }.trust-bar sup { color:var(--blue); }.trust-bar small { display:block; color:#8493a6; font:10px "Noto Sans SC",sans-serif; margin-top:2px; }
.section { max-width:var(--max); margin:auto; padding:115px 20px; }.solutions { display:grid; grid-template-columns:1fr 1fr; gap:28px; }.section-intro h2,.contact h2 { font-size:clamp(34px,4vw,53px); letter-spacing:-.065em; line-height:1.17; margin:0; }.section-summary { max-width:365px; align-self:end; justify-self:end; color:#75869a; font-size:15px; line-height:1.9; margin:0; }.service-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:28px; }.service-card { min-height:315px; background:#f5f8fc; padding:28px; position:relative; overflow:hidden; }.feature-card { background:var(--blue); color:white; }.service-icon { font:11px "DM Mono",monospace; color:#8094aa; margin-bottom:62px; }.feature-card .service-icon { color:#b9d1ff; }.service-card h3 { font-size:21px; letter-spacing:-.04em; margin-bottom:10px; }.service-card p { color:#718298; font-size:13px; line-height:1.8; max-width:235px; }.feature-card p { color:#d9e8ff; }.service-card a { position:absolute; bottom:25px; color:var(--blue); font-size:13px; }.feature-card a { color:var(--lime); }.service-card a span { margin-left:10px; }.number-lines,.route-icon,.message-icon { position:absolute; opacity:.4; }.number-lines { right:-30px; top:50px; }.number-lines i { display:block; height:10px; width:90px; margin:11px; border:1px solid white; border-radius:8px; transform:rotate(-37deg); }.route-icon { width:120px; height:120px; border:1px dashed #78a3dc; border-radius:50%; right:-22px; top:36px; }.route-icon i { position:absolute; width:20px; height:20px; border-radius:50%; background:#b8d4ff; }.route-icon i:nth-child(1){left:4px;top:45px}.route-icon i:nth-child(2){right:10px;top:17px}.route-icon i:nth-child(3){right:5px;bottom:17px}.message-icon { width:108px; height:76px; right:18px; top:42px; border:1px solid #90b2e9; border-radius:6px; }.message-icon:after { content:""; position:absolute; bottom:-10px; left:16px; border:9px solid transparent; border-top-color:#90b2e9; }.message-icon i { display:block; width:57px; height:1px; background:#90b2e9; margin:16px auto -9px; }.dark-band { background:var(--ink); color:white; padding:29px max(20px,calc((100% - var(--max))/2)); display:flex; justify-content:space-between; align-items:center; }.dark-band p { margin:0; font-size:16px; }.dark-band span { color:#9fafc3; font:11px "DM Mono",monospace; }
.scenarios { padding-bottom:102px; }.scenario-list { margin-top:50px; border-top:1px solid var(--line); }.scenario-list article { display:grid; grid-template-columns:120px 1fr 40px; align-items:center; min-height:137px; border-bottom:1px solid var(--line); transition:padding .2s,background .2s; }.scenario-list article:hover { padding:0 17px; background:#f5f8fc; }.scenario-number { color:#8293a7; font:11px "DM Mono",monospace; }.scenario-list h3 { font-size:22px; letter-spacing:-.04em; margin:0 0 7px; }.scenario-list p { color:#7c8d9f; font-size:13px; margin:0; }.arrow { color:var(--blue); font-size:23px; }
.contact { background:var(--blue); color:white; padding:80px max(20px,calc((100% - var(--max))/2)); display:grid; grid-template-columns:1.15fr .85fr; gap:60px; align-items:center; }.light { color:#bed4ff; }.light span { background:var(--lime); }.contact > div > p:last-child { color:#d6e4ff; line-height:1.8; margin:19px 0 0; }.contact-panel { background:white; color:var(--ink); padding:30px; }.contact-panel small { color:#8192a6; font:10px "DM Mono",monospace; }.contact-panel h3 { margin:18px 0 9px; line-height:1.35; font-size:23px; letter-spacing:-.04em; }.contact-panel strong { color:var(--blue); }.contact-panel p { color:#718398; font-size:12px; }.button-light { background:var(--lime); padding:13px 16px; margin-top:12px; } footer { min-height:142px; max-width:var(--max); margin:auto; padding:35px 20px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; color:#76879a; font-size:12px; } footer .brand { color:var(--ink); } footer p:last-child { text-align:right; }
@media (max-width:760px) { .announcement { font-size:9px; gap:8px; }.site-header { height:68px; }.menu-toggle { display:block; } nav { position:absolute; top:102px; left:0; right:0; background:white; padding:20px; display:none; flex-direction:column; align-items:stretch; z-index:4; box-shadow:0 12px 20px #152f4f12; }.site-header.is-open nav { display:flex; }.hero { grid-template-columns:1fr; padding-top:52px; }.hero-visual { min-height:350px; }.globe { width:270px;height:270px; }.orbit-one { width:350px; }.floating-card { transform:scale(.88); }.trust-bar { display:block; }.trust-bar > p { width:auto; }.trust-bar > div { justify-content:space-between; gap:4px; margin-top:18px; }.trust-bar > div > span { font-size:22px; }.section { padding-top:75px; padding-bottom:75px; }.solutions { grid-template-columns:1fr; }.section-summary { justify-self:start; }.service-grid { grid-template-columns:1fr; }.service-card { min-height:265px; }.service-icon { margin-bottom:37px; }.scenario-list article { grid-template-columns:48px 1fr 25px; min-height:125px; }.scenario-list p { line-height:1.6; }.contact { grid-template-columns:1fr; gap:36px; padding-top:63px; padding-bottom:63px; } footer { grid-template-columns:1fr; gap:18px; } footer p:last-child { text-align:left; } }