:root {
  --ink: #080808;
  --paper: #fffefa;
  --pink: #f3a6cc;
  --violet: #a95ce9;
  --yellow: #ffe429;
  --green: #00c969;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
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;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 48% 45%, rgb(255 245 238 / 64%), transparent 34%), var(--paper);
}

.brand-mark {
  position: absolute;
  z-index: 5;
  top: clamp(30px, 5.2vh, 54px);
  left: 50%;
  width: clamp(220px, 18vw, 300px);
  height: clamp(76px, 8vw, 112px);
  transform: translateX(-50%);
}
.brand-logo { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.link-card {
  position: absolute;
  z-index: 4;
  top: clamp(190px, 23vh, 230px);
  left: clamp(48px, 8.8vw, 150px);
  width: min(680px, 45vw);
}
.intro h1 { margin: 0; font-size: clamp(2.45rem, 3.55vw, 3.75rem); font-weight: 900; line-height: .98; letter-spacing: -.055em; }
.intro h1 span {
  display: block;
  margin-top: 7px;
  background: linear-gradient(98deg, #9557ec, #c563df 56%, #f473a8);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.intro p { margin: 17px 0 22px; color: #68686c; font-size: clamp(1.15rem, 1.6vw, 1.65rem); line-height: 1.25; }

.links { display: grid; width: min(530px, 100%); gap: 9px; }
.link-button {
  display: grid;
  width: 100%;
  min-height: clamp(57px, 7.2vh, 68px);
  grid-template-columns: 56px 1fr 25px;
  align-items: center;
  gap: 10px;
  padding: 9px 27px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 7px 0 rgb(0 0 0 / 4%);
  transition: transform .18s ease, box-shadow .18s ease;
}
.link-button:hover, .link-button:focus-visible { transform: translateY(-2px); box-shadow: 0 11px 20px rgb(0 0 0 / 11%); outline: none; }
.button--store { color: #fff; background: #080808; }
.button--market { background: var(--yellow); }
.button--social { background: linear-gradient(98deg, #ffb8d9, #c5adff); }
.button--whatsapp { color: #fff; background: var(--green); }
.button--contact { border: 2px solid #111; background: rgb(255 255 255 / 88%); }
.button-icon { display: grid; place-items: center; }
.button-icon i { font-size: 37px; line-height: 1; }
.button-icon img { width: 43px; height: 36px; object-fit: contain; }
.button-copy { display: flex; flex-direction: column; }
.button-copy strong { font-size: 1.22rem; font-weight: 900; line-height: 1.08; text-transform: uppercase; }
.button-copy small { margin-top: 3px; font-size: .86rem; opacity: .8; }
.arrow { display: inline-grid; place-items: center; width: 25px; height: 25px; font-size: 25px; line-height: 1; transition: transform .18s ease; }
.button--contact[aria-expanded="true"] .arrow { transform: rotate(90deg); }

.pets-figure { position: absolute; z-index: 3; right: -1.5vw; bottom: 5.5vh; width: min(70vw, 1120px); height: min(69vh, 650px); margin: 0; }
.pets-image { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; filter: drop-shadow(0 18px 28px rgb(98 55 24 / 9%)); }

.pastel-waves {
  position: absolute;
  z-index: 1;
  right: -9vw;
  bottom: 8vh;
  width: 76vw;
  height: 52vh;
  border-radius: 49% 0 0 38% / 48% 0 0 43%;
  background: radial-gradient(ellipse at 22% 40%, #f9d6e9 0 34%, transparent 35%), radial-gradient(ellipse at 72% 43%, #e7d1ff 0 44%, transparent 45%), linear-gradient(125deg, #ffe6ef 15%, #eccfff 86%);
  transform: rotate(-2deg);
  opacity: .86;
}
.corner-shape { position: absolute; z-index: 1; top: -135px; left: -100px; width: 460px; height: 340px; border-radius: 0 0 78% 0; background: linear-gradient(135deg, #fee7ed, #f6cfe6); opacity: .78; }

.paw-cluster { position: absolute; z-index: 2; display: flex; align-items: flex-end; gap: 3px; color: #f19ac7; opacity: .8; }
.paw-cluster i:first-child { font-size: 39px; transform: rotate(-18deg); }
.paw-cluster i:last-child { font-size: 51px; transform: rotate(10deg) translateY(13px); }
.paw-cluster--top-left { top: 9%; left: 3.7%; }
.paw-cluster--top-right { top: 18%; right: 3%; }
.paw-cluster--middle { top: 41%; right: 15%; transform: scale(.8) rotate(-8deg); }
.paw-cluster--bottom { bottom: 7%; left: 3.2%; }

.footer { position: absolute; z-index: 6; bottom: 26px; left: 50%; display: grid; justify-items: center; gap: 4px; transform: translateX(-50%); text-align: center; line-height: 1.2; white-space: nowrap; }
.footer strong { font-size: 1.05rem; }
.footer > span { color: #77787c; font-size: 1rem; }
.contact-details { position: absolute; bottom: 48px; width: min(420px, 88vw); display: grid; gap: 6px; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 18px 55px rgb(54 32 85 / 15%); white-space: normal; }
.contact-details[hidden] { display: none; }
.contact-details a { color: inherit; font-weight: 800; }

@media (min-width: 901px) {
  .page-shell { min-height: max(100svh, 900px); }
  .pets-figure {
    top: clamp(200px, 29vh, 285px);
    bottom: auto;
    height: min(570px, 46vw);
  }
}

@media (max-width: 900px) {
  .page-shell { min-height: 100svh; padding: 0 14px; }
  .brand-mark { top: 26px; width: 220px; height: 78px; }
  .link-card { position: relative; top: auto; left: auto; width: min(100%, 590px); margin: 132px auto 0; text-align: center; }
  .intro h1 { font-size: clamp(2.05rem, 8.6vw, 3.2rem); }
  .intro p { margin: 17px 0 23px; font-size: clamp(1.05rem, 4.2vw, 1.35rem); }
  .links { gap: 10px; }
  .link-button { min-height: 70px; grid-template-columns: 48px 1fr 24px; gap: 10px; padding: 9px 23px; }
  .button-icon i { font-size: 36px; }
  .button-icon img { width: 41px; height: 34px; }
  .button-copy strong { font-size: clamp(1rem, 4.9vw, 1.25rem); }
  .button-copy small { font-size: clamp(.75rem, 3.1vw, .9rem); }
  .pets-figure { position: relative; right: auto; bottom: auto; z-index: 3; width: calc(100% + 28px); height: clamp(320px, 61vw, 520px); margin: 38px -14px 0; }
  .pets-image { object-fit: cover; object-position: center bottom; }
  .pastel-waves { right: -18%; bottom: 4%; width: 140%; height: 42%; border-radius: 52% 45% 0 0 / 25% 22% 0 0; }
  .corner-shape { top: -85px; left: -105px; width: 300px; height: 250px; }
  .paw-cluster--top-left { top: 4%; left: 3%; transform: scale(.72); }
  .paw-cluster--top-right { top: 20%; right: 2%; transform: scale(.7); }
  .paw-cluster--middle { display: none; }
  .paw-cluster--bottom { bottom: 20%; left: 2%; transform: scale(.68); }
  .footer { position: relative; bottom: auto; left: auto; z-index: 6; margin: -2px 0 22px; transform: none; }
  .footer::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -16px;
    left: -10%;
    width: 120%;
    height: 90px;
    border-radius: 50% 50% 0 0 / 22px 22px 0 0;
    background: var(--paper);
  }
}

@media (max-width: 480px) {
  .brand-mark { top: 18px; width: 180px; height: 64px; }
  .link-card { margin-top: 98px; }
  .intro h1 { font-size: clamp(1.78rem, 8.3vw, 2.35rem); }
  .intro p { margin: 11px 0 14px; }
  .links { gap: 7px; }
  .link-button { min-height: 52px; grid-template-columns: 38px 1fr 19px; padding: 6px 18px; }
  .button-icon i { font-size: 31px; }
  .button-icon img { width: 36px; height: 30px; }
  .button-copy strong { font-size: clamp(.92rem, 4.8vw, 1.12rem); }
  .button-copy small { font-size: .72rem; }
  .pets-figure { height: 245px; margin-top: 12px; }
  .footer { margin-bottom: 17px; }
  .footer strong, .footer > span { font-size: .9rem; }
}

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