@import url('../../shared/base.css');
:root{
  --font-heading:'Segoe UI',sans-serif;--font-body:'Segoe UI',sans-serif;
  --accent-1:#0f766e;--accent-2:#f59e0b;--bg:#f7f7f5;--text:#111827;
  --header-bg:#fff;--nav-bg:#fff;--card-bg:#fff;--stats-bg:#fff;--border:#e5e7eb;
  --hero-bg:#0f766e;--hero-text:#fff;--footer-bg:#0b3b36;
}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:140px;gap:1rem}
.card-grid .card:nth-child(4n+1){grid-column:span 2;grid-row:span 2}
.card-grid .card:nth-child(4n+3){grid-row:span 2}
.card{border-radius:16px;display:flex;flex-direction:column;justify-content:center}
@media (max-width:768px){.card-grid{grid-template-columns:repeat(2,1fr)}.card-grid .card:nth-child(4n+1){grid-column:span 2}}
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;background:none}
.stat{background:#fff;border-radius:16px;border:1px solid var(--border);padding:1.5rem}
.card{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 12px 24px rgba(15,118,110,.18)}