/* File: /css/style.css */
/* BEGIN CHANGE: Refactor + remove unused CSS (index.html only) */

/* =========================
   IGTD CORE TOKENS
   ========================= */
:root{
  --igtd-green:#7da748;
  --igtd-black:#0b0b0b;

  --igtd-white:#ffffff;
  --igtd-ink:#111111;
  --igtd-muted:#5a5a5a;

  --igtd-radius-lg:20px;
  --igtd-shadow:0 10px 28px rgba(0,0,0,.06);

  --igtd-green-soft:rgba(125,167,72,.10);
  --igtd-green-border:rgba(125,167,72,.25);
}
.dzr-mini-icon{
	width:62px;
	height:62px;
	border-radius:18px;
	margin:0 auto 1rem;
	display:grid;
	place-items:center;
	background:var(--igtd-green-soft);
	border:1px solid var(--igtd-green-border);
	color:var(--igtd-green);
	font-size:1.75rem;
}

@media (max-width: 575.98px){
	.dzr-mini-icon{
		width:56px;
		height:56px;
		border-radius:16px;
		font-size:1.6rem;
	}
}

/* =========================
   HERO (optional hooks)
   Note: Your hero overlay is handled in HTML (card-img-overlay).
   Add hero-specific rules here later if you want tighter control.
   ========================= */

/* =========================
   BENEFITS SECTION
   Practical help, not confusion
   ========================= */
.benefits-section{
  background: var(--igtd-white);
}

.benefits-heading{
  max-width: 760px;
}

.benefits-wrap{
  max-width: 1120px;
  margin-inline: auto;
}

.benefits-caption{
  font-weight: 800;
  letter-spacing: .14em;
  font-size: .78rem;
  color: rgba(0,0,0,.55);
}

.benefits-title{
  font-size: clamp(1.7rem, 2vw, 2.35rem);
  color: var(--igtd-green);
}

.benefit-card{
  background: var(--igtd-white);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--igtd-radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--igtd-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.benefit-card::before{
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(125,167,72,.95), rgba(125,167,72,.25));
  opacity: .9;
}

.benefit-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  border-color: rgba(125,167,72,.35);
}

.benefit-card:focus-within{
  border-color: rgba(125,167,72,.55);
  box-shadow: 0 0 0 4px rgba(125,167,72,.18), 0 16px 40px rgba(0,0,0,.10);
}

.benefit-icon{
  width: 62px;
  height: 62px;
  border-radius: 18px;
  margin: 0 auto 1rem;
  display: grid;
  place-items: center;
  background: var(--igtd-green-soft);
  border: 1px solid var(--igtd-green-border);
  color: var(--igtd-green);
  font-size: 1.75rem;
}

.benefit-card-title{
  margin-top: .25rem;
  color: var(--igtd-ink);
}

.benefit-card-text{
  color: rgba(0,0,0,.68);
  line-height: 1.6;
  max-width: 34ch;
  margin-inline: auto;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .benefit-card{ transition:none; }
  .benefit-card:hover{ transform:none; }
}

/* Tighten on small screens */
@media (max-width: 575.98px){
  .benefit-card{ padding: 1.4rem 1.2rem; }
  .benefit-icon{
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 1.6rem;
  }
}

/* =========================
   IGTD LIME DIVIDER
   ========================= */
.igtd-hr{
  border: 0 !important;
  height: 4px;
  width: 100%;
  margin: 2.5rem 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(125,167,72,0),
    rgba(125,167,72,.95),
    rgba(125,167,72,0)
  );
  box-shadow:
    0 0 12px rgba(125,167,72,.55),
    0 0 28px rgba(125,167,72,.30);
}

:root { --bs-primary:#7da748; --bs-primary-rgb:125,167,72; }

.btn-primary { background-color:var(--bs-primary); border-color:var(--bs-primary); color:#fff; }
.btn-primary:hover, .btn-primary:focus { background-color:#6a933e; border-color:#6a933e; color:#fff; }
.btn-primary:active { background-color:#5f8538; border-color:#5f8538; }

.btn-outline-primary { color:var(--bs-primary); border-color:var(--bs-primary); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color:var(--bs-primary); border-color:var(--bs-primary); color:#fff; }

.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-outline-primary:focus { box-shadow:0 0 0 .25rem rgba(125,167,72,.35); }