/* Nimbus Grid — single-page marketing site */

:root {
  --bg: #17130d;
  --ink: #fff4d5;
  --muted: #dacaa1;
  --line: rgba(255, 240, 199, 0.28);
  --glass: rgba(255, 239, 199, 0.16);
  --glass-strong: rgba(255, 239, 199, 0.24);
  --accent: #ead09a;
  --accent-2: #ffd879;
  --deep: #4d3f24;
  --radius: 8px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: radial-gradient(circle at top left, rgba(255, 216, 121, 0.18), transparent 28rem) var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.375;
  letter-spacing: 0.0175rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

button { font: inherit; color: inherit; }

.eyebrow {
  font: 16px/1 "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  color: var(--accent);
}

.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255, 247, 219, 0.25), 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  z-index: 0;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(18px, 3vw, 34px);
  display: flex;
  flex-direction: column;
}

.shader-fallback {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(circle at 38% 30%, #fff2be 0%, rgba(240, 210, 124, 0.9) 34%, rgba(132, 111, 67, 0.95) 78%),
    linear-gradient(160deg, #846f43, #f0d27c 52%, #fff2be);
}

.shader-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -3;
  width: 1422px;
  height: 800px;
  border: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(var(--shader-scale, 5));
  transform-origin: center;
}

.console-line {
  position: absolute;
  left: min(430px, 46vw);
  top: 10vh;
  width: 1px;
  height: 38vh;
  background: linear-gradient(180deg, transparent, var(--line), transparent);
  transform: rotate(24deg);
  pointer-events: none;
  z-index: 1;
}

.site-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 42px;
}

.brand {
  padding: 9px 12px;
  border-radius: 999px;
  font: 12px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

.site-nav a {
  font: 12px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  color: rgba(255, 244, 213, 0.68);
  transition: color 0.18s ease;
}

.site-nav a:hover { color: var(--ink); }

.header-cta {
  padding: 9px 12px;
  border-radius: 999px;
  font: 12px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

.header-cta:hover {
  transform: translateY(-1px);
  background: var(--glass-strong);
}

.hero-inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(20px, 4vh, 48px);
  padding-top: clamp(20px, 6vh, 64px);
}

.console-card {
  width: min(396px, 42vw);
  background: rgba(13, 16, 19, 0.88);
  border: 1px solid var(--line);
  border-radius: 5px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35);
  align-self: start;
}

.console-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 77px)) 1fr auto;
  align-items: center;
  border-bottom: 1px solid rgba(255, 240, 199, 0.14);
  padding: 0 6px;
  min-height: 40px;
}

.console-tab {
  position: relative;
  background: none;
  border: 0;
  padding: 11px 10px;
  color: rgba(255, 244, 213, 0.55);
  font: 11px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  cursor: pointer;
  transition: color 0.18s ease;
}

.console-tab.is-active { color: var(--accent); }

.console-tab.is-active::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}

.tabs-spacer { min-width: 4px; }

.win-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 4px;
}

.win-square {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 240, 199, 0.45);
}

.win-bar {
  width: 34px;
  height: 6px;
  border-radius: 2px;
  background: rgba(255, 240, 199, 0.35);
}

.console-pane {
  display: none;
  min-height: 153px;
  padding: 14px 16px 16px;
  font: 11px/1.7 "IBM Plex Mono", monospace;
  color: var(--muted);
}

.console-pane.is-active { display: block; }

.console-pane pre {
  margin: 0 0 10px;
  color: var(--ink);
  white-space: pre-wrap;
}

.accent-mark { color: var(--accent); }

.console-out { margin: 0; }

.typed { color: var(--accent); }

.typed::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--accent);
  animation: cursor-blink 1s steps(2, start) infinite;
}

.console-field { display: grid; gap: 5px; margin-bottom: 9px; }

.console-field label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  color: rgba(255, 244, 213, 0.5);
}

.console-input {
  height: 33px;
  display: flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  font: 11px "IBM Plex Mono", monospace;
}

.console-input.is-select { justify-content: space-between; }

.console-input.is-select::after {
  content: "\25BE";
  color: var(--muted);
}

.console-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.hero-copy {
  position: relative;
  align-self: end;
  max-width: 760px;
}

.hero-copy::before {
  content: "";
  position: absolute;
  inset: -34px -70px;
  z-index: -1;
  background: radial-gradient(ellipse at 30% 60%, rgba(9, 7, 3, 0.72), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}

.hero-copy h1 {
  margin: 0 0 18px;
  font: 400 clamp(29px, 3.5vw, 56px)/1 "IBM Plex Sans", sans-serif;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.hero-copy p {
  margin: 0;
  color: var(--ink);
  font-size: clamp(12px, 1.125vw, 16.5px);
  line-height: 1.5;
  max-width: 720px;
}

/* ----------------------------------------------------------- platform */

.platform {
  position: relative;
  min-height: 420svh;
  background: radial-gradient(58rem 36rem at 88% 0%, rgba(234, 208, 154, 0.1), transparent 62%) #050604;
}

.accordion-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 0.22fr 0.78fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding: clamp(48px, 8vh, 96px) clamp(24px, 5vw, 80px);
}

.accordion-nav {
  display: grid;
  gap: 10px;
  align-content: center;
}

.accordion-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  padding: 8px 14px;
  border: 1px solid rgba(255, 240, 199, 0.14);
  border-radius: 999px;
  background: rgba(255, 239, 199, 0.04);
  color: rgba(255, 244, 213, 0.58);
  font: 11px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease, transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.accordion-tab::before {
  content: "";
  width: 7px;
  height: 7px;
  background: currentColor;
  opacity: 0.7;
}

.accordion-tab.is-active {
  color: var(--accent);
  border-color: rgba(234, 208, 154, 0.5);
  background: rgba(234, 208, 154, 0.08);
  transform: translateX(2px);
}

.accordion-stack {
  position: relative;
  height: min(80svh, 820px);
  overflow: hidden;
}

.accordion-card {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(24px, 4vw, 56px);
  background: #050505;
  border-top: 1px solid var(--line);
  transform: translateY(var(--card-y, 0px));
  clip-path: inset(0 0 var(--card-clip-bottom, 0px) 0);
  will-change: transform;
}

.accordion-copy h3 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.accordion-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 42ch;
}

.accordion-visual {
  position: relative;
  min-height: clamp(240px, 34vh, 380px);
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 34px);
  border-radius: 10px;
  background:
    radial-gradient(circle at 72% 16%, rgba(255, 246, 214, 0.55), transparent 55%),
    linear-gradient(135deg, rgba(234, 208, 154, 0.92), rgba(106, 91, 52, 0.68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.code-window {
  width: min(100%, 430px);
  padding: 14px 0 16px;
  border-radius: 8px;
  background: #0a0906;
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.5);
  font: 11px/1.75 "IBM Plex Mono", monospace;
  color: var(--muted);
}

.code-window .dots {
  display: flex;
  gap: 5px;
  padding: 0 14px 12px;
}

.code-window .dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 244, 213, 0.28);
}

.code-window pre {
  margin: 0;
  padding: 0 16px;
  overflow: auto;
  white-space: pre;
}

.code-window .ln {
  display: inline-block;
  width: 2.2em;
  color: rgba(255, 244, 213, 0.35);
}

/* ------------------------------------------------------------ pricing */

.pricing {
  position: relative;
  overflow: hidden;
  background: #11120f;
  padding: clamp(80px, 12vh, 150px) 0 0;
}

.pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 244, 213, 0.05), transparent 26%),
    radial-gradient(46rem 32rem at 0% 0%, rgba(151, 211, 235, 0.14), transparent 62%);
  pointer-events: none;
}

.pricing-top {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 60px);
  display: grid;
  grid-template-columns: 0.38fr 0.62fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}

.pricing-copy h2 {
  margin: 18px 0 20px;
  font: 400 clamp(34px, 4vw, 68px)/1 "IBM Plex Sans", sans-serif;
  letter-spacing: -0.02em;
}

.pricing-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 52ch;
}

.pricing-table { border-top: 1px solid var(--line); }

.pricing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}

.pricing-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.billing {
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 239, 199, 0.08);
}

.billing span {
  padding: 5px 12px;
  border-radius: 999px;
  font: 12px "IBM Plex Mono", monospace;
  color: var(--muted);
}

.billing .is-active {
  background: var(--accent);
  color: #241d0f;
}

.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.price-row span { font-size: 14px; }

.price-row b {
  font: 400 13px "IBM Plex Mono", monospace;
  color: var(--ink);
  letter-spacing: 0;
}

.pricing-bars {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 480px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(6px, 1vw, 14px);
  align-items: end;
  padding: 0 clamp(16px, 4vw, 60px);
  margin-top: clamp(40px, 7vh, 90px);
}

.pricing-bars::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 130px;
  background: linear-gradient(180deg, #11120f, transparent);
  pointer-events: none;
  z-index: 1;
}

.bar {
  height: calc(var(--bar-height) + var(--bar-morph, 0px));
  min-height: 120px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--accent-2), rgba(234, 208, 154, 0.35));
  transition: height 80ms linear;
}

.bar.is-muted {
  background: linear-gradient(180deg, rgba(234, 208, 154, 0.55), rgba(234, 208, 154, 0.12));
}

.plan-row {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(50px, 8vh, 100px) clamp(20px, 5vw, 60px) clamp(70px, 10vh, 130px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  gap: clamp(16px, 2vw, 22px);
  justify-content: start;
}

.plan-card {
  display: grid;
  gap: 18px;
  max-width: 300px;
  padding: 26px;
  border: 1px solid var(--line);
  background: rgba(255, 239, 199, 0.03);
}

.plan-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.plan-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.plan-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  font: 12px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  transition: background 0.18s ease;
}

.plan-cta:hover { background: var(--glass-strong); }

/* ----------------------------------------------------------- security */

.security {
  position: relative;
  overflow: hidden;
  background: #120f0a;
  padding: clamp(80px, 12vh, 150px) clamp(20px, 5vw, 60px);
}

.security::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42rem 30rem at 86% 6%, rgba(234, 208, 154, 0.14), transparent 62%),
    radial-gradient(40rem 30rem at 8% 96%, rgba(255, 154, 82, 0.12), transparent 62%);
  pointer-events: none;
}

.security-wrap {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
}

.security-head {
  display: grid;
  grid-template-columns: 0.58fr 0.42fr;
  gap: clamp(24px, 4vw, 70px);
  align-items: end;
  margin-bottom: clamp(36px, 6vh, 70px);
}

.security-head h2 {
  margin: 18px 0 0;
  font: 400 clamp(30px, 3.4vw, 54px)/1.06 "IBM Plex Sans", sans-serif;
  letter-spacing: -0.02em;
}

.security-head p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

.sec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 22px);
}

.sec-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 464px;
  padding: 28px;
  border: 1px solid var(--line);
  background: #0f0c08;
}

.sec-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 244, 213, 0.045), transparent 34%);
  pointer-events: none;
}

.sec-card h3 {
  position: relative;
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 500;
}

.sec-card > p {
  position: relative;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  max-width: 40ch;
}

.api-window {
  position: absolute;
  left: 28px;
  bottom: 28px;
  width: 58%;
  height: 184px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 240, 199, 0.18);
  border-radius: 6px;
  background: #050505;
  font: 10px/1.65 "IBM Plex Mono", monospace;
  color: var(--muted);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);
}

.api-window .dots {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}

.api-window .dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 244, 213, 0.3);
}

.api-window pre {
  margin: 0;
  white-space: pre-wrap;
  font: inherit;
}

.api-spec {
  position: absolute;
  top: 118px;
  right: 24px;
  padding: 12px 14px;
  border: 1px solid rgba(234, 208, 154, 0.55);
  border-radius: 6px;
  background: rgba(64, 52, 30, 0.86);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.4);
}

.api-spec pre {
  margin: 0;
  font: 10px/1.6 "IBM Plex Mono", monospace;
  color: var(--accent);
  white-space: pre;
}

.sec-badges {
  position: relative;
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 28px;
}

.sec-badge {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(234, 208, 154, 0.28);
  border-radius: 5px;
  background: rgba(48, 39, 23, 0.84);
}

.sec-badge b { display: block; font-size: 13px; font-weight: 500; }

.sec-badge span { display: block; color: var(--muted); font-size: 12px; }

.check {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
}

.check::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid #241d0f;
  border-bottom: 2px solid #241d0f;
  transform: rotate(45deg);
}

.binary-map {
  margin: auto 0 18px;
  font: 10px/1.4 "IBM Plex Mono", monospace;
  color: rgba(234, 208, 154, 0.72);
  white-space: pre;
  overflow: hidden;
}

.asset-table {
  position: relative;
  display: grid;
  gap: 8px;
}

.asset-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 240, 199, 0.16);
  font: 11px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--muted);
}

.asset-row b {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}

/* ----------------------------------------------------------- showcase */

.showcase {
  position: relative;
  overflow: hidden;
  background: #070a0b;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 60px) 0;
}

.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(52rem 32rem at 82% 8%, rgba(151, 211, 235, 0.14), transparent 62%);
  pointer-events: none;
}

.showcase::after {
  content: "";
  position: absolute;
  top: 54px;
  right: -70px;
  width: 430px;
  height: 220px;
  background: repeating-linear-gradient(90deg, rgba(151, 211, 235, 0.08) 0 2px, transparent 2px 14px);
  transform: rotate(-12deg);
  pointer-events: none;
}

.showcase-wrap {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
}

.showcase-head {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(24px, 4vw, 70px);
  align-items: end;
}

.showcase-head h2 {
  margin: 0;
  font: 400 clamp(25px, 4vw, 52px)/1.06 "IBM Plex Sans", sans-serif;
  letter-spacing: -0.02em;
  color: #dff5ff;
}

.showcase-head p {
  margin: 0;
  color: rgba(223, 245, 255, 0.72);
  font-size: 15px;
  line-height: 1.7;
}

.fig-label {
  display: inline-flex;
  margin: 30px 0 14px;
  padding: 7px 12px;
  border: 1px solid rgba(151, 211, 235, 0.3);
  border-radius: 999px;
  font: 11px "IBM Plex Mono", monospace;
  letter-spacing: 0.04rem;
  color: #97d3eb;
}

.dashboard-shell {
  position: relative;
  border: 1px solid rgba(151, 211, 235, 0.28);
  border-radius: 8px;
  background: rgba(5, 8, 10, 0.9);
  box-shadow: 0 60px 130px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transform: perspective(1400px) rotateX(0deg) rotateY(0deg) translateY(0);
  transition: transform 0.22s ease, border-color 0.22s ease;
  margin-bottom: clamp(70px, 10vh, 130px);
}

.dashboard-shell:hover {
  transform: perspective(1400px) rotateX(1deg) rotateY(-1.2deg) translateY(-8px);
  border-color: rgba(151, 211, 235, 0.52);
}

.dashboard-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(223, 245, 255, 0.12) 50%, transparent 64%);
  transform: translateX(-34%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.52s ease, opacity 0.52s ease;
}

.dashboard-shell:hover::after {
  transform: translateX(34%);
  opacity: 1;
}

.dash-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(151, 211, 235, 0.16);
}

.dash-topbar .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(223, 245, 255, 0.25);
}

.dash-titlebar {
  flex: 1;
  max-width: 260px;
  height: 10px;
  margin-left: 12px;
  border-radius: 999px;
  background: rgba(223, 245, 255, 0.08);
}

.dash-body {
  display: grid;
  grid-template-columns: 240px 1fr;
}

.dash-side {
  padding: 20px;
  border-right: 1px solid rgba(151, 211, 235, 0.14);
}

.dash-side h4 {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #dff5ff;
}

.dash-nav { display: grid; gap: 4px; }

.dash-nav span {
  padding: 9px 10px;
  border-radius: 5px;
  font: 12px "IBM Plex Mono", monospace;
  color: rgba(223, 245, 255, 0.55);
}

.dash-nav .is-active {
  background: rgba(151, 211, 235, 0.12);
  color: #97d3eb;
}

.dash-main { padding: 22px 24px 42px; }

.dash-main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.dash-main-head h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #97d3eb;
}

.dash-btn {
  padding: 7px 12px;
  border: 1px solid #97d3eb;
  border-radius: 5px;
  background: none;
  color: #97d3eb;
  font: 12px "IBM Plex Mono", monospace;
  cursor: pointer;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dash-table th {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(151, 211, 235, 0.18);
  font: 11px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  text-align: left;
  color: rgba(223, 245, 255, 0.5);
}

.dash-table td {
  padding: 12px 8px;
  border-bottom: 1px solid rgba(151, 211, 235, 0.08);
  color: rgba(223, 245, 255, 0.85);
}

.dash-table td.state {
  font: 11px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: #97d3eb;
}

.toast {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: grid;
  gap: 3px;
  padding: 10px 14px;
  border: 1px solid rgba(151, 211, 235, 0.4);
  border-radius: 6px;
  background: rgba(5, 12, 14, 0.94);
  color: #dff5ff;
  font: 11px/1.5 "IBM Plex Mono", monospace;
}

.toast strong { color: #97d3eb; font-weight: 500; }

/* --------------------------------------------------------- operations */

.operations {
  position: relative;
  overflow: hidden;
  background: #0c0d0a;
  padding: clamp(80px, 12vh, 150px) clamp(20px, 5vw, 60px);
}

.operations::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(42rem 30rem at 82% 8%, rgba(151, 211, 235, 0.12), transparent 62%),
    radial-gradient(40rem 30rem at 12% 92%, rgba(255, 216, 121, 0.14), transparent 62%),
    linear-gradient(90deg, rgba(5, 6, 4, 0.92), rgba(5, 6, 4, 0.2) 58%, transparent);
  pointer-events: none;
}

.ops-grid {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.44fr 0.56fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}

.ops-copy h2 {
  margin: 18px 0 20px;
  font: 400 clamp(34px, 4.4vw, 72px)/0.98 "IBM Plex Sans", sans-serif;
  letter-spacing: -0.02em;
}

.ops-copy p {
  margin: 0 0 30px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  max-width: 46ch;
}

.ops-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #1b160d;
  font: 12px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  transition: color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.ops-cta:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
}

.cube-stage {
  display: grid;
  place-items: center;
  min-height: min(70svh, 560px);
}

.modal-cube-shell {
  --cube-size: clamp(142px, 18vw, 250px);
  --spread: 1;
  position: relative;
  width: var(--cube-size);
  height: var(--cube-size);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.modal-cube-shell:focus-visible {
  outline: 1px solid var(--line);
  outline-offset: 10px;
}

.cube-idle {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  animation: core-cube-float 6s ease-in-out infinite;
}

.operations-core-cube {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.17, 0.78, 0.18, 1);
}

.modal-cube-shell.is-exploded .operations-core-cube { transform: scale(0.72); }

.cube-face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background:
    radial-gradient(circle at 48% 44%, rgba(255, 216, 121, 0.98), rgba(151, 211, 235, 0.7) 46%, rgba(24, 20, 10, 0.95) 100%),
    linear-gradient(135deg, rgba(151, 211, 235, 0.9), rgba(255, 216, 121, 0.85) 50%, rgba(20, 16, 8, 0.95));
  box-shadow:
    inset 0 2px 14px rgba(255, 255, 255, 0.4),
    inset 0 -16px 30px rgba(0, 0, 0, 0.45),
    0 18px 40px rgba(0, 0, 0, 0.5);
  opacity: 0.92;
}

.face-front { transform: translateZ(calc(var(--cube-size) / 2)); }
.face-back { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.face-right { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.face-left { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.face-top { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

.cube-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(255, 216, 121, 0.95), rgba(151, 211, 235, 0.55));
  box-shadow: 0 0 18px rgba(255, 216, 121, 0.35);
  opacity: 0;
  filter: blur(6px);
  transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(0.4);
  transition: transform 0.76s cubic-bezier(0.17, 0.78, 0.18, 1), opacity 0.42s ease;
  transition-delay: var(--d, 0ms);
}

.cube-particle.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.modal-cube-shell.is-exploded .cube-particle {
  opacity: 1;
  filter: blur(0);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--tx) * var(--spread)), calc(var(--ty) * var(--spread)), var(--tz))
    rotate(var(--r, 0deg))
    scale(var(--s, 0.4));
}

/* --------------------------------------------------------- animations */

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes core-cube-float {
  0%, 100% { transform: translateY(0) rotateX(-14deg) rotateY(18deg); }
  50% { transform: translateY(-12px) rotateX(-9deg) rotateY(26deg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .typed::after, .cube-idle { animation: none; }
  .bar { transition: none; }
}

/* --------------------------------------------------------- responsive */

@media (max-width: 820px) {
  .site-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .site-nav {
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }

  .header-cta { text-align: center; }

  .console-line { display: none; }

  .hero-inner { gap: 30px; }

  .console-card { width: 100%; }

  .console-tabs {
    grid-template-columns: repeat(3, 1fr);
    min-height: 48px;
  }

  .tabs-spacer, .win-controls { display: none; }

  .console-pane { min-height: 200px; }

  .accordion-inner {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 18px;
    padding-top: clamp(60px, 12vh, 110px);
  }

  .accordion-nav {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .accordion-stack { height: 78svh; }

  .accordion-card { grid-template-columns: 1fr; }

  .pricing-top { grid-template-columns: 1fr; }

  .plan-row { grid-template-columns: 1fr; }

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

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

  .showcase-head { grid-template-columns: 1fr; }

  .dash-body { grid-template-columns: 1fr; }

  .dash-side {
    border-right: 0;
    border-bottom: 1px solid rgba(151, 211, 235, 0.14);
  }

  .dash-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .col-policy, .col-state { display: none; }

  .toast {
    position: static;
    display: inline-grid;
    margin: 16px;
  }

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

  .modal-cube-shell { --spread: 0.72; }

  .cube-stage { min-height: 420px; }
}

@media (max-width: 520px) {
  .hero { padding: 22px 18px 0; }

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

  .hero-copy p { font-size: 15px; }

  .accordion-nav { grid-template-columns: 1fr; }

  .modal-cube-shell { --spread: 0.48; }

  .cube-stage { min-height: 360px; }

  .dash-main-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* ============ self-hosted IBM Plex ============ */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/plex-sans-400-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/plex-sans-500-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("./fonts/plex-mono-400-latin.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("./fonts/plex-mono-500-latin.woff2") format("woff2")}

body{font-family:"IBM Plex Sans","PingFang SC","Microsoft YaHei",system-ui,sans-serif}

/* ============ landing chat mock ============ */
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1px solid rgba(151,211,235,.14)}
.chat-head h3{margin:0;font-size:17px;font-weight:500;color:#97d3eb}
.chat-head .presence{font:11px "IBM Plex Mono",monospace;color:rgba(223,245,255,.5);text-transform:uppercase;letter-spacing:.05rem}
.chat-msgs{display:grid;gap:16px;padding:20px 24px}
.chat-msg{display:grid;grid-template-columns:34px 1fr;gap:12px}
.chat-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:11px/1 "IBM Plex Mono",monospace;color:#1b160d;background:linear-gradient(135deg,var(--accent-2),rgba(151,211,235,.85))}
.chat-avatar.agent{background:linear-gradient(135deg,#97d3eb,rgba(255,216,121,.85));color:#08131a}
.chat-name{font-size:13px;color:#dff5ff}
.chat-time{margin-left:8px;font:10.5px "IBM Plex Mono",monospace;color:rgba(223,245,255,.4)}
.chat-badge{margin-left:8px;padding:2px 7px;border:1px solid rgba(151,211,235,.4);border-radius:999px;font:10px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.05rem;color:#97d3eb}
.chat-text{margin-top:4px;font-size:13.5px;line-height:1.6;color:rgba(223,245,255,.85)}
.chat-text code{font:12px "IBM Plex Mono",monospace;background:rgba(151,211,235,.1);border-radius:4px;padding:1px 5px}
.chat-composer{display:flex;gap:10px;align-items:center;padding:14px 24px 22px;border-top:1px solid rgba(151,211,235,.14)}
.chat-input{flex:1;height:38px;display:flex;align-items:center;padding:0 12px;border:1px solid rgba(151,211,235,.25);border-radius:6px;color:rgba(223,245,255,.45);font:12px "IBM Plex Mono",monospace}
.chat-send{height:38px;padding:0 16px;border:0;border-radius:6px;background:#97d3eb;color:#051014;font:12px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.04rem}
.landing-footer{position:relative;z-index:1;max-width:1320px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;padding:28px clamp(20px,5vw,60px) 48px;border-top:1px solid var(--line);color:var(--muted);font:12px "IBM Plex Mono",monospace}
.landing-footer nav{display:flex;flex-wrap:wrap;gap:18px}
.landing-footer a{color:var(--muted)}
.landing-footer a:hover{color:var(--ink)}

/* ============ docs shell ============ */
.skip{position:absolute;left:-9999px;top:0;z-index:99;padding:10px 14px;background:var(--accent);color:#241d0f;border-radius:0 0 8px 0;font:12px "IBM Plex Mono",monospace}
.skip:focus{left:0}
.docs-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:10px clamp(16px,4vw,40px);background:rgba(23,19,13,.78);-webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);border-bottom:1px solid var(--line)}
.docs-brand{display:flex;align-items:center;gap:10px;min-width:0}
.docs-brand .brand{font-size:12px}
.docs-dropdown{position:relative}
.docs-dropdown summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:8px 12px;color:var(--muted);font:12px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.04rem;border:1px solid transparent;border-radius:999px;user-select:none;transition:color .18s,border-color .18s,background .18s}
.docs-dropdown summary::-webkit-details-marker{display:none}
.docs-dropdown summary:hover,.docs-dropdown[open] summary{color:var(--ink);background:var(--glass);border-color:var(--line)}
.docs-dropdown summary svg{transition:transform .15s}
.docs-dropdown[open] summary svg{transform:rotate(90deg)}
.docs-dropdown summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.docs-panel{position:absolute;top:calc(100% + 10px);left:0;width:262px;max-width:calc(100vw - 32px);padding:6px;background:#1d1810;border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 44px rgba(0,0,0,.5);z-index:30}
.docs-panel a{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 12px;border-radius:8px;line-height:1.5}
.docs-panel a:hover,.docs-panel a:focus-visible{background:rgba(234,208,154,.08)}
.docs-panel a[aria-current=page]{background:rgba(234,208,154,.1);color:var(--accent)}
.docs-panel strong{display:block;font-size:14px;font-weight:500}
.docs-panel small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.doc-check{font:13px "IBM Plex Mono",monospace;color:var(--muted)}
[aria-current=page] .doc-check{color:var(--accent)}
.docs-layout{display:grid;grid-template-columns:264px minmax(0,900px);gap:clamp(28px,5vw,72px);max-width:1290px;margin:0 auto;padding:0 clamp(16px,4vw,45px)}
.docs-side{position:sticky;top:58px;height:calc(100vh - 58px);padding:42px 24px 28px 0;border-right:1px solid var(--line);overflow-y:auto}
.docs-side .nav-label{display:flex;justify-content:space-between;padding:0 12px 20px;font:11px "IBM Plex Mono",monospace;letter-spacing:.08rem;text-transform:uppercase;color:var(--muted)}
.docs-side .nav-label span{border:1px solid var(--line);padding:3px 6px;border-radius:5px}
.docs-side nav{display:grid;gap:4px}
.docs-side nav a{display:flex;gap:10px;align-items:baseline;padding:9px 12px;border:1px solid transparent;border-radius:999px;font-size:13.5px;color:rgba(255,244,213,.6);transition:color .16s,background .16s,border-color .16s,transform .16s}
.docs-side nav a span{font:11px "IBM Plex Mono",monospace;color:rgba(255,244,213,.35)}
.docs-side nav a:hover{color:var(--ink);background:rgba(255,239,199,.05)}
.docs-side nav a.active{color:var(--accent);background:rgba(234,208,154,.08);border-color:rgba(234,208,154,.35);transform:translateX(2px)}
.docs-side nav a.active span{color:var(--accent)}
.sidebar-note{margin:44px 8px 0;padding:16px;border:1px solid var(--line);border-radius:10px;background:rgba(255,239,199,.03);font:12px/1.7 "IBM Plex Mono",monospace;color:var(--muted)}
.sidebar-note .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}
.sidebar-note p{font-family:"IBM Plex Sans","PingFang SC",sans-serif;font-size:13px;line-height:1.7;margin:12px 0 14px}
.sidebar-note a{color:var(--accent)}
.docs-main{min-width:0;padding-top:54px}
.doc-hero .eyebrow{font-size:11px;letter-spacing:.14rem}
.doc-hero h1{margin:18px 0 22px;font:400 36px/1.35 "IBM Plex Sans","PingFang SC",sans-serif;letter-spacing:-.02em}
.doc-hero h1 span{display:block;margin-top:6px;color:var(--accent);font-size:clamp(40px,5.6vw,66px);line-height:1.15}
.doc-hero .lead{margin:0;color:var(--muted);font-size:16px;line-height:1.9}
.base{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin:30px 0 22px;padding:14px 18px;background:#0d1013;border:1px solid var(--line);border-radius:8px}
.base span{font:10px "IBM Plex Mono",monospace;letter-spacing:.12rem;color:var(--muted);text-transform:uppercase}
.base code{font:13px "IBM Plex Mono",monospace;color:var(--ink);overflow-wrap:anywhere}
.hero-links{display:flex;flex-wrap:wrap;gap:12px}
.hero-links a{display:inline-flex;align-items:center;height:38px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--glass);font:12px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.04rem;transition:background .18s,transform .18s}
.hero-links a:first-child{background:var(--accent);color:#241d0f;border-color:transparent}
.hero-links a:hover{transform:translateY(-1px)}
.hero-links a:first-child:hover{background:var(--accent-2)}
.doc-overview{margin:56px 0 44px;padding-top:30px;border-top:1px solid var(--line)}
.doc-overview h2{margin:10px 0 22px;font-size:22px;font-weight:500}
.doc-overview .section-kicker{font:11px "IBM Plex Mono",monospace;letter-spacing:.14rem;text-transform:uppercase;color:var(--accent)}
.endpoint{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.endpoint b{font:11px "IBM Plex Mono",monospace;color:var(--accent)}
.endpoint code{font:13px "IBM Plex Mono",monospace;color:var(--ink)}
.endpoint span{color:var(--muted);font-size:13px}
.doc-article{min-width:0}
.doc-article>p:first-child{display:none}
.doc-article h2{margin:60px 0 18px;padding-top:28px;border-top:1px solid var(--line);font-size:24px;font-weight:500;letter-spacing:-.01em}
.doc-article h3{margin:34px 0 12px;font-size:17px;font-weight:500;color:var(--ink)}
.doc-article p,.doc-article li{color:var(--muted);font-size:15px;line-height:1.85}
.doc-article strong{color:var(--ink);font-weight:500}
.doc-article a{color:var(--accent);border-bottom:1px solid rgba(234,208,154,.35)}
.doc-article a:hover{border-bottom-color:var(--accent)}
.doc-article code{font:12.5px "IBM Plex Mono",monospace;background:rgba(234,208,154,.09);border:1px solid rgba(234,208,154,.18);border-radius:5px;padding:1px 5px;color:var(--ink)}
.doc-article pre{position:relative;margin:18px 0;padding:16px 18px;background:#0a0906;border:1px solid var(--line);border-radius:8px;overflow:auto;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.doc-article pre code{display:block;background:none;border:0;padding:0;color:var(--muted);font:12.5px/1.75 "IBM Plex Mono",monospace}
.doc-article pre .copy{position:absolute;top:8px;right:8px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--glass);color:var(--muted);font:11px "IBM Plex Mono",monospace;cursor:pointer;transition:background .16s,color .16s}
.doc-article pre .copy:hover{background:var(--glass-strong);color:var(--ink)}
.doc-article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:13.5px}
.doc-article th{padding:10px 8px;border-bottom:1px solid var(--line);font:11px "IBM Plex Mono",monospace;text-transform:uppercase;letter-spacing:.06rem;color:var(--muted);text-align:left}
.doc-article td{padding:11px 8px;border-bottom:1px solid rgba(255,240,199,.12);color:var(--muted)}
.doc-article blockquote{margin:18px 0;padding:6px 0 6px 16px;border-left:2px solid var(--accent);color:var(--muted)}
.doc-article hr{border:0;border-top:1px solid var(--line);margin:34px 0}
.doc-article ul,.doc-article ol{padding-left:22px}
.doc-footer{display:flex;justify-content:space-between;gap:16px;margin-top:70px;padding:30px 0 70px;border-top:1px solid var(--line);color:var(--muted);font:12px "IBM Plex Mono",monospace}
.doc-footer a{color:var(--accent)}
.doc-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(16px);padding:10px 16px;background:#0d1013;border:1px solid var(--line);border-radius:999px;color:var(--ink);font:12px "IBM Plex Mono",monospace;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
.doc-toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:980px){
 .docs-layout{grid-template-columns:1fr;gap:0}
 .docs-side{position:static;height:auto;padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}
 .docs-side nav{grid-template-columns:1fr 1fr}
 .docs-main{padding-top:36px}
 .sidebar-note{display:none}
}
@media (max-width:640px){
 .docs-side nav{grid-template-columns:1fr}
 .doc-hero h1 span{font-size:38px}
 .endpoint{grid-template-columns:56px 1fr}
 .endpoint span{grid-column:2}
 .doc-footer{flex-direction:column}
}
.dash-main-head .presence{margin-right:auto;margin-left:2px;font:11px "IBM Plex Mono",monospace;color:rgba(223,245,255,.5);text-transform:uppercase;letter-spacing:.05rem}

/* plan B: sequential typing caret */
.console-out p{margin:0}
.console-out p + p{margin-top:2px}
.typed::after{content:none}
.typed.is-active::after{content:"";display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--accent);animation:cursor-blink 1s steps(2,start) infinite}
@media (prefers-reduced-motion: reduce){.typed.is-active::after{animation:none}}
.console-pane,.code-window pre,.api-window pre,.api-spec pre,.binary-map,.asset-row,.doc-check,.doc-footer,.price-row b,.hero-links a,.base code{font-family:"IBM Plex Mono","Segoe UI Symbol","Apple Symbols",monospace}
/* console card window controls: three dots */
.win-controls{display:flex;align-items:center;gap:5px;padding-right:5px}
.win-controls .dot{display:block;width:9px;height:9px;border-radius:50%;background:rgba(255,240,199,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}

/* ---------- landing header: compact on mobile ---------- */
@media (max-width: 820px) {
  .site-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
  }

  .site-header .brand { flex: 0 0 auto; }

  .site-header .header-cta {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 8px 12px;
    font-size: 11px;
    white-space: nowrap;
  }

  .site-header .site-nav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }
}

@media (max-width: 520px) {
  .site-header .brand,
  .site-header .header-cta {
    padding: 7px 10px;
    font-size: 11px;
  }

  .site-header .site-nav { gap: 10px; }
  .site-header .site-nav a { font-size: 11px; }
}

/* ---------- landing header: mobile drawer ---------- */
.menu-toggle { display: none; }

@media (max-width: 820px) {
  .site-header {
    position: relative;
    flex-wrap: nowrap;
  }

  .site-header .brand {
    flex: 0 0 auto;
  }

  .menu-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-left: auto;
    padding: 0;
    border-radius: 999px;
    cursor: pointer;
  }

  .menu-bars,
  .menu-bars::before,
  .menu-bars::after {
    content: "";
    display: block;
    width: 16px;
    height: 1px;
    background: var(--ink);
  }

  .menu-bars {
    position: relative;
    transition: background 0.16s ease;
  }

  .menu-bars::before {
    position: absolute;
    top: -5px;
    transition: transform 0.18s ease, top 0.18s ease;
  }

  .menu-bars::after {
    position: absolute;
    top: 5px;
    transition: transform 0.18s ease, top 0.18s ease;
  }

  .site-header.menu-open .menu-bars { background: transparent; }
  .site-header.menu-open .menu-bars::before { top: 0; transform: rotate(45deg); }
  .site-header.menu-open .menu-bars::after { top: 0; transform: rotate(-45deg); }

  .site-header .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    flex-basis: auto;
    order: 0;
    gap: 4px;
    margin-left: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(11, 16, 19, 0.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    z-index: 30;
  }

  .site-header.menu-open .site-nav { display: flex; }

  .site-header .site-nav a {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 12px;
  }

  .site-header .site-nav a:hover {
    background: rgba(151, 211, 235, 0.08);
    color: var(--ink);
  }

  .site-header .site-nav .nav-cta {
    margin: 6px 0 0;
    width: 100%;
    justify-content: center;
    text-align: center;
    background: var(--accent);
    border-color: transparent;
    color: #241d0f;
  }

  .site-header .site-nav .nav-cta:hover {
    background: var(--accent-2);
    color: #241d0f;
  }
}

/* ---------- landing header: solid bar + inline nav on mobile ---------- */
@media (max-width: 820px) {
  .site-header {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(11, 16, 19, 0.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  }

  .site-header .brand {
    flex: 0 0 auto;
  }

  .menu-toggle { display: none; }

  .site-header .site-nav {
    position: static;
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 14px;
    order: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header .site-nav a {
    padding: 6px 2px;
    border-radius: 6px;
    font-size: 12px;
  }

  .site-header .site-nav .nav-cta {
    margin: 4px 0 2px;
    width: 100%;
    padding: 10px 14px;
    justify-content: center;
    background: var(--accent);
    border-color: transparent;
    color: #241d0f;
  }

  .site-header .site-nav .nav-cta:hover {
    background: var(--accent-2);
    color: #241d0f;
  }
}

/* mobile header bar: main-site theme color (warm dark + gold line) */
@media (max-width: 820px) {
  .site-header {
    background: rgba(23, 19, 13, 0.96);
    border-color: rgba(255, 240, 199, 0.28);
  }
}

/* mobile nav: horizontal row like desktop */
@media (max-width: 820px) {
  .site-header .site-nav {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .site-header .site-nav .nav-cta {
    width: auto;
    margin: 0;
    padding: 8px 14px;
  }
}

/* mobile: single-row header, drop the CTA */
@media (max-width: 820px) {
  .site-header {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .site-header .brand {
    flex: 0 0 auto;
    padding: 7px 10px;
    font-size: 11px;
  }

  .site-header .site-nav {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    justify-content: flex-end;
    scrollbar-width: none;
  }

  .site-header .site-nav::-webkit-scrollbar { display: none; }

  .site-header .site-nav a {
    padding: 4px 0;
    font-size: 11px;
    white-space: nowrap;
  }

  .site-header .site-nav .nav-cta { display: none; }
}