/* —— Premium pet-care homepage hero (Swiper split) —— */
.sm-hero{
  --sm-hero-cream:#F7F1E8;
  --sm-hero-cream-deep:#EFE4D6;
  --sm-hero-sage:#6B8F71;
  --sm-hero-sage-deep:#3F5A46;
  --sm-hero-ink:#2F332F;
  --sm-hero-muted:#6B7168;
  --sm-hero-clay:#B8956C;
  --sm-hero-radius:clamp(1.25rem,3vw,2.75rem);
  --sm-hero-shadow:0 22px 48px rgba(58,52,46,.12);
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 55% at 8% 18%,rgba(107,143,113,.16),transparent 58%),
    radial-gradient(ellipse 55% 45% at 92% 12%,rgba(184,149,108,.18),transparent 55%),
    radial-gradient(ellipse 50% 40% at 70% 90%,rgba(212,184,160,.2),transparent 60%),
    linear-gradient(165deg,var(--sm-hero-cream) 0%,#FBF7F2 42%,var(--sm-hero-cream-deep) 100%);
  color:var(--sm-hero-ink);
  padding:calc(var(--sm-header-h,72px) + 1.25rem) 0 5.5rem;
}
.sm-hero__atmosphere{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  opacity:.045;
  mix-blend-mode:multiply;
}
.sm-hero__atmosphere:before,
.sm-hero__atmosphere:after{
  content:"";position:absolute;border-radius:50%;
  filter:blur(2px);
}
.sm-hero__atmosphere:before{
  width:min(42vw,380px);height:min(42vw,380px);
  left:-8%;top:18%;
  background:radial-gradient(circle,rgba(107,143,113,.14),transparent 68%);
}
.sm-hero__atmosphere:after{
  width:min(36vw,320px);height:min(36vw,320px);
  right:-6%;bottom:10%;
  background:radial-gradient(circle,rgba(184,149,108,.16),transparent 70%);
}

.sm-hero-swiper{
  position:relative;z-index:1;width:100%;
  overflow:hidden;
}
.sm-hero-swiper .swiper-slide{height:auto}

.sm-hero__layout{
  display:grid;
  grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  min-height:calc(100vh - var(--sm-header-h,72px) - 6.5rem);
  min-height:calc(100svh - var(--sm-header-h,72px) - 6.5rem);
}

.sm-hero__copy{
  position:relative;z-index:2;
  max-width:34rem;
  padding-block:clamp(0.5rem,2vw,1rem);
}
.sm-hero__eyebrow{
  margin:0 0 1rem;
  font:800 .72rem/1.3 Nunito,sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sm-hero-sage);
}
.sm-hero__title{
  margin:0;
  font-size:clamp(1.85rem,4.4vw,3.35rem);
  line-height:1.22;
  font-weight:800;
  letter-spacing:.02em;
  text-wrap:balance;
  color:var(--sm-hero-ink);
}
.sm-hero__lead{
  margin:1.15rem 0 0;
  font-size:clamp(.92rem,1.5vw,1.08rem);
  line-height:1.85;
  color:var(--sm-hero-muted);
  max-width:32rem;
}
.sm-hero__actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.15rem 1.5rem;
  margin-top:1.75rem;
}
.sm-hero__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;min-width:44px;
  padding:.85rem 1.35rem;
  border-radius:999px;
  background:var(--sm-hero-sage);
  color:#FFFCFA;
  font-weight:700;
  box-shadow:0 14px 28px rgba(63,90,70,.22);
  transition:transform .3s var(--sm-ease,cubic-bezier(.22,.7,.2,1)),background .3s,box-shadow .3s;
}
.sm-hero__btn:hover{
  background:var(--sm-hero-sage-deep);
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(63,90,70,.28);
}
.sm-hero__btn span{transition:transform .25s}
.sm-hero__btn:hover span{transform:translateX(3px)}
.sm-hero__link{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:.9rem;font-weight:700;
  color:var(--sm-hero-sage-deep);
  border-bottom:1px solid rgba(107,143,113,.45);
  transition:color .25s,border-color .25s,gap .25s;
}
.sm-hero__link:hover{
  color:var(--sm-hero-ink);
  border-color:var(--sm-hero-ink);
}

/* Image cluster */
.sm-hero__visual{position:relative;z-index:1}
.sm-hero__cluster{
  position:relative;
  width:100%;
  max-width:34rem;
  margin-inline:auto;
  aspect-ratio:1 / 1.05;
  min-height:min(58vh,520px);
}
.sm-hero__frame{
  margin:0;overflow:hidden;
  position:absolute;
  box-shadow:var(--sm-hero-shadow);
  background:#e8e0d4;
}
.sm-hero__frame img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);
  transition:transform .7s var(--sm-ease,cubic-bezier(.22,.7,.2,1));
}
.sm-hero-swiper .swiper-slide-active .sm-hero__frame img{transform:scale(1.1)}
.sm-hero__frame--main{
  inset:6% 8% 18% 0;
  border-radius:var(--sm-hero-radius) calc(var(--sm-hero-radius) * 1.55) var(--sm-hero-radius) calc(var(--sm-hero-radius) * 1.15);
  z-index:1;
}
.sm-hero__frame--side{
  width:42%;height:34%;
  right:0;bottom:4%;
  border-radius:calc(var(--sm-hero-radius) * 1.2) var(--sm-hero-radius) calc(var(--sm-hero-radius) * 1.4) var(--sm-hero-radius);
  z-index:3;
  box-shadow:0 18px 40px rgba(58,52,46,.16);
}
.sm-hero__frame--accent{
  width:28%;height:28%;
  left:4%;bottom:10%;
  border-radius:50%;
  z-index:2;
  border:4px solid rgba(255,252,250,.92);
}

.sm-hero__float{
  position:absolute;z-index:4;
  padding:.55rem .9rem;
  border-radius:999px;
  background:rgba(255,252,250,.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(107,143,113,.18);
  box-shadow:0 12px 28px rgba(58,52,46,.1);
  font:700 .68rem/1.2 Nunito,"Noto Sans JP",sans-serif;
  letter-spacing:.08em;
  color:var(--sm-hero-sage-deep);
  white-space:nowrap;
  pointer-events:none;
}
.sm-hero__float--a{top:4%;right:6%;animation:sm-hero-float 5.5s ease-in-out infinite}
.sm-hero__float--b{top:38%;left:-2%;animation:sm-hero-float 6.2s ease-in-out .4s infinite}
.sm-hero__float--c{bottom:38%;right:-2%;animation:sm-hero-float 5.8s ease-in-out .8s infinite}

.sm-hero__badge{
  position:absolute;z-index:5;
  top:8%;left:8%;
  width:5.6rem;height:5.6rem;
  border-radius:50%;
  display:grid;place-content:center;text-align:center;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,252,250,.55),transparent 55%),
    linear-gradient(145deg,var(--sm-hero-sage) 0%,var(--sm-hero-sage-deep) 100%);
  color:#FFFCFA;
  box-shadow:0 16px 32px rgba(63,90,70,.28);
  border:3px solid rgba(255,252,250,.55);
  transform:rotate(-8deg);
  pointer-events:none;
}
.sm-hero__badge span{
  display:block;
  font:700 .58rem/1 Nunito,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;opacity:.85;
}
.sm-hero__badge strong{
  display:block;margin-top:.2rem;
  font:800 .78rem/1.1 Nunito,sans-serif;
  letter-spacing:.04em;
}

@keyframes sm-hero-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* Slide enter: text fade/slide */
.sm-hero-swiper .swiper-slide .sm-hero__copy > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--sm-ease,cubic-bezier(.22,.7,.2,1)),transform .7s var(--sm-ease,cubic-bezier(.22,.7,.2,1));
}
.sm-hero-swiper .swiper-slide-active .sm-hero__copy > *{opacity:1;transform:none}
.sm-hero-swiper .swiper-slide-active .sm-hero__eyebrow{transition-delay:.05s}
.sm-hero-swiper .swiper-slide-active .sm-hero__title{transition-delay:.12s}
.sm-hero-swiper .swiper-slide-active .sm-hero__lead{transition-delay:.2s}
.sm-hero-swiper .swiper-slide-active .sm-hero__actions{transition-delay:.28s}

/* Chrome controls */
.sm-hero__chrome{
  position:absolute;z-index:5;
  left:0;right:0;bottom:1.25rem;
  display:grid;
  grid-template-columns:1fr auto 1.4fr auto;
  align-items:center;
  gap:1rem 1.25rem;
  pointer-events:none;
}
.sm-hero__chrome > *{pointer-events:auto}
.sm-hero__brand{
  margin:0;
  display:flex;flex-direction:column;gap:.2rem;
  font:800 .78rem/1.1 Nunito,sans-serif;
  letter-spacing:.14em;
  color:var(--sm-hero-sage-deep);
}
.sm-hero__brand small{
  font:700 .62rem/1.2 Nunito,"Noto Sans JP",sans-serif;
  letter-spacing:.12em;
  color:var(--sm-hero-muted);
}
.sm-hero__index{
  margin:0;
  display:inline-flex;align-items:baseline;gap:.35rem;
  font:800 .85rem/1 Nunito,sans-serif;
  letter-spacing:.08em;
  color:var(--sm-hero-ink);
}
.sm-hero__index span[aria-hidden]{opacity:.4;font-weight:600}
.sm-hero__progress{
  display:flex;align-items:center;gap:.65rem;
  font:700 .68rem/1 Nunito,sans-serif;
  letter-spacing:.1em;
  color:var(--sm-hero-muted);
  justify-self:center;
  width:min(100%,16rem);
}
.sm-hero__progress-track{
  flex:1;height:3px;border-radius:999px;
  background:rgba(107,143,113,.2);
  overflow:hidden;
}
.sm-hero__progress-fill{
  height:100%;width:0%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--sm-hero-sage),var(--sm-hero-clay));
  transform-origin:left center;
}
.sm-hero__nav{display:flex;gap:.55rem;justify-self:end}
.sm-hero__nav-btn{
  width:48px;height:48px;min-width:44px;min-height:44px;
  border-radius:50%;
  border:1px solid rgba(107,143,113,.28);
  background:rgba(255,252,250,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--sm-hero-sage-deep);
  font-size:1.35rem;line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(58,52,46,.08);
  transition:background .25s,transform .25s,border-color .25s,box-shadow .25s;
}
.sm-hero__nav-btn:hover{
  background:#fff;
  border-color:var(--sm-hero-sage);
  transform:scale(1.04);
  box-shadow:0 14px 28px rgba(58,52,46,.12);
}
.sm-hero__nav-btn:focus-visible{
  outline:2px solid var(--sm-hero-sage);
  outline-offset:3px;
}

@media(max-width:980px){
  .sm-hero{
    min-height:80vh;
    min-height:80svh;
    padding:calc(var(--sm-header-h,72px) + .75rem) 0 5.75rem;
  }
  .sm-hero__layout{
    grid-template-columns:1fr;
    gap:1.5rem;
    min-height:0;
  }
  .sm-hero__visual{order:-1}
  .sm-hero__cluster{
    max-width:26rem;
    min-height:min(42vh,360px);
    aspect-ratio:1 / .95;
  }
  .sm-hero__copy{max-width:none;padding-block:0}
  .sm-hero__float--b{left:0}
  .sm-hero__float--c{right:0;bottom:42%}
  .sm-hero__chrome{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand nav"
      "index index"
      "progress progress";
    gap:.65rem .85rem;
    bottom:1rem;
  }
  .sm-hero__brand{grid-area:brand}
  .sm-hero__nav{grid-area:nav}
  .sm-hero__index{grid-area:index}
  .sm-hero__progress{grid-area:progress;width:100%;justify-self:stretch}
}

@media(max-width:640px){
  .sm-hero__title{font-size:clamp(1.65rem,7.2vw,2.15rem)}
  .sm-hero__actions{flex-direction:column;align-items:flex-start;gap:1rem}
  .sm-hero__btn{width:100%;justify-content:center}
  .sm-hero__cluster{min-height:280px}
  .sm-hero__float{font-size:.62rem;padding:.45rem .7rem}
  .sm-hero__badge{width:4.6rem;height:4.6rem;top:4%;left:4%}
  .sm-hero__badge strong{font-size:.68rem}
  .sm-hero__frame--accent{width:24%;height:24%}
}

@media(prefers-reduced-motion:reduce){
  .sm-hero__float,
  .sm-hero__float--a,
  .sm-hero__float--b,
  .sm-hero__float--c{animation:none}
  .sm-hero__frame img,
  .sm-hero-swiper .swiper-slide-active .sm-hero__frame img{
    transform:none!important;transition:none!important;
  }
  .sm-hero-swiper .swiper-slide .sm-hero__copy > *,
  .sm-hero-swiper .swiper-slide-active .sm-hero__copy > *{
    opacity:1!important;transform:none!important;transition:none!important;
  }
}