:root {
  --bg: #f7f8fb;
  --bg2: #ffffff;
  --bgAlt: #f1f4f8;
  --panel: rgba(255, 255, 255, 0.82);
  --border: rgba(15, 23, 42, 0.12);
  --border2: rgba(15, 23, 42, 0.18);
  --text: rgba(10, 14, 20, 0.92);
  --muted: rgba(10, 14, 20, 0.68);
  --muted2: rgba(10, 14, 20, 0.52);
  --auraA: #22b3ff;
  --auraB: #7c3aed;
  --accent: linear-gradient(90deg, var(--auraA), var(--auraB));
  --accent2: rgba(124, 58, 237, 0.12);
  --shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
  --shadowSm: 0 12px 30px rgba(15, 23, 42, 0.12);
  --radius: 18px;
  --radius2: 12px;
  --max: 1160px;
  --topbarH: 34px;
  --topbarOffset: var(--topbarH);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  background-image: radial-gradient(60% 55% at 50% -10%, rgba(124, 58, 237, 0.10), transparent 55%),
    radial-gradient(55% 50% at 10% 0%, rgba(34, 179, 255, 0.10), transparent 55%);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}

body.navOpen {
  overflow: hidden;
}

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

.visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px;
  top: calc(12px + var(--topbarOffset));
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  transform: translateY(-140%);
  transition: transform 140ms ease-out;
  z-index: 1000;
}

.isTopbarHidden {
  --topbarOffset: 0px;
}

.topInfoBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbarH);
  z-index: 60;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.66));
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease-out;
  transform: translate3d(0, 0, 0);
}

.topInfoInner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.topInfoText {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(10, 14, 20, 0.62);
  letter-spacing: 0.01em;
}

.topInfoText::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.8), rgba(124, 58, 237, 0.76));
  box-shadow: 0 10px 20px rgba(124, 58, 237, 0.14), 0 10px 18px rgba(34, 179, 255, 0.10);
}

.isTopbarHidden .topInfoBar {
  transform: translate3d(0, -110%, 0);
  opacity: 0;
  pointer-events: none;
}

.skip:focus {
  transform: translateY(0);
}

.container {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}

.siteHeader {
  position: fixed;
  top: var(--topbarH);
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(247, 248, 251, 0.78);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#main {
  padding-top: calc(72px + var(--topbarH));
}

.isTopbarHidden .siteHeader {
  transform: translate3d(0, calc(-1 * var(--topbarH)), 0);
}

.siteHeader.isScrolled {
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
}

.headerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 220px;
}

.brandMark {
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: 14px;
}

.brandMeta {
  font-size: 12px;
  color: var(--muted2);
}

.siteHeader .brandMark {
  font-size: 15px;
  letter-spacing: 0.16em;
}

.siteHeader .brandMeta {
  letter-spacing: 0.02em;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.navToggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font-weight: 500;
  transition: background 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out;
}

.navToggle:hover {
  border-color: var(--border2);
  background: rgba(255, 255, 255, 0.72);
}

.navPanelHead {
  display: none;
}

.navClose {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(10, 14, 20, 0.86);
}

.navClose:hover {
  border-color: var(--border2);
  background: rgba(255, 255, 255, 0.86);
}

.navPanel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.navPanel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: var(--nav-h, 0px);
  width: var(--nav-w, 0px);
  transform: translate3d(var(--nav-x, 0px), calc(-50% + var(--nav-y, 0px)), 0);
  border-radius: 12px;
  background: var(--accent);
  box-shadow: 0 14px 34px rgba(124, 58, 237, 0.14), 0 12px 28px rgba(34, 179, 255, 0.10);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), width 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease-out;
  pointer-events: none;
  opacity: 0;
}

.navPanel.hasIndicator::before {
  opacity: 1;
}

.navBackdrop {
  display: none;
}

.navLink {
  position: relative;
  z-index: 1;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
  color: rgba(10, 14, 20, 0.78);
  transition: background 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out, transform 180ms ease-out;
}

.navLink::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.0;
  transform: scaleX(0.2);
  transform-origin: left;
  transition: transform 220ms ease-out, opacity 220ms ease-out;
}

.navLink:hover {
  background: rgba(255, 255, 255, 0.78);
  color: rgba(10, 14, 20, 0.92);
}

.navLink.isActive {
  color: #ffffff;
  background: transparent;
  border: none;
}

.navLink.isActive::after,
.navLink:hover::after {
  opacity: 0.72;
  transform: scaleX(1);
}

.navCtas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
}

.section {
  padding: 96px 0;
}

.sectionHero {
  padding: 92px 0 78px;
  position: relative;
  isolation: isolate;
}

.sectionHero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background: radial-gradient(60% 70% at var(--mx, 50%) var(--my, 20%), rgba(34, 179, 255, 0.16), transparent 56%),
    radial-gradient(50% 60% at 75% -10%, rgba(124, 58, 237, 0.12), transparent 60%);
  opacity: 0.65;
}

.sectionHero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: linear-gradient(to right, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(80% 72% at 50% 0%, black 0%, transparent 70%);
  opacity: 0.35;
}

.sectionHero .h1 {
  font-size: 46px;
  line-height: 1.04;
  letter-spacing: -0.024em;
  font-weight: 650;
  margin-bottom: 10px;
}

.heroBadge {
  position: relative;
  margin-bottom: 12px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)) padding-box,
    linear-gradient(90deg, rgba(34, 179, 255, 0.42), rgba(124, 58, 237, 0.34)) border-box;
  color: rgba(10, 14, 20, 0.74);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.08);
}

.sectionHero .lede {
  max-width: 50ch;
  color: rgba(10, 14, 20, 0.66);
  line-height: 1.55;
}

.sectionHero .heroCtas {
  margin-top: 16px;
  gap: 10px;
}

.heroPills {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 64ch;
}

.heroPill {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.74);
  color: rgba(10, 14, 20, 0.74);
  font-size: 13px;
  font-weight: 550;
  white-space: normal;
  max-width: 100%;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.06);
}

.heroPillIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.14), rgba(124, 58, 237, 0.12));
  color: rgba(10, 14, 20, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.heroPill:hover {
  border-color: rgba(124, 58, 237, 0.16);
  background: rgba(255, 255, 255, 0.86);
}

.heroVisual {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  isolation: isolate;
  --tiltX: 0deg;
  --tiltY: 0deg;
  --parX: 0px;
  --parY: 0px;
}

.heroVisual::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 55% at 22% 14%, rgba(34, 179, 255, 0.12), transparent 60%),
    radial-gradient(52% 46% at 78% 22%, rgba(124, 58, 237, 0.12), transparent 62%);
  opacity: 0.6;
  z-index: -1;
}

.heroVisual::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background: radial-gradient(36% 32% at 42% 38%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(34% 30% at 70% 56%, rgba(34, 179, 255, 0.14), transparent 72%),
    radial-gradient(30% 28% at 32% 70%, rgba(124, 58, 237, 0.12), transparent 72%);
  opacity: 0.45;
  filter: blur(0.2px);
  animation: heroGlow 13s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.heroVisualInner {
  padding: 18px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY));
  transition: transform 260ms ease-out;
  will-change: transform;
}

.heroVisualInner::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 18px;
  pointer-events: none;
  background: conic-gradient(
    from 220deg,
    rgba(34, 179, 255, 0.0),
    rgba(34, 179, 255, 0.18),
    rgba(124, 58, 237, 0.18),
    rgba(34, 179, 255, 0.0)
  );
  -webkit-mask: radial-gradient(closest-side, transparent 68%, black 70%, transparent 74%);
  mask: radial-gradient(closest-side, transparent 68%, black 70%, transparent 74%);
  opacity: 0.42;
  filter: blur(0.15px);
  animation: heroRing 18s linear infinite;
}

.heroVisualFloat {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: heroFloat 6.8s ease-in-out infinite;
  will-change: transform;
}

.heroVisualImg {
  width: min(560px, 100%);
  height: auto;
  max-width: 100%;
  display: block;
  filter: drop-shadow(0 34px 70px rgba(15, 23, 42, 0.14));
  transform: translate3d(var(--parX), var(--parY), 0) scale(1.01);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.heroVisual:hover .heroVisualInner {
  transform: perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY)) translateY(-2px);
}

@keyframes heroFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -7px, 0) scale(1.012);
  }
}

@keyframes heroGlow {
  0%,
  100% {
    transform: translate3d(-12px, -10px, 0);
  }
  50% {
    transform: translate3d(14px, 10px, 0);
  }
}

@keyframes heroRing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.sectionHero .btn {
  height: 44px;
  padding: 0 16px;
}

.sectionHero .btnPrimary {
  background-size: 180% 180%;
  background-position: 15% 50%;
  transition: background-position 260ms ease-out, transform 220ms ease-out, box-shadow 220ms ease-out;
}

.sectionHero .btnPrimary:hover {
  background-position: 95% 50%;
}

.sectionHero .btnSecondary {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(15, 23, 42, 0.14);
  color: rgba(10, 14, 20, 0.88);
}

.sectionHero .btnSecondary:hover {
  background: rgba(255, 255, 255, 0.86);
}

.specStrip {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.76);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.specItem {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.specItem + .specItem {
  padding-left: 14px;
  border-left: 1px solid rgba(15, 23, 42, 0.08);
}

.specKey {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
  white-space: nowrap;
}

.specValue {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: rgba(10, 14, 20, 0.84);
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.heroProductPanel {
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: var(--shadow);
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out;
}

.heroProductPanel:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.14);
}

.heroRpcPanel {
  gap: 12px;
}

.heroEndpointRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  flex-wrap: wrap;
}

.heroEndpointLabel {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 14, 20, 0.56);
  white-space: nowrap;
}

.heroEndpointValue {
  min-width: 0;
  overflow: auto;
  white-space: nowrap;
  padding-bottom: 2px;
  color: rgba(10, 14, 20, 0.8);
  flex: 1;
}

.heroRpcCode {
  margin: 0;
  padding: 13px 13px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.86);
  overflow: auto;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(10, 14, 20, 0.88);
}

.heroRpcCode code {
  font-family: inherit;
}

.heroRpcCode code::selection,
.heroRpcCode::selection {
  background: rgba(34, 179, 255, 0.18);
}

.heroTrust {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.heroSystem {
  position: relative;
  min-height: 520px;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  isolation: isolate;
  --tiltX: 0deg;
  --tiltY: 0deg;
}

.heroSystem::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 55% at 22% 14%, rgba(34, 179, 255, 0.12), transparent 60%),
    radial-gradient(52% 46% at 78% 22%, rgba(124, 58, 237, 0.12), transparent 62%);
  opacity: 0.65;
  z-index: -2;
}

.heroSystem::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 100%, rgba(15, 23, 42, 0.08), transparent 60%);
  z-index: -1;
}

.heroNetwork {
  position: absolute;
  inset: -50px;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
  mask-image: radial-gradient(78% 64% at 50% 30%, black 0%, transparent 70%);
}

.heroNetPath {
  fill: none;
  stroke: url(#heroNetGrad);
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.16;
  stroke-dasharray: 8 10;
  animation: heroNetDash 14s linear infinite;
}

.heroNetPathPrimary {
  stroke-width: 2.1;
  opacity: 0.24;
  stroke-dasharray: 10 14;
  animation-duration: 18s;
}

.heroNetNodes .heroNetNode {
  fill: url(#heroNetGrad);
  opacity: 0.28;
  transform-origin: center;
  animation: heroNetPulse 3.8s ease-in-out infinite;
}

.heroNetNodes .heroNetNode:nth-child(2n) {
  animation-delay: 0.8s;
}

.heroNetNodes .heroNetNode:nth-child(3n) {
  animation-delay: 1.4s;
}

@keyframes heroNetDash {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -260;
  }
}

@keyframes heroNetPulse {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.42;
    transform: scale(1.08);
  }
}

.heroFloat {
  position: absolute;
  pointer-events: auto;
}

.heroFloatInner {
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(10px);
  transform: perspective(900px) rotateX(var(--tiltX)) rotateY(var(--tiltY));
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out, background 240ms ease-out;
  will-change: transform;
}

.heroSystem:hover .heroNetPathPrimary {
  opacity: 0.3;
}

.heroSystem:hover .heroFloatInner {
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.14);
}

.heroFloatRelay {
  top: 16px;
  right: 16px;
}

.heroFloatApi {
  left: 52%;
  top: 52%;
  transform: translate(-50%, -50%);
  animation: heroFloatA 10.5s ease-in-out infinite;
}

.heroFloatMev {
  left: 18px;
  bottom: 18px;
  animation: heroFloatB 12s ease-in-out infinite;
}

@keyframes heroFloatA {
  0%,
  100% {
    transform: translate(-50%, -50%) translateY(-3px);
  }
  50% {
    transform: translate(-50%, -50%) translateY(7px);
  }
}

@keyframes heroFloatB {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.heroFloatPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 550;
  color: rgba(10, 14, 20, 0.84);
  border: 1px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)) padding-box,
    linear-gradient(90deg, rgba(34, 179, 255, 0.34), rgba(124, 58, 237, 0.28)) border-box;
}

.heroMiniIcon {
  display: inline-flex;
  color: rgba(10, 14, 20, 0.7);
}

.heroApiCard {
  width: min(420px, 92%);
  padding: 14px 14px 12px;
}

.heroApiTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.heroApiTitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(10, 14, 20, 0.68);
  font-weight: 650;
}

.heroApiMeta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.heroApiMethod {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 650;
  color: rgba(10, 14, 20, 0.82);
}

.heroApiDot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.45);
}

.heroApiRoute,
.heroApiHost {
  color: rgba(10, 14, 20, 0.78);
  font-size: 13px;
}

.heroApiCode {
  margin: 0;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.9);
  overflow: auto;
  max-width: 100%;
  max-height: 156px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: rgba(10, 14, 20, 0.86);
}

.heroSignalCard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  max-width: 320px;
}

.heroSignalIcon {
  display: inline-flex;
  color: rgba(10, 14, 20, 0.78);
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.14), rgba(124, 58, 237, 0.12));
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 14px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
}

.heroSignalText {
  display: grid;
  gap: 2px;
}

.heroSignalTitle {
  font-size: 13px;
  font-weight: 650;
  color: rgba(10, 14, 20, 0.9);
}

.heroSignalSub {
  font-size: 13px;
  color: rgba(10, 14, 20, 0.62);
}

.trustItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.76);
  color: rgba(10, 14, 20, 0.74);
  font-size: 13px;
  transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out, background 220ms ease-out;
}

.trustItem:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadowSm);
}

.trustIcon {
  color: rgba(10, 14, 20, 0.62);
  display: inline-flex;
}

.sectionBenefits {
  position: relative;
}

.sectionBenefits::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(15, 23, 42, 0.06);
}

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

.benefitCard {
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
  padding: 18px 18px;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out, background 240ms ease-out;
  position: relative;
  overflow: hidden;
}

.benefitCard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease-out;
  background: radial-gradient(70% 70% at 12% 0%, rgba(34, 179, 255, 0.12), transparent 60%),
    radial-gradient(70% 70% at 90% 20%, rgba(124, 58, 237, 0.12), transparent 60%);
}

.benefitCard:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
}

.benefitCard:hover::before {
  opacity: 1;
}

.benefitCardHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.benefitIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.12), rgba(124, 58, 237, 0.11));
  color: rgba(10, 14, 20, 0.78);
}

.benefitTitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: rgba(10, 14, 20, 0.92);
  font-weight: 650;
}

.benefitDesc {
  margin: 0;
  color: rgba(10, 14, 20, 0.68);
  line-height: 1.5;
  max-width: 52ch;
}

.section:nth-of-type(even) {
  background: var(--bgAlt);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.section.sectionProblem {
  padding: 92px 0 92px;
  background: var(--bgAlt);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.problemGrid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: start;
}

.sectionProblem .problemHeadline {
  margin: 0;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.024em;
  font-weight: 650;
}

.problemLead {
  max-width: 56ch;
}

.problemAccent {
  margin-top: 14px;
  height: 2px;
  width: 140px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.75), rgba(124, 58, 237, 0.65));
  opacity: 0.55;
}

.sectionProblem .problemSubtext {
  margin: 12px 0 0;
  max-width: 52ch;
  color: rgba(10, 14, 20, 0.66);
}

.problemStack {
  position: relative;
  padding-top: 6px;
}

.problemCard {
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.1);
  padding: 18px 18px;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out, background 240ms ease-out;
  position: relative;
  overflow: hidden;
}

.problemCard::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease-out;
  background: radial-gradient(70% 70% at 20% 0%, rgba(34, 179, 255, 0.12), transparent 60%),
    radial-gradient(70% 70% at 90% 20%, rgba(124, 58, 237, 0.12), transparent 60%);
}

.problemCard:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.16);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
}

.problemCard:hover::before {
  opacity: 1;
}

.problemCardPrimary {
  padding: 22px 22px;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 28px 78px rgba(15, 23, 42, 0.14);
}

.problemCardRow {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  position: relative;
}

.problemCardSecondary {
  padding: 16px 16px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
}

.problemCardMev {
  transform: translateX(14px);
}

.problemCardControl {
  transform: translateX(2px);
}

.problemCardHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.problemIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.12), rgba(124, 58, 237, 0.11));
  color: rgba(10, 14, 20, 0.78);
}

.problemCardTitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: rgba(10, 14, 20, 0.92);
  font-weight: 650;
}

.problemCardPrimary .problemCardTitle {
  font-size: 18px;
}

.problemCardDesc {
  margin: 0;
  color: rgba(10, 14, 20, 0.68);
  line-height: 1.5;
  max-width: 52ch;
}

.problemBridge {
  margin-top: 16px;
  display: grid;
  gap: 10px;
  max-width: 52ch;
}

.problemBridgeLine {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.36), rgba(124, 58, 237, 0.32), transparent);
}

.problemBridgeText {
  margin: 0;
  color: rgba(10, 14, 20, 0.62);
  line-height: 1.45;
}

@media (max-width: 980px) {
  .benefitsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .problemGrid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .problemCardMev,
  .problemCardControl {
    transform: none;
  }
}

@media (max-width: 620px) {
  .benefitsGrid {
    grid-template-columns: 1fr;
  }
}

.sectionFit {
  position: relative;
}

.sectionFit::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(15, 23, 42, 0.06);
}

.fitFlow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr) 120px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.fitNode {
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
  padding: 16px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out, background 240ms ease-out;
}

.fitNode::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease-out;
  background: radial-gradient(70% 70% at 12% 0%, rgba(34, 179, 255, 0.12), transparent 60%),
    radial-gradient(70% 70% at 90% 20%, rgba(124, 58, 237, 0.12), transparent 60%);
}

.fitNode:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.16);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
}

.fitNode:hover::before {
  opacity: 1;
}

.fitIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.12), rgba(124, 58, 237, 0.11));
  color: rgba(10, 14, 20, 0.78);
  flex: 0 0 auto;
}

.fitIconAura {
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.18), rgba(124, 58, 237, 0.16));
}

.fitNodeAura {
  border: 1px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) padding-box,
    linear-gradient(90deg, rgba(34, 179, 255, 0.34), rgba(124, 58, 237, 0.3)) border-box;
  box-shadow: 0 28px 78px rgba(15, 23, 42, 0.12);
}

.fitLabel {
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  font-weight: 650;
  color: rgba(10, 14, 20, 0.92);
}

.fitLink {
  height: 1px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.12);
  position: relative;
  overflow: hidden;
}

.fitLink::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.55), rgba(124, 58, 237, 0.48));
  transform: scaleX(0.15);
  transform-origin: left;
  opacity: 0;
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 260ms ease-out;
}

.fitFlow.isVisible .fitLink::before {
  transform: scaleX(1);
  opacity: 1;
}

@media (max-width: 980px) {
  .fitFlow {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 22px;
  }

  .fitLink {
    width: 1px;
    height: 18px;
    justify-self: center;
  }

  .fitLink::before {
    transform: scaleY(0.2);
    transform-origin: top;
  }

  .fitFlow.isVisible .fitLink::before {
    transform: scaleY(1);
  }
}

.sectionHeadCentered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.sectionHeadCentered .muted,
.sectionHeadCentered .lede {
  margin-left: auto;
  margin-right: auto;
}

.sectionShowcase {
  background: var(--bgAlt);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: hidden;
}

.sectionShowcase::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(62% 60% at 14% 8%, rgba(34, 179, 255, 0.10), transparent 62%),
    radial-gradient(62% 60% at 86% 0%, rgba(124, 58, 237, 0.10), transparent 64%);
  opacity: 0.65;
}

.sectionShowcase .container {
  position: relative;
}

.showcaseStack {
  display: grid;
  gap: 56px;
  margin-top: 34px;
}

.showcaseRow {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

.showcaseRow.isReverse .showcaseText {
  order: 2;
}

.showcaseRow.isReverse .showcaseWindow {
  order: 1;
}

.showcaseText {
  max-width: 56ch;
}

.showcaseTitle {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  font-weight: 650;
  color: rgba(10, 14, 20, 0.92);
}

.showcaseDesc {
  margin: 0;
  color: rgba(10, 14, 20, 0.66);
  line-height: 1.55;
  max-width: 60ch;
}

.showcaseBullets {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 10px;
  max-width: 48ch;
}

.showcaseBullets li {
  position: relative;
  padding-left: 14px;
  color: rgba(10, 14, 20, 0.74);
  line-height: 1.35;
  font-size: 14px;
}

.showcaseBullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.68), rgba(124, 58, 237, 0.56));
}

.showcasePills {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.showcasePill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.74);
  color: rgba(10, 14, 20, 0.74);
  font-size: 13px;
  font-weight: 550;
}

.showcaseWindow {
  min-width: 0;
}

.uiWindow {
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 34px 94px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  position: relative;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out;
  max-width: 100%;
}

.uiWindow::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease-out;
  background: radial-gradient(60% 55% at 18% 0%, rgba(34, 179, 255, 0.14), transparent 62%),
    radial-gradient(60% 55% at 85% 18%, rgba(124, 58, 237, 0.14), transparent 64%);
}

.uiWindow:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow: 0 42px 120px rgba(15, 23, 42, 0.14);
}

.uiWindow:hover::before {
  opacity: 1;
}

.uiTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.76);
}

.uiDots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.uiDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
}

.uiDotRed {
  background: rgba(239, 68, 68, 0.75);
}

.uiDotYellow {
  background: rgba(245, 158, 11, 0.70);
}

.uiDotGreen {
  background: rgba(34, 197, 94, 0.70);
}

.uiTopTitle {
  font-size: 12px;
  color: rgba(10, 14, 20, 0.58);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.uiBody {
  padding: 16px 16px 18px;
  display: grid;
  gap: 14px;
  background: radial-gradient(70% 70% at 12% 0%, rgba(34, 179, 255, 0.06), transparent 60%),
    radial-gradient(70% 70% at 90% 20%, rgba(124, 58, 237, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.82);
}

.uiLabel {
  display: grid;
  gap: 8px;
}

.uiLabelInline {
  display: grid;
  gap: 8px;
  min-width: 0;
  flex: 1 1 220px;
}

.uiLabelText {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 14, 20, 0.58);
  font-weight: 650;
}

.uiTextarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.9);
  padding: 12px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(10, 14, 20, 0.86);
  resize: vertical;
  min-height: 110px;
}

.uiTextarea:focus {
  outline: none;
  border-color: rgba(124, 58, 237, 0.26);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.10);
}

.uiSelect {
  width: 100%;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.88);
  padding: 0 12px;
  padding-right: 42px;
  font-size: 14px;
  color: rgba(10, 14, 20, 0.82);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M7%2010l5%205%205-5%27%20stroke%3D%27%230f172a%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20opacity%3D%270.55%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.uiSelect::-ms-expand {
  display: none;
}

.uiDropdown {
  position: relative;
}

.uiDropdown.isOpen {
  z-index: 30;
}

.uiSelectBtn {
  width: 100%;
  height: 38px;
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: rgba(10, 14, 20, 0.86);
  font-size: 14px;
  padding: 0 42px 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: border-color 220ms ease-out, box-shadow 260ms ease-out, background 220ms ease-out, transform 260ms ease-out;
}

.uiSelectBtn:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(124, 58, 237, 0.16);
}

.uiSelectBtn:focus-visible {
  outline: none;
  border-color: rgba(34, 179, 255, 0.26);
  box-shadow: 0 0 0 4px rgba(34, 179, 255, 0.10);
}

.uiDropdown.isOpen .uiSelectBtn {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.08), 0 18px 60px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}

.uiDropdown.didSelect .uiSelectBtn {
  box-shadow: 0 0 0 4px rgba(34, 179, 255, 0.12), 0 18px 60px rgba(15, 23, 42, 0.10);
}

.uiSelectValue {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  flex: 1 1 auto;
}

.uiSelectIcon {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.58;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M7%2010l5%205%205-5%27%20stroke%3D%27%230f172a%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20opacity%3D%270.85%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease-out;
}

.uiSelectBtn[aria-expanded="true"] .uiSelectIcon {
  transform: translateY(-50%) rotate(180deg);
  opacity: 0.7;
}

.uiSelectMenu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 26px 74px rgba(15, 23, 42, 0.14);
  padding: 6px;
  overflow: hidden;
  transform-origin: top;
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  filter: blur(1px);
  pointer-events: none;
  transition: opacity 180ms ease-out, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 180ms ease-out;
}

.uiDropdown.isOpen .uiSelectMenu {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
  display: grid;
  gap: 5px;
}

.uiDropdown.isClosing .uiSelectMenu {
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  filter: blur(1px);
  pointer-events: none;
}

.uiSelectOption {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: rgba(10, 14, 20, 0.82);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background 180ms ease-out, transform 180ms ease-out;
}

.uiSelectOption:hover {
  background: rgba(124, 58, 237, 0.08);
}

.uiSelectOption:active {
  transform: translateY(1px);
}

.uiSelectOption:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 179, 255, 0.14);
}

.uiSelectOption[aria-selected="true"] {
  background: rgba(34, 179, 255, 0.10);
  color: rgba(10, 14, 20, 0.9);
  font-weight: 650;
}

.uiSelectOption[aria-selected="true"]::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: 0.9;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M20%206L9%2017l-5-5%27%20stroke%3D%27%230f172a%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.uiSelect:focus {
  outline: none;
  border-color: rgba(34, 179, 255, 0.26);
  box-shadow: 0 0 0 4px rgba(34, 179, 255, 0.10);
}

.uiRow {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.uiRowSpread {
  justify-content: space-between;
}

.uiBtn {
  height: 38px;
  padding: 0 14px;
  border-radius: 12px;
  flex: 0 0 auto;
}

.uiIconBtn {
  width: 38px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.uiIconBtn:disabled {
  opacity: 0.46;
  cursor: not-allowed;
}

.uiOutput {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.88);
  overflow: hidden;
  position: relative;
}

.uiOutputTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.76);
}

.uiOutputLabel {
  font-size: 12px;
  color: rgba(10, 14, 20, 0.62);
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.uiCode {
  display: block;
  padding: 12px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(10, 14, 20, 0.82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.uiWindow.isLoading .uiCode {
  opacity: 0.75;
}

.uiWindow.isLoading .uiOutput::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.10), transparent);
  transform: translateX(-60%);
  animation: uiShimmer 900ms ease-in-out infinite;
  pointer-events: none;
}

@keyframes uiShimmer {
  0% {
    transform: translateX(-60%);
  }
  100% {
    transform: translateX(60%);
  }
}

.uiSwitch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.82);
  color: rgba(10, 14, 20, 0.86);
  cursor: pointer;
  transition: transform 220ms ease-out, border-color 220ms ease-out, box-shadow 220ms ease-out, background 220ms ease-out;
}

.uiSwitch:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.9);
}

.uiSwitch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12), 0 18px 50px rgba(15, 23, 42, 0.10);
}

.uiSwitchLeft {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.uiShield {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.12), rgba(124, 58, 237, 0.11));
  color: rgba(10, 14, 20, 0.78);
}

.uiSwitchLabel {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.uiSwitchTrack {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: rgba(15, 23, 42, 0.06);
}

.uiSwitchKnob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.12);
  transition: transform 240ms ease-out;
}

.uiSwitchState {
  font-size: 13px;
  color: rgba(10, 14, 20, 0.64);
  font-weight: 600;
  min-width: 28px;
  text-align: right;
}

.uiBadge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.74);
  color: rgba(10, 14, 20, 0.72);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.uiHint {
  margin: 2px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  color: rgba(10, 14, 20, 0.64);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms ease-out, transform 240ms ease-out;
}

.uiWindow.isOn .uiSwitchTrack {
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.26), rgba(124, 58, 237, 0.24));
  border-color: rgba(124, 58, 237, 0.20);
}

.uiWindow.isOn .uiSwitchKnob {
  transform: translateX(18px);
}

.uiWindow.isOn .uiSwitchState {
  color: rgba(10, 14, 20, 0.82);
}

.uiWindow.isOn .uiShield {
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.20), rgba(124, 58, 237, 0.18));
  border-color: rgba(124, 58, 237, 0.18);
}

.uiWindow.isOn .uiBadge {
  border-color: rgba(124, 58, 237, 0.20);
  background: rgba(255, 255, 255, 0.88);
  color: rgba(10, 14, 20, 0.84);
}

.uiWindow.isOn .uiHint {
  opacity: 1;
  transform: translateY(0);
}

.uiRange {
  width: 100%;
  accent-color: #7c3aed;
}

.uiQueue {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.84);
  padding: 12px 12px;
}

.uiQueueList {
  display: grid;
  gap: 10px;
}

.uiQueueItem {
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.74);
  padding: 10px 12px;
  color: rgba(10, 14, 20, 0.72);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.uiQueueItemUser {
  border: 1px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.92)) padding-box,
    linear-gradient(90deg, rgba(34, 179, 255, 0.34), rgba(124, 58, 237, 0.3)) border-box;
  color: rgba(10, 14, 20, 0.88);
  font-weight: 650;
}

.uiWindow.isBumping .uiQueueItemUser {
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  transform: translateY(-1px);
}

.uiSmallLabel {
  font-size: 12px;
  color: rgba(10, 14, 20, 0.60);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 650;
}

.uiPlacement {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.74);
  color: rgba(10, 14, 20, 0.80);
  font-size: 13px;
  font-weight: 650;
}

@media (max-width: 980px) {
  .showcaseRow {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .showcaseRow .showcaseText {
    order: 1;
  }

  .showcaseRow .showcaseWindow {
    order: 2;
  }

  .showcaseRow.isReverse .showcaseText {
    order: 1;
  }

  .showcaseRow.isReverse .showcaseWindow {
    order: 2;
  }
}

.uiRowSpread > *:last-child {
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .uiRow {
    flex-direction: column;
    align-items: stretch;
  }

  .uiBtn {
    width: 100%;
    justify-content: center;
  }

  .uiWindow[data-demo="protection"] .uiRowSpread {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .uiWindow[data-demo="protection"] .uiBadge {
    align-self: flex-start;
  }

  .uiDropdown .uiLabelText {
    display: none;
  }

  .uiSelectBtn {
    height: 34px;
    font-size: 13px;
  }

  .uiSelectOption {
    font-size: 13px;
    padding: 9px 10px;
  }
}

.sectionHow {
  position: relative;
}

.sectionHow::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(15, 23, 42, 0.06);
}

.howDiagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1.35fr) 140px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 28px;
  margin-bottom: 24px;
}

.howNode {
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.1);
  padding: 18px 18px;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out, background 240ms ease-out;
  position: relative;
  overflow: hidden;
}

.howNode::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease-out;
  background: radial-gradient(70% 70% at 20% 0%, rgba(34, 179, 255, 0.12), transparent 60%),
    radial-gradient(70% 70% at 90% 20%, rgba(124, 58, 237, 0.12), transparent 60%);
}

.howNode:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.16);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
}

.howNode:hover::before {
  opacity: 1;
}

.howNodeAura {
  padding: 22px 22px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) padding-box,
    linear-gradient(90deg, rgba(34, 179, 255, 0.34), rgba(124, 58, 237, 0.3)) border-box;
  box-shadow: 0 32px 86px rgba(15, 23, 42, 0.14);
}

.howNodeHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.howNodeIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(10, 14, 20, 0.78);
}

.howNodeIconAura {
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.14), rgba(124, 58, 237, 0.12));
}

.howNodeTitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: rgba(10, 14, 20, 0.92);
  font-weight: 650;
}

.howNodeAura .howNodeTitle {
  font-size: 18px;
}

.howNodeDesc {
  margin: 0;
  color: rgba(10, 14, 20, 0.68);
  line-height: 1.45;
  max-width: 46ch;
}

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

.howOps li {
  position: relative;
  padding-left: 14px;
  color: rgba(10, 14, 20, 0.72);
  line-height: 1.35;
}

.howOps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.65), rgba(124, 58, 237, 0.55));
}

.howLink {
  display: flex;
  align-items: center;
  justify-content: center;
}

.howLinkSvg {
  width: 100%;
  height: 36px;
}

.howLinkPath {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  opacity: 0.56;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  transition: stroke-dashoffset 520ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease-out;
}

.howLinkArrow {
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 240ms ease-out;
}

.howLink.isVisible .howLinkPath {
  stroke-dashoffset: 0;
}

.howLink.isVisible .howLinkArrow {
  opacity: 0.58;
}

[data-how-diagram]:hover .howLinkPath,
[data-how-diagram]:hover .howLinkArrow {
  opacity: 0.55;
}

[data-how-diagram][data-active="client"] .howLinkA .howLinkPath,
[data-how-diagram][data-active="client"] .howLinkA .howLinkArrow,
[data-how-diagram][data-active="aura"] .howLinkA .howLinkPath,
[data-how-diagram][data-active="aura"] .howLinkA .howLinkArrow,
[data-how-diagram][data-active="aura"] .howLinkB .howLinkPath,
[data-how-diagram][data-active="aura"] .howLinkB .howLinkArrow,
[data-how-diagram][data-active="network"] .howLinkB .howLinkPath,
[data-how-diagram][data-active="network"] .howLinkB .howLinkArrow {
  opacity: 0.85;
}

.howNote {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  color: rgba(10, 14, 20, 0.62);
  max-width: 72ch;
}

@media (max-width: 980px) {
  .howDiagram {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 22px;
  }

  .howLinkSvg {
    width: 86px;
    height: 86px;
    transform: rotate(90deg);
  }
}

.sectionMev {
  padding: 92px 0;
  background: var(--bgAlt);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  position: relative;
  isolation: isolate;
}

.sectionMev::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(70% 60% at 22% 20%, rgba(34, 179, 255, 0.12), transparent 62%),
    radial-gradient(70% 60% at 80% 0%, rgba(124, 58, 237, 0.12), transparent 64%);
  opacity: 0.6;
}

.mevHeadline {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-weight: 650;
}

.mevSubtext {
  margin: 12px 0 0;
  max-width: 52ch;
  color: rgba(10, 14, 20, 0.66);
}

.mevGrid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 44px;
  align-items: start;
}

.mevHead {
  max-width: 52ch;
}

.mevControl {
  border-radius: 22px;
  border: 1px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) padding-box,
    linear-gradient(90deg, rgba(34, 179, 255, 0.34), rgba(124, 58, 237, 0.3)) border-box;
  box-shadow: 0 34px 94px rgba(15, 23, 42, 0.14);
  padding: 22px 22px;
  position: relative;
  overflow: hidden;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, filter 240ms ease-out;
}

.mevControl::before {
  content: "";
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background: radial-gradient(60% 55% at 18% 0%, rgba(34, 179, 255, 0.16), transparent 60%),
    radial-gradient(60% 55% at 85% 18%, rgba(124, 58, 237, 0.16), transparent 62%);
  opacity: 0.0;
  transition: opacity 240ms ease-out;
}

.mevControl:hover {
  transform: translateY(-2px);
  box-shadow: 0 40px 110px rgba(15, 23, 42, 0.16);
  filter: saturate(1.02);
}

.mevControl:hover::before {
  opacity: 1;
}

.mevControl:hover .mevToggle {
  border-color: rgba(124, 58, 237, 0.22);
}

.mevControl:hover .mevToggleKnob {
  transform: translateX(1px);
}

.mevControl:focus-within {
  transform: translateY(-1px);
}

.mevControlTop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.mevControlTitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 14, 20, 0.7);
  font-weight: 650;
}

.mevControlIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.14), rgba(124, 58, 237, 0.12));
  color: rgba(10, 14, 20, 0.78);
}

.mevControlState {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  color: rgba(10, 14, 20, 0.72);
  white-space: nowrap;
}

.mevToggle {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.22), rgba(124, 58, 237, 0.2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.mevToggleKnob {
  position: absolute;
  top: 2px;
  left: 14px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  transition: transform 240ms ease-out, box-shadow 240ms ease-out;
}

.mevAccountGate {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.mevAccountLabel {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 14, 20, 0.6);
  white-space: nowrap;
}

.mevAccountValue {
  overflow: auto;
  white-space: nowrap;
  padding-bottom: 2px;
  scrollbar-width: thin;
  color: rgba(10, 14, 20, 0.82);
}

.mevCopy {
  justify-self: end;
}

.mevControlHint {
  margin: 12px 0 0;
  color: rgba(10, 14, 20, 0.62);
  line-height: 1.45;
  max-width: 64ch;
}

.mevDelta {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.mevDeltaBlock {
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
  padding: 18px 18px;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out, background 240ms ease-out;
}

.mevDeltaBlock:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.16);
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
}

.mevDeltaChanges {
  border-color: rgba(34, 179, 255, 0.16);
  background: rgba(255, 255, 255, 0.82);
}

.mevDeltaHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.mevDeltaIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(10, 14, 20, 0.76);
}

.mevDeltaTitle {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 650;
  color: rgba(10, 14, 20, 0.9);
}

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

.mevDeltaList li {
  position: relative;
  padding-left: 14px;
  color: rgba(10, 14, 20, 0.68);
  line-height: 1.45;
}

.mevDeltaList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.65), rgba(124, 58, 237, 0.55));
}

.mevTransition {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  color: rgba(10, 14, 20, 0.64);
  max-width: 78ch;
}

.revealReady .mevControl[data-reveal] {
  transform: translateY(14px) scale(0.98);
}

.revealReady .mevControl[data-reveal].isVisible {
  transform: translateY(0) scale(1);
}

.sectionPerformance {
  position: relative;
}

.sectionPerformance::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(15, 23, 42, 0.06);
}

.perfGrid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  align-items: start;
  margin-top: 28px;
}

.perfModel {
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 34px 94px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.perfModelHead {
  padding: 18px 18px 0;
  display: grid;
  gap: 6px;
}

.perfModelKicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(10, 14, 20, 0.62);
  font-weight: 650;
}

.perfModelTitle {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: -0.016em;
  font-weight: 650;
  color: rgba(10, 14, 20, 0.92);
}

.perfModelBody {
  padding: 18px 18px 18px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
  align-items: center;
}

.perfQueue {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  padding: 16px 16px;
  overflow: hidden;
}

.perfQueue::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 70% at 20% 0%, rgba(34, 179, 255, 0.12), transparent 60%),
    radial-gradient(70% 70% at 85% 24%, rgba(124, 58, 237, 0.12), transparent 62%);
  opacity: 0.55;
}

.perfQueueStack {
  position: relative;
  height: 214px;
}

.perfQueueLayer {
  position: absolute;
  left: var(--qx, 0px);
  right: 0;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.10);
  padding: 12px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out, background 240ms ease-out;
}

.perfQueueLayer:nth-child(1) {
  top: 0;
  --qx: 0px;
}

.perfQueueLayer:nth-child(2) {
  top: 54px;
  --qx: 10px;
}

.perfQueueLayer:nth-child(3) {
  top: 108px;
  --qx: 18px;
}

.perfQueueLayer:nth-child(4) {
  top: 162px;
  --qx: 26px;
}

.perfQueueLayerTop {
  border-color: rgba(34, 179, 255, 0.18);
}

.perfQueueLayerBase {
  background: rgba(255, 255, 255, 0.82);
}

.perfQueueBar {
  width: 10px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(34, 179, 255, 0.55), rgba(124, 58, 237, 0.45));
  opacity: 0.75;
}

.perfQueueLabel {
  font-size: 13px;
  color: rgba(10, 14, 20, 0.78);
  font-weight: 600;
}

.perfModel:hover .perfQueueLayer {
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.12);
}

.perfQueueLayer:hover {
  transform: translateX(6px) translateY(-2px);
  background: rgba(255, 255, 255, 0.92);
}

.perfModelCopy {
  display: grid;
  gap: 12px;
}

.perfModelDesc {
  margin: 0;
  color: rgba(10, 14, 20, 0.66);
  line-height: 1.55;
  max-width: 62ch;
}

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

.perfModelFacts li {
  position: relative;
  padding-left: 14px;
  color: rgba(10, 14, 20, 0.72);
  line-height: 1.35;
}

.perfModelFacts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.65), rgba(124, 58, 237, 0.55));
}

.perfSupport {
  display: grid;
  gap: 14px;
}

.perfSupportCard {
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10);
  padding: 18px 18px;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out, background 240ms ease-out;
}

.perfSupportCard:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 26px 70px rgba(15, 23, 42, 0.12);
}

.perfSupportNote {
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(15, 23, 42, 0.10);
}

.perfSupportHead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.perfSupportIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.12), rgba(124, 58, 237, 0.10));
  color: rgba(10, 14, 20, 0.78);
}

.perfSupportTitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  font-weight: 650;
  color: rgba(10, 14, 20, 0.9);
}

.perfSupportDesc {
  margin: 0;
  color: rgba(10, 14, 20, 0.66);
  line-height: 1.5;
}

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

.perfSupportList li {
  position: relative;
  padding-left: 14px;
  color: rgba(10, 14, 20, 0.70);
  line-height: 1.4;
}

.perfSupportList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.20);
}

.revealReady .perfQueueLayer[data-reveal] {
  transform: translateY(12px) scale(0.985);
}

.revealReady .perfQueueLayer[data-reveal].isVisible {
  transform: translateY(0) scale(1);
}

.perfLayout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
  align-items: start;
}

.perfSide {
  display: grid;
  gap: 14px;
}

.perfBlock {
  border-radius: var(--radius);
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.76);
  padding: 18px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out, background 220ms ease-out;
}

.perfBlock:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.16);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadowSm);
}

.perfBlockPrimary {
  border-color: rgba(124, 58, 237, 0.16);
  background: rgba(255, 255, 255, 0.92);
  padding: 22px 22px;
  box-shadow: var(--shadowSm);
}

.perfBlockTertiary {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(15, 23, 42, 0.10);
}

.perfHead {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.perfTitle {
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 600;
  color: rgba(10, 14, 20, 0.9);
}

.perfBlockPrimary .perfTitle {
  font-size: 18px;
  letter-spacing: -0.016em;
}

.perfDesc {
  margin: 0;
  color: rgba(10, 14, 20, 0.66);
  line-height: 1.55;
}

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

.perfList li {
  position: relative;
  padding-left: 14px;
  color: rgba(10, 14, 20, 0.68);
  line-height: 1.45;
}

.perfList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.34);
}

.perfTransition {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
  max-width: 78ch;
}

.sectionApi {
  position: relative;
}

.sectionApi::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(15, 23, 42, 0.06);
}

.apiGrid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: start;
}

.apiContextDesc {
  max-width: 56ch;
}

.apiContextNote {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(10, 14, 20, 0.58);
}

.apiPills {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.apiPill {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.74);
  color: rgba(10, 14, 20, 0.74);
  font-size: 13px;
  font-weight: 550;
}

.sectionTipping {
  position: relative;
}

.sectionTipping::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(15, 23, 42, 0.06);
}

.tipPanel {
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07);
  overflow: hidden;
  max-width: 920px;
}

.tipList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}

.tipRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transition: background 160ms ease-out;
}

.tipRow:hover {
  background: rgba(255, 255, 255, 0.46);
}

.tipRow:last-child {
  border-bottom: 0;
}

.tipAccount {
  min-width: 0;
  overflow: auto;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.66);
  color: rgba(10, 14, 20, 0.82);
  font-size: 13px;
}

.tipCopy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.66);
  color: rgba(10, 14, 20, 0.72);
  transition: transform 160ms ease-out, background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

.tipCopy:hover {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(15, 23, 42, 0.18);
  color: rgba(10, 14, 20, 0.86);
  transform: translateY(-1px);
}

.tipCopy:active {
  transform: translateY(0);
}

.tipCopy.isCopied {
  border-color: rgba(34, 179, 255, 0.22);
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.14), rgba(124, 58, 237, 0.12));
}

.tipNote {
  margin: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 12px;
  color: rgba(10, 14, 20, 0.58);
}

.sectionEndpoints {
  position: relative;
  padding: 72px 0;
}

.sectionEndpoints::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(15, 23, 42, 0.06);
}

.endpointFlagImg {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
  object-fit: cover;
  flex: 0 0 auto;
}

.endpointsPanel {
  margin-top: 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07);
  overflow: hidden;
  max-width: 920px;
}

.endpointsPanelHead {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.64);
}

.endpointsPanelTitle {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 14, 20, 0.60);
  font-weight: 750;
}

.endpointRows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}

.endpointRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.endpointRow:last-child {
  border-bottom: 0;
}

.endpointRegion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.endpointRegionName {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(10, 14, 20, 0.88);
}

.endpointRegionCode {
  font-weight: 700;
  color: rgba(10, 14, 20, 0.52);
}

.endpointBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.56);
  font-size: 12px;
  font-weight: 750;
  color: rgba(10, 14, 20, 0.58);
  white-space: nowrap;
}

.endpointBadge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.22);
}

.endpointRow.isAvailable .endpointBadge::before {
  background: rgba(34, 179, 255, 0.58);
  box-shadow: 0 0 0 3px rgba(34, 179, 255, 0.14);
}

.endpointActions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.endpointBase {
  font-size: 13px;
  color: rgba(10, 14, 20, 0.78);
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.66);
  white-space: nowrap;
}

.endpointsSoon {
  padding: 14px 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.50);
}

.endpointsSoonTitle {
  margin: 0 0 10px;
  font-size: 13px;
}

.endpointsSoonList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.endpointSoonPill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.56);
  font-size: 14px;
  font-weight: 650;
  color: rgba(10, 14, 20, 0.66);
}

.apiUi {
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 34px 94px rgba(15, 23, 42, 0.12);
  overflow: hidden;
  transition: transform 240ms ease-out, box-shadow 240ms ease-out, border-color 240ms ease-out;
}

.apiUi:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 58, 237, 0.16);
  box-shadow: 0 40px 112px rgba(15, 23, 42, 0.14);
}

.apiUiTop {
  padding: 14px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.74);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.apiUiEndpointRow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.apiUiEndpoint {
  min-width: 0;
  overflow: auto;
  white-space: nowrap;
  padding-bottom: 2px;
}

.apiUiCopy {
  position: relative;
  overflow: hidden;
}

.apiUiCopy::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease-out;
  background: linear-gradient(90deg, rgba(34, 179, 255, 0.18), rgba(124, 58, 237, 0.16));
}

.apiUiCopy:hover::before {
  opacity: 1;
}

.apiUiTabs .codeTabList {
  --tab-pad: 6px;
  position: relative;
  padding: var(--tab-pad);
  gap: 0;
  background: rgba(255, 255, 255, 0.74);
  width: 240px;
  overflow: hidden;
}

.apiUiTabs .codeTab {
  position: relative;
  flex: 1;
  justify-content: center;
  z-index: 1;
}

.apiUiTabs .codeTabList::before {
  content: "";
  position: absolute;
  top: var(--tab-pad);
  bottom: var(--tab-pad);
  left: var(--tab-pad);
  width: var(--tab-w, 0px);
  transform: translateX(var(--tab-x, 0px));
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.14), 0 10px 24px rgba(34, 179, 255, 0.1);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), width 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 220ms ease-out;
}

.apiUiTabs .codeTab:hover {
  background: transparent;
}

.apiUiTabs .codeTab.isActive {
  background: transparent;
  color: #ffffff;
  box-shadow: none;
}

.apiUiTabs .codeTab.isActive::after {
  content: none;
}

.apiUiBody {
  padding: 14px 14px 10px;
}

.apiPanelBar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.apiPanelKicker {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(10, 14, 20, 0.72);
  font-weight: 650;
}

.apiTabPanel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: max-height 420ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease-out, transform 220ms ease-out;
  pointer-events: none;
}

.apiTabPanel.isActive {
  max-height: 560px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.apiUiCode {
  background: rgba(255, 255, 255, 0.9);
}

.apiUiCtas {
  padding: 12px 14px 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.apiPanel {
  border-radius: var(--radius);
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadowSm);
  overflow: hidden;
  transition: transform 220ms ease-out, box-shadow 220ms ease-out, border-color 220ms ease-out;
}

.apiPanel:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, 0.18);
}

.apiPanelTop {
  padding: 14px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.74);
  display: grid;
  gap: 10px;
}

.apiEndpointRow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.apiEndpoint {
  min-width: 0;
  overflow: auto;
  white-space: nowrap;
  padding-bottom: 2px;
}

.apiMetaRow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.apiMetaKey {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 14, 20, 0.58);
  white-space: nowrap;
}

.apiPanelBody {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 14px 14px 16px;
}

.apiDivider {
  height: 1px;
  background: rgba(15, 23, 42, 0.10);
}

.apiBlock {
  display: grid;
  gap: 10px;
}

.apiBlockHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.apiKicker {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(10, 14, 20, 0.72);
  font-weight: 600;
}

.apiCode {
  margin: 0;
  padding: 13px 13px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.86);
  overflow: auto;
  max-width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(10, 14, 20, 0.88);
}

.tokPunc {
  color: rgba(10, 14, 20, 0.48);
}

.tokKey {
  color: rgba(10, 14, 20, 0.86);
}

.tokString {
  color: rgba(124, 58, 237, 0.78);
}

.tokNum {
  color: rgba(10, 14, 20, 0.78);
}

.tokBool {
  color: rgba(34, 179, 255, 0.78);
}

.apiClarification {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.74);
  max-width: 92ch;
}

.apiCtas {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sectionClose {
  padding: 92px 0 96px;
  background: rgba(255, 255, 255, 0.74);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.closeInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.closeDivider {
  width: min(640px, 100%);
  height: 1px;
  margin: 0 auto 26px;
  background: linear-gradient(90deg, transparent 0%, rgba(34, 179, 255, 0.55) 35%, rgba(124, 58, 237, 0.55) 65%, transparent 100%);
  opacity: 0.55;
}

.closeStatement {
  margin: 0 auto;
  max-width: 30ch;
  text-align: center;
  font-size: 36px;
  line-height: 1.08;
  letter-spacing: -0.024em;
  font-weight: 650;
  color: rgba(10, 14, 20, 0.92);
}

.closeSupport {
  margin: 12px auto 0;
  max-width: 64ch;
  text-align: center;
}

.closeActions {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.closePrimary {
  min-width: 190px;
}

.closeSecondary {
  min-width: 190px;
}

.closeLink {
  display: inline-flex;
  margin: 18px auto 0;
  width: fit-content;
  color: rgba(10, 14, 20, 0.56);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
  padding-bottom: 2px;
  transition: color 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out;
}

.closeLink:hover {
  color: rgba(10, 14, 20, 0.78);
  border-color: rgba(124, 58, 237, 0.22);
}

.closeTelegram {
  margin: 14px auto 0;
  display: block;
  width: fit-content;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.01);
  transition: background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}

.closeTelegram:hover {
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

.sectionHead {
  max-width: 820px;
  margin-bottom: 28px;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.h1 {
  margin: 0 0 16px;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.h2 {
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.35;
}

.lede {
  margin: 0;
  max-width: 56ch;
  color: var(--muted);
  font-size: 16px;
}

.muted {
  margin: 0;
  color: var(--muted);
}

.heroGrid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 42px;
  align-items: center;
}

.heroCtas {
  margin-top: 22px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-weight: 500;
  font-size: 14px;
  transition: background 220ms ease-out, border-color 220ms ease-out, transform 220ms ease-out, box-shadow 220ms ease-out,
    color 220ms ease-out;
  user-select: none;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btnPrimary {
  position: relative;
  overflow: hidden;
  background: var(--accent);
  border-color: rgba(15, 23, 42, 0.12);
  border: none;
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.16), 0 10px 24px rgba(34, 179, 255, 0.12);
}

.btnPrimary::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.55) 30%, transparent 60%);
  transform: translateX(-120%);
  opacity: 0;
  transition: opacity 180ms ease-out;
  pointer-events: none;
}

.btnPrimary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(124, 58, 237, 0.18), 0 14px 30px rgba(34, 179, 255, 0.14);
}

.btnPrimary:hover::before {
  opacity: 1;
  animation: btnShine 850ms ease-out both;
}

@keyframes btnShine {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

.btnSecondary {
  background: rgba(255, 255, 255, 0.66);
  color: rgba(10, 14, 20, 0.88);
  border-color: rgba(15, 23, 42, 0.12);
}

.btnSecondary:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow: var(--shadowSm);
}

.btnOutline {
  background: transparent;
  color: rgba(10, 14, 20, 0.88);
  border-color: rgba(15, 23, 42, 0.14);
}

.btnOutline:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, 0.20);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.10);
}

.btnTertiary {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(15, 23, 42, 0.12);
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--muted);
}

.btnTertiary:hover {
  color: rgba(10, 14, 20, 0.9);
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.18);
}

.btn:focus-visible,
.navToggle:focus-visible,
.navLink:focus-visible,
.link:focus-visible,
.codeBlock:focus-visible {
  outline: 2px solid rgba(34, 179, 255, 0.65);
  outline-offset: 3px;
}

.kv {
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.kvItem {
  padding: 12px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.kvItem dt {
  font-size: 12px;
  color: var(--muted2);
  margin-bottom: 2px;
}

.kvItem dd {
  font-size: 13px;
  margin: 0;
  color: var(--text);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.heroPanel {
  position: sticky;
  top: 96px;
}

.panelHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 0;
}

.panelTitle {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
}

.panelSub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text);
}

.panelBody {
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  color: rgba(10, 14, 20, 0.66);
}

.monoRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
}

.monoLabel {
  font-size: 12px;
  color: var(--muted2);
}

.monoValue {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: var(--text);
  text-align: right;
}

.monoInline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  color: var(--text);
}

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

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

.card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.step {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.stepBadge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(109, 134, 255, 0.12);
  border: 1px solid rgba(109, 134, 255, 0.22);
  color: var(--text);
  font-weight: 600;
}

.callout {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(109, 134, 255, 0.22);
  background: rgba(109, 134, 255, 0.08);
}

.calloutTitle {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted2);
  margin-bottom: 8px;
}

.calloutBody {
  color: var(--text);
}

.codePanel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.78);
  overflow: hidden;
}

.codeHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.74);
}

.codeTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.codeBlock {
  margin: 0;
  padding: 14px 14px;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(10, 14, 20, 0.88);
}

.codeFoot {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.inlineLinks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.link {
  font-size: 13px;
  color: var(--muted);
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out;
}

.link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

.closingBand {
  position: relative;
  padding: 56px 0;
  background: radial-gradient(42% 90% at 10% 10%, rgba(34, 179, 255, 0.55), transparent 70%),
    radial-gradient(46% 90% at 90% 20%, rgba(124, 58, 237, 0.50), transparent 72%),
    linear-gradient(90deg, rgba(34, 179, 255, 0.88), rgba(124, 58, 237, 0.86));
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.closingBand::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  opacity: 0.6;
}

.closingBandInner {
  position: relative;
  display: flex;
  justify-content: center;
}

.closingBandText {
  margin: 0;
  max-width: 34ch;
  text-align: center;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 16px 44px rgba(15, 23, 42, 0.22);
}

@media (max-width: 620px) {
  .closingBand {
    padding: 44px 0;
  }

  .closingBandText {
    font-size: 20px;
  }
}

.footer {
  border-top: 1px solid var(--border);
  padding: 22px 0;
  background: rgba(255, 255, 255, 0.6);
}

.footerInner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footerLine {
  margin: 0;
  font-size: 13px;
  color: rgba(10, 14, 20, 0.64);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.footerMeta {
  font-size: 12px;
  color: var(--muted2);
  margin-top: 6px;
}

.footerLinks {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footerLink {
  color: rgba(10, 14, 20, 0.72);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid transparent;
  transition: color 180ms ease-out, border-color 180ms ease-out;
}

.footerLink:hover {
  color: rgba(10, 14, 20, 0.9);
  border-color: rgba(124, 58, 237, 0.22);
}

.footerSep {
  color: rgba(10, 14, 20, 0.34);
}

.footerFine {
  font-size: 12px;
  color: var(--muted2);
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 980px) {
  :root {
    --topbarH: 32px;
  }

  .heroGrid {
    grid-template-columns: 1fr;
  }

  .heroPanel {
    position: static;
  }

  .heroVisualInner {
    padding: 14px;
  }

  .grid3 {
    grid-template-columns: 1fr;
  }

  .heroTrust {
    grid-template-columns: 1fr;
  }

  .problemLayout {
    grid-template-columns: 1fr;
  }

  .howFlow {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .howConnector {
    height: 22px;
  }

  .howConnector::before {
    left: 50%;
    right: auto;
    top: 4px;
    bottom: 4px;
    width: 1px;
    height: auto;
  }

  .howConnector::after {
    right: auto;
    left: calc(50% - 4px);
    top: auto;
    bottom: 5px;
    border-top: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    transform: rotate(45deg);
  }

  .mevGrid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .mevDelta {
    grid-template-columns: 1fr;
  }

  .mevAccountGate {
    grid-template-columns: 1fr auto;
    align-items: start;
  }

  .mevAccountLabel {
    grid-column: 1 / -1;
  }

  .mevAccountValue {
    grid-column: 1 / 2;
  }

  .mevCopy {
    grid-column: 2 / 3;
  }

  .perfLayout {
    grid-template-columns: 1fr;
  }

  .perfGrid {
    grid-template-columns: 1fr;
  }

  .perfModelBody {
    grid-template-columns: 1fr;
  }

  .perfQueueStack {
    height: 232px;
  }

  .apiGrid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .endpointRow {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .endpointRegion {
    width: 100%;
  }

  .endpointActions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .endpointBase {
    width: fit-content;
    max-width: 100%;
    overflow: auto;
  }

  .tipRow {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .tipCopy {
    width: 44px;
  }

  .apiUiTop {
    flex-direction: column;
    align-items: stretch;
  }

  .apiUiTabs .codeTabList {
    width: 100%;
  }

  .apiUiEndpointRow {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .apiUiEndpoint {
    width: 100%;
  }

  .apiEndpointRow {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .apiEndpoint {
    width: 100%;
  }

  .closeActions {
    flex-direction: column;
    align-items: center;
  }

  .closeActions .btn {
    width: min(320px, 100%);
  }

  .footerInner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footerLinks {
    justify-content: center;
  }

  .footerFine {
    justify-content: center;
  }

  .specItem + .specItem {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 820px) {
  .section {
    padding: 64px 0;
  }

  .sectionHero {
    padding: 72px 0 56px;
  }

  .h1 {
    font-size: 40px;
  }

  .sectionHero .h1 {
    font-size: 34px;
  }

  .sectionHero .heroCtas {
    flex-direction: column;
    align-items: stretch;
  }

  .sectionHero .heroCtas .btn {
    width: min(360px, 100%);
  }

  .heroPills {
    gap: 8px;
  }

  .closeStatement {
    font-size: 24px;
    letter-spacing: -0.02em;
  }

  .problemStatement {
    padding: 56px 0 32px;
  }

  .problemHeadline {
    font-size: 28px;
  }

  .problemBody {
    padding: 34px 0 60px;
  }

  .problemBlockPrimary {
    padding: 18px 18px;
  }

  .problemHeadline {
    letter-spacing: -0.022em;
  }

  .howStageAura {
    padding: 18px 18px;
  }

  .mevTop {
    padding: 56px 0 32px;
  }

  .mevHeadline {
    font-size: 28px;
    letter-spacing: -0.02em;
  }

  .mevBody {
    padding: 34px 0 60px;
  }

  .mevMechanism {
    padding: 18px 18px;
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .navToggle {
    display: inline-flex;
    width: 42px;
    justify-content: center;
    padding: 0;
  }

  .brand {
    min-width: 0;
  }

  .brandMeta {
    display: none;
  }

  .navPanel {
    position: fixed;
    right: 0;
    top: 0;
    height: 100dvh;
    width: min(90vw, 360px);
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 18px;
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-right: calc(18px + env(safe-area-inset-right));
    background: rgba(247, 248, 251, 0.96);
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow);
    transform: translateX(100%);
    transition: transform 180ms ease-out;
    visibility: hidden;
    pointer-events: none;
    z-index: 120;
    will-change: transform;
  }

  .navPanel::before {
    content: none;
  }

  .navPanel.isOpen {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }

  .navPanelHead {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 6px;
  }

  .navLink {
    white-space: nowrap;
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    color: rgba(10, 14, 20, 0.82);
  }

  .navLink:hover {
    background: rgba(255, 255, 255, 0.86);
  }

  .navLink.isActive {
    background: var(--accent);
    color: #ffffff;
  }

  .navPanel.isOpen + .navBackdrop {
    display: block;
  }

  .navBackdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(2px);
    z-index: 110;
  }

  .navCtas {
    margin-left: 0;
    margin-top: 8px;
    flex-direction: column;
    align-items: stretch;
  }
  .uiLabelInline{
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition: none !important;
  }

  .uiWindow.isLoading .uiOutput::after {
    animation: none !important;
  }

  .sectionHero .heroNetPath,
  .sectionHero .heroNetNodes .heroNetNode,
  .sectionHero .heroFloatApi,
  .sectionHero .heroFloatMev,
  .sectionHero .heroVisualFloat,
  .sectionHero .heroVisual::after,
  .sectionHero .heroVisualInner::before {
    animation: none !important;
  }

  .sectionHero .heroFloatInner {
    transform: none !important;
  }
}

section[id] {
  scroll-margin-top: calc(96px + var(--topbarOffset));
}

.revealReady [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 260ms ease-out, transform 260ms ease-out;
  will-change: transform, opacity;
}

.revealReady [data-reveal].isVisible {
  opacity: 1;
  transform: translateY(0);
}

.codeTabsTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.codeTabList {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.68);
}

.codeTab {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(10, 14, 20, 0.72);
  font-size: 13px;
  font-weight: 550;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms ease-out, color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}

.codeTab:hover {
  background: rgba(255, 255, 255, 0.92);
  color: rgba(10, 14, 20, 0.9);
}

.codeTab.isActive {
  background: rgba(255, 255, 255, 0.92);
  color: rgba(10, 14, 20, 0.92);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
}

.codeMetaRow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.codeMetaLabel {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 14, 20, 0.56);
}

.codeMetaValue {
  color: rgba(10, 14, 20, 0.8);
}

.toastHost {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.toast {
  pointer-events: none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadowSm);
  color: rgba(10, 14, 20, 0.82);
  font-size: 13px;
  transform: translateY(6px);
  opacity: 0;
  transition: transform 220ms ease-out, opacity 220ms ease-out;
}

.toast.isVisible {
  transform: translateY(0);
  opacity: 1;
}