@font-face {
  font-family: 'Lava Pro Grunge';
  src: url('/assets/fonts/lava.ttf') format('truetype');
  font-display: block;
}

@font-face {
  font-family: 'Antio';
  src: url('/assets/fonts/antio.otf') format('opentype');
  font-display: block;
}

:root {
  --offer-top-offset: calc(100vw * 100 / 1920);

  --offer-stage-height-from-width: clamp(825px, calc(100vw * 725 / 1920), 1180px);
  --offer-stage-height-from-height: calc(100dvh - var(--offer-top-offset) - 8px);
  --offer-desktop-page-height: max(var(--offer-stage-height-from-width), var(--offer-stage-height-from-height));
}

body.offer-page {
  min-height: auto;
}

body.offer-page header {
  background: transparent !important;
}

body.offer-page main.offer-main {
  position: relative !important;
  flex: 0 0 auto !important;
  min-height: calc(100dvh - 90px) !important;
  background-image: url('/assets/Background.png') !important;
  background-size: 100% 100% !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

body.offer-page .full-width-wrapper.offer-wrapper {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

body.offer-page .offer-master {
  display: none !important;
}

body.offer-page .is-hidden {
  display: none !important;
}

body.offer-page .offer-inline-link,
body.offer-page .offer-contact-link {
  color: #ffde59;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 222, 89, 0.78);
}

body.offer-page .offer-inline-link:hover,
body.offer-page .offer-contact-link:hover {
  border-bottom-style: solid;
}

/* =======================================================
   DESKTOP
======================================================= */
@media (min-width: 901px) {
  :root {
    --offer-panel-top: 18.4%;
    --offer-panel-width: min(calc(100vw * 840 / 1920), 840px);
    --offer-panel-scroll-height: clamp(430px, calc(100dvh * 0.44), 820px);

    --offer-font-boost: 0px;

    --offer-doodle-width-ratio: 0.60;
    --offer-doodle-distance-multiplier: 1.42;

    --offer-rocket-width-ratio: 0.355;
    --offer-rocket-left-ratio: 0.255;

    --offer-buttons-left-ratio: 0.245;
    --offer-buttons-top-shift: 0px;
    --offer-buttons-scale: 1;
    --offer-buttons-safe-right: clamp(12px, 1.1vw, 22px);

    --offer-leftboard-gap: clamp(18px, calc(var(--offer-panel-width) * 0.026), 30px);
    --offer-rightboard-gap: clamp(8px, calc(var(--offer-panel-width) * 0.010), 14px);

    --offer-boards-scale: 1;
    --offer-board-height: calc(var(--offer-panel-scroll-height) * 1.10);

    --offer-buttons-gap: clamp(10px, calc(var(--offer-panel-width) * 0.018), 22px);
    --offer-side-small-height: clamp(82px, calc(var(--offer-panel-width) * 0.122), 126px);
    --offer-side-big-height: clamp(70px, calc(var(--offer-panel-width) * 0.104), 108px);
    --offer-buttons-column-width: clamp(150px, calc(var(--offer-side-small-height) * 2.20), 280px);
    --offer-buttons-min-left: calc(50% + (var(--offer-panel-width) / 2) + var(--offer-rightboard-gap) + (var(--offer-board-height) * 0.16));

    --offer-doodle-width: clamp(300px, calc(var(--offer-panel-width) * var(--offer-doodle-width-ratio)), 485px);
    --offer-doodle-left-offset: calc(var(--offer-doodle-width) * var(--offer-doodle-distance-multiplier));

    --offer-rocket-min-width: clamp(205px, calc(100dvh * 0.19), 320px);
    --offer-rocket-width: max(calc(var(--offer-panel-width) * var(--offer-rocket-width-ratio)), var(--offer-rocket-min-width));

    --offer-rocket-top-gap: clamp(14px, calc(var(--offer-panel-width) * 0.030), 26px);
    --offer-footer-top-gap: calc(var(--offer-rocket-top-gap) + clamp(66px, calc(var(--offer-panel-width) * 0.088), 96px));
    --offer-footer-width: min(calc(var(--offer-panel-width) * 0.78), 820px);

    --offer-header-font-size: calc(clamp(44px, calc(100vw * 62 / 1920), 84px) + var(--offer-font-boost));
    --offer-title-font-size: calc(clamp(29px, calc(100vw * 36 / 1920), 44px) + calc(var(--offer-font-boost) * 0.58));
    --offer-meta-font-size: calc(clamp(16px, calc(100vw * 19 / 1920), 23px) + calc(var(--offer-font-boost) * 0.24));
    --offer-desc-font-size: calc(clamp(16px, calc(100vw * 21 / 1920), 25px) + calc(var(--offer-font-boost) * 0.52));
    --offer-footer-font-size: calc(clamp(13px, calc(100vw * 15 / 1920), 18px) + calc(var(--offer-font-boost) * 0.18));
  }

  body.offer-page main.offer-main {
    padding-top: var(--offer-top-offset) !important;
    overflow: hidden !important;
  }

  body.offer-page main.offer-main::before,
  body.offer-page main.offer-main::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 35;
    height: clamp(6px, 0.42vw, 10px);
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.96) 3%,
      rgba(255,255,255,0.98) 97%,
      rgba(255,255,255,0) 100%
    );
    box-shadow: 0 0 10px rgba(255,255,255,0.15);
  }

  body.offer-page main.offer-main::before {
    top: calc((100vw * 90 / 1920) - (clamp(6px, 0.42vw, 10px) / 2));
  }

  body.offer-page main.offer-main::after {
    bottom: 0;
  }

  body.offer-page .offer-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    min-height: var(--offer-desktop-page-height) !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
    background: none !important;
    isolation: isolate !important;
  }

  body.offer-page .offer-decor-layer,
  body.offer-page .offer-content-layer {
    position: absolute !important;
    inset: 0 !important;
  }

  body.offer-page .offer-decor-layer {
    z-index: 1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }

  body.offer-page .offer-content-layer {
    z-index: 5 !important;
    pointer-events: none !important;
    line-height: normal !important;
  }

  body.offer-page .offer-deco {
    position: absolute !important;
    display: block !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    max-width: none !important;
    height: auto !important;
  }

  body.offer-page .offer-panel {
    position: absolute !important;
    top: var(--offer-panel-top) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--offer-panel-width) !important;
    pointer-events: auto !important;
    user-select: text !important;
    z-index: 6 !important;
  }

  body.offer-page .offer-intro,
  body.offer-page .offer-category {
    width: 100% !important;
  }

  body.offer-page .offer-leftboard {
    top: calc(var(--offer-panel-top) + (var(--offer-panel-scroll-height) / 2)) !important;
    right: calc(50% + (var(--offer-panel-width) / 2) + var(--offer-leftboard-gap)) !important;
    left: auto !important;
    width: auto !important;
    height: var(--offer-board-height) !important;
    transform: translateY(-50%) scale(var(--offer-boards-scale)) !important;
    transform-origin: center center !important;
    z-index: 1 !important;
  }

  body.offer-page .offer-rightboard {
    top: calc(var(--offer-panel-top) + (var(--offer-panel-scroll-height) / 2)) !important;
    left: calc(50% + (var(--offer-panel-width) / 2) + var(--offer-rightboard-gap)) !important;
    right: auto !important;
    width: auto !important;
    height: var(--offer-board-height) !important;
    transform: translateY(-50%) scale(var(--offer-boards-scale)) !important;
    transform-origin: center center !important;
    z-index: 1 !important;
  }

  body.offer-page .offer-left-doodles {
    top: calc(var(--offer-panel-top) + (var(--offer-panel-scroll-height) / 2)) !important;
    left: calc(50% - (var(--offer-panel-width) / 2) - var(--offer-doodle-left-offset)) !important;
    width: var(--offer-doodle-width) !important;
    transform: translateY(-48%) !important;
    z-index: 2 !important;
  }

  body.offer-page .offer-rocket-prices {
    top: calc(var(--offer-panel-top) + var(--offer-panel-scroll-height) + var(--offer-rocket-top-gap)) !important;
    left: calc(50% + (var(--offer-panel-width) / 2) - (var(--offer-panel-width) * var(--offer-rocket-left-ratio))) !important;
    right: auto !important;
    width: var(--offer-rocket-width) !important;
    z-index: 2 !important;
  }

  body.offer-page .offer-side-buttons {
    position: absolute !important;
    top: calc(var(--offer-panel-top) + (var(--offer-panel-scroll-height) / 2) + var(--offer-buttons-top-shift)) !important;
    left: min(
      max(
        calc(50% + (var(--offer-panel-width) / 2) + (var(--offer-panel-width) * var(--offer-buttons-left-ratio))),
        var(--offer-buttons-min-left)
      ),
      calc(100vw - (var(--offer-buttons-column-width) * var(--offer-buttons-scale)) - var(--offer-buttons-safe-right))
    ) !important;
    right: auto !important;
    transform: translateY(-50%) scale(var(--offer-buttons-scale)) !important;
    transform-origin: top left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--offer-buttons-gap) !important;
    width: max-content !important;
    max-width: calc(100vw - var(--offer-buttons-safe-right)) !important;
    pointer-events: auto !important;
    z-index: 7 !important;
  }

  body.offer-page .offer-header,
  body.offer-page .offer-panel-title,
  body.offer-page .offer-panel-desc,
  body.offer-page .offer-meta-pill,
  body.offer-page .offer-footer-note {
    pointer-events: auto !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;
  }

  body.offer-page .offer-header {
    position: absolute !important;
    top: calc(var(--offer-panel-top) - clamp(86px, calc(100vw * 102 / 1920), 126px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(var(--offer-panel-width) * 0.44) !important;
    text-align: center !important;
    font-family: 'Lava Pro Grunge', cursive !important;
    font-size: var(--offer-header-font-size) !important;
    line-height: 1 !important;
    color: #ffffff !important;
    text-shadow: 0 3px 14px rgba(0,0,0,0.65) !important;
    opacity: 0 !important;
    z-index: 6 !important;
  }

  html.fonts-loaded body.offer-page .offer-header {
    opacity: 1 !important;
  }

  body.offer-page .offer-panel-title {
    font-family: 'Lava Pro Grunge', cursive !important;
    font-size: var(--offer-title-font-size) !important;
    line-height: 1.04 !important;
    color: #ffffff !important;
    margin: 0 0 clamp(8px, calc(100vw * 10 / 1920), 14px) 0 !important;
    text-shadow: 0 3px 12px rgba(0,0,0,0.65) !important;
    opacity: 0 !important;
    overflow-wrap: anywhere !important;
  }

  html.fonts-loaded body.offer-page .offer-panel-title {
    opacity: 1 !important;
  }

  body.offer-page .offer-panel-meta {
    display: flex !important;
    gap: clamp(10px, calc(100vw * 14 / 1920), 18px) !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin: 0 0 clamp(10px, calc(100vw * 12 / 1920), 16px) 0 !important;
  }

  body.offer-page .offer-panel-meta.is-hidden {
    display: none !important;
  }

  body.offer-page .offer-meta-pill {
    font-family: 'Antio', sans-serif !important;
    font-size: var(--offer-meta-font-size) !important;
    line-height: 1.2 !important;
    color: rgba(255,255,255,0.96) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
  }

  body.offer-page .offer-meta-price {
    color: #ffde59 !important;
    font-weight: 800 !important;
  }

  body.offer-page .offer-panel-desc {
    font-family: 'Antio', sans-serif !important;
    font-size: var(--offer-desc-font-size) !important;
    line-height: 1.28 !important;
    color: rgba(255,255,255,0.92) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55) !important;
  }

  body.offer-page .offer-panel-scroll {
    height: var(--offer-panel-scroll-height) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: clamp(6px, calc(100vw * 8 / 1920), 10px) !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.35) transparent !important;
  }

  body.offer-page .offer-panel-scroll::-webkit-scrollbar {
    width: 8px;
  }

  body.offer-page .offer-panel-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

  body.offer-page .offer-panel-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 999px;
  }

  body.offer-page .offer-footer-note {
    position: absolute !important;
    top: calc(var(--offer-panel-top) + var(--offer-panel-scroll-height) + var(--offer-footer-top-gap)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--offer-footer-width) !important;
    font-family: 'Antio', sans-serif !important;
    font-size: var(--offer-footer-font-size) !important;
    line-height: 1.52 !important;
    color: rgba(255,255,255,0.9) !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55) !important;
    text-align: center !important;
    z-index: 6 !important;
    overflow-wrap: anywhere !important;
  }

  body.offer-page .offer-side-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.22s ease, opacity 0.22s ease, filter 0.22s ease !important;
    opacity: 0.96 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.offer-page .offer-side-btn img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  body.offer-page .offer-side-btn.is-small img {
    height: var(--offer-side-small-height) !important;
  }

  body.offer-page .offer-side-btn.is-big img {
    height: var(--offer-side-big-height) !important;
  }

  body.offer-page .offer-side-btn[data-offer="consultation"] {
    margin: 0 !important;
  }

  body.offer-page .offer-side-btn:hover {
    transform: translateX(-6px) scale(1.05) !important;
    opacity: 1 !important;
  }

  body.offer-page .offer-side-btn:hover img,
  body.offer-page .offer-side-btn.is-active img {
    filter: brightness(0) saturate(100%) invert(86%) sepia(30%) saturate(1000%) hue-rotate(350deg) brightness(103%) contrast(103%) !important;
  }
}

/* 16:9 — rocket minimalnie wyżej i w lewo */
@media (min-width: 901px) and (min-aspect-ratio: 16/9) {
  :root {
    --offer-rocket-top-gap: clamp(-28px, calc(var(--offer-panel-width) * -0.020), -12px);
    --offer-rocket-left-ratio: 0.292;
    --offer-footer-top-gap: calc(var(--offer-rocket-top-gap) + clamp(74px, calc(var(--offer-panel-width) * 0.092), 102px));
  }
}

/* bardzo szerokie ekrany 16:9 / 16:10 / okolice */
@media (min-width: 1729px) and (min-aspect-ratio: 8/5) and (max-aspect-ratio: 16/9) {
  :root {
    --offer-panel-top: 18.2%;
    --offer-panel-width: min(calc(100dvh * 0.43), 980px);
    --offer-panel-scroll-height: clamp(500px, calc(100dvh * 0.44), 860px);
    --offer-board-height: calc(var(--offer-panel-scroll-height) * 1.10);

    --offer-buttons-left-ratio: 0.335;
    --offer-buttons-top-shift: 0px;
    --offer-buttons-scale: 1;

    --offer-side-small-height: clamp(108px, calc(100dvh * 0.078), 172px);
    --offer-side-big-height: clamp(92px, calc(100dvh * 0.067), 148px);
    --offer-buttons-gap: clamp(12px, calc(100dvh * 0.012), 26px);
    --offer-buttons-column-width: clamp(205px, calc(var(--offer-side-small-height) * 2.22), 380px);
    --offer-buttons-safe-right: clamp(24px, 1.5vw, 40px);
    --offer-buttons-min-left: calc(50% + (var(--offer-panel-width) / 2) + var(--offer-rightboard-gap) + (var(--offer-board-height) * 0.20));

    --offer-doodle-width: clamp(340px, calc(var(--offer-panel-width) * 0.64), 560px);
    --offer-doodle-left-offset: calc(var(--offer-doodle-width) * 1.34);

    --offer-rocket-min-width: clamp(245px, calc(100dvh * 0.21), 360px);
    --offer-footer-width: min(calc(var(--offer-panel-width) * 0.86), 860px);
  }
}

/* wysokie ekrany 1920–3455 */
@media (min-width: 1920px) and (max-width: 3455px) and (min-height: 1400px) and (max-aspect-ratio: 8/5) {
  :root {
    --offer-panel-top: 18.1%;
    --offer-panel-width: min(calc(100vw * 840 / 1920), 860px);
    --offer-panel-scroll-height: clamp(500px, calc(100dvh * 0.39), 820px);
    --offer-board-height: calc(var(--offer-panel-scroll-height) * 1.10);

    --offer-buttons-left-ratio: 0.320;
    --offer-buttons-top-shift: 0px;
    --offer-buttons-scale: 1;
    --offer-buttons-safe-right: clamp(22px, 1.4vw, 34px);

    --offer-side-small-height: clamp(108px, calc(100dvh * 0.066), 152px);
    --offer-side-big-height: clamp(92px, calc(100dvh * 0.056), 132px);
    --offer-buttons-gap: clamp(12px, calc(100dvh * 0.010), 24px);
    --offer-buttons-column-width: clamp(190px, calc(var(--offer-side-small-height) * 2.18), 330px);
    --offer-buttons-min-left: calc(50% + (var(--offer-panel-width) / 2) + var(--offer-rightboard-gap) + (var(--offer-board-height) * 0.16));

    --offer-doodle-width: clamp(340px, calc(var(--offer-panel-width) * 0.68), 520px);
    --offer-doodle-left-offset: calc(var(--offer-doodle-width) * 1.22);

    --offer-rocket-min-width: clamp(235px, calc(100dvh * 0.18), 340px);
    --offer-footer-width: min(calc(var(--offer-panel-width) * 0.88), 760px);
  }
}

/* wysokie ekrany 3841+ */
@media (min-width: 3841px) and (min-height: 1400px) and (max-aspect-ratio: 8/5) {
  :root {
    --offer-panel-top: 18.0%;
    --offer-panel-width: min(calc(100dvh * 0.40), 900px);
    --offer-panel-scroll-height: clamp(520px, calc(100dvh * 0.38), 820px);
    --offer-board-height: calc(var(--offer-panel-scroll-height) * 1.10);

    --offer-buttons-left-ratio: 0.300;
    --offer-buttons-top-shift: 0px;
    --offer-buttons-scale: 1;
    --offer-buttons-safe-right: clamp(28px, 1.3vw, 44px);

    --offer-side-small-height: clamp(112px, calc(100dvh * 0.062), 150px);
    --offer-side-big-height: clamp(96px, calc(100dvh * 0.053), 128px);
    --offer-buttons-gap: clamp(12px, calc(100dvh * 0.010), 22px);
    --offer-buttons-column-width: clamp(205px, calc(var(--offer-side-small-height) * 2.12), 318px);
    --offer-buttons-min-left: calc(50% + (var(--offer-panel-width) / 2) + var(--offer-rightboard-gap) + (var(--offer-board-height) * 0.14));

    --offer-doodle-width: clamp(360px, calc(var(--offer-panel-width) * 0.70), 520px);
    --offer-doodle-left-offset: calc(var(--offer-doodle-width) * 1.18);

    --offer-rocket-min-width: clamp(240px, calc(100dvh * 0.17), 335px);
    --offer-footer-width: min(calc(var(--offer-panel-width) * 0.88), 760px);
  }
}

/* szeroki desktop, ale już nie czyste 16:9 */
@media (min-width: 901px) and (max-width: 1728px) {
  :root {
    --offer-panel-top: 17.7%;
    --offer-panel-width: clamp(380px, calc(100vw * 540 / 1920), 640px);
    --offer-panel-scroll-height: clamp(445px, calc(100dvh * 0.49), 760px);
    --offer-board-height: calc(var(--offer-panel-scroll-height) * 1.10);

    --offer-buttons-left-ratio: 0.395;
    --offer-buttons-top-shift: clamp(-28px, calc((1728px - 100vw) * -0.030), -72px);
    --offer-buttons-scale: 1;

    --offer-side-small-height: clamp(82px, calc(100vw * 0.074), 110px);
    --offer-side-big-height: clamp(70px, calc(100vw * 0.064), 94px);
    --offer-buttons-gap: clamp(10px, calc(var(--offer-panel-width) * 0.020), 22px);
    --offer-buttons-column-width: clamp(145px, calc(var(--offer-side-small-height) * 2.08), 250px);
    --offer-buttons-min-left: calc(50% + (var(--offer-panel-width) / 2) + var(--offer-rightboard-gap) + (var(--offer-board-height) * 0.135));

    --offer-font-boost: clamp(8px, calc((1728px - 100vw) * 0.016), 18px);

    --offer-doodle-width: clamp(315px, calc(var(--offer-panel-width) * 0.69), 470px);
    --offer-doodle-left-offset: calc(var(--offer-doodle-width) * 1.30);

    --offer-rocket-min-width: clamp(220px, calc(100vw * 0.18), 340px);
    --offer-rocket-left-ratio: 0.238;

    --offer-footer-width: min(calc(var(--offer-panel-width) * 0.96), 660px);
  }
}

/* 1280–1720 wysokie ekrany — PNG mocno w prawo */
@media (min-width: 1280px) and (max-width: 1720px) and (min-height: 1100px) {
  :root {
    --offer-buttons-left-ratio: 0.560;
    --offer-buttons-min-left: calc(50% + (var(--offer-panel-width) / 2) + var(--offer-rightboard-gap) + (var(--offer-board-height) * 0.175));
  }
}

/* 901–1450 wąskie i wysokie — krótsze okno tekstu */
@media (min-width: 901px) and (max-width: 1450px) and (min-height: 1050px) {
  :root {
    --offer-panel-scroll-height: clamp(335px, calc(100dvh * 0.34), 500px);
    --offer-board-height: calc(var(--offer-panel-scroll-height) * 1.08);
  }
}

/* bardzo wysokie i węższe — iPad / tablet desktop preview */
@media (min-width: 901px) and (max-width: 1280px) and (min-height: 1100px) {
  :root {
    --offer-panel-top: 16.9%;
    --offer-panel-width: clamp(340px, calc(100vw * 0.36), 430px);
    --offer-panel-scroll-height: clamp(365px, calc(100dvh * 0.37), 520px);
    --offer-board-height: calc(var(--offer-panel-scroll-height) * 1.08);

    --offer-buttons-left-ratio: 0.430;
    --offer-buttons-top-shift: clamp(-52px, calc((1280px - 100vw) * -0.055), -104px);
    --offer-buttons-scale: 1;

    --offer-side-small-height: clamp(66px, calc(100vw * 0.066), 84px);
    --offer-side-big-height: clamp(56px, calc(100vw * 0.056), 72px);
    --offer-buttons-gap: clamp(8px, calc(var(--offer-panel-width) * 0.018), 16px);
    --offer-buttons-column-width: clamp(132px, calc(var(--offer-side-small-height) * 2.00), 176px);
    --offer-buttons-min-left: calc(50% + (var(--offer-panel-width) / 2) + var(--offer-rightboard-gap) + (var(--offer-board-height) * 0.118));

    --offer-doodle-width: clamp(320px, calc(var(--offer-panel-width) * 0.92), 390px);
    --offer-doodle-left-offset: calc(var(--offer-doodle-width) * 1.16);

    --offer-rocket-min-width: clamp(220px, calc(100vw * 0.205), 310px);
    --offer-rocket-left-ratio: 0.220;

    --offer-footer-width: min(calc(var(--offer-panel-width) * 1.12), 520px);
  }
}

@media (min-width: 901px) and (max-width: 1280px) and (min-height: 1250px) {
  :root {
    --offer-buttons-scale: 0.92;
  }
}

@media (min-width: 901px) and (max-width: 1140px) {
  :root {
    --offer-buttons-scale: 0.90;
  }
}

@media (min-width: 901px) and (max-width: 1024px) {
  :root {
    --offer-buttons-scale: 0.82;
  }
}

@media (min-width: 1920px) and (min-height: 1201px) {
  :root {
    --offer-panel-scroll-height: clamp(560px, calc(100dvh * 0.56), 1020px);
    --offer-board-height: calc(var(--offer-panel-scroll-height) * 1.10);
  }
}

/* =======================================================
   MOBILE / TABLET
======================================================= */
@media (max-width: 900px) {
  body.offer-page main.offer-main {
    min-height: calc(100dvh - 90px) !important;
    background-image: url('/assets/Background.png') !important;
    background-size: 100% 100% !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    overflow: hidden !important;
    padding-top: 96px !important;
    padding-bottom: 0 !important;
  }

  body.offer-page main.offer-main::before,
  body.offer-page main.offer-main::after,
  body.offer-page .offer-decor-layer,
  body.offer-page .offer-master {
    display: none !important;
  }

  body.offer-page .offer-wrapper {
    position: relative !important;
    width: 100% !important;
    min-height: calc(100dvh - 96px) !important;
    padding: 16px 10px 5dvh !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  body.offer-page .offer-content-layer {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-height: calc(100dvh - 112px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    pointer-events: auto !important;
    z-index: 5 !important;
  }

  body.offer-page .offer-header,
  body.offer-page .offer-side-buttons,
  body.offer-page .offer-panel,
  body.offer-page .offer-footer-note {
    width: min(92vw, 640px) !important;
    max-width: min(92vw, 640px) !important;
    margin: 0 auto !important;
  }

  body.offer-page .offer-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    padding-top: 2px !important;
    font-family: 'Lava Pro Grunge', cursive !important;
    font-size: clamp(36px, 9vw, 60px) !important;
    line-height: 0.96 !important;
    text-align: center !important;
    color: #ffffff !important;
    opacity: 1 !important;
    order: 1 !important;
    z-index: 5 !important;
  }

  body.offer-page .offer-side-buttons {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(4px, 1.7vw, 10px) !important;
    margin: 0 auto !important;
    order: 2 !important;
    z-index: 6 !important;
  }

  body.offer-page .offer-side-btn {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0.98 !important;
    transition: transform 0.22s ease, opacity 0.22s ease, filter 0.22s ease !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.offer-page .offer-side-btn img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  body.offer-page .offer-side-btn.is-small img {
    height: clamp(48px, 11vw, 82px) !important;
  }

  body.offer-page .offer-side-btn.is-big img {
    height: clamp(40px, 9.4vw, 70px) !important;
  }

  body.offer-page .offer-side-btn[data-offer="consultation"] {
    margin: 0 !important;
  }

  body.offer-page .offer-side-btn:hover,
  body.offer-page .offer-side-btn.is-active {
    transform: translateY(-2px) scale(1.03) !important;
    opacity: 1 !important;
  }

  body.offer-page .offer-side-btn:hover img,
  body.offer-page .offer-side-btn.is-active img {
    filter: brightness(0) saturate(100%) invert(86%) sepia(30%) saturate(1000%) hue-rotate(350deg) brightness(103%) contrast(103%) !important;
  }

  body.offer-page .offer-panel {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background: rgba(20, 20, 20, 0.14) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 20px !important;
    padding: 16px 15px !important;
    pointer-events: auto !important;
    order: 3 !important;
    z-index: 5 !important;
    backdrop-filter: blur(1px) !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: clamp(290px, calc(100dvh - 340px), 640px) !important;
  }

  body.offer-page .offer-intro,
  body.offer-page .offer-category {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }

  body.offer-page .offer-intro.is-hidden,
  body.offer-page .offer-category.is-hidden,
  body.offer-page .offer-panel-meta.is-hidden {
    display: none !important;
  }

  body.offer-page .offer-panel-title {
    font-family: 'Lava Pro Grunge', cursive !important;
    font-size: clamp(25px, 6vw, 36px) !important;
    line-height: 1 !important;
    margin: 0 0 10px 0 !important;
    text-align: center !important;
    color: #ffffff !important;
    opacity: 1 !important;
    overflow-wrap: anywhere !important;
  }

  body.offer-page .offer-panel-meta {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px 12px !important;
    margin: 0 0 12px 0 !important;
  }

  body.offer-page .offer-meta-pill {
    font-family: 'Antio', sans-serif !important;
    font-size: clamp(16px, 4vw, 20px) !important;
    line-height: 1.2 !important;
    color: rgba(255,255,255,0.96) !important;
  }

  body.offer-page .offer-meta-price {
    color: #ffde59 !important;
    font-weight: 800 !important;
  }

  body.offer-page .offer-panel-desc {
    font-family: 'Antio', sans-serif !important;
    font-size: clamp(15px, 3.9vw, 20px) !important;
    line-height: 1.36 !important;
    text-align: left !important;
    color: rgba(255,255,255,0.92) !important;
  }

  body.offer-page .offer-panel-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 8px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.35) transparent !important;
  }

  body.offer-page .offer-footer-note {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    font-family: 'Antio', sans-serif !important;
    font-size: clamp(13px, 3.3vw, 16px) !important;
    line-height: 1.45 !important;
    text-align: center !important;
    color: rgba(255,255,255,0.9) !important;
    margin: 0 auto !important;
    order: 4 !important;
    z-index: 5 !important;
    overflow-wrap: anywhere !important;
  }

  body.offer-page #offerIntroText {
    margin-top: -2px !important;
  }

  body.offer-page #offerIntroText br:nth-of-type(1),
  body.offer-page #offerIntroText br:nth-of-type(2) {
    display: none !important;
  }
}

@media (min-width: 650px) and (max-width: 900px) {
  body.offer-page .offer-wrapper {
    min-height: calc(100dvh - 96px) !important;
    padding: 18px 14px 5dvh !important;
  }

  body.offer-page .offer-header,
  body.offer-page .offer-side-buttons,
  body.offer-page .offer-panel,
  body.offer-page .offer-footer-note {
    width: min(94vw, 760px) !important;
    max-width: min(94vw, 760px) !important;
  }

  body.offer-page .offer-header {
    font-size: clamp(42px, 6.4vw, 62px) !important;
  }

  body.offer-page .offer-side-buttons {
    gap: clamp(4px, 1vw, 8px) !important;
  }

  body.offer-page .offer-side-btn.is-small img {
    height: clamp(60px, 9vw, 92px) !important;
  }

  body.offer-page .offer-side-btn.is-big img {
    height: clamp(52px, 7.8vw, 78px) !important;
  }

  body.offer-page .offer-panel {
    padding: 20px 20px !important;
    border-radius: 22px !important;
    min-height: clamp(330px, calc(100dvh - 350px), 700px) !important;
  }

  body.offer-page .offer-panel-title {
    font-size: clamp(30px, 4.5vw, 40px) !important;
    margin-bottom: 12px !important;
  }

  body.offer-page .offer-meta-pill {
    font-size: clamp(18px, 2.65vw, 22px) !important;
  }

  body.offer-page .offer-panel-desc {
    font-size: clamp(18px, 2.65vw, 22px) !important;
    line-height: 1.42 !important;
  }

  body.offer-page .offer-footer-note {
    font-size: clamp(14px, 2.1vw, 18px) !important;
  }
}

@media (max-width: 420px) {
  body.offer-page .offer-wrapper {
    min-height: calc(100dvh - 96px) !important;
  }

  body.offer-page .offer-side-buttons {
    width: min(96vw, 560px) !important;
    gap: 4px !important;
  }

  body.offer-page .offer-side-btn.is-small img {
    height: clamp(42px, 11.5vw, 64px) !important;
  }

  body.offer-page .offer-side-btn.is-big img {
    height: clamp(36px, 9.8vw, 58px) !important;
  }

  body.offer-page .offer-panel {
    padding: 14px 13px !important;
    min-height: clamp(280px, calc(100dvh - 320px), 560px) !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.offer-page main.offer-main {
    padding-top: 90px !important;
  }

  body.offer-page .offer-wrapper {
    min-height: calc(100dvh - 90px) !important;
    padding: 10px 10px 5dvh !important;
  }

  body.offer-page .offer-header,
  body.offer-page .offer-panel,
  body.offer-page .offer-side-buttons,
  body.offer-page .offer-footer-note {
    width: min(86vw, 700px) !important;
    max-width: min(86vw, 700px) !important;
  }

  body.offer-page .offer-header {
    font-size: clamp(28px, 5vw, 44px) !important;
  }

  body.offer-page .offer-side-btn.is-small img {
    height: clamp(42px, 7vw, 64px) !important;
  }

  body.offer-page .offer-side-btn.is-big img {
    height: clamp(36px, 5.8vw, 54px) !important;
  }

  body.offer-page .offer-panel {
    min-height: clamp(220px, calc(100dvh - 250px), 420px) !important;
  }

  body.offer-page .offer-panel-title {
    font-size: clamp(22px, 4.2vw, 30px) !important;
  }

  body.offer-page .offer-meta-pill {
    font-size: clamp(14px, 2.4vw, 18px) !important;
  }

  body.offer-page .offer-panel-desc {
    font-size: clamp(13px, 2.2vw, 17px) !important;
  }

  body.offer-page .offer-footer-note {
    font-size: clamp(12px, 1.9vw, 15px) !important;
  }
}