/* ============================================================
   TECHCELER — edumitra.css
   Distinct vertical identity: deeper purple #7B3FA0 + pink #E05599,
   mandala-inspired motifs, thin purple card borders, warm & cultural.
   ============================================================ */

.edu {
  --edu-purple: #7b3fa0;
  --edu-pink: #e05599;
  --edu-gradient: linear-gradient(135deg, #7b3fa0 0%, #e05599 100%);
  --edu-soft: linear-gradient(
    135deg,
    rgba(123, 63, 160, 0.12),
    rgba(224, 85, 153, 0.12)
  );
}

/* mandala-inspired radial pattern, used as page texture */
.edu-mandala-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
      circle at 50% 0%,
      rgba(224, 85, 153, 0.12),
      transparent 45%
    ),
    radial-gradient(
      circle at 85% 30%,
      rgba(123, 63, 160, 0.1),
      transparent 40%
    );
}

/* HERO */
.edu-hero {
  position: relative;
  background: radial-gradient(
      ellipse at 50% 82%,
      rgba(123, 63, 160, 0.42),
      transparent 55%
    ),
    linear-gradient(160deg, #0e0619 0%, #1a0a2c 100%);
  color: #fff;
  padding-top: calc(var(--nav-h) + 80px);
  padding-bottom: clamp(64px, 8vw, 110px);
  overflow: hidden;
  text-align: center;
}
.edu-hero__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  max-width: 120vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(224, 85, 153, 0.35),
    transparent 60%
  );
  pointer-events: none;
}
/* concentric mandala rings */
.edu-hero__rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 620px;
  height: 620px;
  max-width: 110vw;
  pointer-events: none;
  opacity: 0.4;
}
.edu-hero__rings span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(224, 85, 153, 0.4);
  border-radius: 50%;
}
.edu-hero__rings span:nth-child(1) { width: 220px; height: 220px; }
.edu-hero__rings span:nth-child(2) { width: 380px; height: 380px; }
.edu-hero__rings span:nth-child(3) { width: 540px; height: 540px; }

.edu-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin-inline: auto;
}
.edu-hero__logo {
  display: block;
  width: auto;
  height: 116px;
  box-sizing: content-box;
  margin: 0 auto 30px;
  padding: 18px 32px;
  background: #fdf7fb;
  border: 1px solid rgba(224, 85, 153, 0.4);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(224, 85, 153, 0.3);
}
.edu-hero h1 {
  color: #fff;
}
.edu-hero p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.18rem;
  line-height: 1.7;
  max-width: 620px;
  margin: 22px auto 0;
}
.edu-hero .btn-row {
  justify-content: center;
  margin-top: 32px;
}
.edu .btn-primary {
  background: linear-gradient(135deg, #7b3fa0, #e05599);
  box-shadow: 0 4px 20px rgba(123, 63, 160, 0.4);
}
.edu .eyebrow.gradient-text {
  background: var(--edu-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.edu .eyebrow::before {
  background: var(--edu-gradient);
}

/* STATS BAR */
.edu-stats {
  background: var(--edu-gradient);
  color: #fff;
}
.edu-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.edu-stats .num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: #fff;
}
.edu-stats .label {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 640px) {
  .edu-stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px 16px;
  }
}

/* SECTION BG */
.edu-section {
  position: relative;
  background: #fdf9fc;
}
.edu-section.alt {
  background: #fff;
}

/* thin purple border cards (mirrors logo's rectangular border) */
.edu-card {
  position: relative;
  padding: 32px;
  border-radius: var(--radius);
  background: #fff;
  border: 1.5px solid rgba(123, 63, 160, 0.25);
  box-shadow: 0 8px 30px rgba(123, 63, 160, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.edu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(123, 63, 160, 0.18);
  border-color: rgba(224, 85, 153, 0.5);
}
.edu-card .n {
  font-family: var(--font-mono);
  font-weight: 700;
  color: #fff;
  background: var(--edu-gradient);
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.edu-card h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.edu-card p {
  font-size: 0.96rem;
}

.edu-framework__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 820px) {
  .edu-framework__grid {
    grid-template-columns: 1fr;
  }
}

/* domains grid */
.domains-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.domain {
  padding: 22px 18px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1.5px solid rgba(123, 63, 160, 0.2);
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.domain:hover {
  transform: translateY(-4px);
  border-color: var(--edu-pink);
}
.domain .ic {
  display: inline-flex;
  color: var(--edu-purple);
  margin-bottom: 10px;
}
.domain .ic svg {
  width: 26px;
  height: 26px;
}
.domain h3 {
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}
@media (max-width: 900px) {
  .domains-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 560px) {
  .domains-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* maturity model */
.maturity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.maturity {
  position: relative;
  padding: 28px;
  border-radius: var(--radius);
  background: #fff;
  border: 1.5px solid rgba(123, 63, 160, 0.22);
  overflow: hidden;
}
.maturity::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  width: var(--lvl, 25%);
  background: var(--edu-gradient);
}
.maturity .lvl {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;
  background: var(--edu-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.maturity h3 {
  font-size: 1.12rem;
  margin: 6px 0 8px;
}
.maturity p {
  font-size: 0.92rem;
}
@media (max-width: 900px) {
  .maturity-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .maturity-grid {
    grid-template-columns: 1fr;
  }
}

/* edu CTA */
.edu-cta {
  position: relative;
  background: radial-gradient(
      ellipse at 50% 0%,
      rgba(224, 85, 153, 0.35),
      transparent 55%
    ),
    linear-gradient(160deg, #1a0f2e, #2a1140);
  overflow: hidden;
}
.edu-cta .cta-panel h2,
.edu-cta .cta-panel p {
  color: #fff;
}
.edu-cta .cta-panel p {
  color: rgba(255, 255, 255, 0.8);
}