@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  color: #ebe8df;
  background: #0d0f13;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 20% 15%, #3c2c1838, transparent 30rem),
    radial-gradient(circle at 85% 80%, #17334a38, transparent 34rem),
    #0d0f13;
}

main { width: min(760px, calc(100% - 40px)); padding: 70px 0 36px; }
header { margin-bottom: 34px; }
.eyebrow { color: #a69c89; font-size: 10px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase; }
h1 { margin: 5px 0 4px; font: 400 clamp(46px, 10vw, 76px)/1 'Instrument Serif', Georgia, serif; }
header p { margin: 0; color: #858a94; font-size: 14px; }
nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.tool {
  min-height: 210px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 17px;
  padding: 22px;
  border: 1px solid #333740;
  border-radius: 15px;
  color: inherit;
  background: #14171cdd;
  box-shadow: 0 24px 65px #0005;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.tool:hover, .tool:focus-visible { transform: translateY(-4px); outline: none; }
.dexlogos:hover, .dexlogos:focus-visible { border-color: #85cdbb; background: #14221e; }
.dexlogos .monogram { color: #bcf3e5; background: linear-gradient(150deg, #306658, #141e1c 70%); }
.scrolldex:hover, .scrolldex:focus-visible { border-color: #d4ac5b; background: #1d1b17; }
.dexposters:hover, .dexposters:focus-visible { border-color: #b78b50; background: #1d1915; }
.dexhomemedia:hover, .dexhomemedia:focus-visible { border-color: #df7d45; background: #211813; }
.fakeflix:hover, .fakeflix:focus-visible { border-color: #d46a9a; background: #21151c; }
.schoolbusfinder:hover, .schoolbusfinder:focus-visible { border-color: #f5bd16; background: #211e13; }
.monogram { display: grid; place-items: center; width: 54px; height: 76px; border: 1px solid #ffffff2b; border-radius: 3px; font: 400 32px 'Instrument Serif', Georgia, serif; box-shadow: inset 0 0 28px #0007; }
.scrolldex .monogram { color: #ecc875; background: linear-gradient(150deg, #5f4b27, #17191f 70%); }
.dexposters .monogram { color: #f1e7d5; background: linear-gradient(150deg, #75522d, #19120e 70%); }
.dexhomemedia .monogram { color: #ffd8c1; background: linear-gradient(150deg, #8a4528, #171b1e 70%); }
.fakeflix .monogram { color: #ffd2e7; background: linear-gradient(150deg, #85375c, #19141a 70%); }
.schoolbusfinder .monogram { color: #ffe47b; background: linear-gradient(150deg, #8a6908, #191a16 70%); }
.copy { display: grid; gap: 7px; }
.copy strong { font: 400 29px 'Instrument Serif', Georgia, serif; }
.copy small { max-width: 250px; color: #9a9ea7; font-size: 12px; line-height: 1.45; }
.arrow { color: #8d9199; font-size: 24px; transition: transform .18s ease; }
.tool:hover .arrow, .tool:focus-visible .arrow { transform: translateX(4px); color: #eee8dc; }
footer { margin-top: 26px; color: #686d77; font-size: 11px; text-align: center; letter-spacing: .08em; }

@media (max-width: 640px) {
  main { padding-top: 42px; }
  nav { grid-template-columns: 1fr; }
  .tool { min-height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  .tool, .arrow { transition: none; }
}