/* ===== MARISSA HOME — Premium Botanical Wellness ===== */

/* reveal animasi */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.tampil{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}.reveal.d4{transition-delay:.48s}

/* ===== HERO ===== */
.mh-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 70% 10%, #FCE4F1 0%, transparent 60%),
    radial-gradient(ellipse 70% 70% at 10% 90%, #FBEFD6 0%, transparent 55%),
    linear-gradient(160deg, #fff 0%, #FFF6FB 45%, #FFF8E7 100%);
  padding:70px 0 120px;
}
.mh-hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;position:relative;z-index:5}
.mh-eyebrow{
  display:inline-block;font-family:'Fredoka';font-weight:600;letter-spacing:2px;
  font-size:.78rem;color:var(--pink);background:rgba(233,30,140,.08);
  padding:8px 18px;border-radius:30px;margin-bottom:20px;
}
.mh-hero-teks h1{
  font-size:clamp(2.6rem,5.5vw,4.3rem);line-height:1.02;color:var(--hijau);
  font-weight:700;letter-spacing:-1.5px;margin-bottom:20px;
}
.mh-hero-teks h1 em{
  font-style:normal;color:var(--pink);position:relative;
  background:linear-gradient(120deg,var(--pink),#FF6FB5);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.mh-bunga{font-size:.6em;-webkit-text-fill-color:initial}
.mh-hero-teks>p{font-size:1.12rem;color:#5a5a5a;max-width:480px;margin-bottom:30px;line-height:1.7}
.mh-hero-teks p strong{color:var(--hijau)}
.mh-hero-btn{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:30px}
.mh-btn-utama{
  display:inline-block;background:linear-gradient(135deg,var(--pink),#C71585);color:#fff;
  font-family:'Fredoka';font-weight:600;font-size:1.05rem;padding:16px 34px;border-radius:50px;
  box-shadow:0 10px 30px rgba(233,30,140,.35);transition:transform .25s,box-shadow .25s;
}
.mh-btn-utama:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(233,30,140,.45)}
.mh-btn-pautan{font-family:'Fredoka';font-weight:600;color:var(--hijau);border-bottom:2px solid var(--gold);padding-bottom:3px}
.mh-trust{display:flex;flex-wrap:wrap;gap:8px 22px}
.mh-trust span{font-size:.85rem;color:#6a6a6a;font-weight:600}

/* visual produk */
.mh-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px}
.mh-glow{position:absolute;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(233,30,140,.22),transparent 70%);filter:blur(20px);animation:nadi 5s ease-in-out infinite}
@keyframes nadi{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.08);opacity:1}}
.mh-produk-bulat{
  position:relative;width:340px;height:340px;border-radius:50%;overflow:hidden;
  border:10px solid #fff;box-shadow:0 25px 60px rgba(27,77,46,.22);z-index:2;
  animation:apung 6s ease-in-out infinite;
}
.mh-produk-bulat img{width:100%;height:100%;object-fit:cover}
@keyframes apung{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.mh-tag{
  position:absolute;background:#fff;padding:10px 18px;border-radius:40px;font-family:'Fredoka';
  font-weight:600;font-size:.9rem;box-shadow:0 8px 22px rgba(0,0,0,.12);z-index:3;
}
.mh-tag1{top:30px;right:0;color:var(--pink);animation:apung 6s ease-in-out infinite .5s}
.mh-tag2{bottom:40px;left:0;color:var(--hijau);animation:apung 6s ease-in-out infinite 1s}

/* botani SVG */
.botani{position:absolute;z-index:1;pointer-events:none}
.botani.b1{top:-20px;left:-30px;width:200px;animation:goyang 8s ease-in-out infinite}
.botani.b2{bottom:60px;right:-20px;width:170px;animation:goyang 9s ease-in-out infinite reverse}
@keyframes goyang{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* kelopak melayang */
.petal{position:absolute;width:16px;height:16px;background:radial-gradient(circle at 30% 30%,#FF8FC4,#E91E8C);
  border-radius:0 70% 0 70%;opacity:.5;z-index:1;animation:gugur linear infinite}
.petal.p1{left:15%;animation-duration:11s;animation-delay:0s}
.petal.p2{left:40%;animation-duration:14s;animation-delay:3s;width:12px;height:12px}
.petal.p3{left:65%;animation-duration:9s;animation-delay:1.5s}
.petal.p4{left:85%;animation-duration:13s;animation-delay:5s;width:20px;height:20px}
@keyframes gugur{0%{top:-30px;transform:rotate(0) translateX(0);opacity:0}10%{opacity:.55}90%{opacity:.4}100%{top:110%;transform:rotate(360deg) translateX(40px);opacity:0}}

.mh-wave{position:absolute;bottom:-1px;left:0;width:100%;line-height:0}
.mh-wave svg{width:100%;height:70px}

/* ===== KELEBIHAN ===== */
.mh-kelebihan{background:var(--krim);padding:10px 0 50px}
.mh-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:-50px;position:relative;z-index:6}
.mh-fitur{background:#fff;border-radius:22px;padding:30px 22px;text-align:center;
  box-shadow:0 12px 35px rgba(27,77,46,.08);border:1px solid rgba(240,208,128,.3);transition:transform .3s}
.mh-fitur:hover{transform:translateY(-8px)}
.mh-ikon{font-size:2.6rem;margin-bottom:12px}
.mh-fitur h4{font-size:1.05rem;margin-bottom:8px}
.mh-fitur p{font-size:.86rem;color:#777;line-height:1.5}

/* ===== TAJUK SEKSYEN ===== */
.mh-tajuk{text-align:center;margin-bottom:40px}
.mh-label{display:inline-block;font-family:'Fredoka';font-weight:600;letter-spacing:3px;font-size:.78rem;color:var(--pink);margin-bottom:10px}
.mh-tajuk h2{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:10px;letter-spacing:-.5px}
.mh-tajuk>p{color:#888;font-size:1.02rem}

/* ===== PRODUK SEKSYEN ===== */
.mh-produk-seksyen{padding:70px 0;background:var(--krim)}
.kad-img{position:relative}
.kad-lencana{position:absolute;top:12px;left:12px;z-index:2;background:linear-gradient(135deg,var(--pink),#C71585);
  color:#fff;font-family:'Fredoka';font-weight:600;font-size:.72rem;padding:6px 14px;border-radius:30px;
  box-shadow:0 4px 12px rgba(233,30,140,.4)}
.kad{border:1px solid rgba(240,208,128,.25)}
.kad-harga{margin-bottom:14px}

/* ===== KENAPA (pink lembut) ===== */
.mh-kenapa{background:linear-gradient(135deg,#FCE4F1,#FFF1F8);padding:80px 0;position:relative;overflow:hidden}
.mh-kenapa::before{content:"";position:absolute;top:-80px;right:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(233,30,140,.12),transparent 70%)}
.mh-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.mh-nilai{background:#fff;border:1px solid rgba(233,30,140,.12);
  border-radius:22px;padding:34px 28px;transition:transform .3s,box-shadow .3s;box-shadow:0 8px 24px rgba(233,30,140,.06)}
.mh-nilai:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(233,30,140,.14)}
.mh-no{font-family:'Fredoka';font-size:2.4rem;font-weight:700;color:var(--pink);opacity:.85;margin-bottom:10px}
.mh-nilai h4{color:var(--hijau);font-size:1.2rem;margin-bottom:10px}
.mh-nilai p{color:#666;font-size:.92rem;line-height:1.6}

/* ===== CTA ===== */
.mh-cta{background:var(--krim);padding:70px 0}
.mh-cta-in{background:linear-gradient(135deg,#FCE4F1,#FBEFD6);border-radius:30px;padding:56px 30px;text-align:center;
  box-shadow:0 20px 50px rgba(233,30,140,.12);position:relative;overflow:hidden}
.mh-cta-in h2{font-size:clamp(1.7rem,3.5vw,2.4rem);margin-bottom:12px}
.mh-cta-in p{color:#6a6a6a;font-size:1.05rem;margin-bottom:26px;max-width:520px;margin-left:auto;margin-right:auto}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .mh-hero-in{grid-template-columns:1fr;text-align:center;gap:40px}
  .mh-hero-teks .mh-hero-btn,.mh-trust{justify-content:center}
  .mh-hero-teks>p{margin-left:auto;margin-right:auto}
  .mh-grid4{grid-template-columns:repeat(2,1fr)}
  .mh-grid3{grid-template-columns:1fr}
}
@media(max-width:520px){
  .mh-hero{padding:46px 0 90px}
  .mh-produk-bulat{width:260px;height:260px}
  .mh-glow{width:300px;height:300px}
  .mh-grid4{grid-template-columns:1fr}
  .mh-tag1{right:-6px}.mh-tag2{left:-6px}
  .mh-trust{flex-direction:column;gap:8px}
}