/* ==========================================================================
   Miss Pepper AI — Homepage below-the-fold sections
   Archetypes per Art Bible: Strategy (narrative + intelligence module),
   Results (metric row), Services (capability list), Process (timeline),
   CTA (cinematic band). Dark, cinematic, evidence-first. mp- namespaced.
   ========================================================================== */

/* --- Shared section scaffolding -------------------------------------- */
.mp-section__head { max-width: 46rem; }
.mp-section__head--center { max-width: 52rem; margin-inline: auto; text-align: center; }
.mp-lead {
  margin: 1.15rem 0 0;
  color: var(--mp-muted);
  font-family: var(--mp-body);
  font-size: clamp(1.02rem, 1.18vw, 1.18rem);
  line-height: 1.6;
}
.mp-lead strong { color: var(--mp-ink); font-weight: 700; }
.mp-accent { color: var(--mp-orange); }
.mp-section + .mp-section { border-top: 1px solid rgba(162, 207, 231, 0.08); }

/* Subtle top-lit field so bands read as depth, not flat blocks. */
.mp-section--tinted {
  background:
    radial-gradient(120% 60% at 82% -10%, rgba(0, 111, 190, 0.10), transparent 60%),
    var(--mp-navy);
}

/* ======================================================================
   1. STRATEGY — left narrative, right AI-recommendation module
   ====================================================================== */
.mp-strategy {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}
.mp-strategy__body p { margin: 1.1rem 0 0; }
.mp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}
.mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--mp-panel-border);
  border-radius: 2rem;
  background: rgba(7, 27, 43, 0.4);
  color: var(--mp-muted);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mp-chip::before {
  content: "";
  width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: var(--mp-green);
  box-shadow: 0 0 0.5rem var(--mp-green);
}

/* AI recommendation engine module (believable intelligence UI) */
.mp-aiengine { padding: clamp(1.2rem, 1.6vw, 1.7rem); }
.mp-aiengine__bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.1rem;
}
.mp-aiengine__dot {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--mp-blue-active);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.mp-aiengine__dot::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--mp-blue-active); box-shadow: 0 0 0.55rem var(--mp-blue-active);
}
.mp-aiengine__query {
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--mp-line);
  border-radius: 0.6rem;
  background: rgba(3, 12, 20, 0.6);
  color: var(--mp-ink);
  font-size: 0.95rem;
}
.mp-aiengine__query span { color: var(--mp-blue-active); }
.mp-aiengine__list { display: grid; gap: 0.6rem; }
.mp-airec {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--mp-line);
  border-radius: 0.55rem;
  background: rgba(5, 20, 34, 0.5);
  color: var(--mp-muted);
  font-size: 0.9rem;
}
.mp-airec__rank {
  flex: 0 0 auto;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--mp-line);
  font-size: 0.72rem; color: var(--mp-muted);
}
.mp-airec--pick {
  border-color: var(--mp-cta-border);
  background: linear-gradient(180deg, rgba(255, 125, 22, 0.16), rgba(255, 107, 0, 0.08));
  color: var(--mp-ink);
  font-weight: 600;
}
.mp-airec--pick .mp-airec__rank {
  border-color: transparent;
  background: var(--mp-cta-grad);
  color: #fff; font-weight: 800;
}
.mp-airec--pick .mp-airec__tag {
  margin-left: auto;
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mp-orange-hot);
}
.mp-airec--muted { opacity: 0.5; }

/* ======================================================================
   2. RESULTS — large metric row over a dark field
   ====================================================================== */
.mp-metricrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.mp-metric { display: flex; flex-direction: column; gap: 0.5rem; }
.mp-metric__head { display: flex; align-items: baseline; gap: 0.5rem; }
.mp-metric__value {
  font-family: var(--mp-display);
  font-weight: 800;
  font-size: clamp(2.8rem, 5vw, 4.3rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.01em;
}
.mp-metric__unit {
  font-family: var(--mp-body);
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mp-orange);
}
.mp-metric__label {
  font-family: var(--mp-display);
  font-weight: 700; text-transform: uppercase;
  font-size: 0.95rem; color: var(--mp-ink);
}
.mp-metric__proof {
  margin: 0.15rem 0 0.35rem;
  border: 1px solid var(--mp-line);
  border-radius: 0.55rem;
  overflow: hidden;
  background: #0a1824;
}
.mp-metric__proof img { width: 100%; height: auto; display: block; }
.mp-metric__proof figcaption {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.65rem;
  font-family: var(--mp-body);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mp-muted);
  border-top: 1px solid var(--mp-line);
  background: rgba(3, 12, 20, 0.7);
}
.mp-metric__proof figcaption::before {
  content: "";
  width: 0.42rem; height: 0.42rem; border-radius: 50%;
  background: var(--mp-green);
  box-shadow: 0 0 0.45rem var(--mp-green);
}
.mp-metric__note { margin: 0.15rem 0 0; color: var(--mp-muted); font-size: 0.92rem; line-height: 1.5; }
.mp-metric__trend {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mp-green);
}
.mp-metric__trend::before { content: "▲"; font-size: 0.7rem; }
.mp-results__foot {
  margin: clamp(2.2rem, 3.5vw, 3rem) 0 0;
  max-width: 52rem;
  color: var(--mp-muted);
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.6;
}
.mp-results__foot strong { color: var(--mp-ink); font-weight: 700; }

/* ======================================================================
   3. SERVICES — dense, scannable capability list
   ====================================================================== */
.mp-capgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.mp-cap { display: flex; flex-direction: column; gap: 0.85rem; transition: border-color .2s var(--mp-ease), transform .2s var(--mp-ease); }
.mp-cap:hover { transform: translateY(-3px); border-color: var(--mp-panel-border); }
.mp-cap__icon {
  width: 2.7rem; height: 2.7rem;
  display: grid; place-items: center;
  border-radius: 0.6rem;
  border: 1px solid var(--mp-line);
  background: rgba(0, 111, 190, 0.12);
  color: var(--mp-blue-active);
}
.mp-cap__icon svg { width: 1.4rem; height: 1.4rem; }
.mp-cap__title { margin: 0; font-family: var(--mp-display); font-weight: 700; font-size: 1.16rem; color: #fff; }
.mp-cap__desc { margin: 0; color: var(--mp-muted); font-size: 0.96rem; line-height: 1.55; }
.mp-cap__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.mp-cap__list li {
  position: relative; padding-left: 1.4rem;
  color: var(--mp-ink); font-size: 0.9rem; line-height: 1.45;
}
.mp-cap__list li::before {
  content: ""; position: absolute; left: 0; top: 0.5rem;
  width: 0.5rem; height: 0.5rem; border-radius: 1px;
  background: var(--mp-blue-active); transform: rotate(45deg);
}
.mp-cap__result {
  margin-top: auto;
  display: flex; gap: 0.55rem; align-items: flex-start;
  padding-top: 0.9rem;
  border-top: 1px solid var(--mp-line);
  color: var(--mp-ink); font-size: 0.9rem; line-height: 1.45;
}
.mp-cap__result b { color: var(--mp-orange); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.76rem; padding-top: 0.06rem; }

/* ======================================================================
   4. PROCESS — operational timeline with orange trace line
   ====================================================================== */
.mp-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.4vw, 1.3rem);
  margin: clamp(2.4rem, 4vw, 3.4rem) 0 0;
  padding: 0;
  list-style: none;
  /* Orange trace line through the step markers — drawn as a background so it
     never becomes a stray grid item (keeps engines without full grid happy). */
  background-image: linear-gradient(90deg, transparent, rgba(255, 107, 0, 0.55) 12%, rgba(255, 125, 22, 0.55) 88%, transparent);
  background-repeat: no-repeat;
  background-size: 88% 2px;
  background-position: 50% 1.05rem;
}
.mp-step { position: relative; display: flex; flex-direction: column; gap: 0.6rem; padding-top: 3rem; }
.mp-step__num {
  position: absolute; top: 0; left: 0;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mp-navy);
  border: 1.5px solid var(--mp-cta-border);
  color: var(--mp-orange-hot);
  font-family: var(--mp-display); font-weight: 800; font-size: 0.82rem;
  box-shadow: 0 0 0 4px var(--mp-navy);
}
.mp-step__title { margin: 0; font-family: var(--mp-display); font-weight: 700; text-transform: uppercase; font-size: 1.02rem; color: #fff; }
.mp-step__desc { margin: 0; color: var(--mp-muted); font-size: 0.9rem; line-height: 1.5; }

/* ======================================================================
   5. CTA — cinematic band, two choices, one orange action
   ====================================================================== */
.mp-cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5, 17, 27, 0.94) 8%, rgba(5, 17, 27, 0.66) 55%, rgba(5, 17, 27, 0.82)),
    url("../images/hero-website-design-bg.png");
  background-size: cover;
  background-position: center;
}
.mp-cta-band__inner { position: relative; z-index: 1; }
.mp-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: clamp(2rem, 3.5vw, 3rem) 0 clamp(2rem, 3vw, 2.6rem);
}
.mp-choice {
  padding: clamp(1.3rem, 1.8vw, 1.8rem);
  border-radius: var(--mp-radius-panel);
  border: 1px solid var(--mp-line);
  background: rgba(5, 20, 34, 0.55);
  backdrop-filter: blur(var(--mp-panel-blur));
}
.mp-choice__tag { display: block; font-family: var(--mp-display); font-weight: 800; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.1em; margin-bottom: 0.6rem; }
.mp-choice__body { margin: 0; color: var(--mp-muted); font-size: 1rem; line-height: 1.55; }
.mp-choice--keep .mp-choice__tag { color: var(--mp-muted); }
.mp-choice--fix {
  border-color: var(--mp-cta-border);
  background: linear-gradient(180deg, rgba(255, 125, 22, 0.12), rgba(5, 20, 34, 0.55));
}
.mp-choice--fix .mp-choice__tag { color: var(--mp-orange-hot); }
.mp-choice--fix .mp-choice__body { color: var(--mp-ink); }
.mp-cta-band__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2.2rem;
}
.mp-cta-band__proof { margin: 0; max-width: 32rem; color: var(--mp-muted); font-size: 0.98rem; line-height: 1.55; }
.mp-cta-band__proof strong { color: var(--mp-ink); font-weight: 700; }

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 60rem) {
  .mp-strategy { grid-template-columns: 1fr; }
  .mp-metricrow { grid-template-columns: 1fr; }
  .mp-capgrid { grid-template-columns: 1fr; }
  .mp-timeline {
    grid-template-columns: 1fr; gap: 0;
    background-image: linear-gradient(180deg, transparent, rgba(255, 107, 0, 0.55) 10%, rgba(255, 125, 22, 0.55) 90%, transparent);
    background-size: 2px calc(100% - 2rem);
    background-position: 1.05rem 1rem;
  }
  .mp-step { padding: 0 0 1.8rem 3.2rem; }
  .mp-step__num { top: 0; }
  .mp-choices { grid-template-columns: 1fr; }
}

/* ======================================================================
   Sonic Boom conversion layer
   ====================================================================== */

/* Trust strip — real proof at the first decision moment (under the hero). */
.mp-trustbar {
  border-block: 1px solid rgba(162, 207, 231, 0.12);
  background: linear-gradient(180deg, rgba(6, 19, 30, 0.92), rgba(5, 17, 27, 0.92));
  padding-block: clamp(1.1rem, 2vw, 1.55rem);
}
.mp-trustbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
}
.mp-trustbar__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.3rem, 3vw, 2.8rem);
  margin: 0; padding: 0; list-style: none;
}
.mp-trustbar__stats li { display: flex; flex-direction: column; }
.mp-trustbar__stats strong {
  font-family: var(--mp-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  line-height: 1;
  color: #fff;
}
.mp-trustbar__stats li:first-child strong { color: var(--mp-orange); }
.mp-trustbar__stats span {
  margin-top: 0.28rem;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mp-muted);
}
.mp-trustbar__industries { margin: 0; color: var(--mp-muted); font-size: 0.86rem; line-height: 1.5; }
.mp-trustbar__industries span { color: var(--mp-ink); }

/* Problem framing — "you feel this if…" pain list inside the Strategy section. */
.mp-pains__lead {
  margin: 1.9rem 0 0.85rem;
  font-family: var(--mp-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  color: var(--mp-ink);
}
.mp-pains { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.mp-pains li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--mp-muted);
  font-size: 0.98rem;
  line-height: 1.5;
}
.mp-pains li::before {
  content: "\00d7";
  position: absolute;
  left: 0.15rem; top: -0.05rem;
  color: var(--mp-orange);
  font-weight: 700;
  font-size: 1.1rem;
}
.mp-pains em { color: var(--mp-ink); font-style: normal; font-weight: 600; }

/* Hero action pair (primary + low-commitment secondary). */
.mp-hero__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.9rem 1.1rem; }
.mp-hero.mp-hero--home .mp-hero__secondary { min-width: auto; }

/* Closer — two paths + trust closer. */
.mp-cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.1rem; }
.mp-cta-band__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.7rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.mp-cta-band__trust li {
  position: relative;
  padding-left: 1.45rem;
  color: var(--mp-muted);
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}
.mp-cta-band__trust li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--mp-green);
  font-weight: 700;
}

/* ======================================================================
   Reduced motion — collapse transitions, keep full composition
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .mp-cap { transition: none; }
  .mp-cap:hover { transform: none; }
}