:root {
  --canvas-w: 1024;
  --canvas-h: 1536;
  --ink: #17131d;
  --purple: #5c16c8;
  --purple-bright: #8d30ff;
  --cream: #f6ebe4;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, #fff8f3 0, #f1e4dc 62%, #e8dbd5 100%);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body {
  position: fixed;
  inset: 0;
}

button,
a {
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  position: relative;
  width: calc(var(--canvas-w) * 1px);
  height: calc(var(--canvas-h) * 1px);
  transform-origin: top left;
  will-change: transform;
}

.poster {
  position: relative;
  width: 1024px;
  height: 1536px;
  overflow: hidden;
  isolation: isolate;
  border: 3px solid rgba(255, 255, 255, .92);
  border-radius: 42px;
  background:
    radial-gradient(500px 720px at 105% 57%, rgba(123, 56, 232, .32), transparent 72%),
    radial-gradient(450px 380px at 9% 10%, rgba(255, 255, 255, .96), transparent 78%),
    radial-gradient(490px 420px at 16% 66%, rgba(255, 255, 255, .82), transparent 76%),
    linear-gradient(145deg, #fdf4eb 0%, #eeddd5 52%, #f7ece7 100%);
  box-shadow:
    inset 0 0 0 2px rgba(239, 220, 210, .82),
    inset 0 0 80px rgba(255, 255, 255, .68),
    0 32px 90px rgba(43, 22, 59, .28);
}

.poster::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 40;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .76);
  border-radius: 35px;
  box-shadow:
    inset 0 0 70px rgba(255, 255, 255, .42),
    inset 0 0 160px rgba(106, 49, 189, .08);
}

.mist {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(54px);
  pointer-events: none;
}
.mist-left {
  left: -90px;
  top: 500px;
  width: 470px;
  height: 620px;
  background: rgba(255, 255, 255, .74);
}
.mist-right {
  right: -135px;
  top: 520px;
  width: 480px;
  height: 650px;
  background: rgba(134, 65, 235, .28);
}
.texture {
  position: absolute;
  inset: 0;
  z-index: 30;
  opacity: .045;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 0 0, rgba(49, 35, 47, .25) 0 .7px, transparent 1px 4px);
}

.hero {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.headline {
  position: absolute;
  left: 58px;
  top: 64px;
  width: 510px;
  margin: 0;
  color: #14111b;
  font-family: "Bodoni 72", Didot, "Times New Roman", serif;
  font-size: 87px;
  font-weight: 500;
  line-height: .93;
  letter-spacing: -4.3px;
}
.headline span { display: block; }
.headline span:last-child {
  color: #5516b3;
  text-shadow: 0 12px 34px rgba(111, 37, 218, .18);
}
.headline::after {
  content: "";
  display: block;
  width: 290px;
  height: 5px;
  margin: 24px 0 0 9px;
  border-radius: 50%;
  background: linear-gradient(90deg, #621bd0 0 74%, transparent);
  box-shadow: 0 0 18px rgba(113, 31, 221, .68);
  transform: rotate(-1deg);
}

.shop-button {
  position: absolute;
  top: 69px;
  right: 31px;
  width: 482px;
  height: 131px;
  z-index: 4;
  display: grid;
  grid-template-columns: 112px 1fr 55px;
  align-items: center;
  gap: 9px;
  padding: 12px 25px 12px 22px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  pointer-events: auto;
  border: 4px solid rgba(255, 255, 255, .88);
  border-radius: 68px;
  background:
    radial-gradient(circle at 17% 3%, rgba(206, 115, 255, .98), transparent 33%),
    linear-gradient(145deg, #8d27f6 0%, #4e0fb4 48%, #25004e 100%);
  box-shadow:
    0 0 0 5px rgba(129, 34, 223, .24),
    0 0 48px rgba(153, 49, 255, .9),
    0 27px 40px rgba(55, 13, 104, .3),
    inset 0 4px 0 rgba(255, 255, 255, .58),
    inset 0 -24px 38px rgba(25, 0, 64, .33);
  animation: shop-attention 2.8s ease-in-out infinite;
  transition: transform 180ms ease, filter 180ms ease;
}
.shop-button::after {
  content: "";
  position: absolute;
  left: -32%;
  top: -55%;
  z-index: 2;
  width: 20%;
  height: 220%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .76), transparent);
  filter: blur(1px);
  transform: rotate(17deg);
  animation: shop-sweep 3.6s ease-in-out infinite;
}
@keyframes shop-attention {
  0%,
  100% {
    box-shadow:
      0 0 0 5px rgba(129, 34, 223, .24),
      0 0 42px rgba(153, 49, 255, .72),
      0 27px 40px rgba(55, 13, 104, .3),
      inset 0 4px 0 rgba(255, 255, 255, .58),
      inset 0 -24px 38px rgba(25, 0, 64, .33);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(153, 73, 255, .32),
      0 0 65px rgba(172, 73, 255, .96),
      0 30px 46px rgba(55, 13, 104, .34),
      inset 0 4px 0 rgba(255, 255, 255, .66),
      inset 0 -24px 38px rgba(25, 0, 64, .28);
  }
}
@keyframes shop-sweep {
  0%,
  58% { left: -32%; opacity: 0; }
  64% { opacity: .9; }
  88% { left: 122%; opacity: 0; }
  100% { left: 122%; opacity: 0; }
}
.shop-button:hover,
.shop-button:focus-visible {
  outline: none;
  filter: brightness(1.08);
  transform: translateY(-4px) scale(1.01);
}
.shop-button:active { transform: translateY(2px) scale(.985); }
.shop-bag {
  width: 91px;
  height: 91px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shop-button strong {
  font-size: 35px;
  line-height: 1;
  letter-spacing: -.7px;
  white-space: nowrap;
}
.shop-chevron {
  width: 48px;
  height: 70px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button-star {
  position: absolute;
  left: -13px;
  top: 42px;
  color: #fff;
  font-size: 43px;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 10px #fff, 0 0 26px #c879ff;
  animation: button-star-pulse 1.8s ease-in-out infinite;
}
@keyframes button-star-pulse {
  0%,
  100% { opacity: .58; transform: scale(.78) rotate(-8deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(7deg); }
}

.shop-meta {
  position: absolute;
  right: 65px;
  top: 213px;
  width: 385px;
  margin: 0;
  color: #211b25;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
}

.brand-stamp {
  position: absolute;
  right: 24px;
  top: 252px;
  width: 150px;
  height: 150px;
  color: rgba(64, 50, 55, .73);
  transform: rotate(6deg);
}
.brand-stamp svg { width: 100%; height: 100%; overflow: visible; }
.brand-stamp circle {
  fill: rgba(255, 247, 240, .1);
  stroke: rgba(77, 61, 65, .16);
  stroke-width: 1.3;
}
.stamp-copy {
  fill: rgba(55, 43, 47, .86);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.4px;
}
.stamp-letter {
  fill: rgba(88, 70, 69, .82);
  font-family: "Bodoni 72", Didot, "Times New Roman", serif;
  font-size: 74px;
  font-weight: 500;
  text-anchor: middle;
}

.lead {
  position: absolute;
  left: 67px;
  top: 384px;
  width: 485px;
  margin: 0;
  color: #211d25;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -.35px;
}
.lead strong { color: #5b18c5; font-weight: 850; }

.collage {
  position: absolute;
  inset: 0;
  z-index: 7;
}

.product-card {
  --rotate: 0deg;
  --px: 0px;
  --py: 0px;
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  overflow: hidden;
  cursor: default;
  isolation: isolate;
  border: 4px solid rgba(255, 255, 255, .92);
  border-radius: 42px;
  background: rgba(255, 255, 255, .33);
  box-shadow:
    0 28px 58px rgba(49, 26, 60, .15),
    0 0 0 5px rgba(255, 255, 255, .35),
    0 0 42px rgba(135, 65, 228, .3),
    inset 0 3px 0 rgba(255, 255, 255, .92),
    inset 0 0 50px rgba(255, 255, 255, .4);
  transform: translate3d(var(--px), var(--py), 0) rotate(var(--rotate));
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(320px 180px at 28% 0, rgba(255, 255, 255, .72), transparent 60%),
    linear-gradient(145deg, rgba(255, 255, 255, .26), transparent 46%, rgba(118, 44, 214, .12));
  mix-blend-mode: screen;
}
.product-card::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 4;
  pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .67);
  border-radius: 34px;
  box-shadow:
    inset 0 0 56px rgba(255, 255, 255, .27),
    inset 0 -30px 50px rgba(65, 20, 111, .08);
}
.product-card:hover {
  filter: saturate(1.06) brightness(1.02);
  box-shadow:
    0 34px 64px rgba(49, 26, 60, .21),
    0 0 0 7px rgba(255, 255, 255, .46),
    0 0 54px rgba(127, 50, 239, .46),
    inset 0 3px 0 rgba(255, 255, 255, .94);
  transform: translate3d(var(--px), calc(var(--py) - 7px), 0) rotate(var(--rotate)) scale(1.012);
}
.product-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.88) contrast(.97) brightness(1.04);
  transition: transform 480ms ease, filter 220ms ease;
}
.product-card:hover img {
  filter: saturate(.98) contrast(1.01) brightness(1.04);
}
.glass-shine {
  position: absolute;
  left: -60%;
  top: -30%;
  z-index: 5;
  width: 28%;
  height: 170%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: rotate(17deg);
  transition: left 650ms ease;
}
.product-card:hover .glass-shine { left: 135%; }

.shoe-card {
  left: 43px;
  top: 462px;
  width: 461px;
  height: 407px;
  --rotate: -2deg;
}
.shoe-card img { object-position: 51% 50%; transform: scale(1.07); }
.watch-card {
  right: 61px;
  top: 246px;
  width: 389px;
  height: 474px;
  z-index: 4;
  --rotate: 4deg;
}
.watch-card img { object-position: 50% 51%; transform: scale(1.04); }
.bag-card {
  right: 38px;
  top: 674px;
  width: 466px;
  height: 480px;
  --rotate: 3.4deg;
}
.bag-card img { object-position: 50% 53%; transform: scale(1.08); }
.glasses-card {
  left: 40px;
  top: 857px;
  width: 421px;
  height: 338px;
  --rotate: -2deg;
}
.glasses-card img { object-position: 50% 56%; transform: scale(1.07); }

.product-name {
  position: absolute;
  z-index: 8;
  color: rgba(28, 22, 27, .96);
  font-size: 18px;
  font-weight: 720;
  line-height: 1.36;
  text-align: left;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .75);
  pointer-events: none;
}
.shoe-name { left: 36px; top: 43px; }
.glasses-name { left: 35px; bottom: 59px; }
.glass-label {
  padding: 15px 21px;
  border: 2px solid rgba(255, 255, 255, .84);
  border-radius: 24px;
  background: rgba(255, 248, 244, .61);
  backdrop-filter: blur(15px) saturate(1.12);
  box-shadow: 0 16px 28px rgba(52, 28, 51, .1), inset 0 2px 0 rgba(255, 255, 255, .9);
}
.watch-name { left: 8px; bottom: 31px; transform: rotate(7deg); }
.bag-name { right: 24px; bottom: 108px; transform: rotate(5deg); }

.discount {
  position: absolute;
  z-index: 9;
  min-width: 120px;
  padding: 16px 18px 14px;
  display: grid;
  justify-items: center;
  color: #5b18bc;
  font-family: "Bodoni 72", Didot, "Times New Roman", serif;
  font-size: 34px;
  font-style: italic;
  font-weight: 700;
  line-height: .82;
  border: 2px solid rgba(255, 255, 255, .9);
  border-radius: 27px;
  background: rgba(255, 250, 247, .75);
  backdrop-filter: blur(17px) saturate(1.25);
  box-shadow:
    0 18px 34px rgba(50, 24, 63, .14),
    0 0 25px rgba(255, 255, 255, .64),
    inset 0 2px 0 rgba(255, 255, 255, .95);
  pointer-events: none;
}
.discount b { display: block; font: inherit; }
.shoe-discount { left: 18px; bottom: 22px; }
.watch-discount { right: 15px; bottom: 16px; }
.bag-discount { right: 13px; bottom: 17px; }
.glasses-discount {
  left: 14px;
  bottom: 13px;
  min-width: 135px;
  padding: 13px 18px;
  font-size: 29px;
  line-height: 1;
}

.upload-button {
  position: absolute;
  left: 371px;
  top: 930px;
  z-index: 14;
  width: 271px;
  height: 271px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  color: #fff;
  border: 4px solid rgba(255, 255, 255, .91);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 27%, #c278ff 0, #8731ed 28%, #4d0dad 58%, #210348 100%);
  box-shadow:
    0 0 0 22px rgba(255, 255, 255, .56),
    0 0 0 30px rgba(121, 46, 223, .1),
    0 0 67px rgba(128, 45, 244, .8),
    0 35px 54px rgba(44, 14, 75, .28),
    inset 0 4px 0 rgba(255, 255, 255, .62),
    inset 0 -28px 44px rgba(25, 0, 62, .36);
  transition: transform 190ms ease, box-shadow 190ms ease;
}
.upload-button::before {
  content: "";
  position: absolute;
  inset: 17px;
  border: 2px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
}
.upload-button:hover,
.upload-button:focus-visible {
  outline: none;
  transform: translateY(-6px) scale(1.025);
  box-shadow:
    0 0 0 22px rgba(255, 255, 255, .64),
    0 0 0 31px rgba(121, 46, 223, .14),
    0 0 82px rgba(128, 45, 244, .92),
    0 40px 58px rgba(44, 14, 75, .3),
    inset 0 4px 0 rgba(255, 255, 255, .66),
    inset 0 -28px 44px rgba(25, 0, 62, .36);
}
.upload-button:active { transform: translateY(2px) scale(.975); }
.upload-button.is-processing { animation: camera-breathe 850ms ease-in-out infinite alternate; }
.upload-button.is-ready {
  box-shadow:
    0 0 0 22px rgba(255, 255, 255, .63),
    0 0 0 31px rgba(42, 201, 120, .14),
    0 0 76px rgba(49, 207, 128, .8),
    0 35px 54px rgba(44, 14, 75, .25),
    inset 0 4px 0 rgba(255, 255, 255, .62);
}
@keyframes camera-breathe { to { transform: scale(1.035); } }
.outer-halo {
  position: absolute;
  inset: -43px;
  border: 3px solid rgba(255, 255, 255, .58);
  border-radius: 50%;
  box-shadow: inset 0 0 28px rgba(255, 255, 255, .34);
  animation: upload-halo-pulse 2.15s ease-in-out infinite;
}
@keyframes upload-halo-pulse {
  0%,
  100% { opacity: .48; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.045); }
}
.inner-disc {
  position: relative;
  z-index: 4;
  width: 136px;
  height: 136px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .17);
  border-radius: 50%;
  background: rgba(55, 9, 130, .18);
  box-shadow: inset 0 0 34px rgba(255, 255, 255, .08), 0 0 28px rgba(255, 255, 255, .13);
  animation: upload-core-pulse 2.15s ease-in-out infinite;
}
@keyframes upload-core-pulse {
  0%,
  100% { box-shadow: inset 0 0 34px rgba(255, 255, 255, .08), 0 0 20px rgba(255, 255, 255, .1); }
  50% { box-shadow: inset 0 0 46px rgba(255, 255, 255, .15), 0 0 42px rgba(255, 255, 255, .28); }
}
.camera-icon {
  width: 91px;
  height: 80px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, .52));
  animation: camera-icon-pulse 2.15s ease-in-out infinite;
  transition: opacity 160ms ease, transform 160ms ease;
}
@keyframes camera-icon-pulse {
  0%,
  100% { opacity: .82; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.05); }
}
.progress-spinner {
  position: absolute;
  inset: 7px;
  opacity: 0;
  border: 5px solid rgba(255, 255, 255, .2);
  border-top-color: #fff;
  border-radius: 50%;
}
.upload-button.is-processing .camera-icon { opacity: .16; transform: scale(.86); animation: none; }
.upload-button.is-processing .progress-spinner { opacity: 1; animation: spin 750ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.upload-ring-copy {
  position: absolute;
  inset: 4px;
  z-index: 5;
  width: 263px;
  height: 263px;
  overflow: visible;
  pointer-events: none;
}
.upload-ring-copy text {
  fill: rgba(255, 255, 255, .9);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 2.8px;
}

.upload-guide {
  position: absolute;
  left: 0;
  top: 1070px;
  z-index: 11;
  width: 1024px;
  height: 180px;
  overflow: visible;
  fill: none;
  stroke: rgba(255, 255, 255, .96);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 17 15;
  filter: drop-shadow(0 3px 8px rgba(78, 30, 139, .3));
  pointer-events: none;
}
.match-callout {
  position: absolute;
  right: 91px;
  top: 1147px;
  z-index: 13;
  margin: 0;
  color: #28212c;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.28;
  text-align: left;
  pointer-events: none;
}
.match-callout strong { color: #5a18c6; font-weight: 850; }
.upload-status {
  position: absolute;
  left: 50%;
  top: 1207px;
  z-index: 18;
  max-width: 360px;
  padding: 8px 15px;
  overflow: hidden;
  clip-path: inset(50%);
  color: #4f276d;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}

.steps {
  position: absolute;
  left: 67px;
  top: 1213px;
  z-index: 8;
  width: 870px;
  height: 157px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .88);
  border-radius: 35px;
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(24px) saturate(1.15);
  box-shadow:
    0 22px 40px rgba(52, 31, 62, .1),
    0 0 28px rgba(255, 255, 255, .62),
    inset 0 3px 0 rgba(255, 255, 255, .96);
}
.step {
  position: relative;
  display: grid;
  grid-template-rows: 66px 22px 1fr;
  justify-items: center;
  align-content: start;
  gap: 5px;
  padding: 18px 13px 10px;
  text-align: center;
}
.step + .step::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--step-divider-top, 21px);
  bottom: var(--step-divider-bottom, 18px);
  width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .94) 0 7px, rgba(60, 45, 63, .16) 7px 10px);
}
.step-number {
  position: absolute;
  left: 26px;
  top: 17px;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  border-radius: 50%;
  background: linear-gradient(145deg, #8643eb, #3c0d85);
  box-shadow: 0 10px 18px rgba(78, 21, 145, .28), inset 0 2px 0 rgba(255, 255, 255, .48);
}
.step-icon {
  width: 67px;
  height: 67px;
  display: grid;
  place-items: center;
  color: #5d1fc5;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .93), rgba(239, 225, 245, .8));
  box-shadow: 0 13px 22px rgba(58, 22, 82, .13), inset 0 0 0 2px rgba(92, 31, 197, .08);
}
.step-icon svg {
  width: 47px;
  height: 47px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.step strong {
  color: #1b1720;
  font-size: 17px;
  line-height: 1;
  letter-spacing: -.15px;
  white-space: nowrap;
}
.step small {
  color: #504952;
  font-size: 14px;
  line-height: 1.24;
}
.step em { color: #5b18c6; font-style: normal; font-weight: 800; }

.whatsapp-button {
  position: absolute;
  left: 80px;
  top: 1372px;
  z-index: 9;
  width: 864px;
  height: 87px;
  display: grid;
  grid-template-columns: 155px 1fr 135px;
  align-items: center;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  border: 4px solid rgba(255, 255, 255, .82);
  border-radius: 47px;
  background:
    radial-gradient(circle at 15% 0, rgba(224, 255, 219, .58), transparent 38%),
    linear-gradient(145deg, #5da360 0%, #34763d 51%, #1c5d2d 100%);
  box-shadow:
    0 0 0 5px rgba(255, 255, 255, .42),
    0 0 33px rgba(118, 171, 104, .52),
    0 22px 34px rgba(26, 88, 42, .25),
    inset 0 4px 0 rgba(255, 255, 255, .54),
    inset 0 -18px 30px rgba(0, 63, 22, .2);
  animation: whatsapp-attention 3s ease-in-out infinite;
  transition: transform 180ms ease, filter 180ms ease;
}
.whatsapp-button::after {
  content: "";
  position: absolute;
  left: -28%;
  top: -65%;
  z-index: 2;
  width: 17%;
  height: 235%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent);
  filter: blur(1px);
  transform: rotate(18deg);
  animation: whatsapp-sweep 4.2s .7s ease-in-out infinite;
}
@keyframes whatsapp-attention {
  0%,
  100% {
    box-shadow:
      0 0 0 5px rgba(255, 255, 255, .42),
      0 0 27px rgba(118, 171, 104, .42),
      0 22px 34px rgba(26, 88, 42, .25),
      inset 0 4px 0 rgba(255, 255, 255, .54),
      inset 0 -18px 30px rgba(0, 63, 22, .2);
  }
  50% {
    box-shadow:
      0 0 0 8px rgba(231, 255, 226, .52),
      0 0 43px rgba(98, 177, 94, .72),
      0 25px 40px rgba(26, 88, 42, .29),
      inset 0 4px 0 rgba(255, 255, 255, .62),
      inset 0 -18px 30px rgba(0, 63, 22, .17);
  }
}
@keyframes whatsapp-sweep {
  0%,
  62% { left: -28%; opacity: 0; }
  68% { opacity: .82; }
  91% { left: 119%; opacity: 0; }
  100% { left: 119%; opacity: 0; }
}
.whatsapp-button:hover,
.whatsapp-button:focus-visible {
  outline: none;
  filter: brightness(1.06);
  transform: translateY(-4px) scale(1.006);
}
.whatsapp-button:active { transform: translateY(2px) scale(.988); }
.whatsapp-logo {
  justify-self: center;
  width: 77px;
  height: 77px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 7px 11px rgba(0, 65, 25, .3));
}
.whatsapp-button > span {
  min-width: 0;
  text-align: center;
  line-height: 1;
}
.whatsapp-button > span strong {
  display: block;
  font-size: 37px;
  font-weight: 700;
  letter-spacing: -.4px;
  white-space: nowrap;
}
.whatsapp-button > span small {
  display: block;
  margin-top: 8px;
  color: rgba(255, 255, 255, .86);
  font-size: 18px;
}
.whatsapp-button > i {
  justify-self: center;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, .64);
  border-radius: 50%;
  background: rgba(0, 0, 0, .1);
}
.whatsapp-button > i svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: whatsapp-arrow-nudge 1.55s ease-in-out infinite;
}
@keyframes whatsapp-arrow-nudge {
  0%,
  100% { transform: translateX(-4px); opacity: .72; }
  50% { transform: translateX(6px); opacity: 1; }
}

.trust-row {
  position: absolute;
  left: 42px;
  top: 1467px;
  z-index: 8;
  width: 940px;
  height: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  padding: 4px 9px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .86);
  border-radius: 22px;
  background: rgba(255, 255, 255, .49);
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 26px rgba(51, 31, 60, .08), inset 0 2px 0 rgba(255, 255, 255, .95);
}
.trust-row article {
  min-width: 0;
  height: 50px;
  display: grid;
  grid-template-columns: 57px 1fr;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
}
.trust-row article + article { border-left: 2px solid rgba(62, 48, 64, .13); }
.trust-row svg {
  width: 53px;
  height: 53px;
  fill: none;
  stroke: #3b1a75;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trust-row span { min-width: 0; line-height: 1.04; }
.trust-row strong {
  display: block;
  color: #211a26;
  font-size: 13px;
  white-space: nowrap;
}
.trust-row small {
  display: block;
  margin-top: 4px;
  color: #625961;
  font-size: 11px;
  line-height: 1.08;
  white-space: nowrap;
}

.toast {
  position: absolute;
  left: 50%;
  bottom: 92px;
  z-index: 50;
  max-width: 690px;
  padding: 17px 28px;
  color: #fff;
  font-size: 18px;
  font-weight: 750;
  text-align: center;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(29, 13, 40, .9);
  backdrop-filter: blur(18px);
  box-shadow: 0 20px 44px rgba(18, 5, 29, .32);
  transform: translate(-50%, 22px) scale(.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

.ripple {
  position: absolute;
  z-index: 25;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  transform: scale(0);
  pointer-events: none;
  animation: ripple 620ms ease-out forwards;
}
@keyframes ripple { to { transform: scale(38); opacity: 0; } }

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

/* Tall-phone composition: preserve the reference styling while distributing
   its layers across a modern 430 × 932 viewport without stretching artwork. */
.tall-layout .stage,
.tall-layout .poster { height: 2219px; }

.tall-layout .poster {
  background:
    radial-gradient(560px 900px at 106% 58%, rgba(123, 56, 232, .34), transparent 72%),
    radial-gradient(500px 500px at 8% 9%, rgba(255, 255, 255, .96), transparent 78%),
    radial-gradient(520px 620px at 13% 67%, rgba(255, 255, 255, .84), transparent 76%),
    linear-gradient(145deg, #fdf4eb 0%, #eeddd5 54%, #f7ece7 100%);
}
.tall-layout .mist-left { top: 750px; height: 900px; }
.tall-layout .mist-right { top: 720px; height: 1050px; }

.tall-layout .headline {
  left: 58px;
  top: 76px;
  width: 535px;
  font-size: 98px;
}
.tall-layout .headline::after {
  width: 305px;
  margin-top: 29px;
}
.tall-layout .shop-button {
  top: 86px;
  right: 31px;
  width: 486px;
  height: 160px;
  grid-template-columns: 118px 1fr 55px;
}
.tall-layout .shop-button strong { font-size: 36px; }
.tall-layout .shop-meta {
  right: 56px;
  top: 273px;
  width: 410px;
  font-size: 27px;
}
.tall-layout .brand-stamp {
  right: 25px;
  top: 345px;
  width: 170px;
  height: 170px;
}
.tall-layout .lead {
  left: 65px;
  top: 423px;
  width: 525px;
  font-size: 29px;
  line-height: 1.42;
}

.tall-layout .watch-card {
  right: 36px;
  top: 392px;
  width: 405px;
  height: 550px;
}
.tall-layout .shoe-card {
  left: 36px;
  top: 632px;
  width: 474px;
  height: 462px;
}
.tall-layout .bag-card {
  right: 29px;
  top: 980px;
  width: 464px;
  height: 471px;
}
.tall-layout .glasses-card {
  left: 40px;
  top: 1218px;
  width: 410px;
  height: 333px;
}
.tall-layout .product-name { font-size: 21px; }
.tall-layout .shoe-name { left: 38px; top: 44px; }
.tall-layout .glasses-name { left: 35px; bottom: 66px; }
.tall-layout .watch-name { left: 10px; bottom: 35px; }
.tall-layout .bag-name { right: 20px; bottom: 108px; }

.tall-layout .upload-button {
  left: 367px;
  top: 1334px;
  width: 290px;
  height: 290px;
}
.tall-layout .outer-halo { inset: -48px; }
.tall-layout .upload-ring-copy {
  inset: 13px;
  width: 264px;
  height: 264px;
}
.tall-layout .upload-guide {
  top: 1532px;
  height: 238px;
}
.tall-layout .match-callout {
  right: 38px;
  top: 1646px;
  font-size: 22px;
}
.tall-layout .upload-status { top: 1692px; }

.tall-layout .steps {
  left: 40px;
  top: 1723px;
  width: 944px;
  height: 229px;
  border-radius: 42px;
}
.tall-layout .step {
  grid-template-rows: 93px 28px 1fr;
  gap: 8px;
  padding: 28px 16px 15px;
}
.tall-layout .step + .step::before { top: 31px; bottom: 27px; }
.tall-layout .step-number {
  left: 25px;
  top: 27px;
  width: 43px;
  height: 43px;
  font-size: 22px;
}
.tall-layout .step-icon {
  width: 91px;
  height: 91px;
}
.tall-layout .step-icon svg {
  width: 61px;
  height: 61px;
}
.tall-layout .step strong { font-size: 20px; }
.tall-layout .step small {
  font-size: 16px;
  line-height: 1.28;
}

.tall-layout .whatsapp-button {
  left: 43px;
  top: 1970px;
  width: 938px;
  height: 131px;
  grid-template-columns: 170px 1fr 155px;
  border-radius: 68px;
}
.tall-layout .whatsapp-logo {
  width: 99px;
  height: 99px;
}
.tall-layout .whatsapp-button > span strong { font-size: 44px; }
.tall-layout .whatsapp-button > span small {
  margin-top: 12px;
  font-size: 22px;
}
.tall-layout .whatsapp-button > i {
  width: 92px;
  height: 92px;
}
.tall-layout .trust-row {
  left: 43px;
  top: 2116px;
  width: 938px;
  height: 94px;
  border-radius: 28px;
}
.tall-layout .trust-row article {
  height: 76px;
  grid-template-columns: 67px 1fr;
  gap: 10px;
  padding: 0 12px;
}
.tall-layout .trust-row svg {
  width: 62px;
  height: 62px;
}
.tall-layout .trust-row strong { font-size: 14px; }
.tall-layout .trust-row small {
  margin-top: 5px;
  font-size: 12px;
}
.tall-layout .toast {
  bottom: 105px;
  font-size: 21px;
}