:root {
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-soft: #f0f4f8;
  --ink: #142033;
  --muted: #5f6f86;
  --line: #d9e1ec;
  --brand: #0f766e;
  --brand-strong: #0b5d56;
  --accent: #2457a6;
  --amber: #b7791f;
  --danger: #b42318;
  --shadow: 0 24px 70px rgba(28, 40, 56, 0.14);
  --radius: 8px;
  font-family:
    Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: #020308;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 16px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(217, 225, 236, 0.78);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.js-enabled .site-header {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-100%);
}

.js-enabled .site-header.is-scrolled {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.site-header.is-scrolled,
.js-enabled .site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 34px rgba(20, 32, 51, 0.08);
}

.nav-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.menu-toggle span {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--ink);
  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

.menu-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 760;
}

.brand-mark {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
}

.brand-name {
  font-size: 20px;
}

.site-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: 14px;
}

.site-nav a {
  position: relative;
  padding: 8px 0;
  transition: color 160ms ease;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  border-radius: 999px;
  background: var(--brand);
  content: "";
  transition: transform 180ms ease;
}

.site-nav a:hover,
.site-nav a.is-active,
.console-link:hover {
  color: var(--brand-strong);
}

.site-nav a:hover::after,
.site-nav a.is-active::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--brand);
  border-radius: 8px;
  background: var(--brand);
  color: #fff;
  font-weight: 720;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
  background: var(--brand-strong);
  border-color: var(--brand-strong);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
  transform: none;
}

.button-small {
  min-height: 36px;
  padding-inline: 14px;
}

.button-ghost {
  background: #fff;
  color: var(--ink);
  border-color: var(--line);
}

.button-ghost:hover {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: #c9d5e4;
}

.text-link {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-top: 4px;
  color: var(--brand-strong);
  font-weight: 760;
}

.text-link::after {
  margin-left: 8px;
  content: "->";
}

.inline-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}

.detail-card .text-link,
.doc-card .text-link {
  margin-top: 16px;
}

.section,
.section-band {
  scroll-margin-top: 86px;
  padding: clamp(60px, 8vw, 104px) clamp(20px, 5vw, 72px);
}

.page-main {
  min-height: 100vh;
  padding-top: 72px;
  background: #f6f8fb;
}

.page-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.7fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: end;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 82% 18%, rgba(15, 118, 110, 0.12), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

.page-hero h1 {
  max-width: 860px;
}

.page-lead {
  max-width: 820px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.85;
}

.page-hero-panel {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(28, 40, 56, 0.08);
}

.page-hero-panel strong {
  font-size: 18px;
}

.page-hero-panel span {
  color: var(--muted);
  line-height: 1.7;
}

.page-hero-screenshot {
  overflow: hidden;
  padding: 18px;
}

.page-hero-screenshot img,
.detail-shot img,
.screenshot-showcase img,
.shot-card-visual img,
.appliance-shot img,
.scenario-shot img,
.docs-preview img,
.case-board-shot {
  display: block;
  width: 100%;
  height: auto;
}

.page-hero-screenshot img {
  margin-top: 4px;
  border: 1px solid rgba(203, 215, 230, 0.88);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(28, 40, 56, 0.08);
}

.detail-shot {
  margin: 22px 0;
  overflow: hidden;
  border: 1px solid rgba(203, 215, 230, 0.88);
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0 18px 46px rgba(28, 40, 56, 0.07);
}

.detail-shot-dark {
  border-color: rgba(51, 65, 85, 0.52);
  background: #0f172a;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.split-section {
  display: grid;
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.sticky-rail {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 12px;
}

.rail-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.rail-card strong {
  display: block;
  margin-bottom: 10px;
}

.rail-card a,
.rail-card span {
  display: block;
  color: var(--muted);
  line-height: 1.7;
}

.rail-card a + a {
  margin-top: 8px;
}

.detail-stack {
  display: grid;
  gap: 18px;
}

.detail-card,
.doc-card,
.step-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.detail-card {
  padding: 26px;
}

.detail-card h2,
.doc-card h2 {
  margin-bottom: 12px;
  font-size: clamp(24px, 2.8vw, 36px);
}

.detail-card p,
.doc-card p,
.step-card p {
  color: var(--muted);
  line-height: 1.78;
}

.feature-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.feature-list li {
  position: relative;
  padding-left: 22px;
  color: #26364c;
  line-height: 1.7;
}

.feature-list li::before {
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
  content: "";
}

.two-column-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.doc-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.doc-nav {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.doc-nav a {
  padding: 9px 10px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 14px;
}

.doc-nav a:hover,
.doc-nav a.is-active {
  background: #edf6f4;
  color: var(--brand-strong);
}

.doc-content {
  display: grid;
  gap: 18px;
}

.doc-card {
  padding: 26px;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.step-card {
  padding: 22px;
}

.step-card span {
  display: inline-grid;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--accent);
  font-weight: 800;
}

.docs-home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.section-actions {
  margin-top: 28px;
}

.launch-hero {
  --launch-scroll-buffer: clamp(88px, 10vh, 128px);
  position: relative;
  z-index: 1;
  display: grid;
  min-height: calc(100vh + var(--launch-scroll-buffer));
  place-items: center;
  overflow: hidden;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 42%, rgba(112, 142, 255, 0.2), transparent 22rem),
    linear-gradient(180deg, #090d18 0%, #05070d 54%, #020308 100%);
  color: #f4f7fb;
  isolation: isolate;
  padding-bottom: calc(clamp(56px, 8vh, 92px) + var(--launch-scroll-buffer));
}

.launch-hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(160, 190, 255, 0.16), transparent) 50% 50% / min(78vw, 980px) 1px no-repeat,
    linear-gradient(0deg, transparent, rgba(160, 190, 255, 0.16), transparent) 50% 50% / 1px min(52vh, 480px) no-repeat,
    radial-gradient(ellipse at center, transparent 0 38%, rgba(0, 0, 0, 0.42) 74%, rgba(0, 0, 0, 0.78) 100%);
  content: "";
}

.launch-hero::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.65) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(117, 230, 255, 0.5) 0 1px, transparent 1.4px);
  background-position: 0 0, 42px 64px;
  background-size: 148px 148px, 211px 211px;
  content: "";
}

.launch-hero::after {
  z-index: 0;
}

.launch-content {
  position: relative;
  z-index: 1;
  isolation: isolate;
  --launch-orb-size: min(74vw, 720px);
  --launch-corona-spread: min(220vw, 2100px);
  --launch-corona-edge: calc(var(--launch-corona-spread) / 2);
  --launch-corona-start: calc(100% - var(--launch-corona-edge));
  --launch-glow-x: 50%;
  --launch-glow-y: 50%;
  --launch-blur: 0px;
  --launch-fade: 1;
  --launch-rise: 0px;
  --launch-scale: 1;
  width: min(920px, 100%);
  text-align: center;
  filter: blur(var(--launch-blur));
  opacity: var(--launch-fade);
  transform: translateY(var(--launch-rise)) scale(var(--launch-scale));
  transform-origin: center center;
  will-change: filter, opacity, transform;
}

.launch-content::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: var(--launch-orb-size);
  aspect-ratio: 1;
  border: 1px solid rgba(160, 190, 255, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 90px rgba(117, 230, 255, 0.12),
    inset 0 0 80px rgba(111, 140, 255, 0.08);
  content: "";
  transform: translate(-50%, -50%);
  transition:
    border-color 220ms ease,
    box-shadow 220ms ease;
}

.launch-content::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: var(--launch-orb-size);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
  pointer-events: none;
  content: "";
  opacity: 0;
  transform: translate(-50%, -50%);
  transition:
    border-color 320ms ease,
    box-shadow 320ms ease,
    opacity 320ms ease;
}

.launch-globe,
.launch-globe-hit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--launch-orb-size);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.launch-globe {
  z-index: 0;
  width: calc(var(--launch-orb-size) + var(--launch-corona-spread));
  pointer-events: none;
  opacity: 0;
  background: transparent;
  filter: none;
  mix-blend-mode: screen;
  overflow: visible;
  transition: opacity 420ms ease;
}

.launch-globe::before,
.launch-globe::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  opacity: 0;
  transform-origin: center center;
}

.launch-globe::before {
  background:
    radial-gradient(circle at 49% 50%, rgba(248, 252, 255, 0.28), transparent 34%),
    radial-gradient(circle at 32% 50%, rgba(216, 224, 235, 0.22), transparent 25%),
    radial-gradient(circle at 69% 45%, rgba(190, 218, 238, 0.2), transparent 33%),
    conic-gradient(
      from -20deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.74) 16deg,
      rgba(203, 215, 228, 0.5) 34deg,
      transparent 58deg,
      rgba(232, 238, 246, 0.46) 102deg,
      transparent 138deg,
      rgba(180, 205, 225, 0.36) 212deg,
      rgba(255, 255, 255, 0.52) 246deg,
      transparent 286deg,
      rgba(214, 224, 236, 0.56) 318deg,
      transparent 360deg
    );
  filter: blur(84px) saturate(0.62);
  -webkit-mask: radial-gradient(
    circle closest-side,
    transparent calc(var(--launch-corona-start) - 12px),
    rgba(0, 0, 0, 0.84) calc(var(--launch-corona-start) + 38px),
    rgba(0, 0, 0, 0.56) 40%,
    rgba(0, 0, 0, 0.24) 64%,
    rgba(0, 0, 0, 0.08) 86%,
    transparent 100%
  );
  mask: radial-gradient(
    circle closest-side,
    transparent calc(var(--launch-corona-start) - 12px),
    rgba(0, 0, 0, 0.84) calc(var(--launch-corona-start) + 38px),
    rgba(0, 0, 0, 0.56) 40%,
    rgba(0, 0, 0, 0.24) 64%,
    rgba(0, 0, 0, 0.08) 86%,
    transparent 100%
  );
}

.launch-globe::after {
  background:
    radial-gradient(circle at 50% 48%, rgba(250, 252, 255, 0.3), transparent 32%),
    radial-gradient(circle at 18% 48%, rgba(207, 216, 228, 0.28), transparent 20%),
    radial-gradient(circle at 82% 44%, rgba(188, 211, 230, 0.24), transparent 24%),
    conic-gradient(
      from 8deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.4) 24deg,
      transparent 52deg,
      rgba(203, 215, 228, 0.34) 96deg,
      transparent 142deg,
      rgba(240, 244, 249, 0.34) 188deg,
      transparent 234deg,
      rgba(188, 211, 230, 0.26) 302deg,
      transparent 348deg
    );
  filter: blur(128px) saturate(0.58);
  -webkit-mask: radial-gradient(
    circle closest-side,
    transparent calc(var(--launch-corona-start) + 26px),
    rgba(0, 0, 0, 0.52) 34%,
    rgba(0, 0, 0, 0.28) 60%,
    rgba(0, 0, 0, 0.1) 82%,
    transparent 100%
  );
  mask: radial-gradient(
    circle closest-side,
    transparent calc(var(--launch-corona-start) + 26px),
    rgba(0, 0, 0, 0.52) 34%,
    rgba(0, 0, 0, 0.28) 60%,
    rgba(0, 0, 0, 0.1) 82%,
    transparent 100%
  );
}

.launch-ripple,
.launch-corona {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transform-origin: center center;
}

.launch-ripple {
  --launch-ripple-rotate: -0.4deg;
  background:
    radial-gradient(
      circle closest-side,
      transparent calc(var(--launch-corona-start) - 8px),
      rgba(255, 255, 255, 0.66) calc(var(--launch-corona-start) + 2px),
      rgba(208, 218, 230, 0.34) calc(var(--launch-corona-start) + 15px),
      transparent calc(var(--launch-corona-start) + 42px),
      transparent calc(var(--launch-corona-start) + 108px),
      rgba(255, 255, 255, 0.34) calc(var(--launch-corona-start) + 128px),
      rgba(172, 184, 198, 0.18) calc(var(--launch-corona-start) + 152px),
      transparent calc(var(--launch-corona-start) + 190px),
      transparent calc(var(--launch-corona-start) + 282px),
      rgba(246, 249, 252, 0.22) calc(var(--launch-corona-start) + 314px),
      rgba(160, 170, 184, 0.12) calc(var(--launch-corona-start) + 352px),
      transparent calc(var(--launch-corona-start) + 408px),
      transparent calc(var(--launch-corona-start) + 540px),
      rgba(255, 255, 255, 0.13) calc(var(--launch-corona-start) + 590px),
      rgba(150, 160, 176, 0.08) calc(var(--launch-corona-start) + 650px),
      transparent calc(var(--launch-corona-start) + 760px),
      transparent 100%
    );
  filter: blur(14px) saturate(0.45);
  mix-blend-mode: screen;
  -webkit-mask: radial-gradient(
    circle closest-side,
    transparent calc(var(--launch-corona-start) - 10px),
    rgba(0, 0, 0, 0.92) calc(var(--launch-corona-start) + 8px),
    rgba(0, 0, 0, 0.62) 42%,
    rgba(0, 0, 0, 0.28) 68%,
    transparent 100%
  );
  mask: radial-gradient(
    circle closest-side,
    transparent calc(var(--launch-corona-start) - 10px),
    rgba(0, 0, 0, 0.92) calc(var(--launch-corona-start) + 8px),
    rgba(0, 0, 0, 0.62) 42%,
    rgba(0, 0, 0, 0.28) 68%,
    transparent 100%
  );
}

.launch-ripple-two {
  --launch-ripple-rotate: 0.8deg;
  filter: blur(24px) saturate(0.4);
  transform: rotate(0.8deg);
}

.launch-ripple-three {
  --launch-ripple-rotate: -1deg;
  filter: blur(42px) saturate(0.36);
  transform: rotate(-1deg);
}

.launch-corona-inner {
  background:
    conic-gradient(
      from -24deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.96) 18deg,
      rgba(203, 215, 228, 0.5) 36deg,
      transparent 66deg,
      rgba(188, 211, 230, 0.38) 102deg,
      transparent 132deg,
      rgba(248, 251, 255, 0.82) 164deg,
      rgba(203, 215, 228, 0.42) 190deg,
      transparent 232deg,
      rgba(188, 211, 230, 0.5) 292deg,
      rgba(255, 255, 255, 0.76) 316deg,
      transparent 352deg
    );
  filter: blur(26px) saturate(0.52);
  -webkit-mask: radial-gradient(
    circle closest-side,
    transparent calc(var(--launch-corona-start) - 6px),
    rgba(0, 0, 0, 0.94) calc(var(--launch-corona-start) + 18px),
    rgba(0, 0, 0, 0.52) 36%,
    rgba(0, 0, 0, 0.18) 58%,
    rgba(0, 0, 0, 0.05) 76%,
    transparent 100%
  );
  mask: radial-gradient(
    circle closest-side,
    transparent calc(var(--launch-corona-start) - 6px),
    rgba(0, 0, 0, 0.94) calc(var(--launch-corona-start) + 18px),
    rgba(0, 0, 0, 0.52) 36%,
    rgba(0, 0, 0, 0.18) 58%,
    rgba(0, 0, 0, 0.05) 76%,
    transparent 100%
  );
}

.launch-corona-lift {
  background:
    conic-gradient(
      from 12deg,
      transparent,
      rgba(255, 255, 255, 0.58) 22deg,
      transparent 64deg,
      rgba(203, 215, 228, 0.44) 116deg,
      transparent 158deg,
      rgba(150, 160, 176, 0.26) 222deg,
      rgba(240, 244, 249, 0.46) 272deg,
      transparent 330deg,
      transparent
    );
  filter: blur(78px) saturate(0.46);
  -webkit-mask: radial-gradient(
    circle closest-side,
    transparent calc(var(--launch-corona-start) + 22px),
    rgba(0, 0, 0, 0.72) 34%,
    rgba(0, 0, 0, 0.36) 58%,
    rgba(0, 0, 0, 0.14) 82%,
    transparent 100%
  );
  mask: radial-gradient(
    circle closest-side,
    transparent calc(var(--launch-corona-start) + 22px),
    rgba(0, 0, 0, 0.72) 34%,
    rgba(0, 0, 0, 0.36) 58%,
    rgba(0, 0, 0, 0.14) 82%,
    transparent 100%
  );
}

.launch-corona-wave {
  background:
    conic-gradient(
      from -8deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.44) 20deg,
      transparent 48deg,
      rgba(203, 215, 228, 0.36) 94deg,
      transparent 128deg,
      rgba(240, 244, 249, 0.34) 184deg,
      transparent 232deg,
      rgba(188, 211, 230, 0.34) 306deg,
      transparent 348deg
    );
  filter: blur(128px) saturate(0.42);
  -webkit-mask: radial-gradient(
    circle closest-side,
    transparent calc(var(--launch-corona-start) + 70px),
    rgba(0, 0, 0, 0.48) 40%,
    rgba(0, 0, 0, 0.24) 68%,
    rgba(0, 0, 0, 0.08) 90%,
    transparent 100%
  );
  mask: radial-gradient(
    circle closest-side,
    transparent calc(var(--launch-corona-start) + 70px),
    rgba(0, 0, 0, 0.48) 40%,
    rgba(0, 0, 0, 0.24) 68%,
    rgba(0, 0, 0, 0.08) 90%,
    transparent 100%
  );
}

.launch-globe-hit {
  z-index: 5;
  cursor: crosshair;
  pointer-events: auto;
  clip-path: circle(50% at 50% 50%);
  touch-action: pan-y;
}

.launch-content.is-globe-active .launch-globe {
  opacity: 1;
  filter: none;
  animation: none;
}

.launch-content.is-globe-active .launch-globe::before {
  animation: launchCoronaBloom 3800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.launch-content.is-globe-active .launch-globe::after {
  animation: launchCoronaOuterBloom 4600ms 180ms ease-out both;
}

.launch-content.is-globe-active .launch-ripple-one {
  animation: launchRipple 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.launch-content.is-globe-active .launch-ripple-two {
  animation: launchRipple 4300ms 620ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.launch-content.is-globe-active .launch-ripple-three {
  animation: launchRipple 5200ms 1240ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.launch-content.is-globe-active::before {
  border-color: rgba(220, 244, 255, 0.2);
  box-shadow:
    0 0 14px rgba(255, 255, 255, 0.12),
    0 0 46px rgba(203, 215, 228, 0.14),
    inset 0 0 74px rgba(117, 230, 255, 0.05);
}

.launch-content.is-globe-active::after {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.72),
    0 0 72px rgba(203, 215, 228, 0.44),
    0 0 190px rgba(150, 160, 176, 0.22),
    inset 0 0 8px rgba(255, 255, 255, 0.08);
}

.launch-content.is-globe-active .launch-corona-inner {
  animation: launchCoronaInner 3000ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.launch-content.is-globe-active .launch-corona-lift {
  animation: launchCoronaLift 3600ms 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.launch-content.is-globe-active .launch-corona-wave {
  animation: launchCoronaWave 4200ms 520ms ease-out both;
}

.launch-brand-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  color: rgba(255, 255, 255, 0.025);
  font-size: clamp(82px, 18vw, 240px);
  font-weight: 800;
  line-height: 1;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.launch-hero h1 {
  position: relative;
  z-index: 2;
  max-width: none;
  margin: 0;
  color: #f4f7fb;
  font-size: clamp(54px, 9vw, 132px);
  font-weight: 760;
  line-height: 0.92;
  text-shadow:
    0 0 28px rgba(117, 230, 255, 0.28),
    0 18px 58px rgba(0, 0, 0, 0.55);
}

.launch-platform {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: max-content auto max-content;
  align-items: center;
  justify-content: center;
  column-gap: clamp(9px, 1.4vw, 18px);
  width: min(780px, 100%);
  margin: 28px auto 0;
  overflow: visible;
  color: #d9e2ee;
  font-size: clamp(20px, 3.2vw, 36px);
  font-weight: 520;
  line-height: 1.35;
}

.launch-platform::before,
.launch-platform::after {
  position: absolute;
  left: 50%;
  width: min(72vw, 760px);
  height: 1px;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(203, 215, 228, 0.12) 22%, rgba(255, 255, 255, 0.86) 50%, rgba(203, 215, 228, 0.12) 78%, transparent 100%);
  box-shadow:
    0 0 14px rgba(203, 215, 228, 0.5),
    0 0 34px rgba(255, 255, 255, 0.16);
  content: "";
}

.launch-platform::before {
  top: -11px;
  transform: translateX(-165%);
}

.launch-platform::after {
  bottom: -12px;
  transform: translateX(65%);
}

.launch-platform span {
  display: inline-block;
  min-width: 0;
  transform: translateX(0);
  opacity: 0.82;
  text-shadow: 0 0 0 rgba(117, 230, 255, 0);
}

.launch-platform-left {
  justify-self: end;
  text-align: right;
}

.launch-platform-amp {
  justify-self: center;
  opacity: 0.68;
}

.launch-platform-right {
  justify-self: start;
  text-align: left;
}

.launch-content.is-globe-active .launch-platform::before {
  animation: launchLightSweepFromLeft 1900ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.launch-content.is-globe-active .launch-platform::after {
  animation: launchLightSweepFromRight 1900ms 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.launch-content.is-globe-active .launch-platform span:first-child {
  animation: launchPlatformFromLeft 1500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.launch-content.is-globe-active .launch-platform-amp {
  animation: launchAmpReveal 1280ms 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.launch-content.is-globe-active .launch-platform span:last-child {
  animation: launchPlatformFromRight 1500ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.launch-soon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  height: 42px;
  margin: 36px 0 0;
  border: 1px solid rgba(117, 230, 255, 0.28);
  border-radius: 999px;
  background: rgba(5, 9, 18, 0.42);
  box-shadow:
    0 0 32px rgba(117, 230, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #8d99aa;
  font-size: 15px;
  font-weight: 500;
}

@keyframes launchPlatformFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-42vw);
    text-shadow: 0 0 0 rgba(117, 230, 255, 0);
  }

  72% {
    opacity: 1;
    transform: translateX(0.9vw);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    text-shadow:
      0 0 18px rgba(203, 215, 228, 0.32),
      0 0 34px rgba(255, 255, 255, 0.12);
  }
}

@keyframes launchPlatformFromRight {
  0% {
    opacity: 0;
    transform: translateX(42vw);
    text-shadow: 0 0 0 rgba(117, 230, 255, 0);
  }

  72% {
    opacity: 1;
    transform: translateX(-0.9vw);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
    text-shadow:
      0 0 18px rgba(203, 215, 228, 0.32),
      0 0 34px rgba(255, 255, 255, 0.12);
  }
}

@keyframes launchAmpReveal {
  0% {
    opacity: 0;
    transform: scale(0.78);
    text-shadow: 0 0 0 rgba(117, 230, 255, 0);
  }

  55% {
    opacity: 0.88;
    transform: scale(1.08);
  }

  100% {
    opacity: 0.86;
    transform: scale(1);
    text-shadow:
      0 0 18px rgba(203, 215, 228, 0.36),
      0 0 34px rgba(255, 255, 255, 0.14);
  }
}

@keyframes launchLightSweepFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-172%);
  }

  24% {
    opacity: 1;
  }

  78% {
    opacity: 0.88;
  }

  100% {
    opacity: 0;
    transform: translateX(-18%);
  }
}

@keyframes launchLightSweepFromRight {
  0% {
    opacity: 0;
    transform: translateX(72%);
  }

  24% {
    opacity: 1;
  }

  78% {
    opacity: 0.88;
  }

  100% {
    opacity: 0;
    transform: translateX(-82%);
  }
}

@keyframes launchCoronaInner {
  0% {
    opacity: 0;
    transform: scale(0.985) rotate(-0.6deg);
  }

  34% {
    opacity: 0.68;
    transform: scale(1.002) rotate(0.2deg);
  }

  70% {
    opacity: 1;
    transform: scale(1.018) rotate(0.8deg);
  }

  100% {
    opacity: 0.94;
    transform: scale(1.012) rotate(0.35deg);
  }
}

@keyframes launchRipple {
  0% {
    opacity: 0;
    background-position: 50% 50%;
    transform: scale(1) rotate(var(--launch-ripple-rotate));
  }

  18% {
    opacity: 0.78;
  }

  54% {
    opacity: 0.46;
    background-position: 50% 50%;
    transform: scale(1.12) rotate(calc(var(--launch-ripple-rotate) + 0.55deg));
  }

  100% {
    opacity: 0;
    background-position: 50% 50%;
    transform: scale(1.24) rotate(calc(var(--launch-ripple-rotate) + 1deg));
  }
}

@keyframes launchCoronaBloom {
  0% {
    opacity: 0;
    transform: scale(0.93) rotate(-0.8deg);
  }

  34% {
    opacity: 0.74;
    transform: scale(1.01) rotate(0.15deg);
  }

  72% {
    opacity: 1;
    transform: scale(1.06) rotate(0.65deg);
  }

  100% {
    opacity: 0.86;
    transform: scale(1.08) rotate(0.38deg);
  }
}

@keyframes launchCoronaOuterBloom {
  0% {
    opacity: 0;
    transform: scale(0.88) rotate(0.6deg);
  }

  36% {
    opacity: 0.5;
    transform: scale(1.02) rotate(-0.4deg);
  }

  74% {
    opacity: 0.78;
    transform: scale(1.1) rotate(-1deg);
  }

  100% {
    opacity: 0.62;
    transform: scale(1.16) rotate(-0.65deg);
  }
}

@keyframes launchCoronaLift {
  0% {
    opacity: 0;
    transform: scale(0.95) rotate(0deg);
  }

  38% {
    opacity: 0.54;
    transform: scale(1.01) rotate(-0.8deg);
  }

  76% {
    opacity: 0.82;
    transform: scale(1.052) rotate(-1.4deg);
  }

  100% {
    opacity: 0.56;
    transform: scale(1.075) rotate(-1deg);
  }
}

@keyframes launchCoronaWave {
  0% {
    opacity: 0;
    transform: scale(0.91);
  }

  30% {
    opacity: 0.4;
    transform: scale(0.99);
  }

  68% {
    opacity: 0.6;
    transform: scale(1.085);
  }

  100% {
    opacity: 0.36;
    transform: scale(1.16);
  }
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(480px, 1.08fr);
  gap: clamp(36px, 6vw, 78px);
  align-items: center;
  min-width: 0;
  min-height: 650px;
  padding-top: clamp(58px, 7vw, 92px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 76% 22%, rgba(15, 118, 110, 0.09), transparent 34%),
    linear-gradient(180deg, #020308 0%, #0a0d18 44px, #f6f8fb 150px, #f6f8fb 100%);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 780px;
  margin-bottom: 22px;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.08;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hero-title-brand,
.hero-title-main {
  display: inline;
}

h2 {
  margin-bottom: 14px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.18;
  overflow-wrap: anywhere;
  word-break: break-word;
}

h3 {
  margin-bottom: 10px;
  font-size: 20px;
}

h4 {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.35;
}

.hero-lead,
.section-heading p,
.contact-copy > p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.85;
}

.hero-lead {
  max-width: 740px;
  margin-bottom: 30px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 640px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
}

.hero-metrics div {
  padding: 18px 20px;
}

.hero-metrics div + div {
  border-left: 1px solid var(--line);
}

.hero-metrics dt {
  margin-bottom: 4px;
  font-size: 24px;
  font-weight: 800;
}

.hero-metrics dd {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.product-visual {
  min-width: 0;
}

.hero-copy {
  min-width: 0;
  max-width: 100%;
}

.platform-shell {
  overflow: hidden;
  border: 1px solid #cdd8e6;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.96)),
    #f8fafc;
  box-shadow: var(--shadow);
}

.platform-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.traffic-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.dot-red {
  background: #e46f63;
}

.dot-yellow {
  background: #e3b74d;
}

.dot-green {
  background: #4aa57a;
}

.workspace-title {
  margin-left: 10px;
  color: #26364c;
  font-size: 13px;
  font-weight: 760;
}

.status-pill {
  margin-left: auto;
  padding: 5px 9px;
  border: 1px solid #b9d8d3;
  border-radius: 999px;
  color: var(--brand-strong);
  font-size: 12px;
  background: #ecf8f6;
}

.platform-map {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
  gap: 16px;
  min-height: 430px;
  padding: 22px;
  isolation: isolate;
}

.platform-map::before {
  position: absolute;
  inset: 18px;
  z-index: -1;
  border: 1px solid rgba(217, 225, 236, 0.72);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(15, 118, 110, 0.08), transparent 44%, rgba(36, 87, 166, 0.08)),
    #ffffff;
  content: "";
}

.platform-column {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(203, 215, 230, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
}

.platform-column strong {
  display: block;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.25;
}

.column-label {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--brand-strong);
  background: #edf6f4;
  font-size: 12px;
  font-weight: 800;
}

.ops-platform .column-label {
  color: var(--accent);
  background: #eef4ff;
}

.module-list {
  display: grid;
  gap: 10px;
}

.module-list span,
.module-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid rgba(217, 225, 236, 0.92);
  border-radius: 8px;
  background: #fbfdff;
  color: #26364c;
  font-size: 14px;
}

.module-list span::before,
.module-list a::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--brand);
  content: "";
}

.module-list a {
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.module-list a:hover {
  border-color: #b9d8d3;
  background: #f2faf8;
  color: var(--brand-strong);
}

.ops-platform .module-list span::before,
.ops-platform .module-list a::before {
  background: var(--accent);
}

.platform-bridge {
  display: grid;
  align-content: center;
  gap: 14px;
}

.platform-bridge span {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid rgba(203, 215, 230, 0.92);
  border-radius: 999px;
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.platform-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  border-top: 1px solid var(--line);
  background: var(--line);
}

.platform-flow span {
  display: grid;
  min-height: 54px;
  place-items: center;
  background: #ffffff;
  color: #26364c;
  font-size: 14px;
  font-weight: 760;
}

.card-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
  text-transform: uppercase;
}

.section-heading {
  max-width: 820px;
  margin-bottom: 34px;
}

.section-heading.compact {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.capability-grid,
.docs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.capability-card,
.doc-tile,
.chain-step,
.contact-note {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.capability-card {
  min-height: 206px;
  padding: 24px;
}

.capability-card p,
.chain-step p {
  color: var(--muted);
  line-height: 1.75;
}

.card-kicker {
  color: var(--accent);
}

.product-section {
  background: #ffffff;
}

.product-switcher {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.88), #ffffff 260px),
    #ffffff;
  box-shadow: 0 16px 44px rgba(28, 40, 56, 0.06);
}

.switcher-tabs {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.78);
}

.switcher-tabs button {
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 760;
  cursor: pointer;
  transition:
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.switcher-tabs button:hover,
.switcher-tabs button.is-active {
  border-color: #b9d8d3;
  background: #ecf8f6;
  color: var(--brand-strong);
}

.product-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: 28px;
  padding: 28px;
}

.product-panel[hidden] {
  display: none;
}

.product-panel-copy {
  min-width: 0;
  padding: 12px 0;
}

.panel-kicker {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--brand-strong);
  background: #edf6f4;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.product-panel-copy h3 {
  margin-bottom: 16px;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.18;
}

.product-panel-copy p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}

.compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.roadmap-section {
  background:
    linear-gradient(180deg, rgba(20, 32, 51, 0.03), rgba(15, 118, 110, 0.06)),
    #f8fafc;
  border-block: 1px solid var(--line);
}

.roadmap {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.roadmap-step {
  position: relative;
  min-height: 238px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.roadmap-step::after {
  position: absolute;
  top: 38px;
  right: -14px;
  width: 14px;
  height: 1px;
  background: #cbd7e6;
  content: "";
}

.roadmap-step:last-child::after {
  display: none;
}

.roadmap-step span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 20px;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--accent);
  font-weight: 800;
}

.roadmap-step p {
  color: var(--muted);
  line-height: 1.75;
}

.ai-section {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 251, 0.96)),
    #ffffff;
}

.chain {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.chain-step {
  position: relative;
  min-height: 210px;
  padding: 24px;
}

.chain-step span {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #edf6f4;
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 800;
}

.docs-preview {
  background: #ffffff;
}

.scenarios-section {
  background: #ffffff;
  border-top: 1px solid var(--line);
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.resource-grid,
.solution-grid,
.resource-roadmap {
  display: grid;
  gap: 16px;
}

.resource-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.solution-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resource-roadmap {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.scenario-card,
.resource-card,
.solution-card {
  min-height: 220px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(15, 118, 110, 0.05), rgba(255, 255, 255, 0) 46%),
    #fff;
}

.resource-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.resource-feature-section,
.docs-hub-section,
.solution-overview-section {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.resource-feature-band {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(320px, 0.58fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 8px;
  background:
    radial-gradient(circle at 78% 20%, rgba(15, 118, 110, 0.12), transparent 28%),
    linear-gradient(120deg, #ffffff, #eef7f6);
  box-shadow: 0 18px 48px rgba(28, 40, 56, 0.07);
}

.resource-feature-copy h2,
.docs-hub-hero h2,
.solution-overview-copy h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
}

.resource-feature-copy p,
.docs-hub-hero p,
.solution-overview-copy p {
  color: var(--muted);
  line-height: 1.85;
}

.resource-pack-grid {
  display: grid;
  gap: 12px;
}

.resource-pack-grid article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  padding: 18px;
  border: 1px solid rgba(203, 215, 230, 0.92);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.resource-pack-grid span {
  grid-row: span 2;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  color: var(--brand-strong);
  background: #e9f7f4;
  font-weight: 840;
}

.resource-pack-grid strong {
  font-size: 17px;
}

.resource-pack-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.resource-card-shot,
.solution-card-shot {
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid rgba(203, 215, 230, 0.86);
  border-radius: 8px;
  background: #0f172a;
  aspect-ratio: 16 / 9;
}

.resource-card-shot img,
.solution-card-shot img,
.doc-tile-shot,
.solution-overview-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.resource-card,
.solution-card {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.resource-card:hover,
.solution-card:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, 0.28);
  box-shadow: 0 16px 40px rgba(28, 40, 56, 0.08);
}

.solution-card {
  min-height: 260px;
}

.docs-hub-section {
  background:
    linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
  border-block: 1px solid var(--line);
}

.docs-hub-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(320px, 0.52fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: end;
  margin-bottom: 20px;
}

.docs-search-preview {
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(203, 215, 230, 0.9);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(28, 40, 56, 0.06);
}

.docs-search-preview span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.docs-search-preview strong {
  color: var(--ink);
  line-height: 1.55;
}

.docs-path-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.docs-path-grid a {
  min-height: 190px;
  padding: 22px;
  border: 1px solid rgba(203, 215, 230, 0.9);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(28, 40, 56, 0.05);
}

.docs-path-grid span {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
  place-items: center;
  border-radius: 8px;
  color: var(--brand-strong);
  background: #e9f7f4;
  font-weight: 840;
}

.docs-path-grid strong {
  display: block;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.35;
}

.docs-path-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.doc-tile-shot {
  height: 118px;
  margin: -4px -4px 16px;
  overflow: hidden;
  border: 1px solid rgba(203, 215, 230, 0.8);
  border-radius: 8px;
  background: #0f172a;
}

.solution-overview-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.7fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid rgba(203, 215, 230, 0.92);
  border-radius: 8px;
  background:
    radial-gradient(circle at 82% 18%, rgba(36, 87, 166, 0.12), transparent 28%),
    #ffffff;
  box-shadow: 0 18px 48px rgba(28, 40, 56, 0.08);
}

.solution-overview-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(203, 215, 230, 0.9);
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0 18px 42px rgba(28, 40, 56, 0.08);
}

.solution-proof-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.solution-proof-grid span {
  padding: 8px 12px;
  border: 1px solid rgba(15, 118, 110, 0.2);
  border-radius: 999px;
  color: var(--brand-strong);
  font-size: 13px;
  font-weight: 780;
  background: #e9f7f4;
}

.scenario-card span,
.resource-card span,
.solution-card span {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #edf6f4;
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 800;
}

.scenario-card p,
.resource-card p,
.solution-card p {
  color: var(--muted);
  line-height: 1.75;
}

.doc-tile {
  display: flex;
  min-height: 144px;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
}

.doc-tile span {
  color: var(--muted);
  font-size: 13px;
}

.doc-tile strong {
  line-height: 1.55;
}

.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
  background: #ffffff;
}

.contact-note {
  display: grid;
  gap: 8px;
  margin-top: 28px;
  padding: 20px;
}

.contact-note span {
  color: var(--muted);
  line-height: 1.7;
}

.product-hero {
  position: relative;
  grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1.14fr);
  align-items: center;
  min-height: min(780px, 92vh);
  overflow: hidden;
  border-bottom: 1px solid rgba(196, 211, 228, 0.78);
  background:
    linear-gradient(180deg, #020308 0%, #0a0d18 44px, rgba(247, 250, 252, 0.96) 150px, rgba(247, 250, 252, 0) 240px),
    linear-gradient(120deg, rgba(255, 255, 255, 0.94) 0 42%, rgba(235, 244, 248, 0.7) 42% 100%),
    radial-gradient(circle at 78% 22%, rgba(15, 118, 110, 0.16), transparent 34%),
    radial-gradient(circle at 62% 78%, rgba(36, 87, 166, 0.11), transparent 32%),
    #f7fafc;
}

.product-hero::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.13) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, transparent 0%, #000 36%, #000 100%);
  content: "";
}

.product-hero > * {
  position: relative;
  z-index: 1;
}

.product-hero h1 {
  max-width: 760px;
  margin-bottom: 24px;
  font-size: clamp(40px, 5.1vw, 72px);
}

.product-hero h1 span {
  display: block;
}

.product-hero-copy {
  padding-block: 24px;
}

.hero-signals {
  display: grid;
  max-width: 760px;
  margin-top: 28px;
  border: 1px solid rgba(203, 215, 230, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 46px rgba(28, 40, 56, 0.08);
}

.hero-signals div {
  display: grid;
  gap: 5px;
  padding: 18px 20px;
}

.hero-signals div + div {
  border-top: 1px solid rgba(203, 215, 230, 0.7);
}

.hero-signals strong {
  font-size: 15px;
}

.hero-signals span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.hero-console {
  perspective: 1200px;
}

.screenshot-showcase {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(165, 181, 202, 0.72);
  border-radius: 8px;
  background: #0f172a;
  box-shadow:
    0 32px 90px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.38) inset;
}

.hero-shot {
  transform: rotateX(2deg) rotateY(-3deg);
  transform-origin: center;
}

.screenshot-showcase figcaption,
.docs-preview figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.55;
}

.screenshot-showcase figcaption {
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.96);
}

.screenshot-showcase figcaption strong,
.docs-preview figcaption strong {
  flex: 0 0 auto;
  color: #f8fafc;
  font-size: 14px;
}

.screenshot-showcase figcaption span,
.docs-preview figcaption span {
  color: rgba(203, 213, 225, 0.78);
}

.console-frame {
  overflow: hidden;
  border: 1px solid rgba(165, 181, 202, 0.72);
  border-radius: 8px;
  background: #0f172a;
  box-shadow:
    0 32px 90px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.38) inset;
  transform: rotateX(2deg) rotateY(-3deg);
  transform-origin: center;
}

.console-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  background: rgba(15, 23, 42, 0.96);
  color: #cbd5e1;
}

.console-topbar .workspace-title {
  color: #dbeafe;
}

.console-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(230px, 0.85fr);
  grid-auto-rows: minmax(190px, auto);
  gap: 14px;
  padding: 18px;
  background:
    radial-gradient(circle at 20% 12%, rgba(45, 212, 191, 0.12), transparent 30%),
    radial-gradient(circle at 88% 88%, rgba(96, 165, 250, 0.12), transparent 28%),
    #101827;
}

.visual-panel {
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.78);
  color: #e5edf8;
}

.visual-panel::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 36%),
    linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  content: "";
}

.panel-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.panel-title span {
  color: #9fb3cc;
  font-size: 12px;
  font-weight: 800;
}

.panel-title strong {
  color: #f8fafc;
  font-size: 18px;
}

.health-map {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 132px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.node {
  display: grid;
  place-items: center;
  min-height: 56px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 760;
  background: rgba(30, 41, 59, 0.82);
}

.node-ok {
  border-color: rgba(45, 212, 191, 0.48);
  box-shadow: 0 0 32px rgba(45, 212, 191, 0.12) inset;
}

.node-warn {
  border-color: rgba(251, 191, 36, 0.52);
  box-shadow: 0 0 32px rgba(251, 191, 36, 0.12) inset;
}

.node-info {
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 32px rgba(96, 165, 250, 0.12) inset;
}

.incident-timeline {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.incident-timeline li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.5;
}

.incident-timeline li span {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #5eead4;
  box-shadow: 0 0 18px rgba(94, 234, 212, 0.5);
}

.compute-bars {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 11px;
  margin-bottom: 18px;
}

.compute-bars span {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.82);
}

.compute-bars span::before {
  display: block;
  width: var(--bar);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2dd4bf, #93c5fd);
  content: "";
}

.visual-compute p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #9fb3cc;
  font-size: 13px;
  line-height: 1.65;
}

.model-chips {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.model-chips span {
  padding: 8px 10px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  color: #dbeafe;
  font-size: 12px;
  font-weight: 720;
  background: rgba(30, 41, 59, 0.82);
}

.entry-section {
  display: grid;
  grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.entry-heading {
  position: sticky;
  top: 104px;
}

.entry-heading h2 {
  margin-bottom: 0;
}

.entry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.entry-card {
  display: grid;
  min-height: 210px;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.entry-card:hover {
  transform: translateY(-3px);
  border-color: rgba(15, 118, 110, 0.32);
  box-shadow: 0 18px 42px rgba(20, 32, 51, 0.09);
}

.entry-card span {
  color: var(--accent);
  font-size: 12px;
  font-weight: 840;
}

.entry-card strong {
  font-size: 19px;
  line-height: 1.35;
}

.entry-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.entry-card-strong {
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.94), rgba(36, 87, 166, 0.86)),
    var(--brand);
  color: #ffffff;
}

.entry-card-strong span,
.entry-card-strong p {
  color: rgba(255, 255, 255, 0.78);
}

.dual-platform-section {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 8% 16%, rgba(15, 118, 110, 0.1), transparent 30%),
    radial-gradient(circle at 92% 74%, rgba(36, 87, 166, 0.1), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
}

.dual-platform-section::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  content: "";
}

.dual-platform-section > * {
  position: relative;
  z-index: 1;
}

.dual-platform-heading {
  max-width: 940px;
  margin-bottom: 34px;
}

.dual-platform-heading h2 {
  max-width: 760px;
}

.dual-platform-heading p {
  max-width: 860px;
}

.dual-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 28px);
  align-items: stretch;
}

.platform-story-card {
  position: relative;
  display: grid;
  min-height: 680px;
  grid-template-rows: auto 1fr auto auto;
  gap: 24px;
  overflow: hidden;
  padding: clamp(24px, 3.2vw, 38px);
  border-radius: 8px;
  isolation: isolate;
}

.platform-story-card::before,
.platform-story-card::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.platform-story-ai {
  border: 1px solid rgba(94, 234, 212, 0.24);
  background:
    radial-gradient(circle at 50% 44%, rgba(94, 234, 212, 0.18), transparent 24%),
    radial-gradient(circle at 12% 18%, rgba(96, 165, 250, 0.16), transparent 28%),
    linear-gradient(160deg, #09111f 0%, #101827 52%, #071017 100%);
  color: #f8fafc;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
}

.platform-story-ai::before {
  inset: 0;
  z-index: -1;
  opacity: 0.62;
  background:
    linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.22), transparent) 50% 45% / 100% 1px no-repeat,
    linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  mask-image: radial-gradient(circle at 50% 44%, #000 0 46%, transparent 78%);
}

.platform-story-ai::after {
  inset: 18% -22% auto auto;
  z-index: -1;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 234, 212, 0.16), transparent 62%);
  animation: platformAiGlow 6s ease-in-out infinite;
}

.platform-story-ops {
  border: 1px solid rgba(203, 215, 230, 0.9);
  background:
    radial-gradient(circle at 88% 16%, rgba(180, 83, 9, 0.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(28, 40, 56, 0.1);
}

.platform-story-ops::before {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(15, 118, 110, 0.08) 0 26%, transparent 26% 100%),
    repeating-linear-gradient(
      0deg,
      transparent 0 39px,
      rgba(203, 215, 230, 0.44) 40px,
      transparent 41px
    );
  opacity: 0.72;
}

.platform-story-ops::after {
  right: -80px;
  bottom: -90px;
  z-index: -1;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 118, 110, 0.12), transparent 65%);
  animation: platformOpsPulse 5.4s ease-in-out infinite;
}

.platform-story-copy {
  position: relative;
  z-index: 2;
  display: grid;
  order: 1;
  gap: 18px;
  max-width: 620px;
}

.platform-story-index {
  width: max-content;
  max-width: 100%;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 860;
  line-height: 1;
}

.platform-story-ai .platform-story-index {
  color: #a7f3d0;
  background: rgba(20, 184, 166, 0.16);
}

.platform-story-ops .platform-story-index {
  color: var(--brand-strong);
  background: #e9f7f4;
}

.platform-story-card h3 {
  margin: 0;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.06;
  letter-spacing: 0;
}

.platform-story-copy p {
  max-width: 600px;
  margin: 0;
  line-height: 1.82;
}

.platform-story-ai .platform-story-copy p {
  color: rgba(226, 232, 240, 0.78);
}

.platform-story-ops .platform-story-copy p {
  color: var(--muted);
}

.platform-story-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.platform-story-tags span {
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 760;
}

.platform-story-ai .platform-story-tags span {
  border: 1px solid rgba(94, 234, 212, 0.2);
  color: #d9fffb;
  background: rgba(15, 23, 42, 0.58);
}

.platform-story-ops .platform-story-tags span {
  border: 1px solid rgba(203, 215, 230, 0.92);
  color: #26364c;
  background: #ffffff;
}

.platform-story-link {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-weight: 820;
}

.platform-story-link::after {
  content: "->";
}

.platform-story-ai .platform-story-link {
  color: #a7f3d0;
}

.platform-story-ops .platform-story-link {
  color: var(--brand-strong);
}

.platform-story-visual {
  position: relative;
  z-index: 1;
  order: 3;
  min-height: 280px;
}

.ai-foundation-orbit {
  align-self: center;
  min-height: 320px;
}

.orbit-ring,
.orbit-core,
.orbit-node {
  position: absolute;
  border-radius: 50%;
}

.orbit-ring {
  inset: 50% auto auto 50%;
  border: 1px solid rgba(94, 234, 212, 0.22);
  transform: translate(-50%, -50%);
}

.orbit-ring-one {
  width: min(72%, 360px);
  aspect-ratio: 1;
  animation: orbitRotate 16s linear infinite;
}

.orbit-ring-two {
  width: min(92%, 460px);
  aspect-ratio: 1;
  border-style: dashed;
  border-color: rgba(147, 197, 253, 0.24);
  animation: orbitRotateReverse 24s linear infinite;
}

.orbit-ring-three {
  width: min(52%, 260px);
  aspect-ratio: 1;
  border-color: rgba(255, 255, 255, 0.18);
  animation: orbitBreathe 4.8s ease-in-out infinite;
}

.orbit-core {
  top: 50%;
  left: 50%;
  display: grid;
  width: 118px;
  height: 118px;
  place-items: center;
  color: #ecfeff;
  font-size: 34px;
  font-weight: 920;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), transparent 38%),
    linear-gradient(135deg, rgba(20, 184, 166, 0.94), rgba(37, 99, 235, 0.82));
  box-shadow:
    0 0 42px rgba(94, 234, 212, 0.34),
    inset 0 0 30px rgba(255, 255, 255, 0.14);
  transform: translate(-50%, -50%);
}

.orbit-node {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border: 1px solid rgba(94, 234, 212, 0.28);
  color: #d9fffb;
  font-size: 13px;
  font-weight: 820;
  background: rgba(15, 23, 42, 0.86);
  box-shadow: 0 0 28px rgba(94, 234, 212, 0.14);
}

.orbit-node-model {
  top: 12%;
  left: 52%;
}

.orbit-node-compute {
  top: 44%;
  right: 10%;
}

.orbit-node-api {
  bottom: 12%;
  left: 44%;
}

.orbit-node-knowledge {
  top: 42%;
  left: 10%;
}

.ops-flow-board {
  display: grid;
  min-height: 320px;
  align-content: center;
  gap: 18px;
  padding: 22px 0 10px;
}

.ops-flow-line {
  position: absolute;
  top: 50%;
  right: 8%;
  left: 8%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, var(--brand), rgba(36, 87, 166, 0.82));
}

.ops-flow-step {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(78%, 420px);
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid rgba(203, 215, 230, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 32px rgba(28, 40, 56, 0.08);
  animation: opsStepFloat 5s ease-in-out infinite;
}

.ops-flow-step:nth-child(2),
.ops-flow-step:nth-child(4) {
  justify-self: start;
}

.ops-flow-step:nth-child(3),
.ops-flow-step:nth-child(5) {
  justify-self: end;
  animation-delay: 420ms;
}

.ops-flow-step strong {
  font-size: 20px;
}

.ops-flow-step span {
  color: var(--muted);
  font-size: 13px;
}

.ops-flow-step.is-hot {
  border-color: rgba(180, 35, 24, 0.22);
  box-shadow: 0 14px 32px rgba(180, 35, 24, 0.08);
}

.ops-flow-step.is-done {
  border-color: rgba(15, 118, 110, 0.28);
  background: #f4fbf9;
}

.platform-story-metrics {
  position: relative;
  z-index: 2;
  display: grid;
  order: 4;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.platform-story-metrics div {
  display: grid;
  gap: 5px;
  min-height: 94px;
  align-content: center;
  padding: 14px;
  border-radius: 8px;
}

.platform-story-metrics strong {
  font-size: 18px;
}

.platform-story-metrics span {
  font-size: 12px;
  line-height: 1.45;
}

.ai-metrics div {
  border: 1px solid rgba(94, 234, 212, 0.16);
  background: rgba(15, 23, 42, 0.68);
}

.ai-metrics span {
  color: rgba(226, 232, 240, 0.68);
}

.ops-metrics div {
  border: 1px solid rgba(203, 215, 230, 0.82);
  background: rgba(255, 255, 255, 0.88);
}

.ops-metrics span {
  color: var(--muted);
}

.platform-subproducts {
  position: relative;
  z-index: 2;
  display: grid;
  order: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.platform-subproducts a {
  display: grid;
  min-height: 156px;
  gap: 9px;
  align-content: start;
  padding: 18px;
  border-radius: 8px;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.platform-subproducts a:hover {
  transform: translateY(-3px);
}

.platform-subproducts span {
  width: max-content;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 860;
  line-height: 1;
}

.platform-subproducts strong {
  font-size: 18px;
  line-height: 1.32;
}

.platform-subproducts p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

.platform-story-ai .platform-subproducts a {
  border: 1px solid rgba(94, 234, 212, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent),
    rgba(15, 23, 42, 0.72);
}

.platform-story-ai .platform-subproducts a:hover {
  border-color: rgba(94, 234, 212, 0.42);
  box-shadow: 0 18px 42px rgba(45, 212, 191, 0.1);
}

.platform-story-ai .platform-subproducts span {
  color: #a7f3d0;
  background: rgba(20, 184, 166, 0.15);
}

.platform-story-ai .platform-subproducts p {
  color: rgba(226, 232, 240, 0.68);
}

.platform-story-ops .platform-subproducts a {
  border: 1px solid rgba(203, 215, 230, 0.92);
  background: rgba(255, 255, 255, 0.9);
}

.platform-story-ops .platform-subproducts a:hover {
  border-color: rgba(15, 118, 110, 0.34);
  box-shadow: 0 18px 42px rgba(28, 40, 56, 0.08);
}

.platform-story-ops .platform-subproducts span {
  color: var(--brand-strong);
  background: #e9f7f4;
}

.platform-story-ops .platform-subproducts p {
  color: var(--muted);
}

@keyframes platformAiGlow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.92;
    transform: scale(1.08);
  }
}

@keyframes platformOpsPulse {
  0%,
  100% {
    opacity: 0.52;
    transform: translate(0, 0) scale(0.98);
  }

  50% {
    opacity: 0.86;
    transform: translate(-12px, -10px) scale(1.08);
  }
}

@keyframes orbitRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes orbitRotateReverse {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

@keyframes orbitBreathe {
  0%,
  100% {
    opacity: 0.54;
    transform: translate(-50%, -50%) scale(0.96);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes opsStepFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.product-line-section {
  background:
    linear-gradient(180deg, #f6f8fb 0%, #ffffff 38%, #f8fafc 100%);
}

.split-heading {
  display: grid;
  max-width: none;
  grid-template-columns: minmax(0, 0.72fr) minmax(300px, 0.48fr);
  gap: clamp(28px, 6vw, 84px);
  align-items: end;
}

.split-heading > p {
  margin-bottom: 4px;
}

.product-line-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.product-line-card {
  display: flex;
  min-height: 460px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(28, 40, 56, 0.06);
}

.product-line-card-featured {
  background:
    linear-gradient(180deg, rgba(15, 118, 110, 0.07), rgba(255, 255, 255, 0) 42%),
    #ffffff;
  border-color: rgba(15, 118, 110, 0.28);
}

.product-line-card-knowledge {
  background:
    linear-gradient(180deg, rgba(36, 87, 166, 0.07), rgba(255, 255, 255, 0) 42%),
    #ffffff;
  border-color: rgba(36, 87, 166, 0.22);
}

.product-line-card h3 {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.18;
}

.product-line-card p:not(.card-kicker) {
  color: var(--muted);
  line-height: 1.75;
}

.product-line-card .text-link {
  margin-top: auto;
}

.product-card-visual {
  position: relative;
  display: grid;
  min-height: 168px;
  margin-bottom: 24px;
  overflow: hidden;
  border: 1px solid rgba(203, 215, 230, 0.84);
  border-radius: 8px;
  background: #f8fafc;
}

.shot-card-visual {
  display: block;
  min-height: 0;
  aspect-ratio: 16 / 10;
  background: #0f172a;
}

.shot-card-visual img {
  height: 100%;
  object-fit: cover;
  object-position: left top;
  transition: transform 220ms ease;
}

.product-line-card:hover .shot-card-visual img {
  transform: scale(1.025);
}

.ai-foundation-visual {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
}

.ai-foundation-visual span {
  display: grid;
  place-items: center;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 8px;
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 800;
  background: #ffffff;
}

.appliance-visual {
  align-content: center;
  gap: 12px;
  padding: 22px;
  background:
    radial-gradient(circle at 76% 24%, rgba(45, 212, 191, 0.18), transparent 30%),
    #101827;
}

.rack-unit {
  height: 32px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(45, 212, 191, 0.36), transparent 18%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    #1e293b;
}

.rack-light {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 26px rgba(94, 234, 212, 0.8);
}

.ops-visual {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
}

.ops-visual span {
  border: 1px solid rgba(36, 87, 166, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(36, 87, 166, 0.13), rgba(255, 255, 255, 0)),
    #ffffff;
}

.appliance-band {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 0.74fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-top: 24px;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgba(15, 118, 110, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(10, 45, 52, 0.96), rgba(18, 40, 72, 0.93)),
    #10202b;
  color: #f8fafc;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}

.appliance-copy .eyebrow {
  color: #8ee6dd;
}

.appliance-copy h3 {
  max-width: 780px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
}

.appliance-copy p {
  max-width: 860px;
  color: rgba(226, 232, 240, 0.78);
  font-size: 16px;
  line-height: 1.82;
}

.appliance-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.appliance-tags span {
  padding: 8px 12px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  color: #dffdf8;
  font-size: 13px;
  font-weight: 760;
  background: rgba(15, 23, 42, 0.32);
}

.appliance-map {
  position: relative;
  display: grid;
  gap: 24px;
  min-height: 280px;
  align-content: center;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 48%, rgba(94, 234, 212, 0.18), transparent 30%),
    rgba(15, 23, 42, 0.38);
}

.appliance-shot {
  display: block;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  background: #0f172a;
  box-shadow: 0 20px 60px rgba(2, 6, 23, 0.28);
}

.appliance-shot img {
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  object-position: center;
}

.appliance-node {
  display: grid;
  width: 148px;
  height: 148px;
  place-items: center;
  justify-self: center;
  border: 1px solid rgba(94, 234, 212, 0.5);
  border-radius: 50%;
  color: #ecfeff;
  font-weight: 840;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.18), transparent 34%),
    rgba(20, 184, 166, 0.16);
  box-shadow:
    0 0 44px rgba(94, 234, 212, 0.18),
    0 0 0 14px rgba(94, 234, 212, 0.05);
}

.appliance-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(148, 244, 232, 0.72), transparent);
}

.appliance-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.appliance-services span {
  display: grid;
  min-height: 42px;
  place-items: center;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 8px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 760;
  background: rgba(15, 23, 42, 0.36);
}

.solution-section {
  border-block: 1px solid var(--line);
  background:
    linear-gradient(180deg, #ffffff 0%, #eef4f8 100%);
}

.solution-layout,
.ai-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.42fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.solution-copy p,
.ai-copy p {
  color: var(--muted);
  line-height: 1.85;
}

.solution-path {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.solution-path article {
  min-height: 210px;
  padding: 24px;
  border: 1px solid rgba(203, 215, 230, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 16px 40px rgba(28, 40, 56, 0.06);
}

.solution-path span {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 8px;
  color: var(--brand-strong);
  background: #e9f7f4;
  font-weight: 840;
}

.solution-path strong {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
}

.solution-path p {
  margin: 0;
  color: var(--muted);
  line-height: 1.72;
}

.scenario-showcase {
  background: #101827;
  color: #f8fafc;
}

.scenario-showcase .eyebrow {
  color: #8ee6dd;
}

.scenario-showcase .section-heading p {
  color: rgba(226, 232, 240, 0.72);
}

.scenario-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.scenario-feature {
  display: flex;
  min-height: 440px;
  flex-direction: column;
  padding: 20px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
    #111c2d;
}

.scenario-feature > span {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin: 20px 0 14px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #a7f3d0;
  font-size: 12px;
  font-weight: 820;
  background: rgba(20, 184, 166, 0.14);
}

.scenario-feature h3 {
  color: #f8fafc;
  font-size: 22px;
  line-height: 1.25;
}

.scenario-feature p {
  margin: 0;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.72;
}

.scenario-visual {
  position: relative;
  min-height: 154px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.74);
}

.scenario-shot {
  margin: 0;
  min-height: 0;
  aspect-ratio: 16 / 10;
}

.scenario-shot::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 42%, rgba(15, 23, 42, 0.5) 100%),
    radial-gradient(circle at 20% 10%, rgba(94, 234, 212, 0.18), transparent 28%);
  content: "";
}

.scenario-shot img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.88;
}

.network-visual span {
  position: absolute;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(94, 234, 212, 0.55);
  border-radius: 50%;
  background: rgba(94, 234, 212, 0.12);
}

.network-visual span:nth-child(1) {
  top: 22px;
  left: 22px;
}

.network-visual span:nth-child(2) {
  top: 30px;
  right: 28px;
}

.network-visual span:nth-child(3) {
  right: 78px;
  bottom: 22px;
}

.network-visual span:nth-child(4) {
  bottom: 32px;
  left: 58px;
}

.network-visual::after {
  position: absolute;
  inset: 42px 44px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  transform: skew(-14deg);
  content: "";
}

.business-visual {
  display: grid;
  align-content: end;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 20px;
}

.business-visual span {
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #5eead4, rgba(94, 234, 212, 0.2));
}

.business-visual span:nth-child(1) {
  height: 86px;
}

.business-visual span:nth-child(2) {
  height: 118px;
}

.business-visual span:nth-child(3) {
  height: 64px;
}

.ai-visual {
  display: grid;
  place-items: center;
}

.ai-visual span:first-child {
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  border: 1px solid rgba(94, 234, 212, 0.55);
  border-radius: 50%;
  color: #ccfbf1;
  font-weight: 900;
  background: rgba(20, 184, 166, 0.13);
  box-shadow: 0 0 42px rgba(94, 234, 212, 0.15);
}

.ai-visual span:not(:first-child) {
  position: absolute;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(147, 197, 253, 0.7), transparent);
}

.ai-visual span:nth-child(2) {
  transform: rotate(28deg);
}

.ai-visual span:nth-child(3) {
  transform: rotate(-32deg);
}

.ops-incident-visual {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 20px;
}

.ops-incident-visual span {
  height: 18px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.24);
}

.ops-incident-visual span:nth-child(1),
.ops-incident-visual span:nth-child(3) {
  width: 76%;
  background: rgba(94, 234, 212, 0.38);
}

.ops-incident-visual span:nth-child(2) {
  width: 56%;
}

.ops-incident-visual span:nth-child(4) {
  width: 88%;
}

.ai-diagnostic-section {
  background:
    radial-gradient(circle at 84% 20%, rgba(15, 118, 110, 0.12), transparent 32%),
    #ffffff;
}

.ai-case-board {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  box-shadow: 0 18px 48px rgba(28, 40, 56, 0.08);
}

.case-board-shot {
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid rgba(203, 215, 230, 0.88);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(28, 40, 56, 0.08);
}

.case-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.case-header strong {
  font-size: 20px;
}

.case-header span {
  padding: 7px 10px;
  border-radius: 999px;
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 820;
  background: #e9f7f4;
}

.case-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.case-columns div {
  min-height: 170px;
  padding: 18px;
  border: 1px solid rgba(203, 215, 230, 0.82);
  border-radius: 8px;
  background: #ffffff;
}

.case-columns span {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 840;
  text-transform: uppercase;
}

.case-columns p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.docs-resource-section {
  background:
    linear-gradient(180deg, #f6f8fb 0%, #ffffff 100%);
  border-top: 1px solid var(--line);
}

.docs-preview {
  max-width: 980px;
  margin: -12px auto 28px;
  overflow: hidden;
  border: 1px solid rgba(203, 215, 230, 0.9);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(28, 40, 56, 0.08);
}

.docs-preview figcaption {
  border-top: 1px solid var(--line);
  background: #ffffff;
}

.docs-preview figcaption strong {
  color: var(--ink);
}

.docs-preview figcaption span {
  color: var(--muted);
}

.docs-entry-grid .doc-tile {
  min-height: 172px;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.docs-entry-grid .doc-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 118, 110, 0.3);
  box-shadow: 0 16px 40px rgba(28, 40, 56, 0.08);
}

.doc-tile-cta {
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(36, 87, 166, 0.88));
  color: #ffffff;
}

.doc-tile-cta span {
  color: rgba(255, 255, 255, 0.74);
}

.contact-conversion-section {
  border-top: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 16%, rgba(15, 118, 110, 0.12), transparent 28%),
    linear-gradient(180deg, #ffffff, #f6f8fb);
}

.lead-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 16px 44px rgba(28, 40, 56, 0.08);
}

.lead-form label {
  display: grid;
  gap: 8px;
  color: #26364c;
  font-size: 14px;
  font-weight: 720;
}

.lead-form .full {
  grid-column: 1 / -1;
}

.lead-trap-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #cbd7e6;
  border-radius: 7px;
  background: #fbfdff;
  color: var(--ink);
  outline: none;
}

.lead-form input,
.lead-form select {
  height: 44px;
  padding: 0 12px;
}

.lead-form textarea {
  resize: vertical;
  padding: 12px;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.form-message {
  grid-column: 1 / -1;
  min-height: 22px;
  margin: 0;
  color: var(--brand-strong);
  line-height: 1.6;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 30px clamp(20px, 5vw, 72px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: #ffffff;
}

.site-footer div,
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.site-footer strong {
  color: var(--ink);
}

body.js-enabled [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 420ms ease,
    transform 420ms ease;
}

body.js-enabled [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .site-header {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 14px 18px;
  }

  .menu-toggle {
    display: inline-flex;
    margin-left: 12px;
  }

  .site-nav {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 8px;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 10px 0;
  }

  .site-nav a::after {
    display: none;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
    order: 3;
  }
}

@media (max-width: 1120px) {
  .hero,
  .contact-section,
  .page-hero,
  .split-section,
  .doc-layout,
  .entry-section,
  .split-heading,
  .appliance-band,
  .solution-layout,
  .ai-layout,
  .resource-feature-band,
  .docs-hub-hero,
  .solution-overview-panel,
  .dual-platform-grid {
    grid-template-columns: 1fr;
  }

  .sticky-rail,
  .doc-nav,
  .entry-heading {
    position: static;
  }

  .product-visual {
    max-width: 860px;
  }

  .product-hero {
    min-height: auto;
  }

  .console-frame {
    transform: none;
  }

  .hero-shot {
    transform: none;
  }

  .entry-grid,
  .product-line-grid,
  .scenario-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-grid,
  .docs-grid,
  .scenario-grid,
  .resource-grid,
  .solution-grid,
  .resource-roadmap,
  .step-grid,
  .docs-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chain {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-panel {
    grid-template-columns: 1fr;
  }

  .roadmap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .roadmap-step::after {
    display: none;
  }
}

@media (max-width: 760px) {
  .site-header {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 14px 18px;
  }

  .menu-toggle {
    display: inline-flex;
    margin-left: 12px;
  }

  .site-nav {
    display: none;
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding-top: 8px;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 10px 0;
  }

  .site-nav a::after {
    display: none;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
    order: 3;
  }

  .hero {
    width: 100%;
    min-width: 0;
    min-height: auto;
  }

  .hero > *,
  .section > *,
  .section-band > * {
    min-width: 0;
    max-width: 100%;
  }

  .hero-metrics,
  .hero-signals,
  .platform-story-metrics,
  .platform-subproducts,
  .capability-grid,
  .docs-grid,
  .scenario-grid,
  .resource-grid,
  .solution-grid,
  .resource-roadmap,
  .chain,
  .lead-form,
  .compact-grid,
  .roadmap,
  .two-column-grid,
  .docs-home-grid,
  .step-grid,
  .entry-grid,
  .product-line-grid,
  .solution-path,
  .scenario-feature-grid,
  .case-columns,
  .console-grid,
  .docs-path-grid {
    grid-template-columns: 1fr;
  }

  .hero-metrics div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .product-hero {
    background:
      linear-gradient(180deg, #020308 0%, #0a0d18 44px, rgba(247, 250, 252, 0.96) 150px, rgba(247, 250, 252, 0) 240px),
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 249, 0.86)),
      #f7fafc;
  }

  .product-hero h1 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .hero-signals div + div {
    border-top: 1px solid rgba(203, 215, 230, 0.7);
  }

  .console-grid {
    grid-auto-rows: auto;
    padding: 14px;
  }

  .visual-panel {
    min-height: 148px;
    padding: 16px;
  }

  .visual-panel:nth-child(n + 3) {
    min-height: 132px;
  }

  .health-map {
    min-height: auto;
  }

  .entry-card,
  .product-line-card,
  .platform-story-card,
  .scenario-feature {
    min-height: auto;
  }

  .dual-platform-heading {
    margin-bottom: 24px;
  }

  .platform-story-card {
    gap: 20px;
    padding: 24px;
  }

  .platform-story-visual {
    min-height: 250px;
  }

  .ai-foundation-orbit,
  .ops-flow-board {
    min-height: 260px;
  }

  .orbit-core {
    width: 96px;
    height: 96px;
    font-size: 28px;
  }

  .orbit-node {
    width: 66px;
    height: 66px;
    font-size: 12px;
  }

  .ops-flow-step {
    width: min(86%, 360px);
    padding: 15px 16px;
  }

  .appliance-band {
    padding: 24px;
  }

  .appliance-services {
    grid-template-columns: 1fr;
  }

  .product-visual {
    width: 100%;
    overflow: hidden;
    padding-bottom: 8px;
  }

  .platform-shell {
    min-width: 0;
  }

  .platform-map {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    min-width: 0;
  }

  .platform-map::before {
    inset: 10px;
  }

  .platform-column {
    padding: 18px;
  }

  .platform-bridge {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .platform-bridge span {
    min-height: 34px;
  }

  .platform-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .platform-flow span {
    min-height: 42px;
    font-size: 12px;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .switcher-tabs {
    flex-direction: column;
  }

  .product-panel {
    padding: 20px;
  }
}

@media (max-width: 560px) {
  .site-header {
    gap: 12px;
    padding: 12px 16px;
  }

  .brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .brand-name {
    font-size: 19px;
  }

  .menu-toggle {
    margin-left: auto;
  }

  .header-actions {
    display: none;
  }

  .console-link {
    display: none;
  }

  .section,
  .section-band {
    padding-inline: 16px;
  }

  h1 {
    width: 100%;
    max-width: 348px;
    font-size: 27px;
    line-height: 1.2;
  }

  .hero-lead {
    max-width: 348px;
    font-size: 16px;
    line-height: 1.72;
  }

  .hero-title-brand,
  .hero-title-main {
    display: block;
  }

  .product-hero h1 {
    max-width: none;
    font-size: clamp(34px, 10vw, 46px);
  }

  .hero-title-main {
    max-width: 348px;
    word-break: normal;
  }

  h2 {
    font-size: 28px;
  }

  .console-topbar {
    min-width: 0;
  }

  .console-topbar .workspace-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .status-pill {
    display: none;
  }

  .health-map,
  .ai-foundation-visual,
  .ops-visual {
    grid-template-columns: 1fr;
  }

  .product-card-visual,
  .scenario-visual {
    min-height: 130px;
  }

  .platform-story-card {
    padding: 22px 18px;
  }

  .platform-story-card h3 {
    font-size: clamp(28px, 9vw, 40px);
  }

  .platform-story-copy p {
    line-height: 1.72;
  }

  .platform-story-visual {
    min-height: 220px;
  }

  .ai-foundation-orbit,
  .ops-flow-board {
    min-height: 228px;
  }

  .orbit-ring-one {
    width: min(78%, 250px);
  }

  .orbit-ring-two {
    width: min(96%, 306px);
  }

  .orbit-ring-three {
    width: min(58%, 188px);
  }

  .orbit-core {
    width: 82px;
    height: 82px;
    font-size: 24px;
  }

  .orbit-node {
    width: 58px;
    height: 58px;
    font-size: 11px;
  }

  .orbit-node-model {
    top: 8%;
    left: 50%;
  }

  .orbit-node-compute {
    right: 2%;
  }

  .orbit-node-api {
    bottom: 8%;
    left: 42%;
  }

  .orbit-node-knowledge {
    left: 2%;
  }

  .ops-flow-board {
    gap: 12px;
  }

  .ops-flow-line {
    top: 48%;
    right: 50%;
    left: auto;
    width: 2px;
    height: 78%;
    background: linear-gradient(180deg, var(--brand), rgba(36, 87, 166, 0.82));
  }

  .ops-flow-step {
    width: min(94%, 320px);
    padding: 13px 14px;
  }

  .ops-flow-step strong {
    font-size: 17px;
  }

  .platform-story-metrics div,
  .platform-subproducts a {
    min-height: auto;
  }

  .screenshot-showcase figcaption,
  .docs-preview figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .page-hero-screenshot,
  .detail-shot,
  .docs-preview {
    border-radius: 8px;
  }

  .hero-console {
    margin-top: 4px;
  }

  .appliance-node {
    width: 126px;
    height: 126px;
    font-size: 14px;
  }

  .case-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 820px) {
  .launch-hero {
    min-height: 100svh;
    padding: 22px 18px;
  }

  .launch-content {
    --launch-orb-size: min(90vw, 420px);
    --launch-corona-spread: min(38vw, 150px);
    width: min(390px, 100%);
  }

  .launch-globe-hit {
    cursor: default;
    pointer-events: none;
  }

  .launch-content::before {
    box-shadow:
      0 0 46px rgba(117, 230, 255, 0.1),
      inset 0 0 48px rgba(111, 140, 255, 0.08);
  }

  .launch-content::after {
    display: none;
  }

  .launch-globe {
    display: block;
    opacity: 0;
    filter: none;
    mix-blend-mode: screen;
  }

  .launch-globe::before,
  .launch-globe::after,
  .launch-ripple,
  .launch-corona {
    display: none;
  }

  .launch-globe .launch-ripple-one,
  .launch-globe .launch-corona-inner {
    display: block;
    filter: blur(18px) saturate(0.52);
  }

  .launch-globe .launch-ripple-one {
    background:
      radial-gradient(
        circle closest-side,
        transparent calc(var(--launch-corona-start) - 6px),
        rgba(255, 255, 255, 0.58) calc(var(--launch-corona-start) + 4px),
        rgba(203, 215, 228, 0.3) calc(var(--launch-corona-start) + 22px),
        transparent calc(var(--launch-corona-start) + 58px),
        transparent calc(var(--launch-corona-start) + 96px),
        rgba(255, 255, 255, 0.18) calc(var(--launch-corona-start) + 126px),
        transparent calc(var(--launch-corona-start) + 172px)
      );
  }

  .launch-globe .launch-corona-inner {
    background:
      conic-gradient(
        from -20deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.78) 22deg,
        rgba(203, 215, 228, 0.42) 44deg,
        transparent 86deg,
        rgba(188, 211, 230, 0.34) 132deg,
        transparent 182deg,
        rgba(255, 255, 255, 0.5) 250deg,
        transparent 332deg
      );
  }

  .launch-brand-mark {
    font-size: clamp(44px, 15vw, 72px);
    opacity: 0.76;
  }

  .launch-hero h1 {
    font-size: clamp(34px, 10.5vw, 48px);
    line-height: 0.95;
    text-shadow:
      0 0 20px rgba(117, 230, 255, 0.22),
      0 12px 38px rgba(0, 0, 0, 0.48);
  }

  .launch-platform {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 2px;
    column-gap: 0;
    flex-direction: column;
    gap: 2px;
  }

  .launch-platform-left,
  .launch-platform-right {
    justify-self: center;
    text-align: center;
  }

  .launch-platform {
    width: min(78vw, 304px);
    margin-top: 18px;
    font-size: clamp(15px, 4.2vw, 18px);
    line-height: 1.28;
  }

  .launch-platform span {
    display: block;
  }

  .launch-platform::before,
  .launch-platform::after {
    width: min(62vw, 260px);
  }

  .launch-soon {
    min-width: 112px;
    height: 34px;
    margin-top: 24px;
    font-size: 13px;
  }

  .launch-content .launch-globe,
  body[data-launch-mode="mobile-auto"] .launch-content .launch-globe,
  .launch-content.is-mobile-auto-active .launch-globe {
    animation: launchMobileGlow 4400ms ease-out both;
  }

  .launch-content .launch-ripple-one,
  body[data-launch-mode="mobile-auto"] .launch-content .launch-ripple-one,
  .launch-content.is-mobile-auto-active .launch-ripple-one {
    animation: launchMobileRipple 3600ms 160ms ease-out both;
  }

  .launch-content .launch-corona-inner,
  body[data-launch-mode="mobile-auto"] .launch-content .launch-corona-inner,
  .launch-content.is-mobile-auto-active .launch-corona-inner {
    animation: launchMobileCorona 3600ms 240ms ease-out both;
  }

  .launch-content .launch-platform::before,
  body[data-launch-mode="mobile-auto"] .launch-content .launch-platform::before,
  .launch-content.is-mobile-auto-active .launch-platform::before {
    animation: launchLightSweepFromLeft 1700ms 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .launch-content .launch-platform::after,
  body[data-launch-mode="mobile-auto"] .launch-content .launch-platform::after,
  .launch-content.is-mobile-auto-active .launch-platform::after {
    animation: launchLightSweepFromRight 1700ms 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .launch-content .launch-platform span:first-child,
  body[data-launch-mode="mobile-auto"] .launch-content .launch-platform span:first-child,
  .launch-content.is-mobile-auto-active .launch-platform span:first-child {
    animation: launchPlatformFromLeft 1280ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .launch-content .launch-platform-amp,
  body[data-launch-mode="mobile-auto"] .launch-content .launch-platform-amp,
  .launch-content.is-mobile-auto-active .launch-platform-amp {
    animation: launchAmpReveal 1080ms 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .launch-content .launch-platform span:last-child,
  body[data-launch-mode="mobile-auto"] .launch-content .launch-platform span:last-child,
  .launch-content.is-mobile-auto-active .launch-platform span:last-child {
    animation: launchPlatformFromRight 1280ms 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}

@keyframes launchMobileGlow {
  0%,
  100% {
    opacity: 0;
  }

  18% {
    opacity: 0.72;
  }

  72% {
    opacity: 0.5;
  }
}

@keyframes launchMobileRipple {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }

  24% {
    opacity: 0.68;
  }

  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes launchMobileCorona {
  0% {
    opacity: 0;
    transform: scale(0.98) rotate(-0.3deg);
  }

  24% {
    opacity: 0.52;
  }

  100% {
    opacity: 0;
    transform: scale(1.06) rotate(0.5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-story-ai::after,
  .platform-story-ops::after,
  .orbit-ring-one,
  .orbit-ring-two,
  .orbit-ring-three,
  .ops-flow-step {
    animation: none;
  }

  .launch-globe-hit {
    pointer-events: none;
  }

  .launch-content.is-globe-active .launch-globe,
  .launch-content.is-globe-active .launch-globe::before,
  .launch-content.is-globe-active .launch-globe::after,
  .launch-content.is-globe-active .launch-ripple,
  .launch-content.is-globe-active .launch-corona {
    animation: none;
    opacity: 0;
  }

  .launch-content.is-globe-active .launch-platform span:first-child,
  .launch-content.is-globe-active .launch-platform span:last-child,
  .launch-content.is-globe-active .launch-platform-amp,
  .launch-content.is-globe-active .launch-platform::before,
  .launch-content.is-globe-active .launch-platform::after {
    animation: none;
  }
}