.home-content {
  background-color: #faf9fb;
  background-image:
    radial-gradient(ellipse 48rem 30rem at 12% 4rem, rgb(246 160 195 / var(--rose-wash, 14%)), transparent 76%),
    radial-gradient(ellipse 49rem 36rem at 90% 12rem, rgb(169 187 250 / var(--blue-wash, 17%)), transparent 75%),
    radial-gradient(ellipse 43rem 38rem at 11% 35rem, rgb(255 202 158 / 11%), transparent 76%),
    radial-gradient(ellipse 54rem 46rem at 92% 56rem, rgb(161 222 210 / 12%), transparent 77%);
}

.home-intro {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(32px, 4.7vw, 64px) 20px clamp(28px, 4vw, 54px);
  text-align: center;
}
.home-intro h1 {
  max-width: 1000px;
  font-family: Satoshi, Inter, sans-serif;
  font-size: clamp(32px, 5.15vw, 64px);
  font-weight: 700;
  letter-spacing: -.048em;
  line-height: 1.06;
  text-wrap: balance;
}
.home-intro h1 span { color: #8b4881; }

@media (prefers-reduced-motion: no-preference) {
  .home-intro h1 span { animation: art-palette 18s ease-in-out infinite; }
}

@keyframes art-palette {
  0%, 100% { color: #8b4881; }
  25% { color: #545fa0; }
  50% { color: #326f72; }
  75% { color: #98525e; }
}
.home-intro .home-intro-description {
  color: #544755;
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.45;
  text-wrap: balance;
}
.home-intro .home-intro-privacy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 64%);
  color: #645168;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.home-intro-privacy svg { width: 17px; height: 17px; color: #87537f; flex: none; }

.home-tool-section {
  --tool-columns: 2;
  --tile-gap: clamp(14px, 1.6vw, 22px);
  --growth-gap: calc((var(--tool-columns) - 1) * var(--tile-gap) * .04);
  width: min(calc(100% - 2 * clamp(14px, 3vw, 28px)), max(calc(86.216% - var(--growth-gap)), calc(665.6px - var(--growth-gap))));
  max-width: calc(1497.6px - var(--growth-gap));
  margin: 0 auto clamp(26px, 4vw, 48px);
}
.home-tool-section h2 {
  margin-bottom: clamp(10px, 1.5vw, 18px);
  color: #3e3242;
  font: 650 clamp(17px, 1.7vw, 22px)/1.25 Satoshi, Inter, sans-serif;
}
.home-tool-grid {
  grid-template-columns: repeat(var(--tool-columns), minmax(0, 1fr));
  gap: var(--tile-gap);
}
.home-tool-grid .tool-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
  align-self: start;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1;
  gap: clamp(7px, .9vw, 15px);
  padding: 8%;
  text-align: center;
  background: #fff;
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 24%;
}
.home-tool-grid .tool-card .icon-wrap {
  display: grid;
  place-items: center;
  width: clamp(35px, 36%, 68px);
  aspect-ratio: 1;
  flex: none;
  border-radius: 32%;
  overflow: hidden;
}
.home-icon { display: block; width: 57%; height: 57%; }
.home-tool-grid .tool-card > .flex { flex: none; gap: 4px; width: 100%; }
.home-tool-grid .card-title {
  font: 600 clamp(13px, 10cqi, 17px)/1.2 Inter, sans-serif;
  overflow-wrap: anywhere;
}
.home-tool-grid .card-sub { font-size: clamp(11px, 7.8cqi, 12.5px); line-height: 1.35; }
.home-tool-grid :is(.card-title, .card-sub) { text-wrap: balance; }

@media (min-width: 535px) { .home-tool-section { --tool-columns: 3; } }
@media (min-width: 810px) { .home-tool-section { --tool-columns: 4; } }
@media (min-width: 1170px) { .home-tool-section { --tool-columns: 6; } }
@media (max-width: 599px) {
  .home-content {
    --rose-wash: 11%;
    --blue-wash: 13%;
  }
  .home-icon { width: 62%; height: 62%; }
  .home-intro { gap: 9px; }
}
@media (max-width: 319px) {
  .home-tool-grid { --tool-columns: 1; max-width: 220px; }
}