@layer components {
  .tool-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #c0e4ff40;
    border-top-color: #dbf2ff66;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(135deg, #d6ebff0a, transparent), #0d1b29b3;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    box-shadow:
      inset 0 1px 0 #ffffff0a,
      0 24px 50px #0003;
  }
  .tool-preview {
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 28px;
    border: 1px solid #557e9d55;
    border-radius: 8px;
    overflow: hidden;
    background: #07111bb8;
  }
  .tool-preview-bar,
  .tool-preview-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #15293c70;
    color: #a3bdcf;
    font: 9px/1.5 var(--mono);
    letter-spacing: 0.04em;
  }
  .tool-preview-footer {
    background: none;
    border-top: 1px solid #37526955;
    font-size: 8px;
  }
  .tool-diagram {
    flex: 1;
    padding: 32px 28px;
    background-image:
      linear-gradient(#43d8f209 1px, transparent 1px),
      linear-gradient(90deg, #43d8f209 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .tool-diagram-axis {
    display: block;
    margin-bottom: 18px;
    color: #8cc7db;
    font: 9px var(--mono);
    letter-spacing: 0.08em;
  }
  .tool-sheet {
    display: grid;
    grid-template-columns: 1fr 1fr 0.35fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
    padding: 5px;
    height: 180px;
    border: 1px solid #6cd8f280;
    background: #0d1c2c;
  }
  .tool-sheet i {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #43d8f270;
    background: #19607b40;
    font: 12px var(--mono);
    color: #8fe9fa;
  }
  .tool-sheet i:nth-child(3) {
    grid-column: 1;
  }
  .tool-sheet span {
    grid-column: 3;
    grid-row: 1/3;
    writing-mode: vertical-rl;
    text-align: center;
    align-self: center;
    color: #83a1b7;
    font: 8px var(--mono);
    letter-spacing: 0.2em;
  }
  .tool-bar {
    display: flex;
    margin-top: 24px;
    gap: 4px;
    height: 28px;
    color: #93dcec;
    font: 9px var(--mono);
  }
  .tool-bar i {
    display: grid;
    place-items: center;
    flex: 2;
    border: 1px solid #43d8f270;
    background: #13435c90;
    font-style: normal;
  }
  .tool-bar i:nth-child(3) {
    flex: 1;
  }
  .tool-bar span {
    padding-left: 12px;
    align-self: center;
  }
  .tool-card-content {
    align-self: center;
    padding: 38px 38px 38px 14px;
  }
  .tool-card h3 {
    margin: 18px 0;
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: -0.04em;
    line-height: 1.15;
  }
  .tool-card-content > p:not(.micro-label) {
    color: #adbdcc;
    font-size: 14px;
    line-height: 1.8;
  }
  .tool-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style: none;
    padding: 0;
    margin: 24px 0 30px;
    gap: 12px;
    font: 10px/1.7 var(--mono);
    color: #bdd2df;
  }
  .tool-features li::before {
    content: "+ ";
    color: var(--cyan);
  }
  .tool-card-content .tool-local-note {
    margin-top: 14px;
    font-size: 11px;
  }
}
@layer responsive {
  @media (max-width: 1000px) {
    .site-header nav {
      gap: 18px;
    }
    .site-header nav a {
      font-size: 10px;
    }
    .header-inner {
      gap: 16px;
    }
    .brand {
      font-size: 13px;
      letter-spacing: 0.6px;
    }
  }
  @media (max-width: 800px) {
    .tool-card {
      grid-template-columns: 1fr;
    }
    .tool-preview {
      margin: 24px 24px 0;
    }
    .tool-card-content {
      padding: 28px;
    }
    .tool-diagram {
      padding: 24px;
    }
    .tool-sheet {
      height: 160px;
    }
  }
  @media (min-width: 651px) and (max-width: 800px) {
    .site-header nav {
      gap: 12px;
    }
    .brand-mark {
      width: 36px;
      height: 36px;
    }
    .brand {
      gap: 8px;
      font-size: 11px;
    }
    .site-header nav .nav-contact {
      padding-inline: 10px;
      gap: 12px;
    }
  }
  @media (max-width: 420px) {
    .tool-preview {
      margin: 18px 18px 0;
    }
    .tool-card-content {
      padding: 24px 20px;
    }
    .tool-features {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .tool-preview-bar,
    .tool-preview-footer {
      padding: 12px;
      font-size: 7px;
    }
    .tool-card .button {
      padding-inline: 16px;
      gap: 16px;
      font-size: 10px;
    }
  }
}