:root {
           --bg: #0b0f14;
           --bg-panel: #11161d;
           --bg-panel-2: #151b23;
           --line: #232b36;
           --ink: #e7ecf2;
           --ink-dim: #8c98a8;
           --ink-faint: #5c6b7d;
           --accent: #5ee6c9;
           --accent-soft: rgba(94, 230, 201, .12);
           --amber: #e8a83c;
           --amber-soft: rgba(232, 168, 60, .12);
           --rose: #e8637a;
           --rose-soft: rgba(232, 99, 122, .12);
           --violet: #9d8cf0;
           --violet-soft: rgba(157, 140, 240, .12);
           --green: #5ee6a0;
           --green-soft: rgba(94, 230, 160, .12);
           --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
           --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
           --sans: -apple-system, "Segoe UI", Inter, system-ui, sans-serif
       }

       * {
           box-sizing: border-box;
           margin: 0;
           padding: 0
       }

       html,
       body {
           background: var(--bg);
           color: var(--ink);
           font-family: var(--sans);
           line-height: 1.55
       }

       body {
           background: radial-gradient(1200px 600px at 15% -10%, rgba(94, 230, 201, .07), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(157, 140, 240, .06), transparent 55%), var(--bg)
       }

       main {
           max-width: 1320px;
           margin: 0 auto;
           padding: 56px 28px 90px
       }

       .eyebrow {
           font: 12px var(--mono);
           letter-spacing: .14em;
           text-transform: uppercase;
           color: var(--accent);
           display: flex;
           align-items: center;
           gap: 10px;
           margin-bottom: 18px
       }

       .eyebrow:before {
           content: "";
           width: 7px;
           height: 7px;
           border-radius: 50%;
           background: var(--accent);
           box-shadow: 0 0 10px var(--accent)
       }

       h1 {
           font: 400 clamp(34px, 5vw, 58px)/1.06 var(--serif);
           margin-bottom: 14px
       }

       h1 em {
           font-style: italic;
           color: var(--accent)
       }

       .hero-sub {
           max-width: 840px;
           color: var(--ink-dim);
           font-size: 16px
       }

       .meta {
           display: flex;
           flex-wrap: wrap;
           gap: 6px 22px;
           margin-top: 20px;
           font: 12px var(--mono);
           color: var(--ink-faint)
       }

       section {
           margin-top: 58px
       }

       .section-head {
           display: flex;
           align-items: baseline;
           justify-content: space-between;
           gap: 16px;
           flex-wrap: wrap;
           margin-bottom: 18px
       }

       h2 {
           font: 400 24px var(--serif)
       }

       .note {
           font: 11px var(--mono);
           color: var(--ink-faint);
           text-align: right
       }

       .metric-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
           gap: 1px;
           background: var(--line);
           border: 1px solid var(--line);
           border-radius: 16px;
           overflow: hidden
       }

       .metric {
           background: var(--bg-panel);
           padding: 22px 18px
       }

       .metric .n {
           font: 650 30px var(--mono);
           color: var(--accent)
       }

       .metric .l {
           font-size: 12px;
           color: var(--ink-dim);
           margin-top: 6px
       }

       .controls {
           display: grid;
           grid-template-columns: 2fr 1fr 1fr 1fr;
           gap: 12px;
           background: var(--bg-panel);
           border: 1px solid var(--line);
           border-radius: 14px;
           padding: 16px
       }

       input,
       select {
           width: 100%;
           background: var(--bg-panel-2);
           border: 1px solid var(--line);
           color: var(--ink);
           border-radius: 9px;
           padding: 11px 12px;
           font: 13px var(--mono);
           outline: none
       }

       input:focus,
       select:focus {
           border-color: var(--accent)
       }

       .table-wrap {
           overflow: auto;
           border: 1px solid var(--line);
           border-radius: 16px;
           background: var(--bg-panel)
       }

       table {
           width: 100%;
           min-width: 1120px;
           border-collapse: collapse;
           font-size: 13px
       }

       thead th {
           position: sticky;
           top: 0;
           z-index: 2;
           text-align: left;
           background: var(--bg-panel-2);
           padding: 12px;
           border-bottom: 1px solid var(--line);
           font: 600 10.5px var(--mono);
           letter-spacing: .05em;
           text-transform: uppercase;
           color: var(--ink-dim)
       }

       tbody tr {
           border-bottom: 1px solid var(--line)
       }

       tbody tr:hover {
           background: var(--bg-panel-2)
       }

       tbody td {
           padding: 11px 12px;
           vertical-align: top
       }

       .company {
           font-weight: 600;
           color: var(--ink)
       }

       .region {
           font: 10.5px var(--mono);
           color: var(--ink-faint);
           margin-top: 2px
       }

       .industry-tag,
       .mission-tag,
       .priority {
           display: inline-block;
           border-radius: 12px;
           padding: 3px 8px;
           font: 10px var(--mono);
           border: 1px solid var(--line);
           white-space: nowrap
       }

       .industry-tag {
           background: var(--violet-soft);
           color: var(--violet);
           border-color: rgba(157, 140, 240, .25)
       }

       .mission-tag {
           background: var(--accent-soft);
           color: var(--accent);
           border-color: rgba(94, 230, 201, .22)
       }

       .priority.a {
           background: var(--rose-soft);
           color: var(--rose);
           border-color: rgba(232, 99, 122, .24)
       }

       .priority.b {
           background: var(--amber-soft);
           color: var(--amber);
           border-color: rgba(232, 168, 60, .24)
       }

       .usecase {
           color: var(--ink-dim);
           max-width: 520px
       }

       .summary {
           display: grid;
           grid-template-columns: 1.2fr 1fr;
           gap: 16px
       }

       .card {
           background: var(--bg-panel);
           border: 1px solid var(--line);
           border-radius: 14px;
           padding: 20px
       }

       .card h3 {
           font: 600 13px var(--mono);
           color: var(--accent);
           margin-bottom: 10px
       }

       .list {
           margin-top: 10px;
           display: grid;
           gap: 6px
       }

       .list div {
           font-size: 12px;
           color: var(--ink-dim);
           padding: 7px 9px;
           background: var(--bg-panel-2);
           border-radius: 8px
       }

       .footer {
           margin-top: 60px;
           padding-top: 22px;
           border-top: 1px solid var(--line);
           font: 11px var(--mono);
           color: var(--ink-faint)
       }

       .status {
           color: var(--accent)
       }

       /* ——— bottom badges ——— */
       .bottom-badges {
           margin-top: 48px;
           text-align: center;
           display: flex;
           flex-direction: column;
           align-items: center;
           gap: 6px;
       }

       .bottom-badges .badge-mcp {
           font: 13px var(--mono);
           color: var(--ink-dim);
           letter-spacing: 0.02em;
       }

       .bottom-badges .badge-mcp em {
           font-style: italic;
           color: var(--accent);
       }

       .bottom-badges .badge-anthropic {
           font: 11px var(--mono);
           color: var(--ink-faint);
           letter-spacing: 0.06em;
           text-transform: uppercase;
       }

       .bottom-badges .badge-anthropic span {
           color: var(--violet);
       }

       @media(max-width:850px) {

           .controls,
           .summary {
               grid-template-columns: 1fr
           }

           main {
               padding: 40px 18px 70px
           }
       }

       ::-webkit-scrollbar {
           width: 0;
       }