:root{
  --pc-ink:#2b211d;
  --pc-copy:#655851;
  --pc-cream:#fffaf6;
  --pc-peach:#ffe9dc;
  --pc-orange:#f2672c;
  --pc-orange-deep:#c94616;
  --pc-border:#eaded6;
  --pc-shadow:0 16px 45px rgba(74,43,27,.08);
  --pc-shadow-hover:0 22px 55px rgba(74,43,27,.13);
}

body{
  color:var(--pc-ink);
  background:
    radial-gradient(circle at 100% 0,rgba(255,193,147,.15),transparent 26rem),
    linear-gradient(180deg,#fffdfb 0%,#fbf8f5 100%);
}

.site-header{
  background:rgba(255,255,255,.92);
  border-color:rgba(234,222,214,.9);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 5px 25px rgba(64,39,25,.04);
}

.header-inner{padding-top:12px;padding-bottom:12px}
.globe-btn,.mobile-quick-nav a{box-shadow:0 5px 16px rgba(65,40,26,.04)}
.desktop-nav a{position:relative}
.desktop-nav a:not(.nav-cta):after{
  content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:var(--accent);transition:right .2s ease;
}
.desktop-nav a:not(.nav-cta):hover:after,.desktop-nav a.active-link:after{right:0}
.nav-cta{box-shadow:0 8px 18px rgba(17,17,17,.13)}

.page{padding-top:2px}
.card{
  border-color:var(--pc-border);
  box-shadow:var(--pc-shadow);
}
.section-title{color:var(--pc-ink)}
.section-copy{color:var(--pc-copy)}
.section-kicker{
  text-align:center;color:var(--accent-dark);font-size:12px;font-weight:900;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:8px;
}

.home-hero{
  text-align:left;padding:28px 18px;
  background:
    radial-gradient(circle at 88% 12%,rgba(255,176,116,.27),transparent 30%),
    linear-gradient(145deg,#fff 0%,#fff8f3 100%);
}
.home-hero .hero-inner{display:grid;gap:30px;align-items:center}
.home-hero h1,.home-hero .hero-copy{margin-left:0;text-align:left}
.home-hero h1{font-size:36px;max-width:680px}
.home-hero .hero-copy{font-size:15.5px;max-width:660px}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;
  padding:7px 11px;border-radius:999px;background:var(--orange-soft);
  color:var(--orange-dark);font-size:12px;font-weight:900;
}
.hero-service-chips{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0 19px}
.hero-service-chips span{
  padding:6px 10px;border:1px solid #f0d8ca;border-radius:999px;
  background:rgba(255,255,255,.84);font-size:11.5px;font-weight:850;color:#664c3f;
}
.hero-cta-row{margin-top:4px}
.hero-cta-row .btn-brand{box-shadow:0 12px 28px rgba(223,79,31,.22)}
.home-hero .trust-row{
  margin:20px 0 0;max-width:660px;border:0;padding:0;
  grid-template-columns:1fr 1fr;text-align:left;
}
.home-hero .trust-row span{
  justify-content:flex-start;background:rgba(255,255,255,.75);
  border:1px solid var(--pc-border);border-radius:12px;padding:9px 10px;
  font-size:11.5px;
}
.home-hero-visual{
  position:relative;min-height:390px;max-width:380px;width:100%;margin:0 auto;
}
.phone-stage{
  position:absolute;background:#fff;border:1px solid var(--pc-border);
  border-radius:28px;padding:10px 10px 0;overflow:hidden;
  box-shadow:0 24px 55px rgba(67,40,24,.16);
}
.phone-stage img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:20px 20px 0 0}
.phone-stage-main{width:205px;height:390px;left:15px;top:0;z-index:2;transform:rotate(-2deg)}
.phone-stage-side{width:172px;height:330px;right:6px;top:40px;z-index:1;transform:rotate(4deg);opacity:.95}
.hero-bubble{
  position:absolute;z-index:4;display:flex;align-items:center;gap:7px;
  padding:10px 12px;border:1px solid var(--pc-border);border-radius:14px;
  background:#fff;box-shadow:0 12px 28px rgba(68,42,26,.13);
  font-size:11px;font-weight:900;color:#5d473b;
}
.hero-bubble i{color:var(--orange)}
.hero-bubble-top{right:0;top:8px}
.hero-bubble-bottom{left:0;bottom:5px}

.grid-5{grid-template-columns:repeat(2,1fr)}
.metric{background:linear-gradient(180deg,#fff,#fffaf7);padding:20px 10px}
.metric h3{font-size:30px}
.metric:last-child{grid-column:1/-1}

.service-card-grid{display:grid;gap:10px}
.service-card{
  display:grid;grid-template-columns:44px 1fr;gap:13px;align-items:start;
  padding:17px;border:1px solid var(--pc-border);border-radius:18px;
  background:linear-gradient(180deg,#fff,#fffaf7);
}
.service-card>i{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  color:var(--accent-dark);background:var(--accent-soft);font-size:17px;
}
.service-card h3{font-size:15.5px;font-weight:900;margin-bottom:4px}
.service-card p{font-size:13.2px;line-height:1.58;color:var(--pc-copy)}

.instagram-section{
  overflow:hidden;background:
    radial-gradient(circle at 95% 5%,rgba(231,60,126,.11),transparent 23rem),
    linear-gradient(145deg,#fff,#fff9f5);
}
.instagram-copy{display:grid;grid-template-columns:50px 1fr;gap:14px;align-items:start}
.instagram-copy .section-title,.instagram-copy .section-copy,.instagram-copy .section-kicker{text-align:left;margin-left:0}
.instagram-copy .section-copy{margin-bottom:16px}
.instagram-mark{
  width:50px;height:50px;border-radius:16px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,#ff7a18,#e73c7e,#7d3cbd);
  font-size:22px;box-shadow:0 12px 25px rgba(206,60,108,.22);
}
.instagram-btn{
  width:auto;display:inline-flex;color:#fff;
  background:linear-gradient(135deg,#ff7a18,#e73c7e,#7d3cbd);
}
.instagram-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.ig-tile{
  position:relative;min-height:180px;border-radius:18px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;gap:6px;text-align:left;overflow:hidden;
  padding:16px;text-decoration:none;color:#4f362e;border:1px solid rgba(231,216,207,.9);
  box-shadow:0 10px 24px rgba(75,45,32,.08);isolation:isolate;
  transition:transform .2s ease,box-shadow .2s ease;
}
.ig-tile::before,.ig-tile::after{content:"";position:absolute;border-radius:50%;z-index:-1}
.ig-tile::before{width:120px;height:120px;right:-28px;top:-25px;background:rgba(255,255,255,.46)}
.ig-tile::after{width:74px;height:74px;left:-24px;bottom:-22px;background:rgba(255,255,255,.35)}
.ig-tile-pets{background:linear-gradient(145deg,#fff0e7 0%,#ffd8c3 100%)}
.ig-tile-tips{background:linear-gradient(145deg,#fff7dc 0%,#ffe9a8 100%)}
.ig-tile-sitters{background:linear-gradient(145deg,#ffe8ed 0%,#ffc8d5 100%)}
.ig-tile-tag{
  position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:5px;
  padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.72);
  font-size:9px;font-weight:900;color:#6b4b42;
}
.ig-tile-tag i{font-size:11px;color:#e94b5f}
.ig-tile-icon{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;
  background:rgba(255,255,255,.82);box-shadow:0 8px 18px rgba(75,45,32,.08);
}
.ig-tile-icon i{font-size:21px;color:var(--orange)}
.ig-tile strong{font-size:14px;line-height:1.25}
.ig-tile small{font-size:10px;line-height:1.45;font-weight:700;color:#735d54}
.ig-tile:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(75,45,32,.13)}

.feature,.step,.flow-item,.review,.benefit-card,.expectation-panel{
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.feature:hover,.step:hover,.flow-item:hover,.review:hover,.benefit-card:hover,.expectation-panel:hover{
  transform:translateY(-2px);border-color:#e5cbbc;box-shadow:var(--pc-shadow-hover);
}
.feature i{box-shadow:inset 0 0 0 1px rgba(219,93,39,.08)}
.band{box-shadow:0 18px 42px rgba(177,70,27,.2)}
.faq-card{transition:border-color .2s ease,box-shadow .2s ease}
.faq-card[open]{border-color:#e7c9b7;box-shadow:0 10px 25px rgba(62,39,25,.05)}
.faq-answer{background:#fffdfb}

.footer{
  margin-top:34px;padding:32px 18px;border-top:1px solid var(--pc-border);
  background:rgba(255,255,255,.55);border-radius:22px;
}
.footer .logo{margin-left:auto;margin-right:auto}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px}

@media(max-width:720px){
  body{padding-bottom:92px!important}
  .page{padding-left:10px;padding-right:10px;padding-bottom:30px}
  .logo{width:148px}
  .mobile-quick-nav{position:sticky;top:67px;z-index:20;background:rgba(252,250,248,.94);padding:9px 2px;backdrop-filter:blur(12px)}
  .card{padding:27px 15px;border-radius:22px}
  .section{margin-top:14px}
  .section-title{font-size:25px}
  .hero{border-radius:23px}
  .floating-cta{
    position:fixed!important;left:12px!important;right:12px!important;bottom:10px!important;
    width:auto!important;max-width:none!important;padding:6px!important;
    display:grid!important;grid-template-columns:1fr 1fr 58px!important;gap:6px!important;
    border-radius:20px!important;background:rgba(255,255,255,.94)!important;
    border:1px solid var(--pc-border)!important;box-shadow:0 16px 45px rgba(49,31,21,.2)!important;
    backdrop-filter:blur(16px)!important;
  }
  .floating-cta a{
    min-height:48px!important;height:48px!important;width:100%!important;
    padding:8px!important;font-size:12px!important;border-radius:15px!important;
    box-shadow:none!important;
  }
  .floating-cta a.ig{font-size:0!important}
  .floating-cta a.ig i{font-size:20px!important}
  .sitter-proof{grid-template-columns:1fr 1fr}
}

@media(min-width:721px){
  .persona-switch{width:min(560px,100%)}
  .persona-switch .persona-btn{flex:1;text-align:center}
  .home-hero{padding:48px 42px}
  .home-hero .hero-inner{grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);gap:34px}
  .home-hero h1{font-size:49px}
  .home-hero .hero-copy{font-size:17px}
  .hero-cta-row{grid-template-columns:auto auto;justify-content:start}
  .hero-cta-row .btn{width:auto;min-width:190px}
  .home-hero-visual{min-height:440px}
  .phone-stage-main{width:225px;height:430px}
  .phone-stage-side{width:188px;height:360px}
  .service-card-grid{grid-template-columns:repeat(2,1fr)}
  .instagram-section{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center}
  .instagram-preview{margin-top:0}
  .grid-5{grid-template-columns:repeat(5,1fr)}
  .metric:last-child{grid-column:auto}
  .floating-cta{width:180px!important}
}

@media(min-width:1100px){
  .page{padding-left:0;padding-right:0}
  .home-hero{padding:58px 62px}
  .home-hero h1{font-size:58px}
  .service-card-grid{grid-template-columns:repeat(3,1fr)}
  .instagram-section{gap:50px}
  .card{padding:46px}
  .section-title{font-size:36px}
  .section-copy{font-size:15.5px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}
