:root {
  --ink: #080808;
  --paper: #fffdf9;
  --violet: #a979ff;
  --pink: #ff8bb5;
  --blue: #bfe1ff;
  --yellow: #ffe32f;
  --green: #08c95d;
  --shadow: 0 18px 60px rgb(54 32 85 / 12%);
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Nunito", system-ui, sans-serif;
}

button, a { font: inherit; }

.page-shell {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 42px 24px 34px;
  isolation: isolate;
}

.link-card {
  position: relative;
  z-index: 3;
  width: min(100%, 660px);
  text-align: center;
}

.brand-mark {
  position: relative;
  width: clamp(220px, 22vw, 290px);
  height: clamp(82px, 8vw, 104px);
  margin: 0 auto 14px;
  overflow: hidden;
}

.brand-logo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  mix-blend-mode: multiply;
}

.intro h1 {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(2rem, 3.65vw, 3.35rem);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.055em;
}

.intro h1 span {
  display: block;
  margin-top: 7px;
  color: var(--violet);
  background: linear-gradient(100deg, #8b5cf6, #be68e6 55%, #ff799c);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.intro p {
  margin: 18px 0 24px;
  color: #505050;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}

.links { display: grid; gap: 12px; }

.link-button {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 999px;
  padding: 10px 26px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 7px 0 rgb(0 0 0 / 5%);
  transition: transform .18s ease, box-shadow .18s ease;
}

.link-button:hover,
.link-button:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px rgb(0 0 0 / 12%);
  outline: none;
}

.button--store { color: white; background: var(--ink); }
.button--market { background: var(--yellow); }
.button--social { background: linear-gradient(100deg, #ffb8da, #b9aaff); }
.button--whatsapp { color: white; background: var(--green); }
.button--contact { background: white; border: 2px solid var(--ink); }

.button-icon { display: grid; place-items: center; }
.button-icon svg { width: 39px; height: 39px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button-icon svg .fill { fill: currentColor; stroke: none; }
.button-copy { display: flex; flex-direction: column; }
.button-copy strong { font-size: 1.28rem; font-weight: 900; line-height: 1.1; text-transform: uppercase; }
.button-copy small { margin-top: 3px; font-size: .9rem; opacity: .78; }
.arrow { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.button--contact[aria-expanded="true"] .arrow { transform: rotate(90deg); }

.footer {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: 22px;
}

.footer strong { font-size: 1.05rem; }
.footer > span { color: #707070; }

.contact-details {
  width: 100%;
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding: 18px;
  border-radius: 24px;
  background: white;
  box-shadow: var(--shadow);
}

.contact-details[hidden] { display: none; }
.contact-details a { color: inherit; font-weight: 800; }

.blob { position: absolute; z-index: -1; width: 440px; aspect-ratio: 1; border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; filter: blur(.2px); opacity: .42; }
.blob--violet { top: -220px; left: -170px; background: #b89cff; transform: rotate(24deg); }
.blob--pink { right: -180px; bottom: -230px; background: #ffb5ce; transform: rotate(-18deg); }
.paw { position: absolute; z-index: 0; font-size: 54px; opacity: .36; filter: grayscale(1) sepia(1) hue-rotate(165deg) saturate(4); }
.paw--one { top: 8%; left: 8%; transform: rotate(-18deg); }
.paw--two { right: 7%; bottom: 14%; transform: rotate(15deg) scale(.7); }

.pet-figure {
  position: absolute;
  z-index: 2;
  bottom: -5%;
  width: clamp(270px, 29vw, 465px);
  height: min(68vh, 650px);
  margin: 0;
  pointer-events: none;
}

.pet-figure--dog { left: -4%; }
.pet-figure--cat { right: -4%; }

.pet {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 24px rgb(0 0 0 / 9%));
}

.pet--cat {
  object-fit: cover;
  object-position: 48% 18%;
  -webkit-mask-image: radial-gradient(ellipse 72% 69% at 50% 55%, #000 55%, transparent 82%);
  mask-image: radial-gradient(ellipse 72% 69% at 50% 55%, #000 55%, transparent 82%);
}

.pet-figure figcaption {
  position: absolute;
  top: 9%;
  z-index: 2;
  font-size: clamp(.95rem, 1.5vw, 1.25rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.12;
  transform: rotate(-8deg);
}

.pet-figure--dog figcaption { left: 43%; }
.pet-figure--cat figcaption { right: 48%; text-align: right; transform: rotate(7deg); }

@media (max-width: 1100px) {
  .pet-figure { width: 330px; opacity: .24; }
  .pet-figure--dog { left: -140px; }
  .pet-figure--cat { right: -140px; }
  .pet-figure figcaption { display: none; }
}

@media (max-width: 680px) {
  .page-shell { display: block; padding: 16px 12px 0; }
  .link-card { margin: 0 auto; }
  .brand-mark { width: 190px; height: 66px; margin-bottom: 8px; }
  .intro h1 { font-size: clamp(2rem, 9vw, 2.7rem); }
  .intro p { margin: 14px 0 19px; font-size: 1.05rem; }
  .links { gap: 10px; }
  .link-button { min-height: 68px; grid-template-columns: 44px 1fr 22px; gap: 9px; padding: 9px 20px; }
  .button-icon svg { width: 33px; height: 33px; }
  .button-copy strong { font-size: clamp(1rem, 5vw, 1.2rem); }
  .button-copy small { font-size: .78rem; }
  .footer { position: relative; z-index: 3; margin: 14px 0 0; padding-bottom: 165px; }
  .pet-figure { display: block; z-index: 1; width: 55vw; height: 225px; bottom: -24px; opacity: 1; }
  .pet-figure--dog { left: -15%; }
  .pet-figure--cat { right: -15%; }
  .pet-figure figcaption { display: none; }
  .pet--cat { -webkit-mask-image: radial-gradient(ellipse 70% 72% at 50% 52%, #000 52%, transparent 80%); mask-image: radial-gradient(ellipse 70% 72% at 50% 52%, #000 52%, transparent 80%); }
  .paw--one { top: 1%; left: -8px; font-size: 44px; }
  .paw--two { right: 2%; bottom: 12%; }
}

@media (max-width: 680px) and (max-height: 720px) {
  .brand-mark { width: 160px; height: 54px; margin-bottom: 4px; }
  .intro h1 { font-size: clamp(1.85rem, 8vw, 2.3rem); }
  .intro p { margin: 9px 0 13px; font-size: 1rem; }
  .links { gap: 7px; }
  .link-button { min-height: 58px; padding-top: 7px; padding-bottom: 7px; }
  .button-icon svg { width: 29px; height: 29px; }
  .button-copy strong { font-size: 1rem; }
  .button-copy small { font-size: .7rem; }
  .footer { margin-top: 10px; padding-bottom: 165px; font-size: .85rem; }
  .pet-figure { height: 205px; }
}

@media (prefers-reduced-motion: reduce) {
  .link-button, .arrow { transition: none; }
}