/* ===== Homepage CSS (DifferencePilot) ===== */

/* ===== TOOLS GRID ===== */
.tools-grid-home{margin:18px 0}
.tools-grid-title{margin:0 0 14px;color:#172554;font-size:22px;text-align:center}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.tool-grid-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:#fff;border:2px solid #dbe3ef;border-radius:16px;padding:18px 10px;
  text-decoration:none;text-align:center;
  transition:transform .15s,box-shadow .15s,border-color .15s;
  cursor:pointer;box-shadow:0 4px 12px rgba(15,23,42,.06)
}
.tool-grid-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(15,23,42,.14)}
.tool-grid-card .tool-icon{font-size:32px;line-height:1;margin-bottom:4px}
.tool-grid-card strong{color:#172554;font-size:14px}
.tool-grid-card small{color:#64748b;font-size:11px}

/* Color coding by tool type */
.tool-grid-card.tool-diff{border-color:#bfdbfe}.tool-grid-card.tool-diff:hover{border-color:#3b82f6;background:#eff6ff}
.tool-grid-card.tool-image{border-color:#fbcfe8}.tool-grid-card.tool-image:hover{border-color:#ec4899;background:#fdf2f8}
.tool-grid-card.tool-gen{border-color:#bbf7d0}.tool-grid-card.tool-gen:hover{border-color:#22c55e;background:#f0fdf4}

@media(max-width:520px){
  .tools-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .tool-grid-card{padding:12px 6px}
  .tool-grid-card .tool-icon{font-size:24px}
  .tool-grid-card strong{font-size:12px}
  .tool-grid-card small{font-size:10px}
}

/* ===== USER REVIEWS ===== */
.reviews-section{margin:20px 0}
.reviews-title{text-align:center;color:#172554;font-size:22px;margin:0 0 16px;font-weight:900}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review-card{background:#fff;border:1px solid #dbe3ef;border-radius:16px;padding:18px;box-shadow:0 4px 14px rgba(15,23,42,.06);transition:transform .2s,box-shadow .2s}
.review-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(15,23,42,.12)}
.review-stars{color:#f59e0b;font-size:18px;margin-bottom:8px;letter-spacing:2px}
.review-text{color:#334155;font-size:14px;line-height:1.6;margin:0 0 12px;font-style:italic}
.review-author{display:flex;align-items:center;gap:8px}
.review-author strong{color:#172554;font-size:14px}
.review-author span{color:#64748b;font-size:12px;background:#f1f5f9;padding:2px 8px;border-radius:999px}

@media(max-width:900px){.reviews-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== SUGGESTION BOX ===== */
.suggestion-section{margin:20px 0;background:#fff;border:1px solid #dbe3ef;border-radius:16px;padding:24px;box-shadow:0 4px 14px rgba(15,23,42,.06)}
.suggestion-title{color:#172554;font-size:20px;margin:0 0 6px;font-weight:900}
.suggestion-desc{color:#64748b;font-size:14px;margin:0 0 16px}
.feedback-buttons{display:flex;gap:12px;flex-wrap:wrap}
.feedback-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;font-size:12px;font-weight:800;text-decoration:none;color:#fff;transition:all .2s;box-shadow:0 3px 10px rgba(0,0,0,.1)}
.feedback-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.feedback-suggest{background:linear-gradient(135deg,#6366f1,#4f46e5)}
.feedback-suggest:hover{background:linear-gradient(135deg,#818cf8,#6366f1)}
.feedback-review{background:linear-gradient(135deg,#f59e0b,#d97706)}
.feedback-review:hover{background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.feedback-bug{background:linear-gradient(135deg,#ef4444,#dc2626)}
.feedback-bug:hover{background:linear-gradient(135deg,#f87171,#ef4444)}

/* ===== HOME ACCESSIBILITY FIXES ===== */
.review-author span{
  background:#ffffff!important;color:#1e293b!important;
  border:1px solid #cbd5e1!important;border-radius:999px;padding:2px 8px;font-weight:700
}
.review-card p,.review-text,.tool-grid-card small,.brand-copy p,.seo-content p,.seo-content li{color:#334155!important}

/* ===== HOME MOBILE ===== */
@media(max-width:768px){
  .tools-grid-home{margin:12px 0!important;max-width:100%!important;overflow:hidden!important}
  .tools-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important;max-width:100%!important}
  .tool-grid-card{min-width:0!important;overflow:hidden!important}
  .reviews-grid{grid-template-columns:1fr!important}
  .suggestion-row{grid-template-columns:1fr!important}
}