:root {
  color-scheme: light;
  --qoc-ink: #061a2f;
  --qoc-deep: #071f37;
  --qoc-blue: #1158ff;
  --qoc-sky: #d8e7ff;
  --qoc-mint: #b9f6dd;
  --qoc-paper: #f5f7f3;
  --qoc-line: rgba(6,26,47,.12);
  --qoc-muted: #536276;
  --qoc-radius: 1.65rem;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--qoc-ink);
  background: var(--qoc-paper);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--qoc-paper); }
button, a { font: inherit; }
a { color: inherit; }
.qoc-skip { position: fixed; z-index: 99; top: .5rem; left: .5rem; padding: .7rem 1rem; background: #fff; transform: translateY(-160%); }
.qoc-skip:focus { transform: none; }

.qoc-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 4.8rem;
  padding: .8rem clamp(1rem, 4vw, 4.5rem);
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #fff;
  background: rgba(6,26,47,.94);
  backdrop-filter: blur(18px);
}
.qoc-brand { display: inline-flex; align-items: center; gap: .75rem; width: max-content; font-weight: 850; letter-spacing: .17em; text-decoration: none; }
.qoc-compass { position: relative; display: inline-grid; width: 1.9rem; height: 1.9rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.qoc-compass::before, .qoc-compass::after { position: absolute; width: 1px; height: 56%; background: currentColor; content: ""; }
.qoc-compass::before { transform: rotate(45deg); }
.qoc-compass::after { transform: rotate(-45deg); }
.qoc-compass i { width: .34rem; height: .34rem; border-radius: 50%; background: currentColor; }
.qoc-header nav { display: flex; gap: .3rem; padding: .28rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.06); }
.qoc-header nav a { padding: .55rem .9rem; border-radius: 999px; color: #b9c8d7; font-size: .76rem; font-weight: 750; text-decoration: none; }
.qoc-header nav a.active { color: var(--qoc-ink); background: var(--qoc-mint); }
.qoc-back { justify-self: end; color: #d4dfeb; font-size: .76rem; font-weight: 750; text-decoration: none; }

.qoc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .45fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
  min-height: 39rem;
  padding: clamp(5rem, 10vw, 9rem) clamp(1.25rem, 6vw, 7rem) clamp(4rem, 8vw, 7rem);
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(17,88,255,.48), transparent 24rem),
    radial-gradient(circle at 8% 92%, rgba(185,246,221,.17), transparent 28rem),
    var(--qoc-deep);
  overflow: hidden;
}
.qoc-status { display: inline-flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; color: #c8d7e7; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.qoc-status i { width: .45rem; height: .45rem; border-radius: 50%; background: #57e4a6; box-shadow: 0 0 0 .3rem rgba(87,228,166,.13); }
.qoc-kicker { margin: 2.3rem 0 1rem; color: #79a8ff; font-size: .72rem; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.qoc-hero h1 { max-width: 68rem; margin: 0; font-size: clamp(3rem, 7.5vw, 7.6rem); font-weight: 520; letter-spacing: -.072em; line-height: .9; }
.qoc-hero h1 em { color: var(--qoc-mint); font-style: normal; }
.qoc-hero-copy > p:last-child { max-width: 48rem; margin: 2rem 0 0; color: #c4d1df; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.65; }
.qoc-boundary { padding: 1.45rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--qoc-radius); background: rgba(255,255,255,.07); backdrop-filter: blur(12px); }
.qoc-boundary > span { color: #91a9c0; font-size: .65rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.qoc-boundary > strong { display: block; margin: .6rem 0 1.2rem; font-size: 1.7rem; letter-spacing: -.04em; }
.qoc-boundary ul { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.qoc-boundary li { display: flex; gap: .55rem; color: #cad5e0; font-size: .8rem; line-height: 1.45; }
.qoc-boundary li::before { color: #57e4a6; content: "✓"; }

.qoc-module-bar { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--qoc-line); background: #fff; }
.qoc-module-bar button { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; min-height: 7.4rem; padding: 1.2rem clamp(.8rem, 2vw, 2rem); border: 0; border-right: 1px solid var(--qoc-line); color: var(--qoc-ink); background: transparent; text-align: left; cursor: pointer; }
.qoc-module-bar button:last-child { border-right: 0; }
.qoc-module-bar button > span { grid-row: 1 / 3; color: #97a4b2; font-size: .67rem; font-weight: 850; }
.qoc-module-bar b { align-self: end; font-size: 1.25rem; letter-spacing: -.03em; }
.qoc-module-bar small { color: var(--qoc-muted); font-size: .7rem; }
.qoc-module-bar button.active { color: #fff; background: var(--qoc-blue); }
.qoc-module-bar button.active span, .qoc-module-bar button.active small { color: #cbdcff; }

.qoc-content { min-height: 36rem; padding: clamp(3.5rem, 7vw, 7rem) clamp(1rem, 6vw, 7rem); }
.qoc-loading { display: grid; grid-template-columns: repeat(3, 5rem); gap: .7rem; justify-content: center; padding: 7rem 1rem; }
.qoc-loading span { height: .35rem; border-radius: 1rem; background: #d7dfe4; animation: qoc-pulse 1.15s ease-in-out infinite alternate; }
.qoc-loading span:nth-child(2) { animation-delay: .2s; }.qoc-loading span:nth-child(3) { animation-delay: .4s; }
.qoc-loading p { grid-column: 1 / -1; color: var(--qoc-muted); font-size: .8rem; text-align: center; }
@keyframes qoc-pulse { to { background: var(--qoc-blue); transform: scaleX(.65); } }
.qoc-error { display: flex; max-width: 45rem; gap: 1.2rem; margin: 4rem auto; padding: 1.5rem; border: 1px solid #e3b3b3; border-radius: var(--qoc-radius); background: #fff6f3; }
.qoc-error > span { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #d14a40; font-weight: 850; }
.qoc-error strong { font-size: 1.1rem; }.qoc-error p { color: var(--qoc-muted); }.qoc-error button { padding: .65rem 1rem; border: 0; border-radius: 999px; color: #fff; background: var(--qoc-ink); cursor: pointer; }

.qoc-panel-head { display: flex; gap: 2rem; align-items: end; justify-content: space-between; margin-bottom: 2rem; }
.qoc-panel-head span, .qoc-card small, .qoc-table-card > small { color: var(--qoc-blue); font-size: .66rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.qoc-panel-head h2 { max-width: 46rem; margin: .55rem 0 0; font-size: clamp(2.1rem, 4.7vw, 4.6rem); font-weight: 540; letter-spacing: -.06em; line-height: .95; }
.qoc-panel-head p { max-width: 28rem; margin: 0; color: var(--qoc-muted); line-height: 1.6; }
.qoc-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; margin-bottom: 1rem; }
.qoc-metric { min-height: 10rem; padding: 1.35rem; border: 1px solid var(--qoc-line); border-radius: var(--qoc-radius); background: #fff; }
.qoc-metric small { color: var(--qoc-muted); font-size: .68rem; font-weight: 750; }.qoc-metric strong { display: block; margin: 1.3rem 0 .35rem; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.06em; }.qoc-metric span { color: var(--qoc-muted); font-size: .74rem; }
.qoc-metric.accent { color: #fff; background: var(--qoc-blue); }.qoc-metric.accent small,.qoc-metric.accent span { color: #dce7ff; }
.qoc-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.qoc-card, .qoc-table-card { padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--qoc-line); border-radius: var(--qoc-radius); background: #fff; }
.qoc-card h3, .qoc-table-card h3 { margin: .55rem 0 .45rem; font-size: clamp(1.35rem, 2.3vw, 2rem); letter-spacing: -.04em; }.qoc-card > p { color: var(--qoc-muted); line-height: 1.55; }
.qoc-list { display: grid; gap: .65rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.qoc-list li { display: grid; grid-template-columns: 1fr auto; gap: .8rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--qoc-line); font-size: .82rem; }
.qoc-list li span { color: var(--qoc-muted); }.qoc-list li b { text-align: right; }
.qoc-tag { display: inline-flex; padding: .35rem .55rem; border-radius: 999px; color: #0a6040; background: #d9f8e8; font-size: .62rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.qoc-tag.medium { color: #795000; background: #fff0c7; }.qoc-tag.suppressed { color: #6b6470; background: #eeeaf0; }
.qoc-progress { height: .55rem; margin: 1.25rem 0 .7rem; border-radius: 1rem; background: #e8edf1; overflow: hidden; }.qoc-progress i { display: block; height: 100%; border-radius: inherit; background: var(--qoc-blue); }
.qoc-missions { display: grid; gap: .75rem; margin-top: 1rem; }.qoc-mission { display: grid; grid-template-columns: 2.1rem 1fr auto; gap: .85rem; align-items: start; padding: 1rem 0; border-top: 1px solid var(--qoc-line); }.qoc-mission > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: #fff; background: var(--qoc-ink); font-size: .68rem; }.qoc-mission h4 { margin: 0 0 .25rem; }.qoc-mission p { margin: 0; color: var(--qoc-muted); font-size: .78rem; line-height: 1.5; }.qoc-mission b { color: var(--qoc-blue); font-size: .75rem; }
.qoc-table-card { margin-top: 1rem; overflow: hidden; }.qoc-table-wrap { margin: 1.2rem -2rem -2rem; overflow-x: auto; }.qoc-table { width: 100%; min-width: 42rem; border-collapse: collapse; }.qoc-table th,.qoc-table td { padding: 1rem 2rem; border-top: 1px solid var(--qoc-line); font-size: .78rem; text-align: left; }.qoc-table th { color: var(--qoc-muted); background: #f7f9f9; font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; }
.qoc-note { margin-top: 1rem; padding: 1rem 1.2rem; border-left: .25rem solid var(--qoc-blue); color: var(--qoc-muted); background: #eef4ff; font-size: .78rem; line-height: 1.55; }
.qoc-mobility-grid { margin-top: 1rem; }

.qoc-proof { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--qoc-line); background: #fff; }.qoc-proof > div { min-height: 13rem; padding: 2rem; border-right: 1px solid var(--qoc-line); }.qoc-proof > div:last-child { border-right: 0; }.qoc-proof small { color: var(--qoc-blue); font-size: .64rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }.qoc-proof strong { display: block; margin: 1rem 0 .65rem; font-size: 1.25rem; }.qoc-proof p { margin: 0; color: var(--qoc-muted); font-size: .78rem; line-height: 1.55; }
.qoc-footer { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 2rem; align-items: center; padding: 3rem clamp(1rem, 5vw, 5rem); color: #fff; background: #041424; }.qoc-footer p { color: #b7c6d4; font-size: .8rem; }.qoc-footer small { color: #8299ad; font-size: .7rem; line-height: 1.5; text-align: right; }

@media (max-width: 920px) {
  .qoc-header { grid-template-columns: 1fr auto; }.qoc-header nav { position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 30; justify-content: center; box-shadow: 0 1rem 3rem rgba(0,0,0,.25); background: var(--qoc-deep); }.qoc-back { display: none; }
  .qoc-hero { grid-template-columns: 1fr; min-height: auto; }.qoc-boundary { max-width: 32rem; }
  .qoc-module-bar { grid-template-columns: repeat(2,1fr); }.qoc-metrics,.qoc-proof { grid-template-columns: repeat(2,1fr); }.qoc-footer { grid-template-columns: 1fr; padding-bottom: 7rem; }.qoc-footer small { text-align: left; }
}
@media (max-width: 620px) {
  .qoc-header { min-height: 4rem; }.qoc-brand { font-size: .8rem; }.qoc-header nav { overflow-x: auto; justify-content: flex-start; }.qoc-hero { padding-top: 4rem; }.qoc-hero h1 br { display: none; }
  .qoc-module-bar button { min-height: 6.2rem; }.qoc-panel-head { display: block; }.qoc-panel-head p { margin-top: 1rem; }.qoc-metrics,.qoc-grid,.qoc-proof { grid-template-columns: 1fr; }.qoc-proof > div { min-height: 9rem; border-right: 0; border-bottom: 1px solid var(--qoc-line); }.qoc-table-wrap { margin-inline: -1.25rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.qoc-loading span { animation: none; } }

.qoc-export {
  min-height: 2.8rem;
  padding: .65rem 1rem;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--qoc-ink);
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.qoc-export:focus-visible { outline: 3px solid var(--qoc-blue); outline-offset: 3px; }