/* FILE: assets/css/why-us.css */
/* ============================================================
   Energiephase · Why Choose Us + Statistics
   Feature grid (glass) and animated stat counters.
   ============================================================ */

.why{position:relative;overflow:hidden}
.why__glow{width:500px;height:500px;bottom:-180px;right:-140px}

.why__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.5rem);
}
.why-card{
  display:flex;
  flex-direction:column;
  gap:var(--ep-space-3);
  padding:clamp(1.5rem,2.5vw,2rem);
  border-radius:var(--ep-radius-lg);
  background:var(--ep-glass);
  background-image:var(--ep-glass-gradient);
  border:1px solid var(--ep-glass-border);
  box-shadow:var(--ep-shadow-sm);
  transition:transform var(--ep-dur) var(--ep-ease),border-color var(--ep-dur) var(--ep-ease);
}
.why-card:hover{transform:translateY(-5px);border-color:var(--ep-glass-border-hi)}
.why-card__icon{
  width:54px;height:54px;
  display:grid;place-items:center;
  border-radius:var(--ep-radius);
  background:rgba(81,163,86,.12);
  border:1px solid rgba(81,163,86,.25);
  color:var(--ep-yellow);
}
.why-card__icon svg{width:28px;height:28px}
.why-card__title{font-size:1.2rem}
.why-card__text{color:var(--ep-text-muted);font-size:.98rem;line-height:var(--ep-lh-body)}

/* ---------- Statistics ---------- */
.stats{position:relative}
.stats__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2vw,1.5rem);
  padding:clamp(1.6rem,3vw,2.4rem);
  border-radius:var(--ep-radius-xl);
  background:var(--ep-glass);
  background-image:var(--ep-glass-gradient);
  border:1px solid var(--ep-glass-border);
  box-shadow:var(--ep-shadow),var(--ep-shadow-inset);
}
.stat{text-align:center;position:relative}
.stat:not(:last-child)::after{
  content:"";
  position:absolute;
  right:calc(var(--ep-space-4) * -1 + -3px);
  top:15%;bottom:15%;
  width:1px;
  background:var(--ep-glass-border);
}
.stat__num{
  font-family:var(--ep-font-display);
  font-weight:800;
  font-size:clamp(2.2rem,4.5vw,3.2rem);
  line-height:1;
  color:var(--ep-text);
  letter-spacing:var(--ep-tracking-tight);
}
.stat__num .stat__suffix{color:var(--ep-yellow)}
.stat__label{margin-top:var(--ep-space-2);color:var(--ep-text-muted);font-size:.95rem}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .why__grid{grid-template-columns:repeat(2,1fr)}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:var(--ep-space-6)}
  .stat::after{display:none}
}
@media (max-width:560px){
  .why__grid{grid-template-columns:1fr}
}