/* Mega Buys Network — logo-led coming soon page */

:root {
  --brand-blue: #0134cd;
  --brand-blue-bright: #0647e8;
  --brand-blue-deep: #001f8f;
  --brand-blue-dark: #00166f;
  --brand-yellow: #ffc20f;
  --brand-yellow-light: #ffd45a;
  --brand-white: #fdfdfd;

  --frame-gap: 24px;
  --pointer-x: 0px;
  --pointer-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --scene-x: 0px;
  --scene-y: 0px;
  --ease-premium: cubic-bezier(.22, .72, .18, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

html {
  background: var(--brand-blue);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--brand-blue);
  color: var(--brand-white);
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

.launch {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: var(--app-height, 100vh);
  min-height: 520px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 47%, var(--brand-blue) 0%, var(--brand-blue) 39%, #0238d1 61%, var(--brand-blue-deep) 100%);
}

.launch::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 43%, rgba(255,255,255,.055), transparent 43%),
    radial-gradient(ellipse at 50% 55%, rgba(255,194,15,.035), transparent 54%);
  pointer-events: none;
}

.scene,
.scene__mesh,
.grain,
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene {
  z-index: -1;
  overflow: hidden;
  transform: translate3d(var(--scene-x), var(--scene-y), 0);
  transition: transform 1.4s var(--ease-premium);
}

.scene__mesh {
  opacity: .17;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,194,15,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,194,15,.022) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 480px 480px, 480px 480px;
  mask-image: radial-gradient(circle at center, black 0%, black 45%, transparent 89%);
  -webkit-mask-image: radial-gradient(circle at center, black 0%, black 45%, transparent 89%);
  animation: meshDrift 42s linear infinite;
}

.ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform, opacity;
}

.ambient--gold {
  top: -32%;
  right: -13%;
  width: 58vw;
  height: 58vw;
  background: radial-gradient(circle, rgba(255,194,15,.23), rgba(255,194,15,.055) 46%, transparent 72%);
  opacity: .56;
  animation: ambientGold 25s ease-in-out infinite alternate;
}

.ambient--white {
  left: -24%;
  bottom: -42%;
  width: 67vw;
  height: 67vw;
  background: radial-gradient(circle, rgba(255,255,255,.19), rgba(255,255,255,.028) 49%, transparent 73%);
  opacity: .42;
  animation: ambientWhite 30s ease-in-out infinite alternate;
}

.ambient--blue {
  top: 19%;
  left: 50%;
  width: min(82vw, 1180px);
  height: 58vh;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(6,71,232,.52), rgba(1,52,205,.12) 47%, transparent 73%);
  filter: blur(56px);
  opacity: .54;
  animation: ambientBlue 13s ease-in-out infinite alternate;
}

.beam {
  position: absolute;
  width: 34vw;
  height: 190vh;
  filter: blur(10px);
  will-change: transform, opacity;
}

.beam--primary {
  top: -45%;
  left: -9%;
  transform: rotate(-34deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.015) 20%, rgba(255,255,255,.105) 50%, rgba(255,255,255,.018) 78%, transparent);
  opacity: .34;
  animation: beamPrimary 19s ease-in-out infinite alternate;
}

.beam--secondary {
  right: -12%;
  bottom: -48%;
  transform: rotate(37deg);
  background: linear-gradient(90deg, transparent, rgba(255,194,15,.012) 20%, rgba(255,194,15,.09) 50%, rgba(255,194,15,.016) 78%, transparent);
  opacity: .28;
  animation: beamSecondary 23s ease-in-out infinite alternate;
}

.glass-panel {
  position: absolute;
  border: 1px solid rgba(255,255,255,.095);
  background: linear-gradient(132deg, rgba(255,255,255,.078), rgba(255,255,255,.014) 36%, rgba(1,52,205,.08) 72%, rgba(0,31,143,.15));
  box-shadow:
    inset 26px 18px 55px rgba(255,255,255,.025),
    inset -28px -24px 58px rgba(0,22,111,.25),
    0 36px 110px rgba(0,22,111,.24);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  will-change: transform, opacity;
}

.glass-panel--left {
  left: -13%;
  bottom: 2%;
  width: clamp(230px, 28vw, 440px);
  height: clamp(165px, 28vh, 290px);
  border-radius: 30px;
  transform: perspective(1000px) rotateY(17deg) rotateX(-4deg) rotateZ(7deg);
  opacity: .33;
  animation: panelLeft 22s ease-in-out infinite alternate;
}

.glass-panel--right {
  top: 5%;
  right: -15%;
  width: clamp(350px, 42vw, 680px);
  height: clamp(420px, 68vh, 700px);
  border-radius: 45% 0 0 54% / 29% 0 0 65%;
  transform: perspective(1200px) rotateY(-16deg) rotateX(3deg) rotateZ(-3deg);
  opacity: .38;
  animation: panelRight 21s ease-in-out infinite alternate;
}

.glass-panel--right::before {
  content: "";
  position: absolute;
  inset: 7% 8%;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: inherit;
}

.glass-panel__edge {
  position: absolute;
  top: 11%;
  right: 10%;
  width: 1px;
  height: 67%;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.18), rgba(255,194,15,.12), transparent);
}

.glass-panel--left .glass-panel__edge {
  top: 15%;
  right: 13%;
  height: 70%;
}

.glass-panel__reflection {
  position: absolute;
  top: 8%;
  left: 12%;
  width: 7%;
  height: 69%;
  border-radius: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,.16), rgba(255,255,255,.01));
  filter: blur(8px);
  opacity: .34;
}

.orbit {
  position: absolute;
  top: 47%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
}

.orbit--outer {
  width: min(80vw, 1080px);
  aspect-ratio: 1.92;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 0 64px rgba(255,255,255,.018), inset 0 0 48px rgba(255,194,15,.018);
  animation: orbitOuter 14s ease-in-out infinite alternate;
}

.orbit--inner {
  width: min(64vw, 840px);
  aspect-ratio: 1.92;
  transform: translate(-50%, -50%) rotate(-3deg);
  border: 1px solid rgba(255,194,15,.095);
  opacity: .62;
  animation: orbitInner 17s ease-in-out infinite alternate;
}

.light-route {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), rgba(255,194,15,.19), transparent);
  filter: blur(.2px);
}

.light-route--one {
  top: 28%;
  left: -12%;
  width: 63vw;
  transform: rotate(-12deg);
  opacity: .43;
}

.light-route--two {
  right: -14%;
  bottom: 24%;
  width: 60vw;
  transform: rotate(14deg);
  opacity: .34;
}

.grain {
  z-index: 8;
  opacity: .042;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.36) 0 1px, transparent 1.2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.26) 0 1px, transparent 1.2px),
    radial-gradient(circle at 40% 80%, rgba(255,194,15,.22) 0 1px, transparent 1.2px);
  background-size: 47px 53px, 61px 67px, 79px 73px;
  mix-blend-mode: soft-light;
  animation: grainShift .42s steps(2) infinite;
}

.vignette {
  z-index: 9;
  box-shadow: inset 0 0 16vw rgba(0,22,111,.72), inset 0 -14vh 22vh rgba(0,22,111,.26);
}

.viewport-frame {
  position: absolute;
  z-index: 10;
  inset: var(--frame-gap);
  border: 1px solid rgba(255,255,255,.16);
  pointer-events: none;
}

.viewport-frame::before,
.viewport-frame::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,194,15,.7), transparent);
}

.viewport-frame::before {
  top: -1px;
  left: 13%;
}

.viewport-frame::after {
  right: 12%;
  bottom: -1px;
}

.frame-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  opacity: .52;
}

.frame-corner::before,
.frame-corner::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.62);
}

.frame-corner::before {
  width: 28px;
  height: 1px;
}

.frame-corner::after {
  width: 1px;
  height: 28px;
}

.frame-corner--top-left {
  top: 15px;
  left: 15px;
}

.frame-corner--bottom-right {
  right: 15px;
  bottom: 15px;
  transform: rotate(180deg);
}

.hero {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding:
    max(18px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  text-align: center;
}

.logo-stage {
  position: relative;
  width: min(106vw, 1200px, calc(76svh * 1.5));
  aspect-ratio: 3 / 2;
  perspective: 1400px;
  transform: translate3d(var(--pointer-x), var(--pointer-y), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 1s var(--ease-premium);
  will-change: transform;
}

.logo-aura {
  position: absolute;
  z-index: -1;
  top: 51%;
  left: 50%;
  width: 78%;
  height: 64%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,194,15,.16), rgba(255,194,15,.045) 35%, rgba(255,255,255,.026) 55%, transparent 74%);
  filter: blur(38px);
  opacity: .68;
  animation: auraBreath 8s ease-in-out infinite alternate;
}

.logo-float {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: logoFloat 8s ease-in-out infinite;
  will-change: transform;
}

.logo-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-style: preserve-3d;
}

.brand-logo {
  position: absolute;
  top: -8%;
  left: -8%;
  width: 116%;
  height: 116%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.025) contrast(1.012) brightness(1.008);
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.logo-sheen {
  position: absolute;
  z-index: 2;
  top: -28%;
  left: -40%;
  width: 26%;
  height: 156%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.11), transparent);
  filter: blur(7px);
  mix-blend-mode: screen;
  opacity: 0;
  animation: logoSheen 9s var(--ease-premium) infinite;
}

.logo-reflection {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 7%;
  width: 55%;
  height: 8%;
  transform: translateX(-50%) rotateX(72deg);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.21), rgba(255,194,15,.075) 34%, rgba(1,52,205,.03) 62%, transparent 76%);
  filter: blur(16px);
  opacity: .5;
  animation: reflectionBreath 8s ease-in-out infinite alternate;
}

.hero-copy {
  position: relative;
  z-index: 4;
  margin-top: clamp(-1.45rem, -2.2vh, -.6rem);
  padding-inline: 20px;
}

.coming-soon {
  margin: 0;
  color: var(--brand-white);
  font-size: clamp(.64rem, .75vw, .86rem);
  font-weight: 700;
  letter-spacing: .52em;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0,22,111,.42);
}

.supporting-copy {
  margin: clamp(.82rem, 1.45vh, 1.02rem) 0 0;
  color: rgba(255,255,255,.72);
  font-size: clamp(.88rem, 1vw, 1.04rem);
  font-weight: 300;
  letter-spacing: .012em;
  line-height: 1.55;
  text-shadow: 0 4px 18px rgba(0,22,111,.38);
}

.js .reveal {
  opacity: 0;
  transform: translateY(17px);
}

.js .reveal--logo {
  transform: translateY(14px) scale(.985);
}

.js.is-ready .reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.25s var(--ease-premium), transform 1.25s var(--ease-premium);
}

.js.is-ready .reveal--logo {
  transform: translateY(0) scale(1);
  transition-delay: .06s;
}

.js.is-ready .reveal--title {
  transition-delay: .31s;
}

.js.is-ready .reveal--copy {
  transition-delay: .46s;
}

@keyframes meshDrift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to { background-position: 120px 60px, 60px 120px, 240px 120px, 120px 240px; }
}

@keyframes ambientGold {
  from { transform: translate3d(0,0,0) scale(.96); opacity: .42; }
  to { transform: translate3d(-8%,7%,0) scale(1.09); opacity: .63; }
}

@keyframes ambientWhite {
  from { transform: translate3d(0,0,0) scale(1); opacity: .32; }
  to { transform: translate3d(9%,-7%,0) scale(1.12); opacity: .48; }
}

@keyframes ambientBlue {
  from { transform: translateX(-50%) scale(.96); opacity: .42; }
  to { transform: translateX(-50%) scale(1.06); opacity: .62; }
}

@keyframes beamPrimary {
  from { transform: translate3d(-8%,-2%,0) rotate(-34deg); opacity: .20; }
  to { transform: translate3d(18%,4%,0) rotate(-34deg); opacity: .42; }
}

@keyframes beamSecondary {
  from { transform: translate3d(8%,3%,0) rotate(37deg); opacity: .17; }
  to { transform: translate3d(-16%,-4%,0) rotate(37deg); opacity: .34; }
}

@keyframes panelLeft {
  from { transform: perspective(1000px) rotateY(17deg) rotateX(-4deg) rotateZ(7deg) translate3d(0,0,0); }
  to { transform: perspective(1000px) rotateY(13deg) rotateX(-2deg) rotateZ(4deg) translate3d(7%,-5%,0); }
}

@keyframes panelRight {
  from { transform: perspective(1200px) rotateY(-16deg) rotateX(3deg) rotateZ(-3deg) translate3d(0,0,0); }
  to { transform: perspective(1200px) rotateY(-12deg) rotateX(1deg) rotateZ(0deg) translate3d(-4%,3%,0); }
}

@keyframes orbitOuter {
  from { transform: translate(-50%,-50%) scale(.985); opacity: .50; }
  to { transform: translate(-50%,-50%) scale(1.026); opacity: .82; }
}

@keyframes orbitInner {
  from { transform: translate(-50%,-50%) rotate(-3deg) scale(.98); }
  to { transform: translate(-50%,-50%) rotate(1deg) scale(1.025); }
}

@keyframes auraBreath {
  from { transform: translate(-50%,-50%) scale(.94); opacity: .48; }
  to { transform: translate(-50%,-50%) scale(1.08); opacity: .79; }
}

@keyframes logoFloat {
  0%, 100% { transform: translate3d(0,0,0) rotateX(0deg); }
  50% { transform: translate3d(0,-7px,16px) rotateX(.65deg); }
}

@keyframes logoSheen {
  0%, 58% { left: -40%; opacity: 0; }
  64% { opacity: .13; }
  77% { opacity: .08; }
  84%, 100% { left: 118%; opacity: 0; }
}

@keyframes reflectionBreath {
  from { transform: translateX(-50%) rotateX(72deg) scale(.90); opacity: .34; }
  to { transform: translateX(-50%) rotateX(72deg) scale(1.08); opacity: .58; }
}

@keyframes grainShift {
  0% { background-position: 0 0, 0 0, 0 0; }
  50% { background-position: 7px -9px, -8px 6px, 5px 8px; }
  100% { background-position: -6px 4px, 8px -7px, -7px -4px; }
}

@media (max-width: 900px) {
  :root { --frame-gap: 18px; }

  .logo-stage {
    width: min(110vw, 980px, calc(73svh * 1.5));
  }

  .glass-panel--right {
    right: -29%;
    opacity: .29;
  }

  .glass-panel--left {
    left: -22%;
    opacity: .25;
  }

  .orbit--outer { width: 94vw; }
  .orbit--inner { width: 77vw; }
}

@media (max-width: 640px) {
  :root { --frame-gap: 11px; }

  .launch { min-height: 480px; }

  .hero { padding-inline: 4px; }

  .logo-stage {
    width: min(112vw, calc(69svh * 1.5));
  }

  .hero-copy {
    margin-top: clamp(-.72rem, -1.2vh, -.25rem);
  }

  .coming-soon {
    font-size: .57rem;
    letter-spacing: .42em;
  }

  .supporting-copy {
    max-width: 84vw;
    margin-inline: auto;
    font-size: .86rem;
  }

  .viewport-frame::before,
  .viewport-frame::after {
    width: 33px;
  }

  .frame-corner {
    width: 23px;
    height: 23px;
  }

  .frame-corner::before { width: 23px; }
  .frame-corner::after { height: 23px; }

  .frame-corner--top-left {
    top: 10px;
    left: 10px;
  }

  .frame-corner--bottom-right {
    right: 10px;
    bottom: 10px;
  }

  .glass-panel--right {
    top: 13%;
    right: -57%;
    width: 108vw;
    height: 58vh;
    opacity: .22;
  }

  .glass-panel--left,
  .beam--secondary,
  .light-route--two {
    display: none;
  }

  .scene__mesh {
    opacity: .11;
    background-size: 84px 84px, 84px 84px, 336px 336px, 336px 336px;
  }

  .orbit--outer {
    width: 109vw;
    opacity: .34;
  }

  .orbit--inner {
    width: 89vw;
    opacity: .32;
  }

  .logo-aura {
    width: 90%;
    height: 72%;
  }
}

@media (max-height: 650px) {
  .logo-stage {
    width: min(102vw, 960px, calc(68svh * 1.5));
  }

  .hero-copy { margin-top: -.55rem; }
  .supporting-copy { margin-top: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

  .scene,
  .logo-stage {
    transform: none !important;
    transition: none !important;
  }

  .js .reveal,
  .js.is-ready .reveal,
  .js.is-ready .reveal--logo {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .logo-sheen { display: none; }
}


/* Official Mega Buys store gateway */
.store-gateway {
  position: relative;
  z-index: 10;
  width: min(92vw, 720px);
  margin-inline: auto;
  text-align: center;
}

.hero-copy.store-gateway {
  margin-top: clamp(-1.15rem, -1.8vh, -.35rem);
  padding-inline: 18px;
}

.shop-title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-wrap: balance;
  text-shadow: 0 8px 28px rgba(0, 24, 110, .30);
}

.shop-description {
  max-width: 630px;
  margin: clamp(.55rem, 1vh, .8rem) auto 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.82rem, 1vw, 1rem);
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 1.5;
  text-wrap: balance;
  text-shadow: 0 5px 20px rgba(0, 24, 110, .28);
}

.shop-now-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-width: 176px;
  min-height: 50px;
  margin-top: clamp(.85rem, 1.5vh, 1.15rem);
  padding: .85rem 1.65rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 221, 91, .98), rgba(255, 194, 13, 1));
  box-shadow:
    0 14px 30px rgba(0, 24, 110, .30),
    0 5px 0 rgba(0, 27, 120, .40),
    inset 0 1px 0 rgba(255, 255, 255, .70);
  color: #01268f;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .18em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(0);
  transition:
    transform .26s cubic-bezier(.22, .72, .18, 1),
    box-shadow .26s cubic-bezier(.22, .72, .18, 1),
    filter .26s ease;
  -webkit-tap-highlight-color: transparent;
}

.shop-now-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 18%, rgba(255,255,255,.36) 46%, transparent 72%);
  transform: translateX(-130%);
  transition: transform .65s cubic-bezier(.22, .72, .18, 1);
}

.shop-now-button span {
  position: relative;
  font-size: 1.05rem;
  line-height: 0;
  transition: transform .26s cubic-bezier(.22, .72, .18, 1);
}

.shop-now-button:hover {
  filter: brightness(1.04) saturate(1.03);
  transform: translateY(-3px);
  box-shadow:
    0 18px 36px rgba(0, 24, 110, .36),
    0 7px 0 rgba(0, 27, 120, .40),
    inset 0 1px 0 rgba(255, 255, 255, .78);
}

.shop-now-button:hover::before {
  transform: translateX(130%);
}

.shop-now-button:hover span {
  transform: translateX(3px);
}

.shop-now-button:active {
  transform: translateY(1px);
  box-shadow:
    0 8px 20px rgba(0, 24, 110, .28),
    0 2px 0 rgba(0, 27, 120, .42),
    inset 0 1px 0 rgba(255, 255, 255, .65);
}

.shop-now-button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.store-note {
  margin: .72rem 0 0;
  color: rgba(255, 255, 255, .67);
  font-size: clamp(.66rem, .72vw, .76rem);
  font-weight: 600;
  letter-spacing: .06em;
}

.js.is-ready .reveal--cta { transition-delay: .60s; }
.js.is-ready .reveal--note { transition-delay: .72s; }

@media (max-width: 640px) {
  .hero-copy.store-gateway {
    width: min(94vw, 520px);
    margin-top: clamp(-.55rem, -1vh, -.15rem);
    padding-inline: 14px;
  }

  .shop-title {
    font-size: clamp(1.22rem, 6vw, 1.72rem);
    letter-spacing: -.025em;
  }

  .shop-description {
    max-width: 88vw;
    margin-top: .48rem;
    font-size: clamp(.76rem, 3.3vw, .88rem);
    line-height: 1.42;
  }

  .shop-now-button {
    min-width: 168px;
    min-height: 48px;
    margin-top: .78rem;
    padding: .78rem 1.45rem;
    border-radius: 13px;
    font-size: .76rem;
  }

  .store-note {
    margin-top: .58rem;
    font-size: .64rem;
  }
}

@media (max-height: 650px) {
  .shop-title { font-size: clamp(1.12rem, 2.2vw, 1.75rem); }
  .shop-description { margin-top: .38rem; font-size: .76rem; }
  .shop-now-button { min-height: 44px; margin-top: .6rem; padding-block: .68rem; }
  .store-note { margin-top: .42rem; }
}

@media (hover: none), (pointer: coarse) {
  .shop-now-button:hover {
    filter: none;
    transform: none;
    box-shadow:
      0 14px 30px rgba(0, 24, 110, .30),
      0 5px 0 rgba(0, 27, 120, .40),
      inset 0 1px 0 rgba(255, 255, 255, .70);
  }
  .shop-now-button:hover::before { transform: translateX(-130%); }
  .shop-now-button:hover span { transform: none; }
}