/* ==========================================================================
   e-Pragma "About us" page
   Scoped to .ep-about so it never leaks into the documentation pages.
   Shares the front page's design language: navy gradient hero, indigo brand,
   orange accent, soft cards.
   ========================================================================== */

.ep-about {
  --epa-bg: #ffffff;
  --epa-fg: #12141f;
  --epa-muted: #5a6178;
  --epa-line: #e4e7f0;
  --epa-card: #ffffff;
  --epa-navy: #12132e;
  --epa-navy-2: #1c1e42;
  --epa-brand: #4051b5;
  --epa-brand-2: #6c7bff;
  --epa-accent: #ff7a1a;
  --epa-radius: 18px;
  --epa-shadow: 0 1px 2px rgba(16, 20, 45, .06), 0 12px 32px rgba(16, 20, 45, .07);
  --epa-shadow-lg: 0 2px 6px rgba(16, 20, 45, .08), 0 24px 60px rgba(16, 20, 45, .12);
}

[data-md-color-scheme="slate"] .ep-about {
  --epa-bg: #14161f;
  --epa-fg: #eef0f6;
  --epa-muted: #a4abc0;
  --epa-line: #2b2f3d;
  --epa-card: #1b1e29;
  --epa-navy: #0d0f1c;
  --epa-navy-2: #171a30;
  --epa-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .35);
  --epa-shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .45);
}

/* ---------- Hero ---------- */

.ep-about__hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 56px;
  padding: 64px 48px 56px;
  border-radius: var(--epa-radius);
  color: #f5f6fb;
  background:
    radial-gradient(120% 140% at 88% 0%, rgba(108, 123, 255, .38) 0%, transparent 58%),
    linear-gradient(135deg, var(--epa-navy) 0%, var(--epa-navy-2) 100%);
  box-shadow: var(--epa-shadow-lg);
}

.ep-about__hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 26, .22) 0%, transparent 70%);
  pointer-events: none;
}

.ep-about__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--epa-accent-2, #ffb347);
  margin: 0 0 16px;
}

.ep-about__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--epa-accent);
  border-radius: 2px;
}

/* The theme ships `.md-typeset h1 { color: var(--md-default-fg-color--light) }`
   with a specificity of (0,1,1) - scope twice to win against it. */
.md-typeset .ep-about__title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 18px;
  max-width: 18ch;
}

.md-typeset .ep-about__lead {
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  max-width: 62ch;
  margin: 0 0 30px;
}

.ep-about__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ep-about__btn {
  display: inline-block;
  padding: .7em 1.5em;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Material paints links with `.md-typeset a { color: var(--md-accent-fg-color) }`
   at (0,1,1) - scope twice so the button colours win. */
.md-typeset .ep-about__btn--primary {
  background: var(--epa-accent);
  color: #1b1200;
  box-shadow: 0 6px 18px rgba(255, 122, 26, .32);
}

.md-typeset .ep-about__btn--primary:hover {
  background: #ff8c3c;
  color: #1b1200;
  transform: translateY(-2px);
}

.md-typeset .ep-about__btn--ghost {
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}

.md-typeset .ep-about__btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  transform: translateY(-2px);
}

/* The dark theme repaints every hovered link with the theme accent:
     [data-md-color-scheme="slate"] .md-typeset a:hover
   That selector is (0,3,1) and would beat the (0,3,0) button rules above,
   turning the orange button blue on hover. These two rules are (0,4,0) and
   so win back the button colours in the dark theme. */
.md-typeset .ep-about__btn--primary:hover,
[data-md-color-scheme="slate"] .md-typeset .ep-about__btn--primary:hover {
  background: #ff8c3c;
  color: #1b1200;
}

.md-typeset .ep-about__btn--ghost:hover,
[data-md-color-scheme="slate"] .md-typeset .ep-about__btn--ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

/* ---------- Story ---------- */

.ep-about__story {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
}

.md-typeset .ep-about__text p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--epa-muted);
  margin: 0 0 18px;
}

.md-typeset .ep-about__text p:last-child {
  margin-bottom: 0;
}

.md-typeset .ep-about__text strong {
  color: var(--epa-fg);
  font-weight: 700;
}

.ep-about__figure {
  margin: 0;
  position: relative;
}

.ep-about__figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--epa-radius);
  box-shadow: var(--epa-shadow-lg);
}

.ep-about__figure figcaption {
  margin-top: 14px;
  font-size: .86rem;
  color: var(--epa-muted);
  text-align: center;
}

/* ---------- Stats ---------- */

.ep-about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 64px;
}

.ep-about__stat {
  background: var(--epa-card);
  border: 1px solid var(--epa-line);
  border-radius: 14px;
  padding: 24px 22px;
  text-align: center;
  box-shadow: var(--epa-shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.ep-about__stat:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--epa-brand) 45%, var(--epa-line));
  box-shadow: var(--epa-shadow-lg);
}

.md-typeset .ep-about__stat strong {
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--epa-brand);
  margin: 0 0 6px;
}

[data-md-color-scheme="slate"] .ep-about__stat strong {
  color: var(--epa-brand-2);
}

.md-typeset .ep-about__stat span {
  display: block;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--epa-muted);
}

/* ---------- Values ---------- */

.ep-about__values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 64px;
}

.ep-about__value {
  background: var(--epa-card);
  border: 1px solid var(--epa-line);
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: var(--epa-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.ep-about__value:hover {
  transform: translateY(-4px);
  box-shadow: var(--epa-shadow-lg);
}

.ep-about__value-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  margin-bottom: 18px;
  background: color-mix(in srgb, var(--epa-brand) 12%, transparent);
}

.ep-about__value-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--epa-brand);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-md-color-scheme="slate"] .ep-about__value-icon svg {
  stroke: var(--epa-brand-2);
}

.md-typeset .ep-about__value h3 {
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--epa-fg);
  margin: 0 0 10px;
}

.md-typeset .ep-about__value p {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--epa-muted);
  margin: 0;
}

/* ---------- CTA ---------- */

.ep-about__cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 52px 40px;
  border-radius: var(--epa-radius);
  color: #f5f6fb;
  background:
    radial-gradient(110% 130% at 12% 0%, rgba(108, 123, 255, .34) 0%, transparent 56%),
    linear-gradient(135deg, var(--epa-navy) 0%, var(--epa-navy-2) 100%);
  box-shadow: var(--epa-shadow-lg);
}

.md-typeset .ep-about__cta h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 12px;
}

.md-typeset .ep-about__cta p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  max-width: 58ch;
  margin: 0 auto 26px;
}

.ep-about__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---------- Responsive ---------- */

@media screen and (max-width: 1024px) {
  .ep-about__story {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

  .ep-about__values {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  .ep-about__hero {
    padding: 40px 24px 36px;
    margin-bottom: 40px;
  }

  .ep-about__stats {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ep-about__cta {
    padding: 40px 22px;
  }
}