/* ---------- local Inter font ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../assets/fonts/inter-400.woff2?v=20260920-2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../assets/fonts/inter-500.woff2?v=20260920-2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../assets/fonts/inter-600.woff2?v=20260920-2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("../assets/fonts/inter-700.woff2?v=20260920-2") format("woff2");
}

/* ============================================================
   Apex — design system
   Dark surface · hairline grid · single accent color
   ============================================================ */

:root {
  /* surfaces */
  --bg:          #08090a;
  --bg-soft:     #0b0c0e;
  --panel:       #0e1013;
  --panel-2:     #121419;
  --rule:        rgba(255, 255, 255, .090);
  --rule-mid:    rgba(255, 255, 255, .11);
  --rule-hi:     rgba(255, 255, 255, .18);
  --line-color:  rgba(255, 255, 255, .090);
  --line-subtle-color: rgba(255, 255, 255, .060);
  --line:        1px solid var(--line-color);
  --line-subtle: 1px solid var(--line-subtle-color);

  /* metin */
  --fg:          #f4f5f7;
  --fg-2:        #9ba1ac;
  --fg-3:        #7a818c;

  /* vurgu */
  --accent:      #7c6bff;
  --accent-hi:   #9a8dff;
  --accent-ink:  #ffffff;
  --accent-wash: rgba(124, 107, 255, .12);
  --accent-plan-glow: rgba(124, 107, 255, .14);
  --signal:      #2fd8a8;

  /* tipografi */
  --font-family: "Inter", sans-serif;
  --display: var(--font-family);
  --text:    var(--font-family);
  --mono:    var(--font-family);
  /* sizing */
  --shell:   1200px;
  --gutter:  clamp(20px, 4.5vw, 52px);
  --band:    clamp(68px, 6.7vw, 96px);

  /* shared spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --head-h:  60px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- temel ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 24px);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  /* Always reserve stable space for the scrollbar. Otherwise, when the
     command palette (or mobile menu) applies overflow:hidden to body,
     the scrollbar disappears, the page widens and all content
     (including the search bar) shifts horizontally, then shifts back
     when it closes. */
  scrollbar-gutter: stable;
}


body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "cv05" 1, "ss03" 1;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, p, dl, dd, figure, ol, ul { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
table { border-collapse: collapse; width: 100%; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 500;
  transform: translateY(-200%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprite symbol { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shell: hairline grid framing the page ---------- */
.shell {
  --grid-cols: repeat(12, minmax(0, 1fr));
  --grid-gap: clamp(8px, 1.65vw, 20px);
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  border-inline: 0;
  display: grid;
  grid-template-columns: var(--grid-cols);
  column-gap: var(--grid-gap);
}

/* Global content frame. Component-level grids remain responsible for their
   internal layout, while every section shares the same 12-column rails. */
.shell > * {
  grid-column: 1 / -1;
  min-width: 0;
}

/* ---------- buttons ---------- */
.btn {
  --btn-h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); padding-inline: 20px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-family: var(--text); font-size: 14.5px; font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), box-shadow .18s var(--ease);
}
.btn--sm { --btn-h: 34px; padding-inline: 14px; font-size: 13.5px; }

.btn--primary {
  background: var(--fg); color: #0a0b0d; font-weight: 550;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
}
.btn--primary:hover { background: #fff; }

.btn--outline {
  border-color: var(--rule-mid); color: var(--fg);
  background: rgba(255, 255, 255, .02);
}
.btn--outline:hover { border-color: var(--rule-hi); background: rgba(255, 255, 255, .05); }

.btn--ghost { border-color: var(--rule-mid); color: var(--fg); }
.btn--ghost:hover { background: rgba(255, 255, 255, .05); }

.btn--quiet { color: var(--fg-2); padding-inline: 14px; }
.btn--quiet:hover { color: var(--fg); background: rgba(255, 255, 255, .05); }

.ghost-link {
  font-size: 14px; color: var(--fg-2);
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.ghost-link:hover { color: var(--fg); }

/* ---------- live badge ---------- */
.live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--fg-2); letter-spacing: -.005em;
}
.live__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(47, 216, 168, .16);
  flex: none;
  animation: liveDotPulse 2.4s var(--ease) infinite;
}
@keyframes liveDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(47, 216, 168, .16); }
  50%      { box-shadow: 0 0 0 6px rgba(47, 216, 168, .06); }
}

/* ---------- marka ---------- */
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand__mark {
  width: 22px; height: 22px; border-radius: 7px;
  background:
    radial-gradient(120% 120% at 22% 18%, #b7a8ff 0%, #7c6bff 42%, #4a34d6 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45),
              0 3px 12px -4px rgba(124, 107, 255, .8);
}
.brand__mark--sm { width: 19px; height: 19px; border-radius: 6px; }
.brand__word {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: -.022em; color: var(--fg);
}

/* ============================================================
   HEADER
   ============================================================ */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: rgba(8, 9, 10, .72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.masthead.is-stuck { border-bottom-color: var(--rule); background: rgba(8, 9, 10, .88); }

.masthead__inner {
  max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--head-h);
  display: flex; align-items: center; gap: 24px;
  border-inline: 0;
}

.nav { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding-inline: 11px; border-radius: 7px;
  font-size: 14px; color: var(--fg-2); letter-spacing: -.008em;
  white-space: nowrap;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.nav__link:hover { color: var(--fg); background: rgba(255, 255, 255, .05); }
.nav__link.is-current { color: var(--fg); font-weight: 700; }

.masthead__actions { display: flex; align-items: center; gap: 18px; }

/* --- mega menu --- */
.menu { position: relative; }
.menu__chevron {
  width: 13px; height: 13px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  opacity: .6; transition: transform .2s var(--ease);
}
.menu.is-open .menu__chevron { transform: rotate(180deg); }
.menu.is-open .menu__trigger { color: var(--fg); background: rgba(255, 255, 255, .05); }

.menu__panel {
  position: absolute; top: calc(100% + 12px); left: -16px;
  width: 620px; padding: 10px;
  background: var(--panel);
  border: 1px solid var(--rule-mid); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4);
  opacity: 0; visibility: hidden;
  transform-origin: top center;
  backface-visibility: hidden;
  transform: perspective(900px) rotateX(-90deg);
}
.menu.is-open .menu__panel {
  opacity: 1;
  visibility: visible;
  animation: menuFlipIn .44s cubic-bezier(.16, .78, .24, 1) forwards;
}

.menu__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; }
.menu__item {
  display: flex; gap: 11px; padding: 10px; border-radius: 10px;
  transition: background-color .15s var(--ease);
}
.menu__item:hover { background: rgba(255, 255, 255, .045); }
.menu__item:hover .menu__icon { border-color: var(--rule-hi); color: var(--accent-hi); }

.menu__icon {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  border: 1px solid var(--rule); background: rgba(255, 255, 255, .03);
  color: var(--fg-2);
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.menu__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.menu__title { display: block; font-size: 14px; font-weight: 500; color: var(--fg); letter-spacing: -.01em; }
.menu__desc  { display: block; font-size: 12.5px; color: var(--fg-3); line-height: 1.45; margin-top: 2px; }

.menu__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding: 12px 12px 6px;
  border-top: 1px solid var(--rule);
}
.menu__foot-link { font-size: 12.5px; color: var(--fg-2); transition: color .15s var(--ease); }
.menu__foot-link:hover { color: var(--fg); }

/* --- mobil --- */
.burger {
  display: none; width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--rule-mid); color: var(--fg);
  place-items: center;
  transition: background-color .12s ease;
}
.burger:active { background: var(--bg-soft); }
.burger svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

.drawer {
  border-top: 1px solid var(--rule);
  background: var(--bg);
  max-height: calc(100dvh - var(--head-h));
  overflow-y: auto;
}
.drawer__nav {
  max-width: var(--shell); margin-inline: auto;
  padding: 14px var(--gutter) 28px;
  display: flex; flex-direction: column;
}
.drawer__link {
  padding: 11px 0; font-size: 16px; color: var(--fg);
  border-bottom: 1px solid var(--rule);
}
.drawer__label {
  margin-top: 22px; margin-bottom: 6px;
  font-size: 12.5px; color: var(--fg-3);
}
.drawer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.drawer__link--sub {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--fg-2); padding: 9px 0;
}
.drawer__link-icon {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  border: 1px solid var(--rule); background: rgba(255, 255, 255, .03);
  color: var(--fg-3);
}
.drawer__link-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drawer__actions { display: grid; gap: 10px; margin-top: 24px; }
.drawer__actions .btn { width: 100%; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  --hero-release-space: clamp(48px, 7.5vw, 88px);
  position: relative;
  isolation: isolate;
  padding-top: var(--hero-release-space);
}

.hero__field {
  position: absolute; inset: -60px 0 auto; height: 760px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 64% 62% at 50% 0%, rgba(124, 107, 255, .24), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .085) 1px, transparent 0);
  background-size: auto, 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 85% 68% at 50% 6%, #000 22%, transparent 78%);
  mask-image: radial-gradient(ellipse 85% 68% at 50% 6%, #000 22%, transparent 78%);
}

.shell--hero { position: relative; z-index: 1; padding-bottom: clamp(48px, 6.5vw, 80px); }

/* Keep the announcement intentionally narrower than the full 12-column shell.
   It shares the hero's left rail without becoming a full-width stripe. */
.shell--hero > .release {
  grid-column: 1 / span 10;
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

.release {
  margin-bottom: var(--hero-release-space);
  display: inline-flex; align-items: center; gap: 9px;
  height: 30px; padding: 0 12px 0 11px;
  border: 1px solid var(--rule-mid); border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-size: 12.5px; color: var(--fg-2); letter-spacing: -.005em;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.release:hover { border-color: var(--rule-hi); color: var(--fg); }
.release__sep { width: 1px; height: 13px; background: var(--rule-mid); }
.release__more { color: var(--fg-3); }
.release:hover .release__more { color: var(--fg-2); }

.hero__title {
  margin-top: 0;
  font-family: var(--display);
  font-size: clamp(40px, 6.6vw, 76px);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -.042em;
  color: #fff;
  text-wrap: balance;
}

.hero__lede {
  margin-top: 18px;
  max-width: 46ch;
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.55;
  color: var(--fg-2);
  letter-spacing: -.012em;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }

/* --- konsol --- */
.console {
  --console-accent: #6b6f78;
  position: relative;
  margin-top: clamp(40px, 5vw, 60px);
  border: 1px solid var(--rule-mid);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .05) inset,
    0 40px 90px -40px rgba(0, 0, 0, .95),
    0 0 90px -55px rgba(120, 122, 128, .5);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.console::before {
  content: "";
  position: absolute; top: 0; left: 6%; right: 6%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  pointer-events: none;
  z-index: 2;
}

/*
.console:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .06) inset,
    0 48px 100px -40px rgba(0, 0, 0, .95),
    0 0 110px -50px rgba(120, 122, 128, .55);
}
*/
.console__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 42px; padding-inline: 14px;
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, .018);
}
.console__tabs { display: flex; align-items: center; gap: 12px; min-width: 0; }
.console__dots { display: flex; gap: 6px; }
.console__dots i {
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.05);
  opacity: .85;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.console:hover .console__dots i { opacity: 1; }
.console__dots i:nth-child(1) { background: #ff5f57; }
.console__dots i:nth-child(2) { background: #febc2e; }
.console__dots i:nth-child(3) { background: #28c840; }
.console__name {
  font-family: var(--mono); font-size: 12px; color: var(--fg-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(127, 127, 127, .09);
  border: 1px solid var(--rule);
}

.console__body { padding: 20px clamp(16px, 2.4vw, 26px) 22px; }

.stream { font-family: var(--mono); font-size: clamp(12.5px, 1.25vw, 13.5px); line-height: 2; }
.stream__line {
  position: relative;
  padding-left: 22px;
  color: var(--fg-2);
  word-break: break-word;
}
.stream__prompt { position: absolute; left: 0; color: var(--console-accent); }
.stream__line[data-kind="cmd"] { color: var(--fg); }
.stream__line[data-kind="ok"]::before {
  content: "✓"; position: absolute; left: 1px;
  color: var(--signal); font-size: 12px;
}
.stream__line[data-kind="url"] { color: var(--fg-3); }
.stream__line[data-kind="url"] a {
  color: var(--fg); border-bottom: 1px solid var(--rule-hi); padding-bottom: 1px;
  margin-left: 8px;
}
.stream__line[data-kind="url"] a:hover { border-bottom-color: var(--accent-hi); }
.stream__dim { color: var(--fg-3); margin-left: 8px; }

.stream__line[data-gap="1"] { margin-top: 15px; }

/* typing animation — one-time entrance */
.stream.is-playing .stream__line { opacity: 0; }
.stream.is-playing .stream__line.is-in { opacity: 1; animation: lineIn .32s var(--ease) both; }
@keyframes lineIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.stream.is-playing .stream__line.is-cursor::after {
  content: ""; display: inline-block;
  width: 7px; height: 14px; margin-left: 2px;
  background: var(--console-accent); vertical-align: -2px;
  animation: blink .9s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* --- status rows: `apex status --edge` output, rendered as terminal text --- */
.stream__stat {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 2vw, 22px);
  padding-top: 1px;
}
.stream__stat-label {
  flex: none;
  min-width: 18ch;
  white-space: nowrap;
  color: var(--fg-3);
}
.stream__stat-value {
  flex: none;
  color: var(--fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stream__stat-value i {
  font-style: normal; font-weight: 400;
  color: var(--fg-3); margin-left: 4px; font-size: .92em;
}
.stream__stat-spark {
  margin-left: auto;
  color: var(--stat-hue, var(--fg-3));
  letter-spacing: 1px;
  opacity: .8;
  font-size: 12px;
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .stream__stat { flex-wrap: wrap; row-gap: 4px; }
  .stream__stat-spark { margin-left: 0; order: 3; flex-basis: 100%; }
}

/* ============================================================
   REFERANSLAR
   ============================================================ */
.clients .shell {
  padding-block: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--rule);
  display: flex; align-items: center;
  gap: 24px 40px;
}
.clients__note { flex: none; font-size: 13px; color: var(--fg-3); letter-spacing: -.005em; }
.clients__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.clients__row {
  --marquee-gap: 34px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  width: max-content;
  will-change: transform;
  animation: clientsMarquee 28s linear infinite;
}
.clients__group {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--marquee-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
.clients__group + .clients__group {
  margin-left: var(--marquee-gap);
}
@keyframes clientsMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.clients__group li {
  flex: none;
  font-family: var(--display); font-size: 16px; font-weight: 500;
  letter-spacing: -.024em; color: var(--fg-2); white-space: nowrap;
  opacity: .78; transition: opacity .2s var(--ease), color .2s var(--ease);
}
.clients__group li:hover { opacity: 1; color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .clients__row { animation: none; }
}

/* ============================================================
   SHARED SECTION
   ============================================================ */
.band > .shell {
  padding-block: var(--band);
  border-top: 1px solid var(--rule);
}

.lead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 52px); align-items: end;
  margin-bottom: clamp(28px, 3.2vw, 44px);
}
.lead--split { align-items: center; grid-template-columns: minmax(0, 1fr) auto }

.lead__title {
  font-family: var(--display);
  font-size: clamp(30px, 4.1vw, 46px);
  font-weight: 600; line-height: 1.08; letter-spacing: -.036em;
  color: #fff;
}
.lead__text {
  font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.6;
  color: var(--fg-2); max-width: 46ch; letter-spacing: -.01em;
}

/* ============================================================
   FEATURES
   ============================================================ */
/* Keep the feature grid visually tight: the content ends well above
   the band boundary, so the default section padding is reduced here. */
#features > .shell {
  padding-bottom: clamp(44px, 4.2vw, 60px);
  border-top: 0;
}

.spotlight {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(24px, 3.2vw, 44px); align-items: center;
  padding: clamp(24px, 2.8vw, 36px);
  border: 1px solid var(--rule-mid); border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(124, 107, 255, .09), transparent 58%),
    var(--panel);
}
.spotlight__title {
  font-family: var(--display); font-size: clamp(21px, 2.4vw, 27px);
  font-weight: 600; letter-spacing: -.028em; color: var(--fg);
}
.spotlight__text {
  margin-top: 10px; font-size: 15px; line-height: 1.62;
  color: var(--fg-2); max-width: 40ch;
}
.spotlight__facts {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px;
}
.spotlight__facts li {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12.5px; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.spotlight__facts span { color: var(--fg-3); }

.spotlight__chart svg { width: 100%; height: clamp(150px, 18vw, 200px); overflow: visible; }
.spotlight__chart .grid line { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 5; }
.spotlight__chart .trace {
  fill: none; stroke: var(--accent-hi); stroke-width: 2;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.spotlight__chart .head { fill: var(--accent-hi); stroke: var(--panel); stroke-width: 3; }
.spotlight__axis {
  display: flex; justify-content: space-between; margin-top: 12px;
  font-size: 12px; color: var(--fg-3);
}

.specs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(36px, 4vw, 52px);
  background: transparent;
  border-top: 0;
}
.spec {
  background: var(--bg);
  padding: clamp(24px, 3vw, 34px) clamp(20px, 2.4vw, 30px);
  border-right: 1px solid var(--rule);
}
.specs > .spec:last-child { border-right: 0; }
.specs > .spec:first-child { padding-left: 0; }
.specs > .spec:last-child  { padding-right: 0; }
.spec__icon {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; border: 1px solid var(--rule-mid);
  background: rgba(255, 255, 255, .03); color: var(--accent-hi);
}
.spec__icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spec__title {
  margin-top: 18px;
  font-family: var(--display); font-size: 18px; font-weight: 600;
  letter-spacing: -.022em; color: var(--fg);
}
.spec__text { margin-top: 9px; font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }

/* ============================================================
   ARCHITECTURE
   ============================================================ */
/* Architecture uses the same 12-column geometry as the page shell.
   Headline, network/table, and metrics now share the same vertical rails
   instead of using unrelated nested column systems. */
#architecture .lead {
  grid-template-columns: subgrid;
  column-gap: var(--grid-gap);
  row-gap: 0;
  align-items: start;
  margin-bottom: clamp(32px, 3.6vw, 48px);
}
#architecture .lead__title { grid-column: 1 / span 6; }
#architecture .lead__text { grid-column: 7 / -1; align-self: start; max-width: 46ch; }

.topology {
  display: grid; grid-template-columns: subgrid;
  column-gap: var(--grid-gap); row-gap: 0; align-items: start;
}
#architecture .topology__graph {
  grid-column: 1 / span 6;
  min-width: 0;
  display: flex; justify-content: center; align-items: flex-start;
}
#architecture .topology__graph svg { width: 100%; height: auto; max-width: 440px; margin-inline: auto; }
#architecture .topology__table { grid-column: 7 / -1; min-width: 0; }

.topology .halo { fill: none; stroke: var(--rule-mid); stroke-width: 1.4; stroke-dasharray: 3 5; }
.topology .edges line {
  stroke: var(--rule-mid); stroke-width: 1.4;
  transition: stroke .2s var(--ease), stroke-width .2s var(--ease);
}
.topology .edges line.is-lit { stroke: var(--accent-hi); stroke-width: 2; }

.topology .node { cursor: pointer; }
.topology .node__hit { fill: transparent; }
.topology .node__dot {
  fill: var(--bg); stroke: var(--rule-hi); stroke-width: 2;
  transition: fill .2s var(--ease), stroke .2s var(--ease), r .2s var(--ease);
}
.topology .node.is-lit .node__dot { fill: var(--accent); stroke: var(--accent-hi); r: 7; }
.topology .node__code {
  font-family: var(--mono); font-size: 12px; fill: var(--fg-3);
  transition: fill .2s var(--ease);
}
.topology .node.is-lit .node__code { fill: var(--fg); }
.topology .node:focus { outline: none; }
.topology .node:focus-visible .node__dot { stroke: var(--accent-hi); }

.topology .core__ring { fill: none; stroke: var(--rule-mid); }
.topology .core__disc {
  fill: var(--accent);
  filter: drop-shadow(0 0 14px rgba(124, 107, 255, .8));
}
.topology .core__label {
  font-family: var(--mono); font-size: 11.5px; fill: var(--fg-3); letter-spacing: .02em;
}

.regions { font-size: 14px; width: 100%; min-width: 0; table-layout: fixed; }
.regions thead th:nth-child(1) { width: 22%; }
.regions thead th:nth-child(2) { width: 32%; }
.regions thead th:nth-child(3) { width: 46%; }
.regions caption { text-align: left; }
.regions thead th {
  padding: 0 0 10px; text-align: left;
  font-size: 12px; font-weight: 450; color: var(--fg-3);
  border-bottom: 1px solid var(--rule-mid);
}
.regions tbody tr {
  border-bottom: 1px solid var(--rule);
  transition: background-color .16s var(--ease);
}
.regions tbody tr:hover, .regions tbody tr.is-lit { background: rgba(255, 255, 255, .035); }
.regions tbody th, .regions tbody td { padding: 13px 0; text-align: left; font-weight: 400; }
.regions tbody th {
  font-family: var(--mono); font-size: 13px; color: var(--fg); width: 22%;
}
.regions tbody td { color: var(--fg-2); }
.regions__num {
  display: grid;
  grid-template-columns: minmax(72px, 84px) minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  justify-content: stretch;
  min-width: 0;
  width: 100%;
  text-align: left !important;
  font-variant-numeric: tabular-nums;
  color: var(--fg) !important;
  white-space: normal;
  overflow-wrap: anywhere;
}
.regions thead .regions__num { text-align: right; }
.bar {
  display: block;
  width: 100%; height: 3px; margin-right: 0;
  border-radius: 2px; background: var(--rule-mid);
  position: relative; overflow: hidden;
}
.bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--w); border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
}
.topology__hint { margin-top: 12px; font-size: 12.5px; color: var(--fg-3); }

.tally {
  display: grid; grid-template-columns: subgrid;
  margin-top: clamp(32px, 3.6vw, 48px);
}
/* ---------- utility: short/single-line content blocks (stats, avatars, badges) ---------- */
/* Use on any component whose content is a number, name, icon, or other
   short single-line item that should sit centered within its column,
   as opposed to paragraph-style content which stays left-aligned. */
.center-block {
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
}

.tally__item {
  grid-column: span 3;
  padding: 20px clamp(16px, 2vw, 24px) 0;
  min-width: 0;
  border-right: 1px solid var(--rule);
}
.tally__item:last-child { border-right: 0; }
.tally dd {
  font-family: var(--display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 600;
  letter-spacing: -.035em; color: #fff; font-variant-numeric: tabular-nums;
}
.tally dt { order: 2; margin-top: 6px; font-size: 13px; color: var(--fg-3); }

/* ============================================================
   DEVELOPER
   ============================================================ */
.devkit {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
  gap: clamp(32px, 4.5vw, 64px); align-items: center;
}
.devkit .lead__text { margin-top: 14px; }

.ticks { margin-top: 24px; display: grid; gap: 11px; }
.ticks li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  font-size: 14.5px; color: var(--fg-2); line-height: 1.5;
}
.ticks svg {
  width: 20px; height: 20px; padding: 3px; margin-top: 1px;
  border-radius: 50%; background: var(--accent-wash);
  fill: none; stroke: var(--accent-hi); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.editor {
  width: 560px;
  height: 440px;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--rule-mid); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 32px 70px -40px rgba(0, 0, 0, .9);
  overflow: hidden;
}
.editor__bar {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding-right: 10px;
  background: rgba(255, 255, 255, .018);
}
.editor__tabs { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.editor__tabs::-webkit-scrollbar { display: none; }
.editor__tab {
  position: relative; padding: 13px 16px;
  font-family: var(--mono); font-size: 12.5px; color: var(--fg-3);
  white-space: nowrap;
  transition: color .16s var(--ease);
}
.editor__tab:hover { color: var(--fg-2); }
.editor__tab.is-active { color: var(--fg); }
.editor__tab.is-active::after {
  content: ""; position: absolute; inset: auto 12px -1px; height: 1px;
  background: var(--accent-hi);
}

.editor__copy {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding-inline: 10px; border-radius: 7px;
  border: 1px solid var(--rule); color: var(--fg-3);
  font-size: 12px;
  white-space: nowrap;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.editor__copy:hover { color: var(--fg); border-color: var(--rule-hi); }
.editor__copy svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.editor__copy.is-done { color: var(--signal); border-color: rgba(47, 216, 168, .4); }

.editor__body {
  height: calc(100% - 45px);
  box-sizing: border-box;
  padding: 18px clamp(16px, 2vw, 24px);
  overflow: hidden;
  background: var(--bg-soft);
}
.editor__body pre {
  margin: 0;
  width: max-content;
  min-width: 100%;
  box-sizing: border-box;
  overflow: visible;
  background: transparent;
}
.editor__body code {
  font-family: var(--mono); font-size: 13px; line-height: 1.85;
  color: var(--fg-2); white-space: pre;
  display: inline-block;
  width: max-content;
}
.tok-key { color: #c4b5fd; }
.tok-str { color: #7ee3c0; }
.tok-fn  { color: #8ab4ff; }
.tok-num { color: #f0b37e; }
.tok-com { color: var(--fg-3); font-style: italic; }
.tok-pun { color: var(--fg-3); }

/* ============================================================
   PRICING
   ============================================================ */
.switch {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--rule-mid); border-radius: 10px;
  background: var(--bg-soft);
}
.switch__opt {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding-inline: 14px; border-radius: 7px;
  border: 1px solid transparent;
  font-size: 13.5px; color: var(--fg-2);
  white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.switch__opt:hover { color: var(--fg); }
.switch__opt.is-active,
.switch__opt[aria-pressed="true"] {
  background: var(--panel);
  border-color: var(--rule-mid);
  color: var(--fg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.switch__save {
  font-family: var(--mono); font-size: 11px;
  color: var(--signal);
}

.plans {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  overflow: hidden; background: var(--bg);
}
.plan {
  position: relative; display: flex; flex-direction: column;
  padding: calc(clamp(24px, 2.6vw, 32px) + 16px) clamp(22px, 2.6vw, 32px) clamp(24px, 2.6vw, 32px);
  background: var(--bg);
}
/* Thin separator between cards */
.plan:not(:first-child)::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: var(--rule);
}
.plan--pick {
  background:
    radial-gradient(100% 48% at 50% 0%, var(--accent-plan-glow), transparent 100%),
    var(--bg);
}
.plan__tag {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  padding: 4px 12px 5px; border-radius: 0 0 8px 8px;
  background: var(--accent); color: #fff;
  font-size: 11.5px; font-weight: 500; letter-spacing: -.005em;
}
.plan__name {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  letter-spacing: -.02em; color: var(--fg);
}
.plan__for { margin-top: 7px; font-size: 13.5px; color: var(--fg-3); min-height: 2.9em; line-height: 1.45; }
.plan__price {
  display: flex; align-items: flex-end; gap: 8px;
  margin-top: 16px; min-height: clamp(38px, 4.3vw, 46px);
}
.plan__amount {
  font-family: var(--display); font-size: clamp(34px, 4vw, 42px); font-weight: 600;
  line-height: 1.02; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums;
}
.plan__amount--word { font-size: clamp(26px, 3vw, 32px); }
.plan__unit { font-size: 13.5px; line-height: 1.5; color: var(--fg-3); }
.plan__cta { margin-top: 20px; width: 100%; }
.plan__list {
  margin-top: 24px; padding-top: 22px; display: grid; gap: 12px;
  border-top: 1px solid var(--rule);
}
.plan__list li {
  display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start;
  font-size: 14px; color: var(--fg-2); line-height: 1.45;
}
.plan__list svg {
  width: 18px; height: 18px; padding: 3px; margin-top: 1px;
  border-radius: 50%; background: rgba(255, 255, 255, .05);
  fill: none; stroke: var(--fg); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.plan--pick .plan__list svg { background: var(--accent-wash); stroke: var(--accent-hi); }

.plans__note {
  margin-top: 16px; font-size: 13px; color: var(--fg-3);
  max-width: 62ch;
}

/* ============================================================
   CLOSING
   ============================================================ */
.closer > .shell { padding-block: 0; padding-inline: 0; border-top: 0; }
.closer__inner {
  position: relative;
  padding: clamp(56px, 6vw, 72px) var(--gutter);
  text-align: center;
  background: var(--bg);
}
.closer__title {
  font-family: var(--display);
  font-size: clamp(28px, 4.4vw, 48px); font-weight: 600;
  line-height: 1.08; letter-spacing: -.038em; color: #fff;
  text-wrap: balance;
}
.closer__text {
  margin: 14px auto 0; max-width: 44ch;
  font-size: clamp(15px, 1.4vw, 17px); color: var(--fg-2); letter-spacing: -.01em;
}
.closer__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  position: relative;
  color: var(--fg);
  background: radial-gradient(125% 125% at 50% 10%, var(--bg) 40%, var(--accent) 100%);
  overflow: hidden;
  border-top: 0;
}

.foot > .shell {
  padding-block: clamp(60px, 6.5vw, 76px) 24px;
  border-top: 0;
}

.foot__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(130px, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.foot__brand {
  min-width: 0;
  padding-right: clamp(8px, 2vw, 28px);
}

.foot__blurb {
  margin-top: 16px;
  max-width: 31ch;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--fg-3);
}

.social {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}

.social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--fg-3);
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}

.social a:hover {
  color: var(--fg);
  border-color: var(--rule-hi);
  background: var(--bg-soft);
}

.social svg { width: 18px; height: 18px; }

.foot__col { min-width: 0; }

.foot__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.foot__col ul {
  margin-top: 17px;
  display: grid;
  gap: 11px;
}

.foot__col a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fg-3);
  transition: color .16s var(--ease);
}

.foot__col a:hover {
  color: var(--fg);
}

.foot__blog-link {
  gap: 7px;
}

.foot__new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 22px;
  height: 18px;
  padding: 2px 5px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent-wash) 72%, transparent);
  box-shadow: none;
  color: var(--accent);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .045em;
  text-transform: uppercase;
}


.foot__signature {
  margin-top: clamp(44px, 5.5vw, 68px);
  color: var(--fg);
  font-family: var(--display);
  font-size: clamp(64px, 19vw, 280px);
  font-weight: 700;
  line-height: .76;
  letter-spacing: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  white-space: nowrap;
  user-select: none;
  opacity: .055;
  overflow: hidden;
}

.foot__signature span:nth-child(1) { justify-self: start; }
.foot__signature span:nth-child(2),
.foot__signature span:nth-child(3) { justify-self: center; }
.foot__signature span:nth-child(4) { justify-self: end; }

.foot__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: clamp(40px, 5vw, 56px);
  padding-top: 22px;
  border-top: var(--line-subtle);
  font-size: 12.5px;
  color: var(--fg-3);
}

.foot__bottom .theme-switcher {
  margin-left: auto;
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  width: 118px;
  height: 34px;
  padding: 3px;
  border: 1px solid var(--rule-mid);
  border-radius: 999px;
  background: var(--panel);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.35);
}

.foot__bottom .theme-switcher::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 3px auto 3px 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 2px 5px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.16);
  pointer-events: none;
  transform: translate3d(0,0,0);
  transition: transform .28s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

html[data-theme="dark"] .foot__bottom .theme-switcher::before {
  background: #6f5ef2;
}

.foot__bottom .theme-switcher[data-active-theme="dark"]::before {
  transform: translate3d(100%,0,0);
}

.foot__bottom .theme-switcher__label,
.foot__bottom .theme-switcher__icon {
  display: none;
}

.foot__bottom .theme-switcher__option {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
  transition: color .18s ease, transform .14s ease;
}

.foot__bottom .theme-switcher__option:active { transform: scale(.96); }
.foot__bottom .theme-switcher__option[aria-pressed="true"] { color: var(--accent-ink); }

@media (max-width: 1040px) {
  .foot__grid {
    grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, 1fr));
    column-gap: clamp(28px, 6vw, 54px);
    row-gap: 34px;
  }

  .foot__brand { grid-row: span 2; }
}

@media (max-width: 720px) {
  .foot > .shell {
    padding-block: 50px 24px;
  }

  .foot__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }

  .foot__brand {
    grid-column: 1 / -1;
    grid-row: auto;
    padding-right: 0;
  }

  .foot__blurb { max-width: 42ch; }

  .foot__bottom {
    margin-top: 34px;
    gap: 12px 18px;
  }

  .foot__bottom .theme-switcher {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .foot__grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .foot__col ul {
    margin-top: 12px;
    gap: 8px;
  }

  .foot__col a {
    min-height: 28px;
    font-size: 14px;
  }

  .foot__bottom {
    align-items: flex-start;
    flex-direction: column;
    margin-top: 34px;
  }

  .foot__bottom .theme-switcher {
    width: 112px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .social a,
  .foot__col a,
  .foot__bottom .theme-switcher::before,
  .foot__bottom .theme-switcher__option { transition: none; }
}

/* ============================================================
   COMMAND PALETTE
   ============================================================ */
/* Keep the document's usable width unchanged while the palette locks scrolling.
   Without this compensation, hiding the viewport scrollbar makes the header and
   the page content jump horizontally when the palette opens or closes. */
body.command-palette-open {
  overflow: hidden;
  padding-right: var(--scrollbar-compensation, 0px);
}

.shortcut-keys {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  margin-left: auto;
  color: var(--fg-2);
}

.shortcut-key {
  display: inline-grid;
  place-items: center;
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #eef1f5 #e1e5eb #b0b8c4 #e1e5eb;
  border-radius: 4px;
  color: #454d5a;
  background: linear-gradient(180deg, #ffffff 0%, #eef1f5 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1.5px 0 0 #aab2bf,
    0 3px 2px rgba(15, 23, 42, .12);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  user-select: none;
  transform: translateY(0);
  transition: transform .12s cubic-bezier(.4, 0, 1, 1), box-shadow .12s cubic-bezier(.4, 0, 1, 1), border-color .12s ease;
}

.shortcut-key--meta { width: 30px; font-size: 10px; }
.shortcut-key--ctrl { width: 30px; font-size: 8.5px; }
.shortcut-key--letter { width: 22px; font-size: 9px; }

.nav__search .shortcut-key--ctrl { display: none; }
.drawer__search .shortcut-key--ctrl { display: none; }
body.platform-windows .shortcut-key--meta { display: none; }
body.platform-windows .shortcut-key--ctrl { display: inline-grid; }

.nav__search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 118px;
  height: 34px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--fg-2);
  background: var(--bg);
  transform: translateY(0) scale(1);
  box-shadow: none;
  transition:
    transform .32s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .32s cubic-bezier(.34, 1.56, .64, 1),
    border-color .16s ease,
    background-color .16s ease;
}

.nav__search:hover {
  border-color: var(--rule-mid);
  background: var(--bg-soft);
}

/* Focus programmatically returns here when the palette opens/closes.
   The default thick+offset generic focus ring looked like it was
   suddenly enlarging the box when the button already has its own
   border/shadow language — so instead we use a thin ring that sits
   on the button's own border-radius and doesn't change its size. */
.nav__search:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-hi);
}

.nav__search:active {
  box-shadow:
    inset 0 2px 5px rgba(15, 23, 42, .18),
    inset 0 1px 2px rgba(15, 23, 42, .08);
  transition:
    box-shadow .07s cubic-bezier(.4, 0, 1, 1);
}

.nav__search:active .shortcut-key,
.drawer__search:active .shortcut-key {
  border-color: #dde1e8 #d8dce3 #c2c8d2 #d8dce3;
  background: #eef1f5;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .10);
  transform: translateY(1.5px);
  transition: transform .07s cubic-bezier(.4, 0, 1, 1), box-shadow .07s cubic-bezier(.4, 0, 1, 1), border-color .07s cubic-bezier(.4, 0, 1, 1);
}

.nav__search > svg,
.drawer__search > svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
}

.nav__search > span:not(.shortcut-keys) {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.drawer__search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  margin-bottom: 8px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  color: var(--fg);
  background: var(--card);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transform: translateY(0) scale(1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition:
    border-color .18s ease, background-color .18s ease, color .18s ease,
    transform .32s cubic-bezier(.34, 1.56, .64, 1), box-shadow .32s cubic-bezier(.34, 1.56, .64, 1);
}

.drawer__search:hover {
  border-color: var(--rule-mid);
  background: var(--card-2);
}

.drawer__search:active {
  transform: translateY(1px) scale(.99);
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, .12);
  transition: transform .07s cubic-bezier(.4, 0, 1, 1), box-shadow .07s cubic-bezier(.4, 0, 1, 1);
}

.drawer__search > span:not(.shortcut-keys) { flex: 1; }
.drawer__search .shortcut-keys { display: none; }

.drawer__search:hover .shortcut-key {
  color: var(--fg);
  border-color: var(--rule-hi);
}

@media (max-width: 900px) {
  .nav__search {
    min-width: 0;
    width: 40px;
    padding: 0;
    justify-content: center;
  }

  .nav__search > span:not(.shortcut-keys),
  .nav__search .shortcut-keys { display: none; }
}

.command-palette[hidden] { display: none; }

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: start center;
  padding: min(14vh, 128px) 20px 40px;
}

.command-palette__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(9px) saturate(140%);
  -webkit-backdrop-filter: blur(9px) saturate(140%);
  animation: commandPaletteFade .15s ease-out both;
}

.command-palette__dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: min(680px, calc(100dvh - 80px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    0 24px 60px -14px rgba(15, 23, 42, .28),
    0 10px 24px -10px rgba(15, 23, 42, .13),
    0 0 0 1px rgba(15, 23, 42, .03);
  animation: commandPaletteIn .16s cubic-bezier(.2, .9, .25, 1) both;
}

.command-palette__head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 0 22px;
  border-bottom: 1px solid var(--rule);
}

.command-palette__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--fg-3);
}

.command-palette__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.command-palette__input {
  min-width: 0;
  flex: 1;
  height: 62px;
  padding: 0;
  border: 0;
  outline: 0 !important;
  box-shadow: none !important;
  appearance: none;
  background: transparent;
  color: var(--fg);
  font: 500 17px/1 var(--text);
  letter-spacing: -.008em;
}

.command-palette__input::placeholder { color: var(--fg-3); }
.command-palette__input:focus,
.command-palette__input:focus-visible,
.command-palette__input:hover {
  border: 0;
  outline: 0 !important;
  box-shadow: none !important;
}

.command-palette__close {
  flex: none;
  min-width: 38px;
  height: 27px;
  padding: 0 8px;
  border: 1px solid var(--rule-mid);
  border-radius: 6px;
  color: var(--fg-3);
  background: var(--bg-soft);
  font: 11px/1 var(--mono);
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.command-palette__close:hover {
  color: var(--fg);
  border-color: var(--rule-hi);
}

.command-palette__close:focus,
.command-palette__close:focus-visible,
.command-palette__result:focus,
.command-palette__result:focus-visible {
  outline: 0;
  box-shadow: none;
}

.command-palette__body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
}

.command-palette__results {
  display: grid;
  gap: 2px;
}

.command-palette__group-label {
  padding: 14px 12px 8px;
  color: var(--fg-3);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.command-palette__group-label:not(:first-child) {
  margin-top: 8px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}

.command-palette__result {
  width: 100%;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease;
}

.command-palette__result:hover,
.command-palette__results.is-moved .command-palette__result.is-active {
  background: var(--accent-wash);
}

.command-palette__result:hover .command-palette__result-icon,
.command-palette__results.is-moved .command-palette__result.is-active .command-palette__result-icon {
  color: var(--accent);
  background: var(--panel);
}

.command-palette__result-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: var(--fg-3);
  background: var(--bg-soft);
  transition: color .12s ease, background-color .12s ease;
}

.command-palette__result-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.command-palette__result-title {
  overflow: hidden;
  color: var(--fg-2);
  font-size: 15px;
  font-weight: 450;
  letter-spacing: -.006em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-palette__match {
  color: var(--fg);
  font-weight: 600;
  background: var(--accent-wash);
  border-radius: 3px;
  padding: 1px 0;
}

.command-palette__result:hover .command-palette__result-title,
.command-palette__results.is-moved .command-palette__result.is-active .command-palette__result-title {
  color: var(--fg);
}

.command-palette__result-meta {
  flex: none;
  overflow: hidden;
  color: var(--fg-3);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-palette__empty {
  margin: 32px 10px;
  color: var(--fg-3);
  font-size: 14px;
  text-align: center;
}

.command-palette__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  border-top: 1px solid var(--rule);
  color: var(--fg-3);
  font-size: 12px;
}

.command-palette__foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.command-palette__foot kbd {
  min-width: 22px;
  padding: 4px 6px;
  border: 1px solid var(--rule-mid);
  border-radius: 6px;
  color: var(--fg-2);
  background: var(--bg-soft);
  text-align: center;
  font: 11px/1.3 var(--mono);
}

@keyframes commandPaletteIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes commandPaletteFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

html[data-theme="dark"] .command-palette__backdrop {
  background: rgba(2, 3, 5, .6);
}

html[data-theme="dark"] .command-palette__dialog {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 24px 60px -16px rgba(0, 0, 0, .55),
    0 10px 24px -10px rgba(0, 0, 0, .4),
    0 0 0 1px rgba(0, 0, 0, .3);
}

@media (prefers-reduced-motion: reduce) {
  .command-palette__backdrop,
  .command-palette__dialog { animation: none; }
}

@media (max-width: 900px) {
  .command-palette {
    padding: 14px;
    place-items: start center;
  }

  .command-palette__dialog {
    max-height: calc(100dvh - 28px);
    border-radius: 14px;
  }

  .command-palette__head { min-height: 58px; }
  .command-palette__input { height: 48px; font-size: 15px; }
  .command-palette__foot { gap: 9px; padding-inline: 10px; }
}

@media (max-width: 520px) {
  .command-palette__foot span:nth-child(2) { display: none; }
  .command-palette__result-title { font-size: 14px; }
}

/* ============================================================
   RESPONSIVE LAYOUT
   ============================================================ */
@media (max-width: 1080px) {
  .menu__panel { width: 520px; }
  .spotlight { grid-template-columns: minmax(0, 1fr) }
  .devkit { grid-template-columns: minmax(0, 1fr) }
  #architecture .topology { grid-template-columns: minmax(0, 1fr); }
  #architecture .topology__graph,
  #architecture .topology__table { grid-column: 1 / -1; }
  #architecture .topology__graph { order: -1; }
}

@media (max-width: 900px) {
  .nav, .masthead__actions { display: none; }
  .burger { display: grid; }
  .masthead__inner { justify-content: space-between; gap: 12px; }
  .lead { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
  #architecture .lead__title, #architecture .lead__text { grid-column: 1 / -1; }
  .specs { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .spec { padding-inline: 0 !important; padding-bottom: 26px; }
  .plans { grid-template-columns: minmax(0, 1fr) }
  .plan:not(:first-child)::before { content: none; }
  .plan:not(:first-child) { border-top: 1px solid var(--rule); }
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  :root { --band: 56px; }
  .shell--hero > .release { grid-column: 1 / -1; }
  .shell, .masthead__inner, .hero__frame { border-inline: 0; }
  .clients .shell { flex-direction: column; align-items: flex-start; gap: 18px; }
  .clients__viewport { width: 100%; align-self: stretch; }
  .tally { grid-template-columns: subgrid; }
  .tally__item { grid-column: span 6; padding-top: 20px; }
  .tally__item:nth-child(2n) { border-right: 0; }
  .hero__lede { max-width: none; }
  .lead--split { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 900px) {
  .plan__for { min-height: 0; }
  .editor { width: 100%; }
  .editor__body {
    overflow: hidden;
  }
  .editor__body code {
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .tally__item {
    grid-column: 1 / -1;
    padding-inline: 0;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 20px;
  }
  .tally__item:last-child { border-bottom: 0; padding-bottom: 0; }
  .editor__body code { font-size: 11.5px; }
  .drawer__grid { grid-template-columns: minmax(0, 1fr) }
  .foot__grid { grid-template-columns: minmax(0, 1fr) }
  .hero__cta .btn, .closer__cta .btn { width: 100%; }
  .spotlight__facts li { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   MOTION PREFERENCE
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .stream.is-playing .stream__line { opacity: 1; }
}

/* ============================================================
   INNER PAGES — shared components
   Shared components used on inner pages, matching the main page design language,
   common structures: page header, card grids, table, form,
   timeline, FAQ, sidebar, and badges.
   ============================================================ */

.page-hero { padding-top: calc(var(--band) * .82); padding-bottom: calc(var(--band) * .5); }
.page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 18px;
}
.page-hero__title {
  font-family: var(--display); font-size: clamp(32px, 4.6vw, 50px);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.08; color: var(--fg); max-width: 22ch;
}
.page-hero__text { margin-top: 18px; font-size: 17px; line-height: 1.62; color: var(--fg-2); max-width: 58ch; }
.page-hero__cta { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero--split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }

/* ---------- 404 ---------- */
.not-found { text-align: center; padding-bottom: calc(var(--band) * .8); }
.not-found__inner { display: flex; flex-direction: column; align-items: center; }
.not-found .page-hero__eyebrow {
  font-family: var(--display); font-size: clamp(56px, 10vw, 96px); font-weight: 700;
  letter-spacing: -.03em; color: var(--accent); text-transform: none; margin-bottom: 8px;
}
.not-found .page-hero__title { max-width: 32ch; }
.not-found .page-hero__text { max-width: 48ch; margin-inline: auto; }
.not-found .page-hero__cta { justify-content: center; }
.not-found__links {
  list-style: none; margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--rule);
  display: flex; gap: 24px; flex-wrap: wrap; justify-content: center;
}
.not-found__links a { color: var(--fg-2); font-size: 14px; text-decoration: none; }
.not-found__links a:hover { color: var(--fg); text-decoration: underline; }

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

.card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px; border: 1px solid var(--rule); border-radius: var(--r-lg);
  text-align: center;
  transition: border-color .18s var(--ease);
}
.card:hover { border-color: var(--rule-hi); }
.card__icon {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--rule); background: var(--accent-wash); color: var(--accent); margin-bottom: 4px;
}
.card__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card__title { font-family: var(--display); font-size: 16.5px; font-weight: 600; letter-spacing: -.012em; }
.card__desc { font-size: 14px; line-height: 1.55; }
.card__meta { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12.5px; color: var(--fg-3); }
.card__foot-link { margin-top: 6px; font-size: 13.5px; font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: 5px; }

.badge, .chip, .tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding-inline: 10px; border-radius: 999px;
  border: 1px solid transparent; font-size: 12px; font-weight: 600; letter-spacing: -.005em;
}
.tag--muted { background: rgba(127,127,127,.1); color: var(--fg-2); border-color: var(--rule-mid); }
.tag--new { background: rgba(47,216,168,.14); color: #1a9974; }
.tag--improved { background: var(--accent-wash); color: var(--accent); }
.tag--fixed { background: rgba(255,178,80,.16); color: #a5680c; }

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-lg); }
.data-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.data-table thead th {
  text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--fg-3); padding: 13px 16px; border-bottom: 1px solid var(--rule-mid); background: var(--bg-soft);
}
.data-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--fg-2); vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table code { font-family: var(--mono); font-size: 12.5px; color: var(--fg); background: var(--bg-soft); padding: 2px 6px; border-radius: 5px; }
.data-table .method { display: inline-block; font-family: var(--mono); font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.method--get { background: rgba(47,216,168,.14); color: #1a9974; }
.method--post { background: var(--accent-wash); color: var(--accent); }
.method--delete { background: rgba(255,110,110,.14); color: #d1495b; }
.method--patch { background: rgba(255,178,80,.16); color: #a5680c; }

.layout-aside { display: grid; grid-template-columns: 232px 1fr; gap: 48px; align-items: start; }
.aside { position: sticky; top: calc(var(--head-h) + 32px); display: flex; flex-direction: column; gap: 24px; }
.aside__group-title { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-3); margin-bottom: 8px; }
.aside__list { display: flex; flex-direction: column; gap: 1px; }
.aside__link { padding: 7px 10px; border-radius: 7px; font-size: 13.5px; color: var(--fg-2); }
.aside__link:hover { background: rgba(127,127,127,.08); color: var(--fg); }
.aside__link.is-active { color: var(--fg); font-weight: 600; background: var(--accent-wash); }
.doc-content { display: flex; flex-direction: column; gap: var(--band); min-width: 0; }
.doc-section h2 { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -.016em; color: var(--fg); margin-bottom: 12px; }
.doc-section p { font-size: 15px; line-height: 1.7; color: var(--fg-2); margin-bottom: 14px; }
.doc-section p:last-child { margin-bottom: 0; }

.prose { max-width: 72ch; }
.prose h2 { font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -.014em; color: var(--fg); margin-top: 40px; margin-bottom: 12px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--display); font-size: 16.5px; font-weight: 600; color: var(--fg); margin-top: 24px; margin-bottom: 8px; }
.prose p { font-size: 15px; line-height: 1.75; color: var(--fg-2); margin-bottom: 14px; }
.prose ul { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.prose ul li { font-size: 15px; line-height: 1.7; color: var(--fg-2); padding-left: 22px; position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose__updated { font-size: 13px; color: var(--fg-3); margin-bottom: 36px; }

.timeline { display: flex; flex-direction: column; }
.timeline__entry { display: grid; grid-template-columns: 118px 1fr; gap: 32px; padding-block: 34px; border-top: 1px solid var(--rule); }
.timeline__entry:first-child { border-top: 0; padding-top: 0; }
.timeline__date { font-size: 13px; color: var(--fg-3); padding-top: 3px; }
.timeline__version { display: block; margin-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.timeline__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.timeline__title { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -.012em; color: var(--fg); }
.timeline__list { display: flex; flex-direction: column; gap: 7px; }
.timeline__list li { font-size: 14px; line-height: 1.6; color: var(--fg-2); padding-left: 18px; position: relative; }
.timeline__list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--fg-3); }

.faq { display: flex; flex-direction: column; gap: 10px; }
.faq__item { border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: rgba(127,127,127,.03); }
.faq__item summary {
  cursor: pointer; list-style: none; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 15px; font-weight: 500; color: var(--fg);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 20px; color: var(--fg-3); transition: transform .18s var(--ease); flex: none; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.65; color: var(--fg-2); }

.form-panel { max-width: 440px; padding: 32px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--panel); }
.form-panel--wide { max-width: none; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 500; color: var(--fg); }
.field input, .field textarea, .field select {
  height: 42px; padding-inline: 13px; border-radius: var(--r-sm); border: 1px solid var(--rule-mid);
  font-family: var(--text); font-size: 14.5px; width: 100%;
}
.field textarea { height: auto; min-height: 110px; padding-block: 11px; resize: vertical; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.field__hint { font-size: 12.5px; color: var(--fg-3); margin-top: -8px; margin-bottom: 16px; }
.field input:invalid, .field textarea:invalid, .field select:invalid,
.field input:-moz-ui-invalid, .field textarea:-moz-ui-invalid, .field select:-moz-ui-invalid {
  box-shadow: none !important;
  outline: none !important;
}
.field input.has-error, .field textarea.has-error, .field select.has-error,
.field input.has-error:focus, .field textarea.has-error:focus, .field select.has-error:focus {
  border-color: #e5484d;
  box-shadow: none;
  outline: none;
}
.form__status { font-size: 13px; color: var(--fg-3); margin-top: 12px; text-align: center; }

/* react-hot-toast inspired form notifications */
.toast-container {
  position: fixed;
  z-index: 9999;
  top: 16px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(calc(100vw - 32px), 420px);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  --toast-accent: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--rule-mid);
  border-radius: 10px;
  background: var(--panel);
  color: var(--fg);
  box-shadow: none !important;
  font-size: 13.5px;
  line-height: 1.45;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transform: translateY(-10px) scale(.98);
  animation: toast-in .22s cubic-bezier(.22, 1, .36, 1) forwards;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.toast.is-leaving { opacity: 0; transform: translateY(-8px) scale(.98); }
.toast.is-paused { opacity: .98; }
.toast--error { --toast-accent: #e5484d; }
.toast--success { --toast-accent: var(--signal); }
.toast--loading { --toast-accent: var(--accent); }
.toast__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  color: var(--toast-accent);
}
.toast__icon svg { width: 20px; height: 20px; display: block; }
.toast__msg { min-width: 0; }
.toast__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--toast-accent) 22%, transparent);
  border-top-color: var(--toast-accent);
  border-radius: 50%;
  animation: toast-spin .7s linear infinite;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-spin { to { transform: rotate(360deg); } }
@media (max-width: 540px) {
  .toast-container { top: 12px; width: calc(100vw - 24px); }
  .toast { width: 100%; }
}

.form__status:empty { display: none; }
.form__status.is-success { color: var(--signal); }
.form-check-wrap { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.form-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--fg-2); margin: 0; }
.form-check input { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.form-check__link { color: var(--accent); font-weight: 500; }
.form-check__link:hover { color: var(--accent-hi); text-decoration: underline; }
.form-divider { display: flex; align-items: center; gap: 12px; margin-block: 20px; font-size: 12.5px; color: var(--fg-3); }
.form-divider::before, .form-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.social-auth { display: flex; flex-direction: column; gap: 10px; }
.social-auth svg { width: 17px; height: 17px; flex: none; }
.form-foot { margin-top: 20px; font-size: 13.5px; color: var(--fg-2); text-align: center; }
.form-foot a { color: var(--accent); font-weight: 500; }
.auth-shell { min-height: calc(100vh - var(--head-h) - 200px); display: grid; place-items: center; padding-block: 64px; }

.form-panel--login .field { margin-bottom: 12px; }
.form-panel--login .field__hint { margin-top: -4px; margin-bottom: 10px; }
.form-panel--login .form-foot { margin-top: 14px; }

.status-banner {
  display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-radius: var(--r-lg);
  border: 1px solid var(--rule); background: rgba(47,216,168,.08); margin-bottom: 8px;
}
.status-banner__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(47,216,168,.18); flex: none; }
.status-banner strong { font-size: 15.5px; color: var(--fg); }
.status-list { display: flex; flex-direction: column; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; border-top: 1px solid var(--rule); }
.status-row:first-child { border-top: 0; }
.status-row__name { font-size: 14.5px; font-weight: 500; color: var(--fg); }
.status-row__meta { font-size: 13px; color: var(--fg-3); }
.status-row__state { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--signal); font-weight: 600; }
.status-row__state .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.team-card {
  gap: 4px;
}
.team-card__avatar {
  width: 56px; height: 56px; border-radius: 50%; background: var(--accent-wash); margin-bottom: 10px;
  display: grid; place-items: center; color: var(--accent); font-family: var(--display); font-weight: 600; font-size: 18px; border: 1px solid var(--rule);
}
.team-card__name { font-weight: 600; font-size: 15px; color: var(--fg); }
.team-card__role { font-size: 13px; color: var(--fg-3); }

.job-list { display: flex; flex-direction: column; }
.job-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 4px; border-top: 1px solid var(--rule); }
.job-row:first-child { border-top: 0; }
.job-row__title { font-size: 15.5px; font-weight: 600; color: var(--fg); margin-bottom: 4px; }
.job-row__meta { display: flex; gap: 10px; font-size: 13px; color: var(--fg-3); flex-wrap: wrap; }
.job-row__meta span:not(:last-child)::after { content: "·"; margin-left: 10px; color: var(--rule-hi); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.contact-card { display: flex; gap: 14px; padding: 18px 0; border-top: 1px solid var(--rule); }
.contact-card:first-child { border-top: 0; }

@media (max-width: 980px) {
  .layout-aside { grid-template-columns: minmax(0, 1fr) }
  .aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .page-hero--split { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr) }
  .field-row { grid-template-columns: minmax(0, 1fr) }
  .timeline__entry { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .stat-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
}



/* ============================================================
   APEX — FRESH MODERN LIGHT THEME
   Layout/components remain intact; visual system rebuilt for light UI.
   ============================================================ */

:root {
  --bg:          #f7f8fc;
  --bg-soft:     #eef1f6;
  --panel:       #ffffff;
  --panel-2:     #f8f9fc;

  --rule:        rgba(15, 23, 42, .09);
  --rule-mid:    rgba(15, 23, 42, .15);
  --rule-hi:     rgba(15, 23, 42, .23);
  --line-color:  rgba(15, 23, 42, .090);
  --line-subtle-color: rgba(15, 23, 42, .060);

  --fg:          #172033;
  --fg-2:        #596579;
  --fg-3:        #6b7280;

  --accent:      #5b4de3;
  --accent-hi:   #7164ed;
  --accent-ink:  #ffffff;
  --accent-wash: rgba(91, 77, 227, .085);
  --accent-plan-glow: rgba(91, 77, 227, .13);
  --signal:      #159a77;

  color-scheme: light;
}

html,
body {
  background: var(--bg);
  color: var(--fg);
}

body {
  background:
    radial-gradient(850px 420px at 50% -170px, rgba(91,77,227,.075), transparent 72%),
    var(--bg);
}

::selection {
  background: var(--accent);
  color: #fff;
}

.shell {
  border-inline-color: var(--rule);
}

/* Header */
.masthead {
  background: rgba(247,248,252,.84) !important;
  border-bottom-color: var(--rule) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.95) inset;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Navigation */
.nav__link,
.brand__word {
  color: var(--fg);
}

.nav__link:hover {
  color: var(--accent);
}

.menu__panel {
  background: rgba(255,255,255,.98);
  border-color: var(--rule-mid);
  box-shadow: 0 24px 60px -24px rgba(15,23,42,.20),
              0 4px 16px rgba(15,23,42,.05);
}

.menu__item:hover {
  background: rgba(91,77,227,.055);
}

.menu__title {
  color: var(--fg);
}

.menu__desc {
  color: var(--fg-2);
}

/* Buttons */
.btn--primary {
  background: var(--fg);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset,
              0 8px 22px rgba(15,23,42,.10);
}

.btn--primary:hover {
  background: #273247;
}

.btn--outline,
.btn--ghost {
  border-color: var(--rule-mid);
  color: var(--fg);
  background: rgba(255,255,255,.72);
}

.btn--outline:hover,
.btn--ghost:hover {
  border-color: var(--rule-hi);
  background: #fff;
  box-shadow: 0 7px 20px rgba(15,23,42,.055);
}

.btn--quiet {
  color: var(--fg);
  background: rgba(15,23,42,.045);
}

.btn--quiet:hover {
  color: var(--fg);
  background: rgba(15,23,42,.075);
}

.ghost-link {
  color: var(--fg-2);
}

.ghost-link:hover {
  color: var(--fg);
}

/* Brand */
.brand__mark {
  background:
    radial-gradient(120% 120% at 22% 18%, #aaa2ff 0%, #5b4de3 44%, #4033bb 100%);
  box-shadow: 0 6px 18px rgba(91,77,227,.18);
}

/* Status */
.live {
  color: var(--fg-2);
}

.live__dot {
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(21,154,119,.13);
}

/* Typography — explicitly reset every common heading/value selector */
h1, h2, h3, h4, h5, h6,
.hero__title,
.section__title,
.section-title,
.card__title,
.feature__title,
.feature__value,
.stat__value,
.stat__label,
.metric,
.metric strong,
.kpi__value,
.kpi__label,
.table__number,
.display,
.title,
.heading {
  color: var(--fg) !important;
}

/* Secondary text */
p,
.hero__copy,
.section__copy,
.card__desc,
.feature__desc,
.stat__desc,
.kpi__desc,
small {
  color: var(--fg-2);
}

/* Hairlines */
hr,
section,
.hero,
.band,
.footer,
.site-footer {
  border-color: var(--rule);
}

/* Cards / panels — rebuild as white surfaces */
.card,
.panel,
.code-card,
.stat-card,
.feature-card,
.pricing-card,
.arch-card,
.dev-card,
.surface,
.surface-soft,
.muted-panel {
  background: var(--panel);
  border-color: var(--rule) !important;
  box-shadow: 0 16px 42px -30px rgba(15,23,42,.22);
}

/* Soft surfaces */
.soft,
.surface-soft,
.muted-panel {
  background: var(--bg-soft);
}

/* Badges / chips */
.badge,
.eyebrow,
.chip,
.tag {
  background: var(--accent-wash);
  border-color: rgba(91,77,227,.16);
  color: var(--accent);
}

/* Code area retains technical character without becoming a dark block */
pre,
.code,
.code-block,
.terminal,
.terminal__body {
  background: #f1f4f8;
  border-color: var(--rule);
  color: #263246;
}

.tok-key { color: #6542bd; }
.tok-str { color: #14795b; }
.tok-fn  { color: #245ba8; }
.tok-num { color: #ad5b1b; }

/* Tables */
.regions thead th {
  color: var(--fg-3);
  border-bottom-color: var(--rule-mid);
}

.regions tbody td {
  color: var(--fg-2);
  border-bottom-color: var(--rule);
}

.regions tbody tr:hover,
.regions tbody tr.is-lit {
  background: rgba(91,77,227,.045);
}

/* CTA / highlighted blocks */
.cta,
.cta-band,
.callout {
  background:
    radial-gradient(700px 260px at 82% 0%, rgba(91,77,227,.085), transparent 70%),
    #fff;
  border-color: var(--rule);
  box-shadow: 0 20px 52px -34px rgba(15,23,42,.24);
}

/* Forms */
input,
textarea,
select {
  color: var(--fg);
  background: #fff;
  border-color: var(--rule-mid);
}

input::placeholder,
textarea::placeholder {
  color: var(--fg-3);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent-hi);
  box-shadow: 0 0 0 4px rgba(91,77,227,.09);
}

/* Decorative grid/rules */
.grid,
.grid-lines,
.hero__grid {
  opacity: .68;
}

/* Footer */
footer,
.site-footer {
  background: #eef1f6;
  border-top-color: var(--rule);
}

/* Links */
a {
  color: inherit;
}

a:hover {
  color: var(--accent);
}

/* Keep icons neutral unless they are explicitly accent elements */
svg {
  color: currentColor;
}

/* Mobilee */
@media (max-width: 720px) {
  body {
    background:
      radial-gradient(560px 300px at 50% -100px, rgba(91,77,227,.065), transparent 72%),
      var(--bg);
  }
}



/* ============================================================
   LIGHT THEME — WHITE TEXT CLEANUP
   All primary headings, metrics and plan values use the light
   theme foreground. White is reserved only for controls sitting
   on accent/dark surfaces.
   ============================================================ */

.hero__title,
.lead__title,
.tally dd,
.plan__amount,
.closer__title {
  color: var(--fg) !important;
}

/* Additional common dark-theme text selectors */
.hero h1,
.hero h2,
.hero h3,
.lead h1,
.lead h2,
.lead h3,
.tally dt,
.tally dd,
.plan h1,
.plan h2,
.plan h3,
.plan__name,
.plan__desc,
.closer h1,
.closer h2,
.closer h3 {
  color: var(--fg) !important;
}

/* Secondary labels remain intentionally softer */
.tally dt,
.plan__desc {
  color: var(--fg-2) !important;
}

/* White text is intentional only on dark/filled controls */
.btn--primary,
.plan__tag,
.skip-link {
  color: #fff !important;
}


/* ============================================================
   LIGHT THEME — SUBTLE ELEVATION
   Shadows are intentionally minimal; hierarchy is primarily established
   through borders and surface contrast.
   ============================================================ */

.card,
.panel,
.code-card,
.stat-card,
.feature-card,
.pricing-card,
.arch-card,
.dev-card,
.surface,
.surface-soft,
.muted-panel {
  box-shadow: 0 4px 18px rgba(15, 23, 42, .045) !important;
}

.cta,
.cta-band,
.callout {
  box-shadow: 0 6px 22px rgba(15, 23, 42, .055) !important;
}

.btn--primary {
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset,
              0 3px 10px rgba(15,23,42,.07) !important;
}

.btn--outline:hover,
.btn--ghost:hover {
  box-shadow: 0 3px 12px rgba(15,23,42,.04) !important;
}

.menu__panel {
  box-shadow: 0 10px 28px rgba(15,23,42,.09),
              0 1px 3px rgba(15,23,42,.035) !important;
}

.brand__mark {
  box-shadow: 0 3px 10px rgba(91,77,227,.12) !important;
}


/* ============================================================
   LIGHT THEME — FLAT / NO-SHADOW
   Cards and surfaces use no shadows. Separation is created only through borders,
   background, and subtle tonal differences.
   ============================================================ */

.card,
.panel,
.code-card,
.stat-card,
.feature-card,
.pricing-card,
.arch-card,
.dev-card,
.surface,
.surface-soft,
.muted-panel,
.cta,
.cta-band,
.callout,
.menu__panel,
.btn--primary,
.btn--outline:hover,
.btn--ghost:hover,
.brand__mark {
  box-shadow: none !important;
}

.masthead {
  box-shadow: 0 1px 0 rgba(15,23,42,.035) inset !important;
}

.btn--primary {
  box-shadow: none !important;
}


/* Final light-theme cleanup: no decorative drop shadows on any content surface. */
.console,
.editor,
.console__body,
.console__bar,
.editor__body,
.editor__bar,
.terminal,
.code-card,
.demo,
.demo__card,
.hero__visual,
.hero__panel,
.preview,
.preview__window {
  box-shadow: none !important;
}

/* Keep the terminal/editor as a crisp surface; separation comes from border. */
.console,
.editor {
  border-color: var(--rule-mid) !important;
  background: #fff !important;
}


/* ============================================================
   THEME SELECTOR
   Light is the default theme; dark is selected via html[data-theme="dark"]
   using the same variable system.
   ============================================================ */
html {
  transition: background-color .22s var(--ease), color .22s var(--ease);
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .42s;
  animation-timing-function: var(--ease);
}

.theme-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 104px;
  padding: 3px;
  border: 1px solid var(--rule-mid);
  border-radius: 999px;
  background: var(--panel);
  overflow: hidden;
  isolation: isolate;
}

.theme-switcher::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 2);
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 0 0 1px rgba(255,255,255,.08) inset;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.theme-switcher[data-active-theme="dark"]::before {
  transform: translate3d(100%, 0, 0);
}

.theme-switcher__label {
  padding: 0 7px 0 9px;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 500;
}

.theme-switcher__option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 1 1 50%;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  min-width: 0;
  padding: 0 7px;
  border-radius: 999px;
  color: var(--fg-3);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: transparent;
  transition: color .18s var(--ease);
}

.theme-switcher__option[aria-pressed="true"] {
  color: var(--accent-ink);
}

.theme-switcher__icon {
  line-height: 1;
  font-size: 12px;
}

/* Footer uses one explicit horizontal hairline; no vertical rails. */
.foot {
  border-top: 0 !important;
  box-shadow: none !important;
}

.foot::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--rule);
  pointer-events: none;
  z-index: 2;
}

/* ============================================================
   DARK TEMA
   ============================================================ */
html[data-theme="dark"] {
  color-scheme: dark;

  --line-color:  rgba(255, 255, 255, .090);
  --line-subtle-color: rgba(255, 255, 255, .060);

  --bg:          #08090a;
  --bg-soft:     #0b0c0e;
  --panel:       #0e1013;
  --panel-2:     #121419;

  --rule:        rgba(255, 255, 255, .090);
  --rule-mid:    rgba(255, 255, 255, .11);
  --rule-hi:     rgba(255, 255, 255, .18);

  --fg:          #f4f5f7;
  --fg-2:        #9ba1ac;
  --fg-3:        #7a818c;

  --accent:      #7c6bff;
  --accent-hi:   #9a8dff;
  --accent-ink:  #ffffff;
  --accent-wash: rgba(124, 107, 255, .12);
  --signal:      #2fd8a8;

  --theme-surface: #0e1013;
  --theme-surface-2: #121419;
  --theme-input: #0e1013;
  --theme-code: #0b0d10;
  --theme-code-fg: #d5dae3;
  --theme-footer: #0b0c0e;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(850px 420px at 50% -170px, rgba(124,107,255,.16), transparent 72%),
    var(--bg);
}

html[data-theme="dark"] .masthead {
  background: rgba(8, 9, 10, .84) !important;
  border-bottom-color: var(--rule) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.035) inset !important;
}

html[data-theme="dark"] .masthead.is-stuck {
  background: rgba(8, 9, 10, .92) !important;
}

html[data-theme="dark"] .menu__panel {
  background: rgba(14,16,19,.98);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.72), 0 4px 16px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .menu__item:hover {
  background: rgba(255,255,255,.045);
}

html[data-theme="dark"] .menu__desc {
  color: var(--fg-2);
}

html[data-theme="dark"] .btn--primary {
  background: var(--fg);
  color: #0a0b0d !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset !important;
}

html[data-theme="dark"] .btn--primary:hover {
  background: #fff;
}

html[data-theme="dark"] .btn--outline,
html[data-theme="dark"] .btn--ghost {
  border-color: var(--rule-mid);
  color: var(--fg);
  background: rgba(255,255,255,.02);
}

html[data-theme="dark"] .btn--outline:hover,
html[data-theme="dark"] .btn--ghost:hover {
  border-color: var(--rule-hi);
  background: rgba(255,255,255,.05);
  box-shadow: none !important;
}

html[data-theme="dark"] .btn--quiet {
  color: var(--fg);
  background: rgba(255,255,255,.05);
}

html[data-theme="dark"] .btn--quiet:hover {
  color: var(--fg);
  background: rgba(255,255,255,.08);
}

html[data-theme="dark"] .brand__mark {
  background:
    radial-gradient(120% 120% at 22% 18%, #b7a8ff 0%, #7c6bff 42%, #4a34d6 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45),
              0 3px 12px -4px rgba(124,107,255,.8) !important;
}

html[data-theme="dark"] .hero__field {
  background:
    radial-gradient(ellipse 64% 62% at 50% 0%, rgba(124,107,255,.24), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.085) 1px, transparent 0);
}

html[data-theme="dark"] .console {
  background: linear-gradient(180deg, #202126, #17181b) !important;
  border-color: #2c2d31 !important;
}

html[data-theme="dark"] .editor {
  background: var(--theme-surface) !important;
  border-color: var(--rule-mid) !important;
}

html[data-theme="dark"] .console__body,
html[data-theme="dark"] .console__bar {
  background: rgba(255, 255, 255, .02) !important;
  border-color: rgba(255, 255, 255, .06) !important;
}

html[data-theme="dark"] .editor__body {
  background: var(--theme-code) !important;
}

html[data-theme="dark"] .editor__bar {
  background: var(--theme-surface-2) !important;
  border-color: var(--rule) !important;
}

html[data-theme="dark"] pre,
html[data-theme="dark"] .code,
html[data-theme="dark"] .code-block,
html[data-theme="dark"] .terminal,
html[data-theme="dark"] .terminal__body {
  background: var(--theme-code) !important;
  border-color: var(--rule) !important;
  color: var(--theme-code-fg) !important;
}

html[data-theme="dark"] .tok-key { color: #a994ff; }
html[data-theme="dark"] .tok-str { color: #5fe0ba; }
html[data-theme="dark"] .tok-fn  { color: #80b7ff; }
html[data-theme="dark"] .tok-num { color: #f2b36d; }

html[data-theme="dark"] .plan,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .surface,
html[data-theme="dark"] .surface-soft,
html[data-theme="dark"] .muted-panel,
html[data-theme="dark"] .pricing-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .arch-card,
html[data-theme="dark"] .dev-card {
  background: var(--panel) !important;
  border-color: var(--rule) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] {
  --accent-plan-glow: rgba(124, 107, 255, .18);
}

html[data-theme="dark"] .plan--pick {
  background:
    radial-gradient(100% 48% at 50% 0%, var(--accent-plan-glow), transparent 100%),
    var(--panel) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .soft,
html[data-theme="dark"] .surface-soft,
html[data-theme="dark"] .muted-panel {
  background: var(--bg-soft) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--theme-input);
  color: var(--fg);
  border-color: var(--rule-mid);
}

html[data-theme="dark"] .regions tbody tr:hover,
html[data-theme="dark"] .regions tbody tr.is-lit {
  background: rgba(124,107,255,.09);
}

html[data-theme="dark"] .cta,
html[data-theme="dark"] .cta-band,
html[data-theme="dark"] .callout {
  background:
    radial-gradient(700px 260px at 82% 0%, rgba(124,107,255,.13), transparent 70%),
    var(--panel) !important;
  border-color: var(--rule);
  box-shadow: none !important;
}

html[data-theme="dark"] footer,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .foot {
  position: relative;
  background: radial-gradient(125% 125% at 50% 10%, var(--bg) 40%, var(--accent) 100%);
  border-top-color: var(--rule);
  overflow: hidden;
}

html[data-theme="dark"] .theme-switcher {
  background: var(--panel-2);
}

html[data-theme="dark"] .theme-switcher::before {
  box-shadow: 0 1px 2px rgba(0,0,0,.22);
}

@media (max-width: 720px) {
  .foot__bottom {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }

  .foot__bottom .theme-switcher {
    margin-left: 0;
    width: auto;
    flex: none;
  }

  .foot__bottom > p,
  .foot__bottom > .live {
    min-width: 0;
    white-space: nowrap;
  }

  .foot__bottom > p {
    font-size: 11.5px;
  }

  .foot__bottom > .live {
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .theme-switcher {
    min-width: 96px;
    padding: 2px;
  }

  .theme-switcher__option {
    min-height: 26px;
    padding-inline: 5px;
    gap: 4px;
    font-size: 11px;
  }

  .theme-switcher__icon {
    font-size: 11px;
  }
}





@keyframes menuFlipIn {
  0% {
    opacity: 0;
    transform: perspective(1600px) rotateX(-24deg);
  }
  58% {
    opacity: 1;
    transform: perspective(1600px) rotateX(1.5deg);
  }
  100% {
    opacity: 1;
    transform: perspective(1600px) rotateX(0deg);
  }
}

@keyframes menuFlipOut {
  0% {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg);
  }
  100% {
    opacity: 0;
    transform: perspective(900px) rotateX(-90deg);
  }
}

.menu.is-open .menu__panel .menu__item,
.menu.is-open .menu__panel .menu__group {
  animation: menuContentIn .26s cubic-bezier(.2, .7, .2, 1) both;
}

.menu.is-open .menu__panel .menu__item:nth-child(2),
.menu.is-open .menu__panel .menu__group:nth-child(2) { animation-delay: 20ms; }

.menu.is-open .menu__panel .menu__item:nth-child(3),
.menu.is-open .menu__panel .menu__group:nth-child(3) { animation-delay: 35ms; }

.menu.is-open .menu__panel .menu__item:nth-child(4),
.menu.is-open .menu__panel .menu__group:nth-child(4) { animation-delay: 50ms; }

@keyframes menuContentIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu__panel,
  .menu.is-open .menu__panel,
  .menu.is-open .menu__panel .menu__item,
  .menu.is-open .menu__panel .menu__group {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Menu motion cleanup: eliminate compositor ghosting during close. */
.menu__panel {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  pointer-events: none;
}

.menu.is-open .menu__panel {
  pointer-events: auto;
}

.menu.is-closing .menu__panel {
  visibility: visible;
  pointer-events: none;
  animation: menuFlipOut .22s cubic-bezier(.4, 0, .7, 1) both !important;
}

@keyframes menuFlipOut {
  0% {
    opacity: 1;
    visibility: visible;
    transform: perspective(1400px) rotateX(0deg);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: perspective(1400px) rotateX(-78deg);
  }
}

/* Active nav: visually stronger without changing layout geometry. */
.nav__link.is-current {
  font-weight: inherit;
  text-shadow:
    0 0 0 currentColor,
    0 0 0 currentColor;
}

/* Dark theme: preserve the light-theme button geometry and depth; only recolor the surfaces. */
html[data-theme="dark"] .nav__search {
  border-color: var(--rule);
  background: var(--bg);
  box-shadow: none;
}

html[data-theme="dark"] .nav__search:hover {
  border-color: var(--rule-mid);
  background: #1a1d23;
}

html[data-theme="dark"] .nav__search:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-hi);
}

html[data-theme="dark"] .nav__search:active {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .6),
    inset 0 1px 2px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .drawer__search {
  border-color: #262b33;
  background: #1a1d23;
  box-shadow: none;
}

html[data-theme="dark"] .drawer__search:hover {
  border-color: #2f343d;
  background: #21252c;
  box-shadow: none;
}

html[data-theme="dark"] .drawer__search:active {
  background: #16181d;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .shortcut-key {
  color: #c3c8d1;
  background: linear-gradient(180deg, #363b43 0%, #24272d 100%);
  border-color: #4a505b #40454e #17181b #40454e;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 1.5px 0 0 #15171a,
    0 3px 2px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .drawer__search:hover .shortcut-key {
  color: #e5e8ed;
  border-color: #565d69 #4a515c #17181b #4a515c;
  background: linear-gradient(180deg, #3c424b 0%, #292d34 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 1.5px 0 0 #17181b,
    0 3px 2px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .nav__search:active .shortcut-key,
html[data-theme="dark"] .drawer__search:active .shortcut-key {
  border-color: #3d434c #383d46 #2c2f35 #383d46;
  background: #24272d;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
  transform: translateY(1.5px);
  transition: transform .07s cubic-bezier(.4, 0, 1, 1), box-shadow .07s cubic-bezier(.4, 0, 1, 1), border-color .07s cubic-bezier(.4, 0, 1, 1);
}


/* ---------- FAQ ---------- */
.faq--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.section-kicker {
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.text-link:hover { color: var(--accent); }
.text-link span { transition: transform .18s var(--ease); }
.text-link:hover span { transform: translateX(3px); }


@media (max-width: 760px) {
  .faq--grid { grid-template-columns: 1fr; }
  .lead--split { gap: 18px; }
}


/* ============================================================
   SPACING REFINEMENT
   Consistent vertical rhythm and tighter content grouping.
   ============================================================ */
:root {
  --band: clamp(68px, 6.7vw, 96px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
}

.masthead__inner { gap: 24px; }
.hero { padding-top: clamp(48px, 7.5vw, 88px); }
.shell--hero { padding-bottom: clamp(48px, 6.5vw, 80px); }
.hero__title { margin-top: 24px; }
.hero__lede { margin-top: 18px; }
.hero__cta { margin-top: 28px; }
.console { margin-top: clamp(40px, 5vw, 60px); }

.clients .shell { padding-block: clamp(28px, 3.5vw, 40px); }
.lead {
  gap: clamp(20px, 3.2vw, 48px);
  margin-bottom: clamp(28px, 3.2vw, 44px);
}
.spotlight {
  gap: clamp(24px, 3.2vw, 44px);
  padding: clamp(24px, 2.8vw, 36px);
}
.spotlight__text { margin-top: 10px; }
.spotlight__facts { gap: 8px; margin-top: 18px; }
.spotlight__axis { margin-top: 10px; }
.specs { margin-top: clamp(36px, 4vw, 52px); }
.spec { padding-block: clamp(22px, 2.6vw, 30px); }
.spec__title { margin-top: 15px; }
.spec__text { margin-top: 7px; }

.topology { gap: clamp(24px, 3.5vw, 48px); }
.topology__hint { margin-top: 12px; }
.tally { margin-top: clamp(32px, 3.6vw, 48px); }
.tally__item { padding-top: 20px; }

.devkit { gap: clamp(32px, 4.5vw, 64px); }
.devkit .lead__text { margin-top: 14px; }
.ticks { margin-top: 24px; gap: 11px; }

.switch { padding: 3px; }
.plans { margin-top: 0; }
.plan {
  padding: calc(clamp(24px, 2.6vw, 32px) + 16px) clamp(22px, 2.6vw, 32px) clamp(24px, 2.6vw, 32px);
}
.plan__price { margin-top: 16px; }
.plan__cta { margin-top: 20px; }
.plan__list { margin-top: 20px; padding-top: 20px; gap: 11px; }
.plans__note { margin-top: 16px; }

.closer__inner { padding-block: clamp(56px, 6vw, 72px); }
.closer__text { margin-top: 14px; }
.closer__cta { margin-top: 28px; }

.foot > .shell { padding-block: clamp(60px, 6.5vw, 76px) 24px; }
.foot__grid { gap: clamp(28px, 4vw, 56px); }
.foot__blurb { margin-top: 14px; }
.social { margin-top: 20px; }
.foot__col ul { margin-top: 15px; gap: 10px; }
.foot__signature { margin-top: clamp(44px, 5.5vw, 68px); }
.foot__bottom { margin-top: clamp(40px, 5vw, 56px); }

.page-hero {
  padding-top: calc(var(--band) * .72);
  padding-bottom: calc(var(--band) * .42);
}
.page-hero__eyebrow { margin-bottom: 16px; }
.page-hero__text { margin-top: 14px; }
.page-hero__cta { margin-top: 24px; }
.page-hero--split { gap: 40px; }
.not-found { padding-bottom: calc(var(--band) * .7); }
.not-found__links { margin-top: 32px; padding-top: 24px; gap: 20px; }

.grid-2, .grid-3 { gap: 18px; }
.grid-4 { gap: 16px; }
.layout-aside { gap: 40px; }
.aside { gap: 20px; }
.doc-content { gap: calc(var(--band) * .82); }
.doc-section h2 { margin-bottom: 10px; }
.doc-section p { margin-bottom: 12px; }
.prose h2 { margin-top: 32px; margin-bottom: 10px; }
.prose h3 { margin-top: 20px; margin-bottom: 7px; }
.prose p { margin-bottom: 12px; }
.prose ul { margin-bottom: 12px; gap: 7px; }
.prose__updated { margin-bottom: 30px; }
.timeline__entry { gap: 24px; padding-block: 28px; }
.timeline__head { margin-bottom: 8px; }
.faq { gap: 8px; }
.faq__item p { padding: 0 20px 16px; }

@media (max-width: 900px) {
  .lead { gap: 14px; }
  .page-hero--split { gap: 32px; }
  .layout-aside { gap: 32px; }
}

@media (max-width: 720px) {
  :root { --band: 56px; }
  .shell--hero { padding-bottom: 52px; }
  .clients .shell { gap: 16px; }
  .lead { margin-bottom: 30px; }
  .spotlight { padding: 22px; }
  .spec { padding-block: 22px 24px; }
  .page-hero { padding-top: 48px; padding-bottom: 30px; }
  .doc-content { gap: 52px; }
  .timeline__entry { padding-block: 24px; }
}

@media (max-width: 520px) {
  .hero { padding-top: 42px; }
  .shell--hero { padding-bottom: 44px; }
  .hero__cta { margin-top: 24px; }
  .console { margin-top: 36px; }
  .spotlight { padding: 20px; }
  .spotlight__facts { margin-top: 18px; }
  .foot > .shell { padding-block: 48px 22px; }
  .foot__signature { margin-top: 42px; }
  .page-hero { padding-top: 42px; }
}

/* Footer top rule: explicit theme hairline, never the accent color. */
html[data-theme="light"] .foot::before {
  background: rgba(15, 23, 42, .09);
}

html[data-theme="dark"] .foot::before {
  background: var(--rule);
}

/* ============================================================
   ARCHITECTURE VISUAL ALIGNMENT
   Vertically center the regions/latency panel against the network
   diagram instead of forcing both columns into a stretched row.
   ============================================================ */
@media (min-width: 901px) {
  #architecture .regions thead th:nth-child(1) { width: 22%; }
  #architecture .regions thead th:nth-child(2) { width: 32%; }
  #architecture .regions thead th:nth-child(3) { width: 46%; }

  #architecture .regions__num {
    grid-template-columns: minmax(72px, 84px) minmax(0, 1fr);
    column-gap: 12px;
  }

@media (min-width: 901px) {
  #architecture .topology {
    align-items: center;
  }

  #architecture .topology__graph {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  #architecture .topology__graph svg {
    flex: 0 0 auto;
    width: min(100%, 410px);
    max-width: 410px;
    height: auto;
    margin: 0 auto;
  }

  #architecture .topology__table {
    align-self: center;
    min-width: 0;
    padding: 0;
  }

  #architecture .regions tbody th,
  #architecture .regions tbody td {
    padding-block: 12px;
  }

  #architecture .topology__hint {
    margin-top: 12px;
    margin-bottom: 0;
  }

  #architecture .tally {
    margin-top: clamp(32px, 3.5vw, 44px);
  }
}

/* Architecture — tighten the terminal vertical whitespace without moving
   the established map/table/stats alignment. */
@media (min-width: 901px) {
  #architecture > .shell {
    padding-bottom: clamp(48px, 4.5vw, 64px);
  }
}


/* ============================================================
   CANONICAL LINE SYSTEM
   One global source for the page rails: --line (1px).
   Horizontal separators also use the same token.
   ============================================================ */

/* Global vertical rails: the body is the only renderer.
   The rails run continuously through the navigation and every page section,
   so there is no seam or doubled 1px border at the header/content boundary. */
.shell,
.shell--hero,
.masthead__inner {
  border-inline: 0 !important;
}

body {
  position: relative;
}

body::before,
body::after {
  content: "";
  position: fixed;
  top: var(--head-h);
  bottom: 0;
  width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  z-index: 90;
}

body::before {
  left: calc(50% - (var(--shell) / 2));
  border-left: var(--line);
}

body::after {
  right: calc(50% - (var(--shell) / 2));
  border-right: var(--line);
}

/* The navigation keeps its own two rail segments for the header row.
   They use the same canonical 1px line token as the document rails. */
.masthead__inner {
  position: relative;
}

.masthead__inner::before,
.masthead__inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  pointer-events: none;
  z-index: 2;
}

.masthead__inner::before {
  left: 0;
  border-left: var(--line);
}

.masthead__inner::after {
  right: 0;
  border-right: var(--line);
}

/* Remove all other legacy rail producers. */
.hero::before,
.hero::after,
.clients::before,
.clients::after {
  display: none !important;
  content: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Structural horizontal separators use exactly the same 1px token. */
/* CTA → footer separator is owned by the footer hairline only. */
.masthead {
  border-bottom: var(--line);
}

.clients .shell,
.band > .shell,
.foot::before {
  border-top: var(--line);
}

.foot::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 auto;
  height: 0;
  background: none;
  pointer-events: none;
  z-index: 2;
}

@media (max-width: 720px) {
  body::before,
  body::after {
    display: none;
  }
}

/* FINAL LINE OVERRIDE: one opaque 1px footer separator only. */
.foot {
  border-top: var(--line-subtle) !important;
  box-shadow: none !important;
}
.foot::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.closer,
.closer > .shell,
.closer__inner {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* FINAL STRUCTURAL LINE NORMALIZATION */
.masthead,
.clients .shell,
.band > .shell,
.masthead__inner::before,
.masthead__inner::after,
body::before,
body::after {
  border-color: var(--line-color) !important;
}
.foot {
  border-top-color: var(--line-subtle-color) !important;
}

/* FINAL FOOTER SEPARATOR — single neutral 1px hairline, independent of the accent/gradient. */
.foot {
  border-top: 0 !important;
  box-shadow: none !important;
}
.foot::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  height: 1px !important;
  display: block !important;
  background: #23252a !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 5 !important;
}
html[data-theme="light"] .foot::before {
  background: #dfe3e8 !important;
}
.foot > .shell {
  border-top: 0 !important;
}
.closer,
.closer > .shell,
.closer__inner {
  border-bottom: 0 !important;
}

/* Social icons — icon-only footer treatment */
.social {
  gap: 14px;
}

.social a {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg-3);
  box-shadow: none;
}

.social a:hover {
  color: var(--fg);
  border-color: transparent;
  background: transparent;
}

.social svg {
  width: 22px;
  height: 22px;
}


/* FINAL MARQUEE: exact-cycle JS loop; no CSS percentage-based seam. */
.clients__row[data-js-marquee="true"] {
  animation: none !important;
  will-change: transform;
}

/* ============================================================
   Toast notifications
   A lightweight vanilla-JS notification system inspired by
   react-hot-toast. Used for instant feedback such as form
   validation.
   ============================================================ */
.toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--panel-2);
  border: 1px solid var(--rule-mid);
  color: var(--fg);
  font: 500 13.5px/1.4 var(--text);
  letter-spacing: -.01em;
  pointer-events: auto;
  animation: toastIn .22s cubic-bezier(.21, 1.02, .73, 1) both;
}

.toast.is-leaving {
  animation: toastOut .18s ease-in both;
}

.toast__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast__icon svg { width: 100%; height: 100%; }

.toast--error { border-color: color-mix(in srgb, #e5484d 45%, var(--rule-mid)); }
.toast--error .toast__icon { color: #e5484d; }

.toast--success { border-color: color-mix(in srgb, var(--signal) 45%, var(--rule-mid)); }
.toast--success .toast__icon { color: var(--signal); }

.toast--info .toast__icon { color: var(--accent-hi); }

.toast__msg { flex: 1 1 auto; }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-8px) scale(.96); }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast.is-leaving { animation: none; }
}