/* ============================================================
   WAFGENE ENERGY SOLUTIONS — page styles
   ============================================================ */

.hero-energy {
  padding-block: clamp(56px, 8vw, 96px) clamp(48px, 6vw, 72px);
  background: linear-gradient(180deg, var(--paper-tint), #fff 70%);
  position: relative;
  overflow: hidden;
}
.hero-energy-grid {
  display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center;
}
@media (min-width: 900px) { .hero-energy-grid { grid-template-columns: 1.15fr 0.85fr; } }
.hero-energy h1 { margin-bottom: 18px; }
.hero-energy .lede { margin-bottom: 28px; }
.hero-energy-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-energy-art {
  position: relative;
  aspect-ratio: 4/3.3;
  border-radius: var(--radius-lg);
  background: linear-gradient(155deg, var(--violet-900), var(--violet-700) 65%, var(--amber-500) 150%);
  overflow: hidden;
}
.hero-energy-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Product category strip */
.category-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 16px;
}
@media (min-width: 700px) { .category-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1000px) { .category-grid { grid-template-columns: repeat(6,1fr); } }
.category-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 20px 16px; border-radius: var(--radius-md);
  border: 1px solid var(--ink-100); background: var(--paper);
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.category-tile:hover { border-color: var(--amber-500); transform: translateY(-3px); box-shadow: var(--shadow-rest); }
.category-tile svg { width: 26px; height: 26px; color: var(--amber-500); }
.category-tile strong { font-family: var(--font-display); font-size: 0.9rem; color: var(--ink-900); }
.category-tile span { font-size: 0.78rem; color: var(--ink-500); }

/* Project cards */
.project-card { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--ink-100); background: #fff; }
.project-card-media {
  aspect-ratio: 16/10; position: relative; overflow: hidden;
}
.project-card-media svg { width: 100%; height: 100%; }
.project-card-body { padding: 20px; }
.project-card-body .project-meta { display: flex; gap: 14px; margin-top: 10px; font-size: 0.82rem; color: var(--ink-500); }
.project-card-body .project-meta strong { color: var(--ink-900); }

.faq-note { color: var(--ink-500); font-size: 0.9rem; margin-top: 18px; }