:root {
  --ink: #11110f;
  --paper: #f4f2ea;
  --paper-bright: #fffef8;
  --signal: #ed3a24;
  --cyan: #10dde0;
  --blue: #3e6fff;
  --acid: #dfff31;
  --display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

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

html,
body {
  min-width: 320px;
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
}

.newspaper-animation {
  display: none;
}

.facts-screen {
  display: none;
}

.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto auto;
  height: 72px;
  border-bottom: 1px solid var(--ink);
  background: rgba(244, 242, 234, 0.96);
}

.brand,
.site-header nav,
.header-cta {
  display: flex;
  align-items: center;
}

.brand {
  gap: 1px;
  padding: 0 34px;
  font: 900 13px/1 var(--display);
  letter-spacing: 0.04em;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--paper-bright);
  background: var(--signal);
  font-size: 21px;
}

.site-header nav a {
  display: grid;
  height: 72px;
  place-items: center;
  padding: 0 26px;
  border-left: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 850;
}

.header-cta {
  gap: 12px;
  padding: 0 28px;
  border-left: 1px solid var(--ink);
  color: var(--paper-bright);
  background: var(--signal);
  font-size: 14px;
  font-weight: 850;
}

.hero {
  position: relative;
  display: grid;
  min-height: calc(100vh - 72px - 52px);
  padding: clamp(28px, 4vw, 58px) clamp(28px, 5vw, 76px) 24px;
  isolation: isolate;
}

.hero-copy {
  position: relative;
  z-index: 4;
  width: min(100%, 980px);
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 11px;
  align-items: center;
  margin: 0 0 19px;
  font: 800 12px/1.2 var(--mono);
  letter-spacing: 0.055em;
}

.eyebrow strong {
  padding: 6px 9px;
  color: var(--paper-bright);
  background: var(--signal);
}

.eyebrow span {
  font-weight: 950;
}

h1 {
  position: relative;
  z-index: 5;
  width: max-content;
  max-width: 100%;
  margin: 0;
  font: 950 clamp(54px, 7vw, 96px)/0.82 var(--display);
  letter-spacing: -0.062em;
}

h1 span {
  display: block;
  width: max-content;
  max-width: 100%;
}

.red-line {
  color: var(--signal);
}

.lead {
  position: relative;
  z-index: 7;
  max-width: 680px;
  margin: 28px 0 0;
  font-size: clamp(16px, 1.65vw, 21px);
  line-height: 1.45;
}

.actions {
  position: relative;
  z-index: 8;
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 25px;
}

.button {
  display: flex;
  width: min(350px, 100%);
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border: 2px solid var(--ink);
  color: var(--paper-bright);
  background: var(--signal);
  box-shadow: 6px 6px 0 var(--ink);
  font-size: 16px;
  font-weight: 900;
}

.actions p {
  max-width: 250px;
  margin: 0;
  color: #706e66;
  font-size: 13px;
}

.portrait-art {
  --base-rotate: -5deg;
  position: absolute;
  z-index: 3;
  top: 66px;
  right: clamp(-48px, -2vw, -14px);
  width: clamp(260px, 30vw, 430px);
  aspect-ratio: 1;
  cursor: grab;
  outline: none;
  transform: perspective(900px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) rotate(var(--base-rotate));
  transform-origin: 50% 55%;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
  touch-action: manipulation;
}

.portrait-art:active {
  cursor: grabbing;
}

.portrait-art:focus-visible {
  outline: 4px solid var(--blue);
  outline-offset: 8px;
}

.portrait-window,
.portrait-shadow {
  position: absolute;
  inset: 0;
  border: 5px solid var(--signal);
  border-radius: 50%;
}

.portrait-shadow {
  background: var(--cyan);
  transform: translate(17px, 16px);
}

.portrait-window {
  overflow: hidden;
  background: var(--paper-bright);
  clip-path: circle(49% at 50% 50%);
}

.portrait-window img {
  height: 100%;
  object-fit: cover;
  object-position: 54% 44%;
  filter: grayscale(1) contrast(1.22);
  transform: scale(1.09);
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 300ms ease;
}

.portrait-art:hover .portrait-window img,
.portrait-art:focus .portrait-window img {
  filter: grayscale(0.15) contrast(1.08);
  transform: scale(1.16);
}

.portrait-label {
  position: absolute;
  z-index: 3;
  right: -9px;
  bottom: 22px;
  padding: 7px 10px;
  border: 2px solid var(--ink);
  color: var(--paper-bright);
  background: var(--signal);
  font: 900 12px/1 var(--mono);
  transform: rotate(7deg);
}

.orbit-text {
  display: none;
}

.portrait-art.is-spinning {
  animation: portrait-spin 780ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

body.motion-on .portrait-art:not(:hover):not(:focus) {
  animation: portrait-float 4.2s ease-in-out infinite alternate;
}

.poster-aside {
  display: none;
}

.bottom-strip {
  position: fixed;
  z-index: 12;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 56px);
  overflow: hidden;
  border-top: 1px solid var(--ink);
  background: var(--acid);
  font: 900 13px/1 var(--mono);
}

.bottom-strip i {
  font-style: normal;
}

/* 02 — журнальный коллаж */
body.variant-collage .hero {
  background:
    linear-gradient(90deg, transparent 0 77%, rgba(62, 111, 255, 0.13) 77%),
    var(--paper);
}

body.variant-collage h1 {
  z-index: 6;
}

body.variant-collage .portrait-art {
  --base-rotate: 5deg;
  top: 30px;
  right: clamp(-70px, -3vw, -20px);
  width: clamp(280px, 33vw, 480px);
  aspect-ratio: 0.82;
}

body.variant-collage .portrait-shadow {
  inset: 13px -13px -13px 13px;
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--blue);
  transform: none;
}

body.variant-collage .portrait-window {
  border: 3px solid var(--ink);
  border-radius: 0;
  clip-path: polygon(4% 0, 100% 3%, 95% 100%, 0 96%);
}

body.variant-collage .portrait-window img {
  object-position: 54% 45%;
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1.1);
}

body.variant-collage .portrait-art:hover .portrait-window img,
body.variant-collage .portrait-art:focus .portrait-window img {
  filter: saturate(1.3) contrast(1.04);
  transform: scale(1.17);
}

body.variant-collage .portrait-label {
  right: auto;
  bottom: 26px;
  left: -18px;
  color: var(--ink);
  background: var(--acid);
  transform: rotate(-7deg);
}

body.variant-collage .lead {
  max-width: 610px;
  padding: 10px 13px;
  background: color-mix(in srgb, var(--paper) 89%, transparent);
  box-decoration-break: clone;
}

body.variant-collage .bottom-strip {
  color: var(--paper-bright);
  background: var(--blue);
}

/* 03 — двухцветный плакат */
body.variant-poster {
  background: var(--cyan);
}

body.variant-poster .site-header {
  background: var(--cyan);
}

body.variant-poster .hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, 0.75fr);
  gap: 32px;
  padding-right: 0;
  background: var(--cyan);
}

body.variant-poster .hero-copy {
  width: 100%;
}

body.variant-poster h1 {
  font-size: clamp(50px, 6.2vw, 88px);
}

body.variant-poster h1 span {
  width: fit-content;
  padding: 1px 8px 3px 2px;
}

body.variant-poster .ink-line {
  color: var(--paper-bright);
  background: var(--ink);
}

body.variant-poster .red-line {
  color: var(--paper-bright);
  background: var(--signal);
}

body.variant-poster .portrait-art {
  display: none;
}

body.variant-poster .poster-aside {
  position: relative;
  z-index: 3;
  display: block;
  min-width: 0;
  margin-top: -10px;
  overflow: hidden;
  border-left: 4px solid var(--ink);
  background: var(--signal);
  cursor: pointer;
  transform-origin: 50% 55%;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.variant-poster .poster-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--cyan);
}

body.variant-poster .poster-photo::after {
  position: absolute;
  inset: 0;
  background: var(--cyan);
  content: "";
  mix-blend-mode: color;
  opacity: 0.95;
}

body.variant-poster .poster-photo img {
  height: 100%;
  object-fit: cover;
  object-position: 47% 50%;
  filter: grayscale(1) contrast(1.45);
  transform: scale(1.08);
  transition: transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.variant-poster .poster-aside:hover .poster-photo img {
  transform: scale(1.16) rotate(-2deg);
}

body.variant-poster .poster-aside > p {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 15px;
  margin: 0;
  padding: 7px 9px;
  color: var(--paper-bright);
  background: var(--ink);
  font: 900 12px/1 var(--mono);
}

body.variant-poster .poster-aside > span {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  color: var(--paper-bright);
  font: 950 clamp(25px, 3.2vw, 48px)/0.82 var(--display);
  letter-spacing: -0.05em;
}

body.variant-poster .lead {
  max-width: 620px;
  font-weight: 650;
}

body.variant-poster .bottom-strip {
  color: var(--paper-bright);
  background: var(--ink);
}

body.variant-poster .poster-aside.is-spinning {
  animation: poster-jolt 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes portrait-float {
  from {
    transform: perspective(900px) translateY(-4px) rotate(var(--base-rotate));
  }
  to {
    transform: perspective(900px) translateY(5px) rotate(calc(var(--base-rotate) + 2deg));
  }
}

@keyframes portrait-spin {
  0% { transform: perspective(900px) rotate(var(--base-rotate)) scale(1); }
  38% { transform: perspective(900px) rotate(calc(var(--base-rotate) + 16deg)) scale(1.05); }
  100% { transform: perspective(900px) rotate(calc(var(--base-rotate) + 360deg)) scale(1); }
}

@keyframes poster-jolt {
  0% { transform: rotate(0) scale(1); }
  45% { transform: rotate(-3deg) scale(0.97); }
  100% { transform: rotate(0) scale(1); }
}

/* Мобильное полотно iframe */
body.device-mobile .site-header {
  grid-template-columns: 1fr auto;
  height: 58px;
}

body.device-mobile .brand {
  gap: 1px;
  padding: 0 16px;
  font-size: 11px;
}

body.device-mobile .brand-mark {
  width: 32px;
  height: 32px;
  font-size: 18px;
}

body.device-mobile .site-header nav {
  display: none;
}

body.device-mobile .header-cta {
  padding: 0 14px;
  font-size: 12px;
}

body.device-mobile .hero {
  display: block;
  min-height: calc(100vh - 58px - 39px);
  padding: 24px 17px 16px;
}

body.device-mobile .hero-copy {
  width: 100%;
}

body.device-mobile .eyebrow {
  gap: 5px 7px;
  margin-bottom: 18px;
  font-size: 10px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

body.device-mobile .eyebrow strong {
  padding: 5px 7px;
}

body.device-mobile h1 {
  font-size: clamp(44px, 12.6vw, 51px);
  line-height: 0.87;
}

body.device-mobile .lead {
  max-width: none;
  margin-top: 23px;
  font-size: 16px;
  line-height: 1.45;
}

body.device-mobile .actions {
  display: block;
  margin-top: 23px;
}

body.device-mobile .button {
  width: 100%;
  min-height: 58px;
  padding: 13px 17px;
  font-size: 15px;
}

body.device-mobile .actions p {
  margin-top: 16px;
  font-size: 12px;
}

body.device-mobile .bottom-strip {
  height: 39px;
  justify-content: flex-start;
  gap: 18px;
  padding-inline: 17px;
  font-size: 9px;
  white-space: nowrap;
}

body.device-mobile .portrait-art {
  top: 110px;
  right: -34px;
  width: 172px;
  z-index: 2;
}

body.device-mobile h1 {
  z-index: 5;
}

body.device-mobile .portrait-shadow {
  transform: translate(8px, 8px);
}

body.device-mobile .portrait-window,
body.device-mobile .portrait-shadow {
  border-width: 4px;
}

body.device-mobile .portrait-label {
  right: 2px;
  bottom: 7px;
  padding: 5px 7px;
  font-size: 9px;
}

body.device-mobile:not(.variant-poster) .lead {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}

body.device-mobile.variant-collage .hero {
  background:
    linear-gradient(90deg, transparent 0 81%, rgba(62, 111, 255, 0.15) 81%),
    var(--paper);
}

body.device-mobile.variant-collage .portrait-art {
  top: 137px;
  right: -31px;
  width: 178px;
  aspect-ratio: 0.78;
}

body.device-mobile.variant-collage .portrait-label {
  right: auto;
  bottom: 12px;
  left: -7px;
}

body.device-mobile.variant-collage .lead {
  margin-top: 100px;
  padding: 7px 8px;
}

body.device-mobile.variant-poster .hero {
  display: block;
  padding-right: 17px;
  background: var(--cyan);
}

body.device-mobile.variant-poster h1 {
  font-size: 43px;
}

body.device-mobile.variant-poster h1 span {
  padding-right: 5px;
}

body.device-mobile.variant-poster .poster-aside {
  position: absolute;
  z-index: 2;
  top: 119px;
  right: -1px;
  width: 168px;
  height: 284px;
  border: 3px solid var(--ink);
  border-right: 0;
  transform: rotate(2deg);
}

body.device-mobile.variant-poster .poster-aside > span {
  top: 10px;
  left: 9px;
  font-size: 21px;
}

body.device-mobile.variant-poster .poster-aside > p {
  right: 8px;
  bottom: 9px;
  font-size: 9px;
}

body.device-mobile.variant-poster .lead,
body.device-mobile.variant-poster .actions {
  position: relative;
  z-index: 6;
}

body.device-mobile.variant-poster .lead {
  margin-right: 22px;
  padding: 8px 9px;
  background: color-mix(in srgb, var(--cyan) 92%, transparent);
}

@media (max-width: 900px) and (min-width: 500px) {
  .portrait-art {
    opacity: 0.88;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* V2 — три варианта одной журнальной коллажной системы */
.eyebrow .country {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  white-space: nowrap;
}

.eyebrow .country::before {
  content: "·";
  font-weight: 950;
}

/* 01 — чистый коллаж, без пересечения фотографии и заголовка */
body.variant-sticker .hero {
  background:
    linear-gradient(90deg, transparent 0 82%, rgba(62, 111, 255, 0.1) 82%),
    var(--paper);
}

body.variant-sticker .hero-copy {
  width: 100%;
  max-width: 1240px;
}

body.variant-sticker h1 {
  font-size: clamp(52px, 6.1vw, 82px);
}

body.variant-sticker .portrait-art {
  --base-rotate: -3deg;
  top: 72px;
  right: 8px;
  width: clamp(310px, 28vw, 390px);
  aspect-ratio: 0.88;
}

body.variant-sticker .portrait-window,
body.variant-sticker .portrait-shadow {
  border: 3px solid var(--ink);
  border-radius: 0;
}

body.variant-sticker .portrait-shadow {
  inset: 12px -12px -12px 12px;
  background: var(--blue);
  transform: none;
}

body.variant-sticker .portrait-window {
  clip-path: polygon(2% 1%, 99% 4%, 96% 100%, 0 96%);
}

body.variant-sticker .portrait-window img {
  object-position: 54% 44%;
  filter: saturate(1.04) contrast(1.02);
  transform: scale(1.08);
}

body.variant-sticker .portrait-art:hover .portrait-window img,
body.variant-sticker .portrait-art:focus .portrait-window img {
  filter: saturate(1.25) contrast(1.04);
  transform: scale(1.14);
}

body.variant-sticker .portrait-label {
  right: 9px;
  bottom: 11px;
  color: var(--ink);
  background: var(--acid);
  transform: rotate(3deg);
}

body.variant-sticker .lead {
  max-width: 650px;
}

/* 02 — выбранный наклонный коллаж, но текст всегда лежит на бумаге */
body.variant-collage .hero-copy {
  width: 100%;
  max-width: 1240px;
}

body.variant-collage h1 span {
  padding-right: 8px;
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  box-shadow: -3px 0 0 var(--paper), 8px 0 0 var(--paper);
}

body.variant-collage .portrait-art {
  top: 54px;
  right: -12px;
  width: clamp(330px, 31vw, 450px);
}

body.variant-collage .portrait-label {
  top: 12px;
  right: 8px;
  bottom: auto;
  left: auto;
  color: var(--paper-bright);
  background: var(--signal);
  transform: rotate(4deg);
}

/* 03 — тот же коллаж, но фотография становится широкой лентой */
body.variant-poster {
  background: var(--paper);
}

body.variant-poster .site-header {
  background: var(--paper);
}

body.variant-poster .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: clamp(28px, 4vw, 58px) clamp(28px, 5vw, 76px) 24px;
  background:
    linear-gradient(90deg, transparent 0 78%, rgba(237, 58, 36, 0.1) 78%),
    var(--paper);
}

body.variant-poster .hero-copy {
  width: 100%;
  max-width: 1240px;
}

body.variant-poster h1 {
  z-index: 6;
  font-size: clamp(50px, 5.9vw, 80px);
}

body.variant-poster h1 span {
  width: fit-content;
  padding: 1px 8px 3px 2px;
}

body.variant-poster .portrait-art {
  --base-rotate: -3deg;
  display: block;
  top: 82px;
  right: -36px;
  width: clamp(390px, 37vw, 520px);
  aspect-ratio: 1.28;
}

body.variant-poster .portrait-window,
body.variant-poster .portrait-shadow {
  border: 3px solid var(--ink);
  border-radius: 0;
}

body.variant-poster .portrait-shadow {
  inset: 13px -13px -13px 13px;
  background: var(--blue);
  transform: none;
}

body.variant-poster .portrait-window {
  clip-path: polygon(0 5%, 97% 0, 100% 93%, 3% 100%);
}

body.variant-poster .portrait-window img {
  object-position: 52% 41%;
  filter: saturate(1.05) contrast(1.03);
  transform: scale(1.08);
}

body.variant-poster .portrait-art:hover .portrait-window img,
body.variant-poster .portrait-art:focus .portrait-window img {
  filter: saturate(1.28) contrast(1.04);
  transform: scale(1.15);
}

body.variant-poster .portrait-label {
  top: auto;
  right: 12px;
  bottom: 12px;
  color: var(--paper-bright);
  background: var(--signal);
  transform: rotate(-3deg);
}

body.variant-poster .poster-aside {
  display: none;
}

body.variant-poster .lead {
  max-width: 620px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
}

body.variant-poster .bottom-strip {
  color: var(--paper-bright);
  background: var(--blue);
}

/* Все страны переносятся целыми словами, ничего не исчезает на телефоне. */
body.device-mobile .eyebrow {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: repeat(2, auto);
  gap: 6px 10px;
  min-height: 46px;
  align-items: center;
  justify-content: start;
  margin-bottom: 13px;
  white-space: normal;
}

body.device-mobile .eyebrow strong {
  grid-row: 1 / 3;
}

body.device-mobile .eyebrow .country {
  gap: 7px;
}

body.device-mobile .eyebrow .country:nth-of-type(1),
body.device-mobile .eyebrow .country:nth-of-type(3) {
  grid-column: 2;
}

body.device-mobile .eyebrow .country:nth-of-type(2),
body.device-mobile .eyebrow .country:nth-of-type(4) {
  grid-column: 3;
}

body.device-mobile h1 {
  font-size: 43px;
}

body.device-mobile.variant-sticker .hero,
body.device-mobile.variant-poster .hero {
  display: block;
  padding: 24px 17px 16px;
  background: var(--paper);
}

body.device-mobile.variant-sticker .portrait-art,
body.device-mobile.variant-poster .portrait-art {
  position: relative;
  top: auto;
  right: auto;
  width: calc(100% - 3px);
  margin: 17px 0 0;
  aspect-ratio: 2.05;
}

body.device-mobile.variant-sticker .portrait-window img,
body.device-mobile.variant-poster .portrait-window img {
  object-position: 52% 38%;
}

body.device-mobile.variant-sticker .lead,
body.device-mobile.variant-poster .lead {
  margin: 19px 0 0;
  padding: 0;
  background: transparent;
}

body.device-mobile.variant-collage .portrait-art {
  top: 188px;
  right: 14px;
  width: 160px;
  aspect-ratio: 0.78;
}

body.device-mobile.variant-collage .hero {
  background: var(--paper);
}

body.device-mobile.variant-collage .portrait-label {
  display: none;
}

body.device-mobile.variant-collage .lead {
  margin-top: 132px;
  padding: 8px 9px;
  background: var(--paper);
}

body.device-mobile.variant-poster h1 {
  font-size: 41px;
}

body.device-mobile.variant-poster .poster-aside {
  display: none;
}

/* Выбранный коллаж: свободная голова, рукописная стрелка и летающие страны. */
.portrait-callout,
.flag-cloud {
  display: none;
}

body.variant-collage h1 span {
  padding-right: 0;
  background: transparent;
  box-shadow: none;
  text-shadow:
    1px 1px 0 var(--paper),
    -1px -1px 0 var(--paper);
}

body.variant-collage .portrait-art {
  top: 68px;
  right: 4px;
  z-index: 3;
  width: clamp(360px, 34vw, 480px);
  aspect-ratio: 1;
}

body.variant-collage .portrait-shadow,
body.variant-collage .portrait-label {
  display: none;
}

body.variant-collage .portrait-window {
  inset: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  clip-path: none;
}

body.variant-collage .portrait-window img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  clip-path: polygon(
    17% 51%, 21% 43%, 20% 35%, 25% 28%, 24% 21%, 31% 14%,
    47% 9%, 59% 12%, 66% 18%, 70% 25%, 77% 29%, 75% 36%,
    72% 43%, 68% 49%, 63% 54%, 59% 61%, 61% 68%, 73% 73%,
    87% 78%, 97% 83%, 100% 87%, 100% 89%, 0 89%, 0 87%, 8% 82%,
    19% 77%, 32% 71%, 35% 64%, 33% 58%, 26% 55%
  );
  filter: saturate(1.06) contrast(1.04) drop-shadow(8px 9px 0 var(--blue));
  transform: scale(1.16);
  transform-origin: 50% 37%;
}

body.variant-collage .portrait-art:hover .portrait-window img,
body.variant-collage .portrait-art:focus .portrait-window img {
  filter: saturate(1.2) contrast(1.04) drop-shadow(11px 12px 0 var(--signal));
  transform: scale(1.2);
}

body.variant-collage .portrait-callout {
  position: absolute;
  z-index: 7;
  top: 58%;
  left: -33%;
  display: block;
  width: 210px;
  height: 72px;
  color: var(--signal);
  font-family: "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  transform: rotate(-5deg);
  pointer-events: none;
}

body.variant-collage .portrait-callout span {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}

body.variant-collage .portrait-callout svg {
  position: absolute;
  inset: 0;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
}

body.variant-collage .flag-cloud {
  position: absolute;
  inset: -8% -5%;
  z-index: 8;
  display: block;
  pointer-events: none;
}

body.variant-collage .flag-cloud span {
  position: absolute;
  display: block;
  font-size: clamp(25px, 2.5vw, 36px);
  filter: drop-shadow(3px 4px 0 rgba(17, 17, 15, 0.28));
  transform-origin: 50% 50%;
}

body.variant-collage .flag-cloud span:nth-child(1) {
  top: -2%;
  left: 19%;
}

body.variant-collage .flag-cloud span:nth-child(2) {
  top: 15%;
  right: -1%;
}

body.variant-collage .flag-cloud span:nth-child(3) {
  right: -2%;
  bottom: 24%;
}

body.variant-collage .flag-cloud span:nth-child(4) {
  right: 7%;
  bottom: -8%;
}

body.motion-on.variant-collage .flag-cloud span:nth-child(1) {
  animation: flag-fly-a 4.3s ease-in-out -0.7s infinite alternate;
}

body.motion-on.variant-collage .flag-cloud span:nth-child(2) {
  animation: flag-fly-b 5.1s ease-in-out -2.2s infinite alternate;
}

body.motion-on.variant-collage .flag-cloud span:nth-child(3) {
  animation: flag-fly-a 4.7s ease-in-out -1.5s infinite alternate-reverse;
}

body.motion-on.variant-collage .flag-cloud span:nth-child(4) {
  animation: flag-fly-b 5.5s ease-in-out -3.1s infinite alternate-reverse;
}

@keyframes flag-fly-a {
  from { transform: translate3d(-3px, 5px, 0) rotate(-9deg); }
  to { transform: translate3d(9px, -9px, 0) rotate(8deg); }
}

@keyframes flag-fly-b {
  from { transform: translate3d(6px, -4px, 0) rotate(7deg); }
  to { transform: translate3d(-8px, 10px, 0) rotate(-10deg); }
}

body.device-mobile.variant-collage .portrait-art {
  top: 130px;
  right: 5px;
  width: 215px;
  aspect-ratio: 1;
}

body.device-mobile.variant-collage .portrait-callout {
  top: 64%;
  left: -61%;
  width: 205px;
  height: 68px;
  font-size: 19px;
}

body.device-mobile.variant-collage .flag-cloud {
  inset: -7% -2%;
}

body.device-mobile.variant-collage .flag-cloud span {
  font-size: 27px;
}

body.device-mobile.variant-collage .flag-cloud span:nth-child(4) {
  top: 43%;
  right: auto;
  bottom: auto;
  left: -1%;
}

body.device-mobile.variant-collage .lead {
  margin-top: 134px;
  padding: 0;
  background: transparent;
}

/* 01 — выбранный мобильный экран: живой газетный коллаж. */
body.device-mobile.variant-sticker {
  overflow-y: auto;
}

body.device-mobile.variant-sticker .hero {
  min-height: 0;
  padding: 20px 17px 18px;
}

body.device-mobile.variant-sticker .eyebrow {
  margin-bottom: 12px;
}

body.device-mobile.variant-sticker h1 {
  font-size: 43px;
  line-height: 0.87;
}

body.device-mobile.variant-sticker .portrait-art {
  display: none;
}

body.device-mobile.variant-sticker .newspaper-animation {
  position: relative;
  z-index: 6;
  display: block;
  width: calc(100% + 34px);
  aspect-ratio: 16 / 9;
  margin: 14px -17px 0;
  overflow: hidden;
  isolation: isolate;
  background: transparent;
  clip-path: polygon(
    0 3%, 6% 1.4%, 13% 2.8%, 21% .8%, 29% 2.2%, 38% 0,
    47% 2.4%, 57% .8%, 66% 2.9%, 75% 0, 85% 2.2%, 94% .7%, 100% 3%,
    100% 97%, 93% 99.4%, 84% 97%, 74% 100%, 64% 97.6%, 54% 100%,
    44% 97.4%, 34% 99.3%, 24% 97%, 14% 100%, 6% 97.5%, 0 99.2%
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 2.2%, #000 97.8%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 2.2%, #000 97.8%, transparent 100%);
  transform-origin: 49% 52%;
}

.newspaper-base,
.newspaper-head-occluder,
.mouth-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.newspaper-base {
  z-index: 1;
}

.newspaper-head-occluder {
  z-index: 4;
  clip-path: polygon(
    0 0, 45% 0, 46% 8%, 49% 18%, 51% 28%, 54% 39%,
    51.5% 46%, 53% 50%, 51.2% 54%, 54% 62%, 50% 70%, 48% 100%, 0 100%
  );
}

.mouth-layer {
  z-index: 5;
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 12% 23% at 49.4% 52.5%, #000 0 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 12% 23% at 49.4% 52.5%, #000 0 45%, transparent 100%);
  transition: opacity 150ms steps(1, end);
}

.mouth-layer.is-visible {
  opacity: 1;
}

.token-stream {
  position: absolute;
  z-index: 3;
  top: calc(51.5% - 20px);
  right: 0;
  left: 48.2%;
  display: none;
  height: 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13px, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 13px, #000 100%);
  pointer-events: none;
}

body.hero-mode-eat .token-stream {
  display: block;
}

.token-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  will-change: transform;
}

.flying-token {
  --token-angle: 0deg;
  --token-delay: 0s;
  position: absolute;
  top: 1px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  opacity: 1;
  filter: drop-shadow(3px 4px 0 rgba(0, 0, 0, 0.52));
  pointer-events: none;
}

.flying-token:nth-child(7n + 1) {
  --token-angle: -3deg;
  --token-delay: -0.12s;
}

.flying-token:nth-child(7n + 2) {
  --token-angle: 2deg;
  --token-delay: -0.48s;
}

.flying-token:nth-child(7n + 3) {
  --token-angle: -2deg;
  --token-delay: -0.76s;
}

.flying-token:nth-child(7n + 4) {
  --token-angle: 3deg;
  --token-delay: -0.28s;
}

.flying-token:nth-child(7n + 5) {
  --token-angle: -2.5deg;
  --token-delay: -0.62s;
}

.flying-token:nth-child(7n + 6) {
  --token-angle: 1.5deg;
  --token-delay: -0.94s;
}

.flying-token:nth-child(7n + 7) {
  --token-angle: -1deg;
  --token-delay: -0.36s;
}

.token-face {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: 950 24px/1 Arial, sans-serif;
  transform: rotate(var(--token-angle));
  transform-origin: 50% 50%;
  will-change: transform;
}

body.motion-on.device-mobile.variant-sticker .token-face {
  animation: token-gentle-flight 1.05s ease-in-out var(--token-delay) infinite alternate;
}

.flying-token.token-facebook .token-face {
  align-items: end;
  width: 29px;
  height: 29px;
  overflow: hidden;
  border-radius: 5px;
  color: #fff;
  background: #1877f2;
  font-family: Arial, sans-serif;
  font-size: 28px;
  line-height: 0.88;
}

.flying-token.token-instagram .token-face {
  width: 29px;
  height: 29px;
  overflow: hidden;
  border-radius: 7px;
  color: #fff;
  background: radial-gradient(circle at 68% 72%, #ffd36b 0 14%, #f14365 30%, #c52abf 58%, #5445d6 100%);
  font-size: 24px;
  line-height: 1;
}

.flying-token.token-youtube .token-face {
  width: 32px;
  height: 23px;
  overflow: hidden;
  border-radius: 6px;
  color: #fff;
  background: #ff0033;
  font-size: 13px;
  text-indent: 2px;
}

.flying-token.token-flag .token-face {
  width: 41px;
  height: 32px;
  background: transparent;
  font-size: 30px;
}

@keyframes token-gentle-flight {
  from {
    transform: translateY(-1px) rotate(calc(var(--token-angle) - 1.25deg));
  }

  to {
    transform: translateY(1px) rotate(calc(var(--token-angle) + 1.25deg));
  }
}

.speech-stage {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: none;
  overflow: hidden;
  pointer-events: none;
}

body.hero-mode-speech-pulse .speech-stage,
body.hero-mode-speech-echo .speech-stage,
body.hero-mode-speech-shout .speech-stage {
  display: block;
}

.spoken-bubble {
  --bubble-angle: 0deg;
  --bubble-rise: -45px;
  position: absolute;
  left: 53%;
  top: 24%;
  display: grid;
  width: 43%;
  height: 43%;
  place-items: center;
  padding: 11px 9px 9px;
  border: 5px solid var(--paper-bright);
  border-radius: 52% 48% 54% 46% / 48% 55% 45% 52%;
  color: var(--paper-bright);
  background:
    linear-gradient(103deg, rgba(255, 255, 255, 0.045), transparent 42%),
    var(--ink);
  filter: drop-shadow(4px 4px 0 var(--signal));
  opacity: 0;
  transform-origin: 0 66%;
  will-change: transform, opacity;
}

.spoken-bubble::before,
.spoken-bubble::after {
  position: absolute;
  content: "";
  clip-path: polygon(100% 0, 100% 100%, 0 64%);
}

.spoken-bubble::before {
  z-index: -1;
  top: 53%;
  left: -27px;
  width: 31px;
  height: 27px;
  background: var(--paper-bright);
}

.spoken-bubble::after {
  top: calc(53% + 5px);
  left: -17px;
  width: 23px;
  height: 17px;
  background: var(--ink);
}

.speech-word {
  display: block;
  max-width: 100%;
  font: 950 21px/0.9 var(--display);
  letter-spacing: -0.045em;
  text-align: center;
  text-transform: uppercase;
}

.spoken-bubble.is-accent .speech-word {
  color: var(--signal);
}

body.hero-mode-speech-pulse.motion-on .spoken-bubble {
  animation: speech-pulse 1.05s cubic-bezier(.2,.8,.2,1) both;
}

.spoken-bubble.is-persistent,
body.hero-mode-speech-pulse.motion-on .spoken-bubble.is-persistent {
  opacity: 1;
  transform: rotate(-1deg);
  animation: none;
  will-change: auto;
}

.spoken-bubble.is-persistent .speech-word {
  opacity: 0;
}

.spoken-bubble.is-persistent.has-word .speech-word {
  opacity: 1;
}

body.motion-on .spoken-bubble.is-persistent .speech-word.is-changing {
  animation: speech-word-change 360ms steps(2, end) both;
}

body.hero-mode-speech-echo .spoken-bubble {
  top: 38%;
  width: 35%;
  height: 31%;
  border-width: 4px;
  filter: drop-shadow(3px 3px 0 var(--signal));
}

body.hero-mode-speech-echo .speech-word {
  font-size: 17px;
}

body.hero-mode-speech-echo.motion-on .spoken-bubble {
  animation: speech-echo 1.7s cubic-bezier(.16,.72,.25,1) both;
}

body.hero-mode-speech-shout .spoken-bubble {
  left: 52.5%;
  top: 21%;
  width: 45%;
  height: 46%;
  border-width: 6px;
  filter: drop-shadow(6px 5px 0 var(--signal));
}

body.hero-mode-speech-shout .speech-word {
  font-size: 22px;
}

body.hero-mode-speech-shout.motion-on .spoken-bubble {
  animation: speech-shout .98s cubic-bezier(.17,.84,.25,1) both;
}

.spoken-bubble.is-static {
  opacity: 1;
  transform: rotate(-1deg);
}

@keyframes speech-word-change {
  0% {
    opacity: 0;
    transform: scale(.82);
  }

  55% {
    opacity: 1;
    transform: scale(1.06);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes speech-pulse {
  0% {
    opacity: 0;
    transform: scale(.28) rotate(-6deg);
  }

  18% {
    opacity: 1;
    transform: scale(1.07) rotate(1.5deg);
  }

  34%,
  76% {
    opacity: 1;
    transform: scale(1) rotate(-1deg);
  }

  100% {
    opacity: 0;
    transform: scale(.92) rotate(1deg);
  }
}

@keyframes speech-echo {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(.24) rotate(-5deg);
  }

  15% {
    opacity: 1;
  }

  72% {
    opacity: .92;
  }

  100% {
    opacity: 0;
    transform: translate(82px, var(--bubble-rise)) scale(.72) rotate(var(--bubble-angle));
  }
}

@keyframes speech-shout {
  0% {
    opacity: 0;
    transform: scaleX(.22) scaleY(.7) rotate(-5deg);
  }

  19% {
    opacity: 1;
    transform: scaleX(1.12) scaleY(1.05) rotate(1deg);
  }

  34% {
    transform: translateX(-2px) scale(.98) rotate(-1deg);
  }

  48% {
    transform: translateX(3px) scale(1.02) rotate(1.3deg);
  }

  62%,
  79% {
    opacity: 1;
    transform: translateX(0) scale(1) rotate(-.6deg);
  }

  100% {
    opacity: 0;
    transform: translateX(8px) scale(.96) rotate(1deg);
  }
}

body.device-mobile.variant-sticker .lead {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.42;
}

body.device-mobile.variant-sticker .actions {
  margin-top: 19px;
}

body.device-mobile.variant-sticker .actions p {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.35;
}

body.device-mobile.variant-sticker .bottom-strip {
  display: none;
}

/* 02 — следующий мобильный экран: условия как газетные вырезки. */
body.device-mobile.variant-sticker .facts-screen {
  position: relative;
  display: block;
  min-height: 100vh;
  overflow: hidden;
  border-top: 1px solid var(--ink);
  background: var(--paper);
}

.facts-marquee {
  overflow: hidden;
  color: var(--paper-bright);
  background: var(--ink);
  clip-path: polygon(0 6%, 8% 1%, 17% 5%, 28% 0, 39% 4%, 50% 1%, 62% 5%, 74% 0, 86% 4%, 94% 1%, 100% 5%, 100% 100%, 0 100%);
}

.facts-marquee-track,
.facts-marquee-group {
  display: flex;
  width: max-content;
  align-items: center;
}

.facts-marquee-track {
  will-change: transform;
}

body.motion-on .facts-marquee-track {
  animation: facts-marquee-move 34s linear infinite;
}

.facts-marquee-group {
  flex: 0 0 auto;
  gap: 13px;
  padding: 15px 13px 13px 0;
  font: 950 13px/1 var(--display);
  letter-spacing: 0.035em;
  white-space: nowrap;
}

.facts-marquee-group i {
  color: var(--signal);
  font-style: normal;
}

.facts-content {
  padding: 34px 17px 28px;
}

.screen-index {
  margin: 0 0 18px;
  font: 800 11px/1.2 var(--mono);
  letter-spacing: 0.07em;
}

.screen-index strong {
  display: inline-grid;
  min-width: 31px;
  min-height: 25px;
  place-items: center;
  margin-right: 5px;
  color: var(--paper-bright);
  background: var(--signal);
  font-size: 12px;
}

.facts-screen h2 {
  margin: 0;
  font: 950 54px/0.84 var(--display);
  letter-spacing: -0.064em;
  text-transform: uppercase;
}

.facts-screen h2 span {
  color: var(--signal);
}

.facts-lead {
  max-width: 310px;
  margin: 18px 0 25px;
  font-size: 16px;
  line-height: 1.35;
}

.facts-grid {
  display: grid;
  gap: 0;
  margin: 0;
}

.fact-card {
  --card-angle: 0deg;
  position: relative;
  min-height: 121px;
  padding: 15px 16px 14px;
  border: 2px solid var(--ink);
  opacity: 0;
  box-shadow: 5px 5px 0 var(--ink);
  transform: translateY(18px) rotate(var(--card-angle));
  transition: opacity 460ms ease, transform 520ms cubic-bezier(.2,.8,.2,1);
}

.facts-screen.is-visible .fact-card {
  opacity: 1;
  transform: translateY(0) rotate(var(--card-angle));
}

.fact-card + .fact-card {
  margin-top: 10px;
}

.fact-card:nth-child(2) {
  transition-delay: 90ms;
}

.fact-card:nth-child(3) {
  transition-delay: 180ms;
}

.fact-card-paper {
  --card-angle: -0.8deg;
  margin-right: 9px;
  background: var(--paper-bright);
}

.fact-card-red {
  --card-angle: 0.7deg;
  margin-left: 7px;
  color: var(--paper-bright);
  background: var(--signal);
}

.fact-card-dark {
  --card-angle: -0.45deg;
  margin-right: 5px;
  color: var(--paper-bright);
  background: var(--ink);
  box-shadow: 5px 5px 0 var(--signal);
}

.fact-label {
  position: absolute;
  top: 13px;
  right: 14px;
  font: 800 10px/1 var(--mono);
  letter-spacing: 0.08em;
}

.fact-card dt {
  font: 950 46px/0.9 var(--display);
  letter-spacing: -0.055em;
}

.fact-card dt small {
  font-size: 22px;
  letter-spacing: -0.035em;
}

.fact-card dd {
  max-width: 250px;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.25;
}

.fact-card-red dd,
.fact-card-dark dd {
  color: rgba(255, 254, 248, 0.8);
}

.facts-cta {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 27px;
  padding: 13px 16px;
  border: 2px solid var(--ink);
  color: var(--ink);
  background: var(--paper-bright);
  box-shadow: 6px 6px 0 var(--signal);
  font-size: 15px;
  font-weight: 900;
}

.facts-cta > .button-arrow {
  font-size: 21px;
}

/* 02 — витрина услуг: рекламные карточки и газетный стикер. */
.services-content {
  padding-top: 30px;
}

body.device-mobile.variant-sticker .services-screen {
  color: var(--paper-bright);
  border-top-color: var(--paper-bright);
  background:
    radial-gradient(circle at 84% 14%, rgba(62, 111, 255, .13), transparent 27%),
    repeating-linear-gradient(105deg, transparent 0 54px, rgba(255, 255, 255, .018) 55px 57px),
    var(--ink);
}

.services-screen .facts-marquee {
  color: var(--paper-bright);
  border-block: 1px solid rgba(255, 254, 248, .24);
  background: transparent;
  clip-path: none;
}

.services-screen .facts-marquee-group i {
  color: var(--signal);
}

.services-intro {
  position: relative;
  min-height: 212px;
}

.services-intro .screen-index {
  margin-bottom: 14px;
}

.services-screen h2 {
  color: var(--paper-bright);
  font-size: 49px;
}

.services-screen .facts-lead {
  max-width: 235px;
  margin: 15px 0 0;
  color: rgba(255, 254, 248, .76);
  font-size: 15px;
  line-height: 1.34;
}

.services-head-sticker {
  position: absolute;
  top: 91px;
  right: -2px;
  width: 106px;
  height: 111px;
  margin: 0;
  filter: drop-shadow(5px 5px 0 var(--signal));
  transform: rotate(5deg);
}

.services-head-sticker::before {
  position: absolute;
  inset: 0;
  background: var(--paper-bright);
  clip-path: polygon(4% 7%, 18% 1%, 34% 4%, 50% 0, 66% 5%, 83% 1%, 97% 8%, 100% 28%, 96% 48%, 100% 67%, 94% 93%, 75% 98%, 56% 95%, 36% 100%, 16% 95%, 1% 86%, 4% 63%, 0 42%);
  content: "";
}

.services-head-crop {
  position: absolute;
  inset: 4px;
  overflow: hidden;
  background: var(--ink);
  clip-path: polygon(4% 7%, 18% 1%, 34% 4%, 50% 0, 66% 5%, 83% 1%, 97% 8%, 100% 28%, 96% 48%, 100% 67%, 94% 93%, 75% 98%, 56% 95%, 36% 100%, 16% 95%, 1% 86%, 4% 63%, 0 42%);
}

.services-head-crop img {
  position: absolute;
  top: -8%;
  left: -27%;
  width: 150%;
  height: auto;
  max-width: none;
  filter: grayscale(1) contrast(1.16);
}

.services-head-sticker figcaption {
  position: absolute;
  right: -3px;
  bottom: -7px;
  padding: 5px 7px 4px;
  color: var(--paper-bright);
  background: var(--signal);
  font: 950 10px/1 var(--mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transform: rotate(-4deg);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.service-card {
  --service-angle: 0deg;
  --service-wobble-angle: 0deg;
  --service-wobble-x: 0px;
  --service-wobble-y: 0px;
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 14px;
  border: 2px solid var(--ink);
  opacity: 0;
  box-shadow: 5px 5px 0 var(--ink);
  rotate: var(--service-wobble-angle);
  translate: var(--service-wobble-x) var(--service-wobble-y);
  transform: translateY(18px) rotate(var(--service-angle));
  transition: opacity 460ms ease, transform 520ms cubic-bezier(.2,.8,.2,1);
  will-change: transform, translate, rotate;
}

.service-card.is-scroll-settling {
  transition:
    translate 360ms cubic-bezier(.18,.8,.22,1),
    rotate 460ms cubic-bezier(.18,.8,.22,1);
}

.service-card::before {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(104deg, transparent 0 21px, rgba(255, 255, 255, 0.035) 22px 23px);
  content: "";
  pointer-events: none;
}

.services-screen.is-visible .service-card {
  opacity: 1;
  transform: translateY(0) rotate(var(--service-angle));
}

.service-card:nth-child(2) {
  transition-delay: 80ms;
}

.service-card:nth-child(3) {
  transition-delay: 160ms;
}

.service-card:nth-child(4) {
  transition-delay: 240ms;
}

.service-card-wide {
  grid-column: 1 / -1;
  min-height: 128px;
}

.service-card-compact {
  min-height: 158px;
}

.service-card-paper {
  --service-angle: -.55deg;
  margin-right: 4px;
  color: var(--ink);
  background: var(--paper-bright);
  box-shadow: 5px 5px 0 var(--signal);
}

.service-card-red {
  --service-angle: .45deg;
  margin-left: 4px;
  color: var(--paper-bright);
  background: var(--signal);
  border-color: var(--paper-bright);
  box-shadow: 5px 5px 0 var(--paper-bright);
}

.service-card-dark {
  --service-angle: -.65deg;
  color: var(--paper-bright);
  border-color: var(--paper-bright);
  background: #24241f;
  box-shadow: 5px 5px 0 var(--signal);
}

.service-card-blue {
  --service-angle: .7deg;
  color: var(--paper-bright);
  background: var(--blue);
  border-color: var(--paper-bright);
  box-shadow: 5px 5px 0 var(--paper-bright);
}

.service-card-index {
  position: absolute;
  top: 13px;
  right: 13px;
  font: 800 10px/1 var(--mono);
  opacity: .72;
}

.service-name {
  max-width: calc(100% - 28px);
  margin: 0;
  font: 950 12px/1.02 var(--display);
  letter-spacing: .025em;
  text-transform: uppercase;
}

.service-price {
  position: relative;
  display: block;
  margin-top: 16px;
  font: 950 40px/.86 var(--display);
  letter-spacing: -.055em;
  white-space: nowrap;
}

.service-price small {
  font-size: 17px;
  letter-spacing: -.025em;
}

.service-description {
  position: relative;
  max-width: 270px;
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.22;
}

.service-card-red .service-description,
.service-card-dark .service-description,
.service-card-blue .service-description {
  color: rgba(255, 254, 248, .82);
}

.service-card-compact .service-name {
  min-height: 25px;
}

.service-card-compact .service-price {
  margin-top: 20px;
  font-size: 31px;
}

.service-card-compact .service-description {
  max-width: 135px;
}

.services-screen .facts-cta {
  margin-top: 25px;
  border-color: var(--signal);
  box-shadow: 6px 6px 0 var(--signal);
}

@media (max-width: 350px) {
  .services-screen h2 {
    font-size: 43px;
  }

  .services-intro {
    min-height: 205px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card-compact {
    min-height: 132px;
  }

  .service-card-compact .service-description {
    max-width: 245px;
  }
}

/* 03 — светлая колода кейсов с полными скриншотами. */
.cases-screen {
  display: none;
}

body.device-mobile.variant-sticker .cases-screen {
  position: relative;
  display: block;
  min-height: 100vh;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 9%, rgba(237, 58, 36, .09), transparent 23%),
    repeating-linear-gradient(98deg, transparent 0 64px, rgba(17, 17, 15, .018) 65px 67px),
    var(--paper);
}

.cases-screen::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 17px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 93% 72%, 84% 47%, 74% 83%, 63% 51%, 52% 88%, 41% 48%, 31% 78%, 20% 44%, 10% 82%, 0 52%);
  content: "";
}

.cases-content {
  position: relative;
  z-index: 2;
  padding: 42px 17px 30px;
}

.cases-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.cases-screen h2 {
  margin: 0;
  font: 950 45px/.84 var(--display);
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.cases-screen h2 span {
  color: var(--signal);
}

.cases-swipe-hint {
  flex: 0 0 auto;
  margin-bottom: 3px;
  padding: 7px 8px 6px;
  color: var(--paper-bright);
  background: var(--signal);
  box-shadow: 3px 3px 0 var(--ink);
  font: 950 10px/1 var(--mono);
  letter-spacing: .04em;
  transform: rotate(3deg);
}

.cases-lead {
  max-width: 315px;
  margin: 17px 0 0;
  font-size: 15px;
  line-height: 1.35;
}

.case-deck {
  display: flex;
  gap: 14px;
  margin: 25px -17px 0;
  padding: 0 17px 15px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 17px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.case-deck::-webkit-scrollbar {
  display: none;
}

.case-story {
  --case-angle: 0deg;
  flex: 0 0 calc(100% - 36px);
  min-width: 0;
  min-height: 508px;
  padding: 15px;
  border: 2px solid var(--ink);
  background: var(--paper-bright);
  box-shadow: 7px 7px 0 var(--signal);
  opacity: 0;
  scroll-snap-align: start;
  transform: translateY(18px) rotate(var(--case-angle));
  transition: opacity 480ms ease, transform 540ms cubic-bezier(.2,.8,.2,1);
}

.cases-screen.is-visible .case-story {
  opacity: 1;
  transform: translateY(0) rotate(var(--case-angle));
}

.case-story:nth-child(2) {
  --case-angle: .35deg;
  box-shadow: 7px 7px 0 var(--blue);
  transition-delay: 90ms;
}

.case-story:nth-child(3) {
  --case-angle: -.3deg;
  box-shadow: 7px 7px 0 var(--ink);
  transition-delay: 180ms;
}

.case-story:nth-child(4) {
  --case-angle: .25deg;
  box-shadow: 7px 7px 0 var(--blue);
  transition-delay: 270ms;
}

.case-story-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  font: 850 9px/1.1 var(--mono);
  letter-spacing: .04em;
}

.case-story-meta strong {
  display: grid;
  min-width: 27px;
  height: 24px;
  place-items: center;
  color: var(--paper-bright);
  background: var(--signal);
  font-size: 10px;
}

.case-story-photo .case-story-meta strong {
  background: var(--blue);
}

.case-story-fishing {
  background: #fffaf0;
}

.case-story-fishing .case-story-meta strong {
  background: var(--blue);
}

.case-story-psychology .case-story-meta strong {
  background: var(--ink);
}

.case-story h3 {
  margin: 14px 0 0;
  font: 950 27px/.92 var(--display);
  letter-spacing: -.04em;
}

.case-story-context {
  min-height: 54px;
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.32;
}

.case-proof-row {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 11px;
  min-height: 252px;
  margin-top: 14px;
}

.case-proof {
  display: flex;
  min-width: 0;
  margin: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ink);
}

.case-proof img {
  width: 100%;
  height: 226px;
  object-fit: contain;
  background: var(--ink);
}

.fishing-proof-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fishing-proof-row .case-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.fishing-proof-row .case-metrics div {
  min-height: 87px;
  padding: 7px 6px;
}

.fishing-proof-row .case-metrics dt {
  font-size: clamp(13px, 3.8vw, 18px);
  white-space: nowrap;
}

.fishing-proof-row .case-metrics div:first-child dt {
  font-size: clamp(23px, 6.2vw, 29px);
}

.fishing-proof-row .case-metrics dd {
  font-size: 8px;
}

.fishing-proof-row .case-proof {
  background: #edf3f7;
}

.fishing-proof-row .case-proof a {
  display: block;
  padding: 2px;
}

.fishing-proof-row .case-proof img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2360 / 791;
  object-fit: contain;
  background: #fff;
}

.fishing-proof-row .case-proof figcaption {
  background: var(--blue);
}

.case-proof figcaption {
  padding: 6px 4px 5px;
  color: var(--paper-bright);
  font: 750 7px/1 var(--mono);
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
}

.case-metrics {
  display: grid;
  gap: 7px;
  margin: 0;
}

.case-metrics div {
  display: flex;
  min-width: 0;
  padding: 9px 8px;
  justify-content: center;
  flex-direction: column;
  border: 1px solid var(--ink);
  background: var(--paper);
}

.case-metrics div:nth-child(2) {
  color: var(--paper-bright);
  background: var(--signal);
}

.case-story-photo .case-metrics div:nth-child(2) {
  background: var(--blue);
}

.case-metrics dt {
  font: 950 28px/.86 var(--display);
  letter-spacing: -.05em;
}

.case-metrics dd {
  margin: 6px 0 0;
  font-size: 9px;
  line-height: 1.15;
}

.case-route {
  margin: 13px 0 0;
  padding: 9px 10px;
  color: var(--paper-bright);
  background: var(--ink);
  font-size: 10px;
  line-height: 1.28;
}

.case-route strong {
  margin-right: 5px;
  color: var(--signal);
  font: 900 9px/1 var(--mono);
  letter-spacing: .04em;
}

.case-story-caveat {
  margin: 8px 0 0;
  color: rgba(17, 17, 15, .62);
  font-size: 9px;
  line-height: 1.3;
}

.cases-disclaimer {
  margin: 14px 0 0;
  color: rgba(17, 17, 15, .62);
  font-size: 10px;
  line-height: 1.35;
}

.cases-cta {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 21px;
  padding: 13px 16px;
  border: 2px solid var(--ink);
  color: var(--paper-bright);
  background: var(--signal);
  box-shadow: 6px 6px 0 var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.cases-cta > .button-arrow {
  font-size: 21px;
}

/* 04 — тёмный маршрут работы от сообщения до запуска. */
.workflow-screen {
  display: none;
}

body.device-mobile.variant-sticker .workflow-screen {
  position: relative;
  display: block;
  min-height: 100vh;
  overflow: hidden;
  color: var(--paper-bright);
  background:
    radial-gradient(circle at 7% 22%, rgba(237, 58, 36, .13), transparent 25%),
    radial-gradient(circle at 92% 70%, rgba(62, 111, 255, .13), transparent 27%),
    repeating-linear-gradient(108deg, transparent 0 58px, rgba(255, 255, 255, .018) 59px 61px),
    var(--ink);
}

.workflow-screen::before {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 17px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% 48%, 92% 79%, 84% 45%, 73% 82%, 63% 50%, 51% 88%, 40% 47%, 29% 78%, 18% 44%, 8% 82%, 0 53%);
  content: "";
}

.workflow-content {
  position: relative;
  z-index: 2;
  padding: 43px 17px 31px;
}

.workflow-screen .screen-index {
  color: rgba(255, 254, 248, .84);
}

.workflow-screen h2 {
  margin: 0;
  color: var(--paper-bright);
  font: 950 44px/.84 var(--display);
  letter-spacing: -.058em;
  text-transform: uppercase;
}

.workflow-screen h2 span {
  color: var(--signal);
}

.workflow-lead {
  max-width: 315px;
  margin: 17px 0 0;
  color: rgba(255, 254, 248, .74);
  font-size: 15px;
  line-height: 1.35;
}

.workflow-note {
  width: max-content;
  max-width: calc(100% - 7px);
  margin: 21px 0 0 3px;
  padding: 8px 10px 7px;
  color: var(--ink);
  background: var(--paper-bright);
  box-shadow: 4px 4px 0 var(--signal);
  font: 900 9px/1.2 var(--mono);
  letter-spacing: .025em;
  transform: rotate(-1.5deg);
}

.workflow-list {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.workflow-list::before {
  position: absolute;
  z-index: 0;
  top: 20px;
  bottom: 20px;
  left: 20px;
  width: 4px;
  background: repeating-linear-gradient(to bottom, var(--signal) 0 8px, transparent 8px 14px);
  content: "";
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 950ms cubic-bezier(.2,.8,.2,1) 120ms;
}

.workflow-screen.is-visible .workflow-list::before {
  transform: scaleY(1);
}

.workflow-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  opacity: 0;
  transform: translateX(18px);
  transition: opacity 430ms ease, transform 500ms cubic-bezier(.2,.8,.2,1);
}

.workflow-screen.is-visible .workflow-step {
  opacity: 1;
  transform: translateX(0);
}

.workflow-step:nth-child(2) {
  transition-delay: 100ms;
}

.workflow-step:nth-child(3) {
  transition-delay: 200ms;
}

.workflow-step:nth-child(4) {
  transition-delay: 300ms;
}

.workflow-number {
  display: grid;
  width: 41px;
  height: 41px;
  place-items: center;
  border: 2px solid var(--paper-bright);
  color: var(--paper-bright);
  background: var(--signal);
  box-shadow: 3px 3px 0 var(--paper-bright);
  font: 950 12px/1 var(--mono);
  transform: rotate(-4deg);
}

.workflow-step:nth-child(even) .workflow-number {
  color: var(--ink);
  background: var(--paper-bright);
  box-shadow: 3px 3px 0 var(--signal);
  transform: rotate(4deg);
}

.workflow-card {
  min-height: 101px;
  padding: 13px 14px 12px;
  border: 2px solid var(--paper-bright);
  box-shadow: 5px 5px 0 var(--signal);
}

.workflow-card-paper {
  color: var(--ink);
  background: var(--paper-bright);
}

.workflow-card-red {
  color: var(--paper-bright);
  background: var(--signal);
  box-shadow: 5px 5px 0 var(--paper-bright);
}

.workflow-card-blue {
  color: var(--paper-bright);
  background: var(--blue);
  box-shadow: 5px 5px 0 var(--paper-bright);
}

.workflow-kicker {
  display: block;
  margin-bottom: 7px;
  font: 850 9px/1 var(--mono);
  letter-spacing: .08em;
  opacity: .65;
}

.workflow-card h3 {
  margin: 0;
  font: 950 23px/.94 var(--display);
  letter-spacing: -.035em;
}

.workflow-card p {
  margin: 8px 0 0;
  color: inherit;
  font-size: 11px;
  line-height: 1.3;
  opacity: .78;
}

.workflow-cta {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 27px;
  padding: 13px 16px;
  border: 2px solid var(--paper-bright);
  color: var(--ink);
  background: var(--paper-bright);
  box-shadow: 6px 6px 0 var(--signal);
  font-size: 15px;
  font-weight: 900;
}

.workflow-cta > .button-arrow {
  font-size: 21px;
}

/* 05 — гранж-серия из первого джазового рилса: газетные кадры продолжают язык главного экрана. */
.jazz-screen {
  display: none;
}

body.device-mobile.variant-sticker .jazz-screen {
  position: relative;
  display: block;
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 92% 13%, rgba(237, 58, 36, .13), transparent 24%),
    repeating-linear-gradient(96deg, transparent 0 43px, rgba(17, 17, 15, .035) 44px 45px),
    var(--paper);
}

.jazz-screen::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 18px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 44%, 92% 82%, 82% 45%, 71% 79%, 60% 43%, 49% 88%, 39% 47%, 27% 80%, 16% 42%, 7% 78%, 0 48%);
  content: "";
}

.jazz-content {
  position: relative;
  padding: 43px 17px 34px;
}

.jazz-screen h2 {
  margin: 0;
  font: 950 44px/.82 var(--display);
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.jazz-screen h2 span {
  color: var(--signal);
}

.jazz-lead {
  max-width: 320px;
  margin: 17px 0 0;
  font-size: 15px;
  line-height: 1.36;
}

.jazz-photo-stack {
  position: relative;
  height: 492px;
  margin: 27px -2px 0;
}

.jazz-photo {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border: 3px solid var(--ink);
  background: var(--ink);
  box-shadow: 7px 7px 0 var(--signal);
  opacity: 0;
  transform: translateY(22px) rotate(var(--photo-angle));
  transition: opacity 440ms ease, transform 520ms cubic-bezier(.18,.8,.2,1);
}

.jazz-screen.is-visible .jazz-photo {
  opacity: 1;
  transform: translateY(0) rotate(var(--photo-angle));
}

.jazz-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jazz-photo figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 6px 8px 5px;
  color: var(--paper-bright);
  background: var(--signal);
  font: 900 9px/1 var(--mono);
  letter-spacing: .035em;
}

.jazz-photo-entry {
  --photo-angle: -2.3deg;
  z-index: 1;
  top: 0;
  left: 0;
  width: 64%;
  height: 350px;
}

.jazz-photo-entry img {
  object-position: 53% 32%;
}

.jazz-photo-entry figcaption {
  right: auto;
  left: 8px;
}

.jazz-photo-stage {
  --photo-angle: 2.5deg;
  z-index: 3;
  top: 109px;
  right: 0;
  width: 57%;
  height: 275px;
  box-shadow: 7px 7px 0 var(--signal);
  transition-delay: 110ms;
}

.jazz-photo-stage img {
  object-position: 46% 34%;
}

.jazz-photo-stage figcaption {
  color: var(--paper-bright);
  background: var(--ink);
}

.jazz-photo-message {
  --photo-angle: -1.2deg;
  z-index: 2;
  right: 24px;
  bottom: 0;
  width: 50%;
  height: 210px;
  box-shadow: 7px 7px 0 var(--ink);
  transition-delay: 210ms;
}

.jazz-photo-message img {
  object-position: 50% 28%;
}

.jazz-photo-message figcaption {
  right: auto;
  left: 8px;
  color: var(--paper-bright);
  background: var(--signal);
}

.jazz-note {
  max-width: 280px;
  margin: 24px 0 0;
  padding-left: 12px;
  border-left: 4px solid var(--signal);
  font-size: 14px;
  line-height: 1.35;
}

.jazz-cta {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding: 13px 16px;
  border: 2px solid var(--ink);
  color: var(--paper-bright);
  background: var(--signal);
  box-shadow: 6px 6px 0 var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.jazz-cta > .button-arrow {
  font-size: 21px;
}

/* Один живой ритм для текста во всех CTA; сами кнопки остаются на месте. */
.button-label {
  display: inline-block;
  transform-origin: 50% 70%;
  will-change: transform;
}

body.motion-on .button-label {
  animation: button-label-sway 2.6s ease-in-out infinite;
}

body.motion-on .header-cta .button-label {
  animation-delay: -.35s;
}

body.motion-on .facts-cta .button-label {
  animation-delay: -.8s;
}

body.motion-on .cases-cta .button-label {
  animation-delay: -1.25s;
}

body.motion-on .workflow-cta .button-label {
  animation-delay: -1.7s;
}

body.motion-on .jazz-cta .button-label {
  animation-delay: -2.1s;
}

@media (max-width: 350px) {
  body.device-mobile .brand {
    gap: 1px;
    padding: 0 4px 0 10px;
    font-size: 9px;
    letter-spacing: 0;
  }

  body.device-mobile .brand > span:last-child {
    white-space: nowrap;
  }

  body.device-mobile .header-cta {
    padding-inline: 10px;
    font-size: 11px;
  }
}

@keyframes button-label-sway {
  0%, 100% {
    transform: translateX(0) rotate(-1deg);
  }

  25% {
    transform: translateX(1px) rotate(.7deg);
  }

  50% {
    transform: translateX(0) rotate(1.25deg);
  }

  75% {
    transform: translateX(-1px) rotate(-.45deg);
  }
}

@keyframes facts-marquee-move {
  to {
    transform: translateX(-50%);
  }
}