:root {
  --blue: #075f84;
  --teal: #07869a;
  --ink: #202027;
  --white: #fff;
  --shell: 1180px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--blue); }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: var(--blue); }
img, svg { display: block; max-width: 100%; }
.shell { width: min(calc(100% - 64px), var(--shell)); margin-inline: auto; }

.hero { position: relative; background: var(--blue); }
.hero__blue { height: 210px; background: var(--blue); }
.hero__card {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  min-height: 295px;
  padding: 34px 66px 40px;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: center;
  gap: clamp(34px, 5vw, 76px);
  background: var(--white);
  border-radius: 0 0 26px 26px;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}
.hero__logo { width: 100%; max-width: 260px; justify-self: center; }
h1 {
  margin: 0;
  color: var(--blue);
  text-align: center;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: .98;
  letter-spacing: .004em;
  text-wrap: balance;
}
h1 span { display: block; }
.hero__image {
  height: clamp(380px, 45vw, 560px);
  background: url("assets/pets.png") center 48% / cover no-repeat;
}

.intro { background: var(--blue); }
.intro__inner { padding: clamp(46px, 6vw, 76px) 34px clamp(42px, 6vw, 72px); }
.intro__text {
  max-width: 1040px;
  margin: 0 auto;
  color: var(--white);
  font-size: clamp(1.45rem, 2.35vw, 2.2rem);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -.018em;
}

.info-stage {
  position: relative;
  margin-top: clamp(74px, 8vw, 105px);
  padding: 0 24px 24px;
  background: var(--white);
}

.benefits-card {
  width: min(92%, 1060px);
  margin: 0 auto;
  transform: translateY(-34px);
  background: var(--white);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -7px 22px rgba(0,0,0,.05);
}

.benefits {
  padding: 38px 48px 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 28px;
}
.benefit { text-align: center; }
.benefit__icon { width: 92px; height: 92px; margin: 0 auto 12px; color: var(--blue); display: grid; place-items: center; }
.benefit__icon svg { width: 100%; height: 100%; overflow: visible; }
.benefit__icon path, .benefit__icon circle { fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.paws .paw { fill: var(--blue); stroke: none; }
.paws .muted { fill: #9b9b9b; }
.benefit__icon--money { font-size: 6.2rem; font-weight: 800; line-height: 1; }
.benefit h2 { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.45rem); line-height: 1.08; }
.contact { margin-top: -18px; padding: 14px 22px 20px; text-align: center; font-size: clamp(1.15rem, 1.9vw, 1.7rem); font-weight: 800; }
.contact p { margin: .22em 0; }
.contact a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact__soon { margin-top: .7em !important; font-size: .78em; font-weight: 400; }

@media (max-width: 900px) {
  .shell { width: min(calc(100% - 36px), var(--shell)); }
  .hero__blue { height: 185px; }
  .hero__card { min-height: 255px; padding: 26px 30px 32px; grid-template-columns: 210px minmax(0,1fr); gap: 26px; }
  h1 { font-size: clamp(2.3rem, 6.4vw, 3.8rem); }
  .hero__image { height: 430px; }
  .intro__inner { padding-inline: 18px; }
  .benefits { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 36px 22px; }
}

@media (max-width: 640px) {
  .shell { width: min(calc(100% - 20px), var(--shell)); }
  .hero__blue { height: 360px; }
  .hero__card { min-height: 360px; padding: 20px 20px 26px; grid-template-columns: 1fr; gap: 12px; border-radius: 0 0 20px 20px; }
  .hero__logo { max-width: 210px; }
  h1 { font-size: clamp(2.1rem, 10.4vw, 3.1rem); }
  h1 span { display: inline; }
  .hero__image { height: 330px; background-position: 52% center; }
  .intro__inner { width: 100%; padding: 34px 14px 36px; }
  .intro__text { font-size: clamp(1.22rem, 5vw, 1.55rem); }
  .info-stage { margin-top: 62px; padding: 0 10px 18px; }
  .benefits-card { width: 94%; transform: translateY(-24px); border-radius: 22px 22px 0 0; }
  .benefits { padding: 28px 12px 24px; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px 10px; }
  .benefit__icon { width: 72px; height: 72px; margin-bottom: 10px; }
  .benefit__icon--money { font-size: 4.8rem; }
  .benefit h2 { font-size: 1rem; }
  .contact { padding: 24px 12px 18px; font-size: 1.04rem; }
}