/* ==========================================================================
   PreventEra — «О бренде»
   Traced from Figma "Frame 3" (1448px canvas) and "Frame 2" (325px canvas).
   Every offset below is the Figma coordinate minus 227px on desktop and minus
   151px on mobile: both frames open with a screenshot of the existing site
   header, which this template does not render.

   Elements whose two frames disagree carry their coordinates inline as
   --dx/--dy/--dw/--dh (desktop) and --mx/--my/--mw/--mh (mobile); `.pos` below
   resolves whichever set the current breakpoint needs.
   ========================================================================== */

:root {
  --navy: #343a89;
  --lime: #e3f98c;
  --ink: #2f2f2f;
  --display: "Tt Travels Next Trial", "Tttravels", sans-serif;
  --text: "Tttravels", sans-serif;
}

@font-face {
  font-family: Tttravels;
  src: url("fonts/TTTravels-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Tttravels;
  src: url("fonts/TTTravels-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Tttravels;
  src: url("fonts/TTTravels-DemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Tttravels;
  src: url("fonts/TTTravels-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Tt Travels Next Trial";
  src: url("fonts/TTTravelsNext-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tt Travels Next Trial";
  src: url("fonts/TTTravelsNext-DemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tt Travels Next Trial";
  src: url("fonts/TTTravelsNext-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tt Travels Next Trial";
  src: url("fonts/TTTravelsNext-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Site header is `position: fixed` and does not occupy flow. This spacer
   sits outside the zoomed canvas so its height stays in viewport pixels.
   max-height caps the Webflow menu (99vh, position:absolute) so it cannot
   push the canvas down the page on mobile. */
.pv-header-spacer {
  height: 227px;
  max-height: 320px;
  pointer-events: none;
}

/* Theme `.body { overflow: hidden }` clips CSS zoom when scale > 1 (phones).
   !important needed because theme CSS loads before our isolated sheet. */
.body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

.pv-page,
.pv-page *,
.pv-page *::before,
.pv-page *::after { box-sizing: border-box; }

/* Scoped to .pv-page so the site header/footer keep their own styles. */
.pv-page {
  color: var(--navy);
  font-family: var(--text);
  -webkit-text-size-adjust: 100%;
}
.pv-page img,
.pv-page video { display: block; max-width: none; }
.pv-page a:not(.btn) { color: inherit; text-decoration: none; }
.pv-page p { margin: 0; }
.pv-page h1, .pv-page h2, .pv-page h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.pv-page-shell {
  width: 100%;
  overflow: hidden;
}

.pv-page {
  position: relative;
  width: 1448px;
  height: 8194px;
  margin: 0;
  overflow: hidden;
  background: #fff;
}

.pv-page section { position: absolute; left: 0; width: 1448px; }
.pv-page section > * { position: absolute; }

/* The canvas is ~8200px tall and every section is absolutely placed with an
   explicit height, so the browser can skip painting the ones off screen. This
   is what keeps scrolling smooth on phones. */
.pv-page section:not(.hero) {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* Coordinates carried inline. Size falls through to the component rules below
   whenever a frame does not need to override it. */
.pos {
  --dw: auto;
  --dh: auto;
  --mx: var(--dx);
  --my: var(--dy);
  --mw: var(--dw);
  --mh: var(--dh);
}
.pv-page .pos { left: var(--dx); top: var(--dy); }
.pos { width: var(--dw); height: var(--dh); }

/* Copy breaks: `bd` only on the desktop canvas, `bm` only on the mobile one. */
.pv-page .bm { display: none; }

.pv-page .m-only { display: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Shared decoration: hairlines, dots, arrow head
   -------------------------------------------------------------------------- */

.decor { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.decor i,
.hrule,
.vrule,
.wrule { position: absolute; display: block; }

.hrule { height: 1px; background: var(--navy); }
.vrule { width: 1px; background: var(--navy); }
.wrule { height: 1px; background: #fff; }
.wrule--v { width: 1px; height: var(--dh); }

.ndot,
.wdot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.ndot { background: var(--navy); }
.wdot { background: #fff; }

.narrow {
  width: 0;
  height: 0;
  border: 7.5px solid transparent;
  border-left: 13px solid var(--navy);
  border-right: 0;
}

/* --------------------------------------------------------------------------
   1. Hero — Figma 227…897
   -------------------------------------------------------------------------- */

.hero { top: 0; height: 670px; }

.hero__photo {
  top: 0;
  left: 0;
  width: 1448px;
  height: 670px;
  object-fit: cover;
  background: #1a1d4a;
}

.hero__veil {
  top: 0;
  left: 0;
  width: 1448px;
  height: 670px;
  background: linear-gradient(180deg, rgba(52, 58, 137, 0) 0%, rgba(52, 58, 137, 0.6) 100%);
}

.hero__wordmark { left: 148px; top: 186px; width: 1144px; height: 149px; }

.hero__lead {
  left: 146px;
  top: 376px;
  width: 750px;
  font-size: 25px;
  line-height: 27px;
  letter-spacing: -0.01em;
  color: #fff;
}

.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  border: 1px solid #fff;
  border-radius: 28.5px;
  font-size: 25px;
  line-height: 27px;
  letter-spacing: -0.01em;
  color: #fff;
}
.chip--fill {
  border-color: var(--lime);
  background: var(--lime);
  color: var(--navy);
}

/* --------------------------------------------------------------------------
   2. Brand cards — Figma 897…1847
   -------------------------------------------------------------------------- */

.cards { top: 670px; height: 950px; }

.cards__tile {
  top: 77px;
  width: 574px;
  height: 773px;
  padding: 0;
  border: 0;
  margin: 0;
  overflow: hidden;
  background: transparent;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  z-index: 1;
}
.cards__tile img { width: 574px; height: 773px; object-fit: cover; }
.cards__tile--left  { left: 146px; border-radius: 287px 0 0 0; }
.cards__tile--right { left: 740px; border-radius: 0 0 287px 0; }

.cards__tile h2 {
  position: absolute;
  font-size: 35px;
  line-height: 37px;
  color: var(--lime);
  transition: left 0.35s ease, top 0.35s ease, color 0.3s ease;
}
.cards__tile--left h2  { left: 71px;  top: 520px; width: 262px; }
.cards__tile--right h2 { left: 60px;  top: 88px;  width: 416px; }

/* A quarter of a hairline ellipse: the fully rounded corner is the arc, and the
   two borders that meet there are the only ones drawn. */
.arc {
  position: absolute;
  display: block;
  border: 0 solid #fff;
  pointer-events: none;
}
.arc--tl { border-radius: 100% 0 0 0; border-top-width: 1px; border-left-width: 1px; }
.arc--tr { border-radius: 0 100% 0 0; border-top-width: 1px; border-right-width: 1px; }
.arc--br { border-radius: 0 0 100% 0; border-bottom-width: 1px; border-right-width: 1px; }
.arc--bl { border-radius: 0 0 0 100%; border-bottom-width: 1px; border-left-width: 1px; }

/* Hover state — the second card variant in the Figma frame */

.cards__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cards__more {
  position: absolute;
  font-size: 25px;
  line-height: 27px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.35s ease;
}
.cards__tile--left  .cards__more { left: 53px; top: 453px; width: 428px; }
.cards__tile--right .cards__more { left: 55px; top: 194px; width: 442px; }

/* Desktop: hover. Mobile: `.is-open` from a tap. Same visual either way. */
.cards__tile:hover,
.cards__tile.is-open { z-index: 3; }
.cards__tile:hover .cards__scrim,
.cards__tile.is-open .cards__scrim { opacity: 1; }
.cards__tile:hover h2,
.cards__tile.is-open h2 { color: #fff; }
.cards__tile--left:hover h2,
.cards__tile--left.is-open h2  { left: 53px; top: 354px; }
.cards__tile--right:hover h2,
.cards__tile--right.is-open h2 { left: 55px; top: 88px; }
.cards__tile:hover .cards__more,
.cards__tile.is-open .cards__more { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   3. Personal brand — Figma 1847…3028
   -------------------------------------------------------------------------- */

.person { top: 1620px; height: 1181px; }

.person__title {
  left: 143px;
  top: 0;
  width: 300px;
  font-size: 40px;
  line-height: 42px;
}

.portrait { margin: 0; overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait--andrey {
  left: 143px;
  top: 150px;
  width: 587px;
  height: 515px;
  border-radius: 0 0 0 257.5px;
}
.portrait--olga {
  left: 730px;
  top: 665px;
  width: 584px;
  height: 516px;
  border-radius: 0 0 258px 0;
}

.namechip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 409px;
  height: 61px;
  border-radius: 30.5px;
  background: var(--lime);
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  line-height: 30px;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.role {
  font-size: 20px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
}
/*меняю body на .pv-page .body чтобы не ломались стили хидера и футера*/
.pv-page .body {
  font-size: 20px;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
}


/* --------------------------------------------------------------------------
   4. Research — Figma 3028…3935
   Background is Drive block-4 video; glass badges overlay as HTML.
   -------------------------------------------------------------------------- */

.research { top: 2801px; height: 907px; }

.research__photo {
  left: 0;
  top: 95px;
  width: 1448px;
  height: 812px;
  object-fit: cover;
  background: #2a2d36;
  z-index: 0;
}

/* Drive «подложка для видео» — over video, under title/copy/badges */
.research__underlay {
  left: 0;
  top: 95px;
  width: 1448px;
  height: 812px;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.research__underlay img {
  width: 120%;
  height: 120%;
  margin: -10%;
  object-fit: cover;
  filter: blur(40px);
}

.research .wrule,
.research .wdot { z-index: 2; }

.research__certs {
  display: flex;
  left: 717px;
  top: 720px;
  width: 597px;
  height: 188px;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
  z-index: 3;
}
.research__certs li {
  position: relative;
  display: block;
  flex: 0 0 199px;
  width: 199px;
  height: 188px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  line-height: 0;
}
.research__certs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.research h2 {
  left: 150px;
  top: 208px;
  width: 472px;
  font-size: 40px;
  line-height: 42px;
  color: var(--lime);
  z-index: 2;
}

.research__text {
  font-size: 20px;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: #fff;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   5. Case studies — Figma 3935…5699
   -------------------------------------------------------------------------- */

.cases { top: 3708px; height: 1764px; }
.cases > .case { position: static; }
.case > * { position: absolute; }

.cases__title {
  left: 0;
  top: 135px;
  width: 1448px;
  font-size: 40px;
  line-height: 42px;
  text-align: center;
}

.case__photo { left: 142px; width: 1172px; height: 670px; overflow: hidden; }
.case__photo img { width: 100%; height: 100%; object-fit: cover; }
.case--sleep  .case__photo { top: 272px; border-radius: 0 335px 0 0; }
.case--slimer .case__photo { top: 962px; border-radius: 0 0 0 335px; }

.case h3 {
  font-family: var(--text);
  font-weight: 400;
  font-size: 33px;
  line-height: 34px;
  letter-spacing: -0.01em;
  text-transform: none;
}
.case h3 b { font-weight: 700; }
.case--sleep  h3 { left: 229px; top: 353px;  width: 570px; color: var(--lime); }
.case--slimer h3 { left: 839px; top: 1048px; width: 444px; color: var(--navy); }

.panel { display: block; }
.panel--sleep-top {
  left: 960px;
  top: 273px;
  width: 354px;
  height: 363px;
  background: rgba(52, 58, 137, 0.24);
  /* Same cut as the sleep photo / Figma 240648212 */
  border-radius: 0 335px 0 0;
}
.panel--sleep-bottom {
  left: 960px;
  top: 636px;
  width: 354px;
  height: 306px;
  background: rgba(52, 58, 137, 0.24);
}
.panel--slimer {
  left: 142px;
  top: 962px;
  width: 354px;
  height: 670px;
  background: rgba(227, 249, 140, 0.37);
  /* Figma 240648215: radius 335 on TR, then rotate 180° → BL cut */
  border-radius: 0 335px 0 0;
  transform: rotate(180deg);
  transform-origin: center center;
}

.ico {
  pointer-events: none;
  transform-origin: center center;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
.ico--feather { transform: rotate(45deg); }
.ico--ruler { transform: none; }

.figure {
  font-size: 95px;
  line-height: 100px;
  font-weight: 400;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.figure span { font-size: 0.5em; letter-spacing: -0.02em; }
.figure--lime { color: var(--lime); }
.figure--navy { color: var(--navy); }
.figure--lt { font-size: 50px; font-weight: 500; letter-spacing: 0; }

.stat {
  font-size: 24px;
  line-height: 26px;
  letter-spacing: -0.01em;
  color: #fff;
}
.stat--navy { color: var(--navy); text-align: right; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.pv-page a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 344px;
  height: 76px;
  padding: 0;
  border: 0;
  border-radius: 43px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 25px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 0.18s ease;
}
.pv-page a.btn:hover { filter: brightness(1.08); }
.pv-page a.btn--lime { background: var(--lime); color: var(--navy); }
.pv-page a.btn--navy { background: var(--navy); color: var(--lime); }
.pv-page a.btn--wide { width: 366px; height: 64px; font-size: 22px; color: #fff; }

.case--sleep  .btn { left: 232px; top: 546px; }
.case--slimer .btn { left: 841px; top: 1229px; }

/* --------------------------------------------------------------------------
   6. Reels — Figma 5699…6306
   -------------------------------------------------------------------------- */

.reels { top: 5472px; height: 607px; }

.reels__title {
  left: 25px;
  top: 0;
  width: 1403px;
  font-size: 40px;
  line-height: 42px;
  text-align: center;
}

.reels__rec { left: 1218px; top: 9px; }

.reels__row { left: 0; top: 0; width: 1448px; height: 511px; }

.reel {
  position: absolute;
  overflow: hidden;
  border-radius: var(--dr);
  border: 0;
  padding: 0;
  margin: 0;
  background: #111;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform 0.25s ease;
  transform-origin: center center;
}
.reel__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.reel__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(52, 58, 137, 0.88);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.reel__play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  /* Optical shift: a right-pointing triangle reads centered when nudged right */
  margin-left: 3px;
  border-style: solid;
  border-width: 8px 0 8px 14px;
  border-color: transparent transparent transparent #e3f98c;
}
.reel.is-playing .reel__play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
}
.reel:hover { transform: scale(1.06); z-index: 3; }
.reel:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7. Library teaser — Figma 6306…7215
   -------------------------------------------------------------------------- */

.guide { top: 6079px; height: 909px; }

.guide__photo { left: 0; top: 4px; width: 822px; height: 726px; object-fit: cover; }

.guide h2 {
  left: 806px;
  top: 141px;
  width: 451px;
  font-size: 40px;
  line-height: 42px;
}

.guide__text {
  left: 806px;
  top: 300px;
  width: 442px;
  font-size: 25px;
  line-height: 27px;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.guide .btn { left: 806px; top: 470px; }

/* --------------------------------------------------------------------------
   8. Product grid — Figma 7215…8018
   -------------------------------------------------------------------------- */

.shop { top: 6988px; height: 803px; }

.shop__title {
  left: 1px;
  top: 0;
  width: 1448px;
  font-size: 40px;
  line-height: 42px;
  text-align: center;
}

.tile {
  background: var(--lime);
  overflow: hidden;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.tile:hover img { transform: scale(1.04); }

.tile__tag {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  border: 1px solid var(--navy);
  border-radius: 21.5px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12px;
  line-height: 17px;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}

.tile__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  line-height: 21px;
  text-align: center;
  text-transform: uppercase;
  color: var(--navy);
}

.tile__rate {
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  text-align: center;
  color: var(--navy);
}

.tile__desc {
  font-family: var(--display);
  font-weight: 300;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  text-transform: uppercase;
  color: var(--navy);
}

.shop__cta { left: 555px; top: 601px; }

/* --------------------------------------------------------------------------
   9. Follow — Figma 8018…8421
   -------------------------------------------------------------------------- */

.follow {
  top: 7791px;
  height: 403px;
  background: var(--lime);
}

.follow h2 {
  left: 0;
  top: 101px;
  width: 1448px;
  font-size: 30px;
  line-height: 40px;
  text-align: center;
}

/* Figma: TG @ 665/8272, VK @ 730/8272 (section top 8018 → icons at 254) */
.follow__socs {
  left: 665px;
  top: 254px;
  width: 118px;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.follow__soc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 53px;
  width: 53px;
  height: 53px;
  border-radius: 50%;
  background: var(--navy);
  line-height: 0;
  transition: transform 0.2s ease;
}
.follow__soc:hover { transform: scale(1.08); }
.pv-page .follow__soc img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
  vertical-align: top !important;
}
.pv-page .follow__soc:first-child img {
  width: 36px !important;
  height: 29px !important;
  transform: translateX(-2px);
}
.pv-page .follow__soc:last-child img {
  width: 40px !important;
  height: 23px !important;
}

/* ==========================================================================
   Mobile canvas — Figma "Frame 2" (325px wide, 151…5683)
   The same markup on a second pixel canvas: sections restack, the two brand
   cards and the two case studies go one above the other, products become a
   2×2 grid and the reel strip turns into a scroller.

   The cut-off covers tablets and landscape phones too, so anything held in the
   hand gets this canvas rather than a shrunken desktop one. js/main.js repeats
   the number.
   ========================================================================== */

@media (max-width: 900px) {

  .pv-header-spacer { height: 80px; max-height: 110px; }

  .pv-page { width: 325px; height: 5532px; margin: 0; }
  .pv-page section { width: 325px; }

  .pv-page .pos { left: var(--mx); top: var(--my); }
  .pos { width: var(--mw); height: var(--mh); }

  .pv-page .bd { display: none; }
  .pv-page .bm { display: inline; }
  .pv-page .d-only { display: none; }
  .pv-page .m-only { display: block; }

  /* Frame 2 has none of the navy hairlines that thread through the desktop frame. */
  .decor { display: none; }

  /* Hairlines keep their one-pixel edge; only the run length comes from --mw. */
  .hrule,
  .wrule { height: 1px; }
  .vrule { width: 1px; }

  /* 1. Обложка — Figma 151…634 */

  .hero { top: 0; height: 483px; }
  .hero__photo,
  .hero__veil { width: 325px; height: 483px; }
  .hero__wordmark { left: 37px; top: 187px; width: 245.12px; height: 32px; }

  .hero__lead {
    left: 37px;
    top: 242px;
    width: 237px;
    font-size: 15px;
    line-height: 16px;
  }

  .hero .wdot { width: 4px; height: 4px; }

  .chip {
    height: 22px;
    border-width: 0.5px;
    font-size: 12px;
    line-height: 12px;
  }

  /* 2. Научный подход / Философия бренда — Figma 634…1417 */

  .cards { top: 483px; height: 783px; }

  .cards__tile { width: 257.07px; height: 346.2px; }
  .cards__tile img { width: 257.07px; height: 346.2px; }
  .cards__tile--left  { left: 34px;    top: 24.42px;  border-radius: 128.536px 0 0 0; }
  .cards__tile--right { left: 34.03px; top: 380.42px; border-radius: 0 0 128.536px 0; }

  /* On the stacked canvas the upper tile's arc sweeps the other way. */
  .cards__tile--left .arc {
    border-radius: 0 100% 0 0;
    border-width: 1px 1px 0 0;
  }

  .cards__tile h2 { font-size: 15px; line-height: 19px; }
  .cards__tile--left h2  { left: 32px;    top: 232.58px; width: 117px; }
  .cards__tile--right h2 { left: 26.97px; top: 38.58px;  width: 186px; }

  /* Touch has no hover, and a lingering :hover after tap would fight the
     toggle, so the open state is `.is-open` only on this canvas. */
  .cards__tile:hover { z-index: 1; }
  .cards__tile:hover .cards__scrim { opacity: 0; }
  .cards__tile:hover h2 { color: var(--lime); }
  .cards__tile--left:hover h2  { left: 32px;    top: 232.58px; }
  .cards__tile--right:hover h2 { left: 26.97px; top: 38.58px; }
  .cards__tile:hover .cards__more { opacity: 0; transform: translateY(10px); }

  .cards__tile.is-open { z-index: 3; }
  .cards__tile.is-open .cards__scrim { opacity: 1; }
  .cards__tile.is-open h2 { color: #fff; }
  /* Left tile radius is ~129px. Title has to sit below that arc or the
     first letter is clipped. Body still fits: 10 × 13px from top 172. */
  .cards__tile--left.is-open h2  { left: 32px; top: 128px; width: 190px; }
  .cards__tile--right.is-open h2 { left: 27px; top: 38.58px; width: 186px; }
  .cards__tile.is-open .cards__more { opacity: 1; transform: none; }

  .cards__more {
    font-size: 11px;
    line-height: 13px;
  }
  .cards__tile--left  .cards__more { left: 32px; top: 172px; width: 192px; }
  .cards__tile--right .cards__more { left: 27px; top: 87px;  width: 198px; }

  /* 3. Личный бренд — Figma 1417…2527 */

  .person { top: 1266px; height: 1110px; }

  .person__title {
    left: 0;
    width: 319px;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
  }

  .portrait--andrey {
    left: 34px;
    top: 65px;
    width: 256px;
    height: 224.6px;
    /* Only the top-right is rounded on Frame 2; the baked desktop mask
       on the photo itself is gone, so this corner stays square. */
    border-radius: 0 112.3px 0 0;
  }
  .portrait--olga {
    left: 34px;
    top: 605px;
    width: 256px;
    height: 224.6px;
    /* Only the bottom-left is rounded on Frame 2; the baked desktop mask
       on the photo itself is gone, so the bottom-right stays square. */
    border-radius: 0 0 0 112.3px;
  }
  /* Frame 2 frames Olga tighter than Frame 3, so `cover` is not enough here. */
  .portrait--olga img {
    position: absolute;
    left: -12px;
    top: 5px;
    width: 296px;
    height: 262px;
  }

  .namechip {
    width: 174px;
    height: 39px;
    border-radius: 30.5px;
    font-size: 12px;
    line-height: 12px;
  }

  .role { font-size: 12px; line-height: var(--mlh, 22px); }
  .pv-page .body { font-size: 12px; line-height: 12.6px; }

  /* 4. Исследования — Figma 2527…2959
     Desktop glass badges (same as research-bg), scaled into mobile slots. */
  .research { top: 2376px; height: 432px; }
  .research__photo { left: 0; top: 0; width: 325px; height: 432px; }

  .research__underlay {
    left: -28px;
    top: -48px;
    width: 381px;
    height: 520px;
  }

  .research__underlay img {
    width: 135%;
    height: 135%;
    margin: -17.5%;
    filter: blur(24px);
  }

  .research__certs {
    display: flex;
    left: 31px;
    top: 350px;
    width: 259px;
    height: 81px;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;
    z-index: 3;
  }
  .research__certs li {
    position: relative;
    display: block;
    flex: 0 0 86px;
    width: 86px;
    height: 81px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    line-height: 0;
  }
  .research__certs li:nth-child(2) {
    flex-basis: 87px;
    width: 87px;
  }
  .research__certs img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .research h2 {
    left: 29px;
    top: 43px;
    width: 235px;
    font-size: 20px;
    line-height: 20px;
  }

  .research__text { font-size: 12px; line-height: 12px; }

  /* 5. Наши исследования — Figma 2959…3838 */

  .cases { top: 2808px; height: 879px; }

  .cases__title { top: 67px; width: 325px; font-size: 20px; line-height: 25px; }

  .case__photo { left: 33px; width: 260px; height: 331px; border-radius: 0; }
  .case--sleep  .case__photo { top: 152px; border-radius: 0; }
  .case--slimer .case__photo { top: 494px; border-radius: 0; }

  .case h3 { font-size: 12px; font-weight: 600; }
  .case--sleep  h3 { left: 48px; top: 172px; width: 188px; line-height: 12.5px; }
  .case--slimer h3 { left: 48px; top: 511px; width: 245px; line-height: 12.7px; }

  .panel { width: 129px; height: 88px; }
  .panel--sleep-top    { left: 33px;  top: 395px; background: rgba(52, 58, 137, 0.32); border-radius: 0 39px 0 0; transform: none; }
  .panel--sleep-bottom { left: 162px; top: 395px; width: 131px; background: rgba(52, 58, 137, 0.32); border-radius: 0 39px 0 0; transform: none; }
  .panel--slimer       { left: 33px;  top: 737px; background: rgba(227, 249, 140, 0.13); border-radius: 0 39px 0 0; transform: none; }
  .panel--slimer-b     { left: 162px; top: 737px; width: 131px; background: rgba(227, 249, 140, 0.13); border-radius: 0 39px 0 0; transform: none; }

  .figure { font-size: 30px; line-height: 30px; font-weight: 500; }
  .figure--lt { font-size: 15px; }

  .ico--feather { transform: rotate(-18deg); }
  .ico--ruler { transform: none; }

  .stat { font-size: 8px; line-height: 8.4px; font-weight: 600; }
  .stat--navy { text-align: left; }

  /* Buttons */

  .pv-page a.btn { width: 139px; height: 30px; font-size: 12px; border-radius: 20px; }
  .case--sleep  .btn { left: 48px; top: 242px; }
  .case--slimer .btn { left: 49px; top: 566px; }
  .pv-page a.btn--wide { width: 246px; height: 43px; font-size: 17px; }

  /* 6. Ваши видео — Figma 3838…4228 */

  .reels { top: 3687px; height: 390px; }
  .reels__title { left: 0; width: 325px; font-size: 20px; line-height: 20px; }

  .reels__row {
    top: 57px;
    width: 325px;
    height: 244px;
    display: flex;
    gap: 10.2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .reels__row::-webkit-scrollbar { display: none; }

  /* Relative so each play overlay centers on its own card. Must beat
     `.pv-page .pos { left: var(--mx) }` or desktop X offsets (178/404/…)
     become huge gaps in the flex strip. */
  .pv-page .reel {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 auto;
    width: var(--mw);
    height: var(--mh);
    border-radius: 30px;
  }
  .pv-page .reel:hover { transform: none; }
  .reel__play { width: 40px; height: 40px; }
  .reel__play::after {
    margin-left: 2px;
    border-width: 6px 0 6px 11px;
  }

  /* 7. Инструкция к вашему ресурсу — Figma 4228…4791 */

  .guide { top: 4077px; height: 563px; }

  .guide h2 {
    left: 0;
    top: 0;
    width: 324px;
    font-size: 20px;
    line-height: 25px;
    text-align: center;
  }

  .guide__text {
    left: 0;
    top: 81px;
    width: 324px;
    font-size: 12px;
    line-height: 12.75px;
    text-align: center;
  }

  /* Frame 2 shows the whole capsule shot, stretched into a squarer box. */
  .guide__photo { left: 0; top: 132px; width: 290px; height: 268px; object-fit: fill; }
  .guide .btn { left: 41px; top: 423px; }

  /* 8. Изучить продукты — Figma 4791…5416 */

  .shop { top: 4640px; height: 625px; }
  .shop__title { left: 2px; width: 323px; font-size: 20px; line-height: 25px; }

  .tile__tag {
    height: 13.34px;
    border-width: 0.5px;
    border-radius: 21.5px;
    font-size: 6px;
    line-height: 8px;
  }

  .tile__name { font-size: 10px; line-height: 14px; }
  .tile__rate { font-size: 10px; line-height: 12px; }
  .tile__desc { font-size: 6px; line-height: 8px; }
  .shop__cta { left: 41px; top: 527px; }

  /* 9. Следить за новостями — Figma 5416…5683 */

  .follow { top: 5265px; height: 267px; }

  .follow h2 {
    left: 2px;
    top: 61px;
    width: 323px;
    font-size: 20px;
    line-height: 25px;
  }

  .follow__socs {
    left: 120.5px;
    top: 166px;
    width: 84px;
    height: 37px;
  }
  .follow__soc {
    flex-basis: 37px;
    width: 37px;
    height: 37px;
  }
  .pv-page .follow__soc:first-child img {
    width: 25px !important;
    height: 20px !important;
  }
  .pv-page .follow__soc:last-child img {
    width: 28px !important;
    height: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}