:root {
  /* пастельные «краски» героини: соседние цвета близки по тону */
  --paint-sage: #7FA36F;
  --paint-blue: #7394BE;
  --paint-lavender: #9786C2;
  --paint-rose: #CF7896;
  --paint-peach: #D9805A;
  --paint-honey: #CFA04A;
  --paint-terracotta: #BB3700;

  --linen: #F5F1EA;
  --khaki: #D7C9B8;
  --camel: #B2967D;
  --cocoa: #7D5A44;
  --espresso: #4A342A;
  --peach: #D9A48A;
  --sheet: #FBF8F2;

  --f-serif: "Cormorant Garamond", Georgia, serif;
  --f-sans: "Manrope", system-ui, sans-serif;
  --f-hand: "Caveat", cursive;

  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  min-width: 1280px;
  background: var(--linen);
  color: var(--espresso);
  font: 400 17px/1.55 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ── мятая бумага на весь сайт ─────────────────────────── */
.paper-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: var(--linen) url(../assets/img/paper.webp) center / cover;
}
main { position: relative; z-index: 1; }

/* ── шапка ──────────────────────────────────────────────── */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 26px 56px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.logo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 22px 8px 12px;
  margin-right: auto;
  text-decoration: none;
  background: var(--sheet);
  box-shadow: 0 1px 1px rgba(74, 52, 42, .08), 0 8px 18px -8px rgba(74, 52, 42, .35);
  transform: rotate(-1.5deg);
}
/* бирка с логотипом приклеена кусочком скотча */
.logo::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 74px;
  height: 22px;
  margin-left: -37px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 7px), rgba(215, 190, 150, .62);
  clip-path: polygon(0 10%, 5% 0, 9% 14%, 94% 0, 100% 12%, 97% 50%, 100% 90%, 93% 100%, 6% 100%, 0 88%, 3% 50%);
  transform: rotate(4deg);
  mix-blend-mode: multiply;
}
.logo__word {
  font: italic 500 40px/1 var(--f-serif);
  letter-spacing: -.01em;
}
.logo__sub {
  max-width: 7.5em;
  font: 500 10px/1.35 var(--f-sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .7;
}
.topbar__right { display: flex; align-items: center; gap: 14px; }

/* бургер-меню: молочный кружок, меню раскрывается капсулой влево */
.menu { position: relative; width: 48px; height: 48px; }
.menu__btn {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sheet);
  box-shadow: 0 1px 1px rgba(74, 52, 42, .08), 0 8px 18px -8px rgba(74, 52, 42, .35);
  cursor: pointer;
  transition: transform .3s var(--ease);
}
.menu__btn:hover { transform: scale(1.06); }
.menu__btn:focus { outline: none; }
.menu__btn:focus-visible { box-shadow: 0 0 0 3px rgba(125, 90, 68, .35), 0 8px 18px -8px rgba(74, 52, 42, .35); }
.menu__btn span { display: block; width: 18px; height: 1.8px; border-radius: 2px; background: var(--espresso); transition: transform .35s var(--ease), opacity .25s; }
.menu.is-open .menu__btn span:nth-child(1) { transform: translateY(5.8px) rotate(45deg); }
.menu.is-open .menu__btn span:nth-child(2) { opacity: 0; }
.menu.is-open .menu__btn span:nth-child(3) { transform: translateY(-5.8px) rotate(-45deg); }
.menu__panel {
  position: absolute;
  right: 0;
  top: 0;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 0 72px 0 30px;
  border-radius: 999px;
  background: var(--sheet);
  box-shadow: 0 1px 1px rgba(74, 52, 42, .08), 0 8px 18px -8px rgba(74, 52, 42, .35);
  white-space: nowrap;
  clip-path: inset(0 0 0 calc(100% - 48px) round 999px);
  transition: clip-path .55s var(--ease);
}
.menu.is-open .menu__panel { clip-path: inset(0 0 0 0 round 999px); }
.menu__panel a {
  font-size: 15px;
  text-decoration: none;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .3s, transform .4s var(--ease);
}
.menu.is-open .menu__panel a { opacity: 1; transform: none; }
.menu.is-open .menu__panel a:nth-child(1) { transition-delay: .14s; }
.menu.is-open .menu__panel a:nth-child(2) { transition-delay: .09s; }
.menu.is-open .menu__panel a:nth-child(3) { transition-delay: .04s; }
.menu__panel a:hover { color: var(--cocoa); }
.topbar { color: var(--espresso); }

/* ── кнопки ─────────────────────────────────────────────── */
.btn {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--cocoa);
  color: var(--linen);
  font: 600 15px/1 var(--f-sans);
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .3s, transform .3s var(--ease);
}
.btn:hover { background: var(--espresso); transform: translateY(-2px); }
.btn--small { height: 48px; padding: 0 24px; font-size: 14px; }

/* ── бумажка со скотчем ─────────────────────────────────── */
.note {
  position: absolute;
  padding: 44px 48px 40px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--sheet);
  box-shadow:
    0 1px 1px rgba(74, 52, 42, .08),
    0 12px 28px -8px rgba(74, 52, 42, .28),
    0 40px 60px -30px rgba(74, 52, 42, .25);
}
.note__hand {
  margin: 0 0 14px;
  font: 600 24px/1.1 var(--f-hand);
  color: var(--cocoa);
}
.note__hand--small { margin: 0; font-size: 21px; }
.note__title {
  margin: 0 0 18px;
  font: 500 60px/.98 var(--f-serif);
  letter-spacing: -.015em;
}
.note__title em { font-style: italic; color: var(--cocoa); }
.note__title--m { font-size: 46px; }
.note__text { margin: 0; max-width: 34em; color: rgba(74, 52, 42, .82); }
.note__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px; }

/* скотч: полупрозрачная бумажная лента с рваными концами */
.tape {
  position: absolute;
  width: 150px;
  height: 38px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 7px),
    rgba(215, 190, 150, .62);
  box-shadow: 0 1px 3px rgba(74, 52, 42, .12);
  clip-path: polygon(0 8%, 4% 0, 7% 12%, 10% 2%, 90% 0, 93% 10%, 96% 1%, 100% 9%, 98% 30%, 100% 52%, 97% 74%, 100% 93%, 95% 100%, 91% 90%, 87% 100%, 8% 100%, 5% 88%, 2% 100%, 0 90%, 3% 68%, 0 46%, 2% 24%);
  mix-blend-mode: multiply;
}
.tape--tl { top: -14px; left: -44px; transform: rotate(-32deg); }
.tape--br { bottom: -12px; right: -46px; transform: rotate(-28deg); }
.tape--tr { top: -16px; right: -40px; transform: rotate(30deg); }
.tape--top { top: -20px; left: 50%; margin-left: -75px; transform: rotate(3deg); }

/* ── ЭКРАН 1 ────────────────────────────────────────────── */
.story { position: relative; height: 1200vh; } /* точная высота выставляется из JS */
.story__anchor { position: absolute; left: 0; top: 300vh; }
.story__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.hero__photo, .hero__drawing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__photo { z-index: 2; }
.hero__drawing { z-index: 1; transform-origin: 0 0; }
.hero__breath { position: absolute; inset: 0; }
/* акварельная героиня: коврик + фигура-маска, залитая текущей «краской» */
.character { position: absolute; inset: 0; }
.character__mat, .character__figure { position: absolute; inset: 0; width: 100%; height: 100%; }
.character__mat { object-fit: cover; }
.character__figure {
  background: var(--paint, var(--paint-sage));
  opacity: .9;
  -webkit-mask: var(--figure) center / cover no-repeat;
          mask: var(--figure) center / cover no-repeat;
}
.character--hero .character__figure { --figure: url(../assets/img/hero-figure.webp); }

.hero__note-wrap {
  position: absolute;
  z-index: 5;
  left: 4.5vw;
  top: 52%;
  width: min(540px, 31vw);
}
.note--hero { position: relative; }
.note--hero .note__title { font-size: clamp(44px, 3.5vw, 64px); }

.note--inside {
  z-index: 5;
  left: 5vw;
  top: 13vh;
  width: 520px;
  padding: 38px 40px 34px;
  opacity: 0;
  visibility: hidden;
}

.scroll-hint {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 3.5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%);
  color: var(--linen);
  font: 600 22px/1 var(--f-hand);
  text-shadow: 0 1px 12px rgba(74, 52, 42, .5);
}
.scroll-hint svg {
  width: 22px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: hint 2.4s var(--ease) infinite;
}
@keyframes hint { 50% { transform: translateY(6px); } }

/* ── ЭКРАН 2 · польза ───────────────────────────────────── */
.stage {
  position: absolute;
  z-index: 1;
  left: 38vw;
  width: 54vw;
  top: 12vh;
  height: 78vh;
  visibility: hidden;
  --paint: #7FA36F;
}
.stage__mat {
  position: absolute;
  left: -4%; right: -4%;
  bottom: -3%;
  width: 108%;
  height: 18%;
  object-fit: fill;
  opacity: .85;
}
.stage__frames { position: absolute; inset: 0; filter: url(#boil); }
.stage__frame {
  position: absolute;
  inset: 0;
  background: var(--paint);
  opacity: 0;
  -webkit-mask: var(--m) center bottom / contain no-repeat;
          mask: var(--m) center bottom / contain no-repeat;
}
.stage__frame.is-on { opacity: .9; }

.benefits { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
/* бумажка совета + два стикера под ней; высота подстраивается под текст */
.benefit {
  position: absolute;
  left: 4.5vw;
  top: 12.5vh;
  width: min(560px, 37vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  align-items: start;
}
.benefit .note { position: relative; visibility: hidden; pointer-events: auto; }
.benefit__main { grid-column: 1 / -1; padding: 32px 38px 64px; } /* низ листа чуть ниже места, где приклеены стикеры */
.benefit__title {
  margin: 0 0 14px;
  font: 500 clamp(34px, 2.6vw, 44px)/1.02 var(--f-serif);
  letter-spacing: -.01em;
}
.benefit__title em { font-style: italic; color: var(--cocoa); }
.benefit__ex {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 12px 4px;
  background: color-mix(in srgb, var(--c, #7FA36F) 22%, transparent);
  font: italic 500 22px/1.2 var(--f-serif);
}
.benefit__steps, .benefit__gain { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: rgba(74, 52, 42, .86); }
.benefit__gain { margin: 0; }
.benefit__gain b { font-weight: 600; color: var(--espresso); }

.note--small {
  width: auto;
  margin-top: -34px;    /* стикеры приклеены к нижнему краю основного листа */
  padding: 26px 24px 20px;
  font-size: 14px;
  line-height: 1.45;
}
.note--small .note__hand { margin-bottom: 8px; font-size: 22px; }
.note--small p { margin: 0; }
.note--small ul { margin: 0; padding: 0; list-style: none; }
.note--small li { position: relative; padding-left: 16px; margin-bottom: 4px; }
.note--small li::before { content: "—"; position: absolute; left: 0; color: var(--camel); }
.note--small .tape--top { width: 96px; height: 28px; margin-left: -48px; top: -14px; }
.note--kraft { background-color: #EADCC6; }
.benefit__aside, .benefit__warn { margin-top: 8px !important; font: 600 18px/1.1 var(--f-hand); color: var(--cocoa); }
.benefit__warn { color: #A0553A; }
.benefit__more { margin-left: 18px; }
.benefit__when { margin-top: -42px; margin-right: -22px; }

.benefits__outro {
  z-index: 5;
  left: 5vw;
  top: 26vh;
  width: min(500px, 34vw);
  visibility: hidden;
}

.benefit-rail {
  position: absolute;
  z-index: 5;
  right: 2.6vw;
  top: 50%;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-50%);
  visibility: hidden;
}
.benefit-rail li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: 34px;
  font: 600 19px/1 var(--f-hand);
  color: var(--camel);
  opacity: .55;
  transition: opacity .4s, color .4s;
}
.benefit-rail li::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
  transition: transform .4s var(--ease);
}
.benefit-rail li { cursor: pointer; }
.benefit-rail li:hover, .benefit-rail li:focus-visible { opacity: 1; color: var(--cocoa); outline: none; }
.benefit-rail li:hover::after { transform: scale(1.35); }
.benefit-rail li.is-on { opacity: 1; color: var(--espresso); }
.benefit-rail li.is-on::after { transform: scale(1.7); }

/* ── ЭКРАН 3 · отзывы-рилсы ──────────────────────────────── */
.reviews { position: relative; z-index: 2; padding-bottom: 12vh; }
.reviews__head {                          /* телефоны начинаются с середины экрана */
  position: relative;
  height: 50vh;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reviews__cluster { display: flex; align-items: center; gap: 200px; margin-top: 4vh; }
.reviews__note {
  position: relative;
  width: min(560px, 40vw);
  padding: 36px 44px 34px;
  transform: rotate(-1.5deg);
}
/* стикер с оценкой наклеен на угол листа */
.reviews__score {
  position: absolute;
  right: -165px;
  top: 34px;
  width: 200px;
  margin: 0;
  transform: rotate(5deg);
  text-align: center;
}
.reviews__big { font: italic 500 50px/1 var(--f-serif) !important; color: var(--espresso); margin-bottom: 6px !important; }
.reviews__big span { font-style: normal; font-size: 32px; color: #C9A24A; vertical-align: 6px; }
.reviews__tips {
  position: relative;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
  font: 600 25px/1.05 var(--f-hand);
  color: var(--cocoa);
  transform: rotate(-3deg);
}
.reviews__tips li { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.reviews__tip-ico { flex: none; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reviews__tip-ico--heart { fill: #E0566A; stroke: #E0566A; animation: tip-beat 1.6s ease-in-out infinite; }
@keyframes tip-beat { 0%, 60%, 100% { transform: scale(1); } 20% { transform: scale(1.25); } 40% { transform: scale(.95); } }
.reviews__arrow { position: absolute; right: -40px; bottom: -80px; width: 48px; height: 72px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.reviews__wall { position: relative; width: 100%; overflow: visible; }
.reviews__col { position: absolute; top: 0; width: var(--pw); will-change: transform; }
.reviews__cell { position: absolute; left: 0; width: var(--pw); transform: rotate(var(--rot)); transition: transform .5s var(--ease); }
.reviews__cell { cursor: zoom-in; }
.reviews__cell:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); z-index: 3; }

/* айфон 17: корпус, Dynamic Island, кнопки — всё кодом, чётко на любом экране */
.iphone {
  --frame: #D8D2E2; --frame-dark: #B9B1C8;
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  padding: 3.2%;
  border-radius: 16% / 7.4%;
  background: linear-gradient(135deg, var(--frame) 0%, var(--frame-dark) 45%, var(--frame) 70%, var(--frame-dark) 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .55),
    inset 0 0 0 3px rgba(0, 0, 0, .06),
    0 2px 4px rgba(74, 52, 42, .12),
    0 24px 40px -18px rgba(74, 52, 42, .45),
    0 50px 70px -40px rgba(74, 52, 42, .35);
}
.iphone--sage { --frame: #CCD4C3; --frame-dark: #AAB59E; }
.iphone--mist { --frame: #CBD5E0; --frame-dark: #A9B7C6; }
.iphone--white { --frame: #F1EFEA; --frame-dark: #D6D2CA; }
.iphone--black { --frame: #4A4847; --frame-dark: #2A2929; }
.iphone--lavender { --frame: #DCD4E6; --frame-dark: #B9AECB; }
/* боковые кнопки: слева — действие и громкость, справа — питание и камера */
.iphone__btn {
  position: absolute;
  width: 1.5%;
  border-radius: 2px;
  background: linear-gradient(to right, var(--frame-dark), var(--frame));
}
.iphone__btn--action, .iphone__btn--volup, .iphone__btn--voldown { left: -1.1%; }
.iphone__btn--power, .iphone__btn--cam { right: -1.1%; background: linear-gradient(to left, var(--frame-dark), var(--frame)); }
.iphone__btn--action { top: 15%; height: 4%; }
.iphone__btn--volup { top: 22.5%; height: 7%; }
.iphone__btn--voldown { top: 31%; height: 7%; }
.iphone__btn--power { top: 25%; height: 11%; }
.iphone__btn--cam { top: 58%; height: 7%; }
.iphone__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 13.5% / 6.4%;
  background: #111;
  container-type: inline-size;
  color: #fff;
  font-family: -apple-system, "SF Pro Text", "Helvetica Neue", var(--f-sans);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.reel__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 50% 40%;
}
.iphone.is-playing .reel__img { animation: reel-kenburns 14s ease-in-out infinite alternate; }
@keyframes reel-kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, 1.5%); } }
.reel__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.42), transparent 16%),
    linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 26%, transparent 46%);
}
/* статус-бар */
.reel__status {
  position: absolute; left: 0; right: 0; top: 0;
  height: 13cqw;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 9cqw 0 11cqw;
  font-size: 4.9cqw; letter-spacing: -.01em;
}
.reel__island {
  position: absolute; left: 50%; top: 3.2cqw;
  width: 30cqw; height: 8.6cqw; margin-left: -15cqw;
  border-radius: 99px; background: #000;
}
.reel__sys { display: flex; align-items: center; gap: 1.6cqw; }
.reel__sys i { display: block; }
.reel__sys svg { fill: #fff; height: 3.3cqw; width: auto; }
.reel__sys .bat { width: 7cqw; height: 3.4cqw; border: 1px solid rgba(255,255,255,.55); border-radius: 1.2cqw; position: relative; }
.reel__sys .bat::after { content: ""; position: absolute; inset: 1px; right: 20%; border-radius: .6cqw; background: #fff; }
/* шапка Reels */
.reel__top {
  position: absolute; left: 5.5cqw; right: 5cqw; top: 14cqw;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 7.4cqw; letter-spacing: -.02em;
}
.ig-ico { width: 7.6cqw; height: 7.6cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* правая колонка действий */
.reel__actions {
  position: absolute; right: 1.2cqw; bottom: 25cqw; width: 13cqw;
  display: flex; flex-direction: column; align-items: center; gap: 4.4cqw;
}
.reel__act {
  display: flex; flex-direction: column; align-items: center; gap: .8cqw;
  padding: 0; border: 0; background: none; color: inherit; cursor: default;
  font: 600 3.1cqw/1 inherit;
  white-space: nowrap;
}
.reel__act .ig-ico { width: 8.4cqw; height: 8.4cqw; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.reel__like { cursor: pointer; }
.reel__like.is-liked .ig-ico { fill: #FF3040; stroke: #FF3040; }
.reel__disc {
  width: 8.4cqw; height: 8.4cqw; margin-top: 1cqw;
  border: 1.6px solid #fff; border-radius: 2.2cqw;
  background-size: cover; background-position: center;
}
/* низ: автор, текст, звук */
.reel__info { position: absolute; left: 4.5cqw; right: 17cqw; bottom: 22cqw; }
.reel__who { display: flex; align-items: center; gap: 2.4cqw; font-size: 3.9cqw; }
.reel__ava, .reel__me { flex: none; width: 8cqw; height: 8cqw; border-radius: 50%; background-size: 260%; background-position: 50% 22%; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.reel__follow { padding: 1.1cqw 2.6cqw; border: 1px solid rgba(255,255,255,.8); border-radius: 2cqw; font-size: 3.4cqw; font-weight: 600; }
.reel__text {
  margin: 2.4cqw 0 0; font-size: 3.7cqw; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.reel__song { display: flex; align-items: center; gap: 1.6cqw; margin: 2.2cqw 0 0; font-size: 3.3cqw; opacity: .92; white-space: nowrap; overflow: hidden; }
.reel__song .ig-ico { width: 3.6cqw; height: 3.6cqw; flex: none; }
.reel__song span { overflow: hidden; text-overflow: ellipsis; }
/* прогресс «видео» и нижнее меню */
.reel__progress { position: absolute; left: 0; right: 0; bottom: 17.5cqw; height: .7cqw; background: rgba(255,255,255,.25); }
.reel__progress i { display: block; height: 100%; width: 0; background: #fff; }
.iphone.is-playing .reel__progress i { animation: reel-progress 14s linear infinite; }
@keyframes reel-progress { to { width: 100%; } }
.reel__nav {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 17.5cqw; padding: 2.4cqw 7cqw 5cqw;
  display: flex; align-items: center; justify-content: space-between;
  background: #000;
}
.reel__nav .ig-ico { width: 7cqw; height: 7cqw; stroke-width: 1.9; }
.reel__nav .ig-ico.is-on { stroke-width: 2.4; }
.reel__me { width: 7cqw; height: 7cqw; }
.reel__nav::after { content: ""; position: absolute; left: 50%; bottom: 1.4cqw; width: 34cqw; height: 1.3cqw; margin-left: -17cqw; border-radius: 99px; background: #fff; }
.reel__bigheart { position: absolute; left: 50%; top: 45%; width: 30cqw; height: 30cqw; margin: -15cqw 0 0 -15cqw; opacity: 0; visibility: hidden; pointer-events: none; }
.reel__bigheart .ig-ico { width: 100%; height: 100%; fill: #fff; stroke: none; filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); }

/* просмотр рилса целиком */
.reel-box {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5vw;
  background: rgba(46, 34, 27, .72);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}
.reel-box.is-open { display: flex; }
.reel-box__stage { height: 90vh; aspect-ratio: 9 / 19.5; }
.iphone--big .reel__text { -webkit-line-clamp: unset; display: block; max-height: 42cqw; overflow: auto; }
.iphone--big .reel__info { bottom: 22cqw; }
.reel-box__close, .reel-box__nav {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border: 0; border-radius: 50%;
  background: rgba(245, 241, 234, .92);
  padding: 0;
  color: var(--espresso);
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s;
}
.reel-box__close svg, .reel-box__nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reel-box__close:hover, .reel-box__nav:hover { transform: scale(1.08); background: #fff; }
.reel-box__close { position: absolute; top: 28px; right: 32px; }
.reel-box__hint { position: absolute; bottom: 2.4vh; left: 0; right: 0; margin: 0; text-align: center; font: 600 22px/1 var(--f-hand); color: rgba(245, 241, 234, .85); }

/* ── ЭКРАН 4 · запись ───────────────────────────────────── */
.join { position: relative; z-index: 2; height: 290vh; }
.join__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.join__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.join__intro {
  position: absolute;
  left: 0; right: 0;
  top: 42vh;
  margin: 0;
  text-align: center;
  font: 600 clamp(44px, 4vw, 64px)/1 var(--f-hand);
  color: var(--cocoa);
  transform-origin: 50% 50%;
}
/* логотип внутри экрана телефона */
.join__logo {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--sw) * .02);
  pointer-events: none;
  visibility: hidden;
}
.join__logo img { width: 58%; }
.join__word { font: italic 500 calc(var(--sw) * .3)/1 var(--f-serif); color: var(--espresso); }
.join__sub { font: 600 calc(var(--sw) * .055)/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cocoa); }

/* карточка записи — «настоящий мир»: чистая льняная карточка без скотча */
.join__card {
  position: absolute;
  right: 5vw;
  top: max(100px, calc(50% - 330px));
  width: min(560px, 40vw);
  padding: 30px 38px 24px;
  border-radius: 28px;
  background: rgba(250, 247, 241, .94);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px -30px rgba(74, 52, 42, .45), 0 2px 6px rgba(74, 52, 42, .08);
  visibility: hidden;
}
.join__eyebrow { margin: 0 0 6px; font: 600 23px/1 var(--f-hand); color: var(--cocoa); }
.join__title { margin: 0 0 10px; font: 500 clamp(32px, 2.5vw, 44px)/1.02 var(--f-serif); letter-spacing: -.01em; }
.join__title em { font-style: italic; color: var(--cocoa); }
.join__lead { margin: 0 0 16px; font-size: 14.5px; line-height: 1.5; color: rgba(74, 52, 42, .8); }
.join__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span, .chips legend { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(74, 52, 42, .6); }
.field input {
  height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(178, 150, 125, .45);
  border-radius: 14px;
  background: #fff;
  font: 400 15px/1 var(--f-sans);
  color: var(--espresso);
  outline: none;
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus { border-color: var(--cocoa); box-shadow: 0 0 0 4px rgba(125, 90, 68, .12); }
.field.is-error input { border-color: #C0563F; box-shadow: 0 0 0 4px rgba(192, 86, 63, .12); }
.chips { margin: 0 0 12px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { margin-bottom: 8px; padding: 0; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips label span {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid rgba(178, 150, 125, .5);
  border-radius: 999px;
  font-size: 14px;
  transition: background .25s, color .25s, border-color .25s;
}
.chips label:hover span { border-color: var(--cocoa); }
.chips input:checked + span { background: var(--cocoa); border-color: var(--cocoa); color: var(--linen); }
.chips input:focus-visible + span { box-shadow: 0 0 0 3px rgba(125, 90, 68, .25); }
.join__submit { width: 100%; margin: 6px 0 12px; border: 0; cursor: pointer; }
.join__agree { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; line-height: 1.4; color: rgba(74, 52, 42, .65); cursor: pointer; }
.join__agree input { margin-top: 2px; accent-color: var(--cocoa); }
.join__agree.is-error { color: #C0563F; }
/* низкие экраны: карточка целиком без прокрутки */
@media (max-height: 820px) {
  .join__card { top: 92px; padding: 24px 34px 18px; }
  .join__eyebrow { font-size: 21px; }
  .join__title { font-size: clamp(30px, 2.3vw, 38px); margin-bottom: 8px; }
  .join__lead { margin-bottom: 12px; font-size: 14px; }
  .join__row { margin-bottom: 10px; }
  .field input { height: 42px; }
  .chips { margin-bottom: 9px; gap: 6px; }
  .chips legend { margin-bottom: 6px; }
  .chips label span { padding: 7px 12px; font-size: 13.5px; }
  .join__submit { height: 50px; margin: 4px 0 10px; }
}
.join__thanks { text-align: center; padding: 30px 0 20px; }
.join__thanks img { width: 110px; margin: 0 auto 12px; }

/* ── ЭКРАН 5 · футер-коврик ─────────────────────────────── */
.footer { position: relative; z-index: 2; padding: 12vh 2vw 5vh; }
.mat {
  --roll: .8787;                         /* доля ширины, где начинается рулон */
  position: relative;
  width: min(76vw, calc(70vh * 2.09), 1180px);
  aspect-ratio: 1632 / 781;
  margin: 0 auto;
}
.mat__flat, .mat__roll {
  position: absolute;
  inset: 0;
  background: url(../assets/img/footer-mat.webp) center / 100% 100% no-repeat;
}
.mat__flat { clip-path: inset(0 calc((1 - var(--roll)) * 100%) 0 0); }
.mat__roll { clip-path: inset(0 0 0 calc(var(--roll) * 100%)); }
/* строчка по краю коврика */
.mat__flat::after {
  content: "";
  position: absolute;
  left: 2.6%; top: 7.5%; bottom: 7.5%;
  right: calc((1 - var(--roll)) * 100% + 1%);
  border: 1.5px dashed rgba(245, 241, 234, .22);
  border-right: 0;
  border-radius: 18px 0 0 18px;
}
.mat__content {
  position: absolute;
  left: 7%; top: 14%; bottom: 16%;
  right: calc((1 - var(--roll)) * 100% + 4%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--linen);
}
.mat__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 36px; }
.mat__brand { display: flex; flex-direction: column; gap: 12px; }
/* нашивка из льна под логотипом, пришита к коврику */
.mat__patch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px 10px 12px;
  border-radius: 14px;
  background: var(--sheet);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .15), 0 10px 18px -8px rgba(0, 0, 0, .45);
  transform: rotate(-2deg);
}
.mat__patch::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1.3px dashed rgba(125, 90, 68, .45);
  border-radius: 10px;
  pointer-events: none;
}
.mat__patch img { width: clamp(46px, 3.8vw, 60px); }
.mat__word { margin: 0; font: italic 500 clamp(38px, 3.2vw, 52px)/1 var(--f-serif); color: var(--espresso); }
.mat__tag { margin: 0; font-size: 12.5px; line-height: 1.45; letter-spacing: .06em; color: rgba(245, 241, 234, .62); }
.mat__col { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; white-space: nowrap; }
.mat__col h4 { margin: 0 0 4px; font: 600 12px/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(245, 241, 234, .5); }
.mat__col a, .mat__legal a { color: var(--linen); text-decoration: none; opacity: .9; transition: opacity .25s; }
.mat__col a:hover, .mat__legal a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.mat__mid { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.mat__hand { margin: 0; font: 600 clamp(30px, 2.6vw, 44px)/1 var(--f-hand); color: #E7C9A8; transform: rotate(-2deg); }
.mat__btn { background: var(--linen); color: var(--espresso); }
.mat__btn:hover { background: #fff; }
.mat__legal { display: flex; justify-content: space-between; gap: 30px; padding-top: 18px; border-top: 1px solid rgba(245, 241, 234, .14); font-size: 12px; line-height: 1.6; color: rgba(245, 241, 234, .55); }
.mat__legal p { margin: 0; }
.mat__legal p:last-child { text-align: right; }
.mat__dev { color: rgba(245, 241, 234, .75); }
.mat__dev a { color: #E7C9A8; opacity: 1; }

/* ── «ё» с двумя голубыми семечками льна вместо точек ────── */
.yo { position: relative; display: inline-block; }
.yo::before, .yo::after {
  content: "";
  position: absolute;
  top: .02em;
  width: .15em;
  height: .19em;
  border-radius: 55% 45% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 40% 35%, #b5c6dc, #7f9bc0 70%, #6f8cb3);
  opacity: .92;
}
.yo::before { left: .08em; transform: rotate(-18deg); }
.yo::after  { left: .3em;  transform: rotate(14deg); }

.logo__mark { width: 44px; height: 44px; object-fit: contain; align-self: center; }

/* ── прелоадер ─────────────────────────────────────────── */
body.is-loading { overflow: hidden; }
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--linen) url(../assets/img/paper.webp) center / cover;
  will-change: transform;
}
.preloader__edge {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  width: 100%;
  height: 40px;
  fill: #f6f3ee;
  filter: drop-shadow(0 6px 6px rgba(74, 52, 42, .18));
}
.preloader__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.preloader__mark { position: relative; width: 340px; height: 340px; }
.preloader__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.preloader__wash { z-index: 2; }
.preloader__thread { z-index: 3; }
.preloader__wreath { z-index: 1; clip-path: inset(100% 0 0 0); }
.preloader__orbit { position: absolute; inset: 0; pointer-events: none; } /* без z-index: цветки встают то перед, то за фигуру */
.flax {
  position: absolute;
  left: 0; top: 0;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  background: url(../assets/img/flax-flower.webp) center / contain no-repeat;
  will-change: transform;
}
.preloader__thread { overflow: visible; }
.preloader__thread path {
  fill: none;
  stroke: var(--camel);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.preloader__wash {
  --r: -20%;
  -webkit-mask-image: radial-gradient(circle at 50% 64%, #000 var(--r), transparent calc(var(--r) + 18%));
          mask-image: radial-gradient(circle at 50% 64%, #000 var(--r), transparent calc(var(--r) + 18%));
}
.preloader__word {
  margin: 18px 0 4px;
  font: italic 500 112px/1 var(--f-serif);
  letter-spacing: -.02em;
  color: var(--espresso);
}
.preloader__word > span { display: inline-block; opacity: 0; }
.preloader__tag {
  margin: 0;
  font: 500 12px/1 var(--f-sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cocoa);
  opacity: 0;
}
.preloader__status {
  display: flex;
  gap: 18px;
  align-items: baseline;
  margin: 42px 0 0;
  font: 600 24px/1 var(--f-hand);
  color: var(--camel);
}
.preloader__count { min-width: 3.2ch; text-align: left; color: var(--cocoa); }

/* ── всплывающая форма записи ──────────────────────────── */
html.is-locked, html.is-locked body { overflow: hidden; }
.trial-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3vh 20px;
  background: rgba(46, 34, 27, .55);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.trial-modal.is-open { display: flex; }
.trial-modal .join__card {
  position: relative;
  right: auto;
  top: auto;
  width: min(580px, 92vw);
  margin: 0;
  visibility: visible;
  opacity: 1;
  transform: none;
}
.trial-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(125, 90, 68, .1);
  color: var(--espresso);
  cursor: pointer;
  transition: background .25s, transform .3s var(--ease);
}
.trial-modal__close:hover { background: rgba(125, 90, 68, .18); transform: rotate(90deg); }
.trial-modal__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.trial-modal .join__title { padding-right: 44px; }

/* ── защита контента ───────────────────────────────────── */
html { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* печать и «сохранить как PDF» — пустая страница с подписью */
@media print {
  body > * { display: none !important; }
  body::after { content: "© «Лён» — материалы сайта защищены авторским правом."; display: block; padding: 40px; font: 16px Georgia, serif; }
}