/* ==========================================================
   PROBELIKA — SMART MISSION V2
   ========================================================== */

.pb-mission {
  --pm-ink: #071426;
  --pm-cyan: #59e2f7;
  --pm-blue: #278fe8;
  --pm-coral: #ff7467;
  --pm-orange: #ffa647;
  --pm-lime: #bce95e;

  position: relative;
  margin-bottom: 32px;
  overflow: hidden;
  border-radius: 38px;

  background:
    radial-gradient(
      circle at 79% 13%,
      rgba(89,226,247,.23),
      transparent 24rem
    ),
    radial-gradient(
      circle at 14% 92%,
      rgba(255,116,103,.15),
      transparent 25rem
    ),
    linear-gradient(
      140deg,
      #061528,
      #09253f 58%,
      #0c354e
    );

  color: white;

  box-shadow:
    0 34px 85px
    rgba(4,22,43,.23);
}

.pb-mission::before {
  content: "";
  position: absolute;
  inset: 0;

  opacity: .17;

  background-image:
    linear-gradient(
      rgba(255,255,255,.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.05) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;

  pointer-events: none;
}

.pb-mission-inner {
  position: relative;
  z-index: 2;

  padding: 38px;
}

.pb-mission-head {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(280px,.52fr);

  gap: 36px;
  align-items: center;
}

.pb-mission-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #9decff;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: .10em;
  text-transform: uppercase;
}

.pb-mission-kicker::before {
  content: "";

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: var(--pm-lime);

  box-shadow:
    0 0 18px
    rgba(188,233,94,.65);
}

.pb-mission h1 {
  max-width: 760px;

  margin:
    12px 0 12px;

  font-size:
    clamp(
      40px,
      5.4vw,
      68px
    );

  line-height: .98;

  letter-spacing:
    -.052em;
}

.pb-mission h1 span {
  color:
    var(--pm-cyan);
}

.pb-mission-lead {
  max-width: 675px;

  margin: 0;

  color:
    rgba(255,255,255,.66);

  font-size: 15px;
  line-height: 1.55;
}


/* Mascot */

.pb-mission-orb-zone {
  position: relative;
  min-height: 250px;
}

.pb-mission-aura {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 260px;
  height: 260px;

  transform:
    translate(-50%,-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(89,226,247,.29),
      transparent 68%
    );
}

.pb-mission-orb {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 185px;
  height: 185px;

  transform:
    translate(-50%,-50%)
    rotate(-4deg);

  border-radius:
    48% 52% 54% 46% /
    45% 48% 52% 55%;

  background:
    radial-gradient(
      circle at 29% 21%,
      rgba(255,255,255,.96),
      transparent 16%
    ),
    radial-gradient(
      circle at 71% 76%,
      rgba(255,166,71,.95),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      #70ebff,
      #20b9e8 43%,
      #1479ca 74%,
      #09375e
    );

  box-shadow:
    inset -20px -25px 36px
      rgba(3,20,43,.32),

    inset 14px 14px 24px
      rgba(255,255,255,.20),

    0 0 70px
      rgba(89,226,247,.22),

    0 30px 55px
      rgba(0,0,0,.30);

  animation:
    pbMissionFloat
    4.4s ease-in-out infinite;
}

.pb-mission-eye {
  position: absolute;

  top: 45%;

  width: 22px;
  height: 29px;

  border-radius: 50%;

  background:
    #071426;
}

.pb-mission-eye::after {
  content: "";

  position: absolute;

  top: 5px;
  left: 5px;

  width: 7px;
  height: 8px;

  border-radius: 50%;

  background: white;
}

.pb-mission-eye-a {
  left: 50px;
}

.pb-mission-eye-b {
  right: 50px;
}

.pb-mission-smile {
  position: absolute;

  top: 63%;
  left: 50%;

  width: 47px;
  height: 19px;

  transform:
    translateX(-50%);

  border-bottom:
    5px solid
    rgba(7,20,38,.8);

  border-radius:
    0 0 50% 50%;
}


/* Mission card */

.pb-mission-card {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto;

  gap: 25px;

  align-items: center;

  margin-top: 28px;
  padding: 28px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 28px;

  background:
    rgba(255,255,255,.94);

  color: var(--pm-ink);

  box-shadow:
    0 22px 55px
    rgba(0,0,0,.19);

  backdrop-filter:
    blur(16px);
}

.pb-mission-badge {
  display: inline-flex;

  padding:
    6px 9px;

  border-radius: 9px;

  background:
    #e8faff;

  color:
    #0d80a2;

  font-size: 12px;
  font-weight: 900;

  text-transform: uppercase;
  letter-spacing: .05em;
}

.pb-mission-card h2 {
  max-width: 720px;

  margin:
    12px 0 8px;

  font-size:
    clamp(
      27px,
      4vw,
      41px
    );

  line-height: 1.04;

  letter-spacing:
    -.04em;
}

.pb-mission-reason {
  max-width: 700px;

  margin: 0;

  color: #66778c;

  line-height: 1.55;
}

.pb-mission-start {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 190px;
  min-height: 60px;

  padding:
    0 22px;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #55dff5,
      #9ef0ff
    );

  color: #061426;

  font-weight: 950;

  text-decoration: none;

  box-shadow:
    0 16px 35px
    rgba(32,190,225,.25);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.pb-mission-start:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 22px 45px
    rgba(32,190,225,.34);
}


/* Mission metrics */

.pb-mission-metrics {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );

  gap: 10px;

  margin-top: 12px;
}

.pb-mission-metric {
  padding: 15px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 16px;

  background:
    rgba(255,255,255,.06);
}

.pb-mission-metric span {
  display: block;

  color:
    rgba(255,255,255,.50);

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: .06em;
}

.pb-mission-metric strong {
  display: block;

  margin-top: 6px;

  font-size: 23px;
}


/* Path */

.pb-mission-path {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap: 10px;

  margin-top: 12px;
}

.pb-mission-step {
  position: relative;

  padding: 16px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 17px;

  background:
    rgba(255,255,255,.05);
}

.pb-mission-step-index {
  display: grid;

  place-items: center;

  width: 28px;
  height: 28px;

  border-radius: 9px;

  background:
    rgba(255,255,255,.10);

  color:
    var(--pm-cyan);

  font-size: 12px;
  font-weight: 900;
}

.pb-mission-step strong {
  display: block;

  margin-top: 10px;

  font-size: 12px;
}

.pb-mission-step small {
  display: block;

  margin-top: 4px;

  color:
    rgba(255,255,255,.46);

  line-height: 1.35;
}


/* Footer nav */

.pb-mission-footer {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 14px;
}

.pb-mission-footer a {
  padding:
    9px 11px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 11px;

  background:
    rgba(255,255,255,.055);

  color:
    rgba(255,255,255,.74);

  font-size: 12px;
  font-weight: 800;

  text-decoration: none;
}


/* Empty */

.pb-mission-empty {
  padding: 30px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 24px;

  background:
    rgba(255,255,255,.055);
}


/* Responsive */

@media (max-width: 900px) {

  .pb-mission-head {
    grid-template-columns: 1fr;
  }

  .pb-mission-orb-zone {
    min-height: 220px;
  }

  .pb-mission-card {
    grid-template-columns: 1fr;
  }

  .pb-mission-start {
    width: 100%;
  }

  .pb-mission-metrics {
    grid-template-columns:
      repeat(2,1fr);
  }

  .pb-mission-path {
    grid-template-columns:
      repeat(2,1fr);
  }

}

@media (max-width: 600px) {

  .pb-mission {
    border-radius: 27px;
  }

  .pb-mission-inner {
    padding:
      24px 17px;
  }

  .pb-mission h1 {
    font-size: 40px;
  }

  .pb-mission-path {
    grid-template-columns: 1fr;
  }

}

@keyframes pbMissionFloat {

  0%,
  100% {
    transform:
      translate(-50%,-50%)
      translateY(0)
      rotate(-4deg);
  }

  50% {
    transform:
      translate(-50%,-50%)
      translateY(-11px)
      rotate(3deg);
  }

}

@media (
  prefers-reduced-motion: reduce
) {

  .pb-mission-orb {
    animation: none;
  }

}