/* =====================
   GRID
===================== */

.grid {

  display: grid;

  gap: 20px;

  margin-top: 40px;
}

.grid-2 {

  grid-template-columns:
    repeat(auto-fit, minmax(320px, 1fr));
}

/* =====================
   CARDS
===================== */

.card {

  position: relative;

  padding: 28px;

  border:
    1px solid rgba(34,197,94,0.18);

  background:
    rgba(5,10,18,0.96);
}

.card::after {

  content:
    "COGNITIVE MODULE";

  position: absolute;

  top: 12px;
  right: 14px;

  font-size: 10px;

  letter-spacing: 2px;

  color:
    rgba(34,197,94,0.4);
}

.card h3 {

  margin-bottom: 16px;

  color:
    #f8fafc;
}

.card p {

  color:
    #94a3b8;
}

.module-subtitle {

  color:
    #d9f99d !important;

  margin-bottom: 20px;
}

/* =====================
   DEMO
===================== */

.module-demo {

  margin-top: 24px;

  border:
    1px solid rgba(34,197,94,0.08);

  padding: 18px;
}

.demo-user {

  border-left:
    2px solid #22c55e;

  padding-left: 12px;

  margin-bottom: 20px;
}

.demo-ai {

  color:
    #a7f3d0;
}