/* CMS-rendered semantic links keep the copied layout while removing data-href divs. */
.header a,
.app-review a,
.card-box-col a,
.social-link a,
.nav-menu a,
.nav-menu button,
.chat-box a,
.service-btn,
.back-top {
  cursor: pointer;
}

.app-review a,
.card-box-col a,
.history__link,
.nav-menu a,
.chat-box a {
  color: inherit;
  text-decoration: none;
}

.history__link {
  display: block;
}

.nav-menu li > a,
.nav-menu li > button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
}

.nav-tabs li > button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  height: 100%;
  padding: 0;
  width: 100%;
}

.nav-pills a:focus-visible,
.nav-tabs li > button:focus-visible,
.header a:focus-visible,
.card-box-col a:focus-visible,
.app-review a:focus-visible,
.history__link:focus-visible,
.nav-menu a:focus-visible,
.nav-menu button:focus-visible,
.chat-box a:focus-visible,
.back-top:focus-visible {
  outline: 2px solid #e0861a;
  outline-offset: 3px;
}

.brand-box video {
  cursor: pointer;
}

.card > .card__poster {
  aspect-ratio: 16 / 9;
  background: #111;
  object-fit: contain;
  object-position: center;
}

.card:hover > .card__poster {
  transform: none;
}

#home-events-panel a.card:focus-visible {
  outline: 2px solid #e0861a;
  outline-offset: 3px;
}

#home-events-panel a.card {
  color: inherit;
  display: block;
  text-decoration: none;
}

.article .cont img {
  max-width: 100%;
  height: auto;
}

/* Keep every fixed layer on the same centered site shell. The copied CSS used
   different positioning models, which exposed the conflict on article pages. */
:root {
  --site-shell-width: 460px;
  --bottom-navigation-height: 65px;
}

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

.wrap {
  box-sizing: border-box;
  min-height: 100dvh;
  width: min(100%, var(--site-shell-width));
  margin: 0 auto;
  padding-bottom: calc(var(--bottom-navigation-height) + env(safe-area-inset-bottom));
}

.header,
.nav-bottom {
  box-sizing: border-box;
  width: min(100vw, var(--site-shell-width));
  left: 50%;
}

.header {
  transform: translateX(-50%);
}

.wrap.article-page {
  margin: 0 auto;
}

.wrap.article-page .content {
  flex: 1 0 auto;
  min-width: 0;
}

.article-detail {
  margin: 1.6rem 0 2.4rem;
  min-width: 0;
}

.article-detail__cover {
  display: block;
  margin: 0 0 1.6rem;
  width: 100%;
  border-radius: 12px;
}

.article-detail__title {
  margin: 0 0 0.8rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: bold;
  overflow-wrap: anywhere;
}

.article-detail__body {
  color: #999;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: justify;
  overflow-wrap: anywhere;
}

.article-detail__body p {
  margin: 0;
}

.article-detail__body p + p {
  margin-top: 1rem;
}

.article-detail__body :is(h1, h2, h3, h4, h5, h6) {
  margin: 1.6rem 0 0.8rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: bold;
}

.article-detail__body :is(h4, h5, h6) {
  font-size: 1.4rem;
}

.article-detail__body img {
  display: block;
  margin: 1.6rem 0;
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.article-detail__body :is(ol, ul) {
  margin: 1.2rem 0;
  padding-left: 2.4rem;
}

.article-detail__body ol {
  list-style-type: decimal;
}

.article-detail__body ul {
  list-style-type: disc;
}

.article-detail__body li + li {
  margin-top: 1.2em;
}

.article-detail__body a {
  color: #e0861a;
  overflow-wrap: anywhere;
}

/* Each event video is a real page so navigation, refresh and browser history
   behave like the rest of the published site. */
.wrap.video-page {
  min-height: 100vh;
  min-height: 100dvh;
}

.video-page .content {
  display: flex;
  flex: 1 0 auto;
  min-height: calc(100vh - 5.5rem - var(--bottom-navigation-height));
  min-height: calc(100dvh - 5.5rem - var(--bottom-navigation-height) - env(safe-area-inset-bottom));
  padding: 0;
}

.video-detail {
  box-sizing: border-box;
  display: flex;
  flex: 1 0 100%;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 2.4rem 0;
}

.video-detail__media,
.video-detail__media .plyr,
.video-detail__media video,
.video-detail__poster {
  width: 100%;
}

.video-detail__media {
  background: #000;
}

.video-detail__media .plyr {
  --plyr-color-main: #e0861a;
}

.video-detail__media :is(.plyr__video-wrapper, video, .video-detail__poster) {
  aspect-ratio: 16 / 9;
}

.video-detail__media video,
.video-detail__poster {
  display: block;
  object-fit: contain;
}

.video-detail__info {
  padding: 1.6rem;
  color: #999;
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: justify;
  overflow-wrap: anywhere;
}

.video-detail__info h1 {
  margin: 0 0 0.8rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: left;
}

.video-detail__info p {
  margin: 0;
}

/* Brand detail pages retain the captured page hierarchy while using semantic links. */
.article-brand .button-box > a {
  text-decoration: none;
}

.article-brand .button-box > a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.article-brand .nav-pills {
  overscroll-behavior-inline: contain;
}

.article-brand .nav-pills ul {
  min-width: max-content;
}

.article-brand .article .cont {
  overflow-wrap: anywhere;
}

/* The CMS uses semantic anchors inside the support menu. Mirror the copied
   card treatment that originally targeted .chat-box li div. */
.chat-box li > a {
  display: flex;
  position: absolute;
  inset: 1px;
  border-radius: 0.8rem;
  background: linear-gradient(180deg, #333333 0%, #000 100%);
  font-size: 0.8rem;
  font-weight: bold;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-decoration: none;
}

/* CMS order is editable, so support-menu masks cannot rely on nth-child. */
.chat-box li > a.chat-channel--support i,
.chat-box li > a.chat-channel--other i {
  -webkit-mask-image: url(../images/cs/cs.svg);
  mask-image: url(../images/cs/cs.svg);
}

.chat-box li > a.chat-channel--telegram i {
  -webkit-mask-image: url(../images/cs/TG.svg);
  mask-image: url(../images/cs/TG.svg);
}

.chat-box li > a.chat-channel--facebook i {
  -webkit-mask-image: url(../images/cs/FB.svg);
  mask-image: url(../images/cs/FB.svg);
}

.chat-box li > a.chat-channel--whatsapp i {
  -webkit-mask-image: url(../images/cs/ws.svg);
  mask-image: url(../images/cs/ws.svg);
}

/* Progressive motion: content remains visible unless the runtime observer is active. */
:root {
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-duration: 680ms;
}

html {
  scroll-behavior: smooth;
}

.motion-ready .header {
  animation: cms-header-enter 620ms var(--motion-ease-out) both;
}

.motion-ready .nav-bottom {
  animation: cms-navigation-enter 620ms 180ms var(--motion-ease-out) both;
}

.motion-ready .home .kv .bg-video {
  animation: cms-hero-enter 1100ms 80ms var(--motion-ease-out) both;
}

.motion-ready .home .kv .kv-shadow {
  animation: cms-fade-enter 900ms 300ms ease-out both;
}

.motion-ready .mute-control {
  animation: cms-control-breathe 2800ms 1100ms ease-in-out infinite;
}

.motion-ready .headline .inner .lf i {
  animation: cms-headline-float 3200ms ease-in-out infinite;
}

.motion-ready .footer-bottom .girl img {
  animation: cms-footer-float 4600ms ease-in-out infinite;
  transform-origin: 50% 100%;
}

.motion-ready .motion-reveal {
  opacity: 0;
  transform: translate3d(0, 1.8rem, 0) scale(0.985);
  transition: border-color 240ms ease, box-shadow 240ms ease;
}

.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation: cms-reveal-enter var(--motion-duration) var(--motion-ease-out) backwards;
  animation-delay: calc(var(--motion-order, 0) * 55ms);
}

.motion-ready .motion-panel-enter .motion-panel-item {
  animation: cms-panel-item-enter 520ms var(--motion-ease-out) backwards;
  animation-delay: calc(var(--motion-order, 0) * 60ms);
}

.header [class^="btn"],
.card,
.nav-pills li,
.nav-pills li a,
.nav-menu li > a,
.nav-menu li > button,
.social-link li a,
.service-btn {
  transition:
    transform 240ms var(--motion-ease-out),
    border-color 240ms ease,
    box-shadow 240ms ease,
    color 240ms ease,
    background-color 240ms ease,
    filter 240ms ease;
}

.app-review li > a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.card {
  overflow: hidden;
}

.card :is(img, video),
.social-link li img,
.service-btn img,
.nav-menu li i {
  transition: transform 420ms var(--motion-ease-out), filter 240ms ease;
}

.nav-pills li.active {
  animation: cms-pill-select 420ms var(--motion-ease-spring) backwards;
}

.popup.active {
  animation: cms-overlay-enter 240ms ease-out both;
}

.popup.active .popup-body {
  animation: cms-popup-content-enter 520ms var(--motion-ease-out) both;
}

.chat-box.active::before {
  animation: cms-overlay-enter 240ms ease-out both;
}

.chat-box.active li {
  animation: cms-chat-item-enter 420ms var(--motion-ease-spring) both;
}

.chat-box.active li:nth-child(2) {
  animation-delay: 45ms;
}

.chat-box.active li:nth-child(3) {
  animation-delay: 90ms;
}

.chat-box.active li:nth-child(4) {
  animation-delay: 135ms;
}

.back-top {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0.8rem, 0) scale(0.94);
  transition: opacity 240ms ease, transform 320ms var(--motion-ease-out);
}

.back-top.active {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .header [class^="btn"]:hover,
  .service-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
  }

  .card:hover,
  .motion-ready .motion-reveal.card.is-visible:hover {
    border-color: rgba(224, 134, 26, 0.72);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.36);
    transform: translate3d(0, -4px, 0) scale(1.01);
  }

  .card:hover :is(img, video) {
    transform: scale(1.035);
  }

  .nav-pills li:not(.active):hover a {
    color: #fff;
    background: #333;
    transform: translateY(-2px);
  }

  .nav-tabs li:hover {
    color: #fff;
  }

  .nav-menu li:hover > :is(a, button) {
    color: #ffaa09;
    transform: translateY(-2px);
  }

  .nav-menu li:hover i {
    transform: scale(1.08);
  }

  .social-link li a:hover {
    transform: translateY(-3px) scale(1.06);
  }
}

.header [class^="btn"]:active,
.card:active,
.nav-pills li:active,
.nav-menu li > :is(a, button):active,
.social-link li a:active,
.service-btn:active {
  transform: scale(0.96);
  transition-duration: 90ms;
}

/* The circular artwork belongs to each brand asset; the layout adds no frame. */
.app-review ul {
  gap: 0.75rem;
}

.app-review li {
  box-sizing: border-box;
  display: block;
  width: calc((100% - 0.75rem * 3) / 4);
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.app-review li > a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.app-review li > a > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.app-review li > a > span {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 14%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66%;
  min-height: 1.7rem;
  padding: 0.15rem 0.25rem;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 235, 163, 0.82);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffd775 0%, #ffad16 48%, #d87a00 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0.15rem 0.4rem rgba(0, 0, 0, 0.45);
  color: #1b1205;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

@keyframes cms-header-enter {
  from { opacity: 0; transform: translate3d(-50%, -100%, 0); }
  to { opacity: 1; transform: translate3d(-50%, 0, 0); }
}

@keyframes cms-navigation-enter {
  from { opacity: 0; transform: translate3d(-50%, 100%, 0); }
  to { opacity: 1; transform: translate3d(-50%, 0, 0); }
}

@keyframes cms-hero-enter {
  from { opacity: 0; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes cms-fade-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cms-control-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 134, 26, 0); }
  50% { box-shadow: 0 0 0 0.7rem rgba(224, 134, 26, 0.12); }
}

@keyframes cms-headline-float {
  0%, 100% { transform: translateY(-17%) rotate(0); }
  50% { transform: translateY(-24%) rotate(-2deg); }
}

@keyframes cms-footer-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-0.5rem) rotate(0.8deg); }
}

@keyframes cms-reveal-enter {
  from { opacity: 0; transform: translate3d(0, 1.8rem, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes cms-panel-item-enter {
  from { opacity: 0; transform: translate3d(0, 1.4rem, 0) scale(0.975); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes cms-pill-select {
  0% { transform: scale(0.94); }
  70% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

@keyframes cms-overlay-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cms-popup-content-enter {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0) scale(0.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes cms-chat-item-enter {
  from { opacity: 0; transform: translate3d(0, 1rem, 0) scale(0.82); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wrap *,
  .wrap *::before,
  .wrap *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .motion-ready .motion-reveal {
    opacity: 1;
    transform: none;
  }
}