@layer reset, base, components, utilities, motion;

@layer reset {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    text-size-adjust: 100%;
  }

  html.keyboard-nav {
    scroll-behavior: auto;
  }

  body, h1, h2, h3, p, figure, blockquote, dl, dd, pre {
    margin: 0;
  }

  ul, ol {
    margin: 0;
    padding: 0;
  }

  button, input, textarea, select {
    font: inherit;
  }

  button, a {
    -webkit-tap-highlight-color: transparent;
  }

  img, svg {
    display: block;
    max-inline-size: 100%;
  }
}

@layer base {
  :root {
    color-scheme: dark;
    --ink-950: #070912;
    --ink-900: #0a0d18;
    --ink-850: #0d1120;
    --ink-800: #121727;
    --ink-750: #171d30;
    --paper: #f5f4ec;
    --paper-2: #d8d9d0;
    --muted: #969baa;
    --muted-2: #858b9b;
    --signal: #a7f3c1;
    --signal-bright: #c8ffd9;
    --cyan: #72e6ff;
    --violet: #9686ff;
    --amber: #ffd17a;
    --danger: #ff827d;
    --line: rgb(255 255 255 / .1);
    --line-strong: rgb(255 255 255 / .17);
    --surface: rgb(14 18 31 / .78);
    --surface-strong: #101522;
    --shadow-xl: 0 2rem 6rem rgb(0 0 0 / .4), 0 .5rem 1.5rem rgb(0 0 0 / .24);
    --shadow-signal: 0 0 2rem rgb(167 243 193 / .14);
    --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --spring: cubic-bezier(.2, 1.55, .32, 1);
    --smooth: cubic-bezier(.22, 1, .36, 1);
    --wrap: min(76rem, calc(100% - 3rem));
  }

  body {
    min-inline-size: 20rem;
    min-block-size: 100dvh;
    overflow-x: clip;
    background: var(--ink-950);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
  }

  body::before {
    position: fixed;
    z-index: -2;
    inset: 0;
    background:
      radial-gradient(circle at 18% 12%, rgb(79 91 255 / .08), transparent 28rem),
      radial-gradient(circle at 84% 34%, rgb(52 243 183 / .045), transparent 34rem),
      var(--ink-950);
    content: "";
    pointer-events: none;
  }

  ::selection {
    background: var(--signal);
    color: var(--ink-950);
  }

  :where(a:any-link) {
    color: inherit;
    text-decoration: none;
  }

  :where(a:any-link, button):focus-visible {
    outline: .1875rem solid var(--cyan);
    outline-offset: .25rem;
  }

  button {
    border: 0;
    color: inherit;
    cursor: pointer;
  }

  h1, h2, h3 {
    line-height: 1.02;
    letter-spacing: -.045em;
    text-wrap: balance;
  }

  p {
    color: var(--muted);
    text-wrap: pretty;
  }

  code, pre {
    font-family: var(--font-mono);
  }

  .wrap {
    inline-size: var(--wrap);
    margin-inline: auto;
  }

  .site-shell {
    overflow: clip;
  }

}

@layer components {
  .skip-link {
    position: fixed;
    z-index: 1000;
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    padding: .7rem 1rem;
    border: 1px solid var(--signal);
    border-radius: .65rem;
    background: var(--ink-900);
    color: var(--paper);
    font-weight: 700;
    translate: 0 -160%;
    transition: translate .25s var(--smooth);
  }

  .skip-link:focus {
    translate: 0;
  }

  .site-header {
    position: fixed;
    z-index: 100;
    inset-block-start: 0;
    inset-inline: 0;
    border-block-end: 1px solid rgb(255 255 255 / .07);
    background: rgb(7 9 18 / .74);
    backdrop-filter: blur(1.2rem) saturate(140%);
  }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 4.75rem;
    gap: 1.5rem;
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    flex: none;
    font-size: 1.03rem;
    font-weight: 760;
    letter-spacing: -.035em;
  }

  .brand > span > span {
    color: var(--muted);
    font-weight: 560;
  }

  .brand-mark {
    inline-size: 2rem;
    block-size: 2rem;
    overflow: visible;
    fill: none;
    stroke: var(--signal);
    stroke-width: 1.6;
  }

  .brand-mark circle {
    fill: var(--signal);
    stroke: none;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    list-style: none;
  }

  .nav-links a {
    position: relative;
    display: inline-flex;
    min-block-size: 2.75rem;
    align-items: center;
    color: #b6bac5;
    font-size: .83rem;
    font-weight: 600;
    transition: color .2s ease;
  }

  .nav-links a::after {
    position: absolute;
    inset-block-end: .3rem;
    inset-inline: 50%;
    block-size: .125rem;
    border-radius: 99rem;
    background: var(--signal);
    content: "";
    scale: 0 1;
    transition: inset .3s var(--spring), scale .3s var(--spring);
  }

  .nav-links a:hover {
    color: var(--paper);
  }

  .nav-links a:hover::after {
    inset-inline: 15%;
    scale: 1;
  }

  .nav-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
  }

  .sound-toggle {
    display: inline-flex;
    min-block-size: 2.5rem;
    align-items: center;
    gap: .5rem;
    padding-inline: .65rem;
    border: 1px solid transparent;
    border-radius: 999rem;
    background: transparent;
    color: var(--muted);
    font-size: .72rem;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
  }

  .sound-toggle:hover {
    border-color: var(--line);
    background: rgb(255 255 255 / .04);
    color: var(--paper);
  }

  .sound-dot {
    position: relative;
    inline-size: .45rem;
    block-size: .45rem;
    border-radius: 50%;
    background: var(--muted-2);
    transition: background .25s ease, box-shadow .25s ease;
  }

  .sound-toggle[aria-pressed="true"] .sound-dot {
    background: var(--signal);
    box-shadow: 0 0 .75rem var(--signal);
  }

  .sound-toggle[aria-pressed="true"] {
    color: var(--signal);
  }

  .button {
    display: inline-flex;
    min-block-size: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    box-sizing: border-box;
    padding: .78rem 1.15rem;
    border: 1px solid transparent;
    border-radius: .75rem;
    font-size: .85rem;
    font-weight: 720;
    letter-spacing: -.01em;
    transition: translate .35s var(--spring), scale .35s var(--spring), background .2s ease, border-color .2s ease, color .2s ease, box-shadow .35s ease;
  }

  .button svg, .text-link svg {
    inline-size: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transition: translate .35s var(--spring);
  }

  .button:hover {
    translate: 0 -.18rem;
  }

  .button:active {
    scale: .96;
    translate: 0 .05rem;
  }

  .button:hover svg, .text-link:hover svg {
    translate: .22rem 0;
  }

  .button-primary {
    background: var(--signal);
    color: #07110c;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 .5rem 1.5rem rgb(114 255 166 / .1);
  }

  .button-primary:hover {
    background: var(--signal-bright);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), 0 1rem 2rem rgb(114 255 166 / .17);
  }

  .button-ghost {
    border-color: var(--line-strong);
    background: rgb(255 255 255 / .035);
    color: var(--paper-2);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .035);
  }

  .button-ghost:hover {
    border-color: rgb(255 255 255 / .28);
    background: rgb(255 255 255 / .07);
    color: var(--paper);
  }

  .button-small {
    min-block-size: 2.5rem;
    padding: .6rem .9rem;
    border-radius: .62rem;
    font-size: .76rem;
  }

  .button-large {
    min-block-size: 3.45rem;
    padding-inline: 1.35rem;
    border-radius: .82rem;
    font-size: .91rem;
  }

  .button-wide {
    inline-size: 100%;
  }

  .menu-toggle, .icon-button {
    display: inline-grid;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: .72rem;
    background: rgb(255 255 255 / .04);
    color: var(--paper);
    transition: background .2s ease, scale .3s var(--spring);
  }

  .menu-toggle {
    display: none;
  }

  .menu-toggle:active, .icon-button:active {
    scale: .9;
  }

  .menu-toggle svg, .icon-button svg {
    inline-size: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.7;
  }

  .mobile-menu {
    position: fixed;
    inset: 4.5rem .75rem auto;
    box-sizing: border-box;
    inline-size: calc(100% - 1.5rem);
    max-inline-size: none;
    padding: 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 1rem;
    background: rgb(12 16 27 / .97);
    color: var(--paper);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    translate: 0 -.75rem;
    transition: opacity .2s ease, translate .35s var(--spring), display .35s allow-discrete, overlay .35s allow-discrete;
  }

  .mobile-menu:popover-open {
    opacity: 1;
    translate: 0;
  }

  @starting-style {
    .mobile-menu:popover-open {
      opacity: 0;
      translate: 0 -.75rem;
    }
  }

  .mobile-menu::backdrop {
    background: rgb(2 4 9 / .62);
    backdrop-filter: blur(.25rem);
  }

  .mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-end: .75rem;
    border-block-end: 1px solid var(--line);
  }

  .mobile-menu nav ul {
    display: grid;
    list-style: none;
  }

  .mobile-menu nav a {
    display: flex;
    min-block-size: 3.6rem;
    align-items: center;
    gap: 1rem;
    border-block-end: 1px solid var(--line);
    font-size: 1rem;
    font-weight: 650;
  }

  .mobile-menu nav a span {
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: .63rem;
  }

  .mobile-menu > .button {
    margin-block-start: 1rem;
  }

  .hero {
    position: relative;
    min-block-size: 100dvh;
    padding-block: 9.3rem 3rem;
    isolation: isolate;
  }

  .hero::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image:
      linear-gradient(rgb(255 255 255 / .021) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / .021) 1px, transparent 1px);
    background-position: center top;
    background-size: 4.5rem 4.5rem;
    mask-image: linear-gradient(to bottom, black 0 65%, transparent 96%);
    content: "";
  }

  .hero::after {
    position: absolute;
    z-index: -1;
    inset-block-start: 5rem;
    inset-inline-start: 50%;
    inline-size: 55rem;
    block-size: 55rem;
    border: 1px solid rgb(147 133 255 / .08);
    border-radius: 50%;
    content: "";
    translate: -6% -42%;
  }

  .hero-aurora {
    position: absolute;
    z-index: -1;
    inset-block-start: -17rem;
    inset-inline-end: -12rem;
    inline-size: 62rem;
    block-size: 52rem;
    border-radius: 50%;
    background:
      radial-gradient(circle at 42% 48%, rgb(91 252 198 / .14), transparent 24%),
      radial-gradient(circle at 59% 32%, rgb(126 97 255 / .24), transparent 44%);
    filter: blur(2rem);
    transform: rotate(-14deg);
    pointer-events: none;
  }

  .stars {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .7;
    background-image:
      radial-gradient(circle, rgb(255 255 255 / .7) 0 .05rem, transparent .075rem),
      radial-gradient(circle, rgb(167 243 193 / .7) 0 .055rem, transparent .08rem);
    background-position: 2rem 1rem, 1rem 3rem;
    background-size: 8.5rem 8.5rem, 11rem 11rem;
    mask-image: linear-gradient(90deg, transparent, black 45%, black 90%, transparent);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(31rem, 1.08fr);
    align-items: center;
    gap: clamp(3rem, 5vw, 6rem);
  }

  .hero-copy {
    position: relative;
    z-index: 2;
    max-inline-size: 40rem;
  }

  .pill {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    box-sizing: border-box;
    min-block-size: 2.25rem;
    padding: .45rem .7rem;
    border: 1px solid var(--line);
    border-radius: 999rem;
    background: rgb(255 255 255 / .035);
    color: #c8cbd3;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .025em;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .045);
    transition: border-color .2s ease, background .2s ease, translate .3s var(--spring);
  }

  .announcement:hover {
    border-color: rgb(167 243 193 / .3);
    background: rgb(167 243 193 / .06);
    translate: 0 -.12rem;
  }

  .announcement svg {
    inline-size: .8rem;
    fill: none;
    stroke: var(--muted);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
  }

  .live-pulse {
    position: relative;
    inline-size: .45rem;
    block-size: .45rem;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 .7rem var(--signal);
  }

  .live-pulse::after {
    position: absolute;
    inset: -.25rem;
    border: 1px solid var(--signal);
    border-radius: inherit;
    content: "";
    opacity: .45;
    animation: pulse-ring 2s ease-out infinite;
  }

  .hero h1 {
    margin-block-start: 1.65rem;
    font-size: clamp(3.25rem, 5.45vw, 5.7rem);
    font-weight: 710;
    letter-spacing: -.067em;
  }

  .hero-highlight {
    color: var(--signal);
    text-shadow: 0 0 2rem rgb(167 243 193 / .12);
  }

  .hero-lede {
    max-inline-size: 35rem;
    margin-block-start: 1.65rem;
    color: #aeb2be;
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.65;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-block-start: 2rem;
  }

  .hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-inline-size: 33rem;
    margin-block-start: 3.2rem;
  }

  .hero-metrics > div {
    padding-inline: 1.1rem;
    border-inline-start: 1px solid var(--line);
  }

  .hero-metrics > div:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .hero-metrics dt {
    color: var(--muted-2);
    font-size: .63rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .hero-metrics dd {
    margin-block-start: .25rem;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.05em;
  }

  .hero-metrics dd span {
    color: var(--signal);
    font-size: .72em;
  }

  .hero-console {
    position: relative;
    container-type: inline-size;
    perspective: 85rem;
  }

  .console-frame {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: 1.25rem;
    background: rgb(9 13 22 / .88);
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgb(255 255 255 / .06), 0 0 0 1px rgb(0 0 0 / .4);
    transform: rotateY(-3.5deg) rotateX(2deg);
    transform-origin: 50% 50%;
    transition: transform .7s var(--smooth), box-shadow .7s ease;
  }

  .hero-console:hover .console-frame {
    box-shadow: 0 2.6rem 7rem rgb(0 0 0 / .46), 0 0 4rem rgb(108 122 255 / .08), inset 0 1px 0 rgb(255 255 255 / .08);
    transform: rotateY(0) rotateX(0) translateY(-.4rem);
  }

  .console-glow {
    position: absolute;
    z-index: -1;
    inset: 12% 0 5% 15%;
    border-radius: 50%;
    background: rgb(90 116 255 / .23);
    filter: blur(4rem);
    transform: translateZ(-1px);
  }

  .console-topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-block-size: 3.15rem;
    padding-inline: 1rem;
    border-block-end: 1px solid var(--line);
    background: rgb(255 255 255 / .025);
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: .6rem;
  }

  .window-controls {
    display: flex;
    gap: .35rem;
  }

  .window-controls i {
    inline-size: .48rem;
    block-size: .48rem;
    border-radius: 50%;
    background: #fd7f78;
  }

  .window-controls i:nth-child(2) { background: #f4ca66; }
  .window-controls i:nth-child(3) { background: #72d98c; }

  .console-secure {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: .3rem;
    color: #789987;
  }

  .console-secure svg {
    inline-size: .72rem;
    fill: none;
    stroke: currentColor;
    stroke-linejoin: round;
    stroke-width: 1.3;
  }

  .console-body {
    padding: 1.2rem;
  }

  .console-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--paper-2);
    font-size: .68rem;
    font-weight: 650;
  }

  .console-status-row > div {
    display: flex;
    align-items: center;
    gap: .45rem;
  }

  .status-orb {
    inline-size: .42rem;
    block-size: .42rem;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 .65rem var(--signal);
  }

  .request-id {
    padding: .23rem .45rem;
    border: 1px solid var(--line);
    border-radius: .35rem;
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: .57rem;
    font-weight: 500;
  }

  .route-map {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-block: 1.35rem 1.1rem;
  }

  .route-line {
    position: absolute;
    z-index: 0;
    inset-block-start: 1.15rem;
    inset-inline: 16.5%;
    block-size: 1px;
    overflow: hidden;
    background: rgb(255 255 255 / .12);
  }

  .route-line span {
    position: absolute;
    inset-block: 0;
    inline-size: 35%;
    background: linear-gradient(90deg, transparent, var(--signal), transparent);
    filter: drop-shadow(0 0 .3rem var(--signal));
    animation: route-flow 2.25s linear infinite;
  }

  .route-node {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    text-align: center;
  }

  .node-icon {
    display: grid;
    inline-size: 2.35rem;
    block-size: 2.35rem;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid var(--line-strong);
    border-radius: .68rem;
    background: #111726;
    box-shadow: 0 .35rem 1rem rgb(0 0 0 / .28);
    color: #c1c5cf;
    font-family: var(--font-mono);
    font-size: .72rem;
  }

  .node-icon svg {
    inline-size: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
  }

  .route-node.active .node-icon {
    border-color: rgb(167 243 193 / .5);
    background: rgb(167 243 193 / .1);
    color: var(--signal);
    box-shadow: 0 0 1.5rem rgb(167 243 193 / .12), inset 0 0 1rem rgb(167 243 193 / .06);
  }

  .provider-g {
    border-color: rgb(255 129 78 / .35);
    color: #ff9a65;
  }

  .route-node small {
    margin-block-start: .5rem;
    color: var(--muted-2);
    font-size: .53rem;
    text-transform: uppercase;
  }

  .route-node strong {
    margin-block-start: .05rem;
    color: var(--paper-2);
    font-size: .69rem;
  }

  .signal-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: rgb(255 255 255 / .025);
  }

  .signal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem .85rem 0;
  }

  .signal-head > div {
    display: flex;
    align-items: baseline;
    gap: .55rem;
  }

  .signal-head span {
    color: var(--muted-2);
    font-size: .59rem;
  }

  .signal-head strong {
    color: var(--paper-2);
    font-family: var(--font-mono);
    font-size: .67rem;
  }

  .signal-live {
    color: var(--signal) !important;
    font-family: var(--font-mono);
    letter-spacing: .08em;
  }

  .signal-wave {
    inline-size: 100%;
    block-size: 5.1rem;
  }

  .wave-area { fill: url(#wave-fill); }
  .wave-stroke {
    fill: none;
    stroke: var(--signal);
    stroke-width: 1.7;
    filter: drop-shadow(0 0 .35rem rgb(167 243 193 / .55));
    stroke-dasharray: 700;
    animation: draw-wave 4.8s ease-in-out infinite alternate;
  }

  .telemetry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
    margin-block-start: .65rem;
  }

  .telemetry-grid > div {
    display: grid;
    min-block-size: 4.35rem;
    align-content: center;
    padding-inline: .75rem;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: rgb(255 255 255 / .02);
  }

  .telemetry-grid > div > span {
    color: var(--muted-2);
    font-size: .53rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .telemetry-grid strong {
    margin-block-start: .1rem;
    font-family: var(--font-mono);
    font-size: .75rem;
  }

  .telemetry-grid strong small {
    color: var(--muted-2);
    font-size: .7em;
    font-weight: 500;
  }

  .telemetry-grid em {
    color: var(--muted-2);
    font-size: .52rem;
    font-style: normal;
  }

  .trend-down, .cache-badge { color: var(--signal) !important; }

  .console-log {
    display: grid;
    gap: .4rem;
    margin-block-start: .75rem;
    padding: .7rem .8rem;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: #090c14;
    font-family: var(--font-mono);
    font-size: .49rem;
  }

  .console-log p {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #737a8a;
  }

  .console-log time { color: #454b5a; }
  .console-log span { inline-size: 2.4rem; font-weight: 700; }
  .log-ok { color: var(--cyan); }
  .log-cache { color: var(--violet); }
  .log-route { color: var(--signal); }

  .console-log-current i {
    inline-size: .35rem;
    block-size: .65rem;
    background: var(--signal);
    animation: blink-cursor 1s steps(1) infinite;
  }

  .float-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .65rem .8rem;
    border: 1px solid rgb(255 255 255 / .15);
    border-radius: .7rem;
    background: rgb(16 21 34 / .91);
    box-shadow: 0 1rem 2.2rem rgb(0 0 0 / .32), inset 0 1px 0 rgb(255 255 255 / .06);
    backdrop-filter: blur(1rem);
    pointer-events: none;
  }

  .float-card-fallback {
    inset-block-start: 24%;
    inset-inline-start: -7%;
    animation: float-card 5s ease-in-out infinite;
  }

  .float-card-cache {
    inset-block-end: 13%;
    inset-inline-end: -6%;
    animation: float-card 5.8s .6s ease-in-out infinite reverse;
  }

  .float-icon {
    display: grid;
    inline-size: 1.7rem;
    block-size: 1.7rem;
    place-items: center;
    border-radius: .45rem;
    background: rgb(167 243 193 / .1);
    color: var(--signal);
    font-size: .75rem;
  }

  .float-card > span:last-child { display: grid; }
  .float-card small { color: var(--muted-2); font-size: .48rem; }
  .float-card strong { color: var(--paper-2); font-family: var(--font-mono); font-size: .6rem; }

  .provider-rail {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2rem;
    margin-block-start: 5rem;
    padding-block: 1.4rem;
    border-block: 1px solid var(--line);
  }

  .provider-label {
    color: var(--muted-2);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .provider-rail ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    list-style: none;
  }

  .provider-rail li {
    display: flex;
    align-items: center;
    gap: .35rem;
    color: #8c919e;
    font-size: .76rem;
    font-weight: 650;
    white-space: nowrap;
  }

  .provider-symbol {
    color: #c0c3cb;
    font-family: var(--font-mono);
    font-size: .65rem;
  }

  .provider-more { color: var(--signal) !important; }

  .section {
    position: relative;
    padding-block: clamp(6rem, 10vw, 9rem);
  }

  .section-heading h2 {
    margin-block-start: .85rem;
    font-size: clamp(2.6rem, 4.5vw, 4.5rem);
    font-weight: 680;
  }

  .section-heading > p, .heading-split > p, .heading-split > div:last-child p {
    max-inline-size: 31rem;
    font-size: 1rem;
    line-height: 1.72;
  }

  .heading-split {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    align-items: end;
    gap: 4rem;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 650;
    letter-spacing: .095em;
    text-transform: uppercase;
  }

  .eyebrow i {
    display: inline-grid;
    inline-size: 1.55rem;
    block-size: 1.55rem;
    place-items: center;
    border: 1px solid rgb(167 243 193 / .28);
    border-radius: 50%;
    background: rgb(167 243 193 / .06);
    font-size: .52rem;
    font-style: normal;
  }

  .architecture {
    background: linear-gradient(to bottom, transparent, rgb(255 255 255 / .015) 40%, transparent);
  }

  .flight-board {
    display: grid;
    grid-template-columns: minmax(19rem, .78fr) minmax(0, 1.22fr);
    gap: 1rem;
    margin-block-start: 4rem;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    background: rgb(255 255 255 / .02);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .035), 0 2rem 5rem rgb(0 0 0 / .2);
  }

  .flight-track-wrap {
    position: relative;
    padding: .55rem;
  }

  .flight-track-wrap::before {
    position: absolute;
    inset-block: 2.4rem;
    inset-inline-start: 3.55rem;
    inline-size: 1px;
    background: linear-gradient(to bottom, var(--signal), rgb(255 255 255 / .1) 35%, rgb(255 255 255 / .1));
    content: "";
  }

  .flight-track {
    display: grid;
    gap: .2rem;
    list-style: none;
  }

  .flight-step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.5rem 2.8rem 1fr;
    inline-size: 100%;
    min-block-size: 4.65rem;
    align-items: center;
    gap: .75rem;
    box-sizing: border-box;
    padding: .65rem .75rem;
    border: 1px solid transparent;
    border-radius: .85rem;
    background: transparent;
    text-align: start;
    transition: background .25s ease, border-color .25s ease, translate .35s var(--spring);
  }

  .flight-step:hover:not(.active) {
    background: rgb(255 255 255 / .025);
    translate: .15rem 0;
  }

  .flight-step.active {
    border-color: var(--line);
    background: rgb(255 255 255 / .045);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .035);
  }

  .flight-index {
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: .55rem;
  }

  .flight-icon {
    display: grid;
    inline-size: 2.65rem;
    block-size: 2.65rem;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: .68rem;
    background: var(--ink-850);
    color: var(--muted);
    transition: color .25s ease, border-color .25s ease, background .25s ease, scale .35s var(--spring), rotate .35s var(--spring);
  }

  .flight-step:hover .flight-icon { scale: 1.08; rotate: -3deg; }

  .flight-step.active .flight-icon {
    border-color: rgb(167 243 193 / .34);
    background: rgb(167 243 193 / .08);
    color: var(--signal);
  }

  .flight-icon svg {
    inline-size: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
  }

  .flight-step > span:last-child { display: grid; }
  .flight-step strong { color: var(--paper-2); font-size: .78rem; letter-spacing: -.01em; }
  .flight-step small { margin-block-start: .12rem; color: var(--muted-2); font-size: .61rem; }

  .flight-detail {
    display: grid;
    grid-template-columns: 1fr minmax(15rem, .8fr);
    align-items: center;
    min-block-size: 30rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1.1rem;
    background:
      radial-gradient(circle at 78% 50%, rgb(167 243 193 / .1), transparent 22rem),
      linear-gradient(145deg, rgb(18 23 39 / .95), rgb(9 12 21 / .95));
  }

  .flight-detail-copy {
    padding: clamp(2rem, 4vw, 3.5rem);
  }

  .detail-kicker {
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .11em;
  }

  .flight-detail h3 {
    max-inline-size: 26rem;
    margin-block-start: .9rem;
    font-size: clamp(2rem, 3.1vw, 3.25rem);
    font-weight: 650;
  }

  .flight-detail p {
    max-inline-size: 31rem;
    margin-block-start: 1.15rem;
    line-height: 1.68;
  }

  .flight-detail ul {
    display: grid;
    gap: .65rem;
    margin-block-start: 1.5rem;
    list-style: none;
  }

  .flight-detail li {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #b8bbc4;
    font-size: .76rem;
  }

  .flight-detail li span {
    display: grid;
    inline-size: 1.15rem;
    block-size: 1.15rem;
    place-items: center;
    border-radius: 50%;
    background: rgb(167 243 193 / .1);
    color: var(--signal);
    font-size: .62rem;
  }

  .radar {
    position: relative;
    inline-size: min(18rem, 90%);
    aspect-ratio: 1;
    justify-self: center;
    border: 1px solid rgb(167 243 193 / .18);
    border-radius: 50%;
    overflow: hidden;
    background:
      linear-gradient(90deg, transparent calc(50% - .5px), rgb(167 243 193 / .1) 50%, transparent calc(50% + .5px)),
      linear-gradient(transparent calc(50% - .5px), rgb(167 243 193 / .1) 50%, transparent calc(50% + .5px)),
      rgb(167 243 193 / .025);
    box-shadow: inset 0 0 3rem rgb(167 243 193 / .045), 0 0 3rem rgb(167 243 193 / .04);
  }

  .radar-rings i {
    position: absolute;
    inset: 16.67%;
    border: 1px solid rgb(167 243 193 / .12);
    border-radius: 50%;
  }

  .radar-rings i:nth-child(2) { inset: 33.33%; }
  .radar-rings i:nth-child(3) { inset: 45%; }

  .radar-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from -20deg, transparent 0 79%, rgb(167 243 193 / .15) 96%, rgb(167 243 193 / .3));
    animation: radar-sweep 5s linear infinite;
  }

  .radar-blip {
    position: absolute;
    inline-size: .42rem;
    block-size: .42rem;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 .85rem var(--signal);
  }

  .blip-one { inset-block-start: 28%; inset-inline-start: 65%; }
  .blip-two { inset-block-start: 69%; inset-inline-start: 26%; }

  .radar-core {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    inline-size: 4.4rem;
    block-size: 4.4rem;
    place-items: center;
    border: 1px solid rgb(167 243 193 / .34);
    border-radius: 50%;
    background: rgb(12 25 22 / .85);
    box-shadow: 0 0 2rem rgb(167 243 193 / .18);
    translate: -50% -50%;
  }

  .radar-core svg {
    inline-size: 2rem;
    fill: none;
    stroke: var(--signal);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.4;
  }

  .centered-heading {
    max-inline-size: 47rem;
    margin-inline: auto;
    text-align: center;
  }

  .centered-heading h2 span {
    color: var(--signal);
  }

  .centered-heading p {
    margin: 1.15rem auto 0;
  }

  .bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
    margin-block-start: 4rem;
  }

  .feature-card {
    position: relative;
    min-block-size: 26rem;
    overflow: hidden;
    box-sizing: border-box;
    padding: clamp(1.4rem, 2.5vw, 2rem);
    border: 1px solid var(--line);
    border-radius: 1.15rem;
    background: linear-gradient(145deg, rgb(18 23 39 / .78), rgb(10 13 23 / .92));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .035);
    transition: border-color .25s ease, translate .45s var(--spring), box-shadow .45s ease;
  }

  .feature-card::before {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0, rgb(167 243 193 / .055), transparent 16rem);
    content: "";
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
  }

  .feature-card:hover {
    border-color: rgb(255 255 255 / .17);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 1.8rem 4rem rgb(0 0 0 / .22);
    translate: 0 -.35rem;
  }

  .feature-card:hover::before { opacity: 1; }
  .feature-cascade, .feature-cache { grid-column: span 6; min-block-size: 33rem; }
  .feature-racing, .feature-ledger, .feature-keys, .feature-green { grid-column: span 6; }

  .feature-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .feature-icon {
    display: grid;
    inline-size: 2.65rem;
    block-size: 2.65rem;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: .7rem;
    background: rgb(255 255 255 / .035);
    color: var(--signal);
    transition: rotate .45s var(--spring), scale .45s var(--spring);
  }

  .feature-card:hover .feature-icon { rotate: -6deg; scale: 1.08; }

  .feature-icon svg {
    inline-size: 1.3rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.45;
  }

  .feature-tag {
    padding: .35rem .58rem;
    border: 1px solid var(--line);
    border-radius: 999rem;
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: .54rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .feature-card h3 {
    max-inline-size: 28rem;
    margin-block-start: 1.5rem;
    font-size: clamp(1.65rem, 2.7vw, 2.55rem);
    font-weight: 640;
  }

  .feature-card h3 a {
    color: inherit;
    text-decoration: none;
  }

  .feature-card h3 a:hover,
  .feature-card h3 a:focus-visible {
    color: var(--signal);
  }

  .feature-card > p {
    max-inline-size: 34rem;
    margin-block-start: .8rem;
    font-size: .88rem;
    line-height: 1.65;
  }

  .cascade-demo {
    position: absolute;
    inset: auto 2rem 2rem;
    display: grid;
  }

  .cascade-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .75rem;
    min-block-size: 4.4rem;
    padding-inline: .95rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: rgb(7 10 18 / .75);
  }

  .cascade-row > span:nth-child(2) { display: grid; }
  .cascade-row strong { color: var(--paper-2); font-size: .72rem; }
  .cascade-row small { color: var(--muted-2); font-size: .55rem; }

  .provider-avatar {
    display: inline-grid;
    inline-size: 1.65rem;
    block-size: 1.65rem;
    flex: none;
    place-items: center;
    border: 1px solid var(--line-strong);
    border-radius: .45rem;
    font-family: var(--font-mono);
    font-size: .57rem;
    font-weight: 700;
  }

  .avatar-a { background: rgb(236 207 170 / .1); color: #e5c59d; }
  .avatar-o { background: rgb(120 220 190 / .1); color: #7bd8bd; }
  .avatar-g { background: rgb(255 141 90 / .1); color: #ff9e70; }
  .avatar-m { background: rgb(255 192 73 / .1); color: #ffc662; }

  .provider-state {
    padding: .25rem .5rem;
    border-radius: .35rem;
    font-family: var(--font-mono);
    font-size: .52rem;
  }

  .degraded .provider-state { background: rgb(255 130 125 / .1); color: var(--danger); }
  .healthy { border-color: rgb(167 243 193 / .23); box-shadow: inset .18rem 0 var(--signal); }
  .healthy .provider-state { background: rgb(167 243 193 / .1); color: var(--signal); }

  .cascade-connector {
    display: flex;
    block-size: 2.2rem;
    align-items: center;
    gap: .45rem;
    padding-inline-start: 1.75rem;
  }

  .cascade-connector span {
    inline-size: 1px;
    block-size: 100%;
    background: linear-gradient(var(--danger), var(--signal));
  }

  .cascade-connector em {
    padding: .2rem .38rem;
    border-radius: .3rem;
    background: rgb(167 243 193 / .08);
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: .49rem;
    font-style: normal;
  }

  .feature-cache {
    background:
      radial-gradient(circle at 70% 80%, rgb(125 102 255 / .13), transparent 17rem),
      linear-gradient(145deg, rgb(18 23 39 / .78), rgb(10 13 23 / .92));
  }

  .cache-orbit {
    position: absolute;
    inset: auto 2rem 1rem auto;
    inline-size: min(18rem, 75%);
    aspect-ratio: 1;
  }

  .cache-ring {
    position: absolute;
    inset: 10%;
    border: 1px solid rgb(150 134 255 / .22);
    border-radius: 50%;
  }

  .ring-b { inset: 26%; border-color: rgb(167 243 193 / .18); }

  .cache-ring::after {
    position: absolute;
    inset-block-start: -.28rem;
    inset-inline-start: 50%;
    inline-size: .5rem;
    block-size: .5rem;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 1rem var(--violet);
    content: "";
  }

  .ring-a { animation: radar-sweep 10s linear infinite; }
  .ring-b { animation: radar-sweep 6s linear infinite reverse; }

  .cache-center {
    position: absolute;
    inset: 50% auto auto 50%;
    display: grid;
    inline-size: 7.1rem;
    aspect-ratio: 1;
    place-content: center;
    justify-items: center;
    border: 1px solid rgb(167 243 193 / .28);
    border-radius: 50%;
    background: rgb(10 19 19 / .9);
    box-shadow: 0 0 3rem rgb(167 243 193 / .1), inset 0 0 1.5rem rgb(167 243 193 / .05);
    translate: -50% -50%;
  }

  .cache-center small { color: var(--muted-2); font-size: .53rem; }
  .cache-center strong { color: var(--paper); font-family: var(--font-mono); font-size: 1.45rem; }
  .cache-center span { color: var(--signal); font-family: var(--font-mono); font-size: .52rem; letter-spacing: .1em; }

  .cache-particle {
    position: absolute;
    inline-size: .32rem;
    block-size: .32rem;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 .8rem var(--signal);
  }

  .p1 { inset: 20% 23% auto auto; }
  .p2 { inset: auto auto 17% 30%; }
  .p3 { inset: 50% auto auto 5%; background: var(--violet); box-shadow: 0 0 .8rem var(--violet); }

  .race-demo {
    position: absolute;
    inset: auto 2rem 2rem;
    display: grid;
    gap: .85rem;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: rgb(7 10 18 / .7);
  }

  .race-lane {
    display: grid;
    grid-template-columns: 4rem 1fr 3.2rem;
    align-items: center;
    gap: .7rem;
    color: var(--muted);
    font-size: .62rem;
  }

  .race-lane i {
    position: relative;
    block-size: .38rem;
    overflow: hidden;
    border-radius: 999rem;
    background: rgb(255 255 255 / .06);
  }

  .race-lane i::after {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 68%;
    border-radius: inherit;
    background: var(--violet);
    content: "";
  }

  .race-lane.winner i::after {
    inline-size: 91%;
    background: var(--signal);
    box-shadow: 0 0 .6rem var(--signal);
  }

  .race-lane strong {
    justify-self: end;
    font-family: var(--font-mono);
    font-size: .58rem;
    font-weight: 600;
  }

  .race-lane.winner { color: var(--paper-2); }
  .race-lane.winner strong { color: var(--signal); }
  .finish-line { position: absolute; inset-block: .9rem; inset-inline-end: 3.9rem; border-inline-start: 1px dashed rgb(255 255 255 / .22); }

  .ledger-counter {
    position: absolute;
    inset: auto 2rem 2rem;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: rgb(7 10 18 / .7);
  }

  .ledger-counter > span { color: var(--muted-2); font-size: .58rem; }
  .ledger-counter > strong { display: block; margin-block-start: .25rem; color: var(--paper); font-family: var(--font-mono); font-size: clamp(1.4rem, 3vw, 2.1rem); letter-spacing: -.06em; }
  .ledger-counter > strong span { color: var(--signal); font-size: .65em; }
  .ledger-counter > div { block-size: .38rem; margin-block-start: .9rem; overflow: hidden; border-radius: 999rem; background: rgb(255 255 255 / .07); }
  .ledger-counter > div i { display: block; inline-size: var(--usage); block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--signal)); }
  .ledger-counter > small { display: flex; justify-content: space-between; margin-block-start: .45rem; color: var(--muted-2); font-size: .51rem; }
  .ledger-counter > small em { color: var(--signal); font-style: normal; }

  .key-demo {
    position: absolute;
    inset: auto 2rem 2rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: rgb(7 10 18 / .72);
  }

  .key-demo code { color: var(--paper-2); font-size: .67rem; }
  .key-badges { display: flex; flex-wrap: wrap; gap: .35rem; margin-block-start: .8rem; }
  .key-badges span { padding: .3rem .48rem; border: 1px solid var(--line); border-radius: .35rem; color: var(--muted); font-size: .52rem; }
  .key-badges span:last-child { border-color: rgb(167 243 193 / .2); background: rgb(167 243 193 / .07); color: var(--signal); }

  .karma-score {
    position: absolute;
    inset: auto 2rem 1.5rem;
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    align-items: center;
    gap: 1rem;
  }

  .karma-dial {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(var(--signal) 0 94%, rgb(255 255 255 / .07) 94%);
    padding: .35rem;
  }

  .karma-dial > span {
    display: grid;
    inline-size: 100%;
    aspect-ratio: 1;
    place-content: center;
    justify-items: center;
    border-radius: 50%;
    background: var(--ink-850);
  }

  .karma-dial strong { font-family: var(--font-mono); font-size: 1.35rem; }
  .karma-dial small { color: var(--signal); font-family: var(--font-mono); font-size: .42rem; }
  .karma-score ul { display: grid; gap: .55rem; list-style: none; }
  .karma-score li { display: flex; justify-content: space-between; gap: 1rem; padding-block-end: .45rem; border-block-end: 1px solid var(--line); color: var(--muted-2); font-size: .57rem; }
  .karma-score li strong { color: var(--paper-2); font-family: var(--font-mono); font-size: .55rem; }

  .switchboard-section {
    background:
      radial-gradient(circle at 50% 30%, rgb(91 75 255 / .1), transparent 35rem),
      linear-gradient(to bottom, transparent, rgb(255 255 255 / .014), transparent);
  }

  .switchboard-heading > div:last-child {
    display: grid;
    justify-items: start;
    gap: 1rem;
  }

  .mode-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .58rem;
    border: 1px solid rgb(167 243 193 / .2);
    border-radius: 999rem;
    background: rgb(167 243 193 / .05);
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: .53rem;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .mode-badge i, .toolbar-status span, .requests-count i, .ledger-live i, .cta-note i, .footer-status i {
    inline-size: .38rem;
    block-size: .38rem;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 .6rem var(--signal);
  }

  .switchboard-shell {
    margin-block-start: 4rem;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 1.25rem;
    background: #0a0d16;
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgb(255 255 255 / .05);
  }

  .switchboard-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-block-size: 4.4rem;
    padding-inline: 1.2rem;
    border-block-end: 1px solid var(--line);
    background: rgb(255 255 255 / .018);
  }

  .switchboard-title {
    display: flex;
    align-items: center;
    gap: .65rem;
  }

  .mini-logo {
    display: grid;
    inline-size: 2.1rem;
    block-size: 2.1rem;
    place-items: center;
    border: 1px solid rgb(167 243 193 / .25);
    border-radius: .55rem;
    background: rgb(167 243 193 / .06);
    color: var(--signal);
  }

  .mini-logo svg { inline-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.2; }
  .switchboard-title > span:last-child { display: grid; }
  .switchboard-title strong { font-size: .72rem; }
  .switchboard-title small { color: var(--muted-2); font-family: var(--font-mono); font-size: .48rem; }

  .toolbar-range {
    display: flex;
    padding: .25rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: rgb(0 0 0 / .18);
  }

  .toolbar-range button {
    min-inline-size: 2.25rem;
    min-block-size: 1.8rem;
    padding: .25rem .45rem;
    border-radius: .34rem;
    background: transparent;
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: .53rem;
  }

  .toolbar-range button[aria-pressed="true"] { background: rgb(255 255 255 / .08); color: var(--paper); }

  .toolbar-status {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: .45rem;
    color: #809286;
    font-family: var(--font-mono);
    font-size: .5rem;
  }

  .switchboard-grid {
    display: grid;
    grid-template-columns: 1.45fr .75fr;
    gap: 1px;
    background: var(--line);
  }

  .telemetry-panel {
    min-inline-size: 0;
    box-sizing: border-box;
    padding: 1.2rem;
    background: #0b0f19;
  }

  .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 2.4rem;
  }

  .panel-head > span:first-child { display: grid; }
  .panel-head small { color: var(--muted-2); font-family: var(--font-mono); font-size: .45rem; letter-spacing: .09em; }
  .panel-head strong { margin-block-start: .12rem; color: var(--paper-2); font-size: .72rem; }

  .panel-stat { display: grid; justify-items: end; }
  .panel-stat strong { color: var(--signal); font-family: var(--font-mono); font-size: .95rem; }
  .panel-stat small { font-size: .44rem; }

  .oscilloscope {
    position: relative;
    block-size: 13rem;
    margin-block-start: .8rem;
    overflow: hidden;
    border: 1px solid rgb(167 243 193 / .09);
    border-radius: .6rem;
    background: #07100e;
  }

  .scope-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgb(167 243 193 / .06) 1px, transparent 1px),
      linear-gradient(90deg, rgb(167 243 193 / .06) 1px, transparent 1px),
      linear-gradient(rgb(167 243 193 / .025) 1px, transparent 1px),
      linear-gradient(90deg, rgb(167 243 193 / .025) 1px, transparent 1px);
    background-size: 4rem 4rem, 4rem 4rem, .8rem .8rem, .8rem .8rem;
  }

  .oscilloscope svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
  .scope-area { fill: rgb(167 243 193 / .05); }
  .scope-line { fill: none; stroke: var(--signal); stroke-width: 1.6; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 .3rem var(--signal)); }
  .scope-line.ghost { stroke: var(--cyan); stroke-width: 1; opacity: .28; transform: translateY(1rem); }

  .scope-scan {
    position: absolute;
    inset-block: 0;
    inline-size: 5rem;
    background: linear-gradient(90deg, transparent, rgb(167 243 193 / .05), rgb(167 243 193 / .16), transparent);
    animation: scope-scan 4.2s linear infinite;
  }

  .scope-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-block-start: .7rem;
    color: var(--muted-2);
    font-size: .48rem;
  }

  .scope-legend span { display: flex; align-items: center; gap: .35rem; }
  .scope-legend i { inline-size: .42rem; block-size: .12rem; }
  .legend-green { background: var(--signal); }
  .legend-blue { background: var(--cyan); }
  .scope-legend em { margin-inline-start: auto; font-family: var(--font-mono); font-style: normal; }

  .panel-more { inline-size: 2rem; block-size: 2rem; border-radius: .45rem; }
  .panel-more svg { inline-size: 1rem; fill: currentColor; stroke: none; }

  .latency-list {
    display: grid;
    gap: .55rem;
    margin-block-start: 1rem;
    list-style: none;
  }

  .latency-list li {
    display: grid;
    grid-template-columns: auto minmax(5.5rem, 1fr) minmax(4.5rem, 1fr) 2.7rem;
    align-items: center;
    gap: .6rem;
    min-block-size: 3rem;
    padding-inline: .55rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: rgb(255 255 255 / .015);
  }

  .latency-list li > span:nth-child(2) { display: grid; }
  .latency-list li strong { font-size: .59rem; }
  .latency-list li small { color: var(--muted-2); font-size: .46rem; }
  .latency-list li > i { block-size: .24rem; overflow: hidden; border-radius: 999rem; background: rgb(255 255 255 / .06); }
  .latency-list li > i b { display: block; inline-size: var(--latency); block-size: 100%; border-radius: inherit; background: var(--signal); }
  .latency-list li:nth-child(2) > i b { background: var(--cyan); }
  .latency-list li:nth-child(3) > i b { background: var(--violet); }
  .latency-list li:nth-child(4) > i b { background: var(--amber); }
  .latency-list li > em { justify-self: end; color: var(--paper-2); font-family: var(--font-mono); font-size: .5rem; font-style: normal; }

  .request-panel { grid-column: 1; }
  .quota-panel { grid-column: 2; grid-row: 2; }

  .requests-count, .ledger-live {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: .48rem;
  }

  .request-table-wrap {
    margin-block-start: 1rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: .55rem;
    scrollbar-color: var(--muted-2) var(--ink-850);
    scrollbar-width: thin;
  }

  .request-table {
    inline-size: 100%;
    min-inline-size: 42rem;
    border-collapse: collapse;
    text-align: start;
  }

  .request-table th {
    padding: .55rem .65rem;
    border-block-end: 1px solid var(--line);
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: .43rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-align: start;
    text-transform: uppercase;
  }

  .request-table td {
    block-size: 2.7rem;
    padding-inline: .65rem;
    border-block-end: 1px solid rgb(255 255 255 / .055);
    color: #aeb2bc;
    font-family: var(--font-mono);
    font-size: .49rem;
  }

  .request-table tbody tr:last-child td { border-block-end: 0; }
  .request-table tbody tr { transition: background .2s ease; }
  .request-table tbody tr:hover { background: rgb(255 255 255 / .025); }
  .request-table td:first-child { display: grid; align-content: center; }
  .request-table td:first-child small { color: var(--muted-2); font-size: .42rem; }
  .request-table td:nth-child(2) { white-space: nowrap; }
  .request-table td:nth-child(2) .provider-avatar { margin-inline-end: .45rem; vertical-align: middle; inline-size: 1.35rem; block-size: 1.35rem; }
  .request-table td:nth-child(2) strong { font-size: .48rem; font-weight: 500; }

  .table-status {
    display: inline-flex;
    padding: .22rem .38rem;
    border-radius: .3rem;
    font-size: .43rem;
    white-space: nowrap;
  }

  .table-status.success { background: rgb(167 243 193 / .08); color: var(--signal); }
  .table-status.cache { background: rgb(150 134 255 / .1); color: #b4a8ff; }
  .table-status.fallback { background: rgb(255 209 122 / .09); color: var(--amber); }

  .wallet-balance {
    display: grid;
    margin-block-start: 1rem;
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: .65rem;
    background: linear-gradient(145deg, rgb(167 243 193 / .05), transparent);
  }

  .wallet-balance small { color: var(--muted-2); font-size: .5rem; }
  .wallet-balance strong { margin-block-start: .25rem; font-family: var(--font-mono); font-size: 1.25rem; letter-spacing: -.05em; }
  .wallet-balance strong span { color: var(--signal); font-size: .65em; }
  .wallet-balance em { margin-block-start: .4rem; color: var(--signal); font-size: .45rem; font-style: normal; }

  .quota-bars {
    display: grid;
    gap: .8rem;
    margin-block-start: 1rem;
  }

  .quota-bars > div > span { display: flex; justify-content: space-between; color: var(--paper-2); font-size: .5rem; }
  .quota-bars em { color: var(--muted-2); font-family: var(--font-mono); font-size: .45rem; font-style: normal; }
  .quota-bars > div > i { display: block; block-size: .28rem; margin-block-start: .35rem; overflow: hidden; border-radius: 999rem; background: rgb(255 255 255 / .06); }
  .quota-bars > div > i b { display: block; inline-size: var(--quota); block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--signal)); }

  .developer-section {
    background: linear-gradient(to bottom, transparent, rgb(255 255 255 / .015), transparent);
  }

  .developer-grid {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    align-items: center;
    gap: clamp(3rem, 8vw, 7rem);
  }

  .developer-copy h2 {
    margin-block-start: .9rem;
    font-size: clamp(2.7rem, 4.5vw, 4.7rem);
    font-weight: 670;
  }

  .developer-copy > p { margin-block-start: 1.25rem; line-height: 1.7; }
  .compat-list { display: grid; gap: .75rem; margin-block-start: 1.7rem; list-style: none; }
  .compat-list li { display: flex; align-items: center; gap: .65rem; color: #b9bdc6; font-size: .78rem; }
  .compat-list li span { display: grid; inline-size: 1.15rem; block-size: 1.15rem; place-items: center; border-radius: 50%; background: rgb(167 243 193 / .08); color: var(--signal); font-size: .58rem; }

  .text-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-block-start: 2rem;
    color: var(--signal);
    font-size: .75rem;
    font-weight: 700;
  }

  .code-window {
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 1rem;
    background: #0a0d16;
    box-shadow: var(--shadow-xl), inset 0 1px 0 rgb(255 255 255 / .045);
  }

  .code-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 3.5rem;
    padding-inline: .9rem;
    border-block-end: 1px solid var(--line);
  }

  .code-languages {
    display: flex;
    gap: .15rem;
  }

  .code-languages button {
    min-block-size: 2rem;
    padding-inline: .75rem;
    border-radius: .45rem;
    background: transparent;
    color: var(--muted-2);
    font-size: .61rem;
    font-weight: 600;
  }

  .code-languages button[aria-pressed="true"] { background: rgb(255 255 255 / .07); color: var(--paper); }

  .copy-button {
    display: flex;
    min-block-size: 2rem;
    align-items: center;
    gap: .4rem;
    padding-inline: .6rem;
    border: 1px solid var(--line);
    border-radius: .45rem;
    background: rgb(255 255 255 / .025);
    color: var(--muted);
    font-size: .56rem;
    transition: background .2s ease, color .2s ease, scale .3s var(--spring);
  }

  .copy-button:hover { background: rgb(255 255 255 / .06); color: var(--paper); }
  .copy-button:active { scale: .9; }
  .copy-button svg { inline-size: .8rem; fill: none; stroke: currentColor; stroke-width: 1.3; }

  .code-window pre {
    box-sizing: border-box;
    min-block-size: 25rem;
    overflow: auto;
    padding: 1.5rem;
    color: #c2c6d0;
    font-size: clamp(.64rem, 1.2vw, .74rem);
    line-height: 1.85;
    scrollbar-color: var(--muted-2) var(--ink-850);
    scrollbar-width: thin;
  }

  .code-keyword { color: #c792ea; }
  .code-string { color: #c3e88d; }
  .code-boolean { color: #82aaff; }
  .code-comment { color: #596174; }

  .code-result {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding: .75rem 1rem;
    border-block-start: 1px solid var(--line);
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: .48rem;
  }

  .code-result span:first-child { display: flex; align-items: center; gap: .35rem; color: var(--signal); }
  .code-result i { inline-size: .35rem; block-size: .35rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 .5rem var(--signal); }

  .arena-section { padding-block-start: 2rem; }

  .arena-shell {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    padding: clamp(2rem, 5vw, 4.5rem);
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    background:
      radial-gradient(circle at 90% 10%, rgb(150 134 255 / .12), transparent 28rem),
      linear-gradient(145deg, rgb(17 22 37 / .9), rgb(8 11 19 / .95));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .04), 0 2rem 5rem rgb(0 0 0 / .18);
  }

  .arena-copy h2 { margin-block-start: .9rem; font-size: clamp(2.4rem, 4vw, 4rem); font-weight: 650; }
  .arena-copy p { margin-block-start: 1.15rem; line-height: 1.7; }
  .arena-copy .button { margin-block-start: 1.7rem; }

  .arena-preview {
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--line-strong);
    border-radius: 1rem;
    background: #0b0e18;
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .3);
    transform: rotateY(-2deg) rotateX(1deg);
    transition: transform .6s var(--smooth);
  }

  .arena-preview:hover { transform: none; }

  .arena-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 3.8rem;
    gap: 1rem;
    padding-inline: 1rem;
    border-block-end: 1px solid var(--line);
  }

  .arena-prompt > span { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .arena-prompt > span svg { inline-size: 1rem; flex: none; fill: none; stroke: var(--violet); stroke-linejoin: round; stroke-width: 1.4; }
  .arena-prompt button { display: grid; inline-size: 2rem; block-size: 2rem; flex: none; place-items: center; border-radius: .45rem; background: var(--signal); color: var(--ink-950); transition: scale .3s var(--spring); }
  .arena-prompt button:hover { scale: 1.1; }
  .arena-prompt button svg { inline-size: .9rem; fill: currentColor; }

  .model-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
  }

  .model-columns article {
    position: relative;
    min-inline-size: 0;
    padding: .85rem;
    background: #0b0e18;
  }

  .model-columns header { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .5rem; }
  .model-columns header > span:nth-child(2) { display: grid; min-inline-size: 0; }
  .model-columns header strong { overflow: hidden; font-size: .52rem; text-overflow: ellipsis; white-space: nowrap; }
  .model-columns header small { color: var(--muted-2); font-size: .42rem; }
  .model-columns header em { grid-column: 1 / -1; color: var(--muted-2); font-family: var(--font-mono); font-size: .43rem; font-style: normal; }
  .model-columns p { min-block-size: 8.3rem; margin-block-start: .75rem; font-family: var(--font-mono); font-size: .47rem; line-height: 1.65; }
  .model-columns footer { display: flex; justify-content: space-between; padding-block-start: .65rem; border-block-start: 1px solid var(--line); color: var(--muted-2); font-family: var(--font-mono); font-size: .43rem; }

  .arena-winner { box-shadow: inset 0 .14rem var(--signal); }
  .arena-winner > b { position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem; display: flex; align-items: center; gap: .2rem; padding: .22rem .35rem; border-radius: .25rem; background: rgb(167 243 193 / .1); color: var(--signal); font-size: .4rem; font-weight: 600; }
  .arena-winner > b svg { inline-size: .55rem; fill: none; stroke: currentColor; stroke-width: 1.7; }

  .trust-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr .7fr;
    align-items: center;
    min-block-size: 35rem;
    overflow: hidden;
    box-sizing: border-box;
    padding: clamp(2rem, 6vw, 5rem);
    padding-block-end: 8rem;
    border: 1px solid var(--line);
    border-radius: 1.5rem;
    background:
      radial-gradient(circle at 78% 45%, rgb(114 230 255 / .1), transparent 23rem),
      linear-gradient(145deg, rgb(16 21 35 / .96), rgb(7 10 17 / .96));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .04);
  }

  .trust-copy { max-inline-size: 40rem; }
  .trust-copy h2 { margin-block-start: .9rem; font-size: clamp(2.7rem, 4.8vw, 4.7rem); font-weight: 660; }
  .trust-copy p { max-inline-size: 36rem; margin-block-start: 1.25rem; line-height: 1.72; }
  .trust-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: 1.7rem; }
  .trust-tags span { padding: .45rem .65rem; border: 1px solid var(--line); border-radius: .45rem; color: var(--paper-2); font-family: var(--font-mono); font-size: .53rem; }

  .shield-visual {
    position: relative;
    display: grid;
    inline-size: min(17rem, 90%);
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
  }

  .shield-rings i { position: absolute; inset: 0; border: 1px solid rgb(114 230 255 / .12); border-radius: 50%; }
  .shield-rings i:nth-child(2) { inset: 15%; }
  .shield-rings i:nth-child(3) { inset: 29%; }
  .shield-rings i:first-child { animation: radar-sweep 14s linear infinite; border-style: dashed; }
  .shield-visual svg { inline-size: 7.5rem; overflow: visible; }
  .shield-fill { fill: rgb(114 230 255 / .05); }
  .shield-stroke { fill: none; stroke: var(--cyan); stroke-width: 1.5; filter: drop-shadow(0 0 .6rem rgb(114 230 255 / .35)); }
  .shield-check { fill: none; stroke: var(--signal); stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; filter: drop-shadow(0 0 .6rem rgb(167 243 193 / .4)); }

  .compliance-row {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-block-start: 1px solid var(--line);
  }

  .compliance-row > span {
    display: grid;
    min-block-size: 5.8rem;
    place-content: center;
    padding-inline: 1rem;
    border-inline-end: 1px solid var(--line);
  }

  .compliance-row > span:last-child { border-inline-end: 0; }
  .compliance-row strong { font-family: var(--font-mono); font-size: .78rem; }
  .compliance-row small { margin-block-start: .2rem; color: var(--muted-2); font-size: .53rem; }

  .final-cta {
    position: relative;
    overflow: hidden;
    padding-block: clamp(7rem, 12vw, 11rem);
    border-block-start: 1px solid var(--line);
    background:
      radial-gradient(circle at 50% 100%, rgb(167 243 193 / .1), transparent 35rem),
      radial-gradient(circle at 50% 40%, rgb(126 97 255 / .14), transparent 34rem);
    text-align: center;
    isolation: isolate;
  }

  .final-cta::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image: radial-gradient(circle, rgb(255 255 255 / .4) 0 .05rem, transparent .075rem);
    background-size: 7rem 7rem;
    mask-image: radial-gradient(circle, black, transparent 65%);
    content: "";
  }

  .final-cta-inner { display: grid; justify-items: center; }
  .final-cta h2 { margin-block-start: 1rem; font-size: clamp(3rem, 6.2vw, 6.2rem); font-weight: 670; letter-spacing: -.065em; }
  .final-cta p { margin-block-start: 1.35rem; font-size: 1rem; }
  .final-cta .hero-actions { justify-content: center; }

  .cta-note {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-block-start: 1.4rem;
    color: var(--muted-2);
    font-size: .6rem;
  }

  .final-orbit {
    position: absolute;
    z-index: -1;
    inset: 50% auto auto 50%;
    inline-size: 58rem;
    aspect-ratio: 2.1;
    border: 1px solid rgb(167 243 193 / .1);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-9deg);
  }

  .orbit-two { inline-size: 78rem; transform: translate(-50%, -50%) rotate(12deg); border-color: rgb(150 134 255 / .1); }

  .site-footer {
    padding-block: 4.5rem 1.5rem;
    background: #060810;
  }

  .footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.45fr;
    gap: 4rem;
  }

  .footer-brand p { margin-block-start: 1rem; font-size: .74rem; line-height: 1.65; }
  .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .footer-links > div { display: grid; align-content: start; gap: .65rem; }
  .footer-links h2 { margin-block-end: .35rem; color: var(--paper-2); font-size: .62rem; letter-spacing: 0; }
  .footer-links a { color: var(--muted-2); font-size: .65rem; transition: color .2s ease, translate .3s var(--spring); }
  .footer-links a:hover { color: var(--paper); translate: .15rem 0; }

  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-block-start: 4rem;
    padding-block-start: 1.3rem;
    border-block-start: 1px solid var(--line);
    color: var(--muted-2);
    font-family: var(--font-mono);
    font-size: .5rem;
  }

  .footer-status { display: flex; align-items: center; gap: .4rem; }
  .footer-bottom > div { display: flex; justify-self: end; gap: 1rem; }
  .footer-bottom a:hover { color: var(--paper); }
}

@layer utilities {
  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    overflow: hidden !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  @supports (content-visibility: auto) {
    .feature-section {
      content-visibility: auto;
      contain-intrinsic-size: auto none auto 120rem;
    }

    .trust-section {
      content-visibility: auto;
      contain-intrinsic-size: auto none auto 55rem;
    }

  }

  @media (forced-colors: active) {
    .button, .feature-card, .flight-board, .switchboard-shell, .trust-card, .code-window, .arena-shell {
      border-color: CanvasText;
    }

    .live-pulse, .status-orb, .mode-badge i, .footer-status i {
      border: 1px solid CanvasText;
    }
  }
}

@layer motion {
  .live-pulse::after,
  .route-line span,
  .wave-stroke,
  .console-log-current i,
  .float-card,
  .radar-sweep,
  .ring-a,
  .ring-b,
  .scope-scan,
  .shield-rings i:first-child {
    animation-play-state: paused;
  }

  html.motion-ready .hero .live-pulse::after,
  html.motion-ready .hero .route-line span,
  html.motion-ready .hero .wave-stroke,
  html.motion-ready .hero .console-log-current i,
  html.motion-ready .hero .float-card,
  html.motion-ready .is-motion-active .radar-sweep,
  html.motion-ready .is-motion-active .ring-a,
  html.motion-ready .is-motion-active .ring-b,
  html.motion-ready .is-motion-active .scope-scan,
  html.motion-ready .is-motion-active .shield-rings i:first-child {
    animation-play-state: running;
  }

  @keyframes pulse-ring {
    0% { opacity: .55; scale: .45; }
    75%, 100% { opacity: 0; scale: 1.5; }
  }

  @keyframes route-flow {
    from { translate: -110% 0; }
    to { translate: 390% 0; }
  }

  @keyframes draw-wave {
    from { stroke-dashoffset: 80; }
    to { stroke-dashoffset: 0; }
  }

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

  @keyframes float-card {
    0%, 100% { translate: 0 0; rotate: -1deg; }
    50% { translate: 0 -.55rem; rotate: 1deg; }
  }

  @keyframes radar-sweep {
    to { rotate: 360deg; }
  }

  @keyframes scope-scan {
    from { translate: -100% 0; }
    to { translate: 920% 0; }
  }

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

    .live-pulse::after,
    .route-line span,
    .wave-stroke,
    .console-log-current i,
    .float-card,
    .radar-sweep,
    .ring-a,
    .ring-b,
    .scope-scan,
    .shield-rings i:first-child {
      animation: none;
    }

    .button, .feature-card, .console-frame, .arena-preview, .flight-step, .feature-icon {
      transition-duration: .01s;
    }
  }
}

@container (max-width: 28rem) {
  .telemetry-grid { grid-template-columns: 1fr; }
  .float-card { display: none; }
}

@media (max-width: 72rem) {
  :root { --wrap: min(100% - 2.5rem, 68rem); }

  .nav-links { gap: 1.1rem; }
  .sound-toggle, .nav-signin { display: none; }
  .hero-grid { grid-template-columns: minmax(0, .88fr) minmax(28rem, 1.12fr); gap: 2rem; }
  .float-card-fallback { inset-inline-start: -2%; }
  .float-card-cache { inset-inline-end: -2%; }
  .provider-rail { overflow: hidden; }
  .provider-rail ul { justify-content: flex-start; overflow-x: auto; padding-block: .5rem; scrollbar-width: thin; }
  .flight-detail { grid-template-columns: 1fr .7fr; }
  .flight-detail-copy { padding: 2rem; }
  .switchboard-grid { grid-template-columns: 1.25fr .75fr; }
  .arena-shell { grid-template-columns: .65fr 1.35fr; }
}

@media (max-width: 58rem) {
  :root { --wrap: min(100% - 2rem, 52rem); }

  .nav-links, .nav-actions > .button, .nav-actions > .sound-toggle { display: none; }
  .menu-toggle { display: inline-grid; }
  .hero { padding-block-start: 8.2rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-inline-size: 43rem; }
  .hero-console { inline-size: 100%; max-inline-size: 42rem; margin: 1rem auto 0; }
  .console-frame { transform: none; }
  .provider-rail { grid-template-columns: 1fr; gap: .6rem; margin-block-start: 4rem; }
  .provider-rail ul { justify-content: flex-start; gap: 1.5rem; }
  .heading-split { grid-template-columns: 1fr; gap: 1.25rem; }
  .flight-board { grid-template-columns: 1fr; }
  .flight-track { grid-template-columns: repeat(5, minmax(9rem, 1fr)); }
  .flight-track-wrap { overflow-x: auto; scrollbar-color: var(--muted-2) var(--ink-850); scrollbar-width: thin; }
  .flight-track-wrap::before { inset: 2.95rem 5rem auto; inline-size: 40rem; block-size: 1px; }
  .flight-step { grid-template-columns: 1fr; justify-items: start; min-block-size: 8.8rem; }
  .flight-index { display: none; }
  .flight-detail { min-block-size: 28rem; }
  .feature-cascade, .feature-cache, .feature-racing, .feature-ledger, .feature-keys, .feature-green { grid-column: 1 / -1; }
  .feature-racing, .feature-ledger, .feature-keys, .feature-green { min-block-size: 24rem; }
  .switchboard-grid { grid-template-columns: 1fr; }
  .request-panel, .quota-panel { grid-column: 1; grid-row: auto; }
  .developer-grid { grid-template-columns: 1fr; }
  .developer-copy { max-inline-size: 40rem; }
  .arena-shell { grid-template-columns: 1fr; }
  .trust-card { grid-template-columns: 1fr .55fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 42rem) {
  :root { --wrap: calc(100% - 1.5rem); }

  .site-header { background: rgb(7 9 18 / .88); }
  .nav { min-block-size: 4.25rem; }
  .brand-mark { inline-size: 1.8rem; block-size: 1.8rem; }
  .hero { padding-block: 7.4rem 2rem; }
  .hero h1 { font-size: clamp(2.95rem, 14vw, 4.2rem); }
  .hero-lede { font-size: .98rem; }
  .hero-actions .button { inline-size: 100%; }
  .hero-metrics { gap: .4rem; }
  .hero-metrics > div { padding-inline: .65rem; }
  .hero-metrics dt { font-size: .5rem; }
  .hero-metrics dd { font-size: 1rem; }
  .console-topbar { grid-template-columns: 1fr 1fr; }
  .console-topbar > span:nth-child(2) { display: none; }
  .console-body { padding: .8rem; }
  .float-card { display: none; }
  .section { padding-block: 5.5rem; }
  .section-heading h2 { font-size: clamp(2.5rem, 12vw, 3.7rem); }
  .flight-board { margin-block-start: 2.5rem; padding: .4rem; }
  .flight-detail { grid-template-columns: 1fr; min-block-size: 37rem; }
  .flight-detail-copy { align-self: end; padding: 1.4rem; }
  .radar { grid-row: 1; inline-size: 12rem; margin-block-start: 1.5rem; }
  .bento-grid { margin-block-start: 2.5rem; }
  .feature-card { padding: 1.25rem; }
  .feature-cascade, .feature-cache { min-block-size: 32rem; }
  .cascade-demo, .race-demo, .ledger-counter, .key-demo { inset-inline: 1.25rem; inset-block-end: 1.25rem; }
  .cache-orbit { inset-inline-end: 50%; translate: 50% 0; }
  .karma-score { inset-inline: 1.25rem; }
  .switchboard-shell { margin-inline: -.25rem; }
  .switchboard-toolbar { grid-template-columns: 1fr auto; }
  .toolbar-range { display: none; }
  .switchboard-grid { grid-template-columns: 1fr; }
  .oscilloscope { block-size: 10rem; }
  .developer-grid { gap: 2.5rem; }
  .code-languages button { padding-inline: .45rem; }
  .code-window pre { min-block-size: 23rem; padding: 1rem; font-size: .59rem; }
  .model-columns { grid-template-columns: 1fr; }
  .model-columns article:nth-child(3) { display: none; }
  .model-columns p { min-block-size: 4rem; }
  .arena-shell { padding: 1.4rem; }
  .trust-card { grid-template-columns: 1fr; padding: 1.5rem 1.5rem 15rem; }
  .shield-visual { inline-size: 12rem; }
  .compliance-row { grid-template-columns: repeat(2, 1fr); }
  .compliance-row > span { min-block-size: 4.8rem; border-block-end: 1px solid var(--line); }
  .final-cta .hero-actions { inline-size: 100%; }
  .footer-links { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
  .footer-bottom { grid-template-columns: 1fr; justify-items: start; }
  .footer-bottom > div { justify-self: start; }
}

@media (pointer: coarse) {
  .nav-links a, .footer-links a, .text-link, .code-languages button, .toolbar-range button {
    min-block-size: 2.75rem;
  }
}