body, .page { background: #fbf2e3; }

.nav-prev-label, .nav-next-label { color: #fff; opacity: 1; text-decoration: none; }
.nav-prev-arrow, .nav-next-arrow { filter: brightness(0) invert(1); }
.nav-next:hover .nav-next-label,
a.nav-prev-label:hover { color: #ff9b00; }

@media (min-width: 1200px) {

  .decor-scene { display: contents; }

  .s-sec, .s-decor {
    position: absolute; left: 0; top: 0; width: 100%; height: 0;
  }
  .s-sec   { z-index: 1; }
  .s-decor { z-index: 0; }

  .hero-eye-r   { left: 84.25rem;      top: 11.766066rem;  width: 25.286802rem;  height: 23.007734rem; object-fit: cover; }
  .hero-eye-l   { left: 54.023895rem;  top: 12.172510rem;  width: 25.088701rem;  height: 22.827488rem; object-fit: cover; }
  .hero-eyewear { left: 51.375rem;     top: -13.034779rem; width: 121.251396rem; height: 87.362526rem; object-fit: cover; }

  .hero-title { width: 21.430544rem; }
  .p-hero     { top: 35.0625rem; width: 21.625rem; }

  .h2-cd           { left: 18.1875rem; top: 53.125rem; }
  .p-cd            { left: 18.1875rem; top: 60.375rem; width: 19.5rem; }
  .impact-label-cd { top: 53.125rem; }
  .line-cd         { left: 39.5625rem; top: 55.1875rem; width: 62.25rem; height: 0.0625rem; }

  .i-community  { left: 43.449097rem; top: 57.388084rem; width: 4.5625rem; height: 4.25rem; }
  .n-1686      { left: 43.3125rem; top: 62.9375rem; }
  .c-1         { left: 39.5625rem; top: 65.75rem;   width: 12.375rem; }

  .i-exchange   { left: 58.195896rem; top: 57.667423rem; width: 3.6875rem; height: 3.875rem; }
  .n-540       { left: 58.09375rem; top: 62.9375rem; }
  .c-2         { left: 53.8125rem;  top: 65.75rem;   width: 12.375rem; }

  .i-people     { left: 70.464569rem; top: 58.125011rem; width: 5.375rem; height: 3.75rem; }
  .n-129       { left: 71.53125rem; top: 62.9375rem; }
  .c-3         { left: 68.0625rem;  top: 65.75rem;   width: 10.125rem; }

  .i-dollar     { left: 83.1875rem; top: 57.667423rem; width: 4.5625rem; height: 4.25rem; }
  .n-20941     { left: 81.3125rem; top: 62.9375rem; }
  .c-4         { left: 80.0625rem; top: 65.75rem;   width: 10.125rem; }

  .h2-rs           { left: 18.1875rem;   top: 77.490234rem; }
  .p-rs            { left: 18.313313rem; top: 84.740234rem; width: 19.374176rem; }
  .impact-label-rs { top: 77.490234rem; }
  .line-rs         { left: 39.5625rem;   top: 79.552734rem; width: 62.25rem; height: 0.0625rem; }

  .i-person     { left: 44.06987rem; top: 81.365265rem; width: 3.375rem; height: 4.5625rem; }
  .n-1049   { left: 43.1875rem; top: 87.302734rem; }
  .c-5      { left: 39.5625rem; top: 90.115234rem; width: 12.375rem; }

  .i-hand       { left: 57.734383rem; top: 81.648468rem; width: 4.5625rem; height: 4rem; }
  .n-318    { left: 58.46875rem; top: 87.302734rem; }
  .c-6      { left: 53.8125rem;  top: 90.115234rem; width: 12.375rem; }

  .d-cloud-big   { left: 44.205944rem; top: 104.922356rem; width: 37.5625rem; height: 24.1875rem; }
  .d-ridge       { left: 39.25rem; top: 114.247047rem; width: 80.75rem; height: 11.25rem; }
  .d-ground      { left: 0rem; top: 120.815712rem; width: 120rem; height: 15.210442rem; }
  .d-tuft-1      { left: 85.662781rem; top: 124.305908rem; width: 4.0625rem; height: 0.875rem; }
  .d-tuft-2      { left: 91.043396rem; top: 123.199631rem; width: 4.0625rem; height: 0.875rem; }
  .d-tuft-3      { left: 95.204803rem; top: 124.732231rem; width: 4.0625rem; height: 0.875rem; }
  .d-tuft-4      { left: 99.961609rem; top: 123.228783rem; width: 4.0625rem; height: 0.875rem; }
  .d-fig-a       { left: 104.5625rem; top: 112.0625rem; width: 6.1875rem; height: 11.0625rem; }
  .d-fig-b       { left: 65.880157rem; top: 113.99176rem; width: 4.75rem; height: 8.5rem; }
  .d-fig-c       { left: 114.0625rem; top: 109.6875rem; width: 3.375rem; height: 6.125rem; }
  .d-fig-d       { left: 105.789856rem; top: 122.038498rem; width: 14.25rem; height: 6rem; }
  .d-fig-e       { left: 56.056976rem; top: 121.759872rem; width: 15.6875rem; height: 6rem; }
  .d-cloud-mid   { left: 14.983688rem; top: 103.971985rem; width: 21.5625rem; height: 13.9375rem; }
  .d-cloud-small { left: 95.883179rem; top: 103.455147rem; width: 12.375rem; height: 8rem; }
  .d-portal      { left: 73.72686rem; top: 99.684212rem; width: 16.0625rem; height: 25.8125rem; }
  .d-fig-f       { left: 92.713135rem; top: 115.692795rem; width: 8.6875rem; height: 7.625rem; }
  /* Арка, дівчинка й пара — одна анімація. Прив'язка зроблена так, щоб і арка (257x413),
     і пара (139x122) розійшлися з нинішніми позиціями не більше ніж на 4px. */
  .d-portal-scene { left: 73.5125rem; top: 99.94375rem; width: 28.125rem; height: 26.25rem;
                    pointer-events: none; z-index: 2; }
  .d-portal, .d-fig-f { display: none; }
  .d-ground      { background: #af66e3; }

}

@media (max-width: 1199.98px) {
  .d-portal-scene { display: none; }

  .s-sec, .s-decor {
    position: static; width: auto; height: auto; z-index: auto;
  }

  .hero { --hx: -71.8605%; }
  .hero-eye-r {
    position: absolute;
    left: calc(var(--hx) + 70.2083% * var(--hf)); top: 23.5321%;
    width: calc(21.0723% * var(--hf)); height: 46.0155%;
  }
  .hero-eye-l {
    position: absolute;
    left: calc(var(--hx) + 45.0199% * var(--hf)); top: 24.345%;
    width: calc(20.9072% * var(--hf)); height: 45.655%;
  }
  .hero-eyewear {
    position: absolute;
    left: calc(var(--hx) + 42.8125% * var(--hf)); top: -26.0695%;
    width: calc(101.0428% * var(--hf)); height: 174.725%;
  }

  .s-cd { padding: 46px var(--pad) 0; }
  .s-rs { padding: 66px var(--pad) 52px; }

  .line-cd, .line-rs { width: 100%; height: 1px; margin-top: 11px; }

  .stat-ico > img.stat-glyph {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: auto; height: 82%;
  }

  .s-decor { position: relative; background: #fbf2e3; overflow: hidden; }

  .decor-scene {
    display: block;
    position: relative;
    width: 170%; margin-left: -35%;
    aspect-ratio: 1920 / 583;
  }
  .decor-scene > * {
    position: absolute;
  }
  .d-cloud-big   { left: 36.8383%; top: 14.5382%; width: 31.3021%; height: 66.3808%; }
  .d-ridge       { left: 32.7083%; top: 40.1291%; width: 67.2917%; height: 30.8748%; }
  .d-ground      { left: 0%; top: 58.1563%; width: 100%; height: 41.7439%; }
  .d-tuft-1      { left: 71.3857%; top: 67.7349%; width: 3.3854%; height: 2.4014%; }
  .d-tuft-2      { left: 75.8695%; top: 64.6988%; width: 3.3854%; height: 2.4014%; }
  .d-tuft-3      { left: 79.3373%; top: 68.9049%; width: 3.3854%; height: 2.4014%; }
  .d-tuft-4      { left: 83.3013%; top: 64.7788%; width: 3.3854%; height: 2.4014%; }
  .d-fig-a       { left: 87.1354%; top: 34.1338%; width: 5.1562%; height: 30.3602%; }
  .d-fig-b       { left: 54.9001%; top: 39.4285%; width: 3.9583%; height: 23.3276%; }
  .d-fig-c       { left: 95.0521%; top: 27.6158%; width: 2.8125%; height: 16.8096%; }
  .d-fig-d       { left: 88.1582%; top: 61.5122%; width: 11.875%; height: 16.4666%; }
  .d-fig-e       { left: 46.7141%; top: 60.7475%; width: 13.0729%; height: 16.4666%; }
  .d-cloud-mid   { left: 12.4864%; top: 11.93%; width: 17.9688%; height: 38.2504%; }
  .d-cloud-small { left: 79.9027%; top: 10.5116%; width: 10.3125%; height: 21.9554%; }
  .d-portal      { left: 61.4391%; top: 0.1625%; width: 13.3854%; height: 70.8405%; }
  .d-fig-f       { left: 77.2609%; top: 44.0969%; width: 7.2396%; height: 20.9262%; }

  .s-decor .rs-pager {
    background: #af66e3;
    margin: -1px calc(var(--pad) * -1) 0;
    padding: 18px var(--pad) 26px;
  }
  .s-decor .rs-pager .nav-prev-label { margin-right: 12px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Той самий файл для планшета: арка (13.3854% x 70.8405% сцени) — якір,
     пара сходиться з нинішньою позицією з точністю 0.4%. */
  .d-portal-scene { display: block; left: 61.0693%; top: 0.214%;
                    width: 23.4375%; height: 72.041%; pointer-events: none; }
  .d-portal, .d-fig-f { display: none; }

  .hero { --hx: 0%; }
  .decor-scene { width: 128%; margin-left: -14%; }
  .s-cd { padding: 62px var(--pad) 0; }
  .s-rs { padding: 58px var(--pad) 66px; }
}

.st-scene, .st-portal-scene { display: none; }

@media (max-width: 767.98px) {
  /* нижня сцена під мобільні: композиція з макета iPhone-3 (430x385, від y=547) */
  .decor-scene { display: none; }
  .st-scene {
    display: block; position: relative;
    width: 100%; margin: 0;
    aspect-ratio: 430 / 385; overflow: hidden;
  }
  .st-scene > * { position: absolute; }
  .st-cloud  { left: -27.209%; top: 12.987%; width: 110%;     height: 79.091%; }
  .st-ridge  { left: -63.512%; top: 54.182%; width: 176.791%; height: 27.506%; }
  .st-ground { left: 0; top: 74.156%; width: 100%; height: 25.844%; background: #af66e3; }
  .st-sh1    { left: 47.512%; top: 84.857%; width: 11.023%; height: 2.623%; }
  .st-sh2    { left: 62.279%; top: 81.455%; width: 11.023%; height: 2.623%; }
  .st-sh3    { left: 73.698%; top: 86.156%; width: 11.023%; height: 2.623%; }
  .st-sh4    { left: 86.767%; top: 81.558%; width: 11.023%; height: 2.623%; }
  .st-plant  { left: 90.698%; top: 39.74%;  width: 8.14%;   height: 17.143%; }
  /* Арка з дітьми — одна анімація. Прив'язка рахована так, щоб арка (257x413 у файлі)
     лягла точно на .st-arch; діти при цьому йдуть за композицією аніматора.
     Пропорція сцени 430/385 майже збігається з потрібною 1.121 — масштаб рівномірний. */
  .st-portal-scene { display: block; left: 5.4819%; top: 0.0653%;
                     width: 87.345%; height: 91.393%; pointer-events: none; }
  .st-arch, .st-kids { display: none; }
  .st-arch   { left: 6.86%;   top: 0;       width: 49.884%; height: 89.87%; }
  .st-kids   { left: 60.814%; top: 55.844%; width: 27.209%; height: 26.494%; }
}

/* Клієнт: «ілюстрація в лінзах не збігається з фото (колони), особливо на мобільному».
   Лінзи й оправа на телефоні стоять у системі координат фото, зсунутого на --hx (−71.86%) і
   розтягнутого в --hf. А загальне правило styles.css (<=767) ставить фото left:0 / width:100% —
   воно для Safety, у якої є окремо скадроване мобільне фото. Тут такого фото немає, тож браузер
   центрував широке фото (−169px на 430), а лінзи чекали його на −309px: зсув 140px, колони
   в лінзах роз'їжджались із колонами на фото. Повертаємо фото в ту саму систему координат. */
@media (max-width: 767.98px) {
  .hero-bkgd { left: var(--hx); width: calc(100% * var(--hf)); }
}