@import url("about-revamp.css");

/* Mission & Vision — extends About Us patterns */

/* Hero background image (structure/colors from .about-hero in about-revamp.css) */
.mission-page-hero::before {
  background-image: url("../images/mission-vision.jpg");
}

/* Digital Ecosystem — white section, centered circular orbit */
.mv-ecosystem.space-ptb {
  padding: 3.5rem 0;
}

.mv-ecosystem {
  background: #fff;
}

.mv-ecosystem__intro h2 {
  color: #022d62;
}

.mv-ecosystem__intro p {
  color: #5a6578;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.mv-ecosystem-diagram {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.mv-ecosystem-orbit {
  position: relative;
  --hub-size: 148px;
  --hub-glow-pad: 40px;
  --ring-gap: 56px;
  --node-w: 140px;
  --node-h: 76px;
  --orbit-r: calc(var(--hub-size) / 2 + var(--hub-glow-pad) + var(--ring-gap) + var(--node-w) / 2);
  /* Fit box to orbit — no extra square whitespace above/below cards */
  width: calc(2 * var(--orbit-r) + var(--node-w));
  height: calc(2 * var(--orbit-r) + var(--node-h));
  max-width: 100%;
  margin: 0 auto;
  flex-shrink: 0;
}

.mv-ecosystem-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: var(--hub-size);
  height: var(--hub-size);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f97316;
  box-shadow:
    0 0 0 8px rgba(249, 115, 22, 0.08),
    0 0 32px rgba(249, 115, 22, 0.28);
}

.mv-ecosystem-hub__name {
  display: block;
  color: #fff;
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.mv-ecosystem-hub__tag {
  display: block;
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  max-width: 7.5rem;
}

.mv-ecosystem-node {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: var(--node-w);
  min-height: 72px;
  padding: 1.1rem 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: #f8fafc;
  background: #0f1e33;
  border-radius: 14px;
  border: 1px solid transparent;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--orbit-r))) rotate(calc(-1 * var(--angle)));
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.mv-ecosystem-node:hover {
  background: #13243d;
  border-color: rgba(249, 115, 22, 0.35);
  box-shadow: 0 8px 24px rgba(2, 45, 98, 0.12), 0 0 18px rgba(249, 115, 22, 0.12);
}

/* Equal 45° spacing on a circle — clockwise from top */
.mv-ecosystem-node--1 { --angle: -90deg; }
.mv-ecosystem-node--2 { --angle: -45deg; }
.mv-ecosystem-node--3 { --angle: 0deg; }
.mv-ecosystem-node--4 { --angle: 45deg; }
.mv-ecosystem-node--5 { --angle: 90deg; }
.mv-ecosystem-node--6 { --angle: 135deg; }
.mv-ecosystem-node--7 { --angle: 180deg; }
.mv-ecosystem-node--8 { --angle: 225deg; }

.mv-ecosystem-node--1:hover,
.mv-ecosystem-node--2:hover,
.mv-ecosystem-node--3:hover,
.mv-ecosystem-node--4:hover,
.mv-ecosystem-node--5:hover,
.mv-ecosystem-node--6:hover,
.mv-ecosystem-node--7:hover,
.mv-ecosystem-node--8:hover {
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--orbit-r))) rotate(calc(-1 * var(--angle))) scale(1.04);
}

/* Desktop — wider ring; container height follows content (not a tall square) */
@media (min-width: 992px) {
  .mv-ecosystem.space-ptb {
    padding: 4rem 0;
  }

  .mv-ecosystem-orbit {
    --hub-size: 148px;
    --hub-glow-pad: 48px;
    --ring-gap: 80px;
    --node-w: 136px;
    --node-h: 76px;
    --orbit-r: calc(var(--hub-size) / 2 + var(--hub-glow-pad) + var(--ring-gap) + var(--node-w) / 2);
  }
}

/* Value cards with icon */
.mv-value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #022d62, #0a4a8a);
  color: #00c2a8;
  font-size: 1.2rem;
}

/* Mission / Vision pillar cards */
.mv-mv-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 0.75rem;
  border-radius: 10px;
  background: rgba(0, 194, 168, 0.15);
  color: #00e6c8;
  font-size: 1.15rem;
}

.mv-mv-card h4 {
  margin-top: 0;
}

/* Industries — 4-column tile grid */
.mv-industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 991px) {
  .mv-ecosystem.space-ptb {
    padding: 2.5rem 0;
  }

  .mv-ecosystem-diagram {
    padding: 0 1rem;
  }

  .mv-ecosystem-orbit {
    --node-w: 100%;
    width: 100%;
    max-width: 480px;
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    padding-top: 190px;
  }

  .mv-ecosystem-hub {
    top: 95px;
  }

  .mv-ecosystem-node {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 64px;
    transform: none;
  }

  .mv-ecosystem-node:hover {
    transform: translateY(-3px);
  }

  .mv-industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .mv-industry-grid {
    grid-template-columns: 1fr;
  }
}