
.hero-persona{
  position:relative;
  overflow:hidden;
  padding:clamp(4.6rem,7vw,7rem) 0 clamp(4rem,6vw,6rem);
  background:linear-gradient(115deg,#fbfdfc 0%,#f5faf9 42%,#edf4f5 100%);
}
.hero-persona::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 14% 18%, rgba(3,76,97,.10), transparent 28%),
    radial-gradient(circle at 84% 22%, rgba(1,42,54,.08), transparent 24%),
    linear-gradient(120deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  pointer-events:none;
}
.hero-persona::after{
  content:"";
  position:absolute;
  left:max(1rem,4vw);
  top:50%;
  width:min(34vw,360px);
  aspect-ratio:1;
  transform:translateY(-50%);
  background:url('images/vitagen-mark.png') center/contain no-repeat;
  opacity:.045;
  filter:grayscale(1);
  pointer-events:none;
}
.hero-persona .container,
.hero-persona-inner{position:relative;z-index:1;}
.hero-persona-inner{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(320px,.96fr);
  align-items:center;
  gap:clamp(2rem,4vw,4.5rem);
}
.hero-persona-copy{max-width:43rem;}
.hero-persona-kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:1rem;
  padding:.5rem .9rem;
  border:1px solid rgba(3,76,97,.14);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:#034c61;
  font-size:.88rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.hero-persona-kicker::before{
  content:"";
  width:.55rem;
  height:.55rem;
  border-radius:50%;
  background:#0d8d7d;
  box-shadow:0 0 0 6px rgba(13,141,125,.12);
}
.hero-persona-copy h1{
  margin:0;
  font-size:clamp(2.8rem,5.8vw,5.4rem);
  line-height:.96;
  letter-spacing:-.04em;
  color:#123e49;
}
.hero-persona-copy .hero-subline,
.hero-persona-copy .detail-intro,
.hero-persona-text{
  margin:1.35rem 0 0;
  font-size:clamp(1.06rem,1.7vw,1.28rem);
  line-height:1.75;
  color:rgba(18,62,73,.78);
  max-width:41rem;
}
.hero-factor-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin:1.75rem 0 0;
  padding:0;
  list-style:none;
}
.hero-factor-chips li{
  padding:.72rem 1rem;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(18,62,73,.10);
  box-shadow:0 18px 35px rgba(18,62,73,.06);
  color:#1c4d59;
  font-size:.97rem;
  font-weight:600;
}
.hero-persona-note{
  margin-top:1.2rem;
  color:rgba(18,62,73,.62);
  font-size:.96rem;
}
.hero-persona-actions,
.detail-hero-actions,
.hero-contact-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  margin-top:2rem;
}
.hero-persona-phone,
.detail-hero-phone{margin-top:1rem;color:#1c4d59;font-weight:600;}
.hero-persona-phone a,
.detail-hero-phone a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(28,77,89,.25)}
.hero-persona-phone a:hover,
.detail-hero-phone a:hover{border-color:currentColor}
.hero-persona-visual{
  position:relative;
  min-height:clamp(460px,56vw,620px);
}
.hero-product-stage{
  position:relative;
  width:min(100%,560px);
  margin-left:auto;
  min-height:inherit;
}
.hero-product-glow{
  position:absolute;
  inset:9% 8% auto auto;
  width:72%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.86) 0%, rgba(255,255,255,.45) 40%, rgba(255,255,255,0) 72%);
  filter:blur(10px);
  pointer-events:none;
}
.hero-product-main-card{
  position:absolute;
  right:0;
  top:0;
  width:min(100%,470px);
  aspect-ratio:4/5;
  border-radius:2rem;
  overflow:hidden;
  background:#fff;
  box-shadow:0 32px 64px rgba(18,62,73,.14);
  border:1px solid rgba(255,255,255,.85);
}
.hero-product-main-card img,
.hero-product-floating img{display:block;width:100%;height:100%;object-fit:cover;}
.hero-product-floating{
  position:absolute;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 20px 40px rgba(18,62,73,.11);
}
.hero-product-floating--one{
  left:0;
  bottom:1.5rem;
  width:min(40%,190px);
  aspect-ratio:1/1.12;
  border-radius:1.5rem;
}
.hero-product-floating--two{
  right:1rem;
  bottom:-1.1rem;
  width:min(42%,220px);
  aspect-ratio:1.08/1;
  border-radius:1.5rem;
}
.hero-product-caption{
  position:absolute;
  left:1rem;
  top:1rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .85rem;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(18,62,73,.08);
  border-radius:999px;
  box-shadow:0 10px 26px rgba(18,62,73,.08);
  color:#123e49;
  font-size:.9rem;
  font-weight:600;
}
.hero-product-caption::before{
  content:"";
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:#0d8d7d;
}
.hero-product-badge{
  position:absolute;
  right:-.5rem;
  top:2.6rem;
  max-width:220px;
  padding:1rem 1.15rem;
  border-radius:1.2rem;
  background:rgba(18,62,73,.94);
  color:#fff;
  box-shadow:0 18px 34px rgba(18,62,73,.22);
}
.hero-product-badge strong{display:block;font-size:1rem;margin-bottom:.3rem;}
.hero-product-badge span{display:block;font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.84)}
.hero-persona .hero-scroll{position:relative;z-index:1;margin-top:2rem;}
.hero-persona--detail{padding-top:3.2rem;padding-bottom:3.5rem;}
.hero-persona--detail .breadcrumb{
  position:relative;
  z-index:1;
  margin:0 0 1.65rem;
}
.hero-persona--detail .hero-persona-inner{grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);}
.hero-persona--detail .hero-product-main-card{aspect-ratio:4.1/5}
@media (max-width: 980px){
  .hero-persona::after{width:min(42vw,280px);left:-1.5rem;top:10%;transform:none}
  .hero-persona-inner,.hero-persona--detail .hero-persona-inner{grid-template-columns:1fr;}
  .hero-persona-copy{max-width:none}
  .hero-persona-visual{min-height:430px}
  .hero-product-stage{margin:0 auto;width:min(100%,520px)}
  .hero-product-main-card{position:relative;max-width:none;margin:0 auto}
  .hero-product-floating--one{left:.35rem;bottom:1rem}
  .hero-product-floating--two{right:.35rem;bottom:-.5rem}
  .hero-product-badge{right:.5rem;top:.75rem;max-width:190px}
}
@media (max-width: 720px){
  .hero-persona{padding-top:4rem;padding-bottom:3.4rem}
  .hero-persona-copy h1{font-size:clamp(2.35rem,12vw,3.25rem)}
  .hero-persona-copy .hero-subline,
  .hero-persona-copy .detail-intro,
  .hero-persona-text{font-size:1rem;line-height:1.68}
  .hero-factor-chips{gap:.55rem}
  .hero-factor-chips li{font-size:.9rem;padding:.65rem .9rem}
  .hero-persona-actions,.detail-hero-actions,.hero-contact-actions{flex-direction:column;align-items:flex-start}
  .hero-persona-visual{min-height:390px}
  .hero-product-main-card{width:100%;max-width:100%;aspect-ratio:5/6}
  .hero-product-floating--one{width:38%;border-radius:1.15rem}
  .hero-product-floating--two{width:42%;border-radius:1.15rem}
  .hero-product-badge{position:static;margin:1rem 0 0 auto;max-width:none;width:fit-content}
  .hero-product-caption{font-size:.84rem}
}
