/* =========================
   MENTORS / PARTNERS
========================= */

.team-grid {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(320px, 1fr));

  gap: 24px;

  margin-top: 32px;
}

.mentor-card {
  position: relative;

  padding: 24px;

  border-radius: 26px;

  background:
    linear-gradient(
      180deg,
      rgba(253, 169, 169, 0.493),
      rgba(58, 58, 58, 0.253)
    );

  border:
    1px solid rgb(0, 0, 0);

  box-shadow:
    0 18px 50px rgba(255, 255, 255, 0.37);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.mentor-card:hover {
  transform: translateY(-6px);

  border-color:
    rgb(0, 0, 0);

  box-shadow:
    0 28px 70px rgb(206, 8, 8);
}

.mentor-card__top {
  display: flex;
  align-items: center;
  gap: 16px;

  margin-bottom: 18px;
}

.mentor-card__avatar {
  width: 78px;
  height: 78px;

  border-radius: 50%;

  overflow: hidden;

  flex-shrink: 0;

  border:
    3px solid rgba(0, 0, 0, 0.877);

  box-shadow:
    0 10px 24px rgba(255,0,0,0.12);
}

.mentor-card__avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}

.mentor-card__intro h3 {
  margin: 0;

  font-size: 25px;
  line-height: 1.2;

  color: #000000;
}

.mentor-card__company {
  margin-top: 4px;

  font-size: 13px;
  font-weight: 700;

  color: #000000;
}

.mentor-card__badge {
  display: inline-flex;

  align-items: center;

  margin-top: 10px;

  padding:
    8px 14px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgb(255, 5, 5),
      rgba(0, 0, 0, 0.986)
    );

  border:
    1px solid rgba(255,0,0,0.12);

  color: #ffffff;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 0.02em;
}

.mentor-card p {
  margin: 0;

  line-height: 1.8;

  color:
    rgb(0, 0, 0);

  font-size: 25px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .mentor-card {
    padding: 18px;
    border-radius: 22px;
  }

  .mentor-card__top {
    align-items: flex-start;
  }

  .mentor-card__avatar {
    width: 64px;
    height: 64px;
  }

  .mentor-card__intro h3 {
    font-size: 16px;
  }

  .mentor-card p {
    font-size: 13.5px;
  }
}

/* =========================
   PAGE HERO
========================= */

.page-hero {
  position: relative;

  padding: 56px 42px;

  border-radius: 34px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #ee0202 10%,
      #000000 55%,
      #b31010 70%,
      #e9e5e5 90%
    );

  color: #000000;

  box-shadow:
    0 30px 80px rgb(0, 0, 0);

  margin-bottom: 32px;
}

.page-hero::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(255, 0, 0, 0.733),
      transparent 40%
    );

  pointer-events: none;
}

.page-hero__content {
  position: relative;
  z-index: 2;

  max-width: 760px;
}

.page-hero .section__eyebrow {
  color: rgb(255, 255, 255);
}

.page-hero .page-title {
  margin-top: 14px;

  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.04em;

  color: #ffffff;
}

.page-hero .page-lead {
  margin-top: 22px;

  font-size: 17px;
  line-height: 1.9;

  color: rgb(255, 255, 255);
}

/* =========================
   INTRO PANEL
========================= */

.intro-panel {
  display: flex;
  gap: 22px;
  align-items: flex-start;

  padding: 28px;

  border-radius: 28px;

  background: #fff;

  border:
    1px solid rgb(0, 0, 0);

  box-shadow:
    0 18px 50px rgba(255, 69, 69, 0.479);

  margin-bottom: 28px;
}

.intro-panel__icon {
  width: 74px;
  height: 74px;

  border-radius: 22px;

  display: grid;
  place-items: center;

  font-size: 32px;

  background:
    linear-gradient(
      135deg,
      rgb(255, 2, 2),
      rgb(0, 0, 0)
    );

  flex-shrink: 0;
}

.intro-panel__content h3 {
  margin: 0;

  font-size: 24px;
  line-height: 1.2;
}

.intro-panel__content p {
  margin-top: 14px;

  line-height: 1.9;

  color:
    rgb(0, 0, 0);
}

/* =========================
   ACADEMIC PANEL
========================= */

.academic-panel {
  position: relative;

  padding: 34px;

  border-radius: 30px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.98),
      rgb(248, 250, 252)
    );

  border:
    1px solid rgba(15,23,42,0.08);

  box-shadow:
    0 20px 60px rgba(0,0,0,0.07);
}

.academic-panel__badge {
  display: inline-flex;

  padding:
    10px 16px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgb(255, 0, 0),
      rgb(0, 0, 0)
    );

  color: #ffffff;

  font-size: 12px;
  font-weight: 700;

  margin-bottom: 18px;
}

.academic-panel h3 {
  margin: 0;

  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.academic-panel p {
  margin-top: 18px;

  line-height: 1.9;

  color:
    rgb(0, 0, 0);

  max-width: 860px;
}

.academic-panel__stats {
  display: grid;

  grid-template-columns:
    repeat(auto-fit, minmax(160px, 1fr));

  gap: 18px;

  margin-top: 28px;
}

.academic-stat {
  padding: 20px;

  border-radius: 22px;

  background:
    rgba(248,250,252,0.9);

  border:
    1px solid rgb(0, 0, 0);
}

.academic-stat strong {
  display: block;

  font-size: 18px;

  color: #000000;
}

.academic-stat span {
  display: block;

  margin-top: 6px;

  font-size: 13px;

  color:
    rgb(0, 0, 0);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

  .page-hero {
    padding: 38px 24px;
    border-radius: 26px;
  }

  .intro-panel {
    flex-direction: column;
    padding: 22px;
  }

  .academic-panel {
    padding: 24px;
  }

  .academic-panel h3 {
    font-size: 24px;
  }
}