/* PetCompass brand layer (PetsVivo pv-* system, PetCompass logo lockup) for static landing pages. Light-only by design.
   Source of truth: pet-compass/src/styles/petsvivo.css (pv-* tokens) */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,600&family=Gochi+Hand&display=swap');

:root{
  --eggplant:#59326B; --eggplant-light:#702F8F; --eggplant-vivid:#A235D5;
  --rose-dark:#CE93E4; --rose-med:#E1BEEF; --rose-light:#EDD8F5; --rose-bg:#F8EFFC;
  --mustard:#FFD666; --mustard-vivid:#FFC933; --mustard-bg:#FFF8E6;
  --page-bg:#F7F6F3; --beige-med:#EFEDE7; --line:#E6E4DA; --grey-dark:#707070;
  --card-shadow:0 3px 10px rgba(89,50,107,.05);
  --lift-shadow:0 14px 30px rgba(89,50,107,.15);
  --mustard-glow:0 10px 22px rgba(255,201,51,.32);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --font-head:"Fredoka",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Nunito",ui-sans-serif,system-ui,sans-serif;
  --font-hand:"Gochi Hand",cursive;
}
html{color-scheme:light}
*{box-sizing:border-box;margin:0}
body{background:var(--page-bg);color:var(--eggplant);font:16px/1.5 var(--font-body);
     -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head)}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
header.site{position:sticky;top:0;z-index:200;background:rgba(247,246,243,.92);
            backdrop-filter:blur(8px);border-bottom:.5px solid var(--eggplant)}
header.site .bar{max-width:1280px;margin:0 auto;padding:13px 24px;
                 display:flex;justify-content:space-between;align-items:center;gap:18px}
header.site img{height:28px;width:auto;display:block}
.kicker{font-family:var(--font-hand);color:var(--eggplant-vivid);font-size:1.25rem}
h1.hero{font-weight:600;font-size:clamp(2.4rem,5.5vw,4.1rem);line-height:1.08;letter-spacing:-1.5px}
h1.hero em{font-style:normal;color:var(--eggplant-vivid)}
.lede{font-size:1.25rem;line-height:1.55;color:var(--grey-dark);max-width:56ch}
.btn{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:18px;
     background:var(--mustard);color:var(--eggplant);padding:15px 28px;border-radius:8px;
     text-decoration:none;transition:all .25s var(--bounce)}
.btn:hover{background:var(--mustard-vivid);transform:translateY(-3px);box-shadow:var(--mustard-glow)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.tile{background:#fff;border-radius:16px;padding:22px;box-shadow:var(--card-shadow);
      transition:all .25s var(--bounce)}
.tile:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:var(--lift-shadow)}
.tile h3{font-size:1.15rem;font-weight:600}
.tile p{margin-top:8px;color:var(--grey-dark);font-size:15px;line-height:1.5}
section.band{background:var(--rose-bg)}
footer.site{background:var(--eggplant);color:#fff;margin-top:64px}
footer.site .inner{max-width:1280px;margin:0 auto;padding:56px 24px 30px}
footer.site img{height:28px;width:auto}
footer.site p{color:var(--rose-dark);font-size:14px;line-height:1.6;max-width:260px;margin-top:14px}
footer.site .bottom{border-top:1.5px solid var(--eggplant-light);margin-top:36px;padding-top:18px;
                    display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
                    font-size:13px;color:var(--rose-dark)}
footer.site a{color:var(--rose-dark);text-decoration:none}
footer.site a:hover{color:#fff}
@media (prefers-reduced-motion: reduce){
  .btn,.tile{transition:none}
  .btn:hover,.tile:hover{transform:none}
}