:root {
  --bg: #030b14;
  --bg-soft: #071525;
  --surface: #09182a;
  --surface-2: #0c2035;
  --line: rgba(85, 202, 255, 0.2);
  --line-strong: rgba(87, 218, 255, 0.5);
  --text: #f3f8fc;
  --muted: #91a9bc;
  --accent: #33d6f2;
  --accent-2: #148cff;
  --green: #48e6a4;
  --radius: 18px;
  --max: 1320px;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); overflow-x: hidden; }
#top, .section, #workflow { scroll-margin-top: 92px; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(64, 176, 228, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(64, 176, 228, .025) 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(to bottom, black, transparent 72%); z-index: -1; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }

.site-header { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 34px; padding: 0 max(28px, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid rgba(97, 190, 232, .13); background: rgba(3, 11, 20, .84); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 50; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 760; letter-spacing: .01em; white-space: nowrap; }
.brand-mark { width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 8px; display: flex; align-items: end; justify-content: center; gap: 3px; padding: 6px; box-shadow: inset 0 0 18px rgba(39, 203, 240, .12); }
.brand-mark i { display: block; width: 4px; background: var(--accent); border-radius: 3px; }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 15px; }.brand-mark i:nth-child(3) { height: 11px; }
nav { display: flex; align-items: center; gap: 40px; color: #a9bdcd; font-size: 14px; }
nav a { transition: color .2s ease; } nav a:hover { color: var(--accent); }
.header-actions { display:flex; align-items:center; gap:10px; }
.button { min-height: 50px; padding: 0 24px; border: 1px solid transparent; border-radius: 8px; color: #021019; background: linear-gradient(135deg, var(--accent), #1aa4ff); font-size: 15px; font-weight: 760; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 12px 34px rgba(20, 165, 255, .15); transition: transform .2s ease, filter .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); filter: brightness(1.08); }
.button-small { min-height: 42px; padding: 0 20px; }
.button-ghost { color: var(--text); background: rgba(6, 20, 34, .5); border-color: rgba(145, 202, 229, .42); box-shadow: none; }
.panel-entry svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.mobile-label { display:none; }
.play { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #04121c; }

.section-shell { width: min(var(--max), calc(100% - 56px)); margin-inline: auto; }
.hero { min-height: 760px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 30px; padding-top: 72px; padding-bottom: 70px; }
.hero::before { content: ""; position: absolute; width: 650px; height: 650px; right: 4%; top: 120px; background: radial-gradient(circle, rgba(27, 152, 255, .2), transparent 67%); filter: blur(8px); pointer-events: none; z-index: -1; }
.hero-copy { position: relative; z-index: 3; min-width:0; }
h1 { margin: 0; font-size: clamp(46px, 4.35vw, 68px); line-height: 1.1; letter-spacing: -.045em; font-weight: 850; }
h1 .hero-line { display:block; color:var(--text); white-space:nowrap; }
h1 .hero-accent, h2 span { color: var(--accent); }
.hero-copy > p { margin: 26px 0 0; max-width: 590px; color: #a8bac9; font-size: 19px; line-height: 1.8; }
.hero-actions { display: flex; gap: 16px; margin-top: 34px; }
.snapshot { display: flex; gap: 0; margin: 54px 0 0; }
.snapshot div { min-width: 120px; padding-right: 28px; margin-right: 28px; border-right: 1px solid var(--line); }
.snapshot div:last-child { border: 0; margin: 0; }
.snapshot dt { color: var(--accent); font-size: 29px; font-weight: 800; }.snapshot dd { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.hero-copy .snapshot-note { margin-top: 16px; max-width: 510px; color: #607a8f; font-size: 11px; line-height: 1.5; }
.hero-visual { position: relative; min-width:0; min-height: 520px; display: flex; align-items: center; justify-content: center; }
.hero-visual img { width: 100%; border-radius: 22px; mix-blend-mode: screen; filter: drop-shadow(0 32px 38px rgba(0,0,0,.55)); position: relative; z-index: 2; }
.hero-dashboard { position:absolute; width:76%; right:2%; top:2%; z-index:1; border:1px solid rgba(61,204,244,.28); border-radius:13px; overflow:hidden; opacity:.58; transform:perspective(1000px) rotateY(-5deg); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.hero-dashboard img { width:100%; border-radius:0; mix-blend-mode:normal; filter:none; opacity:1; }
.hero-halo { position: absolute; width: 72%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(29, 171, 255, .28), transparent 66%); filter: blur(22px); }
.image-note { position: absolute; right: 2%; bottom: 3%; color: #6d879c; font-size: 11px; z-index: 3; }
.signal-card { position: absolute; z-index: 4; width: 136px; padding: 14px 16px; border: 1px solid rgba(62, 211, 244, .28); border-radius: 12px; background: rgba(6, 21, 35, .86); backdrop-filter: blur(14px); box-shadow: 0 16px 30px rgba(0,0,0,.25); }
.signal-card span { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); margin-bottom: 9px; }
.signal-card b { display:block; font-size: 13px; }.signal-card small { color: var(--muted); font-size: 11px; }
.signal-one { left: 2%; top: 19%; }.signal-two { right: 1%; top: 29%; }

.proof-strip { min-height: 132px; padding: 0 max(28px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: repeat(3, 1fr); background: #06111d; border-block: 1px solid rgba(88, 196, 237, .12); }
.proof-strip > div { display: flex; align-items: center; gap: 18px; border-right: 1px solid rgba(88, 196, 237, .11); }.proof-strip > div:last-child { border-right: 0; padding-left: 32px; }
.proof-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: #0b2134; font-size: 25px; }
.proof-strip p { margin: 0; }.proof-strip strong, .proof-strip small { display: block; }.proof-strip strong { font-size: 15px; }.proof-strip small { color: var(--muted); margin-top: 7px; font-size: 12px; }

.section { padding-block: 118px; }
.section-heading { max-width: 820px; margin-bottom: 58px; }.section-heading.centered { text-align: center; margin-inline: auto; }
.section-heading h2, .batch-copy h2, .cta-copy h2 { margin: 0; font-size: clamp(36px, 4vw, 56px); line-height: 1.18; letter-spacing: -.035em; }
.section-heading p, .batch-copy p { color: var(--muted); font-size: 17px; line-height: 1.75; margin: 20px 0 0; }
.data-flow { display: grid; grid-template-columns: 1fr 50px 1fr 50px 1fr 50px 1fr; align-items: center; min-height: 310px; padding: 44px 38px; border-block: 1px solid var(--line); background: linear-gradient(90deg, transparent, rgba(11, 44, 71, .32), transparent); }
.flow-node { text-align: center; position: relative; }.flow-index { position: absolute; top: 0; left: 12%; color: #315773; font-size: 11px; }
.flow-node h3 { font-size: 21px; margin: 20px 0 5px; }.flow-node p { color: var(--muted); font-size: 13px; margin: 0; }
.flow-icon { width: 104px; height: 104px; border: 1px solid rgba(61, 214, 246, .43); margin: 0 auto; transform: rotate(45deg); display: grid; place-items: center; box-shadow: inset 0 0 28px rgba(31, 185, 243, .09); }
.flow-icon i, .flow-icon::before, .flow-icon::after { display: block; }.wifi-icon { transform: rotate(45deg); position: relative; }.wifi-icon i { position: absolute; border: 3px solid var(--accent); border-left-color: transparent; border-top-color: transparent; border-radius: 50%; transform: rotate(90deg); }.wifi-icon i:nth-child(1){width:48px;height:48px}.wifi-icon i:nth-child(2){width:30px;height:30px}.wifi-icon i:nth-child(3){width:8px;height:8px;background:var(--accent);border:0}
.layers-icon i { position:absolute; width:45px;height:45px;border:2px solid var(--accent); }.layers-icon i:nth-child(2){transform:translate(8px,8px)}.layers-icon i:nth-child(3){transform:translate(16px,16px)}
.route-icon i { position:absolute; width:52px;height:2px;background:var(--accent); }.route-icon i:nth-child(2){transform:rotate(45deg)}.route-icon i:nth-child(3){transform:rotate(-45deg)}
.globe-icon { font-size: 48px; color: var(--accent); }
.flow-icon > * { transform: rotate(-45deg); }.wifi-icon i { margin: auto; }
.flow-arrow { height: 1px; background: repeating-linear-gradient(90deg, var(--accent) 0 5px, transparent 5px 10px); position: relative; }.flow-arrow::after { content:""; position:absolute; width:8px;height:8px;border-top:1px solid var(--accent);border-right:1px solid var(--accent);right:0;top:-4px;transform:rotate(45deg); }
.feature-rails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 66px; }
.feature-rail { display: grid; grid-template-columns: 62px 1fr; gap: 18px; padding: 14px 36px 12px 0; border-right: 1px solid var(--line); }.feature-rail:not(:first-child) { padding-left: 36px; }.feature-rail:last-child { border: 0; }
.feature-rail > span { color: var(--accent); font-size: 27px; font-weight: 850; }.feature-rail h3 { margin: 0 0 12px; font-size: 20px; }.feature-rail p { margin: 0; color: var(--muted); line-height: 1.75; font-size: 13px; }

.showcase { background: linear-gradient(180deg, #06111d, #08192a 55%, #06111d); border-block: 1px solid rgba(96, 201, 240, .13); }
.screen-tabs { display:flex; gap:8px; margin-bottom:18px; }.screen-tab { color:#8fa8bb;background:transparent;border:1px solid transparent;border-radius:8px;padding:12px 18px;font-size:13px; }.screen-tab:hover { color:var(--text); }.screen-tab.active { color:var(--text);background:#0b2237;border-color:var(--line-strong);box-shadow:inset 0 -2px var(--accent); }
.browser-frame { border: 1px solid rgba(86, 189, 232, .34); border-radius: var(--radius); overflow: hidden; background: #020811; box-shadow: 0 35px 80px rgba(0,0,0,.38); }
.browser-bar { height: 46px; padding: 0 16px; display:flex;align-items:center;gap:8px;background:#0b1724;border-bottom:1px solid #153147; }.browser-bar > span { width:9px;height:9px;border-radius:50%;background:#385267; }.browser-bar > span:first-child{background:#ff6b65}.browser-bar > span:nth-child(2){background:#e9b84c}.browser-bar > span:nth-child(3){background:#47cb7c}.browser-bar div { margin-left:12px;flex:1;max-width:540px;height:24px;border-radius:5px;background:#0f2436;color:#6f899e;font-size:11px;display:grid;place-items:center; }
.screen-panel { margin:0; position:relative; }.screen-panel img { width:100%; aspect-ratio: 1.6; object-fit: cover; object-position: top; }.screen-panel figcaption { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 24px;background:#081522;border-top:1px solid var(--line); }.screen-panel figcaption strong { font-size:15px; }.screen-panel figcaption span { color:var(--muted);font-size:12px; }
.screen-disclaimer { color:#617a8e;font-size:11px;margin:16px 0 0; }

.batch-section { display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start; }.batch-copy { position:sticky;top:120px; }.batch-steps { list-style:none;margin:0;padding:0;border-top:1px solid var(--line); }.batch-steps li { display:grid;grid-template-columns:64px 1fr;gap:20px;padding:25px 0;border-bottom:1px solid var(--line); }.batch-steps li > span { color:var(--accent);font-size:15px; }.batch-steps strong,.batch-steps small { display:block; }.batch-steps strong{font-size:19px}.batch-steps small{color:var(--muted);margin-top:7px;font-size:13px}.batch-callouts { grid-column: 1 / -1; display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:10px; }.batch-callouts article { display:flex;gap:20px;padding:26px;border:1px solid var(--line);background:#071625;border-radius:12px; }.chip-icon { width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--line-strong);color:var(--accent);font-size:23px; }.batch-callouts h3{margin:0 0 8px;font-size:17px}.batch-callouts p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}

.scenarios { background: #06111d; border-block:1px solid rgba(97,190,232,.12); }.scenario-list { display:grid;grid-template-columns:repeat(2,1fr); }.scenario-list article { min-height:210px;padding:35px 40px 34px 0;border-top:1px solid var(--line); }.scenario-list article:nth-child(even){padding-left:40px;border-left:1px solid var(--line)}.scenario-list span{color:#38627e;font-size:12px}.scenario-list h3{font-size:24px;margin:34px 0 10px}.scenario-list p{color:var(--muted);font-size:13px;line-height:1.75;max-width:480px;margin:0}

.specs { display:grid;grid-template-columns:.7fr 1.3fr;column-gap:90px; }.specs .section-heading { grid-row:span 2; }.spec-table { border-top:1px solid var(--line); }.spec-table > div { display:grid;grid-template-columns:140px 1fr;gap:20px;padding:19px 0;border-bottom:1px solid var(--line); }.spec-table span{color:var(--muted);font-size:13px}.spec-table strong{font-size:14px;font-weight:600}.deployment-note { grid-column:2;margin-top:30px;padding:23px 25px;border-left:3px solid var(--accent);background:#071725; }.deployment-note strong{font-size:14px}.deployment-note p{margin:8px 0 0;color:var(--muted);font-size:12px;line-height:1.75}

.cta-section { width:min(1440px,calc(100% - 36px));margin:30px auto 0;min-height:450px;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:64px max(36px,calc((100% - 1240px)/2));overflow:hidden;position:relative;border:1px solid rgba(70,190,234,.24);background:radial-gradient(circle at 75% 50%,rgba(17,118,189,.22),transparent 36%),#071521; }.cta-section img { width:720px;mix-blend-mode:screen;transform:translateX(30px); }.cta-copy{position:relative;z-index:2}.cta-copy p{color:var(--muted);font-size:16px;margin:18px 0 30px}.cta-copy > div{display:flex;gap:14px}
footer{width:min(var(--max),calc(100% - 56px));min-height:140px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px;color:#6d8496}footer p{font-size:11px}

dialog { width:min(500px,calc(100% - 32px));padding:0;border:1px solid var(--line-strong);border-radius:16px;background:#071624;color:var(--text);box-shadow:0 40px 100px rgba(0,0,0,.65); }dialog::backdrop{background:rgba(0,7,14,.78);backdrop-filter:blur(8px)}dialog form{padding:32px;position:relative}dialog h2{font-size:27px;margin:0 0 8px}dialog form>p{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 24px}dialog label{display:block;color:#b9c9d5;font-size:13px;margin:14px 0}dialog input{display:block;width:100%;height:44px;margin-top:7px;padding:0 13px;border:1px solid var(--line);border-radius:7px;background:#04101c;color:var(--text)}.dialog-close{position:absolute;right:16px;top:14px;border:0;background:transparent;color:#7f9aae;font-size:25px}.dialog-close:hover{color:white}#consult-result{display:none;margin-top:18px;padding:14px;border:1px solid var(--line);color:#cbe9f6;background:#04111d;line-height:1.6;font-size:12px;border-radius:8px}#consult-result.visible{display:block}

.reveal { opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}.delay-1,.delay-2,.delay-3{transition-delay:0s}

@media (max-width: 980px) {
  nav { display:none; }.site-header{padding-inline:22px}.site-header .brand span:last-child{font-size:14px}.hero{grid-template-columns:1fr;min-height:auto;padding-top:76px}.hero-copy{text-align:center}.hero-copy>p,.hero-copy .snapshot-note{margin-left:auto;margin-right:auto}.hero-actions,.snapshot{justify-content:center}.hero-visual{min-height:430px}.hero-dashboard{width:68%;right:9%}.proof-strip{grid-template-columns:1fr;padding-block:18px}.proof-strip>div,.proof-strip>div:last-child{padding:15px 0;border-right:0;border-bottom:1px solid var(--line)}.proof-strip>div:last-child{border:0}.data-flow{grid-template-columns:1fr 20px 1fr 20px 1fr 20px 1fr;padding-inline:10px}.flow-icon{width:75px;height:75px}.flow-arrow{transform:scaleX(.7)}.feature-rails{grid-template-columns:1fr}.feature-rail,.feature-rail:not(:first-child){padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}.batch-section,.specs{grid-template-columns:1fr}.batch-copy{position:static}.batch-callouts{grid-column:1}.specs .section-heading{grid-row:auto}.deployment-note{grid-column:1}.cta-section{grid-template-columns:1fr;padding-block:70px}.cta-section img{position:absolute;right:-230px;opacity:.28}.cta-copy{max-width:620px}.header-actions{gap:8px}.header-actions .button{font-size:13px;padding-inline:15px}
}
@media (max-width: 640px) {
  .section-shell{width:min(100% - 32px,var(--max))}.site-header{height:66px;padding-inline:16px}.site-header .brand span:last-child{display:none}.site-header .header-actions .open-consult{display:none}.site-header .header-actions .panel-entry{display:inline-flex;min-height:38px;padding:0 13px}.desktop-label{display:none}.mobile-label{display:inline}.hero{padding-top:54px;padding-bottom:45px;min-width:0;grid-template-columns:minmax(0,1fr)}.hero::before{width:360px;height:360px;top:340px}.hero-copy{width:calc(100vw - 32px);max-width:calc(100vw - 32px);justify-self:center;overflow:hidden}h1{font-size:26px;line-height:1.24;letter-spacing:-.025em}.hero-line{white-space:nowrap;width:100%;max-width:100%}.hero-copy>p{font-size:15px;max-width:100%;overflow-wrap:anywhere}.hero-actions{flex-direction:column;width:100%}.hero-actions .button{width:100%}.snapshot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px;width:100%;min-width:0}.snapshot div{min-width:0;width:auto;flex:none;margin:0;padding:0 6px}.snapshot dt{font-size:23px}.snapshot dd{font-size:10px;white-space:normal}.hero-visual{min-height:310px;margin-inline:-16px}.signal-card{display:none}.proof-strip{padding-inline:20px}.section{padding-block:82px}.section-heading h2,.batch-copy h2,.cta-copy h2{font-size:34px}.section-heading p,.batch-copy p{font-size:15px}.data-flow{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:10px 0}.flow-node{padding:28px 4px}.flow-arrow{display:none}.flow-icon{width:68px;height:68px}.feature-rails{margin-top:40px}.feature-rail{grid-template-columns:45px 1fr}.screen-tabs{overflow:auto;padding-bottom:4px}.screen-tab{white-space:nowrap}.browser-frame{border-radius:10px}.browser-bar{height:36px}.screen-panel img{aspect-ratio:.86;object-position:top;object-fit:cover}.screen-panel figcaption{align-items:flex-start;flex-direction:column}.batch-section{gap:42px}.batch-callouts{grid-template-columns:1fr}.scenario-list{grid-template-columns:1fr}.scenario-list article,.scenario-list article:nth-child(even){padding:28px 0;border-left:0}.specs{column-gap:0}.spec-table>div{grid-template-columns:95px 1fr}.cta-section{width:calc(100% - 20px);min-height:420px;padding:48px 24px}.cta-copy>div{flex-direction:column}.cta-copy .button{width:100%}footer{flex-direction:column;justify-content:center;text-align:center}.reveal{transform:translateY(12px)}
}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.button{transition:none}}