/* =========================================================
   Screen 05 — «Эксперт внутри коммерческой системы» (dark, owner)
   ========================================================= */

.s05 {
  --u: clamp(.74px, .06944vw, 1px); /* 1px at 1440, floor .74px */
  --s05-h: clamp(760px, 62.5vw, 900px);
  min-height: var(--s05-h);
  padding: clamp(48px, 4.6vw, 66px) 0 clamp(40px, 4vw, 56px);
  background: #09090b;
  color: #fff;
}
.s05__scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  margin: 0;
  overflow: hidden;
}
.s05__scene img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 32%;
}
.s05__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 9, 11, 0) 64%, rgba(9, 9, 11, .88) 100%),
    linear-gradient(90deg, #09090b 0%, rgba(9, 9, 11, .96) 36%, rgba(9, 9, 11, .76) 50%, rgba(9, 9, 11, .10) 63%, rgba(9, 9, 11, 0) 75%);
  pointer-events: none;
}
.s05__inner { position: relative; z-index: 1; }

/* — copy column — */
.s05__copy { max-width: 620px; }
.s05__title {
  margin: clamp(22px, 2.6vw, 38px) 0 clamp(18px, 2vw, 30px);
  max-width: 13em;
  font-size: clamp(31px, 3.5vw, 50px);
  line-height: 1.12;
  letter-spacing: -.025em;
  color: #f8f7f3;
}
.s05__lead { max-width: 610px; font-size: clamp(15.5px, .5vw + 12px, 19px); color: rgba(255, 255, 255, .84); }

.s05__proof {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(16px, 1.6vw, 24px);
  align-items: start;
  margin: clamp(26px, 3vw, 44px) 0 clamp(22px, 2.4vw, 34px);
}
.s05__years {
  margin: 0;
  font-size: clamp(52px, 5.4vw, 78px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.04em;
}
.s05__proof-list { margin: 0; padding-top: .35em; }
.s05__proof-list dt {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.s05__proof-list dd { margin: 0; }
.s05__proof-list dd.strong { margin-top: 8px; font-size: clamp(15.5px, .3vw + 12px, 19px); font-weight: 700; }
.s05__proof-list dd.muted { margin-top: 6px; font-size: clamp(14px, .2vw + 12px, 15.5px); line-height: 1.5; color: rgba(255, 255, 255, .70); }
.s05__proof-list dd.muted + dd.muted { margin-top: 0; color: rgba(255, 255, 255, .58); }

.s05__assure { max-width: 560px; }
.s05__assure strong { display: block; font-size: clamp(18px, .7vw + 14px, 24px); font-weight: 700; line-height: 1.25; }
.s05__assure span { display: block; margin-top: 8px; font-size: clamp(15px, .4vw + 12px, 18px); line-height: 1.45; color: rgba(255, 255, 255, .78); text-wrap: pretty; }

.s05__cta { margin-top: clamp(28px, 3.4vw, 50px); }
.s05__cta-note { margin-top: 22px; font-size: clamp(15px, .3vw + 12px, 17px); }

/* — proof objects (desktop) — */
.s05__objects { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.pobj {
  position: absolute;
  box-sizing: border-box;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 15px 14px rgba(0, 0, 0, .58));
  font-size: calc(10 * var(--u));
  line-height: 1;
}
.pobj *, .pobj { text-shadow: none; }

/* 1. Yandex Direct plate */
.pobj--ya {
  left: 78.5%;
  top: 8.4%;
  width: calc(250 * var(--u));
  height: calc(114 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 calc(7 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #f6f4ef;
  color: #151517;
  transform: rotate(2deg);
  text-align: center;
}
.pobj--ya::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(7 * var(--u));
  border-radius: calc(3 * var(--u));
  background: var(--red);
}
.pobj--ya .ya-line { display: flex; align-items: baseline; justify-content: center; margin-top: calc(12 * var(--u)); white-space: nowrap; }
.pobj--ya .ya-line b { font-size: calc(52 * var(--u)); font-weight: 800; color: var(--red); letter-spacing: -.02em; }
.pobj--ya .ya-line span { font-size: calc(22 * var(--u)); font-weight: 700; margin-left: 1px; }
.pobj--ya small {
  display: block;
  margin-top: calc(9 * var(--u));
  font-size: max(8.5px, calc(10.5 * var(--u)));
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(21, 21, 23, .70);
  white-space: nowrap;
}
.pobj--ya small + small { margin-top: calc(7 * var(--u)); color: rgba(21, 21, 23, .56); }

/* 2. commercial-orientation glass panel */
.pobj--goal {
  left: 80.6%;
  top: 29.8%;
  width: calc(230 * var(--u));
  height: calc(142 * var(--u));
  border-radius: calc(8 * var(--u));
  background: linear-gradient(135deg, rgba(36, 37, 42, .96), rgba(16, 17, 20, .92));
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  transform: rotate(1deg);
  text-align: center;
  padding-top: calc(17 * var(--u));
}
.pobj--goal small { display: block; font-size: max(8.5px, calc(11.5 * var(--u))); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: rgba(255, 255, 255, .68); white-space: nowrap; }
.pobj--goal b { display: block; margin-top: calc(12 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 700; white-space: nowrap; }
.pobj--goal em { display: block; margin-top: calc(10 * var(--u)); font-size: max(9px, calc(13 * var(--u))); font-style: normal; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--red-bright); white-space: nowrap; }
.pobj--goal svg { position: absolute; left: calc(24 * var(--u)); bottom: calc(10 * var(--u)); width: calc(122 * var(--u)); height: calc(36 * var(--u)); overflow: visible; }

/* 3. selling-site browser card */
.pobj--site {
  left: 48.9%;
  top: 63.8%;
  width: calc(324 * var(--u));
  height: calc(216 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #f6f4ef;
  color: #171719;
  transform: rotate(-4deg);
  overflow: hidden;
  text-align: center;
}
.pobj--site .dots { position: absolute; left: calc(14 * var(--u)); top: calc(16 * var(--u)); display: flex; gap: calc(6 * var(--u)); }
.pobj--site .dots i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #d4d0c8; }
.pobj--site .dots i:first-child { background: var(--red); }
.pobj--site .bar-title { display: block; padding-top: calc(11 * var(--u)); font-size: max(9.5px, calc(13.5 * var(--u))); font-weight: 700; letter-spacing: .045em; text-transform: uppercase; }
.pobj--site .bar-sub { display: block; margin-top: calc(6 * var(--u)); font-size: max(8px, calc(10.2 * var(--u))); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: rgba(23, 23, 25, .62); white-space: nowrap; }
.pobj--site .body { position: absolute; left: 0; right: 0; bottom: 0; height: calc(168 * var(--u)); background: #111216; }
.pobj--site .panel {
  position: absolute; left: calc(18 * var(--u)); right: calc(18 * var(--u)); top: calc(16 * var(--u));
  height: calc(100 * var(--u)); border-radius: calc(4 * var(--u)); background: #f5f2eb;
}
.pobj--site .panel small { display: block; padding-top: calc(17 * var(--u)); font-size: max(8px, calc(10.5 * var(--u))); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--red); }
.pobj--site .panel b { display: block; margin-top: calc(9 * var(--u)); font-size: calc(21 * var(--u)); font-weight: 700; color: #151517; white-space: nowrap; }
.pobj--site .panel em { display: inline-block; margin-top: calc(10 * var(--u)); padding: 0 calc(18 * var(--u)); height: calc(26 * var(--u)); line-height: calc(26 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--red); color: #fff; font-style: normal; font-size: max(8px, calc(10.5 * var(--u))); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.pobj--site .tiles { position: absolute; left: calc(18 * var(--u)); right: calc(18 * var(--u)); bottom: calc(11 * var(--u)); display: flex; gap: calc(13 * var(--u)); }
.pobj--site .tiles i { flex: 1; height: calc(33 * var(--u)); border-radius: calc(3 * var(--u)); background: #24252a; position: relative; }
.pobj--site .tiles i::before, .pobj--site .tiles i::after { content: ""; position: absolute; left: calc(12 * var(--u)); height: calc(3 * var(--u)); background: rgba(255, 255, 255, .56); }
.pobj--site .tiles i::before { top: calc(10 * var(--u)); width: 68%; }
.pobj--site .tiles i::after { top: calc(20 * var(--u)); width: 48%; background: rgba(255, 255, 255, .22); }

/* 4. CRM lead board */
.pobj--crm {
  left: 75.7%;
  top: 59.1%;
  width: calc(256 * var(--u));
  height: calc(206 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #f6f4ef;
  color: #171719;
  transform: rotate(3deg);
  text-align: center;
}
.pobj--crm .crm-title { display: block; padding-top: calc(11 * var(--u)); font-size: max(9px, calc(12.5 * var(--u))); font-weight: 700; letter-spacing: .045em; text-transform: uppercase; color: var(--red); }
.pobj--crm .crm-sub { display: block; margin-top: calc(6 * var(--u)); font-size: max(8px, calc(10.5 * var(--u))); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(23, 23, 25, .66); }
.pobj--crm .board {
  position: absolute; left: calc(13 * var(--u)); right: calc(13 * var(--u)); top: calc(48 * var(--u)); height: calc(141 * var(--u));
  border-radius: calc(4 * var(--u)); background: #ece9e2;
  display: grid; grid-template-columns: 60fr 70fr 60fr; gap: calc(7 * var(--u)) calc(10 * var(--u));
  padding: calc(12 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u));
  grid-template-rows: auto 1fr 1fr;
  text-align: left;
}
.pobj--crm .board small { font-size: max(6.5px, calc(8.5 * var(--u))); font-weight: 700; text-transform: uppercase; color: #171719; letter-spacing: .02em; }
.pobj--crm .board i { position: relative; display: block; border-radius: calc(3 * var(--u)); background: #fff; }
.pobj--crm .board i::before { content: ""; position: absolute; left: calc(9 * var(--u)); top: calc(9 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: var(--red); }
.pobj--crm .board i::after { content: ""; position: absolute; left: calc(9 * var(--u)); top: calc(21 * var(--u)); width: 60%; height: calc(3 * var(--u)); background: rgba(23, 23, 25, .24); box-shadow: 0 calc(-12 * var(--u)) 0 calc(9 * var(--u)) transparent; }
.pobj--crm .board i.dim::before { display: none; }
.pobj--crm .board i.dim::after { top: calc(12 * var(--u)); }
.pobj--crm .board-foot { position: absolute; left: calc(13 * var(--u)); right: calc(13 * var(--u)); bottom: calc(8 * var(--u)); height: calc(4 * var(--u)); background: var(--red); }

/* 5. owner lockup */
.s05__lockup {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  top: 86.4%;
  margin: 0;
  padding-left: 20px;
  border-left: 4px solid var(--red);
  text-shadow: 0 2px 4px rgba(0, 0, 0, .7);
  white-space: nowrap;
}
.s05__lockup small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--red-bright); }
.s05__lockup b { display: block; margin-top: 8px; font-size: 20px; font-weight: 700; }
.s05__lockup span { display: block; margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .70); }

/* mobile-only pieces */
.s05__portrait, .s05__name, .s05__chips { display: none; }

/* =========================================================
   Stacked states (< 900): mobile art direction scaled
   ========================================================= */
@media (max-width: 899px) {
  .s05 { min-height: 0; padding: clamp(36px, 6vw, 48px) 0 clamp(40px, 6vw, 56px); }
  .s05__scene, .s05__objects, .s05__lockup { display: none; }
  .s05__inner { position: relative; }

  .s05__portrait {
    display: block;
    position: absolute;
    z-index: 0;
    right: calc(-1 * var(--gutter) + 0px);
    top: -14px;
    width: clamp(280px, 46vw, 400px);
    aspect-ratio: 288 / 360;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .s05__portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 55% 18%; }
  .s05__portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(11, 11, 13, 0) 68%, #0b0b0d 100%),
      linear-gradient(90deg, #0b0b0d 0%, rgba(11, 11, 13, .88) 40%, rgba(11, 11, 13, 0) 66%);
  }
  .s05__copy { position: relative; z-index: 1; max-width: none; }
  .s05__title { max-width: 8.4em; font-size: clamp(28.5px, 5vw, 40px); margin: 16px 0 18px; }
  .s05__name { display: block; margin: 0 0 14px; }
  .s05__name b { display: block; font-size: 16px; font-weight: 700; }
  .s05__name span { display: block; margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, .64); }
  .s05__lead { max-width: 20em; font-size: 15.5px; }
  .s05__lead .only-mobile { display: inline; }
  .s05__lead .only-desktop { display: none; }

  .s05__chips {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: 420px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 1;
  }
  .chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 68px;
    padding: 10px 6px;
    border-radius: 6px;
    background: linear-gradient(135deg, #24252a, #111215);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    text-align: center;
    white-space: nowrap;
  }
  .chip b { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
  .chip small { font-size: 8.8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
  .chip svg { width: 28px; height: 20px; display: block; }
  .chip--ya { background: #f5f3ef; border-color: transparent; color: #151517; }
  .chip--ya b { display: inline-flex; align-items: baseline; }
  .chip--ya b i { font-style: normal; font-size: 22px; font-weight: 800; color: var(--red); margin-right: 2px; letter-spacing: -.02em; }
  .chip--ya small { color: rgba(21, 21, 23, .68); line-height: 1.5; }

  .s05__proof { margin: 26px 0 0; padding-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, .13); position: relative; z-index: 1; }
  .s05__years { font-size: 52px; }
  .s05__proof-list dt { font-size: 12px; }
  .s05__proof-list dd.strong { font-size: 15.5px; }
  .s05__proof-list dd.muted { font-size: 11.5px; }
  .s05__proof-list .only-mobile { display: inline; }
  .s05__proof-list .only-desktop { display: none; }
  .s05__assure { margin-top: 24px; position: relative; z-index: 1; }
  .s05__assure strong { font-size: 16.5px; }
  .s05__assure span { font-size: 14px; }
  .s05__cta { margin-top: 30px; position: relative; z-index: 1; }
  .s05__cta-note { font-size: 13.5px; margin-top: 18px; }
  .s05__cta-note .only-mobile { display: inline; }
  .s05__cta-note .only-desktop { display: none; }
}
@media (max-width: 599px) {
  .s05 { padding: 30px 0 44px; }
  .s05__portrait { width: 288px; right: -20px; top: -20px; }
  .s05__title { font-size: 28.5px; line-height: 1.12; margin: 14px 0 16px; }
  .s05__chips { max-width: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .s05__title { max-width: 11em; }
  .s05__portrait::after {
    background:
      linear-gradient(180deg, rgba(11, 11, 13, 0) 68%, #0b0b0d 100%),
      linear-gradient(90deg, #0b0b0d 0%, rgba(11, 11, 13, .8) 30%, rgba(11, 11, 13, 0) 60%);
  }
}