:root { --u: 1px; }
@media (max-width: 1039px) { :root { --u: calc(100vw / 1040); } }
@media (max-width: 767px)  { :root { --u: min(calc(100vw / 393), 1.15px); } }

/* ============================================================
   Alexey Efimenko — personal landing
   Design frame: calc(1536 * var(--u)), content container: calc(992 * var(--u)), bg #000
   All metrics measured from desk.png (scale 1.7953)
   ============================================================ */

:root {
  --green:  #B9FF66;
  --dark:   #191A23;
  --cream:  #FFF2EC;
  --red:    #C50034;
  --blue:   #2286E3;
  --violet: #130C2F;
  --gray:   #BEBEBE;
  --modal-text: #EDEDED;

  --font-main: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-code: 'Source Code Pro', monospace;
  --font-comm: 'Commissioner', sans-serif;
  --font-abril: 'Abril Fatface', serif;

  --radius-card: calc(38.4 * var(--u));
  --radius-badge: calc(17.6 * var(--u));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: #000; }

body {
  font-family: var(--font-main);
  font-weight: 400;
  color: #fff;
  background: #000;
  overflow-x: hidden;
}

@media (min-width: 1040px) {
  body { min-width: calc(1024 * var(--u)); overflow-x: auto; }
}

img { display: block; }

.container {
  width: calc(992 * var(--u));
  margin: 0 auto;
}

/* ============ HERO ============ */

.hero__inner {
  position: relative;
  padding-top: calc(160 * var(--u));
}

.hero__greeting {
  font-size: calc(35.2 * var(--u));
  line-height: calc(48 * var(--u));
  font-weight: 700;
  color: var(--green);
}

.hero__title {
  margin-top: calc(32.8 * var(--u));
  font-size: calc(67.2 * var(--u));
  line-height: 100%;
  font-weight: 700;
  color: #fff;
}

.hero__subtitle {
  margin-top: calc(31.2 * var(--u));
  font-size: calc(19.2 * var(--u));
  line-height: 100%;
  font-weight: 400;
  color: #fff;
}

.hero__character {
  position: absolute;
  top: calc(133.6 * var(--u));
  left: calc(664 * var(--u));   /* crop starts at 2100/1.7953 = 1169.7 abs → 1169.7 - 340 = 829.7 */
  width: calc(338.4 * var(--u));
  height: calc(360 * var(--u));
  cursor: pointer;
  user-select: none;
}

.hero__character-img {
  width: 100%;
  height: 100%;
}

.hero__star,
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__star { object-fit: contain; will-change: transform; }

.hero__canvas { image-rendering: pixelated; }

#character-slot.is-3d .hero__character-img { display: none; }

/* ============ BADGES ============ */

.badges {
  margin-top: calc(29.6 * var(--u));
}

.badges__row {
  display: flex;
}

.badge {
  position: relative;
  width: calc(165.34 * var(--u));
  height: calc(180 * var(--u));
  border-radius: var(--radius-badge);
  overflow: hidden;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}

a.badge { transition: filter .2s ease; }
a.badge:hover { filter: brightness(1.08); }

.badge__icon {
  position: absolute;
  left: calc(16.4 * var(--u));
  top: calc(18.4 * var(--u));
  width: calc(72 * var(--u));
  height: calc(72 * var(--u));
}

.badge__icon--hook { width: calc(64 * var(--u)); height: calc(72 * var(--u)); }

.badge__text {
  position: absolute;
  left: calc(16.8 * var(--u));
  top: calc(124.8 * var(--u));              /* ink top rel 163.8 → box top ≈ 156 */
  font-size: calc(12.56 * var(--u));
  line-height: 146%;
  font-weight: 500;
}

.badge__num {
  position: absolute;
  left: calc(16.4 * var(--u));
  top: calc(28.8 * var(--u));               /* "15+"/"250+" ink top rel 46 → box top ≈ 36 */
  font-size: calc(51.2 * var(--u));
  line-height: 100%;
  font-weight: 700;
}

.badge--hooks   { background: var(--red);   color: #fff; }
.badge--nexters { background: var(--cream); color: #000; }
.badge--years   { background: #fff;         color: #000; }
.badge--games   { background: var(--dark);  color: #fff; }
.badge--careers { background: var(--green); color: #000; }

.badge--ptp { background: var(--blue); color: #fff; }
.badge--ptp .badge__img {
  position: absolute;
  top: 0; left: 0;
  width: calc(165.34 * var(--u));
  height: calc(115.2 * var(--u));
}

/* ============ OPEN TO ============ */

.open-to {
  margin-top: calc(43.2 * var(--u));
}

.open-to__text {
  text-align: center;
  font-size: calc(28.8 * var(--u));
  line-height: 104%;
  font-weight: 500;
  color: #fff;
}

/* ============ SECTION TITLES ============ */

.section-title {
  text-align: center;
  font-size: calc(67.2 * var(--u));
  line-height: 100%;
  font-weight: 700;
  color: #fff;
}

/* ============ IMPACT ============ */

.impact {
  margin-top: calc(58.4 * var(--u));
}

.impact__row {
  margin-top: calc(64.8 * var(--u));
  display: flex;
  gap: calc(16 * var(--u));
}

.impact-card {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
}

/* --- Build for scale --- */

.impact-card--scale {
  width: calc(576 * var(--u));
  height: calc(381.6 * var(--u));
  background: var(--violet);
}

.impact-card--scale__img {
  position: absolute;
  width: calc(902.4 * var(--u));
  left: calc(3.2 * var(--u));
  top: calc(-170.4 * var(--u));
  pointer-events: none;
}

.impact-card--scale__title {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(49.6 * var(--u));               /* ink top rel 73 */
  font-family: var(--font-code);
  font-size: calc(41.6 * var(--u));
  line-height: 100%;
  font-weight: 700;
  color: #fff;
}

.impact-card--scale__sub {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(313.6 * var(--u));              /* ink top rel 395.5 */
  font-size: calc(19.2 * var(--u));
  line-height: 100%;
  font-weight: 500;
  color: #fff;
}

/* --- Grow leaders --- */

.impact-card--grow {
  width: calc(400 * var(--u));
  height: calc(381.6 * var(--u));
  background: var(--cream);
}

.impact-card--grow__photo {
  position: relative;
  width: calc(400 * var(--u));
  height: calc(231.2 * var(--u));
  overflow: hidden;
}

.impact-card--grow__photo img {
  position: absolute;
  width: calc(652 * var(--u));            /* pizduk content box 1020×584 → fills 500×289 */
  left: calc(-116 * var(--u));
  top: calc(-49.6 * var(--u));
}

.impact-card--grow__panel {
  position: relative;
  height: calc(150.4 * var(--u));
  text-align: center;
  color: #000;
}

.impact-card--grow__title {
  position: absolute;
  left: 0; right: 0;
  top: calc(17.6 * var(--u));               /* ink top abs 1675.5 → rel to panel (1642.6) = 32.9 */
  font-family: var(--font-comm);
  font-size: calc(41.6 * var(--u));
  line-height: 100%;
  font-weight: 900;
}

.impact-card--grow__sub {
  position: absolute;
  left: 0; right: 0;
  top: calc(75.2 * var(--u));               /* ink top abs 1740.1 → rel 97.5 */
  font-size: calc(19.2 * var(--u));
  line-height: 100%;
  font-weight: 500;
}

/* --- Ignite ideas --- */

.impact-card--ignite {
  margin-top: calc(32 * var(--u));
  width: calc(992 * var(--u));
  height: calc(381.6 * var(--u));
  background: var(--dark);
}

.impact-card--ignite__title {
  position: absolute;
  left: calc(40.8 * var(--u));
  top: calc(37.6 * var(--u));               /* ink top rel 72.5 */
  font-family: var(--font-abril);
  font-size: calc(88 * var(--u));
  line-height: 100%;
  font-weight: 400;
  color: #fff;
}

.impact-card--ignite__img {
  position: absolute;
  left: calc(400.8 * var(--u));
  top: calc(-32 * var(--u));
  width: calc(576 * var(--u));
  pointer-events: none;
}

.impact-card--ignite__sub {
  position: absolute;
  left: calc(40.8 * var(--u));
  top: calc(288.8 * var(--u));              /* ink top rel 364.9 */
  font-size: calc(19.2 * var(--u));
  line-height: 100%;
  font-weight: 500;
  color: #fff;
}

/* ============ REVIEWS ============ */

.reviews {
  margin-top: calc(112 * var(--u));
}

.reviews__wrap {
  position: relative;
  margin-top: calc(64 * var(--u));
}

.reviews__carousel {
  display: flex;
  gap: calc(16 * var(--u));
  overflow-x: auto;
  scrollbar-width: none;
  cursor: grab;
}
.reviews__carousel::-webkit-scrollbar { display: none; }
.reviews__carousel.is-dragging { cursor: grabbing; }

.reviews__carousel {
  overflow-y: hidden;
  scrollbar-width: none;
}
.reviews__carousel::-webkit-scrollbar { display: none; }

.reviews__carousel {
  overflow-y: hidden;
  scrollbar-width: none;
}
.reviews__carousel::-webkit-scrollbar { display: none; }

.reviews__carousel,
.review-card {
  user-select: none;
  -webkit-user-select: none;
}
.review-card img { -webkit-user-drag: none; user-drag: none; }

/* arrows */
.reviews__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: calc(35 * var(--u));
  height: calc(35 * var(--u));
  margin-top: calc(-17.5 * var(--u));
  border: none;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .2s ease;
}
.reviews__arrow.is-visible { opacity: 1; pointer-events: auto; }
.reviews__arrow:hover { transform: scale(1.12); }
.reviews__arrow--prev { left: calc(-51 * var(--u)); }
.reviews__arrow--next { right: calc(-51 * var(--u)); }
.reviews__arrow::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(8 * var(--u)); height: calc(8 * var(--u));
  border-right: calc(2 * var(--u)) solid #191A23;
  border-bottom: calc(2 * var(--u)) solid #191A23;
}
.reviews__arrow--next::after { transform: translate(-64%, -50%) rotate(-45deg); }
.reviews__arrow--prev::after { transform: translate(-36%, -50%) rotate(135deg); }

.review-card {
  position: relative;
  flex: 0 0 calc(320 * var(--u));
  height: calc(313.6 * var(--u));
  border-radius: var(--radius-card);
  background: var(--dark);
  cursor: pointer;
  transition: transform .25s ease;
}

.review-card:hover { transform: translateY(calc(-3.2 * var(--u))); }
.review-card:focus-visible { outline: calc(1.6 * var(--u)) solid var(--green); outline-offset: calc(1.6 * var(--u)); }

.review-card__top {
  position: absolute;
  top: calc(25.6 * var(--u)); left: calc(25.6 * var(--u)); right: calc(25.6 * var(--u));
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.review-card__avatar {
  width: calc(81.6 * var(--u));
  height: calc(81.6 * var(--u));
  border-radius: 50%;
  object-fit: cover;
}

.review-card__avatar--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3E7BFA;
  color: #fff;
  font-size: calc(35.2 * var(--u));
  font-weight: 700;
}

.review-card__more {
  position: relative;
  width: calc(25.6 * var(--u));
  height: calc(25.6 * var(--u));
  border-radius: 50%;
  background: #fff;
  transition: transform .25s ease;
}
.review-card:hover .review-card__more { transform: scale(1.12); }

.review-card__more::after,
.modal__close::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: calc(7.2 * var(--u)); height: calc(7.2 * var(--u));
  border-right: calc(2 * var(--u)) solid #191A23;
  border-bottom: calc(2 * var(--u)) solid #191A23;
  transform: translate(-50%, -68%) rotate(45deg);  /* chevron down */
}

.review-card__name {
  position: absolute;
  left: calc(25.6 * var(--u));
  top: calc(116 * var(--u));              /* ink top rel 156 */
  font-size: calc(25.6 * var(--u));
  line-height: 100%;
  font-weight: 700;
  color: #fff;
}

.review-card__role {
  position: absolute;
  left: calc(25.6 * var(--u));
  top: calc(152.8 * var(--u));              /* ink top rel 195.5 */
  font-size: calc(12.8 * var(--u));
  line-height: 100%;
  font-weight: 400;
  color: var(--gray);
  white-space: nowrap;
}

.review-card__quotemark,
.modal__quotemark {
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.review-card__quotemark {
  position: absolute;
  left: calc(25.6 * var(--u));
  top: calc(168 * var(--u));
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}

.review-card__quote {
  position: absolute;
  left: calc(25.6 * var(--u));
  right: calc(25.6 * var(--u));
  top: calc(209.6 * var(--u));              /* ink top rel 268.4 */
  font-size: calc(17 * var(--u));
  line-height: 123%;
  font-weight: 400;
  color: var(--gray);
}

/* dots */
.reviews__dots {
  margin-top: calc(22.4 * var(--u));
  display: flex;
  justify-content: center;
  gap: calc(8 * var(--u));
}
.reviews__dots span {
  width: calc(7.2 * var(--u)); height: calc(7.2 * var(--u));
  border-radius: 50%;
  background: #33343E;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.reviews__dots span.is-active { background: var(--green); transform: scale(1.2); }

/* ============ PHOTO ============ */

.contact {
  margin-top: calc(82.4 * var(--u));       /* 140 minus dots block; tuned against mockup */
}

.photo__img {
  width: calc(992 * var(--u));
  height: calc(560 * var(--u));
  object-fit: cover;
  border-radius: var(--radius-card);
}

/* ============ CONTACT ============ */

.contact__title {
  margin-top: calc(64 * var(--u));
}

.contact__btn {
  display: block;
  width: calc(284 * var(--u));
  height: calc(61.6 * var(--u));
  margin: calc(32.8 * var(--u)) auto 0;
  border-radius: var(--radius-card);
  background: var(--green);
  color: #000;
  text-align: center;
  font-size: calc(24 * var(--u));
  line-height: calc(61.6 * var(--u));
  font-weight: 500;
  text-decoration: none;
  transition: transform .2s ease;
  will-change: transform;
}

.contact__btn:hover {
  animation: btn-bounce .55s cubic-bezier(.28,.84,.42,1) both;
}

@keyframes btn-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.1); }
  55%  { transform: scale(1.02); }
  75%  { transform: scale(1.07); }
  100% { transform: scale(1.06); }
}

/* ============ FOOTER ============ */

.footer {
  margin-top: calc(31.2 * var(--u));
  padding-bottom: calc(160 * var(--u));
}

.footer__line {
  text-align: center;
  font-size: calc(17.6 * var(--u));
  line-height: calc(20 * var(--u));
  font-weight: 500;
  color: #fff;
}

.footer__link {
  color: #fff;
  text-decoration: none;
}
.footer__link:hover { color: var(--green); }

/* ============ MODAL ============ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] { display: none; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
}

.modal__card {
  position: relative;
  width: calc(992 * var(--u));
  max-width: calc(100vw - calc(32 * var(--u)));
  max-height: 88vh;
  overflow-y: auto;
  background: var(--dark);
  border-radius: var(--radius-card);
  padding: calc(25.6 * var(--u)) calc(25.6 * var(--u)) calc(41.6 * var(--u));
  animation: modal-in .25s ease both;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(calc(12.8 * var(--u))); }
  to   { opacity: 1; transform: none; }
}

.modal__close {
  position: absolute;
  top: calc(25.6 * var(--u)); right: calc(25.6 * var(--u));
  width: calc(25.6 * var(--u)); height: calc(25.6 * var(--u));
  border-radius: 50%;
  border: none;
  background: #fff;
  cursor: pointer;
  transition: transform .2s ease;
}
.modal__close:hover { transform: scale(1.12); }
.modal__close::after {
  transform: translate(-50%, -32%) rotate(225deg);  /* chevron up */
}

.modal__header {
  display: flex;
  align-items: flex-start;
  gap: calc(19.2 * var(--u));
}

.modal__avatar-wrap img,
.modal__avatar-wrap .review-card__avatar--letter {
  width: calc(81.6 * var(--u));
  height: calc(81.6 * var(--u));
  border-radius: 50%;
  object-fit: cover;
}

.modal__avatar-wrap .review-card__avatar--letter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3E7BFA;
  color: #fff;
  font-size: calc(35.2 * var(--u));
  font-weight: 700;
}

.modal__name {
  margin-top: calc(10.4 * var(--u));        /* name ink top 56.5 within card */
  font-size: calc(25.6 * var(--u));
  line-height: 100%;
  font-weight: 700;
  color: #fff;
}

.modal__role {
  margin-top: calc(9.6 * var(--u));        /* role ink top 100 */
  font-size: calc(12.8 * var(--u));
  line-height: 100%;
  font-weight: 400;
  color: var(--gray);
}

.modal__quotemark {
  margin: calc(33.6 * var(--u)) 0 0 calc(0.8 * var(--u));    /* “ ink ~195.5 */
}

.modal__body {
  margin-top: calc(6.4 * var(--u));
  font-size: calc(19.2 * var(--u));
  line-height: 121%;
  color: var(--modal-text);
}

.modal__body p + p {
  margin-top: calc(23.2 * var(--u));
}

body.modal-open { overflow: hidden; }

/* ============================================================
   MOBILE / TABLET  (≤ calc(1023 * var(--u)))
   Reference: iPhone 14/15 Pro mockup, calc(393 * var(--u)) design width
   ============================================================ */

@media (max-width: 767px) {

  .container {
    width: auto;
    max-width: calc(393 * var(--u));
    padding: 0 calc(24 * var(--u));
  }

  /* ---- hero ---- */

  .hero__inner {
    padding-top: calc(67 * var(--u));
    text-align: center;
  }

  .hero__greeting {
    font-size: calc(22 * var(--u));
    line-height: calc(26 * var(--u));
  }

  .hero__title {
    margin-top: calc(23 * var(--u));
    font-size: calc(40 * var(--u));
    line-height: calc(40 * var(--u));
  }

  .hero__subtitle {
    margin-top: calc(18 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: 105%;
    max-width: calc(350 * var(--u));
    margin-left: auto;
    margin-right: auto;
  }

  .br-desktop { display: none; }

  .hero__character {
    position: relative;
    left: 0;
    top: 0;
    width: calc(288 * var(--u));
    height: calc(306 * var(--u));
    margin: calc(53 * var(--u)) auto 0;
  }

  /* ---- badges: 3×2 full-bleed ---- */

  .badges { margin-top: calc(41 * var(--u)); }

  .badges .container {
    max-width: calc(393 * var(--u));
    padding: 0;
    margin: 0 auto;
  }

  .badges__row { flex-wrap: wrap; }

  .badge {
    width: 33.3333%;
    height: calc(140.5 * var(--u));
    border-radius: calc(16 * var(--u));
  }

  .badge__icon {
    left: calc(12 * var(--u));
    top: calc(13 * var(--u));
    width: calc(47 * var(--u));
    height: calc(47 * var(--u));
  }

  .badge__icon--hook { width: calc(42 * var(--u)); height: calc(47 * var(--u)); }

  .badge__text {
    top: auto;
    bottom: calc(14 * var(--u));
    left: calc(13 * var(--u));
    right: calc(10 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: 120%;
  }

  .badge__num {
    left: calc(13 * var(--u));
    top: calc(14 * var(--u));
    font-size: calc(40 * var(--u));
  }

  .badge--ptp .badge__img {
    width: 100%;
    height: auto;
  }

  /* ---- open to ---- */

  .open-to { margin-top: calc(38 * var(--u)); }

  .open-to__text {
    font-size: calc(22 * var(--u));
    line-height: 103%;
  }

  /* ---- section titles ---- */

  .section-title {
    font-size: calc(32 * var(--u));
    line-height: calc(31 * var(--u));
  }

  /* ---- impact ---- */

  .impact { margin-top: calc(74 * var(--u)); }

  .impact__row {
    margin-top: calc(43 * var(--u));
    flex-direction: column;
    gap: calc(31 * var(--u));
  }

  .impact-card--scale,
  .impact-card--grow,
  .impact-card--ignite {
    width: 100%;
    height: calc(477 * var(--u));
  }

  .impact-card--ignite { margin-top: calc(31 * var(--u)); }

  .impact-card--scale__img {
    width: calc(820 * var(--u));
    left: calc(-220 * var(--u));
    top: calc(-134 * var(--u));
  }

  .impact-card--scale__title {
    left: calc(32 * var(--u));
    top: calc(46 * var(--u));
    font-size: calc(32 * var(--u));
  }

  .impact-card--scale__sub {
    left: calc(32 * var(--u));
    right: calc(32 * var(--u));
    top: calc(356 * var(--u));
  }
  .impact-card--scale__sub br { display: none; }

  .impact-card--grow__photo {
    width: 100%;
    height: calc(286.5 * var(--u));
  }

  .impact-card--grow__photo img {
    width: calc(815 * var(--u));
    left: calc(-215 * var(--u));
    top: calc(-62 * var(--u));
  }

  .impact-card--grow__panel { height: calc(190.5 * var(--u)); }

  .impact-card--grow__title {
    top: calc(29 * var(--u));
    font-size: calc(36 * var(--u));
  }

  .impact-card--grow__sub {
    top: calc(83 * var(--u));
    padding: 0 calc(24 * var(--u));
  }
  .impact-card--grow__sub br { display: none; }

  .impact-card--ignite__title {
    left: calc(32 * var(--u));
    top: calc(42 * var(--u));
    font-size: calc(58 * var(--u));
  }

  .impact-card--ignite__img {
    width: calc(337 * var(--u));
    left: calc(12 * var(--u));
    top: calc(128 * var(--u));
  }

  .impact-card--ignite__sub {
    left: calc(32 * var(--u));
    right: calc(32 * var(--u));
    top: calc(356 * var(--u));
  }
  .impact-card--ignite__sub br { display: none; }

  /* ---- reviews ---- */

  .reviews { margin-top: calc(120 * var(--u)); }

  .reviews__wrap { margin-top: calc(42 * var(--u)); }

  .reviews__arrow { display: none; }

  .reviews__carousel {
    scroll-padding-left: 0;
  }

  .review-card {
    flex: 0 0 calc(345 * var(--u));
    max-width: 100%;
    height: calc(400 * var(--u));
  }

  /* в одиночном мобильном представлении первой остаётся карточка Sedov */
  .review-card[data-review="sedov"] { order: -1; }

  .review-card__top { top: calc(32 * var(--u)); left: calc(32 * var(--u)); right: calc(32 * var(--u)); }

  .review-card__avatar {
    width: calc(80 * var(--u));
    height: calc(80 * var(--u));
    margin-top: calc(8 * var(--u));
  }

  .review-card__avatar--letter { font-size: calc(34 * var(--u)); }

  .review-card__name {
    left: calc(32 * var(--u));
    top: calc(142 * var(--u));
    font-size: calc(32 * var(--u));
  }

  .review-card__role {
    left: calc(32 * var(--u));
    right: calc(32 * var(--u));
    top: calc(186 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(19 * var(--u));
    white-space: normal;
  }

  .review-card__quotemark {
    left: calc(32 * var(--u));
    top: calc(228 * var(--u));
    width: calc(24 * var(--u));
    height: calc(24 * var(--u));
  }

  .review-card__quote {
    left: calc(32 * var(--u));
    right: calc(32 * var(--u));
    top: calc(264 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: calc(24.5 * var(--u));
  }

  .reviews__dots { margin-top: calc(19 * var(--u)); }

  /* ---- contact: заголовок → фото → кнопка ---- */

  .contact { margin-top: calc(126 * var(--u)); }

  .contact__inner {
    display: flex;
    flex-direction: column;
  }

  .contact__title { order: 1; margin-top: 0; }

  .photo__img {
    order: 2;
    width: 100%;
    height: calc(372 * var(--u));
    margin-top: calc(40 * var(--u));
  }

  .contact__btn {
    order: 3;
    margin: calc(40 * var(--u)) auto 0;
    width: calc(280 * var(--u));
    height: calc(64 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: calc(64 * var(--u));
  }

  /* ---- footer ---- */

  .footer {
    margin-top: calc(38 * var(--u));
    padding-bottom: calc(92 * var(--u));
  }

  .footer__line {
    font-size: calc(16 * var(--u));
    line-height: 105%;
  }

  .footer__sep { display: none; }

  .footer__contacts {
    display: block;
    margin-top: calc(13 * var(--u));
  }

  /* ---- modal ---- */

  .modal__card {
    width: calc(100vw - 48 * var(--u));
    max-height: 86vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .modal__close {
    top: calc(32 * var(--u));
    right: calc(24 * var(--u));
  }

  .modal__header {
    display: block;
    padding: calc(40 * var(--u)) calc(32 * var(--u)) 0;
  }

  .modal__avatar-wrap img,
  .modal__avatar-wrap .review-card__avatar--letter {
    width: calc(80 * var(--u));
    height: calc(80 * var(--u));
  }

  .modal__avatar-wrap .review-card__avatar--letter { font-size: calc(34 * var(--u)); }

  .modal__name {
    margin-top: calc(22 * var(--u));
    font-size: calc(32 * var(--u));
  }

  .modal__role {
    margin-top: calc(9 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(19 * var(--u));
  }

  .modal__quotemark {
    margin: calc(26 * var(--u)) 0 0 calc(32 * var(--u));
    width: calc(30 * var(--u));
    height: calc(30 * var(--u));
  }

  .modal__body {
    margin-top: calc(6 * var(--u));
    padding: 0 calc(20 * var(--u)) calc(40 * var(--u)) calc(32 * var(--u));
    margin-right: calc(6 * var(--u));
    overflow-y: auto;
    font-size: calc(16 * var(--u));
    line-height: calc(19 * var(--u));
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.85) transparent;
  }

  .modal__body::-webkit-scrollbar { width: calc(4 * var(--u)); }
  .modal__body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.85);
    border-radius: calc(2 * var(--u));
  }
  .modal__body::-webkit-scrollbar-track { background: transparent; }

  .modal__body p + p { margin-top: calc(19 * var(--u)); }
}


/* планшет: стрелки внутрь, чтобы не резались полями */
@media (max-width: 1039px) and (min-width: 768px) {
  .reviews__arrow--prev { left: calc(-8 * var(--u)); }
  .reviews__arrow--next { right: calc(-8 * var(--u)); }
}