.tools-library {
  background:
    radial-gradient(circle at 7% 17%, rgba(31, 203, 126, .13), transparent 25%),
    radial-gradient(circle at 92% 38%, rgba(42, 117, 255, .09), transparent 24%),
    #030b0f;
}

.tools-library .tools-hero {
  max-width: none;
  padding-block: 92px 64px;
}

.tools-library .tools-hero h1 { max-width: 920px; }
.tools-library .resource-page-content { padding-bottom: 110px; }

.tools-library .tool-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
}

.tools-library .tools-heading {
  display: block;
}

.tools-library .tool-card {
  min-height: 650px;
  padding: 0 26px 26px;
  border-color: rgba(255, 255, 255, .11);
  border-radius: 20px;
  background: #0a151a;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
}

.tools-library .tool-card::before { height: 5px; }
.tools-library .tool-card-defi::before { background: linear-gradient(90deg, #30da88, #0b7f58); }
.tools-library .tool-card-leverage::before { background: linear-gradient(90deg, #65b1ff, #285fee); }
.tools-library .tool-card-dashboard::before { background: linear-gradient(90deg, #ffc45e, #e98225); }
.tools-library .tool-card:hover { transform: translateY(-7px); }

.tools-library .tool-card-top {
  margin: 0 -26px;
  padding: 19px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.tools-library .tool-icon {
  position: absolute;
  top: 54px;
  right: 21px;
  width: 46px;
  height: 46px;
  margin: 0;
  border-radius: 12px;
}

.tools-library .tool-preview {
  position: relative;
  height: 142px;
  margin: 24px 0 25px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(0, 0, 0, .2);
}

.defi-preview { display: flex; flex-wrap: wrap; align-content: center; gap: 8px; padding: 22px; }
.defi-preview span { padding: 6px 10px; border: 1px solid rgba(48, 218, 136, .24); border-radius: 999px; color: #9db9ad; font-size: 10px; }
.defi-preview strong { width: 100%; margin-top: 8px; color: #30da88; font-size: 16px; }

.leverage-preview { display: flex; align-items: end; gap: 9px; padding: 22px 22px 38px; }
.leverage-preview i { width: 17%; border-radius: 4px 4px 0 0; background: linear-gradient(#65b1ff, #285fee); opacity: .82; }
.leverage-preview i:nth-child(1) { height: 31%; }
.leverage-preview i:nth-child(2) { height: 48%; }
.leverage-preview i:nth-child(3) { height: 67%; }
.leverage-preview i:nth-child(4) { height: 89%; }
.leverage-preview strong { position: absolute; left: 22px; bottom: 12px; color: #8ec7ff; font-size: 11px; }

.dashboard-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 16px; }
.dashboard-preview span { display: flex; flex-direction: column; justify-content: center; padding: 10px; border: 1px solid rgba(255, 196, 94, .18); border-radius: 9px; color: #839098; font-size: 9px; }
.dashboard-preview b { color: #ffc45e; font-size: 13px; }

.tools-library .tool-category { margin-top: 0; }
.tools-library .tool-card h3 { font-size: 25px; }
.tools-library .tool-card h3 + p { min-height: 94px; }
.tools-library .tool-card ul { margin-bottom: 25px; }

.tools-library .tool-launch {
  min-height: 54px;
  border: 0;
  border-radius: 11px;
  background: #15975e;
  box-shadow: 0 10px 24px rgba(21, 151, 94, .2);
  color: #fff;
  font-size: 14px;
}

.tools-library .tool-card-leverage .tool-launch { background: #246fd1; box-shadow: 0 10px 24px rgba(36, 111, 209, .2); }
.tools-library .tool-card-dashboard .tool-launch { background: #b7671d; box-shadow: 0 10px 24px rgba(183, 103, 29, .2); }
.tools-library .tool-launch:hover { filter: brightness(1.14); }

@media (max-width: 1080px) {
  .tools-library .tool-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-library .tool-card { min-height: 620px; }
}

@media (max-width: 760px) {
  .tools-library .tool-card-grid { grid-template-columns: 1fr; }
  .tools-library .tool-card { min-height: 0; }
  .tools-library .tool-card h3 + p { min-height: 0; }
}

@media (max-width: 560px) {
  .tools-library .tools-hero { padding-block: 58px 48px; }
  .tools-library .tool-card { padding: 0 21px 22px; }
  .tools-library .tool-card-top { margin-inline: -21px; padding-inline: 21px; }
}