/* About page — scoped styles only (prefix: about-page__) */

.about-page {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  /* М’якші темні тони — ближче до спокійної палітри головної */
  --about-heading: #3f5565;
  --about-body: #5a6b7a;
  --about-border-soft: rgba(51, 78, 94, 0.08);
  --about-shadow-soft: rgba(51, 78, 94, 0.055);
  --about-slate-mid: 55, 72, 86;
  --about-slate-deep: 42, 58, 70;
}

.about-page__banner {
  position: relative;
  height: var(--inner-page-banner-height);
  min-height: var(--inner-page-banner-min-height);
  overflow: hidden;
  z-index: 0;
}

.about-page__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  filter: saturate(0.98) contrast(1.02) brightness(0.88);
  transform: scale(1.05);
  transform-origin: center top;
}

.about-page__banner-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      820px 320px at 15% 20%,
      rgba(51, 78, 94, 0.22),
      transparent 60%
    ),
    radial-gradient(
      900px 420px at 85% 30%,
      rgba(152, 131, 131, 0.2),
      transparent 56%
    ),
    linear-gradient(
      180deg,
      rgba(51, 78, 94, 0.38) 0%,
      rgba(51, 78, 94, 0.2) 48%,
      rgba(255, 255, 255, 0.96) 100%
    );
}

.about-page__banner-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: calc(126px + clamp(20px, 3.5vh, 56px)) 18px 26px;
  text-align: center;
  color: #fff;
  z-index: 1;
}

.about-page__banner-title {
  margin: 0;
  font-family: var(--font);
  color: rgba(255, 255, 255, 0.96);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-size: clamp(26px, 2.8vw + 14px, 46px);
  text-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
  max-width: 22ch;
}

.about-page__banner-subtitle {
  margin: 0;
  max-width: 52ch;
  font-family:
    "Inter",
    system-ui,
    -apple-system,
    sans-serif;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.7;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.14);
  font-size: clamp(15px, 0.6vw + 13px, 18px);
}

.about-page__banner-content .about-page__eyebrow {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.88);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.about-page__body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(
      ellipse 78% 52% at 100% 8%,
      var(--bg-spot-mint) 0%,
      transparent 58%
    ),
    radial-gradient(
      ellipse 65% 48% at 0% 92%,
      var(--bg-spot-warm) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, #f7fbfc 0%, var(--bg) 55%, #f4f7f9 100%);
  padding: 56px 0 0;
}

.about-page__inner {
  position: relative;
  z-index: 1;
  padding: 56px 0 72px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* Уникаємо подвійних відступів із глобального .section */
.about-page__inner > .section.about-page__block {
  padding-top: 0;
  padding-bottom: 0;
}

.about-page__block {
  margin: 0;
}

.about-page__story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}

.about-page__story-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-page__section-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--shirt-tone);
}

.about-page__section-title {
  margin: 0;
  font-size: clamp(24px, 1.6vw + 16px, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.about-page__section-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--about-body);
}

.about-page__prose {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--about-body);
}

.about-page__story-media {
  margin: 0;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 14px 32px var(--about-shadow-soft),
    0 6px 16px rgba(51, 78, 94, 0.05),
    0 2px 6px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--about-border-soft);
}

.about-page__story-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background-image:
    radial-gradient(
      ellipse 125% 88% at 50% 36%,
      rgba(255, 252, 248, 0.11) 0%,
      rgba(255, 255, 255, 0.05) 40%,
      rgba(255, 255, 255, 0.015) 62%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 92% 48% at 50% 0%,
      rgba(255, 255, 255, 0.055) 0%,
      transparent 52%
    ),
    radial-gradient(
      560px 320px at 14% 45%,
      rgba(255, 255, 255, 0.035),
      transparent 62%
    ),
    radial-gradient(
      560px 320px at 86% 48%,
      rgba(var(--about-slate-deep), 0.12),
      transparent 62%
    ),
    linear-gradient(
      180deg,
      rgba(var(--about-slate-deep), 0.18) 0%,
      rgba(var(--about-slate-deep), 0.1) 28%,
      rgba(var(--about-slate-deep), 0.055) 52%,
      transparent 68%
    );
}

.about-page__story-img {
  display: block;
  width: 100%;
  height: auto;
  min-height: 280px;
  object-fit: cover;
  object-position: center;
  position: relative;
  z-index: 0;
}

.about-page__stats-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.about-page__stats-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shirt-tone);
}

.about-page__stats-title {
  margin: 0;
  font-size: clamp(24px, 1.8vw + 14px, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.about-page__stats-lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--about-body);
}

.about-page__stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.about-page__stat-card {
  --stat-card-pad-x: 22px;
  --stat-card-pad-top: 28px;
  --stat-card-icon-size: 54px;
  --stat-card-stack-gap: 12px;
  --stat-metric-font-size: 12px;
  /* Однакова з line-height метрики — щоб ::before збігався з її border-bottom */
  --stat-metric-line-box: 16px;
  --stat-metric-pad-bottom: 11px;
  --stat-header-h: calc(
    var(--stat-card-pad-top) + var(--stat-card-icon-size) +
      var(--stat-card-stack-gap) + var(--stat-metric-line-box) +
      var(--stat-metric-pad-bottom)
  );
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 28px var(--stat-card-pad-x) 26px;
  border-radius: 10px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(252, 253, 254, 0.96) 38%,
    rgba(247, 249, 251, 0.94) 100%
  );
  border: 1px solid rgba(51, 78, 94, 0.09);
  box-shadow:
    0 4px 6px -1px rgba(51, 78, 94, 0.04),
    0 22px 44px -8px rgba(51, 78, 94, 0.09),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset,
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transition:
    box-shadow 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.28s ease;
}

.about-page__stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--stat-header-h);
  background:
    linear-gradient(
        90deg,
        rgba(92, 129, 149, 0.88) 0%,
        rgba(152, 131, 131, 0.92) 48%,
        rgba(51, 78, 94, 0.52) 100%
      )
      0 0 / 100% 4px no-repeat,
    radial-gradient(
      90% 120% at 12% -8%,
      rgba(255, 255, 255, 0.45) 0%,
      transparent 58%
    ),
    radial-gradient(
      85% 90% at 98% 0%,
      rgba(92, 129, 149, 0.14) 0%,
      transparent 52%
    ),
    repeating-linear-gradient(
      -14deg,
      rgba(51, 78, 94, 0.028) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(
      172deg,
      rgba(92, 129, 149, 0.12) 0%,
      rgba(152, 131, 131, 0.06) 38%,
      rgba(247, 249, 251, 0) 88%
    );
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -12px 20px -14px rgba(51, 78, 94, 0.07);
  opacity: 0.98;
  z-index: 1;
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    filter 0.28s ease,
    box-shadow 0.28s ease;
}

.about-page__stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      130% 90% at 100% -8%,
      rgba(92, 129, 149, 0.11) 0%,
      transparent 52%
    ),
    radial-gradient(
      100% 70% at -6% 108%,
      rgba(152, 131, 131, 0.09) 0%,
      transparent 48%
    );
  opacity: 0.85;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.about-page__stat-card > * {
  position: relative;
  z-index: 2;
}

.about-page__stat-card:hover {
  border-color: rgba(152, 131, 131, 0.32);
  box-shadow:
    0 8px 16px -4px rgba(51, 78, 94, 0.06),
    0 32px 56px -12px rgba(51, 78, 94, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.75) inset,
    0 0 40px -12px rgba(152, 131, 131, 0.18);
}

.about-page__stat-card:hover::after {
  opacity: 1;
}

.about-page__stat-card:hover::before {
  opacity: 1;
  filter: saturate(1.12) brightness(1.02);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -14px 24px -12px rgba(51, 78, 94, 0.09),
    0 10px 28px -16px rgba(92, 129, 149, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
  .about-page__stat-card:hover {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page__stat-card {
    transition: none;
  }

  .about-page__stat-card::after {
    transition: none;
  }

  .about-page__stat-card::before {
    transition: none;
  }

  .about-page__stat-card-icon {
    transition: none;
  }
}

.about-page__stat-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      90% 80% at 28% 18%,
      rgba(255, 255, 255, 0.75) 0%,
      transparent 58%
    ),
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(152, 131, 131, 0.16) 100%
    );
  border: 1px solid rgba(152, 131, 131, 0.32);
  color: var(--shirt-tone);
  box-shadow:
    0 6px 14px rgba(51, 78, 94, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    color 0.28s ease;
}

.about-page__stat-card:hover .about-page__stat-card-icon {
  border-color: rgba(152, 131, 131, 0.42);
  color: rgb(130, 112, 112);
  box-shadow:
    0 10px 22px rgba(51, 78, 94, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

@media (prefers-reduced-motion: no-preference) {
  .about-page__stat-card:hover .about-page__stat-card-icon {
    transform: scale(1.05) translateY(-1px);
  }
}

.about-page__stat-card-icon svg {
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 1px 1px rgba(51, 78, 94, 0.08));
}

/* Заповнена силуетна іконка (стоматологія / обладнання) — той самий колір, трохи компактніше */
.about-page__stat-card-icon--filled svg {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 1px 1px rgba(51, 78, 94, 0.1));
}

.about-page__stat-card-metric {
  display: block;
  align-self: stretch;
  margin: 0 calc(var(--stat-card-pad-x) * -1);
  padding: 0 var(--stat-card-pad-x) var(--stat-metric-pad-bottom);
  width: auto;
  min-width: 0;
  box-sizing: border-box;
  font-size: var(--stat-metric-font-size);
  line-height: var(--stat-metric-line-box);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-2);
  border-bottom: 1px solid rgba(51, 78, 94, 0.08);
}

.about-page__stat-card-title {
  margin: 0;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--about-heading);
}

.about-page__stat-card-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--about-body);
}

/* Альтернативний фон карток: додайте клас about-page__stats-grid--bg-dawn на сітку. */
.about-page__stats-grid--bg-dawn .about-page__stat-card {
  background:
    radial-gradient(
      ellipse 125% 65% at 14% 0%,
      rgba(17, 166, 184, 0.1) 0%,
      transparent 54%
    ),
    radial-gradient(
      ellipse 95% 58% at 100% 6%,
      rgba(152, 131, 131, 0.08) 0%,
      transparent 52%
    ),
    linear-gradient(176deg, #fbfdfe 0%, #f4f8fa 50%, #eef2f5 100%);
  border-color: rgba(51, 78, 94, 0.085);
}

.about-page__stats-grid--bg-dawn .about-page__stat-card::before {
  /* висота як у базового ::before — по calc до лінії border у .about-page__stat-card-metric */
  background:
    linear-gradient(
        90deg,
        rgba(17, 166, 184, 0.65) 0%,
        rgba(92, 129, 149, 0.55) 42%,
        rgba(152, 131, 131, 0.62) 100%
      )
      0 0 / 100% 3px no-repeat,
    radial-gradient(
      85% 110% at 50% -12%,
      rgba(255, 255, 255, 0.72) 0%,
      transparent 58%
    ),
    linear-gradient(
      178deg,
      rgba(17, 166, 184, 0.09) 0%,
      rgba(255, 255, 255, 0.42) 52%,
      rgba(251, 253, 254, 0) 100%
    );
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -18px 32px -20px rgba(17, 166, 184, 0.07);
}

.about-page__stats-grid--bg-dawn .about-page__stat-card::after {
  background:
    radial-gradient(
      115% 85% at 96% -6%,
      rgba(17, 166, 184, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      100% 72% at -4% 102%,
      rgba(152, 131, 131, 0.08) 0%,
      transparent 52%
    );
  opacity: 0.72;
}

.about-page__stats-grid--bg-dawn .about-page__stat-card:hover::before {
  filter: saturate(1.1) brightness(1.02);
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.82),
    inset 0 -18px 34px -16px rgba(17, 166, 184, 0.1),
    0 10px 30px -18px rgba(17, 166, 184, 0.22);
}

@media (min-width: 1100px) {
  .about-page__stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
}

/* «Чому обирають нас»: інтро 2 колонки + 3 картки (стат — фото — стат) */
.about-page__why-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  margin-bottom: clamp(36px, 5vw, 52px);
}

.about-page__why-title {
  margin: 0;
  font-size: clamp(28px, 2.2vw + 14px, 42px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-align: left;
  max-width: 22ch;
}

.about-page__why-intro-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  padding-top: 4px;
}

.about-page__why-lead {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--about-body);
  max-width: 48ch;
}

.about-page__why-cta {
  border-radius: 999px;
  padding-inline: 22px;
}

.about-page__why-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 22px);
  align-items: stretch;
}

.about-page__why-panel--stat,
.about-page__why-panel--visual {
  margin: 0;
  padding: clamp(22px, 2.5vw, 28px);
  border-radius: 10px;
  background:
    radial-gradient(
      120% 80% at 100% 0%,
      rgba(17, 166, 184, 0.06) 0%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.99) 0%,
      rgba(248, 250, 252, 0.97) 48%,
      rgba(241, 245, 249, 0.94) 100%
    );
  border: 1px solid rgba(51, 78, 94, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 18px 44px rgba(51, 78, 94, 0.07),
    0 6px 18px rgba(17, 166, 184, 0.05);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: clamp(300px, 42vw, 380px);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}

.about-page__why-panel--stat::before,
.about-page__why-panel--visual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(
    90deg,
    rgba(17, 166, 184, 0.95) 0%,
    rgba(120, 224, 238, 0.75) 42%,
    rgba(152, 131, 131, 0.85) 100%
  );
  z-index: 4;
  pointer-events: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .about-page__why-panel--stat:hover,
  .about-page__why-panel--visual:hover {
    border-color: rgba(17, 166, 184, 0.22);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 24px 56px rgba(51, 78, 94, 0.1),
      0 10px 28px rgba(17, 166, 184, 0.09);
  }
}

.about-page__why-panel--stat .about-page__why-panel-body,
.about-page__why-panel--visual .about-page__why-panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  transition:
    opacity 0.38s ease,
    visibility 0.38s ease;
}

.about-page__why-panel-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(22px, 2.5vw, 28px);
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.42s ease,
    visibility 0.42s ease;
  pointer-events: none;
}

.about-page__why-hover-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  transform: scale(1);
  transition: transform 0.55s ease;
}

.about-page__why-panel-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(241, 245, 249, 0.5) 0%,
    rgba(var(--about-slate-mid), 0.28) 32%,
    rgba(var(--about-slate-deep), 0.42) 52%,
    rgba(var(--about-slate-deep), 0.52) 100%
  );
}

.about-page__why-hover-badge,
.about-page__why-panel-hover .about-page__why-tags {
  position: relative;
  z-index: 2;
}

.about-page__why-hover-badge {
  margin: 0;
  align-self: center;
  max-width: 96%;
  text-align: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: clamp(12px, 0.35vw + 11px, 14px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
  transform: scale(1);
  transition:
    box-shadow 0.4s ease,
    transform 0.45s ease;
}

.about-page__why-panel-hover .about-page__why-tags {
  margin-top: auto;
}

.about-page__why-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.about-page__why-panel-title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: clamp(16px, 0.5vw + 15px, 18px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--about-heading);
}

.about-page__why-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--brand);
  text-decoration: none;
  border: 1px solid rgba(17, 166, 184, 0.28);
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(236, 252, 253, 0.92) 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 6px 16px rgba(17, 166, 184, 0.08);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.about-page__why-pill:hover {
  border-color: rgba(17, 166, 184, 0.45);
  background: #fff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 8px 20px rgba(17, 166, 184, 0.12);
}

.about-page__why-rule {
  height: 1px;
  margin: 18px 0 16px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(17, 166, 184, 0.22) 22%,
    rgba(152, 131, 131, 0.2) 78%,
    transparent 100%
  );
}

.about-page__why-panel-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.62;
  color: var(--about-body);
  flex: 1;
}

.about-page__why-panel-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 20px;
}

.about-page__why-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(236, 252, 253, 0.65) 100%
  );
  border: 1px solid rgba(17, 166, 184, 0.18);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 10px 26px rgba(51, 78, 94, 0.07);
  color: var(--brand-2);
}

.about-page__why-stat-icon svg {
  width: 24px;
  height: 24px;
}

.about-page__why-stat-block {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 4px;
}

.about-page__why-stat-num {
  font-size: clamp(32px, 3vw + 18px, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--about-heading);
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* До появи в зоні видимості: легке приховування рядка метрик */
[data-why-stats]:not(.about-page__why--stats-active)
  .about-page__why-panel-foot {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}

[data-why-stats].about-page__why--stats-active .about-page__why-panel-foot {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.62s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-why-stats].about-page__why--stats-active
  .about-page__why-trio
  > :nth-child(1)
  .about-page__why-panel-foot {
  transition-delay: 0.03s;
}

[data-why-stats].about-page__why--stats-active
  .about-page__why-trio
  > :nth-child(2)
  .about-page__why-panel-foot {
  transition-delay: 0.1s;
}

[data-why-stats].about-page__why--stats-active
  .about-page__why-trio
  > :nth-child(3)
  .about-page__why-panel-foot {
  transition-delay: 0.17s;
}

@media (prefers-reduced-motion: reduce) {
  [data-why-stats] .about-page__why-panel-foot {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.about-page__why-stat-label {
  font-size: 12px;
  line-height: 1.35;
  color: var(--about-body);
  max-width: 22ch;
}

.about-page__why-visual-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.42s ease,
    visibility 0.42s ease;
  pointer-events: none;
}

.about-page__why-visual-media {
  position: absolute;
  inset: 0;
}

.about-page__why-visual-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.55s ease;
}

.about-page__why-visual-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 2.5vw, 24px);
  pointer-events: none;
  /* Базовий вигляд як на референсі: світліший верх → глибокий низ */
  background: linear-gradient(
    180deg,
    rgba(248, 250, 252, 0.58) 0%,
    rgba(var(--about-slate-mid), 0.26) 32%,
    rgba(var(--about-slate-deep), 0.4) 52%,
    rgba(var(--about-slate-deep), 0.55) 100%
  );
  transition: background 0.45s ease;
}

.about-page__why-visual-badge {
  margin: 0;
  align-self: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14);
  transition:
    box-shadow 0.4s ease,
    transform 0.45s ease;
}

@media (hover: hover) {
  .about-page__why-panel--stat:hover .about-page__why-panel-hover {
    opacity: 1;
    visibility: visible;
  }

  .about-page__why-panel--stat:hover .about-page__why-panel-body {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .about-page__why-panel--stat:hover .about-page__why-hover-img {
    transform: scale(1.07);
  }

  .about-page__why-panel--stat:hover .about-page__why-hover-badge {
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.22);
    transform: scale(1.04);
  }

  .about-page__why-panel--stat:hover .about-page__why-tags {
    transform: translateY(-5px);
  }

  .about-page__why-panel--visual:hover .about-page__why-visual-backdrop {
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }

  .about-page__why-panel--visual:hover .about-page__why-panel-body {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .about-page__why-panel--visual:hover .about-page__why-visual-overlay {
    background: linear-gradient(
      180deg,
      rgba(241, 245, 249, 0.38) 0%,
      rgba(var(--about-slate-mid), 0.32) 34%,
      rgba(var(--about-slate-deep), 0.48) 52%,
      rgba(var(--about-slate-deep), 0.58) 100%
    );
  }

  .about-page__why-panel--visual:hover .about-page__why-visual-badge {
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.22);
    transform: scale(1.04);
  }

  .about-page__why-panel--visual:hover .about-page__why-visual-img {
    transform: scale(1.07);
  }

  .about-page__why-panel--visual:hover .about-page__why-tags {
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page__why-panel--stat .about-page__why-panel-body,
  .about-page__why-panel--visual .about-page__why-panel-body,
  .about-page__why-panel-hover,
  .about-page__why-visual-backdrop,
  .about-page__why-visual-overlay,
  .about-page__why-visual-badge,
  .about-page__why-visual-img,
  .about-page__why-hover-img,
  .about-page__why-hover-badge,
  .about-page__why-tags {
    transition: none;
  }

  .about-page__why-panel--visual:hover .about-page__why-visual-img,
  .about-page__why-panel--visual:hover .about-page__why-visual-badge,
  .about-page__why-panel--visual:hover .about-page__why-tags,
  .about-page__why-panel--stat:hover .about-page__why-hover-img,
  .about-page__why-panel--stat:hover .about-page__why-hover-badge,
  .about-page__why-panel--stat:hover .about-page__why-tags {
    transform: none;
  }
}

.about-page__why-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-end;
  margin-top: auto;
  transition: transform 0.45s ease;
}

.about-page__why-tag {
  display: inline-flex;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
  color: var(--brand);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.about-page__why-tag--glass {
  background: rgba(255, 255, 255, 0.38);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Повноширинний блок «цінності»: макет як на сторінці послуг (текст + список + рейка) */
.about-page__inner > .about-page__block--values.section {
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.about-page__values-showcase {
  margin: 0;
  padding: 0;
}

.about-page__values-showcase-bg {
  position: relative;
  overflow: hidden;
  min-height: clamp(520px, 78vh, 820px);
  background-color: var(--brand);
}

.about-page__values-showcase-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.about-page__values-showcase-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.04);
  filter: saturate(1) contrast(1.02) brightness(0.96);
}

.about-page__values-showcase-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      125deg,
      rgba(255, 252, 250, 0.22) 0%,
      rgba(255, 255, 255, 0.08) 38%,
      transparent 58%
    ),
    radial-gradient(
      820px 340px at 12% 18%,
      rgba(152, 131, 131, 0.16),
      transparent 58%
    ),
    radial-gradient(
      900px 420px at 88% 28%,
      rgba(92, 129, 149, 0.12),
      transparent 54%
    ),
    radial-gradient(
      ellipse 95% 62% at 50% 30%,
      rgba(0, 0, 0, 0.03) 0%,
      transparent 55%
    ),
    linear-gradient(
      112deg,
      rgba(51, 78, 94, 0.52) 0%,
      rgba(51, 78, 94, 0.42) 42%,
      rgba(var(--about-slate-deep), 0.5) 100%
    );
}

.about-page__values-showcase-shell {
  position: relative;
  z-index: 2;
  min-height: clamp(520px, 78vh, 820px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 8vw, 96px) 0 clamp(88px, 11vw, 120px);
}

.about-page__values-showcase-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
  width: 100%;
  min-height: min(58vh, 560px);
}

.about-page__values-showcase-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-page__values-showcase-eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.about-page__values-showcase-title {
  margin: 0 0 clamp(18px, 2.8vw, 26px);
  max-width: 22ch;
  font-family: var(--font-heading);
  font-size: clamp(28px, 2.6vw + 12px, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  color: rgba(255, 255, 255, 0.98);
  text-shadow:
    0 1px 2px rgba(30, 47, 58, 0.35),
    0 14px 36px rgba(0, 0, 0, 0.18);
}

.about-page__values-showcase-lead {
  margin: 0 0 clamp(14px, 2vw, 18px);
  max-width: 46ch;
  font-size: clamp(14px, 0.65vw + 13px, 17px);
  line-height: 1.65;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 18px rgba(30, 47, 58, 0.35);
}

.about-page__values-showcase-lead:last-child {
  margin-bottom: 0;
}

.about-page__values-showcase-aside {
  justify-self: end;
  width: 100%;
  max-width: 400px;
}

.about-page__values-showcase-nav {
  display: flex;
  align-items: stretch;
  gap: clamp(18px, 3vw, 28px);
  justify-content: flex-end;
}

.about-page__values-showcase-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.about-page__values-showcase-item {
  display: block;
  width: auto;
  padding: 10px 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: clamp(15px, 0.9vw + 12px, 19px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.42);
  text-align: right;
  line-height: 1.25;
  transition:
    color 0.2s ease,
    font-weight 0.2s ease;
}

.about-page__values-showcase-item:hover,
.about-page__values-showcase-item:focus-visible {
  color: rgba(255, 255, 255, 0.9);
  outline: none;
}

.about-page__values-showcase-item.is-active {
  font-weight: 800;
  color: rgba(255, 255, 255, 0.98);
}

.about-page__values-showcase-item:focus-visible {
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

.about-page__values-showcase-rail {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  align-self: stretch;
  min-height: 140px;
}

.about-page__values-showcase-rail-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: 0;
  background: rgba(255, 255, 255, 0.45);
}

.about-page__values-showcase-rail-thumb {
  position: absolute;
  left: 50%;
  top: 0;
  width: 5px;
  height: 26px;
  margin-left: -2.5px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .about-page__values-showcase-rail-thumb {
    transition: none;
  }
}

.about-page__values-showcase-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 5vw, 40px);
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.48);
  pointer-events: none;
}

.about-page__values-showcase-scroll-icon {
  width: 30px;
  height: auto;
  display: block;
}

@media (max-width: 960px) {
  /*
    Блок стоїть у .container.about-page__inner: на мобільному надійніше
    «вирівнювати» по краю в’юпорту через margin, без transform (менше зсувів).
    Оболонка без зовнішніх полів .container — контент на всю ширину секції.
  */
  .about-page__inner > .about-page__block--values.section {
    left: auto;
    transform: none;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .about-page__block--values .about-page__values-showcase-shell.container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  /* Кадр орієнтуємо на праву частину фото (cover на вузькому екрані) */
  .about-page__values-showcase-img {
    object-position: 80% 30%;
  }

  .about-page__values-showcase-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    align-items: center;
    gap: clamp(36px, 8vw, 52px);
  }

  /* Як на референсі: текст по центру вузькою колонкою */
  .about-page__values-showcase-copy {
    text-align: center;
    align-items: center;
    width: 100%;
    max-width: min(36rem, 100%);
    margin-inline: auto;
  }

  .about-page__values-showcase-title {
    margin-left: auto;
    margin-right: auto;
    max-width: 22ch;
  }

  .about-page__values-showcase-lead {
    margin-left: auto;
    margin-right: auto;
  }

  /* Центрований кластер «список + рейка», пункти впритул до лінії */
  .about-page__values-showcase-aside {
    justify-self: center;
    max-width: none;
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  .about-page__values-showcase-nav {
    justify-content: center;
    width: auto;
    max-width: 100%;
  }

  .about-page__values-showcase-list {
    align-items: flex-end;
  }

  .about-page__values-showcase-item {
    text-align: right;
  }
}

.about-page__tech {
  position: relative;
  margin: 0;
  padding: clamp(32px, 5vw, 48px) clamp(22px, 4vw, 40px);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(51, 78, 94, 0.1);
  background:
    radial-gradient(
      ellipse 120% 85% at 100% -5%,
      rgba(17, 166, 184, 0.12) 0%,
      transparent 52%
    ),
    radial-gradient(
      ellipse 95% 75% at 0% 105%,
      rgba(152, 131, 131, 0.1) 0%,
      transparent 56%
    ),
    linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(248, 251, 252, 0.94) 45%,
      rgba(241, 246, 249, 0.97) 100%
    );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 2px 1px rgba(51, 78, 94, 0.035),
    0 22px 50px -22px rgba(51, 78, 94, 0.13),
    0 10px 28px -14px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.about-page__tech::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(
    90deg,
    var(--brand) 0%,
    var(--brand-2) 45%,
    rgba(152, 131, 131, 0.55) 100%
  );
}

.about-page__tech-inner {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 28px);
  text-align: center;
}

.about-page__tech-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.about-page__tech-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  color: var(--brand);
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(236, 244, 248, 0.96) 100%
  );
  border: 1px solid rgba(51, 78, 94, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 10px 26px rgba(51, 78, 94, 0.09);
}

.about-page__tech-icon svg {
  width: 26px;
  height: 26px;
}

.about-page__tech-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--shirt-tone);
}

.about-page__tech-title {
  margin: 0;
  font-size: clamp(24px, 1.8vw + 14px, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--about-heading);
  max-width: 20ch;
  margin-inline: auto;
}

.about-page__tech-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about-page__tech-body .about-page__prose {
  text-align: center;
  max-width: 56ch;
  margin-inline: auto;
}

.about-page__tech-lead {
  font-size: clamp(15px, 0.45vw + 14px, 17px);
  line-height: 1.72;
  font-weight: 500;
}

.about-page__cta {
  margin: 0;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  /* Фон у ритмі з footer */
  background:
    radial-gradient(
      560px 220px at 82% 0%,
      rgba(120, 224, 238, 0.2) 0%,
      transparent 62%
    ),
    radial-gradient(
      720px 320px at 18% 8%,
      rgba(17, 166, 184, 0.18) 0%,
      transparent 55%
    ),
    radial-gradient(
      880px 360px at 14% 0%,
      rgba(152, 131, 131, 0.16) 0%,
      transparent 56%
    ),
    linear-gradient(
      165deg,
      rgb(8, 42, 58) 0%,
      rgb(11, 74, 95) 28%,
      rgb(22, 95, 108) 52%,
      rgb(18, 78, 90) 78%,
      rgb(10, 38, 48) 100%
    );
  color: rgba(255, 255, 255, 0.96);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.about-page__cta-text {
  margin: 0;
  font-size: clamp(17px, 1.2vw + 14px, 21px);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.35;
  max-width: 36ch;
}

.about-page__cta .button {
  flex-shrink: 0;
}

.about-page__cta .button--primary {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--brand);
  box-shadow: none;
}

.about-page__cta .button--primary:hover {
  background: #fff;
  color: var(--brand);
}

@media (max-width: 820px) {
  .about-page__story-grid {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 3vw, 28px);
    align-items: stretch;
  }

  .about-page__story-text {
    display: contents;
  }

  .about-page__story-grid .about-page__section-eyebrow {
    order: 1;
  }

  .about-page__story-grid .about-page__section-title {
    order: 2;
  }

  .about-page__story-grid .about-page__story-media {
    order: 3;
  }

  .about-page__story-grid .about-page__section-lead {
    order: 4;
  }

  .about-page__story-grid .about-page__prose {
    order: 5;
  }

  .about-page__why-intro {
    grid-template-columns: 1fr;
  }

  .about-page__why-title {
    max-width: none;
  }

  .about-page__why-trio {
    grid-template-columns: 1fr;
  }

  .about-page__why-panel--stat,
  .about-page__why-panel--visual {
    min-height: 0;
  }

  .about-page__why-panel--visual {
    order: -1;
  }
}

@media (max-width: 560px) {
  .about-page__stats-grid {
    grid-template-columns: 1fr;
  }

  .about-page__stat-card:hover {
    transform: none;
  }

  .about-page__stat-card:hover .about-page__stat-card-icon {
    transform: none;
  }

  .about-page__inner {
    padding: 40px 0 56px;
    gap: 48px;
  }

  .about-page__cta {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .about-page__cta-text {
    max-width: none;
  }

  .about-page__cta .button {
    width: 100%;
    justify-content: center;
  }
}