/*
 * product.css — components for product pages (/products/*)
 *
 * Loaded after main.min.css and custom.css. Everything here is namespaced
 * with the `p-` prefix so it can never collide with the site's existing
 * BEM-ish classes. Colors and type are inherited from the corporate site:
 * blue #3d58b0 headings, green #2dcb70 accents, system sans stack.
 */

:root {
  --p-blue: #3d58b0;
  --p-blue-bright: #2f80ed;
  --p-blue-deep: #31468d;
  --p-green: #2dcb70;
  --p-amber: #ffa800;
  --p-ink: #333;
  --p-muted: #6c757d;
  --p-line: #e1e3ec;
  --p-surface: #f6f7fb;
  --p-radius: 10px;
}

/* ---------- typography ----------
 * The site sets body text to 1.15–1.25rem inside its sections (.sAbout p,
 * .sServises p, .sAboutCompany .lead), while the Bootstrap base stays at 1rem.
 * Product pages opt into the same larger scale so they don't read as smaller
 * than the rest of the site.
 */

.p-page { font-size: 1.125rem; line-height: 1.6; }
.p-page p { font-size: 1.125rem; line-height: 1.6; }

/* ---------- breadcrumbs ---------- */

.p-crumbs {
  font-size: 1rem;
  color: var(--p-muted);
  padding: 1.25rem 0 1rem;
}
.p-crumbs a { color: var(--p-muted); text-decoration: none; }
.p-crumbs a:hover { color: var(--p-blue); text-decoration: underline; }
.p-crumbs span[aria-current] { color: var(--p-ink); }
.p-crumbs__sep { margin: 0 0.5rem; opacity: 0.5; }

/* ---------- hero ----------
 * Built to the same proportions as the site's own `.page-head`: an oversized
 * uppercase h1 in the corporate blue, a heavy lead, and the site's outline
 * shape sitting behind the content. The shape is the same artwork the home
 * page uses, served as a file so the markup stays readable.
 */

.p-hero { position: relative; overflow: hidden; }
.p-hero__grid { position: relative; z-index: 2; }
.p-hero h1 {
  color: var(--p-blue);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(2.625rem, 1rem + 5vw, 5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}
.p-hero__lead {
  font-size: clamp(1.25rem, 1rem + 0.75vw, 1.625rem);
  font-weight: 600;
  line-height: 1.35;
  max-width: 26ch;
  margin-bottom: 1.75rem;
}
.p-hero__col { display: flex; flex-direction: column; justify-content: center; }

/* The outline shape is decoration: it sits behind the screenshot, is clipped
   by the section, and never intercepts clicks. */
.p-hero__shape {
  position: absolute;
  top: -12%;
  right: -8%;
  width: 34rem;
  max-width: 60%;
  opacity: 0.14;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* Screenshot frame. The images are full-page captures, so the frame crops to
   the top of each one — that is where the interface actually is. */
.p-hero__shot { position: relative; z-index: 2; }
.p-shot--hero .p-shot__view { max-height: 26rem; }
.p-shot--hero { box-shadow: 0 1.25rem 3rem rgba(49, 70, 141, 0.18); }

@media (max-width: 991.98px) {
  .p-hero__shot { margin-top: 2.5rem; }
  .p-hero__lead { max-width: 40ch; }
  .p-shot--hero .p-shot__view { max-height: 18rem; }
}

/* ---------- section anchor navigation ----------
 * The page is long, so the section list sticks below the site header. The
 * header is itself sticky at z-index 100, so this sits under it and offsets
 * itself by the measured header height (--p-nav-top, set from JS).
 */

.p-nav {
  position: sticky;
  top: var(--p-nav-top, 3.75rem);
  z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--p-line);
  backdrop-filter: blur(6px);
}
.p-nav__list {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.p-nav__list::-webkit-scrollbar { display: none; }
.p-nav__list a {
  display: block;
  white-space: nowrap;
  padding: 0.875rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--p-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.p-nav__list a:hover { color: var(--p-blue); }
.p-nav__list a[aria-current="true"] { color: var(--p-blue); border-bottom-color: var(--p-blue); }

/* Anchors must clear both the site header and this bar. */
.p-page [id] { scroll-margin-top: calc(var(--p-nav-top, 3.75rem) + 3.5rem); }

/* ---------- buttons ----------
 * Geometry matches the site's `.main-btn` so product CTAs read as the same
 * control as the buttons on the rest of the site.
 */

.p-btn {
  display: inline-block;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.8rem 1.8rem;
  border-radius: var(--p-radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.p-btn--primary { background: var(--p-green); color: #fff; }
.p-btn--primary:hover { background: #24b061; color: #fff; }
.p-btn--ghost { border-color: var(--p-blue); color: var(--p-blue); background: transparent; }
.p-btn--ghost:hover { background: var(--p-blue); color: #fff; }

/* Actions wrap so the two CTAs stay on one row in a narrow hero column
   and stack cleanly only when there is genuinely no room. */
.p-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (max-width: 575.98px) {
  .p-hero__actions { display: block; }
  .p-btn { display: block; text-align: center; }
  .p-btn + .p-btn { margin-top: 0.75rem; }
}

/* ---------- section headings ---------- */

/* Weight 700 matches the site's own h2 rule in main.min.css. */
.p-h2 {
  color: var(--p-blue);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.p-sub { color: var(--p-muted); font-size: 1.25rem; line-height: 1.5; max-width: 62ch; margin-bottom: 2.5rem; }
.p-sub--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- key facts strip ---------- */

.p-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--p-line); border: 1px solid var(--p-line); border-radius: var(--p-radius); overflow: hidden; }
.p-facts__item { background: #fff; padding: 1.5rem 1.25rem; }
.p-facts__num { font-size: 2.25rem; font-weight: 800; color: var(--p-blue); line-height: 1.1; }
.p-facts__label { font-size: 1rem; color: var(--p-muted); margin-top: 0.35rem; }

@media (max-width: 767.98px) { .p-facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .p-facts { grid-template-columns: 1fr; } }

/* ---------- problem → solution pairs ---------- */

.p-pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.p-pair {
  border: 1px solid var(--p-line);
  border-left: 4px solid var(--p-green);
  border-radius: var(--p-radius);
  padding: 1.25rem 1.5rem;
  background: #fff;
}
.p-pair__was { color: var(--p-muted); font-size: 1rem; margin-bottom: 0.5rem; }
.p-pair__was b { color: var(--p-ink); font-weight: 600; }
.p-pair__now { font-weight: 600; font-size: 1.125rem; line-height: 1.45; }

@media (max-width: 767.98px) { .p-pairs { grid-template-columns: 1fr; } }

/* ---------- capability cards ---------- */

.p-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.p-cards--2 { grid-template-columns: repeat(2, 1fr); }
.p-card {
  background: #fff;
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.p-card__icon { width: 2rem; height: 2rem; color: var(--p-blue); margin-bottom: 0.875rem; }
.p-card__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; }
.p-card h3 { font-size: 1.25rem; font-weight: 700; color: var(--p-ink); margin-bottom: 0.625rem; }
.p-card ul { list-style: none; padding: 0; margin: 0; }
.p-card li { position: relative; padding-left: 1.25rem; margin-bottom: 0.625rem; font-size: 1.0625rem; line-height: 1.45; color: #4a4a4a; }
.p-card li:before { content: "—"; position: absolute; left: 0; color: var(--p-blue); }

@media (max-width: 991.98px) { .p-cards, .p-cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .p-cards, .p-cards--2 { grid-template-columns: 1fr; } }

/* ---------- lifecycle diagram (variant A signature) ---------- */

.p-cycle { position: relative; }
.p-cycle__track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; position: relative; }
.p-phase {
  position: relative;
  background: #fff;
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: 1.75rem 1.5rem 1.5rem;
}
.p-phase__step {
  position: absolute;
  top: -1rem;
  left: 1.5rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--p-blue);
  color: #fff;
  font-weight: 700;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-phase--archive .p-phase__step { background: var(--p-blue-deep); }
.p-phase h3 { font-size: 1.1875rem; font-weight: 700; text-transform: uppercase; color: var(--p-blue); margin: 0.5rem 0 0.875rem; }
.p-phase ul { list-style: none; padding: 0; margin: 0; }
.p-phase li { position: relative; padding-left: 1.375rem; margin-bottom: 0.625rem; font-size: 1.0625rem; line-height: 1.45; }
.p-phase li:before {
  content: "";
  position: absolute;
  left: 0; top: 0.5rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--p-green);
}
.p-phase__state {
  margin-top: 1rem;
  padding-top: 0.875rem;
  border-top: 1px dashed var(--p-line);
  font-size: 0.9375rem;
  color: var(--p-muted);
}
.p-phase__state b { color: var(--p-blue); font-weight: 600; }

@media (max-width: 991.98px) { .p-cycle__track { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- participant journey ----------
 * A real sequence, so the steps are numbered and joined by a rail. The rail
 * sits behind the icon discs and is cut after every fourth step, because the
 * grid wraps to a new row there.
 */

.p-journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.25rem 1.25rem; }
.p-journey__step { position: relative; text-align: center; }

.p-journey__step:before {
  content: "";
  position: absolute;
  top: 1.875rem;
  left: calc(50% + 2.25rem);
  right: calc(-50% + 2.25rem);
  height: 2px;
  background: var(--p-line);
  z-index: 1;
}
.p-journey__step:nth-child(4n):before, .p-journey__step:last-child:before { display: none; }

.p-journey__ico {
  position: relative;
  z-index: 2;
  width: 3.75rem;
  height: 3.75rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--p-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p-blue);
}
.p-journey__ico svg { width: 1.625rem; height: 1.625rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.p-journey__num {
  position: absolute;
  top: -0.375rem;
  right: -0.375rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--p-blue);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-journey__title { font-weight: 700; font-size: 1.0625rem; margin-bottom: 0.375rem; }
.p-journey__text { font-size: 1rem; line-height: 1.45; color: #4a4a4a; }

/* Last step is the payoff: give it the accent colour. */
.p-journey__step--final .p-journey__ico { border-color: var(--p-green); color: var(--p-green); }
.p-journey__step--final .p-journey__num { background: var(--p-green); }

@media (max-width: 991.98px) {
  .p-journey { grid-template-columns: repeat(2, 1fr); }
  .p-journey__step:nth-child(4n):before { display: block; }
  .p-journey__step:nth-child(2n):before { display: none; }
}
@media (max-width: 575.98px) {
  .p-journey { grid-template-columns: 1fr; gap: 1.5rem; }
  /* Icon on the left spanning both text rows, title and copy stacked beside it. */
  .p-journey__step {
    display: grid;
    grid-template-columns: 3.75rem 1fr;
    column-gap: 1rem;
    text-align: left;
    align-items: start;
  }
  .p-journey__step:before { display: none; }
  .p-journey__ico { margin: 0; grid-column: 1; grid-row: 1 / span 2; }
  .p-journey__title { grid-column: 2; grid-row: 1; }
  .p-journey__text { grid-column: 2; grid-row: 2; }
}

/* ---------- track record ---------- */

.p-record { display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; }
.p-record__num { font-size: 5rem; font-weight: 800; color: var(--p-blue); line-height: 1; }
.p-record__body { flex: 1 1 24rem; }

/* ---------- screens gallery (variant B signature) ---------- */

.p-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.p-tab {
  border: 1px solid var(--p-line);
  background: #fff;
  color: var(--p-ink);
  border-radius: 999px;
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.p-tab:hover { border-color: var(--p-blue); color: var(--p-blue); }
.p-tab[aria-selected="true"] { background: var(--p-blue); border-color: var(--p-blue); color: #fff; }

.p-shot {
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  overflow: hidden;
  background: #fff;
}
.p-shot__bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  background: var(--p-surface);
  border-bottom: 1px solid var(--p-line);
}
.p-shot__dot { width: 10px; height: 10px; border-radius: 50%; background: #d3d7e3; }
.p-shot__title { margin-left: 0.625rem; font-size: 0.8125rem; color: var(--p-muted); }
.p-shot img { display: block; width: 100%; height: auto; }
.p-shot__caption { padding: 1rem 1.25rem; font-size: 1.0625rem; color: #4a4a4a; border-top: 1px solid var(--p-line); }
.p-shot[hidden] { display: none; }

/* Captures are full pages, several of them very tall. The view crops them from
   the top so every tab keeps the same frame height instead of the page jumping
   by two screens when a tall shot is selected. The fade at the bottom reads as
   "this continues" rather than as a broken image. */
.p-shot__view { position: relative; max-height: 34rem; overflow: hidden; }
.p-shot__view:after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4rem;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

@media (max-width: 767.98px) { .p-shot__view { max-height: 20rem; } }

/* ---------- architecture diagram (variant C signature) ---------- */

.p-arch { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); padding: 2rem; }
.p-arch__perimeter {
  border: 2px dashed var(--p-blue-bright);
  border-radius: var(--p-radius);
  padding: 1.5rem;
  position: relative;
}
.p-arch__perimeter:before {
  content: "Контур заказчика";
  position: absolute;
  top: -0.75rem;
  left: 1.25rem;
  background: var(--p-surface);
  padding: 0 0.625rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--p-blue-bright);
}
.p-arch__row { display: grid; gap: 0.75rem; margin-bottom: 0.75rem; }
.p-arch__row--1 { grid-template-columns: 1fr; }
.p-arch__row--2 { grid-template-columns: repeat(2, 1fr); }
.p-arch__row--4 { grid-template-columns: repeat(4, 1fr); }
.p-svc {
  background: #fff;
  border: 1px solid var(--p-line);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  text-align: center;
}
.p-svc__name { font-weight: 700; font-size: 0.9375rem; color: var(--p-blue); }
.p-svc__role { font-size: 0.8125rem; color: var(--p-muted); margin-top: 0.2rem; }
.p-svc--edge { border-color: var(--p-blue-bright); border-width: 2px; }
.p-svc--data { background: #fbfcff; }
.p-arch__legend { margin-top: 1.25rem; font-size: 0.8125rem; color: var(--p-muted); }

@media (max-width: 767.98px) {
  .p-arch { padding: 1.25rem; }
  .p-arch__row--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- spec table ---------- */

.p-table-wrap { overflow-x: auto; border: 1px solid var(--p-line); border-radius: var(--p-radius); }
.p-table { width: 100%; border-collapse: collapse; min-width: 520px; background: #fff; }
.p-table th, .p-table td { padding: 0.875rem 1.25rem; text-align: left; border-bottom: 1px solid var(--p-line); font-size: 1.0625rem; }
.p-table thead th {
  background: var(--p-surface);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--p-blue);
}
.p-table tbody tr:last-child th, .p-table tbody tr:last-child td { border-bottom: 0; }
/* Right-align the amount column on the price table only — spec tables read
   as prose and must stay left-aligned. */
.p-table--price thead th:last-child,
.p-table--price td:last-child { text-align: right; white-space: nowrap; }
.p-table--price td:last-child { font-variant-numeric: tabular-nums; }
.p-table__pending { color: var(--p-muted); font-style: italic; }

/* ---------- roles ---------- */

.p-roles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
.p-role { border: 1px solid var(--p-line); border-radius: var(--p-radius); padding: 1.125rem; background: #fff; }
.p-role__name { font-weight: 700; color: var(--p-blue); font-size: 1.0625rem; margin-bottom: 0.375rem; }
.p-role__desc { font-size: 0.9375rem; color: var(--p-muted); line-height: 1.45; }

@media (max-width: 1199.98px) { .p-roles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575.98px) { .p-roles { grid-template-columns: 1fr; } }

/* ---------- documents ---------- */

.p-docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.p-doc {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: 1.25rem;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.p-doc:hover { border-color: var(--p-blue); box-shadow: 0 4px 16px rgba(61, 88, 176, 0.08); color: inherit; }
.p-doc__ico {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
  border-radius: 6px;
  background: rgba(61, 88, 176, 0.08);
  color: var(--p-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.03em;
}
/* Both are spans inside a span, so they need to be blocks to stack. */
.p-doc__name { display: block; font-weight: 600; font-size: 1.0625rem; line-height: 1.35; margin-bottom: 0.25rem; }
.p-doc__meta { display: block; font-size: 0.9375rem; color: var(--p-muted); }

@media (max-width: 991.98px) { .p-docs { grid-template-columns: 1fr; } }

/* ---------- callout / CTA band ---------- */

.p-cta {
  background: linear-gradient(135deg, var(--p-blue) 0%, var(--p-blue-bright) 100%);
  border-radius: var(--p-radius);
  padding: 2.5rem;
  color: #fff;
}
.p-cta h2 { color: #fff; text-transform: uppercase; font-weight: 700; margin-bottom: 0.75rem; }
.p-cta p { color: rgba(255, 255, 255, 0.85); font-size: 1.1875rem; line-height: 1.55; max-width: 60ch; margin-bottom: 1.75rem; }
.p-cta .p-btn--ghost { border-color: #fff; color: #fff; }
.p-cta .p-btn--ghost:hover { background: #fff; color: var(--p-blue); }

/* ---------- misc ---------- */

.p-note {
  border-left: 3px solid var(--p-amber);
  background: #fffaf0;
  padding: 1rem 1.25rem;
  border-radius: 0 var(--p-radius) var(--p-radius) 0;
  font-size: 1.0625rem;
}
.p-bg-surface { background: var(--p-surface); }

/* Anchor links in the section bar scroll rather than jump, unless the visitor
   asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Accessibility: honour reduced-motion for anything animated on these pages. */
@media (prefers-reduced-motion: reduce) {
  .p-btn, .p-tab, .p-doc, .p-nav__list a { transition: none; }
}