/* ---------- HERO POLISH ---------- */

.explanatory-block:first-of-type {
  background: linear-gradient(135deg, #f5f7fa, #eef3fb);
}


/* ---------- TOOL CARDS (WOW LAYER) ---------- */

.section-card {
 position: relative;
 overflow: hidden;
 margin-top: 38px;            /* ✅ creates vertical rhythm */
 padding-top: 14px;           /* ✅ breathing space */
 border-top: 2px solid #e6e9ef; /* ✅ subtle divider */
}


/* subtle blue accent bar 
.section-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: #2f6fdd;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* stronger hover */
.section-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
} */

/* activate accent */
.section-card:hover::before {
  opacity: 1;
}


/* ---------- CARD TEXT POLISH ---------- */

.section-card h3 {
  transition: color 0.2s ease;
}

/* title highlight on hover */
.section-card:hover h3 {
  color: #2f6fdd;
}


/* ---------- GRID IMPROVEMENT ---------- */

/* tighter stacking inside section */
.explanatory-block > a + a {
  margin-top: 6px;
}


/* ---------- SMALL MICRO-INTERACTION ---------- */

/* arrow animation */
.card-arrow {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.card-link:hover .card-arrow {
  transform: translateX(6px);
  opacity: 1;
}


.section-card hr {
  border: none;
}

.section-card h1 {
  position: relative;
}

.section-card h1::after {
  content: "";
  display: block;
  height: 1px;
  background: #dcdcdc;
  margin-top: 8px;
}
.section-card hr {
  border: none;
  border-top: 1px solid #dcdcdc;
  opacity: 0.6;
}

.section-group {
  margin-bottom: 32px;
}

.section-group h2 {
  margin-bottom: 6px;
}

.section-group p {
  margin-bottom: 14px;
  color: #555;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 800px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== TOOL COLOR VARIANTS ===== */

/* 🟦 Blue */
.section-card.tool-blue {
    background: #f4f8ff;
    border: 1px solid #d9e6ff;
}

/* 🟩 Green */
.section-card.tool-green {
    background: #f4fbf6;
    border: 1px solid #d8eee0;
}

/* 🟨 Yellow */
.section-card.tool-yellow {
    background: #fffdf5;
    border: 1px solid #f3e9c7;
}

/* 🟪 Purple */
.section-card.tool-purple {
    background: #f7f5ff;
    border: 1px solid #e3dcff;
}

/* 🟥 Red */
.section-card.tool-red {
    background: #fff6f6;
    border: 1px solid #f1d6d6;
}

.section-card[class*="tool-"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    border-radius: 2px;
}

/* match colors */

.section-card.tool-blue::before { background: #2f6fdd; }
.section-card.tool-green::before { background: #2e7d32; }
.section-card.tool-yellow::before { background: #c89a00; }
.section-card.tool-purple::before { background: #6b4fd3; }
.section-card.tool-red::before { background: #c0392b; }