@font-face {
  font-family: "Luckiest Guy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("luckiest-guy-latin.woff2") format("woff2");
}
@font-face {
  font-family: Fredoka;
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fredoka-latin.woff2") format("woff2");
}
:root {
  color-scheme: light;
  background: #6bbcef;
  --cream: #fff8e8;
  --press-in: 65ms;
  --press-release: cubic-bezier(0.2, 1.55, 0.35, 1);
}
* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  color: #fff8e8;
  font-family: system-ui, sans-serif;
}
.holding-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #6bbcef;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.scene-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.scene-canvas {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 1672px;
  height: 941px;
  transform-origin: 0 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
.scene-canvas[data-ready] {
  visibility: visible;
}
.scene-foreground {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-logo {
  position: absolute;
  z-index: 2;
  top: 24.61%;
  left: 55px;
  display: flex;
  align-items: center;
  width: 31.5vw;
  height: 39vh;
  transform: rotate(4.6deg) scale(1.21);
  transform-origin: center;
  pointer-events: none;
  user-select: none;
}
.scene-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Wooden social buttons — same geometry as the original BUY / CHART under the logo. */
.scene-actions {
  position: absolute;
  z-index: 4;
  top: 24.61%;
  left: 55px;
  width: 31.5vw;
  height: 39vh;
  transform: rotate(4.6deg) scale(1.21);
  transform-origin: center;
  pointer-events: none;
}
.hero-actions {
  position: absolute;
  top: calc(50% + min(19.5vh, 6.474vw) + clamp(16px, 1.5vw, 30px) - 30px);
  left: 6%;
  width: 87%;
  display: grid;
  grid-template-columns: 3.6923fr 2.2857fr;
  align-items: stretch;
  gap: clamp(8px, 0.8vw, 16px);
  pointer-events: auto;
}
.hero-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: #fff9e5;
  text-decoration: none;
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-size: clamp(18px, 2.4vw, 46px);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.hero-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #392717;
  -webkit-mask: var(--cta-art) center / 100% 100% no-repeat;
  mask: var(--cta-art) center / 100% 100% no-repeat;
  opacity: 0.23;
  translate: 0 6px;
  scale: 0.97 0.95;
  filter: blur(3px);
  pointer-events: none;
  transition:
    translate 360ms var(--press-release),
    scale 360ms var(--press-release),
    opacity 200ms ease;
}
.hero-cta-visual {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  transform: perspective(700px) rotateX(var(--cta-rx, 0deg))
    rotateY(var(--cta-ry, 0deg));
  transform-origin: 50% 60%;
  translate: 0 0;
  scale: 1;
  filter: brightness(1) saturate(1) drop-shadow(0 2px 0 #482d1940);
  transition:
    transform 140ms ease-out,
    translate 400ms var(--press-release),
    scale 400ms var(--press-release),
    filter 220ms ease;
}
.hero-cta-impact {
  position: absolute;
  inset: 0;
  transform-origin: 50% 60%;
}
.hero-cta-impact::before,
.hero-cta-impact::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  -webkit-mask: var(--cta-art) center / 100% 100% no-repeat;
  mask: var(--cta-art) center / 100% 100% no-repeat;
  pointer-events: none;
  opacity: 0;
}
.hero-cta-impact::before {
  background: radial-gradient(
    ellipse at var(--cta-light-x, 50%) var(--cta-light-y, 30%),
    #fff7d480,
    #fff1b81a 45%,
    transparent 75%
  );
  mix-blend-mode: soft-light;
  transition: opacity 180ms ease;
}
.hero-cta-impact::after {
  background: linear-gradient(
    110deg,
    transparent 36%,
    #fff8d51a 43%,
    #fff7d4a6 50%,
    #fff8d51a 57%,
    transparent 64%
  );
  background-size: 250% 100%;
  background-position: 150% 50%;
  mix-blend-mode: soft-light;
}
.hero-cta-buy {
  aspect-ratio: 960 / 260;
  text-shadow:
    0 2px 0 #244217,
    0 3px 2px #182f1a80;
}
.hero-cta-chart {
  aspect-ratio: 560 / 245;
  color: #263222;
  font-size: clamp(18px, 2.4vw, 46px);
  text-shadow: 0 1px 0 #fff6d8b3;
}
.hero-cta-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.hero-cta-label {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46.5%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
}
.hero-cta-text {
  display: block;
  transform: translateY(0.13em);
}
@supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
  .hero-cta-text {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    transform: none;
  }
}
.hero-cta-x {
  width: 0.92em;
  height: 0.92em;
  flex: none;
  filter: drop-shadow(0 1px 0 #fff6d8b3);
}
.hero-cta-arrow {
  width: 0.72em;
  height: 0.72em;
  stroke-width: 3.5;
  flex: none;
  transition: transform 260ms var(--press-release);
}
.hero-cta:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 6px;
  border-radius: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .hero-cta:hover .hero-cta-visual {
    translate: 0 -4px;
    scale: 1.025;
    filter: brightness(1.06) saturate(1.025) drop-shadow(0 3px 0 #482d1952);
  }
  .hero-cta:hover::before {
    translate: 0 9px;
    scale: 0.95 0.9;
    opacity: 0.3;
  }
  .hero-cta:hover .hero-cta-impact::before {
    opacity: 0.6;
  }
  .hero-cta:hover .hero-cta-impact::after {
    animation: hero-wood-sheen 720ms ease-out both;
  }
  .hero-cta:hover .hero-cta-arrow {
    transform: translate(0.09em, -0.09em);
  }
}
.hero-cta:focus-visible .hero-cta-visual {
  translate: 0 -4px;
  scale: 1.025;
  filter: brightness(1.06) saturate(1.025) drop-shadow(0 3px 0 #482d1952);
}
.hero-cta:focus-visible .hero-cta-impact::before {
  opacity: 0.6;
}
.hero-cta:focus-visible .hero-cta-impact::after {
  animation: hero-wood-sheen 720ms ease-out both;
}
.hero-cta:is(:active, [data-pressed]) .hero-cta-visual {
  translate: 0 3px;
  scale: 0.97;
  transform: perspective(700px) rotateX(0) rotateY(0);
  filter: brightness(0.96) saturate(1) drop-shadow(0 1px 0 #482d1966);
  transition-duration: var(--press-in);
}
.hero-cta:is(:active, [data-pressed])::before {
  translate: 0 2px;
  scale: 1;
  opacity: 0.18;
  transition-duration: var(--press-in);
}
.hero-cta:is(:active, [data-pressed]) .hero-cta-impact::before {
  opacity: 0.12;
}
.hero-cta:is(:active, [data-pressed]) .hero-cta-arrow {
  transform: none;
  transition-duration: var(--press-in);
}
@keyframes hero-wood-sheen {
  0% {
    background-position: 150% 50%;
    opacity: 0;
  }
  20% {
    opacity: 0.65;
  }
  85% {
    opacity: 0.28;
  }
  100% {
    background-position: -50% 50%;
    opacity: 0;
  }
}
.tablet-screen {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
}
.tablet-card {
  position: relative;
  display: block;
  width: 1280px;
  height: 720px;
  max-width: none;
  overflow: hidden;
  isolation: isolate;
  background: #3b744d;
  transform-origin: 0 0;
}
.tablet-map {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Depth-of-field: the map is a teaser behind the headline, not the subject. */
  filter: blur(4px) saturate(0.85) brightness(0.86) contrast(1.04);
  transform: scale(1.04);
}
.tablet-card::after,
.noscript-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  /* Spotlight vignette: dark halo behind the centered copy, edges stay lit. */
  background:
    radial-gradient(
      ellipse 58% 62% at 50% 50%,
      rgb(7 30 32 / 58%),
      rgb(7 30 32 / 30%) 55%,
      transparent 100%
    ),
    linear-gradient(0deg, rgb(13 37 28 / 30%), transparent 45%),
    linear-gradient(180deg, rgb(13 37 28 / 18%), transparent 35%);
  pointer-events: none;
}
.tablet-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 64%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.tablet-title {
  margin: 0;
  color: #fff3bb;
  font-family: "Luckiest Guy", Impact, sans-serif;
  font-size: 136px;
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 1px;
  -webkit-text-stroke: 8px #173830;
  paint-order: stroke fill;
  text-shadow: 0 9px 0 #173830, 0 15px 18px rgb(6 25 28 / 36%);
  transform: rotate(-2deg);
}
.tablet-title span {
  display: block;
}
.tablet-title span + span {
  margin-top: 9px;
}
.tablet-chain {
  margin: 31px 0 0;
  color: #fffcec;
  font-family: Fredoka, sans-serif;
  font-size: 40px;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: 3px;
  white-space: nowrap;
  -webkit-text-stroke: 3px #173830;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #173830, 0 6px 9px rgb(6 25 28 / 45%);
}
.tablet-chain span {
  color: #d8ff94;
}
.mascot-head-wrap {
  position: absolute;
  z-index: 1;
  top: 6.2%;
  left: 31.8%;
  width: 13.4%;
}
.mascot-head-art {
  display: block;
  width: 100%;
  height: auto;
}
.mascot-eye {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
}
.mascot-eye-left {
  top: 50.7%;
  left: 14.4%;
  width: 29.4%;
  height: 22.4%;
}
.mascot-eye-right {
  top: 47%;
  left: 50.8%;
  width: 28.4%;
  height: 20.7%;
}
.mascot-pupil {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, white 0 8%, transparent 9%),
    radial-gradient(circle at 48% 52%, #38207f 0 52%, #190944 68%, #080118 100%);
  box-shadow:
    inset -0.08em -0.1em 0.18em rgb(0 0 0 / 38%),
    0 0.08em 0.12em rgb(20 5 54 / 34%);
  transform: translate3d(-50%, -50%, 0);
  transition: transform 90ms ease-out;
}
.mascot-hand {
  position: absolute;
  z-index: 4;
  top: 37.12%;
  left: 37.66%;
  display: block;
  width: 2.9%;
  height: auto;
  filter: hue-rotate(18deg) saturate(98%) brightness(82%) contrast(105%);
  transform: rotate(13deg);
  transform-origin: 50% 15%;
}
.cloud-layer {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.cloud-track {
  position: absolute;
  left: 0;
  width: clamp(64px, var(--cloud-size), var(--cloud-max-width));
  opacity: var(--cloud-opacity);
  filter: blur(var(--cloud-blur));
  animation: cloud-travel var(--cloud-duration) linear var(--cloud-delay)
    infinite;
  animation-play-state: var(--cloud-play-state, running);
  will-change: transform;
}
.cloud-art {
  display: block;
  width: 100%;
  height: auto;
  animation: cloud-sway var(--cloud-sway-duration) ease-in-out
    var(--cloud-sway-delay) infinite alternate;
  animation-play-state: var(--cloud-play-state, running);
  user-select: none;
}
.noscript-card {
  position: absolute;
  left: 5%;
  top: 35%;
  width: 90%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
}
.noscript-card .tablet-title {
  font-size: 10vw;
  -webkit-text-stroke-width: 0.5vw;
}
.noscript-card .tablet-chain {
  margin-top: 2vw;
  font-size: 2.8vw;
  letter-spacing: 0.16vw;
  -webkit-text-stroke-width: 0.2vw;
}
@keyframes cloud-travel {
  0% {
    transform: translate3d(-120%, 0, 0);
    opacity: 0;
  }
  5%,
  95% {
    opacity: var(--cloud-opacity);
  }
  100% {
    transform: translate3d(calc(100vw + 20%), 0, 0);
    opacity: 0;
  }
}
@keyframes cloud-sway {
  from {
    transform: translateY(calc(-1 * var(--cloud-lift))) rotate(-0.6deg)
      scaleX(var(--cloud-flip));
  }
  to {
    transform: translateY(var(--cloud-lift)) rotate(0.6deg)
      scaleX(var(--cloud-flip));
  }
}
@media (max-aspect-ratio: 6/5) {
  .scene-logo,
  .scene-actions {
    top: max(5%, env(safe-area-inset-top));
    left: 50%;
    width: min(68vw, 480px);
    height: 21%;
    transform: translateX(-50%) rotate(4deg);
  }
  .hero-actions {
    top: calc(50% + min(15vh, 13.976vw) + 18px);
    gap: 8px;
  }
  .hero-cta-buy {
    font-size: clamp(17px, 5.3vw, 32px);
  }
  .hero-cta-chart {
    font-size: clamp(14px, 4.3vw, 27px);
  }
  .scene-background {
    object-position: 57% center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cloud-track {
    left: var(--cloud-still-x);
    animation: none;
    transform: translateX(-50%);
    will-change: auto;
  }
  .cloud-art {
    animation: none;
    transform: scaleX(var(--cloud-flip));
  }
  .mascot-pupil {
    transition: none;
    transform: translate3d(-50%, -50%, 0) !important;
  }
  .hero-cta::before,
  .hero-cta:is(:hover, :focus-visible, :active, [data-pressed])::before,
  .hero-cta-visual,
  .hero-cta:is(:hover, :focus-visible, :active, [data-pressed])
    .hero-cta-visual,
  .hero-cta-arrow,
  .hero-cta:is(:hover, :focus-visible, :active, [data-pressed])
    .hero-cta-arrow {
    transition: none;
    translate: none;
    scale: none;
    transform: none;
  }
  .hero-cta .hero-cta-impact::after,
  .hero-cta:is(:hover, :focus-visible, :active, [data-pressed])
    .hero-cta-impact::after {
    animation: none;
  }
  .hero-cta-impact::before {
    transition: none;
  }
}