.home-tools {
  background: #eef4ec;
  border-block: 1px solid var(--line);
  scroll-margin-top: 68px;
}

.home-tools__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 34px;
}

.home-tools__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--green);
  font: 700 12px/1.5 "JetBrains Mono", monospace;
  letter-spacing: .1em;
}

.home-tools__eyebrow > span {
  width: 8px;
  height: 8px;
  background: var(--green);
}

.home-tools h2 {
  margin: 0;
  color: var(--ink);
  font: 600 clamp(34px, 4vw, 50px)/1.12 "Sora", sans-serif;
  letter-spacing: -.04em;
}

.home-tools__intro {
  margin: 18px 0 0;
  color: #4b6258;
  font-size: 17px;
}

.home-tools__all {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  margin-bottom: 2px;
  border-bottom: 1px solid #9bb3a3;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.home-tools__all:hover { color: var(--green); border-color: var(--green); }
.home-tools__all > span { font-size: 21px; }
.home-tools__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.home-tool {
  min-width: 0;
  border: 1px solid #cfdbd0;
  border-radius: 16px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.home-tool:hover {
  border-color: #6c9f80;
  box-shadow: 0 12px 30px rgba(5, 46, 36, .07);
  transform: translateY(-3px);
}

.home-tool__link { display: flex; height: 100%; flex-direction: column; border-radius: inherit; color: var(--ink); text-decoration: none; }
.home-tool__link:focus-visible, .home-tools__all:focus-visible { outline: 3px solid var(--green); outline-offset: 5px; }

.home-tool__visual {
  position: relative;
  display: grid;
  height: 224px;
  flex-shrink: 0;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid #e0e7dc;
  border-radius: 15px 15px 0 0;
}

.home-tool__visual--overlap {
  background-color: #e7f0df;
  background-image: radial-gradient(#bdcfb8 .75px, transparent .75px);
  background-size: 16px 16px;
}

.home-tool__visual--audit {
  background-color: #e5eeea;
  background-image: linear-gradient(#d7e3dc 1px, transparent 1px), linear-gradient(90deg, #d7e3dc 1px, transparent 1px);
  background-size: 28px 28px;
}

.home-tool__visual-label { position: absolute; top: 18px; left: 24px; color: #4f6a57; font: 700 10px/1.5 "JetBrains Mono", monospace; letter-spacing: .09em; }
.home-tool__preview-note { position: absolute; bottom: 9px; right: 14px; color: #567060; font-size: 10px; }
.home-tool__body { display: flex; flex: 1; flex-direction: column; padding: 26px 30px 22px; }
.home-tool h3 { margin: 0 0 12px; font: 600 25px/1.3 "Sora", sans-serif; letter-spacing: -.035em; }
.home-tool__body > p { max-width: 470px; margin: 0 0 25px; color: #4b6258; font-size: 16px; line-height: 1.65; }
.home-tool__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 18px; border-top: 1px solid #e5ebe2; font-size: 14px; font-weight: 700; }
.home-tool__cta > span { display: grid; width: 34px; height: 34px; flex-shrink: 0; place-items: center; border-radius: 50%; background: #edf4e7; font-size: 20px; font-weight: 400; transition: background .2s ease, transform .2s ease; }
.home-tool:hover .home-tool__cta > span { background: var(--lime); transform: translate(2px, -2px); }

.overlap-preview { position: relative; width: 310px; height: 172px; margin-top: 12px; }
.overlap-preview__page { position: absolute; width: 143px; height: 152px; padding: 15px; border: 1px solid #b9cbb4; border-radius: 8px; background: #fff; box-shadow: 0 7px 14px rgba(5, 46, 36, .07); }
.overlap-preview__page--a { top: 4px; left: 22px; transform: rotate(-7deg); }
.overlap-preview__page--b { top: 12px; right: 19px; transform: rotate(6deg); }
.overlap-preview__page > span { display: block; margin-bottom: 13px; color: #61705f; font: 700 10px/1 "JetBrains Mono", monospace; letter-spacing: .05em; }
.overlap-preview__page b, .overlap-preview__page i { display: block; height: 4px; margin-bottom: 6px; border-radius: 2px; background: #dce5d9; }
.overlap-preview__page b { width: 72%; height: 6px; margin-bottom: 10px; background: #7a9674; }
.overlap-preview__page > i:last-child { width: 68%; }
.overlap-preview__highlight { margin: 7px -5px; padding: 7px 5px 1px; border: 1px solid #9ed476; border-radius: 4px; background: #e5f8cb; }
.overlap-preview__highlight i { background: #91ba71; }
.overlap-preview__highlight i:last-child { width: 76%; }
.overlap-preview__match { position: absolute; bottom: 2px; left: 50%; display: flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid #284e35; border-radius: 6px; background: var(--ink); color: #d5fbb1; font-size: 11px; font-weight: 700; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 4px 10px rgba(5, 46, 36, .12); }
.overlap-preview__match svg { width: 18px; height: 18px; }

.audit-preview { width: 310px; margin-top: 15px; overflow: hidden; border: 1px solid #c0d1c8; border-radius: 9px; background: #fff; box-shadow: 0 8px 20px rgba(5, 46, 36, .08); transform: rotate(-2deg); }
.audit-preview__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-bottom: 1px solid #dde7e0; background: #f7faf7; }
.audit-preview__bar > span { display: flex; gap: 4px; }
.audit-preview__bar i { width: 5px; height: 5px; border-radius: 50%; background: #bdcfc1; }
.audit-preview__bar b { color: #567060; font: 500 10px/1.5 "Manrope", sans-serif; }
.audit-preview__bar > svg { width: 15px; height: 15px; color: var(--green); }
.audit-preview__row { display: flex; align-items: center; gap: 9px; margin: 0 14px; padding: 10px 0; color: #3d594a; font-size: 11px; font-weight: 600; }
.audit-preview__row + .audit-preview__row { border-top: 1px solid #edf1eb; }
.audit-preview__icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 5px; background: #edf5e7; color: #3b6948; }
.audit-preview__icon svg { width: 17px; height: 17px; }
.audit-preview__row > i { width: 33px; height: 4px; margin-left: auto; border-radius: 3px; background: #d9e7da; }
.audit-preview__row > b { margin-left: 5px; color: #6d8c78; font-weight: 400; }

@media (max-width: 800px) {
  .home-tools__header { align-items: flex-start; flex-direction: column; gap: 18px; }
  .home-tools__grid { gap: 18px; }
  .home-tool__body { padding: 23px 22px 20px; }
  .home-tool h3 { font-size: 22px; }
  .overlap-preview { transform: scale(.9); }
  .audit-preview { width: min(310px, calc(100% - 42px)); }
}

@media (max-width: 600px) {
  .home-tools { scroll-margin-top: 62px; }
  .home-tools__header { margin-bottom: 26px; }
  .home-tools h2 { font-size: clamp(30px, 8.5vw, 40px); }
  .home-tools__intro { font-size: 16px; }
  .home-tools__grid { grid-template-columns: 1fr; gap: 22px; }
  .home-tool__visual { height: 210px; }
  .home-tool__visual-label { left: 20px; top: 15px; }
  .home-tool__body > p { margin-bottom: 21px; }
  .home-tool__cta { padding-top: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-tool, .home-tool__cta > span { transition: none; }
  .home-tool:hover, .home-tool:hover .home-tool__cta > span { transform: none; }
}