:root {
  --ink:#141516;
  --ink-2:#1f2327;
  --muted:#69707a;
  --line:#e6e6e6;
  --card:#ffffff;
  --bone:#f5f4f2;
  --shadow:0 24px 60px rgba(0,0,0,.10);
  --shadow-hover:0 32px 76px rgba(0,0,0,.14);
}

html,body {
  margin:0;
  padding:0;
  background:#f1f0f0;
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.7;
}

.main {
  padding:120px 0 140px;
}

.hero-insights {
  max-width:1120px;
  margin:0 auto 72px;
  padding:96px 56px;
  border-radius:40px;
  background:linear-gradient(145deg,#10131b 0%, #171c28 62%, #1f2533 100%);
  color:#e9edf6;
  box-shadow:0 36px 82px -36px rgba(10,12,22,.78);
  text-align:center;
}

.hero-insights h1 {
  font-family:"Playfair Display",serif;
  font-size:clamp(2.6rem,5.4vw,3.6rem);
  margin:0 0 18px;
  letter-spacing:-.01em;
}

.hero-insights p {
  margin:0 auto;
  max-width:680px;
  font-size:1.1rem;
  color:#cdd3df;
}

.toolbar {
  max-width:1080px;
  margin:0 auto 80px;
  padding:0 24px;
  display:grid;
  grid-template-columns:1.2fr 220px 220px;
  gap:22px;
}

.toolbar input,
.toolbar select {
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px 20px;
  background:#fff;
  font-size:0.96rem;
  box-shadow:0 16px 30px -22px rgba(0,0,0,.25);
}

.grid {
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:36px 36px;
}

.card {
  grid-column:span 4;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:32px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transition:transform .28s ease, box-shadow .28s ease;
}

.card:hover {
  transform:translateY(-12px);
  box-shadow:var(--shadow-hover);
}

.card .thumb {
  aspect-ratio:16/9;
  background:#e9e9e9;
  overflow:hidden;
}

.card .thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(100%);
  transition:transform .35s ease, filter .35s ease;
}

.card:hover .thumb img {
  transform:scale(1.06);
  filter:grayscale(0%);
}

.card .body {
  padding:32px 34px 36px;
  display:grid;
  gap:20px;
}

.card .kicker {
  font-size:.78rem;
  letter-spacing:.22em;
  color:var(--muted);
  text-transform:uppercase;
}

.card h3 {
  margin:0;
  font-family:"Playfair Display",serif;
  font-size:1.38rem;
  line-height:1.3;
}

.card p {
  margin:0;
  color:#3a434c;
}

.card .meta {
  display:flex;
  gap:14px;
  font-size:.92rem;
  color:#7b8590;
}

.card .cta {
  margin-top:auto;
  padding:24px 30px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fafafa;
}

.card .cta span {
  font-size:.9rem;
  color:#555d66;
}

.card .cta a {
  color:#0d63ff;
  text-decoration:none;
  font-weight:600;
}

.card .cta a:hover {
  text-decoration:underline;
}

.footer-note {
  max-width:980px;
  margin:88px auto 0;
  padding:0 24px;
  color:#5a616a;
  line-height:1.75;
  font-size:.96rem;
}

@media (max-width:1060px) {
  .toolbar {
    grid-template-columns:1fr 1fr;
    gap:18px;
  }

  .grid {
    gap:32px;
  }

  .card {
    grid-column:span 6;
  }
}

@media (max-width:720px) {
  .main {
    padding:104px 0 120px;
  }

  .hero-insights {
    margin-bottom:56px;
    padding:72px 28px;
    border-radius:34px;
    text-align:left;
  }

  .toolbar {
    grid-template-columns:1fr;
    margin-bottom:60px;
    padding:0 20px;
    gap:16px;
  }

  .grid {
    padding:0 20px;
    gap:28px;
  }

  .card {
    grid-column:1 / -1;
  }

  .card .body {
    padding:28px 26px 32px;
  }

  .card .cta {
    padding:22px 26px;
  }
}