/* =================================================================
   daca.me — Home Route Stylesheet (/)
   ================================================================= */

@layer pages {
  body {
    background-color: var(--bg-pure);
    background-image:
      radial-gradient(ellipse 80% 50% at 50% -15%, rgba(245, 158, 11, 0.08), transparent 70%),
      radial-gradient(ellipse 60% 45% at 85% 20%, rgba(34, 211, 238, 0.05), transparent 65%);
  }

  #pc-builds,
  #case-studies,
  #tools,
  #about,
  #contact {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
  }

  .section-surface {
    background: linear-gradient(180deg var(--in-oklab), rgba(12, 16, 26, 0.94), rgba(9, 13, 21, 0.92));
    border-block: 1px solid var(--border-subtle);
  }

  #app-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
  }

  .container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
  }

  /* Single-Row Compact Fixed Header */
  .sys-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    z-index: 100;
    background: rgba(7, 9, 14, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-subtle);
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .sys-header.scrolled {
    background: rgba(7, 9, 14, 0.94);
    border-bottom-color: rgba(245, 158, 11, 0.28);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
  }

  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-block-size: 64px;
    position: relative;
    gap: 1rem;
  }

  .sys-logo {
    font-family: var(--font-display);
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
  }

  .sys-logo span {
    color: var(--accent-bright);
  }

  .logo-badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.14rem 0.45rem;
    border-radius: var(--radius-sm);
    background: rgba(253, 224, 71, 0.1);
    border: 1px solid rgba(253, 224, 71, 0.28);
    color: var(--accent-bright);
    letter-spacing: 0.05em;
  }

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

  .nav-item a {
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--text-muted);
    transition: color 0.2s ease;
    position: relative;
    padding: 0.45rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
  }

  .nav-item a:hover,
  .nav-item.active a {
    color: var(--accent-bright);
  }

  .nav-item.nav-pill a {
    padding: 0.35rem 0.72rem;
    border-radius: var(--radius-sm);
    background: rgba(15, 21, 34, 0.85);
    border: 1px solid var(--border-glow);
    color: var(--text-main);
  }

  .nav-item.nav-pill a:hover {
    border-color: var(--accent-bright);
    color: var(--accent-bright);
    background: rgba(253, 224, 71, 0.08);
  }

  /* CSS Anchor Positioning Active Nav Indicator + Fallback */
  @supports (position-anchor: --active-nav) {
    .nav-item.active {
      anchor-name: --active-nav;
    }
    .nav-links::before {
      content: '';
      position: absolute;
      position-anchor: --active-nav;
      inset-block-start: calc(anchor(bottom) - 2px);
      inset-inline-start: anchor(left);
      inset-inline-end: anchor(right);
      border-block-end: 2px solid var(--accent-bright);
      pointer-events: none;
    }
    @media (prefers-reduced-motion: no-preference) {
      .nav-links::before {
        transition: inset 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      }
    }
  }

  @supports not (position-anchor: --active-nav) {
    .nav-item:not(.nav-pill) a::after {
      content: '';
      position: absolute;
      inset-block-end: 0;
      inset-inline-start: 0;
      inline-size: 100%;
      border-block-end: 2px solid var(--accent-bright);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .nav-item:not(.nav-pill) a:hover::after,
    .nav-item.active:not(.nav-pill) a::after {
      transform: scaleX(1);
      transform-origin: left;
    }
  }

  /* Hero Layout */
  @keyframes sysRevealFade {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
  }

  .hero-viewport {
    min-block-size: 100dvh;
    display: flex;
    align-items: center;
    position: relative;
    padding: 6.5rem 0 4rem;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3rem;
    align-items: center;
    width: 100%;
  }

  .hero-core {
    width: 100%;
    text-align: left;
  }

  @media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    .sys-reveal {
      opacity: 0;
      animation: sysRevealFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .sys-reveal:nth-child(1) { animation-delay: 0.04s; }
    .sys-reveal:nth-child(2) { animation-delay: 0.1s; }
    .sys-reveal:nth-child(3) { animation-delay: 0.16s; }
    .sys-reveal:nth-child(4) { animation-delay: 0.22s; }
    .sys-reveal:nth-child(5) { animation-delay: 0.28s; }
  }

  .sys-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(90deg var(--in-oklab), rgba(15, 21, 34, 0.9), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.28);
    padding: 0.42rem 0.9rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--accent-bright);
    margin-bottom: 1.35rem;
  }

  .sys-status-indicator {
    width: 7px;
    height: 7px;
    background: var(--accent-green);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-green);
  }

  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.15rem, 1.35rem + 3vw, 3.9rem);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -0.035em;
    color: #fff;
    margin-bottom: 1.25rem;
  }

  .hero-title em {
    font-style: normal;
    color: var(--accent-bright);
    text-decoration: underline;
    text-decoration-color: rgba(253, 224, 71, 0.35);
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
  }

  .hero-lead {
    font-size: clamp(1rem, 0.94rem + 0.3vw, 1.12rem);
    color: #cbd5e1;
    line-height: 1.65;
    max-width: 60ch;
    margin-bottom: 1.5rem;
  }

  .hero-console-shell {
    background: rgba(10, 14, 23, 0.85);
    border: 1px solid var(--border-subtle);
    border-inline-start: 3px solid var(--accent-bright);
    border-radius: var(--radius-md);
    padding: 0.8rem 1.05rem;
    margin-bottom: 1.65rem;
    max-width: 62ch;
  }

  .hero-console-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.4rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
  }

  .hero-console-bar span:last-child {
    color: var(--accent-green);
    font-weight: 600;
  }

  .console-line {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    color: #cbd5e1;
    margin-bottom: 0.3rem;
    line-height: 1.5;
    text-align: left;
  }

  .console-line:last-child {
    margin-bottom: 0;
  }

  .btn-stack {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
  }

  .btn-primitive {
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.8rem 1.45rem;
    min-block-size: 46px;
    border-radius: var(--radius-sm);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
  }

  .btn-primitive.primary {
    background: var(--accent-bright);
    color: var(--bg-pure);
    border: 1px solid var(--accent-bright);
    box-shadow: 0 4px 20px rgba(253, 224, 71, 0.14);
  }

  .btn-primitive.primary:hover {
    background: #fff;
    border-color: #fff;
    transform: translate3d(0, -1px, 0);
  }

  .btn-primitive.cyan {
    background: var(--accent-cyan);
    color: var(--bg-pure);
    border: 1px solid var(--accent-cyan);
  }

  .btn-primitive.cyan:hover {
    background: #67e8f9;
    border-color: #67e8f9;
    transform: translate3d(0, -1px, 0);
  }

  .btn-primitive.secondary {
    background: rgba(15, 21, 34, 0.78);
    color: var(--text-main);
    border: 1px solid var(--border-glow);
  }

  .btn-primitive.secondary:hover {
    background: rgba(19, 27, 43, 0.96);
    border-color: var(--accent-bright);
    color: var(--accent-bright);
    transform: translate3d(0, -1px, 0);
  }

  /* Hero KPI Strip */
  .hero-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-subtle);
  }

  .kpi-cell {
    background: rgba(12, 16, 24, 0.85);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.75rem;
  }

  .kpi-val {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent-bright);
    line-height: 1.1;
    margin-bottom: 0.25rem;
  }

  .kpi-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .kpi-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
  }

  /* Right Column: Interactive Hero Command Deck HUD */
  .hero-hud-panel {
    background: linear-gradient(160deg var(--in-oklab), rgba(15, 21, 34, 0.92), rgba(7, 9, 14, 0.96));
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    padding: 1.35rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  }

  .hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.85rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
  }

  .hud-title-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .hud-badge {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.32);
    color: var(--accent-green);
    letter-spacing: 0.05em;
  }

  .hud-tablist {
    display: flex;
    gap: 0.35rem;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hud-tab {
    flex: none;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    padding: 0.55rem 0.75rem;
    min-block-size: 38px;
    cursor: pointer;
    position: relative;
    letter-spacing: 0.04em;
    transition: color 0.2s, background-color 0.2s;
  }

  .hud-tab:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.03);
  }

  .hud-tab[aria-selected="true"] {
    color: var(--accent-bright);
    background: rgba(253, 224, 71, 0.06);
  }

  .hud-tab[aria-selected="true"]::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    border-block-end: 2px solid var(--accent-bright);
  }

  .hud-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .topology-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .topo-node {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.8rem;
    background: rgba(7, 9, 14, 0.82);
    border: 1px solid var(--border-subtle);
    border-inline-start: 3px solid var(--accent-green);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    transition: border-color 0.25s, transform 0.25s, background-color 0.25s;
  }

  .topo-node.pulsing {
    border-color: var(--accent-bright);
    background: rgba(253, 224, 71, 0.08);
    transform: translateX(4px);
  }

  .topo-node-left {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .topo-node-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.72rem;
  }

  .topo-node-desc {
    color: var(--text-muted);
    font-size: 0.64rem;
  }

  .topo-node-stat {
    color: var(--accent-bright);
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(253, 224, 71, 0.08);
    border: 1px solid rgba(253, 224, 71, 0.25);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
  }

  .hud-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
  }

  .hud-ping-btn {
    background: rgba(253, 224, 71, 0.12);
    border: 1px solid var(--accent-bright);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    min-block-size: 38px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
  }

  .hud-ping-btn:hover {
    background: var(--accent-bright);
    color: var(--bg-pure);
  }

  .hud-ping-readout {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--accent-green);
  }

  .hud-edge-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.9rem;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--border-subtle);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--text-muted);
  }

  .hud-edge-meta strong {
    color: var(--text-main);
    font-weight: 600;
  }

  /* MCP & Security Checklist Tabs */
  .mcp-endpoint-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
  }

  .mcp-endpoint-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.48rem 0.65rem;
    background: rgba(7, 9, 14, 0.8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
  }

  .mcp-endpoint-item code {
    color: var(--accent-cyan);
  }

  .mcp-endpoint-item span {
    color: var(--text-muted);
    font-size: 0.62rem;
  }

  .code-copy-box {
    background: #05070b;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: #cbd5e1;
  }

  .code-copy-box pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    flex: 1;
  }

  .sec-audit-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
  }

  .sec-audit-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.48rem 0.65rem;
    background: rgba(7, 9, 14, 0.8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
  }

  .sec-audit-row strong {
    color: var(--text-main);
    font-weight: 600;
  }

  .sec-audit-tag {
    color: var(--accent-green);
    font-size: 0.64rem;
  }

  /* Sections & Matrix Cards */
  .section-padding {
    padding: 6rem 0;
    position: relative;
  }

  .section-header {
    margin-bottom: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 1.5rem;
  }

  .section-tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-bright);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.55rem;
    display: block;
  }

  .section-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.65rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }

  .section-subtitle {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--text-muted);
    max-width: 44ch;
    text-align: right;
  }

  .matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.75rem;
  }

  .matrix-grid.bento-services,
  .matrix-grid.bento-workstations {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
  }

  .bento-span-7 { grid-column: span 7; }
  .bento-span-6 { grid-column: span 6; }
  .bento-span-5 { grid-column: span 5; }
  .bento-span-12 { grid-column: span 12; }

  .matrix-cell {
    perspective: 1200px;
    container: card / inline-size;
  }

  .reveal-delay-1 { transition-delay: 0.08s; }
  .reveal-delay-2 { transition-delay: 0.16s; }

  .interactive-card {
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    padding: 1.85rem;
    min-block-size: 360px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, background-color 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
    font-family: var(--font-body);
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.35),
      0 14px 36px rgba(0, 0, 0, 0.38);
  }

  .interactive-card.bento-flagship-card {
    border-block-start: 3px solid var(--accent-bright);
    background: linear-gradient(155deg var(--in-oklab), rgba(17, 24, 39, 0.9), rgba(245, 158, 11, 0.05));
  }

  .interactive-card.bento-cyan-card {
    border-block-start: 3px solid var(--accent-cyan);
    background: linear-gradient(155deg var(--in-oklab), rgba(15, 22, 36, 0.9), rgba(34, 211, 238, 0.04));
  }

  .interactive-card.bento-showcase-card {
    min-block-size: auto;
    border-block-start: 3px solid var(--accent-green);
    background: linear-gradient(145deg var(--in-oklab), rgba(13, 21, 32, 0.92), rgba(16, 185, 129, 0.05));
  }

  .interactive-card:hover {
    border-color: var(--accent-bright);
    background: var(--bg-card-hover);
    box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.4),
      0 24px 56px rgba(0, 0, 0, 0.52);
  }

  .interactive-card.bento-cyan-card:hover {
    border-color: var(--accent-cyan);
  }

  .interactive-card.bento-showcase-card:hover {
    border-color: var(--accent-green);
  }

  .interactive-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(380px circle at var(--m-x, 0px) var(--m-y, 0px), rgba(253, 224, 71, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
    z-index: 3;
  }

  .interactive-card:hover::before {
    opacity: 1;
  }

  .widget-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.85rem;
    margin-bottom: 1.15rem;
    border-bottom: 1px solid var(--border-subtle);
    transform: translateZ(20px);
    font-family: var(--font-mono);
  }

  .topbar-id {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }

  .status-led {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-bright);
  }

  .status-led.cyan { background: var(--accent-cyan); }
  .status-led.green { background: var(--accent-green); }

  .topbar-node {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--text-main);
    font-weight: 600;
  }

  .topbar-status {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--accent-bright);
    background: rgba(253, 224, 71, 0.08);
    border: 1px solid rgba(253, 224, 71, 0.25);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
  }

  .card-body {
    transform: translateZ(16px);
  }

  .bento-split-layout,
  .bento-showcase-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.15rem;
    align-items: start;
  }

  @container card (inline-size >= 520px) {
    .bento-split-layout {
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
      gap: 1.35rem;
    }
  }

  @container card (inline-size >= 680px) {
    .bento-showcase-grid {
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
      gap: 1.75rem;
      align-items: center;
    }
  }

  .bento-proof-list {
    list-style: none;
    background: rgba(7, 9, 14, 0.72);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
  }

  .bento-proof-list li:not(:last-child) {
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed var(--border-subtle);
  }

  .bento-proof-list strong {
    color: var(--accent-bright);
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.12rem;
  }

  .card-index {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--accent-bright);
    margin-bottom: 0.85rem;
    display: block;
    letter-spacing: 0.06em;
  }

  .card-heading {
    font-family: var(--font-display);
    font-size: 1.42rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.8rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .card-heading span {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--accent-bright);
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  .card-text {
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.62;
    margin-bottom: 1.2rem;
  }

  .card-spec-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.15rem;
  }

  .spec-pill {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: #cbd5e1;
    background: rgba(7, 9, 14, 0.85);
    border: 1px solid var(--border-subtle);
    padding: 0.24rem 0.52rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.04em;
  }

  .daedalus-callout {
    margin: 0.95rem 0 1.2rem;
    padding: 0.9rem 1rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.32);
    border-radius: 6px;
  }

  .daedalus-callout--showcase {
    margin: 0;
    padding: 1.25rem 1.35rem;
  }

  .daedalus-callout-title {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-green);
    font-weight: 700;
    margin-bottom: 0.45rem;
    letter-spacing: 0.04em;
  }

  .daedalus-callout-desc {
    font-size: 0.86rem;
    color: var(--text-main);
    line-height: 1.55;
    margin-bottom: 0.95rem;
  }

  .daedalus-callout-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: #030712;
    background: var(--accent-green);
    padding: 0.55rem 1rem;
    min-block-size: 40px;
    border-radius: var(--radius-sm);
    text-decoration: none;
  }

  .daedalus-callout-btn:hover {
    background: #34d399;
  }

  /* Workstation Verification Standard Bar */
  .workstation-standard-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
  }

  .ws-std-item {
    background: rgba(12, 16, 24, 0.9);
    border: 1px solid var(--border-subtle);
    border-inline-start: 3px solid var(--accent-bright);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
  }

  .ws-std-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--accent-bright);
    letter-spacing: 0.08em;
  }

  .ws-std-item strong {
    color: var(--text-main);
    font-weight: 600;
  }

  /* Verified Hardware & Benchmark Strip inside Cards */
  .metric-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    transform: translateZ(20px);
  }

  @container (max-width: 310px) {
    .metric-grid {
      grid-template-columns: 1fr;
    }
  }

  .metric {
    background: var(--bg-pure);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.58rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .metric-label {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
  }

  .metric-value {
    font-family: var(--font-mono);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
  }

  .metric-value small {
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-inline-start: 2px;
  }

  .metric-warn { color: var(--warning); }
  .metric-ok { color: var(--accent-green); }
  .metric-cyan { color: var(--accent-cyan); }

  .card-footer {
    margin-top: 1.15rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--border-subtle);
    transform: translateZ(12px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .footer-nodes {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .node-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(226, 232, 240, 0.16);
  }

  .node-dot.on { background: var(--accent-bright); }
  .node-dot.ok { background: var(--accent-green); }
  .node-dot.warn { background: var(--warning); }

  .node-cluster {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-inline-start: 0.35rem;
  }

  .sys-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    background: rgba(253, 224, 71, 0.06);
    border: 1px solid rgba(253, 224, 71, 0.25);
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-sm);
    color: var(--accent-bright);
    letter-spacing: 0.06em;
    text-decoration: none;
  }

  a.sys-badge:hover {
    background: var(--accent-bright);
    color: var(--bg-pure);
  }

  .badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-bright);
  }

  /* Tech Stack Monolith */
  .tool-monolith {
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    padding: 2.75rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  }

  .tool-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 1.5rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .tool-title {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
  }

  .tool-badges {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
  }

  .sys-tag-stable {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--accent-green);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
  }

  .tool-desc {
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.65;
    margin-bottom: 1.75rem;
    max-width: 72ch;
  }

  .pipeline-stages {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.75rem;
  }

  .pipe-step {
    background: rgba(7, 9, 14, 0.82);
    border: 1px solid var(--border-subtle);
    border-block-start: 2px solid var(--accent-bright);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.65rem;
    font-family: var(--font-mono);
  }

  .pipe-step-num {
    font-size: 0.58rem;
    color: var(--accent-bright);
    display: block;
    margin-bottom: 0.15rem;
  }

  .pipe-step-name {
    font-size: 0.68rem;
    color: var(--text-main);
    font-weight: 600;
  }

  .manifesto-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .manifesto-node {
    background: rgba(7, 9, 14, 0.65);
    border: 1px solid var(--border-subtle);
    padding: 1.5rem;
    border-radius: var(--radius-md);
  }

  .manifesto-node.warn {
    border-inline-start: 3px solid var(--warning);
  }

  .node-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--accent-bright);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .node-list {
    list-style: none;
  }

  .node-list li {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 0.65rem;
    padding-inline-start: 1.2rem;
    position: relative;
    line-height: 1.5;
  }

  .node-list li::before {
    content: '▸';
    color: var(--accent-bright);
    position: absolute;
    inset-inline-start: 0;
    font-family: var(--font-mono);
    font-weight: 700;
  }

  /* Rescue Visualizer */
  .sys-visualizer.terminal-mode {
    background: #0c0c0c;
    border: 1px solid #333;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 2rem;
    font-family: var(--font-mono);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    position: relative;
  }

  .terminal-header {
    background: #000;
    color: #fff;
    min-block-size: 32px;
    font-size: 12px;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
  }

  .terminal-header-title {
    display: flex;
    align-items: center;
    padding-inline-start: 10px;
    gap: 8px;
  }

  .terminal-header-title svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
  }

  .terminal-controls {
    display: flex;
    height: 32px;
  }

  .win-btn {
    width: 46px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: default;
    transition: background-color 0.1s;
  }

  .win-btn:hover { background-color: #333; }
  .win-btn.close:hover { background-color: #e81123; color: #fff; }
  .win-btn svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1; fill: none; }

  .terminal-body {
    --scrollbar-thumb: #4d4d4d;
    --scrollbar-track: #0c0c0c;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
  }

  .terminal-log {
    padding: 8px 12px;
    color: #ccc;
    font-size: 0.85rem;
    line-height: 1.35;
    min-height: 120px;
  }

  .terminal-log p { margin-bottom: 0.2rem; }
  .log-critical { color: #fde047; }
  .log-success { color: #10b981; }

  .ps-progress {
    background: #012456;
    color: #0eeaff;
    padding: 1rem 1.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    display: none;
  }

  .ps-progress.active {
    display: block;
    background: #2b88d8;
    color: #fff;
  }

  .ps-title { margin-bottom: 0.2rem; }
  .ps-stage { margin-bottom: 0.2rem; padding-inline-start: 1.5rem; }
  .ps-bar { padding-inline-start: 1.5rem; letter-spacing: 1px; color: #fde047; }

  .memory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22px, 1fr));
    gap: 4px;
    padding: 1.5rem;
  }

  .memory-node {
    height: 22px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #475569;
    transition: color 0.2s;
  }

  .memory-node::after { content: '00'; }
  .memory-node.safe { color: #10b981; }
  .memory-node.safe::after { content: 'FF'; }
  .memory-node.corrupt { background: #f97316; color: #000; font-weight: 700; }
  .memory-node.corrupt::after { content: 'XX'; }
  .memory-node.scan { background: #fde047; color: #000; transform: scale(1.1); z-index: 2; font-weight: 700; }
  .memory-node.scan::after { content: '>>'; }

  .terminal-legend {
    padding: 1rem 1.5rem;
    border-top: 1px dashed #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    font-size: 0.75rem;
    color: #94a3b8;
    flex-wrap: wrap;
  }

  .legend-items-wrap { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
  .legend-item { display: inline-flex; align-items: center; gap: 0.45rem; }
  .terminal-legend .node { width: 12px; height: 12px; border-radius: 2px; }
  .terminal-legend .node.safe { background: #10b981; }
  .terminal-legend .node.corrupt { background: #f97316; }
  .terminal-legend .node.scan { background: #fde047; }

  .wmdt-screen {
    position: absolute;
    inset: 0;
    background: #0000aa;
    color: #fff;
    font-family: var(--font-mono);
    z-index: 10;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .wmdt-screen.active { opacity: 1; pointer-events: auto; }
  .wmdt-header { background: #aaa; color: #000; text-align: center; padding: 2px 0; font-size: 0.85rem; }
  .wmdt-body { padding: 1.5rem; font-size: 0.85rem; line-height: 1.4; }
  .wmdt-yellow { color: #ffff55; }
  .wmdt-progress-bar { background: #aaa; height: 14px; width: 0%; margin-top: 6px; transition: width 0.1s linear; }

  .telemetry-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
  }

  .counter-housing {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(7, 9, 14, 0.82);
    border: 1px solid var(--border-subtle);
    padding: 0.75rem 1.15rem;
    border-radius: var(--radius-sm);
  }

  .counter-housing span {
    color: var(--accent-bright);
    font-weight: 700;
  }

  /* Case Studies Proof Accordion (#case-studies) */
  .case-studies-header-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
  }

  .accordion-toggle-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-inline-size: 44px;
    min-block-size: 38px;
    padding: 0.45rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-bright);
    background: rgba(253, 224, 71, 0.08);
    border: 1px solid rgba(253, 224, 71, 0.35);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  }

  .accordion-toggle-all:hover,
  .accordion-toggle-all:focus-visible {
    background: var(--accent-bright);
    color: var(--bg-pure);
    border-color: var(--accent-bright);
  }

  [command="--toggle-all"][aria-expanded="true"] .expand,
  [command="--toggle-all"][aria-expanded="false"] .collapse {
    display: none;
  }

  .accordion-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .cs-item {
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
  }

  .cs-item[open] {
    border-color: rgba(253, 224, 71, 0.42);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
  }

  .cs-summary {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1.15rem 1.35rem;
    cursor: pointer;
    background: rgba(15, 21, 34, 0.55);
    transition: background-color 0.2s;
  }

  .cs-summary::-webkit-details-marker {
    display: none;
  }

  .cs-summary:hover,
  .cs-summary:focus-visible {
    background: rgba(21, 29, 46, 0.85);
  }

  .cs-summary::before {
    content: "";
    inline-size: 1.05em;
    block-size: 1.05em;
    flex-shrink: 0;
    background-color: var(--accent-bright);
    mask: url("chevron-down.svg") no-repeat center / contain;
    -webkit-mask: url("chevron-down.svg") no-repeat center / contain;
    rotate: -90deg;
  }

  .cs-item[open] > .cs-summary::before {
    rotate: 0deg;
  }

  @media (prefers-reduced-motion: no-preference) {
    .cs-summary::before {
      transition: rotate 0.2s ease;
    }
  }

  .cs-code {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .cs-title {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.015em;
    flex: 1 1 280px;
  }

  .cs-outcome-pill {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--accent-green);
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.34);
    border-radius: var(--radius-sm);
    padding: 0.24rem 0.58rem;
    white-space: nowrap;
  }

  .cs-item::details-content {
    interpolate-size: allow-keywords;
    overflow: clip;
    contain: layout;
  }

  .cs-item:not([open])::details-content {
    block-size: 0;
  }

  @media (prefers-reduced-motion: no-preference) {
    .cs-item::details-content {
      transition: block-size, content-visibility;
      transition-duration: 0.28s;
      transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
      transition-behavior: allow-discrete;
    }
  }

  .cs-body {
    padding: 1.25rem 1.35rem 1.35rem;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

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

  .cs-block {
    background: rgba(7, 9, 14, 0.72);
    border: 1px solid var(--border-subtle);
    border-inline-start: 3px solid var(--border-glow);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1rem;
  }

  .cs-block.cs-block-outcome {
    border-inline-start-color: var(--accent-green);
    background: rgba(16, 185, 129, 0.05);
  }

  .cs-block-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--accent-bright);
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
  }

  .cs-block.cs-block-outcome .cs-block-label {
    color: var(--accent-green);
  }

  .cs-block p {
    font-size: 0.88rem;
    color: var(--text-main);
    line-height: 1.55;
    margin: 0;
  }

  .cs-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--border-subtle);
  }

  .cs-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  /* Track Record / Dossier (#about) */
  .dossier-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 2.5rem;
    align-items: start;
  }

  .prose-block {
    max-width: 65ch;
    font-size: 1.04rem;
    line-height: 1.72;
    color: var(--text-main);
  }

  .prose-block p {
    margin-bottom: 1.35rem;
  }

  .competency-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.75rem;
  }

  .comp-card {
    background: rgba(15, 21, 34, 0.65);
    border: 1px solid var(--border-subtle);
    border-inline-start: 3px solid var(--accent-bright);
    border-radius: var(--radius-sm);
    padding: 0.95rem 1rem;
  }

  .comp-card h3 {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: #fff;
    margin-bottom: 0.35rem;
    letter-spacing: 0.04em;
  }

  .comp-card p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.48;
    margin: 0;
  }

  .timeline-stack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-inline-start: 1.65rem;
  }

  .timeline-stack::before {
    content: "";
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: 0.38rem;
    inline-size: 2px;
    background: linear-gradient(180deg var(--in-oklab), var(--accent-bright), rgba(34, 211, 238, 0.35), transparent);
  }

  .timeline-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    padding: 1.35rem 1.5rem;
    transition: border-color 0.25s;
  }

  .timeline-card::before {
    content: "";
    position: absolute;
    inset-block-start: 1.5rem;
    inset-inline-start: -1.62rem;
    inline-size: 10px;
    block-size: 10px;
    border-radius: 50%;
    background: var(--accent-bright);
    border: 2px solid var(--bg-pure);
    box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.28);
  }

  .timeline-card:hover { border-color: var(--accent-bright); }

  .timeline-era {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--accent-bright);
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
    display: block;
  }

  .timeline-role {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.45rem;
  }

  .timeline-desc {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
  }

  /* Contact Channels (#contact) */
  .dispatch-console-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .dispatch-card {
    background: var(--bg-card);
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-md);
    padding: 2.1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.35rem;
    position: relative;
    overflow: hidden;
  }

  .dispatch-card.primary-channel {
    border-color: rgba(253, 224, 71, 0.32);
    background: linear-gradient(155deg var(--in-oklab), rgba(15, 21, 34, 0.88), rgba(253, 224, 71, 0.04));
  }

  .dispatch-card.support-channel {
    border-color: rgba(34, 211, 238, 0.3);
    background: linear-gradient(155deg var(--in-oklab), rgba(15, 21, 34, 0.88), rgba(34, 211, 238, 0.04));
  }

  .dispatch-channel-tag {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    color: var(--accent-bright);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
    display: block;
  }

  .dispatch-card.support-channel .dispatch-channel-tag {
    color: var(--accent-cyan);
  }

  .dispatch-heading {
    font-family: var(--font-display);
    font-size: 1.48rem;
    color: #fff;
    margin-bottom: 0.65rem;
  }

  /* Scroll Entry Reveal */
  .reveal-element {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .reveal-element.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal-element {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      @keyframes sysBentoReveal {
        from {
          opacity: 0;
          transform: translate3d(0, 18px, 0);
        }
        to {
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
      }

      .reveal-element {
        opacity: 1;
        transform: none;
        transition: none;
        animation: sysBentoReveal auto linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
      }
    }
  }

  .sys-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 3.25rem 0;
    background: rgba(5, 7, 11, 0.96);
  }

  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
  }

  .footer-loc {
    color: rgba(255, 255, 255, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  #mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-main);
    cursor: pointer;
    min-inline-size: 44px;
    min-block-size: 44px;
  }

  /* Clickable Node Inspector (<dialog>) */
  .interactive-card.is-inspectable {
    cursor: pointer;
  }

  .interactive-card:focus-within {
    border-color: var(--accent-cyan);
  }

  .interactive-card :where(a, button, input, select, textarea) {
    position: relative;
    z-index: 4;
  }

  .card-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-inline-start: auto;
  }

  .node-inspect-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-inline-size: 44px;
    min-block-size: 32px;
    padding: 0.35rem 0.7rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.38);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  }

  .node-inspect-btn:hover,
  .node-inspect-btn:focus-visible {
    background: var(--accent-cyan);
    color: #030712;
    border-color: var(--accent-cyan);
  }

  dialog.node-inspector {
    margin: auto;
    width: min(94vw, 820px);
    max-height: 88vh;
    background: rgba(9, 13, 22, 0.97);
    color: var(--text-main);
    border: 1px solid rgba(34, 211, 238, 0.38);
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 0;
    overflow: hidden;
    transition-property: opacity, transform, display, overlay;
    transition-duration: 0.24s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transition-behavior: allow-discrete;
  }

  @media (prefers-reduced-motion: no-preference) {
    dialog.node-inspector { transform: scale(0.95) translateY(10px); }
  }

  dialog.node-inspector:modal { overscroll-behavior: contain; }

  dialog.node-inspector::backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
    background-color: rgba(3, 5, 10, 0);
    backdrop-filter: blur(6px);
    transition-property: background-color, display, overlay;
    transition-duration: 0.24s;
    transition-behavior: allow-discrete;
  }

  dialog.node-inspector[open]:where(:not([data-closing])) {
    display: flex;
    flex-direction: column;
    opacity: 1;
    @starting-style { opacity: 0; }
    @media (prefers-reduced-motion: no-preference) {
      transform: scale(1) translateY(0);
      @starting-style { transform: scale(0.95) translateY(10px); }
    }
    &::backdrop {
      background-color: rgba(3, 5, 10, 0.78);
      @starting-style { background-color: rgba(3, 5, 10, 0); }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    dialog.node-inspector,
    dialog.node-inspector::backdrop {
      transition-duration: 0.08s;
    }
  }

  .inspector-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(15, 23, 42, 0.72);
  }

  .inspector-head-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
  }

  .inspector-node-code {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 0.08em;
  }

  .inspector-status-tag {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--accent-green);
    background: rgba(16, 185, 129, 0.14);
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 0.15rem 0.48rem;
    border-radius: 4px;
  }

  .inspector-title {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    font-weight: 700;
    color: #fff;
    margin: 0;
  }

  .inspector-close-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-glow);
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.42rem 0.75rem;
    min-block-size: 36px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
  }

  .inspector-close-btn:hover,
  .inspector-close-btn:focus-visible {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
  }

  .inspector-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.7rem 1.35rem;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(5, 8, 15, 0.72);
  }

  .inspector-switch-pill {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    color: var(--text-muted);
    background: rgba(15, 21, 34, 0.8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.32rem 0.6rem;
    min-block-size: 30px;
  }

  .inspector-switch-pill:hover,
  .inspector-switch-pill:focus-visible {
    color: #fff;
    border-color: var(--accent-cyan);
  }

  .inspector-switch-pill[aria-current="true"] {
    background: rgba(34, 211, 238, 0.16);
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    font-weight: 700;
  }

  .inspector-body {
    padding: 1.25rem 1.35rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
  }

  .inspector-summary {
    font-size: 0.94rem;
    color: var(--text-main);
    line-height: 1.6;
  }

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

  @media (max-width: 640px) {
    .inspector-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  .inspector-kpi-cell {
    background: rgba(5, 8, 15, 0.85);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.75rem;
  }

  .inspector-kpi-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    margin-bottom: 0.22rem;
  }

  .inspector-kpi-val {
    font-family: var(--font-mono);
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--accent-green);
  }

  .inspector-specs-dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
  }

  @media (max-width: 640px) {
    .inspector-specs-dl { grid-template-columns: 1fr; }
  }

  .inspector-spec-card {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid var(--border-subtle);
    border-inline-start: 3px solid var(--accent-cyan);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
  }

  .inspector-spec-card dt {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.2rem;
  }

  .inspector-spec-card dd {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-main);
    font-family: var(--font-mono);
  }

  .inspector-vlan-wrap { overflow-x: auto; }

  .inspector-vlan-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.72rem;
  }

  .inspector-vlan-table caption {
    text-align: left;
    font-size: 0.66rem;
    color: var(--accent-bright);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.45rem;
  }

  .inspector-vlan-table th,
  .inspector-vlan-table td {
    border: 1px solid var(--border-subtle);
    padding: 0.45rem 0.6rem;
    text-align: left;
  }

  .inspector-vlan-table th {
    background: rgba(34, 211, 238, 0.08);
    color: var(--accent-cyan);
  }

  .inspector-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.35rem;
    border-top: 1px solid var(--border-subtle);
    background: rgba(15, 23, 42, 0.72);
  }

  .inspector-nav-pair {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .inspector-index-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
  }

  .inspector-nav-btn {
    background: rgba(15, 21, 34, 0.9);
    border: 1px solid var(--border-glow);
    color: var(--text-main);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    padding: 0.42rem 0.75rem;
    min-block-size: 36px;
    border-radius: var(--radius-sm);
  }

  .inspector-nav-btn:hover,
  .inspector-nav-btn:focus-visible {
    border-color: var(--accent-bright);
    color: var(--accent-bright);
  }

  .inspector-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--accent-bright);
    color: var(--bg-pure);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.48rem 0.95rem;
    min-block-size: 36px;
    border-radius: var(--radius-sm);
    text-decoration: none;
  }

  .inspector-cta-link:hover,
  .inspector-cta-link:focus-visible {
    background: var(--accent-cyan);
    color: #030712;
  }

  /* Responsive Breakpoints */
  @media (max-width: 1024px) {
    .hero-grid,
    .dossier-grid,
    .dispatch-console-grid,
    .workstation-standard-bar,
    .cs-triage-grid {
      grid-template-columns: 1fr;
    }
    .matrix-grid.bento-services,
    .matrix-grid.bento-workstations {
      grid-template-columns: 1fr;
    }
    .bento-span-7,
    .bento-span-6,
    .bento-span-5,
    .bento-span-12 {
      grid-column: 1 / -1;
    }
    .case-studies-header-actions {
      align-items: flex-start;
    }
    .section-subtitle { text-align: left; }
    .pipeline-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 768px) {
    #mobile-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      z-index: 101;
    }
    .nav-links {
      display: none;
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: 0;
      width: 100%;
      background: var(--bg-pure);
      flex-direction: column;
      padding: 1.75rem;
      border-bottom: 1px solid var(--border-glow);
      gap: 1.1rem;
      align-items: flex-start;
      z-index: 100;
    }
    .nav-links.active,
    .nav-links.open,
    #menu-box.active,
    #menu-box.open {
      display: flex !important;
    }

    .hero-viewport { padding: 5.5rem 0 3.25rem; }
    .hero-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .competency-grid { grid-template-columns: 1fr; }
    .pipeline-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section-padding { padding: 4.5rem 0; }
    .tool-monolith { padding: 1.75rem; }
    .telemetry-row { flex-direction: column; align-items: stretch; width: 100%; }
    .btn-primitive { width: 100%; }
    .matrix-grid { grid-template-columns: 1fr; }
    .interactive-card { padding: 1.5rem; }
    .memory-grid { padding: 1rem; gap: 2px; }
    .terminal-log { padding: 6px; font-size: 0.78rem; overflow-wrap: break-word; }
    .ps-progress { padding: 0.75rem 1rem; font-size: 0.75rem; }
    .terminal-legend { padding: 0.75rem 1rem; gap: 1rem; }
  }

  @media (max-width: 480px) {
    .container { padding: 0 1rem; }
    .section-padding { padding: 3.5rem 0; }
    .interactive-card { padding: 1.25rem; min-block-size: 300px; }
    .tool-monolith, .dispatch-card { padding: 1.25rem; }
    .cs-summary { padding: 0.95rem 1rem; }
    .cs-body { padding: 0 1rem 1rem; }
    .memory-grid { padding: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(18px, 1fr)); }
    .memory-node { height: 18px; font-size: 0.6rem; }
    .terminal-log { font-size: 0.72rem; }
    .ps-progress { padding: 0.5rem; font-size: 0.7rem; }
    .ps-stage, .ps-bar { padding-inline-start: 0.5rem; }
    .terminal-legend { padding: 0.5rem; gap: 0.5rem; font-size: 0.65rem; }
  }

  @media (forced-colors: active) {
    .interactive-card,
    .hero-hud-panel,
    .dispatch-card,
    .timeline-card,
    .cs-item,
    .cs-block,
    .ws-std-item,
    .accordion-toggle-all,
    dialog.node-inspector,
    .inspector-spec-card,
    .inspector-vlan-table th,
    .inspector-vlan-table td,
    .inspector-kpi-cell,
    .node-inspect-btn,
    .inspector-switch-pill,
    .inspector-nav-btn,
    .inspector-close-btn {
      border: 1px solid CanvasText;
    }
    .hud-tab[aria-selected="true"]::after {
      border-block-end-color: Highlight;
    }
    .inspector-switch-pill[aria-current="true"] {
      border: 2px solid Highlight;
    }
  }
}