:root {
  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: #172642;
  background: #edf4ff;
  --ink: #172642;
  --muted: #657591;
  --blue: #176cff;
  --blue-2: #4d5ff7;
  --cyan: #18bce7;
  --violet: #765cf1;
  --deep: #07182f;
  --deep-2: #0b2444;
  --surface: #f7faff;
  --line: #d4e1f4;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% 7%, #bcd9ff 0, transparent 27%),
    radial-gradient(circle at 8% 38%, #ddd7ff 0, transparent 24%),
    linear-gradient(180deg, #edf5ff 0%, #f6f8ff 48%, #edf3ff 100%);
}
body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image: linear-gradient(#3e70bd0b 1px, transparent 1px), linear-gradient(90deg, #3e70bd0b 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.skip-link { position: fixed; z-index: 99; left: 20px; top: -80px; padding: 12px 18px; border-radius: 10px; color: #fff; background: var(--blue); }
.skip-link:focus { top: 16px; }
.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(48px); pointer-events: none; }
.ambient-a { width: 470px; height: 470px; right: -180px; top: 60px; background: #4ca7ff27; animation: drift 13s ease-in-out infinite; }
.ambient-b { width: 420px; height: 420px; left: -190px; top: 590px; background: #826fff24; animation: drift 16s ease-in-out infinite reverse; }

.site-header {
  position: fixed;
  z-index: 40;
  inset: 0 0 auto;
  height: 84px;
  display: flex;
  align-items: center;
  gap: 42px;
  padding: 0 clamp(24px, 6vw, 96px);
  transition: height .3s, background .3s, box-shadow .3s;
}
.site-header.scrolled { height: 70px; border-bottom: 1px solid #d4e2f5c9; background: #f4f8fff0; backdrop-filter: blur(20px); box-shadow: 0 12px 35px #24579c0e; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand > span:last-child { display: grid; }
.brand strong { color: #122442; font-size: 18px; letter-spacing: .08em; }
.brand small { margin-top: 2px; color: #7d8da8; font-size: 7px; letter-spacing: .2em; }
.brand-mark { width: 42px; height: 42px; display: block; flex: 0 0 auto; border: 0; border-radius: 14px; object-fit: contain; box-shadow: 0 12px 28px #226fe83a; }
.brand-mark.small { width: 36px; height: 36px; border-radius: 12px; }
.site-header nav { display: flex; gap: 32px; color: #52627f; font-size: 13px; }
.site-header nav a { position: relative; padding: 8px 0; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--cyan)); transition: right .25s; }
.site-header nav a:hover { color: #1269eb; }
.site-header nav a:hover::after { right: 0; }
.header-login { display: inline-flex; align-items: center; gap: 20px; min-height: 42px; padding: 0 17px; border: 1px solid #b9d1f2; border-radius: 12px; color: #1167e7; background: #f8fbffcf; box-shadow: 0 10px 25px #2867bd14; font-size: 13px; font-weight: 750; transition: .25s; }
.header-login:hover { transform: translateY(-2px); border-color: #70a8fb; background: #fff; box-shadow: 0 15px 34px #2867bd24; }
.nav-toggle { display: none; border: 0; background: none; }

.hero { position: relative; min-height: 900px; display: grid; grid-template-columns: minmax(410px, .86fr) minmax(580px, 1.14fr); align-items: center; gap: clamp(50px, 6vw, 105px); padding: 130px clamp(24px, 7vw, 118px) 85px; }
.hero::after { content: ""; position: absolute; left: 7vw; right: 7vw; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #a8c7f3, transparent); }
.hero-copy { position: relative; z-index: 2; max-width: 650px; }
.eyebrow { width: max-content; display: flex; align-items: center; gap: 10px; padding: 8px 13px; border: 1px solid #bed5f5; border-radius: 999px; color: #4a638b; background: #f8fbffb8; box-shadow: 0 10px 26px #3166ad0d; font-size: 9px; font-weight: 750; letter-spacing: .13em; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #1585ff; box-shadow: 0 0 0 5px #1585ff18; animation: pulse 2.2s infinite; }
.hero h1 { margin: 28px 0 25px; color: #10213d; font-size: clamp(62px, 6.6vw, 98px); line-height: .98; letter-spacing: -.075em; }
.hero h1 em { color: transparent; font-style: normal; background: linear-gradient(100deg, #0b7cff 5%, #4d62f5 56%, #7860ef); background-clip: text; }
.hero-copy > p { max-width: 590px; margin: 0; color: #5f708e; font-size: 17px; line-height: 1.95; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; }
.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; padding: 0 23px; border: 1px solid #bfd3ef; border-radius: 13px; background: #f8fbffca; font-size: 13px; font-weight: 760; transition: .28s; }
.button.primary { border-color: transparent; color: #fff; background: linear-gradient(110deg, #087cff, #5361f4); box-shadow: 0 17px 38px #236cf040; }
.button.primary:hover { transform: translateY(-3px); box-shadow: 0 23px 46px #236cf052; }
.button.secondary:hover { color: #1269eb; border-color: #77aafa; background: #fff; }
.trust-row { display: flex; gap: 24px; margin-top: 27px; color: #71809b; font-size: 11px; }
.trust-row span::before { content: "✓"; margin-right: 7px; color: #1279f6; font-weight: 900; }

.hero-scene { position: relative; height: 620px; min-width: 0; perspective: 1300px; transition: transform .25s ease-out; }
.scene-aura { position: absolute; width: 540px; height: 540px; left: 52%; top: 51%; border-radius: 50%; background: radial-gradient(circle, #4aa8ff3e 0, #7568ef1c 42%, transparent 71%); transform: translate(-50%, -50%); animation: breathe 7s ease-in-out infinite; }
.scene-grid { position: absolute; inset: 2% -3%; opacity: .8; background-image: linear-gradient(#477fc316 1px, transparent 1px), linear-gradient(90deg, #477fc316 1px, transparent 1px); background-size: 35px 35px; mask-image: radial-gradient(circle, #000 22%, transparent 72%); transform: rotateX(61deg) translateY(76px); }
.control-deck { position: absolute; inset: 8% 1% 9% 2%; overflow: hidden; border: 1px solid #6b95d752; border-radius: 28px; color: #ddebff; background: linear-gradient(145deg, #0a203e 0%, #06152b 55%, #0b2443 100%); box-shadow: 0 48px 100px #173b7438, inset 0 1px #ffffff1c; transform: rotateY(-5deg) rotateX(1deg); animation: deckFloat 7s ease-in-out infinite; }
.control-deck::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 72% 36%, #147dff24, transparent 28%), linear-gradient(115deg, transparent 52%, #31c4e907 52%, transparent 53%); }
.deck-top { position: relative; height: 59px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; border-bottom: 1px solid #7ba2d528; background: #07172b9c; }
.deck-brand, .deck-status { display: flex; align-items: center; gap: 9px; font-size: 8px; letter-spacing: .16em; }
.deck-brand i { width: 20px; height: 20px; border-radius: 7px; background: linear-gradient(135deg, #0787ff, #6f5cf1); box-shadow: 0 0 24px #1389ff70; }
.deck-brand b { color: #c6dcfb; }
.deck-status { color: #71dff6; }
.deck-status i { width: 6px; height: 6px; border-radius: 50%; background: #39d6e9; box-shadow: 0 0 13px #39d6e9; }
.deck-body { position: relative; height: calc(100% - 59px); display: grid; grid-template-columns: 68px 1fr; }
.deck-rail { display: grid; align-content: start; justify-content: center; gap: 22px; padding-top: 27px; border-right: 1px solid #7aa1d51e; background: #0513266b; }
.deck-rail i { width: 21px; height: 21px; border: 1px solid #7294c02b; border-radius: 7px; background: #6f91bd13; }
.deck-rail i.active { border-color: #148bff70; background: linear-gradient(135deg, #087fff, #5364f4); box-shadow: 0 0 24px #087fff4d; }
.deck-rail span { width: 22px; height: 1px; margin-top: 8px; background: #7294c02c; }
.deck-main { display: grid; grid-template-rows: auto 1fr auto; padding: 24px 26px 22px; }
.deck-heading { display: flex; align-items: center; justify-content: space-between; }
.deck-heading small, .deck-heading strong { display: block; }
.deck-heading small { margin-bottom: 5px; color: #5478a4; font-size: 7px; letter-spacing: .18em; }
.deck-heading strong { color: #f0f6ff; font-size: 16px; }
.deck-heading > span { padding: 7px 10px; border: 1px solid #1fc9e54a; border-radius: 999px; color: #6de1f3; background: #0a60772b; font-size: 8px; }
.signal-stage { position: relative; min-height: 300px; display: grid; place-items: center; overflow: hidden; }
.signal-stage::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, #1d92ff52, #37d7ed66, #6c64f059, transparent); }
.signal-orbit { position: absolute; left: 50%; top: 50%; border: 1px solid #318cff33; border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 180px; height: 180px; animation: orbitPulse 3.8s ease-in-out infinite; }
.orbit-two { width: 250px; height: 250px; border-color: #5a69ee24; animation: orbitPulse 3.8s 1.1s ease-in-out infinite; }
.signal-core { position: relative; z-index: 2; width: 94px; height: 94px; display: grid; place-content: center; justify-items: center; gap: 7px; border: 1px solid #3eaaff71; border-radius: 29px; background: linear-gradient(145deg, #113b6d, #121f50); box-shadow: 0 0 55px #1688ff4a, inset 0 0 22px #5cbcff1c; }
.signal-core i { width: 27px; height: 34px; border: 2px solid #72dcef; border-radius: 9px 9px 13px 13px; clip-path: polygon(0 20%, 50% 0, 100% 20%, 100% 100%, 0 100%); }
.signal-core span { color: #86e6f5; font-size: 7px; letter-spacing: .14em; }
.device-node { position: absolute; z-index: 3; width: 148px; display: grid; grid-template-columns: 31px 1fr; gap: 10px; align-items: center; padding: 12px; border: 1px solid #6a91c83b; border-radius: 14px; background: #0d2748d9; box-shadow: 0 15px 30px #020b183d; backdrop-filter: blur(9px); }
.device-node.local { left: 3%; top: 48%; }
.device-node.remote { right: 3%; top: 27%; }
.device-node > i { width: 31px; height: 31px; border-radius: 9px; background: linear-gradient(135deg, #1487ff, #4a63f4); box-shadow: 0 0 18px #1688ff3f; }
.device-node.remote > i { background: linear-gradient(135deg, #5865f3, #8060ed); }
.device-node small, .device-node b { display: block; }
.device-node small { color: #6589b6; font-size: 6px; letter-spacing: .12em; }
.device-node b { margin-top: 3px; color: #ddebff; font-size: 10px; }
.device-node em { grid-column: 2; color: #4bd7e9; font-size: 6px; font-style: normal; letter-spacing: .11em; }
.signal-path { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; overflow: hidden; }
.signal-path i { position: absolute; width: 55px; height: 100%; background: linear-gradient(90deg, transparent, #76e9f7, transparent); animation: signal 2.6s linear infinite; }
.deck-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.deck-metrics > div { padding: 12px 13px; border: 1px solid #6c91c42a; border-radius: 11px; background: #0a1e38c2; }
.deck-metrics small, .deck-metrics strong { display: block; }
.deck-metrics small { color: #597aa4; font-size: 7px; }
.deck-metrics strong { margin-top: 5px; color: #d8e9ff; font-size: 10px; }
.deck-metrics strong i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #45daeb; box-shadow: 0 0 8px #45daeb; }
.scene-chip { position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px; padding: 14px 17px; border: 1px solid #bdd5f2; border-radius: 15px; background: #f8fbfff0; box-shadow: 0 18px 42px #315d9b25; backdrop-filter: blur(12px); animation: chipFloat 5.5s ease-in-out infinite; }
.scene-chip > i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; font-style: normal; background: linear-gradient(135deg, #0a83ff, #4f61f4); }
.scene-chip small, .scene-chip b { display: block; }
.scene-chip small { color: #8795ac; font-size: 6px; letter-spacing: .15em; }
.scene-chip b { margin-top: 3px; color: #243453; font-size: 11px; }
.chip-private { left: -2%; top: 19%; }
.chip-live { right: -2%; bottom: 8%; animation-delay: -2.2s; }
.chip-live > i { background: linear-gradient(135deg, #5168f4, #8360eb); }

.values { padding: 125px clamp(24px, 7vw, 118px) 145px; background: linear-gradient(180deg, #f8faff 0%, #edf4ff 100%); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 55px; margin-bottom: 58px; }
.section-heading small, .experience-copy > small, .free-copy > small, .closing small { color: #176ee9; font-size: 9px; font-weight: 850; letter-spacing: .2em; }
.section-heading h2, .experience h2, .free h2, .closing h2 { margin: 14px 0 0; color: #142441; font-size: clamp(42px, 4.7vw, 70px); line-height: 1.06; letter-spacing: -.06em; }
.section-heading p { max-width: 395px; margin: 0; color: var(--muted); line-height: 1.85; }
.bento-grid { display: grid; grid-template-columns: 1.08fr .92fr; grid-template-rows: 355px 315px; gap: 16px; }
.bento-card { position: relative; min-width: 0; padding: 31px; overflow: hidden; border: 1px solid #d4e2f5; border-radius: 25px; background: #f9fbffdb; box-shadow: 0 20px 55px #315d9b0d; transition: transform .35s, box-shadow .35s, border-color .35s; }
.bento-card:hover { transform: translateY(-6px); border-color: #a6c6f5; box-shadow: 0 29px 68px #315d9b1b; }
.bento-private { color: #e9f3ff; border-color: #365c8c; background: radial-gradient(circle at 78% 52%, #1658a46b, transparent 30%), linear-gradient(145deg, #092345, #07162d); box-shadow: 0 24px 65px #173d7830; }
.bento-security { background: radial-gradient(circle at 90% 100%, #dcd6ff 0, transparent 40%), linear-gradient(145deg, #fafcff, #eef4ff); }
.bento-stable { background: radial-gradient(circle at 95% 4%, #d8efff 0, transparent 39%), #f9fbff; }
.bento-free { color: #fff; border-color: #416ff2; background: linear-gradient(140deg, #137cff, #4e62f4 62%, #705bed); box-shadow: 0 24px 60px #286bed35; }
.card-copy { position: relative; z-index: 3; max-width: 390px; }
.card-copy > span { color: #7490b2; font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.card-copy h3 { margin: 13px 0 11px; color: #1c2e4e; font-size: 25px; letter-spacing: -.035em; }
.card-copy p { max-width: 340px; margin: 0; color: #71809b; font-size: 12px; line-height: 1.8; }
.bento-private .card-copy > span { color: #68cfea; }
.bento-private .card-copy h3, .bento-free .card-copy h3 { color: #fff; }
.bento-private .card-copy p { color: #98b2d2; }
.bento-free .card-copy > span, .bento-free .card-copy p { color: #d8e6ff; }
.vault-visual { position: absolute; right: 9%; bottom: 7%; width: 230px; height: 230px; display: grid; place-items: center; }
.vault-visual i { position: absolute; border: 1px solid #35aaf05c; border-radius: 50%; animation: vaultPulse 4s ease-in-out infinite; }
.vault-visual i:nth-child(1) { inset: 12px; }
.vault-visual i:nth-child(2) { inset: 42px; border-color: #6b64ed5c; animation-delay: .7s; }
.vault-visual i:nth-child(3) { inset: 72px; border-color: #52d9eb73; animation-delay: 1.4s; }
.vault-visual b { z-index: 2; width: 76px; height: 76px; display: grid; place-items: center; border: 1px solid #5cc8ef71; border-radius: 24px; color: #81e1f1; background: #0c315d; box-shadow: 0 0 43px #1688ff4d; font-size: 8px; letter-spacing: .13em; }
.pulse-visual { position: absolute; inset: auto 30px 31px 30px; height: 94px; display: flex; align-items: end; justify-content: end; gap: 8px; }
.pulse-visual i { width: 8px; border-radius: 6px; background: linear-gradient(to top, #5e66f2, #2bbfe4); box-shadow: 0 0 15px #5275ee33; }
.pulse-visual i:nth-child(1) { height: 28%; }.pulse-visual i:nth-child(2) { height: 58%; }.pulse-visual i:nth-child(3) { height: 38%; }.pulse-visual i:nth-child(4) { height: 82%; }.pulse-visual i:nth-child(5) { height: 51%; }
.pulse-visual span { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, #5d69f24f, transparent); }
.link-visual { position: absolute; right: 5%; bottom: 8%; width: 230px; height: 105px; }
.link-visual i { position: absolute; top: 17px; width: 53px; height: 53px; border: 1px solid #84afea; border-radius: 17px; background: #ecf4ff; box-shadow: 0 13px 29px #2867bd1b; }
.link-visual i:first-child { left: 5px; }.link-visual i:nth-child(2) { right: 5px; border-color: #aaa1ee; background: #f1efff; }
.link-visual span { position: absolute; left: 58px; right: 58px; top: 43px; height: 2px; background: linear-gradient(90deg, #559af0, #7669ec); }
.link-visual span::after { content: ""; position: absolute; width: 20px; height: 100%; background: #fff; box-shadow: 0 0 13px #3aa7f1; animation: signal 2s linear infinite; }
.link-visual b { position: absolute; left: 50%; bottom: 0; color: #4f75ad; font-size: 7px; letter-spacing: .16em; transform: translateX(-50%); }
.zero-visual { position: absolute; right: 8%; bottom: 11%; display: grid; justify-items: end; }
.zero-visual small, .zero-visual span { color: #d9e5ff; font-size: 7px; font-weight: 700; letter-spacing: .18em; }
.zero-visual strong { margin: 5px 0; color: #fff; font-size: 78px; line-height: .9; letter-spacing: -.08em; text-shadow: 0 20px 40px #15359335; }

.experience { padding: 115px clamp(24px, 7vw, 118px) 145px; }
.experience-panel { position: relative; display: grid; grid-template-columns: .82fr 1.18fr; gap: 7vw; align-items: center; padding: 76px clamp(38px, 6vw, 88px); overflow: hidden; border: 1px solid #345888; border-radius: 34px; color: #eaf3ff; background: radial-gradient(circle at 80% 35%, #135eb051, transparent 30%), linear-gradient(145deg, #091d39, #061429 62%, #0b2646); box-shadow: 0 36px 85px #173c7533; }
.experience-panel::before { content: ""; position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(#88acdf0c 1px, transparent 1px), linear-gradient(90deg, #88acdf0c 1px, transparent 1px); background-size: 36px 36px; }
.experience-copy { position: relative; z-index: 2; }
.experience-copy > small { color: #61d2ed; }
.experience h2 { color: #f4f8ff; }
.experience-copy p { max-width: 510px; margin: 24px 0; color: #9ab0cc; line-height: 1.9; }
.experience-copy > a { color: #70def1; font-size: 13px; font-weight: 760; }
.experience-copy > a span { margin-left: 18px; }
.workspace-preview { position: relative; z-index: 2; overflow: hidden; border: 1px solid #6f94c84a; border-radius: 20px; background: #0a1d36d9; box-shadow: 0 28px 65px #020a174f, inset 0 1px #ffffff12; transform: perspective(1000px) rotateY(-3deg); }
.workspace-top { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #7396c52c; color: #bcd2ed; font-size: 7px; letter-spacing: .14em; }
.workspace-top span { display: flex; align-items: center; gap: 6px; color: #57d4e8; }
.workspace-top i { width: 5px; height: 5px; border-radius: 50%; background: #4bd9e9; box-shadow: 0 0 9px #4bd9e9; }
.workspace-body { height: 285px; display: grid; grid-template-columns: 55px 1fr; }
.workspace-body aside { display: grid; align-content: start; justify-content: center; gap: 18px; padding-top: 23px; border-right: 1px solid #7396c51f; }
.workspace-body aside i { width: 18px; height: 18px; border-radius: 6px; background: #6688b11c; }
.workspace-body aside i:first-child { background: linear-gradient(135deg, #1388ff, #5e63f2); }
.workspace-main { padding: 24px; }
.workspace-title { display: flex; justify-content: space-between; color: #c9dbf2; font-size: 12px; }
.workspace-title em { color: #5d7fa8; font-style: normal; letter-spacing: .2em; }
.workspace-device { display: grid; grid-template-columns: 45px 1fr auto; gap: 13px; align-items: center; margin-top: 28px; padding: 16px; border: 1px solid #7699c62d; border-radius: 14px; background: #102b4e; }
.workspace-device > i { width: 45px; height: 45px; border-radius: 13px; background: linear-gradient(135deg, #1187ff, #5864f2); box-shadow: 0 0 22px #1688ff3c; }
.workspace-device strong, .workspace-device small { display: block; }
.workspace-device strong { color: #e6f0ff; font-size: 11px; }
.workspace-device small { margin-top: 5px; color: #718fb4; font-size: 8px; }
.workspace-device > span { padding: 8px 12px; border-radius: 8px; color: #fff; background: linear-gradient(110deg, #087fff, #5264f3); font-size: 8px; }
.workspace-bars { display: grid; gap: 10px; margin-top: 25px; }
.workspace-bars i { height: 8px; border-radius: 6px; background: #6688b116; }
.workspace-bars i:nth-child(1) { width: 88%; }.workspace-bars i:nth-child(2) { width: 67%; }.workspace-bars i:nth-child(3) { width: 78%; }

.free { position: relative; min-height: 500px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 70px; padding: 95px clamp(24px, 10vw, 160px); overflow: hidden; color: #fff; background: linear-gradient(125deg, #087cff, #4266f4 52%, #715bec); }
.free::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 75% 48%, #6ad8ff4a, transparent 23%), linear-gradient(#ffffff0c 1px, transparent 1px), linear-gradient(90deg, #ffffff0c 1px, transparent 1px); background-size: auto, 40px 40px, 40px 40px; }
.free-copy { position: relative; z-index: 2; }
.free-copy > small { color: #d9e7ff; }
.free h2 { color: #fff; }
.free h2 em { color: #dff4ff; font-style: normal; }
.free p { max-width: 530px; color: #deE9ff; font-size: 15px; line-height: 1.9; }
.price-badge { position: relative; z-index: 2; min-width: 290px; display: grid; justify-items: center; padding: 35px 49px; border: 1px solid #ffffff43; border-radius: 28px; background: #ffffff12; box-shadow: 0 30px 65px #17369835; backdrop-filter: blur(12px); }
.price-badge span, .price-badge small { color: #dbe8ff; font-size: 8px; font-weight: 750; letter-spacing: .2em; }
.price-badge strong { margin: 9px 0; font-size: 91px; line-height: .9; letter-spacing: -.08em; }
.free-orbit, .free-orbit::before, .free-orbit::after { position: absolute; border: 1px solid #ffffff1f; border-radius: 50%; }
.free-orbit { width: 590px; height: 590px; right: 11%; top: -50px; animation: rotate 25s linear infinite; }
.free-orbit::before { content: ""; inset: 75px; }.free-orbit::after { content: ""; inset: 150px; }
.free-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #c7f2ff; box-shadow: 0 0 16px #c7f2ff; }
.free-orbit i:nth-child(1) { left: 80px; top: 65px; }.free-orbit i:nth-child(2) { right: 28px; top: 260px; }.free-orbit i:nth-child(3) { left: 275px; bottom: -4px; }

.closing { display: flex; align-items: center; justify-content: space-between; gap: 55px; padding: 115px clamp(24px, 7vw, 118px); background: linear-gradient(180deg, #f5f8ff, #edf3ff); }
.closing h2 { font-size: clamp(40px, 4.5vw, 67px); }
.closing .button { min-width: 205px; }
.site-footer { display: grid; grid-template-columns: 1fr auto auto; gap: 35px; align-items: center; padding: 43px clamp(24px, 7vw, 118px); border-top: 1px solid #d4e1f3; background: #e8f0fb; color: #6d7e99; font-size: 10px; }
.footer-brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.footer-brand strong, .footer-brand small { display: block; }
.footer-brand small { margin-top: 4px; color: #7b8ba5; font-size: 8px; }
.footer-links, .filings { display: flex; gap: 18px; }
.footer-links a:hover, .filings a:hover { color: #146de9; }
.site-footer > p { grid-column: 1 / -1; margin: 0; color: #92a0b5; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: none; }
.delay-one { transition-delay: .12s; }.delay-two { transition-delay: .22s; }.delay-three { transition-delay: .32s; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px #1585ff07; } }
@keyframes breathe { 50% { transform: translate(-50%, -50%) scale(1.1); opacity: .75; } }
@keyframes drift { 50% { transform: translate(22px, -18px); } }
@keyframes deckFloat { 50% { transform: translateY(-9px) rotateY(-3deg) rotateX(1deg); } }
@keyframes chipFloat { 50% { transform: translateY(-9px); } }
@keyframes orbitPulse { 50% { transform: translate(-50%, -50%) scale(1.07); opacity: .52; } }
@keyframes vaultPulse { 50% { transform: scale(1.06); opacity: .55; } }
@keyframes signal { from { left: -55px; } to { left: 100%; } }
@keyframes rotate { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; padding-top: 155px; }
  .hero-copy { max-width: 780px; }
  .hero-scene { height: 580px; }
  .bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 330px 300px; }
  .experience-panel { gap: 50px; padding-inline: 48px; }
  .site-footer { grid-template-columns: 1fr auto; }
  .filings { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  body::before { background-size: 38px 38px; }
  .site-header { height: 70px; gap: 8px; padding: 0 18px; }
  .site-header nav, .nav-toggle { display: none; }
  .brand { margin-right: 0; }
  .brand small { display: none; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .header-login { margin-left: auto; min-height: 38px; padding: 0 13px; }
  .header-login span { display: none; }
  .hero { min-height: auto; gap: 30px; padding: 128px 20px 70px; }
  .hero h1 { font-size: 56px; }
  .hero-copy > p { font-size: 15px; }
  .hero-actions { align-items: stretch; }
  .button { min-height: 50px; }
  .trust-row { flex-wrap: wrap; gap: 10px 17px; }
  .hero-scene { width: calc(100vw - 20px); height: 440px; margin-left: -2px; }
  .control-deck { inset: 7% -14% 7% 0; border-radius: 22px; transform: none; animation: none; }
  .deck-top { height: 48px; padding-inline: 15px; }
  .deck-body { height: calc(100% - 48px); grid-template-columns: 48px 1fr; }
  .deck-rail { gap: 15px; padding-top: 20px; }
  .deck-rail i { width: 17px; height: 17px; }
  .deck-main { padding: 18px 17px 16px; }
  .deck-heading strong { font-size: 13px; }
  .signal-stage { min-height: 230px; }
  .signal-core { width: 72px; height: 72px; border-radius: 22px; }
  .signal-core i { width: 21px; height: 27px; }
  .orbit-one { width: 135px; height: 135px; }.orbit-two { width: 190px; height: 190px; }
  .device-node { width: 116px; grid-template-columns: 25px 1fr; gap: 7px; padding: 9px; }
  .device-node > i { width: 25px; height: 25px; }
  .device-node.local { left: 0; }.device-node.remote { right: 0; }
  .deck-metrics { gap: 6px; }
  .deck-metrics > div { padding: 9px; }
  .scene-chip { padding: 10px 12px; }
  .scene-chip > i { width: 27px; height: 27px; }
  .chip-private { left: -1%; top: 2%; }.chip-live { right: -2%; bottom: 1%; }
  .values, .experience { padding: 88px 20px; }
  .section-heading { display: block; margin-bottom: 38px; }
  .section-heading p { margin-top: 18px; }
  .bento-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 300px); }
  .bento-card { padding: 25px; }
  .vault-visual { right: -1%; width: 190px; height: 190px; }
  .pulse-visual { height: 82px; }
  .link-visual { right: 2%; transform: scale(.86); transform-origin: right bottom; }
  .zero-visual { right: 7%; }
  .experience-panel { grid-template-columns: 1fr; gap: 45px; padding: 48px 24px; border-radius: 26px; }
  .workspace-preview { transform: none; }
  .free { grid-template-columns: 1fr; gap: 42px; padding: 82px 25px; }
  .price-badge { min-width: 250px; justify-self: start; }
  .closing { align-items: flex-start; flex-direction: column; padding: 84px 24px; }
  .site-footer { grid-template-columns: 1fr; padding: 35px 20px; }
  .footer-links, .filings { grid-column: 1; flex-wrap: wrap; }
}

@media (max-width: 440px) {
  .brand strong { font-size: 17px; }
  .hero h1 { font-size: 50px; }
  .hero-actions { flex-direction: column; }
  .hero-scene { height: 410px; }
  .deck-metrics > div:nth-child(3) { display: none; }
  .deck-metrics { grid-template-columns: 1fr 1fr; }
  .device-node.remote { top: 25%; }
  .scene-chip { animation: none; transform: scale(.9); }
  .chip-private { transform-origin: left top; }.chip-live { transform-origin: right bottom; }
  .zero-visual strong { font-size: 67px; }
  .workspace-body { height: 250px; }
  .price-badge strong { font-size: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ambient, .eyebrow i, .scene-aura, .control-deck, .scene-chip, .signal-orbit, .signal-path i, .vault-visual i, .link-visual span::after, .free-orbit { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}