/* Foundations */
@font-face {
  font-family: "SF Pro Rounded";
  src: local("SF Pro Rounded Ultralight"), local("SFProRounded-Ultralight");
  font-weight: 100;
  font-style: normal;
}

:root { --line: #353535; --rail: 36px; --background: #000000; --text: #fff; --muted: #bdbdbd; --subtle: #999; --surface: #171717; --scroll: #333; --body-text: #d2d2d2; --orange: #ffbd66; }
:root[data-theme="light"] { --line: #cecece; --background: #fff; --text: #181818; --muted: #555; --subtle: #666; --surface: #ededed; --scroll: #bbb; --body-text: #333; --orange: #804600; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--background); }
body { color: var(--text); font-family: "SF Pro Rounded", ui-rounded, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
a { color: inherit; }
h1, h2, h3, p { font-weight: 100; }
h1, h2 { font-size: 28px; }
h3 { font-size: 22px; }
p { font-size: 20px; line-height: 1.6; }

/* Full-screen tab frame and animation layers */
.tab-stage { position: relative; height: 100dvh; }
.site-frame { display: flex; width: 100%; height: 100dvh; border: 1px solid var(--line); }
.page-tab {
  position: relative; flex: 0 0 var(--rail); min-width: var(--rail); max-width: var(--rail);
  display: flex; flex-direction: column; align-items: flex-start; padding: 0;
  border-right: 1px solid var(--line); background: var(--background); color: var(--muted); text-decoration: none;
}
.page-tab:hover { color: var(--text); }
.page-tab:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }
.tab-rail {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  flex: 0 0 100%; width: 35px; padding: 20px 0 22px; background: var(--background); border-right: 1px solid var(--line);
}
.tab-number { font-size: 11px; }
.tab-label, .active-tab-label { margin-top: 16px; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 14px; }
.active-tab-number {
  position: absolute; top: 0; bottom: 0; z-index: 3; width: var(--rail); padding: 20px 0 22px;
  display: flex; flex-direction: column; align-items: center; border: 1px solid var(--line);
  background: var(--background); color: var(--muted); font-size: 12px; pointer-events: none;
}
.page-panel { flex: 1; min-width: 0; padding-left: var(--rail); overflow: auto; border-right: 1px solid var(--line); scrollbar-color: var(--scroll) var(--background); }
.page-panel:last-child, .page-tab:last-child { border-right: 0; }
.page-tab .outgoing-content { position: absolute; inset: 0 auto 0 0; height: 100%; border: 0; background: var(--background); pointer-events: none; overflow: hidden; text-align: initial; }
.section-divider { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--line); }

/* Home introduction */
.home-overview { display: grid; grid-template-columns: 1fr 2fr; align-items: center; min-height: 300px; }
.home-brand { display: grid; place-items: center; position: relative; width: min(196px, 85%); aspect-ratio: 1; margin: 32px auto; }
.home-brand img { width: 100%; height: 100%; opacity: .85; animation: logo-rotation 75s linear infinite; }
.home-brand h1 { position: absolute; margin: 0; font-size: clamp(28px, 4vw, 38px); letter-spacing: -.035em; }
.introduction { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px clamp(24px, 4vw, 64px); }
.home-overview .introduction { border-left: 1px solid var(--line); align-self: stretch; }
.introduction p { margin: 0; line-height: 1.7; }
.home-overview .coming-soon { margin: 0 0 20px; }
@keyframes logo-rotation { to { transform: rotate(360deg); } }

/* Agent and Fleet diagrams */
.direct-connect { width: min(1120px, calc(100% - 40px)); margin: 56px auto 80px; }
.direct-connect-content { position: relative; display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }
.hub-content { grid-template-columns: 2fr 3fr; }
.direct-connect-content::after { content: ""; position: absolute; top: -56px; bottom: -80px; left: calc((100% - 24px) * .6 + 12px); width: 1px; background: var(--line); pointer-events: none; }
.hub-content::after { left: calc((100% - 24px) * .4 + 12px); }
.direct-connect-image { display: block; width: 100%; height: auto; align-self: center; transform: scale(1.08); }
.direct-connect-description { position: relative; padding: 16px; align-self: start; }
.direct-connect h2 { margin: 0 0 24px; letter-spacing: -.025em; }
.direct-connect-description p { margin: 0; }
.direct-connect-description p + p { margin-top: 20px; }
.page-panel[data-tab-key="tab-agent"] .direct-connect,
.page-panel[data-tab-key="tab-fleet"] .direct-connect { width: 100%; margin: 0; padding: 56px 40px 80px; }
.direct-connect-description .coming-soon { margin: 0 0 20px; }

/* Shared details and client grids */
.agent-details > h2, .clients > h2 { margin: 0; padding: 40px; }
.agent-details > p { margin: 0; padding: 0 40px 40px; font-size: 18px; line-height: 1.7; }
.agent-metrics { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.agent-metrics article { padding: 32px 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.agent-metrics article:nth-child(even) { border-right: 0; }
.agent-metrics article:nth-last-child(-n+2) { border-bottom: 0; }
.agent-metrics p { font-size: 18px; line-height: 1.7; }
.client-options { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.client-option { padding: 48px 24px; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.client-option:nth-child(even) { border-right: 0; }
.client-option h3 { margin: 0; font-size: 24px; }
.client-logo { display: block; width: 44px; height: 44px; margin: 0 auto 20px; }
.coming-soon {
  display: inline-block; margin-top: 20px; padding: 7px 14px; border-radius: 999px;
  background: rgba(255,148,0,.18); border: 1px solid rgba(255,174,64,.35);
  box-shadow: inset 0 1px 1px rgba(255,220,170,.25), 0 4px 16px rgba(255,148,0,.08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--orange); font-size: 13px; font-weight: 500; white-space: nowrap;
}

/* Features */
.features-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 40px; }
.features-heading h2 { margin: 0; }
.features-heading .coming-soon { margin: 0; }
.feature { position: relative; display: grid; grid-template-columns: 3fr 2fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding: 48px 40px; border-top: 1px solid var(--line); }
.feature-reversed { grid-template-columns: 2fr 3fr; }
.feature-reversed img { grid-column: 2; grid-row: 1; }
.feature-reversed div { grid-column: 1; grid-row: 1; }
.feature img { display: block; width: 100%; max-height: 620px; object-fit: contain; }
.feature h3 { margin: 0 0 20px; font-size: 26px; }
.feature p { margin: 0; }
.feature::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(40px + (100% - 80px - clamp(24px, 5vw, 64px)) * .6 + clamp(24px, 5vw, 64px) / 2); width: 1px; background: var(--line); pointer-events: none; }
.feature-reversed::after { left: calc(40px + (100% - 80px - clamp(24px, 5vw, 64px)) * .4 + clamp(24px, 5vw, 64px) / 2); }

/* Documentation: retained but hidden from the main navigation */
.docs-layout { display: grid; grid-template-columns: 160px minmax(0, 1fr); }
.docs-sidebar { border-right: 1px solid var(--line); padding: 32px 24px; }
.docs-sidebar h2 { margin: 0 0 24px; font-size: 20px; font-weight: 300; }
.docs-sidebar nav { display: grid; gap: 8px; }
.docs-sidebar a { padding: 10px 12px; color: var(--muted); text-decoration: none; }
.docs-sidebar a:hover, .docs-sidebar a[aria-current="page"] { background: var(--surface); color: var(--text); }
.docs-article { padding: 32px; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; font-size: 17px; line-height: 1.7; color: var(--body-text); }
.docs-article p { font-size: 17px; font-weight: 400; }
.docs-breadcrumb { color: var(--subtle); }
.docs-article > h2 { margin: 32px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 24px; font-weight: 300; }
.docs-article > h2:first-of-type { border: 0; padding: 0; font-size: 36px; }
.docs-note { border-left: 1px solid var(--line); padding: 8px 16px; }
.docs-article table { width: 100%; border-collapse: collapse; }
.docs-article th, .docs-article td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; }

/* Responsive layout and motion preferences */
@media (max-width: 1000px) {
  .direct-connect-content, .feature, .docs-layout { grid-template-columns: 1fr; }
  .direct-connect-content::after, .feature::after { display: none; }
  .feature-reversed img, .feature-reversed div { grid-column: auto; grid-row: auto; }
  .feature > div { border-top: 1px solid var(--line); padding-top: 28px; }
  .docs-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .tab-stage { height: auto; min-height: 100dvh; }
  .site-frame { flex-wrap: wrap; height: auto; min-height: 100dvh; }
  .page-tab { flex: 1 1 28%; max-width: none; min-height: 64px; padding: 12px 8px; border-bottom: 1px solid var(--line); }
  .tab-rail { width: 100%; padding: 0; border: 0; }
  .tab-label { writing-mode: horizontal-tb; transform: none; font-size: 12px; margin-top: 8px; }
  .active-tab-number { display: none; }
  .page-panel { order: 1; flex: 1 0 100%; padding-left: 0; overflow: hidden; border-right: 0; }
  .home-overview { grid-template-columns: 1fr; }
  .home-overview .introduction { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .page-panel[data-tab-key="tab-agent"] .direct-connect,
  .page-panel[data-tab-key="tab-fleet"] .direct-connect { padding: 32px 24px; }
  .agent-details > h2, .clients > h2, .features-heading { padding: 24px; }
  .agent-details > p { padding: 0 24px 24px; }
  .agent-metrics { grid-template-columns: 1fr; }
  .agent-metrics article { padding: 24px; border-right: 0; }
  .agent-metrics article:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .client-option { padding: 32px 16px; }
  .feature { padding: 32px 24px; }
}
@media (prefers-reduced-motion: reduce) { .home-brand img { animation: none; } }

/* Theme control stays outside the animated panels. */
.theme-toggle { position: fixed; bottom: 16px; right: 16px; z-index: 10; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--background); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.theme-toggle:hover { background: var(--surface); }
.theme-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
:root[data-theme="light"] .home-brand img { filter: invert(1); }
:root[data-theme="light"] .direct-connect-image { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="light"] .feature img { filter: invert(1) hue-rotate(180deg); }