/*
 * RULES:
 * 1. No px. Always use relative units (rem, em, %). Responsive frontend.
 * 2. Reduce classes. Reduce colors. No hardcoded colors — use var(--color-N) palette references.
 */

@font-face {
 font-family: 'Manrope';
 font-style: normal;
 font-weight: 400 800;
 font-display: swap;
 src: url('/fonts/manrope-cyr-ext.woff2') format('woff2');
 unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
 font-family: 'Manrope';
 font-style: normal;
 font-weight: 400 800;
 font-display: swap;
 src: url('/fonts/manrope-cyr.woff2') format('woff2');
 unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
 /* ── Palette ──────────────────────────────────── */
 --color-1: #FFFFFF; /* bg / text-on-dark */
 --color-2: #F5F6F7; /* bg-soft: sections */
 --color-4: #1E1E1F; /* text */
 --color-5: #2772F5; /* accent blue */
 --color-6: #8E8E93; /* muted */
 /* border subtle */
 /* border strong */
 --color-10: #1a60e0; /* accent blue: hover */
 --color-11: #EBF3FF; /* tint bg */
 --color-12: #D6E8FF; /* tint hover */
 --color-13: #0BB867; /* accent green */
 --color-14: #f87171; /* danger */
 --color-15: #fbbf24; /* warn */
 --color-16: #f59e0b; /* warn dark */
 --color-17: #4ade80; /* ok */
 --color-18: #00abc2; /* kz flag blue */
 --color-19: #ffec2d; /* kz flag yellow */

 /* ── Semantic aliases ──────────────────────── */
 --bg: var(--color-1);
 --bg-soft: var(--color-2);
 --accent: var(--color-5);
 --accent-soft: rgba(39, 114, 245, 0.08);
 --accent-2: var(--color-13);
 --danger: var(--color-14);
 --warn: var(--color-15);
 --text: var(--color-4);
 --muted: var(--color-6);
 --border: rgba(0, 0, 0, 0.09);
 --border-subtle: rgba(0, 0, 0, 0.07);
 --border-strong: rgba(0, 0, 0, 0.15);
 --shadow-soft: 0 0.125rem 1rem rgba(0, 0, 0, 0.08);
 --radius-lg: 1.5rem;
 --radius-md: 0.75rem;
 --radius-sm: 62.5rem;
 --max-width: 70rem;

 --text-2xs: 0.625rem;
 --text-xs: 0.6875rem;
 --text-sm: 0.8125rem;
 --text-md: 0.875rem;
 --text-base: 0.9375rem;

 --fw-normal: 500;
 --fw-medium: 600;
 --fw-bold: 700;
 --fw-black: 800;
}

/* ── Dark mode ─────────────────────────────────── */
html.dark {
  --color-1: #0f0f11;
  --color-2: #18181b;
  --color-4: #f4f4f5;
  --color-6: #71717a;
  --color-10: #60a5fa;
  --color-11: rgba(39, 114, 245, 0.12);
  --color-12: rgba(39, 114, 245, 0.2);
  --border: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --shadow-soft: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.5);
}
html.dark body { background: var(--color-1); color: var(--color-4); }
html.dark .card { background: var(--color-2); border-color: var(--border-subtle); }
html.dark header, html.dark [data-include="header"] {
  background: rgba(15, 15, 17, 0.9);
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  border-bottom-color: var(--border-subtle);
}
html.dark .btn-primary { color: #fff; }
html.dark .btn-tint { background: rgba(39, 114, 245, 0.14); color: #60a5fa; }
html.dark .btn-ghost { color: var(--color-4); border-color: var(--border-strong); }
html.dark .logo-inner { color: #fff; }
html.dark .flag-panel,
html.dark .flag-cta .btn-ghost { color: #fff; }
html.dark .login-box button { color: #fff; }
html.dark .pricing { background: var(--color-2); }
html.dark .chains { background: rgba(255, 255, 255, 0.02); }
html.dark .pricing-card { background: var(--color-1); }
html.dark .chain-card { background: var(--color-1); }
html.dark .node-row { background: var(--color-1); border-color: var(--border-subtle); }
html.dark .hero-panel { background: var(--color-2); }
html.dark .faq-item { background: var(--color-2); }
html.dark .benefit-card { background: var(--color-2); }
html.dark .logo-text-main { color: var(--color-4); }
html.dark .btn-dropdown-list { background: var(--color-2); box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.4); }
html.dark .mobile-drawer { background: var(--color-1); }

html {
 background-color: var(--bg);
 scroll-padding-top: 5rem;
 scroll-behavior: smooth;
}

* {
 box-sizing: border-box;
}

body {
 margin: 0;
 font-family: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 font-weight: 500;
 background: var(--bg);
 color: var(--text);
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden;
}

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

button {
 border: none;
}

.page {
 min-height: 100vh;
}

/* ── Header ───────────────────────────────────── */

[data-include="header"] {
 position: sticky;
 top: 0;
 z-index: 20;
}

header {
 background: var(--bg);
 position: relative;
 font-weight: 400;
}

.nav {
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 1.094rem 1.25rem;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 0.9375rem;
}

.nav-left {
 display: flex;
 align-items: center;
 gap: 0.75rem;
}

.logo-mark {
 width: 2.1875rem;
 height: 2.1875rem;
 border-radius: 0.625rem;
 background: var(--accent);
 flex-shrink: 0;
}

.logo-inner {
 width: 100%;
 height: 100%;
 border-radius: 0.625rem;
 background: var(--accent);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--color-1);
 font-weight: 700;
 font-size: var(--text-base);
 letter-spacing: 0.06em;
}

.logo-text-main {
 font-weight: 600;
 font-size: 1.594rem;
 letter-spacing: 0.06em;
}

.logo-text-sub {
 font-size: var(--text-2xs);
 color: var(--muted);
 text-transform: uppercase;
 letter-spacing: 0.14em;
}

.nav-links {
 display: flex;
 align-items: center;
 gap: 1.406rem;
 font-size: 1rem;
 color: var(--text);
}

.nav-links a {
 padding: 0.547rem 0.9375rem;
 border-radius: var(--radius-sm);
 transition: color 0.15s ease-out, background 0.15s ease-out;
}

.nav-links a:hover {
 background: var(--bg-soft);
 color: var(--text);
}

.nav-right {
 display: flex;
 align-items: center;
 gap: 0.625rem;
}

.btn {
 border-radius: 1rem;
 font-size: var(--text-md);
 height: 2.5rem;
 padding: 0 1.25rem;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 0.375rem;
 transition: all 0.15s ease-out;
 white-space: nowrap;
}

.btn-primary {
 background: var(--accent);
 color: var(--color-1);
 font-weight: 600;
}

.btn-primary:hover {
 background: var(--color-10);
 transform: translateY(-0.0625rem);
}

.btn-tint {
 background: var(--bg-soft);
 color: var(--accent);
 font-weight: 500;
}

.btn-tint:hover {
 background: var(--color-2);
}

.btn-ghost {
 color: var(--text);
 border-color: var(--border-subtle);
}

.btn-ghost:hover {
 background: var(--border-subtle);
 color: var(--text);
 border-color: var(--border-strong);
}

/* ── Dropdown button ──────────────────────────── */

.btn-dropdown {
 position: relative;
 font-size: .875rem;
 font-weight: 500;
 cursor: pointer;
}

.btn-dropdown-toggle {
 display: inline-flex;
 align-items: center;
 gap: 0.375rem;
 border-radius: var(--radius-sm);
 padding: 0.4375rem 0.75rem;
 background: transparent;
 color: var(--text);
 font-family: inherit;
 font-weight: 400;
 font-size: 1rem;
 transition: color 0.15s ease-out, background 0.15s ease-out;
 white-space: nowrap;
}

.btn-dropdown-toggle:hover {
 background: var(--bg-soft);
 color: var(--text);
}

.btn-dropdown:not(.mega-dropdown)::before {
 content: '';
 position: absolute;
 top: 100%;
 left: -1rem;
 right: -1rem;
 height: 0.75rem;
}

.btn-dropdown-list {
 visibility: hidden;
 opacity: 0;
 pointer-events: none;
 position: absolute;
 top: calc(100% + 0.75rem);
 left: 0;
 min-width: 10rem;
 background: var(--bg);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-soft);
 padding: 0.25rem;
 z-index: 100;
 transition: opacity 0.2s ease 0.1s, visibility 0s linear 0.3s;
}

.btn-dropdown.open .btn-dropdown-list,
.btn-dropdown:hover .btn-dropdown-list {
 visibility: visible;
 opacity: 1;
 pointer-events: auto;
 transition: opacity 0.05s ease, visibility 0s linear 0s;
}

.btn-dropdown-item {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 padding: 0.4375rem 0.625rem;
 border-radius: 0.5rem;
 color: var(--text);
 transition: background 0.1s;
}

.btn-dropdown-item:hover {
 background: var(--bg-soft);
}

.btn-dropdown-item.selected {
 color: var(--accent);
}

.btn-dropdown-item input[type="radio"] {
 display: none;
}

/* ── Mega dropdown ──────────────────────────── */

.mega-dropdown {
 position: static;
}

.mega-panel {
 visibility: hidden;
 opacity: 0;
 pointer-events: none;
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 background: var(--bg);
 box-shadow: var(--shadow-soft);
 z-index: 100;
 transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.mega-panel.open {
 visibility: visible;
 opacity: 1;
 pointer-events: auto;
 transition: opacity 0.1s ease, visibility 0s linear 0s;
}

.mega-inner {
 max-width: var(--max-width);
 margin: 0 auto;
 padding: 1.25rem 1rem;
 display: flex;
 gap: 0;
}

.mega-sidebar {
 width: 12.5rem;
 flex-shrink: 0;
 padding-right: 0.75rem;
 margin-right: 1.5rem;
 display: flex;
 flex-direction: column;
 gap: 0.125rem;
}

.mega-tab {
 display: block;
 padding: 0.625rem 0.75rem;
 cursor: pointer;
 font-size: var(--text-md);
 font-weight: 500;
 color: var(--text);
 transition: background 0.1s;
 user-select: none;
}

.mega-tab:hover,
.mega-tab.active {
 background: var(--bg-soft);
}

.mega-content {
 flex: 1;
}

.mega-label {
 font-size: var(--text-xs);
 font-weight: 600;
 color: var(--muted);
 text-transform: uppercase;
 letter-spacing: 0.08em;
 margin: 0 0 0.75rem;
 padding: 0 0.25rem;
}

.mega-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 15rem));
 gap: 0.125rem 0.25rem;
}

.mega-item {
 display: flex;
 align-items: center;
 gap: 0.625rem;
 padding: 0.5rem 0.875rem 0.5rem 0.5rem;
 border-radius: 0.625rem;
 color: var(--text);
 transition: background 0.1s;
}

.mega-item:hover {
 background: var(--bg-soft);
 color: var(--text);
}

.mega-item::after {
 display: none;
}

.mega-icon {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 2.25rem;
 height: 2.25rem;
 border-radius: 0.625rem;
 flex-shrink: 0;
 background: var(--bg-soft);
 color: var(--text);
}

.mega-item-label {
 font-size: var(--text-md);
 font-weight: 500;
 white-space: nowrap;
}

main {
 flex: 1;
}

.section {
 padding: 2.5rem 10%;
}

.section-inner {
 max-width: var(--max-width);
 margin: 0 auto;
}

/* ── Flag banner ──────────────────────────────── */

.flag-banner {
  max-width: var(--max-width);
  margin: 1rem auto 0;
  padding: 0 1rem;
}

.flag-banner-inner {
  display: grid;
  grid-template-columns: 1fr 45.25rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-18);
  height: 30rem;
}

.flag-panel {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-1);
}

.flag-panel h1 {
  font-size: 2.45rem;
  line-height: 2.8rem;
  font-weight: 700;
  margin: 0;
}

.flag-cta {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.flag-cta .btn {
  font-size: var(--text-base);
  padding: 0.625rem 1.25rem;
}

.flag-cta .btn-ghost {
  background: transparent;
  color: var(--color-1);
}

.flag-cta .btn-ghost:hover {
  background: rgba(255,255,255,0.15);
  color: var(--color-1);
}

.flag-panel mark {
  background: var(--color-18);
  color: var(--color-19);
  cursor: pointer;
}

.flag-banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 10% 35%;
}

/* ── Hero ─────────────────────────────────────── */

.hero {
 min-height: 55vh;
 display: flex;
 align-items: center;
 padding-top: 2rem;
 padding-bottom: 2.5rem;
}

.hero-stats {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0;
 border-top: 0.0625rem solid var(--border);
 padding-top: 1.5rem;
 margin-bottom: 1.5rem;
}

.hero-stat {
 display: flex;
 flex-direction: column;
 gap: 0.25rem;
 padding-right: 1rem;
}

.hero-stat:not(:first-child) {
 padding-left: 1rem;
 border-left: 0.0625rem solid var(--border);
}

.hero-stat-value {
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--text);
 font-family: monospace;
}

.hero-stat-label {
 font-size: var(--text-xs);
 color: var(--muted);
 text-transform: uppercase;
 letter-spacing: 0.06em;
}

.hero-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.9fr);
 gap: 2rem;
 align-items: center;
}

.hero-kicker {
 display: inline-flex;
 align-items: center;
 gap: 0.625rem;
 border-radius: var(--radius-sm);
 padding: 0.25rem 0.625rem 0.25rem 0.25rem;
 background: var(--bg-soft);
 margin-bottom: 1rem;
}

/* ── Tag ─────────────────────────────────────── */

.tag {
 display: inline-flex;
 align-items: center;
 gap: 0.375rem;
 padding: 0.125rem 0.5rem;
 border-radius: var(--radius-sm);
 color: var(--muted);
 font-size: var(--text-2xs);
}

.tag-dot {
 width: 0.4375rem;
 height: 0.4375rem;
 border-radius: 50%;
 flex-shrink: 0;
 background: var(--accent-2);
}

.tag-dot.pulse {
 animation: diag-pulse 2s infinite;
}

.tag-accent {
 background: var(--accent-soft);
 border-color: transparent;
 color: var(--accent);
 font-size: var(--text-xs);
 text-transform: uppercase;
 letter-spacing: 0.14em;
}

.tag-lg {
 gap: 0.5rem;
 padding: 0.25rem 0.625rem;
 font-size: var(--text-xs);
}

.chain-head .tag { margin-left: auto; }

.hero-kicker-text {
 font-size: var(--text-sm);
 color: var(--muted);
}

.hero-title {
 font-size: clamp(1.75rem, 3.1vw, 2.25rem);
 line-height: 1.1;
 margin: 0 0 0.875rem;
 letter-spacing: -0.03em;
}

.hero-title span {
 color: var(--accent);
}

.hero-subtitle {
 margin: 0 0 1.125rem;
 font-size: var(--text-base);
 color: var(--muted);
 max-width: 32.5rem;
}

.hero-badges {
 display: flex;
 flex-wrap: wrap;
 gap: 0.625rem;
 margin-bottom: 1.125rem;
 font-size: var(--text-xs);
}

.hero-cta-row {
 display: flex;
 flex-wrap: wrap;
 gap: 0.625rem;
 align-items: center;
 margin-bottom: 0.75rem;
}

.hero-hint {
 font-size: var(--text-sm);
 color: var(--muted);
}

.hero-hint strong {
 color: var(--text);
}

.hero-meta {
 margin-top: 0.625rem;
 display: flex;
 flex-wrap: wrap;
 gap: 0.875rem;
 font-size: var(--text-xs);
 color: var(--muted);
}

.hero-meta span::before {
 content: "•";
 margin-right: 0.375rem;
 color: var(--muted);
}

.hero-panel {
 background: var(--bg-soft);
 padding: 1rem 1rem 0.875rem;
}

.hero-panel-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 0.625rem;
 font-size: var(--text-sm);
 color: var(--muted);
}

.hero-panel-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 0.625rem;
 margin-bottom: 0.75rem;
}

.card {
 border-radius: var(--radius-md);
}

.card.hero-panel {
 background: var(--bg-soft);
}

.chain-card {
 padding: 0.625rem 0.6875rem 0.5625rem;
 display: flex;
 flex-direction: column;
 gap: 0.375rem;
 background: var(--bg);
}

.chain-head {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 font-size: var(--text-md);
 font-weight: 500;
}

.icon {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

.circle {
 border-radius: 62.4375rem;
}

.chain-logo {
 width: 1.375rem;
 height: 1.375rem;
 background: var(--bg-soft);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: var(--text-xs);
}

.chain-meta {
 font-size: var(--text-xs);
 color: var(--muted);
}

.chain-foot {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 gap: 0.375rem;
 font-size: var(--text-xs);
 color: var(--muted);
 font-family: monospace;
}

.hero-panel-footer {
 padding-top: 0.5rem;
 margin-top: 0.375rem;
 font-size: var(--text-xs);
 color: var(--muted);
 border-top: 0.0625rem solid var(--border);
 text-align: center;
}

.hero-panel-live {
 display: flex;
 align-items: center;
 gap: 0.375rem;
 font-size: var(--text-xs);
 font-family: monospace;
 text-transform: uppercase;
 letter-spacing: 0.06em;
 color: var(--muted);
}

.node-list {
 display: flex;
 flex-direction: column;
 gap: 0.25rem;
 margin-bottom: 0.625rem;
}

.node-row {
 display: flex;
 align-items: center;
 gap: 0.625rem;
 padding: 0.5rem 0.625rem;
 border-radius: var(--radius-sm);
 background: var(--bg);
 border: 0.0625rem solid var(--border);
}

.node-logo {
 width: 1.75rem;
 height: 1.75rem;
 flex-shrink: 0;
 background: var(--bg-soft);
 border-radius: 0.25rem;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: var(--text-sm);
}

.node-info {
 flex: 1;
 min-width: 0;
}

.node-name {
 font-size: var(--text-sm);
 font-weight: 600;
 color: var(--text);
}

.node-sub {
 font-size: var(--text-2xs);
 color: var(--muted);
}

.node-stat {
 text-align: right;
 flex-shrink: 0;
}

.node-latency {
 font-size: var(--text-xs);
 font-family: monospace;
 font-weight: 600;
 color: var(--accent-2);
}

.node-dc {
 font-size: var(--text-2xs);
 color: var(--muted);
}

.hero-panel-footer strong {
 color: var(--text);
}

/* ── Generic section titles ───────────────────── */

.section-title {

 margin: 0 0 0.375rem;
 letter-spacing: -0.02em;
}

.section-subtitle {
 font-size: var(--text-md);
 color: var(--muted);
 margin: 0 0 1.25rem;
}

/* ── Chains section ───────────────────────────── */

.chains {
 background: var(--bg-soft);
}

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

.chain-pill-card {
 padding: 0.6875rem 0.75rem 0.625rem;
 font-size: var(--text-sm);
 background: var(--bg);
 display: flex;
 flex-direction: column;
 gap: 0.375rem;
}

.chain-pill-card > :first-child {
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-weight: 500;
}

.chain-pill-card > :last-child {
 font-size: var(--text-xs);
 color: var(--muted);
}

/* ── Pricing ──────────────────────────────────── */

.pricing {
 background: var(--bg-soft);
}

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

.pricing-card {
 background: var(--bg);
 padding: 1rem 1rem 0.875rem;
 display: flex;
 flex-direction: column;
 gap: 0.625rem;
}

.pricing-card.secondary {
 background: var(--bg);
}

.pricing-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.pricing-name {
 font-size: var(--text-base);
 font-weight: 500;
}

.pricing-note {
 font-size: var(--text-xs);
 color: var(--muted);
}

.pricing-price {

 font-weight: 600;
}

.pricing-desc {
 font-size: var(--text-sm);
 color: var(--muted);
 line-height: 1.6;
 margin: 0.75rem 0 0;
}

.pricing-price span {
 font-size: var(--text-xs);
 color: var(--muted);
 font-weight: 400;
}

.pricing-features {
 list-style: none;
 padding: 0;
 margin: 0.5rem 0 0.625rem;
 font-size: var(--text-sm);
 color: var(--muted);
}

.pricing-features li {
 display: flex;
 gap: 0.5rem;
 margin-bottom: 0.375rem;
}

.pricing-bullet {
 width: 0.5625rem;
 margin-top: 0.25rem;
 height: 0.5625rem;
 border-radius: 62.4375rem;
}

.pricing-cta {
 margin-top: auto;
 display: flex;
}

.pricing-footnote {
 margin-top: 0.75rem;
 font-size: var(--text-xs);
 color: var(--muted);
 padding-top: 0.5rem;
}

.pricing-footnote strong {
 color: var(--text);
}

/* ── Benefits ─────────────────────────────────── */

.benefit-card {
 background: var(--bg-soft);
 padding: 0.75rem 0.75rem 0.6875rem;
 font-size: var(--text-sm);
}

.benefit-card > :first-child {
 font-weight: 500;
 margin-bottom: 0.375rem;
}

.benefit-card > :last-child {
 font-size: var(--text-xs);
 color: var(--muted);
}

/* ── Private cluster banner ───────────────────── */
.private-banner { padding: 2rem; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); background: var(--bg-soft); display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 64rem) { .private-banner { flex-direction: row; align-items: center; justify-content: space-between; } }
.private-banner h3 { font-size: 1.4rem; font-weight: 700; margin: 0.5rem 0; }
.private-banner p { font-size: var(--text-sm); color: var(--muted); margin: 0.5rem 0 1rem; line-height: 1.6; }
.private-banner-badges { display: flex; flex-wrap: wrap; gap: 1rem; font-size: var(--text-xs); color: var(--muted); font-family: monospace; }
.private-banner-badges span { display: flex; align-items: center; gap: 0.35rem; }

/* ── Latency section ──────────────────────────── */
.latency-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 64rem) { .latency-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.feature-cards { display: flex; flex-direction: column; gap: 1rem; }
.feature-card { padding: 1.25rem; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); background: var(--bg-soft); display: flex; gap: 1rem; align-items: flex-start; }
.feature-card-icon { flex-shrink: 0; padding: 0.5rem; border: 0.0625rem solid var(--border); border-radius: var(--radius-sm); color: var(--accent); }
.feature-card h3 { font-size: var(--text-sm); font-weight: 600; margin: 0 0 0.375rem; }
.feature-card p { font-size: var(--text-xs); color: var(--muted); margin: 0; line-height: 1.6; }
.latency-table-wrap { overflow-x: auto; padding: 1.5rem; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); background: var(--bg-soft); }
.latency-table-wrap h3 { font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 1rem; font-family: monospace; }
.latency-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.latency-table th, .latency-table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 0.0625rem solid var(--border); }
.latency-table th { font-size: var(--text-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.latency-table td:not(:first-child) { text-align: right; }
.latency-table th:not(:first-child) { text-align: right; }
.legal .latency-table td, .legal .latency-table th { text-align: left; }
.latency-table .accent-col { color: var(--accent); font-weight: 600; }
.latency-table .ok-col { color: var(--accent-2); font-weight: 600; }
.latency-table .muted { color: var(--muted); font-size: var(--text-xs); }
.latency-footnote { font-size: var(--text-xs); color: var(--muted); margin-top: 0.625rem; font-family: monospace; }

/* ── Failover section ─────────────────────────── */
.failover-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); background: var(--bg-soft); }
@media (min-width: 64rem) { .failover-grid { grid-template-columns: 7fr 5fr; align-items: center; } }
.failover-diagram { display: flex; justify-content: center; position: relative; min-height: 18.75rem; }
.failover-diagram-inner { width: 100%; max-width: 31.25rem; position: relative; display: flex; flex-direction: column; gap: 3rem; }
.diag-row { display: flex; justify-content: center; position: relative; z-index: 2; }
.diag-row-split { justify-content: space-between; }
.diag-node { padding: 0.625rem 1rem; border-radius: var(--radius-md); border: 0.0625rem solid var(--border); text-align: center; width: 10rem; transition: all 0.3s; position: relative; }
.diag-node.active { background: var(--bg-soft); }
.diag-node.error { background: rgba(239,68,68,0.05); border-color: rgba(239,68,68,0.5); }
.diag-node.standby { opacity: 0.6; }
.diag-node.standby-active { opacity: 1; border-color: rgba(16,185,129,0.3); }
.diag-node-label { font-size: 0.65rem; font-family: monospace; text-transform: uppercase; color: var(--muted); }
.diag-node-title { font-size: 0.8rem; font-weight: 600; }
.diag-node-title.dead { text-decoration: line-through; color: var(--muted); }
.diag-node-status { font-size: 0.65rem; font-family: monospace; margin-top: 0.25rem; color: var(--muted); }
.diag-node-status.ok { color: var(--accent-2); }
.diag-node-status.err { color: var(--danger); }
.diag-node-indicator { position: absolute; top: 0.5rem; right: 0.5rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--accent-2); }
.diag-node-indicator.pulse { animation: diag-pulse 2s infinite; }
.diag-node-indicator.dead { background: var(--danger); animation: none; }
.diag-node-indicator.off { background: var(--muted); animation: none; }
.diag-gateway { padding: 0.75rem 1.25rem; border-radius: var(--radius-md); border: 0.0625rem solid var(--border); text-align: center; width: 13.75rem; background: var(--bg-soft); }
.diag-gateway-label { font-size: 0.6rem; font-family: monospace; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.diag-gateway-title { font-size: 0.8rem; font-weight: 600; }
.diag-gateway-route { font-size: 0.65rem; font-family: monospace; margin-top: 0.25rem; color: var(--accent-2); }
.diag-gateway-route.rerouting { color: var(--warn); }
.failover-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
@keyframes flow-pulse { 0% { stroke-dashoffset: 24; } 100% { stroke-dashoffset: 0; } }
.flow-line { stroke-dasharray: 8, 4; animation: flow-pulse 1s linear infinite; }
@keyframes diag-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.failover-panel { display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 1.5rem; }
.failover-log-wrap { padding: 1rem; border-radius: var(--radius-md); background: var(--bg-soft); border: 0.0625rem solid var(--border); }
.failover-log-title { font-size: 0.65rem; font-family: monospace; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.5rem; }
.failover-log { font-family: monospace; font-size: 0.75rem; color: var(--muted); height: 6.25rem; overflow-y: auto; }
.failover-log .log-ok { color: var(--accent-2); font-weight: 500; }
.failover-log .log-err { color: var(--danger); font-weight: 700; }
.failover-log .log-info { color: var(--accent); }
.btn-danger { border: 0.0625rem solid rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); color: var(--danger); }
.btn-danger:hover { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.5); }

/* ── Observability section (layout only; text reuses .hero-stat-*) ── */
.obs-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 64rem) { .obs-grid { grid-template-columns: 4fr 8fr; } }
.obs-metrics { display: flex; flex-direction: column; gap: 1.25rem; }
.obs-metric { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; }
.obs-dash { display: flex; flex-direction: column; gap: 1.5rem; }
.obs-dash-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 0.0625rem solid var(--border); }
.obs-chart { display: flex; align-items: flex-end; gap: 0.25rem; height: 12rem; padding-bottom: 0.5rem; border-bottom: 0.0625rem solid var(--border); }
.obs-bar { flex: 1; background: var(--accent-soft); border-radius: 0.1875rem 0.1875rem 0 0; }
.obs-dash-foot { display: flex; align-items: center; justify-content: space-between; }

/* ── Playground ───────────────────────────────── */
.pg-grid { display: grid; grid-template-columns: 1fr; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-soft); }
@media (min-width: 64rem) { .pg-grid { grid-template-columns: 5fr 7fr; } }
.pg-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; border-bottom: 0.0625rem solid var(--border); min-width: 0; }
@media (min-width: 64rem) { .pg-panel { border-bottom: none; border-right: 0.0625rem solid var(--border); } }
.pg-label { font-size: var(--text-xs); font-family: monospace; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.75rem; }
.pg-nets { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1.5rem; }
.pg-net { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; font-size: var(--text-sm); text-align: left; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--muted); cursor: pointer; }
.pg-net:hover { color: var(--text); }
.pg-net.active { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.pg-net-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }
.pg-select { width: 100%; padding: 0.5rem 0.75rem; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--text); font-family: monospace; font-size: var(--text-sm); margin-bottom: 1.5rem; }
.pg-headers { padding: 0.75rem; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); background: var(--bg); display: flex; flex-direction: column; gap: 0.5rem; }
.pg-header-row { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--text-xs); font-family: monospace; color: var(--muted); }
.pg-ok { color: var(--accent-2); }
.pg-send { width: 100%; justify-content: center; }
.pg-term { background: var(--bg); padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; min-height: 25rem; min-width: 0; }
.pg-term-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0.75rem; border-bottom: 0.0625rem solid var(--border); margin-bottom: 1rem; }
.pg-term-dots { display: flex; align-items: center; gap: 0.375rem; }
.pg-dot { width: 0.6875rem; height: 0.6875rem; border-radius: 50%; }
.pg-dot.red { background: rgba(239,68,68,0.4); }
.pg-dot.yellow { background: rgba(234,179,8,0.4); }
.pg-dot.green { background: rgba(16,185,129,0.4); }
.pg-term-name { font-size: var(--text-xs); font-family: monospace; color: var(--muted); margin-left: 0.5rem; }
.pg-term-meta { display: flex; gap: 1rem; font-size: var(--text-xs); font-family: monospace; color: var(--muted); }
.pg-block { margin-bottom: 1rem; }
.pg-block-label { display: block; font-size: var(--text-2xs); font-family: monospace; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 0.25rem; }
.pg-payload { font-size: var(--text-xs); font-family: monospace; color: var(--muted); background: var(--bg-soft); padding: 0.625rem; border: 0.0625rem solid var(--border); border-radius: 0.375rem; overflow-x: auto; white-space: pre-wrap; margin: 0; display: block; width: 100%; box-sizing: border-box; resize: vertical; }
.pg-response { background: var(--bg-soft); padding: 0.75rem; border: 0.0625rem solid var(--border); border-radius: 0.375rem; overflow: auto; font-family: monospace; font-size: var(--text-xs); height: 12.5rem; }
.pg-response pre { margin: 0; color: var(--text); white-space: pre-wrap; }
.pg-tabs { display: flex; gap: 0.25rem; margin-bottom: 0.5rem; }
.pg-tab { font-size: var(--text-2xs); font-family: monospace; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); background: none; border: none; border-bottom: 0.125rem solid transparent; padding: 0.25rem 0.5rem; cursor: pointer; }
.pg-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.pg-saved { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 0.0625rem solid var(--border); }
.pg-saved span { font-size: var(--text-xs); font-family: monospace; color: var(--muted); }

/* ── FAQ ──────────────────────────────────────── */

.faq-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
 gap: 1.25rem;
 font-size: var(--text-sm);
}

.faq-item {
 background: var(--bg-soft);
 padding: 0.625rem 0.75rem;
 margin-bottom: 0.625rem;
}

.faq-item > :first-child {
 font-weight: 500;
 margin-bottom: 0.25rem;
}

.faq-item > :last-child {
 color: var(--muted);
}

/* ── Footer ───────────────────────────────────── */

footer {
 background: var(--bg-soft);
 padding: 1rem;
 font-size: var(--text-xs);
 color: var(--muted);
}

.footer-inner {
 max-width: var(--max-width);
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 0.625rem;
}

.footer-links {
 display: flex;
 flex-wrap: wrap;
 gap: 0.625rem;
}

/* ── Responsive ───────────────────────────────── */

@media (max-width: 61.25rem) {
 .hero-grid {
 grid-template-columns: minmax(0, 1fr);
 }
 .grid-4 {
 grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .grid-3 {
 grid-template-columns: minmax(0, 1fr);
 }
 
 .faq-grid {
 grid-template-columns: minmax(0, 1fr);
 }
 header {
 position: static;
 }
}

/* ── Mobile menu ──────────────────────────────── */

.menu-btn {
 display: none;
 background: none;
 color: var(--text);
 cursor: pointer;
 padding: 0.375rem;
 border-radius: 0.5rem;
}

.menu-btn:hover {
 background: var(--accent-soft);
}

.mobile-drawer {
 display: none;
 flex-direction: column;
 gap: 1rem;
 padding: 1rem;
 background: var(--bg);
}

.mobile-drawer.open {
 display: flex;
}

.mobile-nav {
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
}

.mobile-nav a {
 font-size: 0.9375rem;
 color: var(--muted);
 padding: 0.5rem 0;
}

.mobile-nav a:hover {
 color: var(--text);
}

.mobile-actions {
 display: flex;
 flex-direction: column;
 gap: 0.625rem;
 align-items: flex-start;
}

.mobile-actions .btn {
 width: 100%;
 text-align: center;
 justify-content: center;
}

@media (max-width: 45rem) {
 .menu-btn {
 display: block;
 }
 .nav-links {
 display: none;
 }
 .nav-right {
 display: none;
 }
 .hero {
 padding-top: 1.625rem;
 }
 .hero-panel-grid {
 grid-template-columns: minmax(0, 1fr);
 }

 .panel-nav {
 width: 100%;
 padding: .5rem;
 display: flex;
 flex-wrap: wrap;
 gap: 0.25rem;
 align-items: center;
 }
 .panel-nav h2 { margin: 0 .5rem 0 0; font-size: .9rem; }
 .panel-nav a { padding: .3rem .5rem; margin: 0; }
 .panel-nav .balance-card { width: 100%; margin-bottom: .3rem; }
 .panel-nav .logout { margin-top: 0; margin-left: auto; }
 div[style*="display:flex;flex:1"] {
 flex-direction: column;
 }
 .panel-main { padding: .75rem; }
 .modal-box { width: calc(100vw - 2rem); }
 .section { padding-inline: 5%; }
}

/* ── Modal ────────────────────────────────────── */

.modal {
 display: none;
 position: fixed;
 inset: 0;
 z-index: 50;
 align-items: center;
 justify-content: center;
}

.modal.open { display: flex; }

.modal-overlay {
 position: absolute;
 inset: 0;
 background: rgba(0,0,0,0.7);
 backdrop-filter: blur(0.25rem);
}

.modal-box {
 position: relative;
 background: var(--bg);
 border-radius: var(--radius-lg);
 padding: 2rem;
 width: 23.75rem;
 box-shadow: var(--shadow-soft);
}

.modal-box h2 { margin: 0 0 1.2rem; font-size: 1.2rem; }
.modal-box label { font-size: var(--text-sm); color: var(--muted); display: block; margin-top: .6rem; }

.modal-box input,
.modal-box select {
 width: 100%;
 padding: .5rem;
 margin: .3rem 0;
 border-radius: 0.5rem;
 background: var(--bg);
 color: var(--text);
 font-size: .9rem;
}

.modal-actions {
 display: flex;
 gap: 0.5rem;
 justify-content: flex-end;
 margin-top: 1.2rem;
}

/* ── Login / Register ─────────────────────────── */

.login {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 min-height: 100vh;
}

.login-box {
 background: var(--bg);
 padding: 2rem;
 border-radius: var(--radius-lg);
 width: 21.25rem;
}

.login-box h1 { margin-bottom: 1rem; font-size: 1.3rem; }
.login-box label { font-size: var(--text-sm); color: var(--muted); }

.login-box select,
.login-box input,
.login-box button {
 width: 100%;
 padding: .5rem;
 margin: .3rem 0;
 border-radius: 0.5rem;
 background: var(--bg);
 color: var(--text);
 font-size: .9rem;
}

.login-box button {
 background: var(--accent);
 border-color: transparent;
 color: var(--color-1);
 font-weight: 600;
 cursor: pointer;
 margin-top: .6rem;
}

.login-box button:hover { filter: brightness(1.05); }

/* ── Panel: sidebar ──────────────────────────── */

.panel-nav {
 width: 12.5rem;
 background: var(--bg);
 padding: 1rem;
 flex-shrink: 0;
}

.panel-nav h2 { font-size: 1rem; margin-bottom: 1rem; color: var(--accent); }

.panel-nav a {
 display: block;
 padding: .4rem .6rem;
 border-radius: 0.5rem;
 margin-bottom: .2rem;
 color: var(--muted);
 font-size: var(--text-md);
}

.panel-nav a:hover,
.panel-nav a.active { background: var(--accent-soft); color: var(--text); }
.panel-nav .logout { margin-top: 2rem; color: var(--color-14); }

/* ── Panel: main content ─────────────────────── */

.panel-main { flex: 1; padding: 1.5rem; overflow-x: auto; }
.panel-main h1 { font-size: 1.2rem; margin-bottom: 1rem; }
.panel-section { margin-bottom: 2rem; }

/* ── Panel: tables ───────────────────────────── */

table { width: 100%; border-collapse: collapse; font-size: .85rem; }
th, td { padding: .45rem .6rem; text-align: left; }
th { color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: .75rem; }
tr:hover { background: rgba(30,30,31,0.04); }

.create-row input,
.create-row select {
 padding: 0.25rem 0.5rem;
 font-size: var(--text-sm);
 border-radius: 0.375rem;
 background: var(--bg);
 color: var(--text);
 font-family: inherit;
 width: 100%;
}

.create-row td { padding: 0.375rem; }

.edit-input {
 padding: 0.1875rem 0.375rem;
 font-size: var(--text-sm);
 border-radius: 0.25rem;
 background: var(--bg);
 color: var(--text);
 font-family: inherit;
}

/* ── Panel: balance card ─────────────────────── */

.balance-card {
 padding: 0.625rem 0.5rem;
 margin-bottom: 0.75rem;
 background: var(--bg);
 font-size: var(--text-sm);
}

.balance-card .amount { font-size: 1.125rem; font-weight: 600; margin: 0.25rem 0; }

/* ── Buttons ─────────────────────────────────── */

.btn-sm {
 padding: 0.125rem 0.5rem;
 font-size: var(--text-xs);
 border-radius: 0.375rem;
 background: var(--bg);
 color: var(--muted);
 cursor: pointer;
 font-family: inherit;
}

.btn-sm:hover { color: var(--text); border-color: var(--accent); }
.btn-sm.warn { border-color: rgba(245,158,11,0.3); color: var(--color-15); }
.btn-sm.warn:hover { border-color: var(--color-16); }

/* ── Badges & utilities ──────────────────────── */

.tag.ok { background: rgba(34,197,94,0.15); color: var(--color-17); }
.tag.warn { background: rgba(245,158,11,0.15); color: var(--color-15); }
.text-ok { color: var(--color-17); }
.text-warn { color: var(--color-15); }
.actions { white-space: nowrap; }

.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator { opacity: 1; }

/* ── Grid.js standalone dark theme ────────────── */

.gridjs *, .gridjs :after, .gridjs :before { box-sizing: border-box; }
.gridjs-container { color: var(--text); display: inline-block; overflow: hidden; padding: 0.125rem; position: relative; width: 100%; z-index: 0; font-size: .85rem; }
.gridjs-wrapper { border-radius: 0.5rem; overflow: auto; position: relative; width: 100%; z-index: 1; }
.gridjs-wrapper:nth-last-of-type(2) { border-radius: 0.5rem; }

table.gridjs-table { border-collapse: collapse; display: table; margin: 0; max-width: 100%; overflow: auto; padding: 0; table-layout: fixed; text-align: left; width: 100%; background: transparent; color: var(--text); font-size: .8rem; }

th.gridjs-th { background: transparent; color: var(--muted); font-size: .7rem; font-weight: 600; text-transform: uppercase; padding: .4rem .6rem; position: relative; user-select: none; vertical-align: middle; white-space: nowrap; outline: none; }
th.gridjs-th .gridjs-th-content { float: left; overflow: hidden; text-overflow: ellipsis; width: 100%; }
th.gridjs-th-sort { cursor: pointer; }
th.gridjs-th-sort .gridjs-th-content { width: calc(100% - 0.9375rem); }
th.gridjs-th-sort:hover { background: rgba(30,30,31,0.04); }
th.gridjs-th:first-child { }
th.gridjs-th:last-child { }

td.gridjs-td { background: transparent; padding: .35rem .6rem; white-space: nowrap; font-size: .8rem; line-height: 1.3; }
td.gridjs-td:first-child { }
td.gridjs-td:last-child { }
td.gridjs-message { text-align: center; color: var(--muted); }

.gridjs-tr { background: transparent; }
.gridjs-tr:hover td.gridjs-td { background: rgba(30,30,31,0.04); }
.gridjs-tr:last-child td { }

/* sort arrows */
button.gridjs-sort { background-color: transparent; background-position-x: center; background-repeat: no-repeat; background-size: contain; cursor: pointer; float: right; height: 1.5rem; margin: 0; outline: none; padding: 0; width: 0.8125rem; }
button.gridjs-sort-neutral { opacity: .3; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDEuOTk4IiBoZWlnaHQ9IjQwMS45OTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwMS45OTggNDAxLjk5OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTczLjA5MiAxNjQuNDUyaDI1NS44MTNjNC45NDkgMCA5LjIzMy0xLjgwNyAxMi44NDgtNS40MjQgMy42MTMtMy42MTYgNS40MjctNy44OTggNS40MjctMTIuODQ3cy0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2IDUuNDI0QzIxMC4yMzIgMS44MTIgMjA1Ljk1MSAwIDIwMC45OTkgMHMtOS4yMzMgMS44MTItMTIuODUgNS40MjRMNjAuMjQyIDEzMy4zMzFjLTMuNjE3IDMuNjE3LTUuNDI0IDcuOTAxLTUuNDI0IDEyLjg1IDAgNC45NDggMS44MDcgOS4yMzEgNS40MjQgMTIuODQ3IDMuNjIxIDMuNjE3IDcuOTAyIDUuNDI0IDEyLjg1IDUuNDI0ek0zMjguOTA1IDIzNy41NDlINzMuMDkyYy00Ljk1MiAwLTkuMjMzIDEuODA4LTEyLjg1IDUuNDIxLTMuNjE3IDMuNjE3LTUuNDI0IDcuODk4LTUuNDI0IDEyLjg0N3MxLjgwNyA5LjIzMyA1LjQyNCAxMi44NDhMMTg4LjE0OSAzOTYuNTdjMy42MjEgMy42MTcgNy45MDIgNS40MjggMTIuODUgNS40MjhzOS4yMzMtMS44MTEgMTIuODQ3LTUuNDI4bDEyNy45MDctMTI3LjkwNmMzLjYxMy0zLjYxNCA1LjQyNy03Ljg5OCA1LjQyNy0xMi44NDggMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDctMy42MTQtMy42MTYtNy44OTktNS40Mi0xMi44NDgtNS40MnoiLz48L3N2Zz4="); background-position-y: center; }
button.gridjs-sort-asc { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTIuMzYyIiBoZWlnaHQ9IjI5Mi4zNjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI5Mi4zNjIgMjkyLjM2MSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI4Ni45MzUgMTk3LjI4NyAxNTkuMDI4IDY5LjM4MWMtMy42MTMtMy42MTctNy44OTUtNS40MjQtMTIuODQ3LTUuNDI0cy05LjIzMyAxLjgwNy0xMi44NSA1LjQyNEw1LjQyNCAxOTcuMjg3QzEuODA3IDIwMC45MDQgMCAyMDUuMTg2IDAgMjEwLjEzNHMxLjgwNyA5LjIzMyA1LjQyNCAxMi44NDdjMy42MjEgMy42MTcgNy45MDIgNS40MjUgMTIuODUgNS40MjVoMjU1LjgxM2M0Ljk0OSAwIDkuMjMzLTEuODA4IDEyLjg0OC01LjQyNSAzLjYxMy0zLjYxMyA1LjQyNy03Ljg5OCA1LjQyNy0xMi44NDdzLTEuODE0LTkuMjMtNS40MjctMTIuODQ3eiIvPjwvc3ZnPg=="); background-position-y: 35%; background-size: 0.625rem; }
button.gridjs-sort-desc { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTIuMzYyIiBoZWlnaHQ9IjI5Mi4zNjIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI5Mi4zNjIgMjkyLjM2MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTI4Ni45MzUgNjkuMzc3Yy0zLjYxNC0zLjYxNy03Ljg5OC01LjQyNC0xMi44NDgtNS40MjRIMTguMjc0Yy00Ljk1MiAwLTkuMjMzIDEuODA3LTEyLjg1IDUuNDI0QzEuODA3IDcyLjk5OCAwIDc3LjI3OSAwIDgyLjIyOGMwIDQuOTQ4IDEuODA3IDkuMjI5IDUuNDI0IDEyLjg0N2wxMjcuOTA3IDEyNy45MDdjMy42MjEgMy42MTcgNy45MDIgNS40MjggMTIuODUgNS40MjhzOS4yMzMtMS44MTEgMTIuODQ3LTUuNDI4TDI4Ni45MzUgOTUuMDc0YzMuNjEzLTMuNjE3IDUuNDI3LTcuODk4IDUuNDI3LTEyLjg0NyAwLTQuOTQ4LTEuODE0LTkuMjI5LTUuNDI3LTEyLjg1eiIvPjwvc3ZnPg=="); background-position-y: 65%; background-size: 0.625rem; }
button.gridjs-sort:focus { outline: none; }

/* head / search */
.gridjs-head { padding: 0 0 0.5rem; width: 100%; }
.gridjs-head:after { clear: both; content: ""; display: block; }
.gridjs-head:empty { padding: 0; }
.gridjs-head button { background: transparent; cursor: pointer; margin: 0; outline: none; padding: 0; }
.gridjs-search { float: left; }
.gridjs-search-input { width: 12.5rem; }
input.gridjs-input { appearance: none; background: var(--bg); border-radius: 0.375rem; color: var(--text); font-size: var(--text-xs); line-height: 1.45; outline: none; padding: 0.3125rem 0.625rem; }
input.gridjs-input:focus { border-color: var(--accent); }

/* footer / pagination */
.gridjs-footer { padding: 0.375rem 0.5rem; width: 100%; }
.gridjs-footer:empty { padding: 0; }
.gridjs-pagination { color: var(--muted); }
.gridjs-pagination:after { clear: both; content: ""; display: block; }
.gridjs-pagination .gridjs-summary { float: left; margin-top: 0.3125rem; font-size: var(--text-xs); }
.gridjs-pagination .gridjs-pages { float: right; }
.gridjs-pagination .gridjs-pages button { background: var(--bg); color: var(--muted); outline: none; padding: 0.1875rem 0.625rem; font-size: var(--text-xs); user-select: none; }
.gridjs-pagination .gridjs-pages button:hover { color: var(--text); border-color: var(--accent); }
.gridjs-pagination .gridjs-pages button:disabled { color: var(--muted); cursor: default; }
.gridjs-pagination .gridjs-pages button.gridjs-currentPage { color: var(--text); font-weight: 700; }
.gridjs-pagination .gridjs-pages button:last-child { border-radius: 0 0.375rem 0.375rem 0; }
.gridjs-pagination .gridjs-pages button:first-child { border-radius: 0.375rem 0 0 0.375rem; }

/* temp / loading */
.gridjs-temp { position: relative; }
.gridjs-loading-bar { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 10; }
.gridjs-loading-bar:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(90deg, transparent, rgba(59,130,246,.15) 20%, rgba(59,130,246,.3) 60%, transparent); transform: translateX(-100%); animation: shimmer 2s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.gridjs-notfound, .gridjs-error { color: var(--muted); text-align: center; padding: 1rem; }
.gridjs-resizable { position: absolute; right: 0; top: 0; bottom: 0; width: 0.3125rem; cursor: ew-resize; }
.gridjs-resizable:hover { background: var(--accent); }

/* column toggle menu */
.col-menu { position: absolute; right: 0; top: 100%; background: var(--bg); border-radius: 0.5rem; padding: 0.375rem 0.5rem; z-index: 30; min-width: 8.75rem; }

/* ── Create form ─────────────────────────────── */

.create-form {
 display: flex;
 gap: 0.5rem;
 align-items: center;
 margin-bottom: 0.75rem;
}

.create-form input,
.create-form select {
 padding: 0.375rem 0.625rem;
 font-size: var(--text-sm);
 border-radius: 0.375rem;
 background: var(--bg);
 color: var(--text);
 font-family: inherit;
}

/* ── Language toggle ─────────────────────────── */

.lang-toggle {
 display: flex;
 gap: 0.125rem;
 align-items: center;
 padding-right: 0.625rem;
 margin-right: 0.125rem;
}

.lang-btn {
 background: none;
 color: var(--muted);
 padding: 0.125rem 0.375rem;
 border-radius: 0.25rem;
 cursor: pointer;
 font-size: var(--text-xs);
 font-family: inherit;
 font-weight: 500;
}

.lang-btn:hover { color: var(--text); }
.lang-btn.active { color: var(--text); }

/* ── Legal document ───────────────────────────── */
.legal { max-width: 48rem; }
.legal-meta { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 0.0625rem solid var(--border); }
.legal-meta h1 { margin: 0.5rem 0; font-size: 2rem; font-weight: 800; }
.legal-date { font-size: var(--text-xs); color: var(--muted); font-family: monospace; }
.legal h2 { font-size: var(--text-base); font-weight: 700; margin: 2rem 0 0.75rem; color: var(--text); }
.legal h3 { font-size: var(--text-md); font-weight: 600; margin: 1.25rem 0 0.5rem; color: var(--text); }
.legal p { margin: 0 0 1rem; line-height: 1.75; color: var(--muted); font-size: var(--text-md); }
.legal ul { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--muted); font-size: var(--text-md); line-height: 1.75; }
.legal li { margin-bottom: 0.25rem; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--accent); text-decoration: none; }
.legal a:hover { text-decoration: underline; }
.legal code { font-family: monospace; font-size: var(--text-xs); background: var(--bg-soft); padding: 0.0625rem 0.3125rem; border-radius: 0.1875rem; }
.legal-code { font-family: monospace; font-size: var(--text-sm); background: var(--bg-soft); padding: 1rem; border-radius: var(--radius-md); border: 0.0625rem solid var(--border); margin-bottom: 1rem; line-height: 1.6; }
.legal-divider { border: none; border-top: 0.0625rem solid var(--border); margin: 1.5rem 0; }

/* ── Private page ──────────────────────────────── */
.private-hero { text-align: center; max-width: 50rem; margin: 0 auto; }
.private-hero h1 { font-size: 2.25rem; font-weight: 800; line-height: 1.1; margin: 0.5rem 0 1rem; }
@media (min-width: 48rem) { .private-hero h1 { font-size: 3rem; } }
.private-hero .hero-subtitle { text-align: center; }
.trust-badges { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; margin-top: 2rem; font-size: var(--text-xs); color: var(--muted); font-family: monospace; }
.trust-badges span { display: flex; align-items: center; gap: 0.4rem; }
.trust-badges svg { color: var(--accent-2); flex-shrink: 0; }
.private-split { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 64rem) { .private-split { grid-template-columns: 1fr 1.35fr; align-items: start; } }
.risk-kicker { font-size: var(--text-xs); font-family: monospace; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.risk-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 1rem; }
.risk-list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--text-sm); line-height: 1.6; color: var(--muted); }
.risk-badge { width: 1.2rem; height: 1.2rem; border-radius: 50%; background: rgba(248,113,113,0.1); border: 0.0625rem solid rgba(248,113,113,0.3); color: var(--danger); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-family: monospace; font-weight: 700; margin-top: 0.125rem; }
.risk-panel { padding: 1.25rem; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); background: var(--bg-soft); }
.risk-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: var(--text-2xs); font-family: monospace; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.risk-panel-header .alert { color: var(--danger); display: flex; align-items: center; gap: 0.35rem; }
.risk-flow { display: flex; flex-direction: column; gap: 0.4rem; }
.risk-node { padding: 0.75rem; border-radius: var(--radius-sm); background: var(--bg); border: 0.0625rem solid var(--border); font-size: var(--text-xs); }
.risk-node-title { font-size: var(--text-xs); font-weight: 600; color: var(--text); }
.risk-node-sub { font-size: var(--text-2xs); color: var(--muted); }
.risk-node.exposed { background: rgba(248,113,113,0.04); border-color: rgba(248,113,113,0.25); }
.risk-node.exposed .risk-node-label { font-size: var(--text-2xs); color: var(--danger); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.risk-code-row { display: flex; justify-content: space-between; color: rgba(248,113,113,0.7); font-family: monospace; font-size: var(--text-2xs); margin-bottom: 0.2rem; }
.risk-code-row .warn { color: var(--danger); font-weight: 700; }
.risk-arrow { text-align: center; color: var(--muted); padding: 0.1rem 0; }
.grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 64rem) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.step-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 64rem) { .step-grid { grid-template-columns: repeat(5, 1fr); } }
.step-card { padding: 1.25rem; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); background: var(--bg-soft); }
.step-num { font-size: var(--text-xs); font-family: monospace; font-weight: 700; color: var(--accent); margin-bottom: 0.75rem; }
.step-card h4 { font-size: var(--text-sm); font-weight: 600; margin: 0 0 0.5rem; }
.step-card p { font-size: var(--text-xs); color: var(--muted); margin: 0; line-height: 1.6; }
.write-modules { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
.write-module { padding: 1rem; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); background: var(--bg-soft); }
.write-module-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; }
.write-module-header strong { font-size: var(--text-sm); font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
.write-module-header .latency { font-size: var(--text-2xs); font-family: monospace; color: var(--muted); }
.write-module-header .latency.accent { color: var(--accent); }
.write-module p { font-size: var(--text-xs); color: var(--muted); margin: 0; line-height: 1.6; }
.usecase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.usecase-card { padding: 1.25rem; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); background: var(--bg-soft); }
.usecase-card .icon { font-size: 1.25rem; margin-bottom: 0.6rem; }
.usecase-card h4 { font-size: var(--text-sm); font-weight: 600; margin: 0 0 0.35rem; }
.usecase-card p { font-size: var(--text-xs); color: var(--muted); margin: 0; line-height: 1.6; }
.compare-table-wrap { overflow-x: auto; border: 0.0625rem solid var(--border); border-radius: var(--radius-md); }
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.compare-table th, .compare-table td { padding: 0.7rem 1rem; text-align: left; border-bottom: 0.0625rem solid var(--border); }
.compare-table th { font-size: var(--text-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; background: var(--bg-soft); }
.compare-table td:first-child { font-weight: 600; color: var(--text); }
.compare-table td.ok { color: var(--accent-2); font-weight: 600; }
.compare-table td.bad { color: var(--danger); }
.compare-table td.dim { color: var(--muted); }
.compare-table .hl { background: var(--accent-soft); }
.compare-table th.hl { color: var(--accent); }
.contact-hero { text-align: center; max-width: 36rem; margin: 0 auto 2rem; }
.contact-hero h2 { font-size: 1.75rem; font-weight: 700; margin: 0.5rem 0 1rem; }
.contact-hero p { font-size: var(--text-sm); color: var(--muted); }
.contact-form-wrap { max-width: 28rem; margin: 0 auto; }
.form-group { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
.form-label { font-size: var(--text-2xs); font-family: monospace; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.form-input, .form-textarea { background: var(--bg); border: 0.0625rem solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; font-size: var(--text-sm); color: var(--text); font-family: inherit; outline: none; width: 100%; box-sizing: border-box; }
.form-input:focus, .form-textarea:focus { border-color: var(--accent); }
.form-textarea { height: 5rem; resize: vertical; }
.form-success { display: none; text-align: center; padding: 2rem 0; }
.form-success svg { color: var(--accent-2); display: block; margin: 0 auto 1rem; }
.form-success h4 { font-size: var(--text-base); font-weight: 600; margin: 0 0 0.5rem; }
.form-success p { font-size: var(--text-xs); color: var(--muted); margin: 0; }

/* ── Scalar API docs ──────────────────────────── */

#app {
 --scalar-font: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 --scalar-color-accent: var(--color-5);
 --scalar-background-accent: var(--accent-soft);
 --scalar-background-1: var(--bg);
 --scalar-background-2: var(--bg-soft);
 --scalar-color-1: var(--text);
 --scalar-color-2: var(--muted);
 --scalar-border-color: var(--bg-soft);
}