/* ROXI / HERO — estilos específicos */
.hero {
  background:linear-gradient(115deg,var(--color-surface-soft) 0%,var(--swatch-ffedf3) 53%,var(--swatch-f9d8e3) 100%);
  position:relative;
  overflow:hidden
}
.hero::before {
  content:"";
  position:absolute;
  left:-140px;
  top:-140px;
  width:390px;
  height:390px;
  border:1px solid var(--color-white);
  border-radius:50%;
  box-shadow:0 0 0 65px var(--swatch-ffffff1e),0 0 0 125px var(--swatch-ffffff16)
}
.hero::after {
  content:"";
  position:absolute;
  right:-130px;
  bottom:-230px;
  width:500px;
  height:500px;
  background:var(--swatch-fff8);
  filter:blur(50px);
  border-radius:50%
}
.hero-inner {
  position:relative;
  z-index:1;
  min-height:525px;
  display:grid;
  grid-template-columns:1.03fr .97fr;
  align-items:center;
  gap:32px
}
.hero-copy {
  padding:40px 0 55px
}
.hero-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--swatch-fff9);
  color:var(--pink-dark);
  border:1px solid var(--color-white);
  border-radius:999px;
  font-size:var(--font-size-10);
  letter-spacing:1.2px;
  font-weight:900;
  padding:10px 15px;
  text-transform:uppercase
}
.hero-pill i {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--pink)
}
.hero h1 {
  font-family:var(--font-heading);
  font-weight:800;
  font-size:clamp(51px,5.5vw,79px);
  letter-spacing:-4.5px;
  line-height:1.01;
  margin:22px 0 17px;
  max-width:590px
}
.hero h1 span {
  font-family:var(--font-display);
  color:var(--pink);
  font-style:italic;
  font-weight:600
}
.hero p {
  font-size:var(--font-size-15);
  line-height:1.82;
  color:var(--swatch-74636e);
  margin:0 0 30px;
  max-width:475px
}
.btn {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding:16px 24px;
  border:0;
  font-size:var(--font-size-13);
  font-weight:900;
  white-space:nowrap;
  transition:background .2s,transform .2s,box-shadow .2s
}
.btn:hover {
  transform:translateY(-2px)
}
.btn-primary {
  background:var(--pink);
  color:var(--color-white);
  box-shadow:0 12px 23px var(--swatch-ea367727)
}
.btn-primary:hover {
  background:var(--pink-dark)
}
.btn-outline {
  background:white;
  color:var(--pink);
  border:1px solid var(--swatch-f5b8cf)
}
.btn-outline:hover {
  background:var(--swatch-fff3f7)
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:11px
}
.hero-proof {
  display:flex;
  gap:23px;
  align-items:center;
  margin-top:31px;
  color:var(--swatch-755e6b);
  font-size:var(--font-size-11);
  font-weight:750
}
.hero-proof span {
  display:inline-flex;
  gap:8px;
  align-items:center
}
.hero-proof svg {
  color:var(--pink)
}
.hero-visual {
  height:100%;
  min-height:525px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center
}
.halo {
  position:absolute;
  inset:40px 15px 40px 30px;
  border-radius:51% 49% 38% 62% / 43% 47% 53% 57%;
  background:var(--swatch-ffffff52)
}
.hero-art {
  width:min(485px,100%);
  height:474px;
  position:relative;
  filter:drop-shadow(0 19px 25px var(--swatch-bb5f7c21))
}
.hero-art img {
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:32px;
  mix-blend-mode:multiply
}
.art-ring {
  position:absolute;
  width:93%;
  height:93%;
  border:2px solid var(--swatch-fff9);
  border-radius:50%;
  transform:rotate(-16deg);
  pointer-events:none
}
.hero-sticker {
  position:absolute;
  z-index:2;
  right:-12px;
  top:61px;
  width:119px;
  height:119px;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  background:var(--color-white);
  box-shadow:0 13px 26px var(--swatch-ba6c8529);
  border:1px solid var(--swatch-f8d3df);
  border-radius:50%;
  transform:rotate(11deg);
  text-align:center;
  color:var(--pink);
  font-family:var(--font-heading);
  font-weight:900;
  font-size:var(--font-size-17);
  line-height:1.08
}
.hero-sticker small {
  font:800 9px var(--font-body);
  letter-spacing:1px;
  color:var(--swatch-ad8192);
  margin-bottom:5px
}
.hero-label {
  position:absolute;
  bottom:78px;
  left:-8px;
  display:flex;
  gap:8px;
  align-items:center;
  background:var(--color-white);
  border:1px solid var(--swatch-fae0ea);
  padding:11px 14px;
  box-shadow:var(--shadow);
  border-radius:13px;
  font-weight:900;
  font-size:var(--font-size-11);
  color:var(--swatch-67505d)
}
.hero-dots {
  display:flex;
  gap:7px;
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%)
}
.hero-dots button {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--swatch-d8b3c1);
  border:0;
  padding:0
}
.hero-dots button.active {
  background:var(--pink);
  width:25px;
  border-radius:8px
}