:root {
  --ink: #071021;
  --navy: #071938;
  --blue: #0754ff;
  --cyan: #08c7f5;
  --line: #dfe6ef;
  --muted: #657188;
  --surface: #f4f7fb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: "Inter", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }

.site-header { height: 82px; padding: 0 clamp(24px, 5vw, 82px); display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid rgba(7,16,33,.08); position: relative; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(18px); }
.brand img { width: 224px; height: auto; display: block; }
.desktop-nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 46px); font-size: 15px; font-weight: 600; color: #364158; }
.desktop-nav a { position: relative; padding: 31px 0; transition: color .25s; }
.desktop-nav a:hover, .desktop-nav .active { color: var(--blue); }
.desktop-nav .active::after { content: ""; position: absolute; height: 2px; left: 2px; right: 2px; bottom: 20px; background: linear-gradient(90deg,var(--blue),var(--cyan)); }
.nav-cta { background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 4px; font-size: 14px; font-weight: 700; }
.nav-cta span { color: var(--cyan); margin-left: 7px; }

.hero { min-height: 670px; position: relative; overflow: hidden; background: linear-gradient(125deg,#f7faff 0%,#fff 48%,#eaf6ff 100%); padding: 100px clamp(24px,8vw,150px) 88px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.hero-grid { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(#b8cae4 1px,transparent 1px),linear-gradient(90deg,#b8cae4 1px,transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(90deg,transparent,black 55%,transparent); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; }
.hero-glow-one { width: 380px; height: 380px; background:#8fe6ff; right: 10%; top: 2%; }
.hero-glow-two { width: 260px; height: 260px; background:#bfd0ff; left: 33%; bottom:-15%; }
.hero-copy { position: relative; z-index: 3; max-width: 650px; }
.eyebrow, .kicker { color: var(--blue); font-weight: 800; letter-spacing: 2.5px; font-size: 12px; }
.eyebrow span { display: inline-block; width: 25px; height: 2px; background: var(--cyan); margin: 0 10px 4px 0; }
.hero h1 { font-size: clamp(58px, 6.3vw, 94px); line-height: .98; letter-spacing: -5px; margin: 25px 0 28px; font-weight: 850; }
.hero h1 em { font-style: normal; color: transparent; background: linear-gradient(90deg,var(--blue),#00bfea); background-clip: text; -webkit-background-clip: text; }
.hero-copy > p { font-size: 18px; line-height: 1.8; color: var(--muted); max-width: 550px; }
.hero-actions { display: flex; gap: 15px; margin-top: 38px; flex-wrap: wrap; }
.button { min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 26px; border-radius: 4px; font-weight: 750; transition: transform .25s,box-shadow .25s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: linear-gradient(110deg,var(--blue),#0878ff); box-shadow: 0 14px 30px rgba(7,84,255,.25); }
.button-primary span { font-size: 20px; }
.button-ghost { border: 1px solid #ccd8e8; background: rgba(255,255,255,.75); color: #344057; gap: 10px; }
.button-ghost i { width: 8px; height: 8px; border-radius: 50%; background:#13c770; box-shadow:0 0 0 5px rgba(19,199,112,.12); }
.hero-note { margin-top: 50px; color: #7b8799; font-size: 13px; display: flex; align-items: center; gap: 9px; }
.status-dot { width: 7px; height: 7px; background:#15c977; border-radius:50%; box-shadow:0 0 0 4px rgba(21,201,119,.14); }

.cloud-stage { position: relative; z-index: 2; width: min(550px,42vw); height: 510px; justify-self: center; perspective: 800px; }
.orbit { position:absolute; border:1px solid rgba(0,116,255,.2); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-18deg); }
.orbit-one { width:440px; height:440px; }
.orbit-two { width:520px; height:260px; transform:translate(-50%,-50%) rotate(28deg); border-style:dashed; }
.cloud-mark { position:absolute; width:235px; height:180px; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; filter:drop-shadow(0 30px 36px rgba(5,72,203,.22)); }
.cloud-symbol { position:absolute; font-size:240px; line-height:1; color:#fff; text-shadow: inset 0 0 20px #fff, 0 0 0 1px rgba(9,86,255,.08); z-index:-1; }
.cloud-mark b { font-size:52px; line-height:1; letter-spacing:-5px; color:var(--blue); font-style:italic; }
.cloud-mark small { font-size:9px; font-weight:900; color:#5e6d86; letter-spacing:4px; margin-top:7px; }
.float-card { position:absolute; background:rgba(255,255,255,.88); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.9); box-shadow:0 20px 50px rgba(27,66,124,.13); padding:16px 19px; min-width:132px; }
.float-card span,.float-card i { display:block; font-style:normal; color:#8290a4; font-size:8px; font-weight:800; letter-spacing:1.4px; }
.float-card b { display:block; color:var(--ink); font-size:27px; margin:6px 0 3px; }
.float-card b small { color:var(--blue); font-size:12px; margin-left:3px; }
.card-speed { top:62px; right:4px; animation:float 5s ease-in-out infinite; }
.card-security { left:5px; top:205px; animation:float 5s ease-in-out 1s infinite; }
.card-security b { color:#12b874; }
.card-uptime { bottom:30px; right:45px; animation:float 5s ease-in-out 2s infinite; }
.node { position:absolute; width:9px; height:9px; background:var(--cyan); border:2px solid white; border-radius:50%; box-shadow:0 0 0 6px rgba(8,199,245,.15); }
.node-a { top:74px; left:150px; }.node-b { bottom:88px; left:75px; }.node-c { right:15px; top:285px; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

.trust-strip { padding: 24px clamp(24px,8vw,150px); border-top:1px solid #e8edf4; border-bottom:1px solid #e8edf4; display:flex; align-items:center; gap:48px; min-height:82px; }
.trust-strip > span { flex:none; color:#8994a5; font-size:12px; font-weight:700; border-right:1px solid #dce3ec; padding-right:45px; }
.partner-logos { flex:1; display:flex; justify-content:space-around; align-items:center; gap:40px; filter:grayscale(1); opacity:.55; }
.partner-logos img { object-fit:contain; max-height:28px; width:auto; }

.section { padding: 110px clamp(24px,8vw,150px); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:60px; margin-bottom:58px; }
.section-heading h2,.advantages h2,.contact-section h2 { font-size:clamp(38px,4.2vw,62px); letter-spacing:-2px; line-height:1.12; margin:14px 0 0; }
.section-heading > p { max-width:520px; color:var(--muted); line-height:1.8; font-size:16px; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.product-card { background:var(--surface); min-height:450px; padding:28px 30px 32px; position:relative; overflow:hidden; transition:transform .3s,box-shadow .3s; }
.product-card:hover { transform:translateY(-6px); box-shadow:0 24px 50px rgba(19,49,93,.12); }
.card-top { display:flex; justify-content:space-between; align-items:center; }
.number { color:#9aa7b9; font-size:12px; font-weight:800; }.tag { background:#fff; color:#3e4b61; padding:7px 10px; font-size:9px; letter-spacing:1px; font-weight:800; }
.product-visual { height:150px; margin:28px 0 16px; position:relative; display:flex; align-items:center; justify-content:center; }
.product-visual i { position:absolute; display:block; border:1px solid rgba(7,84,255,.28); background:rgba(255,255,255,.6); }
.visual-01 i:nth-child(1){width:120px;height:80px;transform:skewY(-12deg);box-shadow:18px 18px 0 rgba(7,84,255,.12)}
.visual-01 i:nth-child(2){width:62px;height:42px;background:linear-gradient(135deg,var(--blue),var(--cyan));transform:translate(-8px,-12px) skewY(-12deg)}
.visual-01 i:nth-child(3){width:8px;height:8px;background:#13cb85;border-radius:50%;transform:translate(48px,28px)}
.visual-02 i{border-radius:50%;}.visual-02 i:nth-child(1){width:124px;height:124px;border-style:dashed}.visual-02 i:nth-child(2){width:82px;height:82px;border:10px solid rgba(7,84,255,.16)}.visual-02 i:nth-child(3){width:24px;height:24px;background:var(--blue);box-shadow:50px 25px 0 #0cc9e9,-40px -32px 0 #68a3ff}
.visual-03 i:nth-child(1){width:110px;height:110px;border-radius:50%;background:repeating-linear-gradient(0deg,#fff 0,#fff 14px,#d9e6ff 15px,#d9e6ff 16px)}.visual-03 i:nth-child(2){width:110px;height:32px;border-radius:50%;top:20px;background:linear-gradient(90deg,var(--blue),var(--cyan))}.visual-03 i:nth-child(3){width:36px;height:36px;border-radius:8px;right:25%;bottom:15px;background:white;box-shadow:0 10px 20px rgba(7,84,255,.16)}
.product-card h3 { font-size:23px; margin:0 0 12px; }.product-card > p { color:var(--muted); line-height:1.75; font-size:14px; margin:0 0 24px; }.product-card > a { font-weight:800; font-size:13px; color:var(--blue); }.product-card > a span { margin-left:10px; }

.advantages { background:var(--navy); color:#fff; padding:110px clamp(24px,8vw,150px); display:grid; grid-template-columns:.9fr 1.1fr; gap:9vw; position:relative; overflow:hidden; }
.advantages::after { content:""; width:430px; height:430px; position:absolute; left:-180px; bottom:-270px; border:1px solid rgba(12,197,245,.28); border-radius:50%; box-shadow:0 0 80px rgba(0,153,255,.2); }
.kicker.light { color:#56d9ff; }.advantages-copy > p { color:#9cabc3; line-height:1.9; max-width:480px; margin:30px 0; }.text-link { color:#fff; font-weight:800; border-bottom:1px solid #4c5d79; padding-bottom:8px; }.text-link span{color:var(--cyan);margin-left:10px}
.metrics { display:grid; grid-template-columns:1fr 1fr; }.metric { padding:33px 25px; border-left:1px solid #263957; border-bottom:1px solid #263957; }.metric:nth-child(n+3){border-bottom:0}.metric b { display:block; font-size:clamp(36px,4vw,58px); letter-spacing:-2px; color:#fff; }.metric b::first-letter { color:var(--cyan); }.metric span { display:block; color:#8fa0ba; margin-top:8px; font-size:13px; }

.section-heading.compact { margin-bottom:35px; }.solution-list { border-top:1px solid var(--line); }.solution-list article { display:grid; grid-template-columns:70px 1fr 50px; gap:20px; align-items:center; padding:30px 10px; border-bottom:1px solid var(--line); transition:background .25s,padding .25s; }.solution-list article:hover { background:#f5f8fc; padding-left:25px; }.solution-list article > span { color:var(--blue); font-size:12px; font-weight:800; }.solution-list h3 { margin:0 0 8px; font-size:23px; }.solution-list p { color:var(--muted); margin:0; }.solution-list b { color:var(--blue); font-size:24px; }

.contact-section { margin:0 clamp(24px,5vw,82px) 70px; background:linear-gradient(120deg,#0754ff,#0879ff 55%,#09b8e2); color:#fff; padding:74px clamp(30px,6vw,90px); display:flex; align-items:end; justify-content:space-between; gap:80px; position:relative; overflow:hidden; }.contact-section::after{content:"";position:absolute;width:380px;height:380px;border:1px solid rgba(255,255,255,.25);border-radius:50%;right:-120px;top:-250px}.contact-action { max-width:460px; position:relative; z-index:2; }.contact-action p { line-height:1.8; color:rgba(255,255,255,.8); margin:0 0 24px; }.button-white { background:#fff; color:var(--blue); }
footer { background:#050c1a; color:#fff; padding:55px clamp(24px,8vw,150px) 30px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:45px; }.footer img,footer img { filter:brightness(1.4); width:190px;height:auto }.footer p,footer p { color:#77859c;font-size:13px }.footer div,footer div { display:flex;gap:25px;font-size:13px }.footer small,footer small { grid-column:1/-1;border-top:1px solid #192338;padding-top:25px;color:#657086; }

.contact-rail { position:fixed; right:20px; top:50%; transform:translateY(-34%); z-index:30; display:flex; flex-direction:column; box-shadow:0 10px 32px rgba(8,32,70,.18); }.contact-rail a { width:48px; min-height:48px; display:flex; align-items:center; justify-content:center; background:#fff; border-bottom:1px solid #e5ebf3; position:relative; }.contact-rail a:nth-child(2) { background:var(--blue); color:#fff; }.contact-rail b { font-size:17px; }.contact-rail span { pointer-events:none; opacity:0; position:absolute; right:56px; min-width:145px; padding:10px 14px; background:var(--ink); color:#fff; font-size:12px; transform:translateX(8px); transition:.2s; }.contact-rail span::after{content:"";position:absolute;right:-6px;top:16px;border-width:6px 0 6px 6px;border-style:solid;border-color:transparent transparent transparent var(--ink)}.contact-rail em{display:block;font-style:normal;color:#9db0cb;font-size:10px;margin-top:3px}.contact-rail a:hover span{opacity:1;transform:translateX(0)}

@media(max-width:1050px){.hero{grid-template-columns:1fr;padding-top:70px}.hero-copy{max-width:600px}.cloud-stage{position:absolute;right:-200px;opacity:.4}.product-grid{grid-template-columns:1fr 1fr}.product-card:last-child{grid-column:1/-1}.advantages{grid-template-columns:1fr}.contact-section{align-items:flex-start;flex-direction:column;gap:35px}}
@media(max-width:680px){.site-header{height:70px;padding:0 18px}.brand img{width:170px}.nav-cta{padding:11px 14px}.hero{padding:76px 22px 64px;min-height:650px}.hero h1{font-size:55px;letter-spacing:-3px}.hero-copy>p{font-size:16px}.cloud-stage{right:-280px;top:100px}.hero-note{margin-top:36px}.trust-strip{padding:20px;gap:20px;overflow:hidden}.trust-strip>span{padding-right:20px}.partner-logos{justify-content:flex-start;overflow:hidden;gap:30px}.partner-logos img:nth-child(n+4){display:none}.section{padding:80px 22px}.section-heading{display:block;margin-bottom:36px}.section-heading>p{margin-top:20px}.product-grid{grid-template-columns:1fr}.product-card:last-child{grid-column:auto}.advantages{padding:80px 22px}.metrics{margin-top:10px}.metric{padding:25px 12px}.solution-list article{grid-template-columns:40px 1fr 22px}.solution-list p{font-size:13px;line-height:1.6}.contact-section{margin:0 16px 65px;padding:55px 28px}.contact-section h2{font-size:39px}footer{grid-template-columns:1fr;padding:45px 22px 90px;gap:20px}footer small{grid-column:auto}.contact-rail{top:auto;bottom:0;right:0;left:0;transform:none;flex-direction:row}.contact-rail a{flex:1;height:56px}.contact-rail a:last-child{display:none}.contact-rail span{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.float-card{animation:none}.button,.product-card{transition:none}}