/* ── CARDS (research, tools) ─────────────────────────── */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rcard{padding:26px;border-radius:var(--rl);border:1px solid var(--bdr);background:var(--white);transition:transform 0.28s,box-shadow 0.28s,border-color 0.28s;position:relative;overflow:hidden}
.rcard::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--g600),var(--a400));transform:scaleX(0);transform-origin:left;transition:transform 0.28s}
.rcard:hover{transform:translateY(-5px);box-shadow:0 12px 40px rgba(40,70,10,0.1);border-color:var(--bdrm)}.rcard:hover::after{transform:scaleX(1)}
.ricon{width:46px;height:46px;border-radius:10px;margin-bottom:16px;background:var(--g50);border:1px solid var(--bdr);display:flex;align-items:center;justify-content:center}
.ricon svg{width:22px;height:22px}
.rcard h3{font-family:var(--fd);font-size:1.125rem;font-weight:700;color:var(--t1);margin-bottom:9px}
.rcard p{font-size:0.813rem;color:var(--t2);line-height:1.75}
.rtag{display:inline-block;margin-top:14px;font-family:var(--fm);font-size:0.594rem;letter-spacing:1px;color:var(--g700);text-transform:uppercase}

/* 6 CARDS IN ONE LINE ON DESKTOP */
@media (min-width: 1024px) {
  .area-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 12px !important;
  }
  .area-card {
    padding: 16px 12px !important;
  }
  .area-card h3 {
    font-size:0.844rem !important;
  }
  .area-card p {
    font-size:0.688rem !important;
  }
}

/* Custom secondary button for tools card */
.btn-secondary-custom {
  padding: 10px 20px;
  font-family: var(--fb);
  font-size:0.844rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--bdrm);
  background: var(--bg-card);
  color: var(--t1);
  border-radius: var(--r);
  transition: background 0.2s, color 0.2s, transform 0.2s;
  cursor: pointer;
}
.btn-secondary-custom:hover {
  background: var(--bg-section);
  color: var(--g700);
  transform: translateY(-1px);
}
[data-theme="dark"] .btn-secondary-custom:hover {
  color: var(--a200);
}
