:root{
  --mag:#E0207F; --mag-d:#B0105F; --pink:#FF6FB1; --blush:#FFF0F6; --blush-2:#FFE1EE; --cream:#FFF8FB;
  --plum:#3A0F2A; --plum-2:#5A1A42; --ink:#2B1022; --soft:#7A5468; --line:#F2CFE0; --white:#fff;
  --lime:#C7F25C; --mint:#2E9D6B;
  --head:"Syne", system-ui, sans-serif; --body:"Outfit", system-ui, sans-serif;
  --wide:1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--cream); color:var(--ink); font-family:var(--body); font-size:17.5px; line-height:1.68; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--head); font-weight:700; line-height:1.06; margin:0 0 .5em; letter-spacing:-.02em; color:var(--plum);}
h2{font-size:clamp(30px,4vw,52px);}
h3{font-family:var(--body); font-weight:700; font-size:clamp(19px,2vw,23px); letter-spacing:-.01em; margin-top:1.4em; line-height:1.25;}
p{margin:0 0 1em;}
a{color:var(--mag-d);}
img{max-width:100%; display:block; height:auto;}
.wrap{max-width:var(--wide); margin:0 auto; padding:0 24px;}
.icon{width:22px; height:22px; flex:none;}
section{padding:100px 0; scroll-margin-top:80px; position:relative;}
.pill{display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1.5px solid var(--line); color:var(--mag-d); font-weight:700; font-size:13.5px; padding:6px 14px; border-radius:40px; margin-bottom:18px;}
.pill i{width:8px; height:8px; border-radius:50%; background:var(--mag);}
.plum{background:var(--plum); color:#F3D9E6;}
.plum h2,.plum h3,.plum h4{color:#fff;}
.plum .pill{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#FFB3D6;}
.blush{background:var(--blush);}
.curve-line{position:absolute; pointer-events:none;}

/* header */
header.site{position:sticky; top:12px; z-index:40; margin:12px 16px 0;}
header.site .bar{max-width:var(--wide); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; background:rgba(255,255,255,.85); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:60px; padding:8px 8px 8px 22px; box-shadow:0 10px 30px rgba(224,32,127,.08);}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none; font-family:var(--head); font-weight:800; font-size:21px; color:var(--mag); letter-spacing:-.02em; font-style:italic;}
.logo svg{width:24px; height:30px;}
nav.main{display:flex; gap:4px;}
nav.main a{color:var(--soft); text-decoration:none; font-weight:600; font-size:14.5px; padding:8px 14px; border-radius:30px;}
nav.main a:hover{background:var(--blush); color:var(--mag-d);}
.btn-head{background:var(--mag); color:#fff; font-weight:700; font-size:14.5px; padding:11px 20px; border-radius:40px; cursor:pointer;}
.btn-head:hover{background:var(--mag-d);}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:14px; background:var(--mag); color:#fff; font-weight:700; font-size:17px; padding:18px 30px; border-radius:60px; cursor:pointer; text-decoration:none; box-shadow:0 14px 30px rgba(224,32,127,.35); transition:transform .15s, background .15s;}
.btn:hover{background:var(--mag-d); transform:translateY(-2px);}
.btn .icon{width:20px; height:20px;}
.btn.lime{background:var(--lime); color:var(--plum); box-shadow:0 14px 30px rgba(199,242,92,.35);}
.btn.lime:hover{background:#B8E64A;}
.btn-note{font-size:13.5px; color:var(--soft); margin:14px 0 0;}

/* hero */
.hero{position:relative; overflow:hidden; padding:56px 0 90px; margin-top:-80px; padding-top:140px; background:radial-gradient(ellipse at 80% 40%, #FFD3E7 0%, var(--cream) 55%);}
.hero .blob{position:absolute; right:-6%; top:6%; width:56%; aspect-ratio:1; background:linear-gradient(140deg,var(--pink),var(--mag)); border-radius:46% 54% 60% 40% / 52% 40% 60% 48%; animation:morph 14s ease-in-out infinite;}
@keyframes morph{0%,100%{border-radius:46% 54% 60% 40% / 52% 40% 60% 48%;} 50%{border-radius:58% 42% 38% 62% / 42% 60% 40% 58%;}}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;}
.hero h1{font-size:clamp(36px,4.6vw,62px); margin-bottom:18px;}
.hero h1 span{color:var(--mag); font-style:italic;}
.hero .sub{font-size:19px; color:var(--soft); max-width:560px;}
.hero .chips{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 28px; list-style:none; padding:0;}
.hero .chips li{display:flex; gap:8px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:40px; padding:8px 14px; font-size:14.5px; font-weight:600;}
.hero .chips .icon{width:18px; height:18px; color:var(--mag);}
.pricetag{display:inline-flex; align-items:center; gap:0; background:var(--white); border-radius:60px; padding:6px; box-shadow:0 10px 30px rgba(224,32,127,.12); margin-bottom:26px;}
.pricetag .old{padding:0 16px; color:var(--soft); text-decoration:line-through; white-space:nowrap;}
.pricetag .new{background:var(--plum); color:#fff; font-family:var(--head); font-weight:800; font-size:26px; padding:10px 20px; border-radius:50px; white-space:nowrap;}
.pricetag .save{padding:0 16px; color:var(--mag); font-weight:800;}
.hero-pack{position:relative; display:flex; justify-content:center; align-items:center; min-height:540px;}
.hero-pack img{position:relative; width:min(520px,100%); filter:drop-shadow(0 30px 40px rgba(90,26,66,.35)); z-index:1;}
.hero-pack svg.curves{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
.sticker{position:absolute; z-index:2; background:var(--lime); color:var(--plum); font-family:var(--head); font-weight:800; border-radius:50%; width:120px; height:120px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1; left:2%; bottom:10%; transform:rotate(-12deg); box-shadow:0 10px 24px rgba(58,15,42,.25);}
.sticker b{display:block; font-size:30px;}
.sticker small{font-size:11px; letter-spacing:.06em; text-transform:uppercase;}
.facts-row{position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr) 1.3fr; gap:12px; margin-top:30px;}
.facts-row .f{background:var(--white); border-radius:22px; padding:18px 20px; display:flex; gap:12px; align-items:center; font-weight:700; line-height:1.3; box-shadow:0 6px 20px rgba(224,32,127,.06);}
.facts-row .f .ic{width:42px; height:42px; border-radius:14px; background:var(--blush); color:var(--mag); display:flex; align-items:center; justify-content:center; flex:none;}
.facts-row .meta{background:var(--plum); color:#F3D9E6; border-radius:22px; padding:14px 20px; font-size:13px; line-height:1.6;}
.facts-row .meta b{color:#fff;}

/* what */
.what{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:start;}
.what .lead{font-size:20px;}
.card-spec{background:var(--white); border-radius:30px; padding:10px; box-shadow:0 20px 50px rgba(224,32,127,.1);}
.card-spec .hd{background:linear-gradient(120deg,var(--mag),var(--pink)); color:#fff; border-radius:24px; padding:20px 24px; display:flex; justify-content:space-between; align-items:center;}
.card-spec .hd b{font-family:var(--head); font-style:italic; font-size:26px;}
.card-spec .hd span{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.9;}
.card-spec dl{margin:0; padding:8px 18px 12px;}
.card-spec .r{display:grid; grid-template-columns:40% 60%; gap:12px; padding:12px 0; border-bottom:1px dashed var(--line); font-size:15.5px;}
.card-spec .r:last-child{border-bottom:none;}
.card-spec dt{color:var(--soft); font-weight:600;}
.card-spec dd{margin:0; font-weight:700;}
.for-whom{margin-top:26px; background:var(--blush); border-radius:24px; padding:24px 26px;}
.for-whom h3{margin-top:0;}
.for-whom p{margin:0;}

/* benefits marquee-ish grid */
.ben{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px;}
.ben div{border-radius:28px; padding:28px; font-weight:700; font-size:17.5px; line-height:1.4; min-height:170px; display:flex; flex-direction:column; justify-content:space-between; gap:16px;}
.ben div:nth-child(1){background:var(--mag); color:#fff;}
.ben div:nth-child(2){background:var(--white); color:var(--plum);}
.ben div:nth-child(3){background:var(--lime); color:var(--plum);}
.ben div:nth-child(4){background:var(--white); color:var(--plum);}
.ben div:nth-child(5){background:var(--plum); color:#fff;}
.ben div:nth-child(6){background:var(--pink); color:#fff;}
.ben b{font-family:var(--head); font-size:42px; line-height:.9; opacity:.9;}

/* ingredients horizontal scroller */
.scroller{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,1fr); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 2px 24px; margin-top:30px; scrollbar-width:thin; scrollbar-color:var(--pink) transparent;}
.ing{scroll-snap-align:start; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:30px; padding:28px; display:flex; flex-direction:column; gap:10px;}
.ing .leaf{width:72px; height:72px; border-radius:50%; background:linear-gradient(140deg,var(--pink),var(--mag)); display:flex; align-items:center; justify-content:center; color:#fff; margin-bottom:6px;}
.ing .leaf svg{width:38px; height:38px;}
.ing .no{font-family:var(--head); color:var(--lime); font-weight:700; font-size:14px;}
.ing h4{font-family:var(--head); font-size:26px; margin:0;}
.ing .latin{font-style:italic; color:#FFB3D6; font-size:15px;}
.ing p{margin:0; color:#E7C9D8; font-size:15.5px;}
.scroll-hint{font-size:13px; color:#C79AB2; margin-top:-6px;}
.know{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:30px; align-items:start;}
.know .box{background:rgba(255,255,255,.06); border-radius:26px; padding:26px 28px;}
.know h3{margin-top:0;}
.know p:last-child{margin:0;}
.label-quote{border-left:4px solid var(--lime); padding:6px 0 6px 22px; color:#fff; font-size:18px; font-weight:600;}
.label-quote small{display:block; color:#C79AB2; font-weight:500; font-size:13px; margin-top:6px;}

/* usage */
.use{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;}
.use h3{margin-top:0;}
.food-cloud{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0;}
.food-cloud span{background:var(--white); border:1.5px solid var(--line); border-radius:40px; padding:8px 16px; font-weight:700; font-size:15px;}
.food-cloud span.no{background:#FBE3E3; border-color:#F5C2C2; color:#9C2E2E; text-decoration:line-through; text-decoration-thickness:2px;}

/* reviews */
.rv{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:stretch;}
.rv .ra{background:var(--white); border-radius:30px; padding:32px;}
.rv .ra h3{margin-top:0;}
.rv .rb{background:linear-gradient(150deg,var(--mag),var(--plum)); color:#fff; border-radius:30px; padding:32px; display:flex; flex-direction:column; justify-content:flex-end;}
.rv .rb h3{color:#fff; margin-top:0;}
.rv .rb p{margin:0; color:#FFE1EE;}
.redflags{list-style:none; padding:0; margin:16px 0 0; display:grid; gap:10px;}
.redflags li{display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-radius:16px; background:var(--blush); font-weight:600; font-size:15.5px;}
.redflags li i{font-style:normal; font-weight:800; color:var(--mag);}

/* price */
.price-wrap{background:var(--white); border-radius:40px; padding:14px; display:grid; grid-template-columns:.95fr 1.05fr; gap:14px; box-shadow:0 30px 60px rgba(224,32,127,.12);}
.price-wrap .pic{background:linear-gradient(150deg,var(--blush-2),var(--blush)); border-radius:30px; display:flex; align-items:center; justify-content:center; padding:36px; position:relative; overflow:hidden;}
.price-wrap .pic img{max-width:380px; width:100%; position:relative;}
.price-wrap .info{padding:28px 30px;}
.price-wrap .info h3:first-child{margin-top:0;}
.switch{display:grid; grid-template-columns:1fr 1fr; background:var(--blush); border-radius:24px; padding:6px; margin:20px 0;}
.switch div{border-radius:20px; padding:14px 16px; text-align:center;}
.switch .o{color:var(--soft);}
.switch .o b{display:block; font-size:20px; text-decoration:line-through; color:var(--soft);}
.switch .n{background:var(--mag); color:#fff; box-shadow:0 8px 20px rgba(224,32,127,.35);}
.switch .n b{display:block; font-family:var(--head); font-size:28px; font-weight:800;}
.switch small{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;}
.perks{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px;}
.perks span{background:var(--blush); border-radius:30px; padding:6px 12px; font-size:14px; font-weight:700; color:var(--mag-d);}
.tips{list-style:none; padding:0; margin:12px 0 0;}
.tips li{display:flex; gap:12px; padding:10px 0; border-top:1px dashed var(--line); font-size:15.5px;}
.tips .icon{color:var(--mint); margin-top:3px; width:20px; height:20px;}

/* faq chat */
.chat{max-width:860px; margin:34px auto 0; display:grid; gap:18px;}
.qa{display:grid; gap:8px;}
.q{justify-self:end; max-width:80%; background:var(--mag); color:#fff; font-weight:700; padding:14px 20px; border-radius:24px 24px 6px 24px; font-size:17px; margin:0; font-family:var(--body);}
.a{justify-self:start; max-width:86%; background:var(--white); border:1px solid var(--line); padding:16px 20px; border-radius:24px 24px 24px 6px; font-size:16px; color:var(--ink); margin:0;}
.a::before{content:"Viproslim · redaksi"; display:block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mag); margin-bottom:4px;}

/* daily planner */
.day{display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:start;}
.timeline{list-style:none; padding:0; margin:20px 0 0; position:relative;}
.timeline::before{content:""; position:absolute; left:58px; top:8px; bottom:8px; width:2px; background:var(--line);}
.timeline li{display:grid; grid-template-columns:60px 1fr; gap:24px; padding:10px 0; position:relative;}
.timeline .t{font-family:var(--head); font-weight:700; color:var(--mag); font-size:15px; padding-top:12px;}
.timeline .c{background:var(--white); border-radius:20px; padding:14px 18px; position:relative;}
.timeline .c::before{content:""; position:absolute; left:-31px; top:18px; width:14px; height:14px; border-radius:50%; background:var(--mag); box-shadow:0 0 0 4px var(--blush);}
.timeline .c b{display:block; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft);}
.stop{background:var(--plum); color:#F3D9E6; border-radius:30px; padding:30px;}
.stop h3{color:#fff; margin-top:0;}
.stop ul{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:8px;}
.stop li{background:rgba(255,255,255,.1); border-radius:30px; padding:7px 14px; font-size:14.5px; font-weight:600; color:#fff;}

/* final */
.final{text-align:center; overflow:hidden; padding:120px 0;}
.final .wrap{position:relative;}
.final h2{font-size:clamp(36px,5.4vw,72px); max-width:900px; margin:0 auto 16px;}
.final h2 span{color:var(--lime); font-style:italic;}
.final p{font-size:19px; margin-bottom:30px;}
.final img{width:250px; margin:0 auto 20px; filter:drop-shadow(0 26px 30px rgba(0,0,0,.4));}
.sources{padding:52px 0; color:var(--soft); font-size:15px;}
.sources h2{font-size:20px;}

footer{background:#22081A; color:#B790A6; padding:46px 0; font-size:14px;}
footer .row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #45163A;}
footer .legal{display:flex; gap:20px; flex-wrap:wrap;}
footer a{color:#F8DCEA;}
footer p{max-width:900px; margin:0 0 10px;}

.sticky-cta{display:none; position:fixed; left:12px; right:12px; bottom:12px; z-index:50; background:var(--plum); border-radius:60px; padding:7px 7px 7px 22px; box-shadow:0 14px 34px rgba(58,15,42,.4);}
.sticky-cta .row{display:flex; justify-content:space-between; align-items:center; gap:10px;}
.sticky-cta .p{font-family:var(--head); font-weight:800; color:#fff; font-size:17px; line-height:1.1; white-space:nowrap;}
.sticky-cta .p s{display:block; font-family:var(--body); font-size:12px; color:#C79AB2; font-weight:500;}
.sticky-cta .btn{padding:12px 18px; font-size:15px; box-shadow:none;}

@media (max-width:1060px){
  nav.main{display:none;}
  .facts-row{grid-template-columns:repeat(3,1fr);}
  .facts-row .meta{grid-column:1 / -1;}
}
@media (max-width:860px){
  body{font-size:16.5px;}
  section{padding:64px 0;}
  .hero{padding-top:110px; padding-bottom:60px;}
  .hero .blob{width:120%; right:-40%; top:2%;}
  .hero .wrap,.what,.know,.use,.rv,.price-wrap,.day{grid-template-columns:1fr;}
  .hero-pack{order:-1; min-height:360px;}
  .hero-pack img{width:min(360px,100%);}
  .sticker{width:90px; height:90px;} .sticker b{font-size:22px;}
  .facts-row{grid-template-columns:1fr;}
  .ben{grid-template-columns:1fr 1fr;}
  .price-wrap{border-radius:30px;}
  .price-wrap .info{padding:20px 14px;}
  .btn-head{display:none;}
  header.site .bar{padding:10px 18px;}
  .sticky-cta{display:block;}
  footer{padding-bottom:100px;}
  .q,.a{max-width:94%;}
}
@media (max-width:520px){
  .ben{grid-template-columns:1fr;}
  .card-spec .r{grid-template-columns:1fr; gap:2px;}
  .pricetag .new{font-size:20px; padding:8px 14px;} .pricetag .old,.pricetag .save{padding:0 10px; font-size:14px;}
  .hero .btn{width:100%; justify-content:center;}
  .switch .n b{font-size:22px;} .switch .o b{font-size:16px;}
  .scroller{grid-auto-columns:85%;}
}
:focus-visible{outline:3px solid var(--lime); outline-offset:3px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} .hero .blob{animation:none;}}

/* legal */
.legal-page{background:var(--cream);}
.legal-hero{background:linear-gradient(140deg,var(--pink),var(--mag)); color:#fff; padding:0 0 80px; border-radius:0 0 40px 40px;}
.legal-hero .bar{display:flex; justify-content:space-between; align-items:center; height:76px; gap:16px;}
.legal-hero .logo{color:#fff;}
.legal-hero .back{color:var(--mag-d); background:#fff; text-decoration:none; font-weight:700; font-size:14px; padding:8px 16px; border-radius:30px; white-space:nowrap;}
.legal-hero h1{color:#fff; font-size:clamp(32px,5vw,56px); margin:30px 0 6px;}
.legal-hero p{margin:0; color:#FFE1EE;}
.legal-body{max-width:820px; margin:-44px auto 0; background:#fff; border-radius:32px; padding:44px 48px; box-shadow:0 20px 50px rgba(224,32,127,.12); position:relative;}
.legal-body h2{font-size:23px; margin-top:1.6em;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p,.legal-body li{color:var(--soft);}
.legal-nav{max-width:820px; margin:26px auto 60px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:0 16px;}
.legal-nav a{background:#fff; border:1px solid var(--line); padding:8px 16px; border-radius:30px; text-decoration:none; font-weight:700; font-size:14px; color:var(--plum);}
.legal-nav a[aria-current]{background:var(--mag); border-color:var(--mag); color:#fff;}
.mailbox{display:flex; gap:16px; align-items:center; background:var(--blush); border-radius:22px; padding:20px 22px; margin:18px 0;}
.mailbox .ic{width:52px; height:52px; border-radius:16px; background:var(--mag); color:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
.mailbox b{display:block; font-size:17px; overflow-wrap:anywhere;}
@media (max-width:640px){ .legal-body{padding:28px 22px; margin:-44px 14px 0;} }

.hero .wrap.facts-wrap{display:block;}
.hero h1{font-size:clamp(34px,4.2vw,58px);}