* {
  box-sizing: border-box;
}

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

:root {
  --btp-viewport-height: 100lvh;
}

body {
  min-width: 980px;
  background: #000;
  color: #fff;
  font-family: Poppins, Arial, Helvetica, sans-serif;
  font-size: 10px;
  overflow-x: auto;
}

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

.site-header {
  height: 89px;
  min-width: 980px;
  background: #000;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

.header-inner {
  width: 980px;
  height: 89px;
  margin: 0 auto;
  position: relative;
}

.header-logo {
  position: absolute;
  left: 449px;
  top: 3px;
  width: 82px;
  height: 82px;
  object-fit: contain;
}

.main-nav {
  position: absolute;
  left: 206px;
  top: 19px;
  width: 720px;
  height: 50px;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 700;
}

.main-nav a {
  position: absolute;
  top: 0;
  padding: 5px 10px;
  color: #fff;
  white-space: nowrap;
}

.main-nav a:hover {
  color: #e3e3e3;
}

.nav-home {
  left: 0;
}

.nav-privacy {
  left: 470px;
}

.mobile-menu {
  display: none;
}

.product-section {
  min-width: 980px;
  height: 643px;
  background-color: #000;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.short-section {
  height: 599px;
}

.tall-section {
  height: 685px;
}

.section-content {
  width: max(980px, calc(100% - 380px));
  height: 542px;
  margin: 57px auto 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.short-content {
  margin-top: 28px;
  margin-bottom: 29px;
}

.product-column {
  position: relative;
  min-height: 542px;
}

.product-title {
  position: absolute;
  left: 29px;
  top: 39px;
  width: 454px;
  margin: 0;
  color: #fff;
  font-size: 48px;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
}

.app-icon {
  position: absolute;
  left: 178px;
  top: 161px;
  width: 156px;
  height: 156px;
  object-fit: cover;
}

.store-link {
  position: absolute;
  left: 187px;
  top: 371px;
  display: block;
  width: 137px;
  height: 41px;
}

.store-badge {
  width: 137px;
  height: 41px;
  display: block;
  object-fit: fill;
}

.copy-heading {
  position: absolute;
  top: 69px;
  left: calc((100% - 490px) * .5 + 53px);
  width: 383px;
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
}

.copy-body {
  position: absolute;
  top: 165px;
  left: calc((100% - 490px) * .5 + 56px);
  width: 378px;
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0;
}

.copy-body p {
  margin: 0 0 28px;
}

.llama-copy .copy-body {
  top: 165px;
}

.gradient-color-contacts {
  background-image:
    radial-gradient(circle at 94.35384114583333% 89.61588541666666%, #292929 0%, 17.6%, rgba(41, 41, 41, 0) 40%),
    radial-gradient(circle at 6.503906249999999% 88.037109375%, rgba(0, 0, 0, .99) 0%, 25%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(circle at 7.353566487630209% 14.396260579427084%, #292929 0%, 42%, rgba(41, 41, 41, 0) 70%),
    radial-gradient(circle at 93.6865234375% 11.42578125%, #000 0%, 42%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle at 48.9013671875% 49.521484375%, #000 0%, 100%, rgba(0, 0, 0, 0) 100%);
}

.gradient-hop-slide {
  background-image:
    radial-gradient(circle at 91.81543986002603% 88.98539225260417%, #000 0%, 20%, rgba(0, 0, 0, 0) 40%),
    radial-gradient(circle at 3.4075927734374996% 87.3773701985677%, rgba(21, 62, 30, .99) 0%, 25%, rgba(21, 62, 30, 0) 50%),
    radial-gradient(circle at 6.165364583333333% 12.617187499999998%, #000 0%, 42%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle at 93.6865234375% 11.42578125%, #4f1717 0%, 42%, rgba(79, 23, 23, 0) 70%),
    radial-gradient(circle at 48.9013671875% 49.521484375%, #000 0%, 100%, rgba(0, 0, 0, 0) 100%);
}

.gradient-debris-dodge {
  background-image:
    radial-gradient(circle at 8.443806966145834% 14.350179036458332%, #3f0000 0%, 20%, rgba(63, 0, 0, 0) 40%),
    radial-gradient(circle at 6.503906249999999% 88.037109375%, rgba(0, 0, 0, .99) 0%, 25%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(circle at 92.5635274251302% 86.3580830891927%, #4e402b 0%, 42%, rgba(78, 64, 43, 0) 70%),
    radial-gradient(circle at 93.6865234375% 11.42578125%, #000 0%, 42%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle at 48.9013671875% 49.521484375%, #000 0%, 100%, rgba(0, 0, 0, 0) 100%);
}

.gradient-unicorn-slayer {
  background-image:
    radial-gradient(circle at 86.47898356119792% 83.30174763997395%, #000 0%, 20%, rgba(0, 0, 0, 0) 40%),
    radial-gradient(circle at 85.46666463216145% 18.917287190755207%, rgba(62, 9, 5, .99) 0%, 26.5%, rgba(62, 9, 5, 0) 53%),
    radial-gradient(circle at 12.308197021484375% 88.47803751627605%, #090160 0%, 27.6%, rgba(9, 1, 96, 0) 46%),
    radial-gradient(circle at 11.1236572265625% 17.950286865234375%, #000 0%, 42%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle at 48.9013671875% 49.521484375%, #000 0%, 100%, rgba(0, 0, 0, 0) 100%);
}

.gradient-rude-llama {
  background-image:
    radial-gradient(circle at 94.35384114583333% 89.61588541666666%, #42302f 0%, 20%, rgba(66, 48, 47, 0) 40%),
    radial-gradient(circle at 6.503906249999999% 88.037109375%, rgba(0, 0, 0, .99) 0%, 25%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(circle at 6.165364583333333% 12.617187499999998%, #3e0905 0%, 42%, rgba(62, 9, 5, 0) 70%),
    radial-gradient(circle at 93.6865234375% 11.42578125%, #000 0%, 42%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(circle at 48.9013671875% 49.521484375%, #000 0%, 100%, rgba(0, 0, 0, 0) 100%);
}

.privacy-page {
  min-height: 1842px;
  min-width: 980px;
  background-image:
    radial-gradient(circle at 48.84765625% 84.71282958984375%, #153e1e 0%, 17.5%, rgba(21, 62, 30, 0) 35%),
    radial-gradient(circle at 48.80427042643229% 12.044855753580729%, #3e0905 0%, 17.5%, rgba(62, 9, 5, 0) 35%),
    radial-gradient(circle at 94.49142456054688% 88.12215169270833%, #2d505a 0%, 17.6%, rgba(45, 80, 90, 0) 40%),
    radial-gradient(circle at 6.503906249999999% 88.037109375%, rgba(97, 28, 78, .99) 0%, 25%, rgba(97, 28, 78, 0) 50%),
    radial-gradient(circle at 7.353566487630209% 14.396260579427084%, #153e1e 0%, 42%, rgba(21, 62, 30, 0) 70%),
    radial-gradient(circle at 93.6865234375% 11.42578125%, #070050 0%, 42%, rgba(7, 0, 80, 0) 70%),
    radial-gradient(circle at 48.9013671875% 49.521484375%, #000 0%, 100%, rgba(0, 0, 0, 0) 100%);
  background-size: cover;
  overflow: hidden;
}

.privacy-wrap {
  width: 756px;
  margin-left: calc((100% - 980px) * .5 + 106px);
  padding-top: 126px;
  padding-bottom: 80px;
  color: #fff;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 400;
}

.privacy-wrap h1 {
  margin: 0 0 -7px;
  font-size: 44px;
  line-height: 1.4;
  font-weight: 700;
}

.privacy-wrap h2 {
  margin: 28px 0 0;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 700;
}

.privacy-wrap p {
  margin: 0;
}

.privacy-wrap .effective-date {
  margin-bottom: 30px;
}

.privacy-wrap ul {
  margin: 0;
  padding-left: 26px;
}

.privacy-wrap li {
  margin: 0;
  line-height: 1.75;
}

.privacy-wrap p + p,
.privacy-wrap ul + p {
  margin-top: 28px;
}

.privacy-wrap h2 + p {
  margin-top: 0;
}

.site-footer {
  height: 234px;
  min-width: 980px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #000;
  color: #fff;
  position: relative;
}

.footer-column {
  position: relative;
  min-height: 234px;
}

.footer-logo {
  position: absolute;
  left: 67px;
  top: 58px;
  width: 39px;
  height: 41px;
  object-fit: contain;
}

.footer-name {
  position: absolute;
  left: 115px;
  top: 66px;
  width: 258px;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
}

.footer-phone,
.footer-email,
.footer-right p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  font-weight: 600;
}

.footer-phone {
  position: absolute;
  left: 84px;
  top: 145px;
}

.footer-email {
  position: absolute;
  left: 85px;
  top: 178px;
}

.footer-right p {
  position: absolute;
  right: 115px;
  top: 177px;
  width: 490px;
  text-align: right;
}

@media (max-width: 979px) {
  body {
    min-width: 0;
    overflow-x: hidden;
  }

  body:has(.mobile-menu[open]) {
    overflow: hidden;
  }

  .site-header {
    height: 74px;
    min-width: 0;
    left: auto;
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
  }

  .header-inner {
    width: 100%;
    height: 74px;
  }

  .logo-link {
    position: absolute;
    left: 18px;
    top: 12px;
    z-index: 1002;
  }

  .header-logo {
    position: static;
    width: 50px;
    height: 50px;
    transform: none;
  }

  .main-nav {
    display: none;
  }

  .mobile-menu {
    display: block;
    position: absolute;
    right: 16px;
    top: 11px;
    z-index: 1003;
  }

  .mobile-menu-toggle {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: 52px;
    justify-content: center;
    list-style: none;
    width: 52px;
  }

  .mobile-menu-toggle::-webkit-details-marker {
    display: none;
  }

  .mobile-menu-toggle::marker {
    content: "";
  }

  .mobile-menu-toggle span {
    color: #fff;
    display: block;
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: 54px;
    font-weight: 300;
    line-height: .72;
    transform-origin: center;
    transition: transform .18s ease;
  }

  .mobile-menu[open] .mobile-menu-toggle span {
    transform: rotate(45deg);
  }

  .mobile-menu-panel {
    display: none;
  }

  .mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .site-header:has(.mobile-menu[open]) {
    background:
      radial-gradient(circle at 14% 18%, rgba(97, 28, 78, .75), rgba(97, 28, 78, 0) 34%),
      radial-gradient(circle at 88% 20%, rgba(45, 80, 90, .7), rgba(45, 80, 90, 0) 34%),
      radial-gradient(circle at 50% 86%, rgba(21, 62, 30, .8), rgba(21, 62, 30, 0) 36%),
      #000;
    height: 100vh;
    height: 100lvh;
    height: var(--btp-viewport-height);
    inset: 0;
    overflow: hidden;
    position: fixed;
    z-index: 1000;
  }

  .site-header:has(.mobile-menu[open]) .header-inner {
    height: 100vh;
    height: 100lvh;
    height: var(--btp-viewport-height);
    width: 100%;
  }

  .site-header:has(.mobile-menu[open]) .logo-link {
    left: 18px;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
  }

  .mobile-menu[open] {
    position: static;
  }

  .mobile-menu[open] .mobile-menu-toggle {
    position: fixed;
    right: 16px;
    top: calc(env(safe-area-inset-top, 0px) + 11px);
    z-index: 1004;
  }

  .mobile-menu[open] .mobile-menu-panel {
    align-items: center;
    background:
      radial-gradient(circle at 14% 18%, rgba(97, 28, 78, .75), rgba(97, 28, 78, 0) 34%),
      radial-gradient(circle at 88% 20%, rgba(45, 80, 90, .7), rgba(45, 80, 90, 0) 34%),
      radial-gradient(circle at 50% 86%, rgba(21, 62, 30, .8), rgba(21, 62, 30, 0) 36%),
      #000;
    display: flex;
    height: 100vh;
    height: 100lvh;
    height: var(--btp-viewport-height);
    inset: 0;
    justify-content: center;
    overflow: hidden;
    padding: 0 30px;
    position: fixed;
    width: 100vw;
    z-index: 1001;
  }

  .mobile-menu[open] .mobile-nav-list {
    display: grid;
    gap: clamp(36px, 8vh, 68px);
    justify-items: center;
    width: 100%;
  }

  .mobile-nav-link {
    color: #fff;
    display: inline-flex;
    font-size: clamp(30px, 9vw, 42px);
    font-weight: 700;
    line-height: 1.12;
    min-height: 48px;
    text-align: center;
    text-shadow: 0 0 18px rgba(255, 255, 255, .16);
  }

  .mobile-nav-link.active {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .45);
    text-decoration-thickness: 2px;
    text-underline-offset: 9px;
  }

  .product-section,
  .short-section,
  .tall-section {
    height: auto;
    min-width: 0;
    min-height: 100vh;
    min-height: 100lvh;
    min-height: var(--btp-viewport-height);
    background-size: cover;
    display: flex;
  }

  .section-content,
  .short-content {
    width: 100%;
    max-width: 430px;
    height: auto;
    min-height: 100vh;
    min-height: 100lvh;
    min-height: var(--btp-viewport-height);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 38px 24px 44px;
  }

  .product-column {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .product-media {
    order: 1;
  }

  .product-copy {
    order: 2;
  }

  .product-title,
  .app-icon,
  .store-link,
  .copy-heading,
  .copy-body {
    position: static;
    left: auto;
    top: auto;
  }

  .product-title {
    width: 100%;
    max-width: 342px;
    margin: 0 auto 22px;
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1.16;
  }

  .app-icon {
    width: 132px;
    height: 132px;
    margin: 0 auto 20px;
  }

  .store-link {
    width: 160px;
    height: 48px;
    margin: 0 auto 32px;
  }

  .store-badge {
    width: 160px;
    height: 48px;
  }

  .copy-heading {
    width: 100%;
    max-width: 342px;
    margin: 0 auto 14px;
    font-size: 21px;
    line-height: 1.36;
  }

  .copy-body {
    width: 100%;
    max-width: 342px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.64;
  }

  .copy-body p {
    margin: 0 0 18px;
  }

  .copy-body p:last-child {
    margin-bottom: 0;
  }

  .privacy-page {
    min-width: 0;
    min-height: 0;
    padding: 44px 0 58px;
    background-size: cover;
    overflow: hidden;
  }

  .privacy-wrap {
    width: auto;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 24px;
    font-size: 15px;
    line-height: 1.66;
  }

  .privacy-wrap h1 {
    margin: 0 0 5px;
    font-size: 36px;
    line-height: 1.18;
  }

  .privacy-wrap h2 {
    margin-top: 27px;
    font-size: 16px;
    line-height: 1.55;
  }

  .privacy-wrap ul {
    padding-left: 21px;
  }

  .privacy-wrap li {
    line-height: 1.66;
  }

  .privacy-wrap .effective-date {
    margin-bottom: 28px;
  }

  .privacy-wrap p + p,
  .privacy-wrap ul + p {
    margin-top: 22px;
  }

  .site-footer {
    height: auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 38px 24px 34px;
  }

  .footer-column {
    min-height: 0;
    position: static;
  }

  .footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
  }

  .footer-logo,
  .footer-name,
  .footer-phone,
  .footer-email,
  .footer-right p {
    position: static;
    left: auto;
    top: auto;
    right: auto;
    width: auto;
  }

  .footer-logo {
    width: 36px;
    height: 38px;
    flex: 0 0 auto;
  }

  .footer-name {
    font-size: 19px;
    line-height: 1.2;
  }

  .footer-phone,
  .footer-email,
  .footer-right p {
    font-size: 14px;
    line-height: 1.7;
  }

  .footer-right p {
    text-align: left;
  }
}

@media (max-width: 360px) {
  .section-content,
  .short-content {
    padding: 24px 20px 30px;
  }

  .product-title {
    font-size: clamp(30px, 9vw, 34px);
    margin-bottom: 16px;
  }

  .app-icon {
    width: 112px;
    height: 112px;
    margin-bottom: 16px;
  }

  .store-link {
    width: 150px;
    height: 45px;
    margin-bottom: 24px;
  }

  .store-badge {
    width: 150px;
    height: 45px;
  }

  .copy-heading {
    max-width: 300px;
    margin-bottom: 10px;
    font-size: 19px;
    line-height: 1.28;
  }

  .copy-body {
    max-width: 300px;
    font-size: 14px;
    line-height: 1.5;
  }

  .copy-body p {
    margin-bottom: 14px;
  }
}