.popular-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:24px auto 0}.popular-tools span{padding:8px 2px;color:var(--muted);font-size:12px;font-weight:700}.popular-tools a{padding:8px 11px;color:var(--green);font-size:12px;font-weight:700;text-decoration:none;background:#edf7e9;border:1px solid #d4e9cb;border-radius:20px}.popular-tools a:hover{background:var(--mint)}

.hero-tools {
  width: min(1080px, 100%);
  margin: 30px auto 34px;
  padding: 18px;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 55px rgba(32, 68, 55, .1);
}

.hero-tools-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 12px;
}

.hero-tools-heading h2 { margin: 0; font-size: 16px; }
.hero-tools-heading span { color: var(--green); font-size: 12px; font-weight: 700; }
.hero-tool-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hero-tool-grid a { display: flex; justify-content: space-between; gap: 6px; padding: 8px 9px; overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 600; text-decoration: none; white-space: nowrap; background: #f5f7f3; border-radius: 7px; }
.hero-tool-grid a:hover { color: var(--green); background: #eaf5e6; }
.hero-tool-grid b { color: var(--green); }

.converter-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.converter-group {
  padding: 20px;
  background: var(--paper);
  border: 1px solid #e1ded5;
  border-radius: 18px;
}

.group-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 17px;
  border-bottom: 1px solid #e9e6dd;
}

.group-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--green);
  font: 800 11px Manrope, sans-serif;
  background: var(--blue);
  border-radius: 11px;
}

.group-heading p {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.group-heading h3 {
  margin: 0;
  font-size: 18px;
}

.group-heading small {
  margin-left: auto;
  padding: 5px 9px;
  color: var(--muted);
  background: #f0eee7;
  border-radius: 20px;
}

.group-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding-top: 12px;
}

.converter-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 9px;
  transition: color .18s, background .18s;
}

.converter-link b {
  color: var(--green);
  font-size: 17px;
  transition: transform .18s;
}

.converter-link:hover {
  color: var(--green);
  background: #eef6eb;
}

.converter-link:hover b {
  transform: translateX(3px);
}

@media (max-width: 800px) {
  .hero-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .converter-directory { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .hero-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-tools { padding: 12px; }
  .group-links { grid-template-columns: 1fr; }
}