:root {
  color-scheme: light;
  --amount-color: #5d3e24;
  --thanks-color: #68822c;
  --page-bg: #fff6d8;
  --desktop-scale: 0.67;
  --stage-width: 970.16px;
  --stage-height: 727.62px;
  --stage-left: max(0px, calc((100vw - var(--stage-width)) / 2));
  --stage-top: 0px;
}

* {
  box-sizing: border-box;
}

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

html {
  background-color: var(--page-bg);
  background-image:
    url("./images/final-desktop/bg/bg-top-left.png"),
    url("./images/final-desktop/bg/bg-top-right.png"),
    url("./images/final-desktop/bg/bg-bottom-center-tile.png"),
    url("./images/final-desktop/bg/bg-texture-tile.png");
  background-position:
    left top,
    right top,
    center calc(100% + 22px),
    left top;
  background-repeat:
    no-repeat,
    no-repeat,
    repeat-x,
    repeat;
  background-size:
    821px 479px,
    821px 479px,
    768px 256px,
    1024px 1024px;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: transparent;
  font-family: "Nunito", Arial, sans-serif;
}

.desktop-scene {
  position: relative;
  width: 100vw;
  height: 100dvh;
  min-height: var(--stage-height);
  overflow: hidden;
}

.desktop-scene img {
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.cta-button {
  position: absolute;
  left: calc(var(--stage-left) + 216.41px);
  top: calc(var(--stage-top) + 424.11px);
  z-index: 8;
  display: flex;
  width: 484.41px;
  height: 161.47px;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0 0 5px;
  background: url("./images/final-desktop/cta-button.png") center / 100% 100%
    no-repeat;
  color: #ffffff;
  cursor: pointer;
  filter: drop-shadow(0 5px 16px rgba(201, 106, 0, 0.22));
  font-family: "Nunito", Arial, sans-serif;
  font-size: 32.16px;
  font-weight: 700;
  line-height: 43.55px;
  text-align: center;
  white-space: nowrap;
}

.cta-button span {
  display: block;
}

.sticks {
  position: absolute;
  top: calc(var(--stage-top) + 383.91px);
  z-index: 2;
  width: 241.87px;
  height: 241.87px;
  object-fit: cover;
}

.sticks-right {
  left: calc(var(--stage-left) + 542.03px);
}

.sticks-left {
  left: calc(var(--stage-left) + 127.97px);
}

.thanks {
  position: absolute;
  left: calc(var(--stage-left) + 302.17px);
  top: calc(var(--stage-top) + 553.42px);
  z-index: 4;
  width: 313.56px;
  height: 63.65px;
  margin: 0;
  color: var(--thanks-color);
  font-family: "Bad Script", "Segoe Print", cursive;
  font-size: 32.16px;
  font-style: italic;
  font-weight: 400;
  line-height: 63.65px;
  white-space: nowrap;
}

.logo {
  position: absolute;
  left: calc(var(--stage-left) + 283.41px);
  top: calc(var(--stage-top) - 15.41px);
  z-index: 5;
  width: 349.07px;
  height: 116.58px;
  object-fit: cover;
}

.counter-panel {
  position: absolute;
  left: calc(var(--stage-left) + 73.7px);
  top: calc(var(--stage-top) + 209.71px);
  z-index: 6;
  width: 770.5px;
  height: 308.2px;
  margin: 0;
}

.counter-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 5px 16px rgba(184, 158, 106, 0.18));
  object-fit: cover;
}

.subtitle,
.value {
  position: absolute;
  z-index: 1;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.subtitle {
  left: 249.91px;
  top: 87.1px;
  width: 270.68px;
  height: 30.15px;
  color: #000000;
  font-family: "Nunito", Arial, sans-serif;
  font-size: 22.11px;
  font-weight: 600;
  line-height: 30.15px;
}

.value {
  left: 213.73px;
  top: 111.89px;
  width: 343.04px;
  height: 95.81px;
  color: var(--amount-color);
  font-family: "Inter", Arial, sans-serif;
  font-size: 79.06px;
  font-weight: 500;
  line-height: 95.81px;
}

.hero-child {
  position: absolute;
  left: calc(var(--stage-left) + 295.47px);
  top: calc(var(--stage-top) + 16.08px);
  z-index: 7;
  width: 326.29px;
  height: 408.03px;
  object-fit: cover;
}

@media (max-width: 760px) {
  html {
    background-position:
      left top,
      right top,
      center calc(100% + 16px),
      left top;
    background-size:
      560px 327px,
      560px 327px,
      560px 187px,
      760px 760px;
  }

  body {
    overflow-x: hidden;
  }

  .desktop-scene {
    --mobile-cta-top: 425px;
    --mobile-cta-width: min(96vw, 386px);
    --mobile-cta-half: min(48vw, 193px);
    --mobile-stick-size: min(43.6vw, 170px);
    --mobile-stick-gap: min(1.5vw, 6px);
    --mobile-stick-offset: min(12.8vw, 50px);
    --mobile-stick-top: calc(var(--mobile-cta-top) - min(7vw, 27px));
    width: 100vw;
    height: 100dvh;
    min-height: 760px;
  }

  .logo {
    left: 50%;
    top: 4px;
    width: min(72vw, 280px);
    height: auto;
    transform: translateX(-50%);
  }

  .hero-child {
    left: 50%;
    top: 62px;
    width: min(74vw, 290px);
    height: auto;
    transform: translateX(-50%);
  }

  .counter-panel {
    left: 50%;
    top: 250px;
    width: min(96vw, 374px);
    height: min(55vw, 216px);
    aspect-ratio: auto;
    transform: translateX(-50%);
  }

  .counter-card {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }

  .subtitle {
    left: 50%;
    top: 32%;
    width: 100%;
    height: auto;
    transform: translateX(-50%);
    font-size: clamp(11.8px, 3.1vw, 12.4px);
    line-height: 1.25;
  }

  .value {
    left: 50%;
    top: 40%;
    width: 100%;
    height: auto;
    transform: translateX(-50%);
    font-size: clamp(39.6px, 10.9vw, 43.2px);
    line-height: 1.05;
  }

  .cta-button {
    left: 50%;
    top: var(--mobile-cta-top);
    width: var(--mobile-cta-width);
    height: auto;
    aspect-ratio: 723 / 241;
    padding-bottom: 3px;
    transform: translateX(-50%);
    font-size: clamp(31px, 8.4vw, 34px);
    line-height: 1.1;
  }

  .sticks {
    top: var(--mobile-stick-top);
    width: var(--mobile-stick-size);
    height: var(--mobile-stick-size);
  }

  .sticks-left {
    left: calc(50% - var(--mobile-cta-half) + var(--mobile-stick-gap));
    transform: translateX(calc(-1 * var(--mobile-stick-offset)));
  }

  .sticks-right {
    left: calc(
      50% + var(--mobile-cta-half) - var(--mobile-stick-size) -
        var(--mobile-stick-gap)
    );
    transform: translateX(var(--mobile-stick-offset));
  }

  .thanks {
    left: 50%;
    top: 602px;
    width: calc(100vw - 40px);
    height: auto;
    transform: translateX(-50%);
    font-size: clamp(20px, 5.4vw, 23px);
    line-height: 1.22;
    text-align: center;
  }
}